/* ==========================================================================
   Lucid Synergy — V4 design system + home page
   Ported from Figma "V4 Home — Desktop 1440" (node 74:122, page "V4 — Cal Sans").
   Editorial light UI: Cal Sans display / Instrument Sans text,
   mint (#ecf7f9) and white sections, teal -> indigo brand gradient.
   ========================================================================== */

:root {
	/* Ink */
	--v4-ink: #11141c;
	--v4-body: #59637a;
	--v4-muted: #8a93a8;

	/* Brand */
	--v4-teal: #2e93a8;
	--v4-teal-light: #62c3d2;
	--v4-indigo: #414997;
	--v4-indigo-light: #5a63b4;
	--v4-pink: #e9197f;
	--v4-pink-deep: #be0f65;
	--v4-green: #2f7d5c;
	--v4-green-light: #2f9e6e;

	--v4-grad: linear-gradient(90deg, #62c3d2 0%, #5a63b4 100%);
	--v4-grad-text: linear-gradient(90deg, #2e93a8 0%, #414997 100%);

	/* Surfaces */
	--v4-mint: #ecf7f9;
	--v4-lilac: #f1f1fb;
	--v4-tile-teal: #d6edf2;
	--v4-tile-pink: #fdecf4;
	--v4-border: #e8ecf3;
	--v4-rule: #cfe3e8;

	/* Night (footer) */
	--v4-night: #11141c;
	--v4-night-line: #262b36;
	--v4-night-muted: #6e7789;
	--v4-night-faint: #565e6e;
	--v4-night-text: #cdd5e2;

	/* Elevation */
	--elev-2: 0 2px 4px rgba(17, 20, 28, .05), 0 10px 24px rgba(17, 20, 28, .08);
	--elev-3: 0 4px 8px rgba(17, 20, 28, .05), 0 20px 44px rgba(20, 26, 46, .12);
	--elev-brand: 0 6px 14px rgba(74, 82, 150, .28), 0 18px 40px rgba(74, 82, 150, .3);

	/* Type */
	--f-display: "Cal Sans", "Poppins", "Avenir Next", "Segoe UI", Helvetica, Arial, sans-serif;
	--f-body: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* Layout */
	--v4-pad: clamp(20px, 5vw, 72px);
	--v4-max: 1440px;
}

/* --------------------------------------------------------------------------
   Reset / theme plumbing
   -------------------------------------------------------------------------- */

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

/* TT5 spaces top-level blocks; our sections own their rhythm. */
.wp-site-blocks > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.wp-site-blocks {
	overflow-x: clip;
	background: #fff;
}

.v4 {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.v4 * {
	box-sizing: border-box;
}

.v4 img {
	display: block;
	max-width: 100%;
}

.v4 p {
	margin: 0;
}

.v4 h1,
.v4 h2,
.v4 h3 {
	margin: 0;
	font-family: var(--f-display);
	font-weight: 400;
}

.v4 ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.v4 a {
	color: inherit;
	text-decoration: none;
}

.v4 button {
	font: inherit;
	color: inherit;
	border: 0;
	background: none;
	cursor: pointer;
}

.v4-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* TT5 outlines bare :focus; keep the ring for keyboard users only. */
.v4 :focus:not(:focus-visible) {
	outline: none;
}

.v4 :focus-visible {
	outline: 2px solid var(--v4-indigo);
	outline-offset: 3px;
	border-radius: 6px;
}

.v4-shell {
	width: 100%;
	max-width: var(--v4-max);
	margin-inline: auto;
	padding-inline: var(--v4-pad);
}

/* --------------------------------------------------------------------------
   Type scale (1:1 with the "V4 /" Figma text styles)
   -------------------------------------------------------------------------- */

.v4-display-xl {
	font-family: var(--f-display);
	font-weight: 400;
	font-size: clamp(44px, 5.28vw, 76px);
	line-height: 1;
	letter-spacing: -.025em;
	color: var(--v4-ink);
}

.v4-display-l {
	font-family: var(--f-display);
	font-weight: 400;
	font-size: clamp(34px, 3.75vw, 54px);
	line-height: 1.06;
	letter-spacing: -.022em;
}

.v4-h2 {
	font-family: var(--f-display);
	font-weight: 400;
	font-size: clamp(30px, 2.78vw, 40px);
	line-height: 1.12;
	letter-spacing: -.018em;
	color: var(--v4-ink);
}

.v4-h3 {
	font-family: var(--f-display);
	font-weight: 400;
	font-size: 22px;
	line-height: 1.3;
	letter-spacing: -.01em;
	color: var(--v4-ink);
}

.v4-quote {
	font-family: var(--f-display);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.38;
	letter-spacing: -.006em;
	color: var(--v4-ink);
}

.v4-body-l {
	font-size: 18px;
	line-height: 1.66;
	letter-spacing: -.001em;
	color: var(--v4-body);
}

.v4-body-m {
	font-size: 16px;
	line-height: 1.68;
	color: var(--v4-body);
}

.v4-body-s {
	font-size: 14px;
	line-height: 1.62;
	color: var(--v4-body);
}

.v4-body-xs {
	font-size: 12px;
	line-height: 1.55;
	color: var(--v4-muted);
}

.v4-grad-text {
	background: var(--v4-grad-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* Eyebrow pill */
.v4-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 8px 16px 8px 12px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 11.5px;
	line-height: 1.2;
	letter-spacing: .11em;
	text-transform: uppercase;
}

.v4-eyebrow::before {
	content: "";
	flex: none;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: currentColor;
}

.v4-eyebrow--white {
	background: #fff;
}

.v4-eyebrow--lilac {
	background: var(--v4-lilac);
}

.v4-eyebrow--mint {
	background: var(--v4-mint);
}

.v4-eyebrow--indigo {
	color: var(--v4-indigo);
}

.v4-eyebrow--indigo::before {
	background: var(--v4-indigo-light);
}

.v4-eyebrow--pink {
	color: var(--v4-pink-deep);
}

.v4-eyebrow--pink::before {
	background: var(--v4-pink);
}

.v4-eyebrow--teal {
	color: var(--v4-teal);
}

.v4-stars {
	font-weight: 500;
	line-height: 1.2;
	color: var(--v4-pink);
	letter-spacing: .02em;
}

/* --------------------------------------------------------------------------
   Buttons / links
   -------------------------------------------------------------------------- */

.v4-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	border-radius: 999px;
	font-family: var(--f-display);
	font-weight: 400;
	font-size: 17px;
	line-height: 1.2;
	letter-spacing: -.004em;
	white-space: nowrap;
	transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.v4-btn--primary {
	padding: 20px 34px;
	background: var(--v4-grad);
	color: #fff;
	box-shadow: var(--elev-brand);
}

.v4-btn--primary:hover {
	transform: translateY(-1px);
	filter: saturate(1.06);
}

.v4-btn--primary:active {
	transform: translateY(1px);
}

.v4-btn__rule {
	width: 1px;
	height: 18px;
	background: rgba(255, 255, 255, .4);
}

.v4-btn--dark {
	padding: 14px 26px;
	background: var(--v4-ink);
	color: #fff;
	box-shadow: var(--elev-2);
}

.v4-btn--dark:hover {
	transform: translateY(-1px);
}

/* Underlined text link */
.v4-link {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
	font-family: var(--f-display);
	font-weight: 400;
	font-size: 17px;
	line-height: 1.2;
	letter-spacing: -.004em;
	color: var(--v4-ink);
	white-space: nowrap;
}

.v4-link::after {
	content: "";
	display: block;
	width: 100%;
	height: 1.5px;
	background: var(--v4-ink);
	transition: opacity .18s ease;
}

.v4-link:hover::after {
	opacity: .5;
}

/* --------------------------------------------------------------------------
   Nav
   -------------------------------------------------------------------------- */

.v4-nav-bar {
	background: var(--v4-mint);
}

.v4-nav {
	display: flex;
	align-items: center;
	gap: 40px;
	padding-block: 22px;
}

.v4-nav__logo {
	flex: none;
}

.v4-nav__logo img {
	width: 103px;
	height: 36px;
}

.v4-nav__links {
	display: flex;
	align-items: center;
	gap: 34px;
}

.v4-nav__link {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	font-family: var(--f-display);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.2;
	letter-spacing: -.004em;
	color: var(--v4-body);
	white-space: nowrap;
	transition: color .18s ease;
}

.v4-nav__link::after {
	content: "";
	display: block;
	width: 18px;
	height: 2.5px;
	border-radius: 999px;
	background: transparent;
	transition: background .18s ease;
}

.v4-nav__link:hover {
	color: var(--v4-ink);
}

.v4-nav__link.is-active {
	color: var(--v4-ink);
}

.v4-nav__link.is-active::after {
	background: var(--v4-pink);
}

.v4-nav__spacer {
	flex: 1 0 0;
	min-width: 0;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.v4-hero {
	position: relative;
	background: var(--v4-mint);
	overflow: hidden;
}

.v4-hero__inner {
	display: flex;
	align-items: center;
	min-height: 700px;
	padding-right: 0;
}

.v4-hero__copy {
	display: flex;
	flex: none;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	width: 560px;
	max-width: 100%;
	padding-block: 60px;
}

.v4-hero__title {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.v4-hero__lede {
	max-width: 470px;
}

.v4-hero__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
	padding-top: 8px;
}

.v4-trust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
	padding-top: 10px;
}

.v4-trust li {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 14px;
	line-height: 1.62;
	color: var(--v4-body);
	white-space: nowrap;
}

.v4-trust i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--v4-teal);
}

.v4-trust li:nth-child(1) i {
	background: var(--v4-green-light);
}

.v4-trust li:nth-child(3) i {
	background: var(--v4-indigo);
}

/* Hero visual — 794 x 700 in Figma; children keep their designed
   positions as percentages of that box so it scales as one unit. */
.v4-hero__visual {
	position: relative;
	flex: 1 1 auto;
	align-self: stretch;
	min-height: 700px;
}

.v4-hero__watermark {
	position: absolute;
	left: -11.25%;
	top: 17.23%;
	width: 141.6%;
	height: 59.04%;
	opacity: .17;
	object-fit: contain;
	pointer-events: none;
}

.v4-hero__bottle {
	position: absolute;
	left: 18.61%;
	top: 4.06%;
	width: 44.42%;
	height: 84.91%;
	object-fit: contain;
	filter: drop-shadow(24px 26px 46px rgba(20, 26, 46, .16));
}

.v4-chip {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 15px 24px 15px 18px;
	border-radius: 20px;
	background: #fff;
	box-shadow: var(--elev-3);
	white-space: nowrap;
}

.v4-chip__icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 12px;
}

.v4-chip__icon::before {
	content: "";
	width: 13px;
	height: 13px;
	border-radius: 50%;
}

.v4-chip__icon--teal {
	background: var(--v4-tile-teal);
}

.v4-chip__icon--teal::before {
	background: var(--v4-teal);
}

.v4-chip__icon--pink {
	background: var(--v4-tile-pink);
}

.v4-chip__icon--pink::before {
	background: var(--v4-pink);
}

.v4-chip strong {
	display: block;
	font-weight: 500;
	font-size: 14px;
	line-height: 1.2;
	color: var(--v4-ink);
}

.v4-chip span {
	display: block;
	margin-top: 3px;
	font-size: 12px;
	line-height: 1.55;
	color: var(--v4-muted);
}

.v4-chip--a {
	left: 0;
	top: 30.57%;
}

.v4-chip--b {
	left: 51.89%;
	top: 64.57%;
}

/* --------------------------------------------------------------------------
   Section — Benefits
   -------------------------------------------------------------------------- */

.v4-benefits {
	position: relative;
	background: #fff;
	overflow: hidden;
	isolation: isolate;
}

.v4-benefits__pattern {
	position: absolute;
	z-index: -1;
	opacity: .11;
	pointer-events: none;
}

.v4-benefits__pattern--a {
	right: -14%;
	top: -18%;
	width: 780px;
	height: 780px;
}

.v4-benefits__pattern--b {
	left: -12%;
	bottom: -24%;
	width: 640px;
	height: 640px;
}

.v4-benefits__inner {
	display: flex;
	flex-direction: column;
	gap: 56px;
	padding-block: 108px;
}

.v4-benefits__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	max-width: 680px;
}

.v4-benefit-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
	align-items: start;
}

.v4-benefit {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.v4-benefit__photo {
	width: 100%;
	height: 300px;
	border-radius: 18px;
	box-shadow: var(--elev-2);
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   Section — What's inside
   -------------------------------------------------------------------------- */

.v4-inside {
	background: var(--v4-mint);
}

.v4-inside__inner {
	display: flex;
	flex-direction: column;
	gap: 52px;
	padding-block: 108px;
}

.v4-inside__head {
	display: flex;
	align-items: flex-start;
	gap: 72px;
}

.v4-inside__head-copy {
	display: flex;
	flex: none;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	width: 520px;
	max-width: 100%;
}

.v4-inside__note {
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	min-width: 0;
}

.v4-stats {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 28px;
}

.v4-stats li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	line-height: 1.62;
	color: var(--v4-body);
	white-space: nowrap;
}

.v4-stats b {
	font-family: var(--f-display);
	font-weight: 400;
	font-size: 24px;
	line-height: 1.2;
	letter-spacing: -.01em;
	color: var(--v4-indigo);
}

.v4-ingredients {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	align-items: stretch;
}

.v4-ingredient {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 26px 26px 28px;
	border-radius: 20px;
	background: #fff;
}

.v4-ingredient::before {
	content: "";
	display: block;
	width: 30px;
	height: 3px;
	border-radius: 999px;
	background: currentColor;
}

.v4-ingredient__kicker {
	font-weight: 600;
	font-size: 11.5px;
	line-height: 1.2;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: currentColor;
}

.v4-ingredient--teal {
	color: var(--v4-teal);
}

.v4-ingredient--indigo {
	color: var(--v4-indigo);
}

.v4-ingredient--green {
	color: var(--v4-green);
}

.v4-ingredient--pink {
	color: var(--v4-pink-deep);
}

.v4-panel-link {
	display: flex;
	align-items: center;
	gap: 20px;
}

.v4-panel-link .v4-link::after {
	width: 288px;
	max-width: 100%;
}

.v4-panel-link p {
	flex: 1 0 0;
	min-width: 0;
	font-size: 14px;
	line-height: 1.62;
	color: var(--v4-muted);
}

/* --------------------------------------------------------------------------
   Section — Proof
   -------------------------------------------------------------------------- */

.v4-proof {
	background: #fff;
}

.v4-proof__inner {
	display: flex;
	flex-direction: column;
	gap: 48px;
	padding-top: 104px;
}

.v4-proof__head {
	display: flex;
	align-items: center;
	gap: 40px;
}

.v4-proof__head-copy {
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	min-width: 0;
}

.v4-score {
	display: flex;
	flex: none;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
	white-space: nowrap;
}

.v4-score__value {
	font-family: var(--f-display);
	font-weight: 400;
	font-size: 40px;
	line-height: 1.1;
	letter-spacing: -.018em;
	color: var(--v4-ink);
}

.v4-score .v4-stars {
	font-size: 14px;
}

.v4-quote-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	align-items: stretch;
}

.v4-quote-card {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 30px;
	border: 1px solid var(--v4-border);
	border-radius: 22px;
	background: #fff;
	box-shadow: var(--elev-2);
}

.v4-quote-card .v4-stars {
	font-size: 12px;
}

.v4-reviewer {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: auto;
}

.v4-avatar {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
}

.v4-avatar--a {
	background: linear-gradient(126.2deg, #bfdee4 0%, #3f6875 100%);
}

.v4-avatar--b {
	background: linear-gradient(126.2deg, #c3c7e4 0%, #4e5583 100%);
}

.v4-avatar--c {
	background: linear-gradient(126.2deg, #efc9da 0%, #8a5270 100%);
}

.v4-reviewer__name {
	font-weight: 500;
	font-size: 14px;
	line-height: 1.2;
	color: var(--v4-ink);
}

.v4-reviewer__meta {
	margin-top: 2px;
	font-size: 12px;
	line-height: 1.55;
	color: var(--v4-muted);
}

/* Free-standing portrait between Proof and FAQ */
.v4-portrait {
	display: flex;
	justify-content: center;
	background: #fff;
}

.v4-portrait img {
	width: 388px;
	height: 464px;
	object-fit: cover;
	object-position: top center;
}

/* --------------------------------------------------------------------------
   Section — FAQ
   -------------------------------------------------------------------------- */

.v4-faq {
	background: var(--v4-mint);
}

.v4-faq__inner {
	display: flex;
	align-items: flex-start;
	gap: 80px;
	padding-block: 100px 104px;
}

.v4-faq__copy {
	display: flex;
	flex: none;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	width: 380px;
	max-width: 100%;
}

.v4-accordion {
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	min-width: 0;
	border-top: 1px solid var(--v4-rule);
}

.v4-faq-item {
	border-bottom: 1px solid var(--v4-rule);
	padding-block: 26px;
}

.v4-faq-item > summary {
	display: flex;
	align-items: center;
	gap: 24px;
	list-style: none;
	cursor: pointer;
}

.v4-faq-item > summary::-webkit-details-marker {
	display: none;
}

.v4-faq-item > summary h3 {
	flex: 1 0 0;
	min-width: 0;
}

.v4-faq-item__toggle {
	flex: none;
	font-family: var(--f-display);
	font-weight: 400;
	font-size: 22px;
	line-height: 1.3;
	color: var(--v4-pink-deep);
}

.v4-faq-item__toggle::before {
	content: "+";
}

.v4-faq-item[open] .v4-faq-item__toggle::before {
	content: "\2212";
}

.v4-faq-item__answer {
	margin-top: 14px;
	max-width: 756px;
}

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

.v4-footer {
	background: var(--v4-night);
	color: var(--v4-night-text);
}

.v4-footer__inner {
	display: flex;
	flex-direction: column;
	gap: 52px;
	padding-block: 76px 44px;
}

.v4-footer__cta {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-bottom: 48px;
	border-bottom: 1px solid var(--v4-night-line);
}

.v4-footer__cta h2 {
	color: #fff;
}

.v4-footer__cta p {
	font-size: 16px;
	line-height: 1.68;
	color: var(--v4-muted);
}

.v4-footer__top {
	display: flex;
	align-items: flex-start;
	gap: 64px;
}

.v4-footer__brand {
	display: flex;
	flex: none;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	width: 340px;
	max-width: 100%;
}

.v4-footer__brand img {
	width: 109.8px;
	height: 38px;
}

.v4-footer__brand p {
	font-size: 14px;
	line-height: 1.62;
	color: var(--v4-muted);
}

.v4-footer__col {
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}

.v4-footer__col h2 {
	font-family: var(--f-body);
	font-weight: 600;
	font-size: 11.5px;
	line-height: 1.2;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--v4-night-muted);
}

.v4-footer__col a {
	font-size: 14px;
	line-height: 1.62;
	color: var(--v4-night-text);
	transition: color .18s ease;
}

.v4-footer__col a:hover {
	color: #fff;
}

.v4-footer__rule {
	height: 1px;
	background: var(--v4-night-line);
}

.v4-legal {
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-size: 12px;
	line-height: 1.55;
}

.v4-legal p:first-child {
	color: var(--v4-night-muted);
}

.v4-legal p:last-child {
	color: var(--v4-night-faint);
}

.v4-footer__bottom {
	display: flex;
	align-items: center;
	gap: 24px;
	padding-top: 4px;
	font-size: 12px;
	line-height: 1.55;
}

.v4-footer__bottom p {
	flex: 1 0 0;
	min-width: 0;
	color: var(--v4-night-muted);
}

.v4-footer__legal-links {
	display: flex;
	gap: 22px;
	color: var(--v4-muted);
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1280px) {
	.v4-ingredients {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.v4-inside__head {
		flex-direction: column;
		gap: 32px;
	}

	.v4-inside__head-copy {
		width: 100%;
	}
}

@media (max-width: 1100px) {
	.v4-hero__inner {
		flex-direction: column;
		align-items: stretch;
		min-height: 0;
	}

	.v4-hero__copy {
		width: 100%;
		padding-block: 56px 0;
	}

	.v4-hero__visual {
		min-height: 0;
		aspect-ratio: 794 / 700;
		margin-inline: calc(var(--v4-pad) * -1) 0;
	}

	.v4-faq__inner {
		flex-direction: column;
		gap: 40px;
	}

	.v4-faq__copy {
		width: 100%;
	}

	.v4-footer__top {
		flex-wrap: wrap;
		gap: 40px;
	}

	.v4-footer__brand {
		width: 100%;
	}

	.v4-footer__col {
		flex: 1 0 40%;
	}
}

@media (max-width: 900px) {
	.v4-nav__links {
		display: none;
	}

	.v4-benefit-grid,
	.v4-quote-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.v4-benefits__inner,
	.v4-inside__inner {
		padding-block: 72px;
	}

	.v4-proof__inner {
		padding-top: 72px;
	}

	.v4-faq__inner {
		padding-block: 72px;
	}

	.v4-proof__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
	}

	.v4-score {
		align-items: flex-start;
	}

	.v4-panel-link {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}

	.v4-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}
}

@media (max-width: 720px) {
	.v4-chip {
		padding: 11px 16px 11px 12px;
		gap: 10px;
		border-radius: 16px;
	}

	.v4-chip__icon {
		width: 28px;
		height: 28px;
		border-radius: 9px;
	}

	.v4-chip strong {
		font-size: 12px;
	}

	.v4-chip span {
		font-size: 10px;
	}

	.v4-ingredients {
		grid-template-columns: minmax(0, 1fr);
	}

	.v4-hero__cta {
		gap: 18px;
	}

	.v4-portrait img {
		width: 260px;
		height: 311px;
	}

	.v4-footer__col {
		flex: 1 0 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.v4 * {
		transition-duration: .01ms !important;
	}
}

/* --------------------------------------------------------------------------
   Overrides
   -------------------------------------------------------------------------- */

/* `.v4-chip span` above is too broad: it also matches the icon tile and the
   copy wrapper, forcing them to display:block (which zeroes the icon dot,
   since width/height do not apply to a non-replaced inline ::before). */
.v4-chip > span {
	margin-top: 0;
}

.v4-chip > .v4-chip__icon {
	display: flex;
}

.v4-chip__icon::before {
	display: block;
}

.v4-chip strong + span {
	margin-top: 3px;
}

/* theme.json emits link colour as `:root :where(.wp-site-blocks a…)`, which
   out-specifies a single component class. Re-assert the designed colours. */
.v4 a.v4-nav__link {
	color: var(--v4-body);
}

.v4 a.v4-nav__link:hover,
.v4 a.v4-nav__link.is-active {
	color: var(--v4-ink);
}

.v4 a.v4-btn--dark,
.v4 a.v4-btn--primary {
	color: #fff;
}

.v4 a.v4-link {
	color: var(--v4-ink);
}

.v4 .v4-footer__col a {
	color: var(--v4-night-text);
}

.v4 .v4-footer__col a:hover {
	color: #fff;
}

.v4 .v4-footer__legal-links a {
	color: var(--v4-muted);
}

.v4 .v4-faq__copy a,
.v4 .v4-faq-item__answer a {
	color: var(--v4-indigo);
}

/* The cart label is a single phrase, not gapped flex items. */
.v4-btn--dark {
	gap: 0;
}

/* Match the design's default object-position on the portrait. */
.v4-portrait img {
	object-position: center;
}

/* ==========================================================================
   Sticky header — glass + shrink on scroll
   ========================================================================== */

.v4-nav-bar {
	position: sticky;
	top: 0;
	z-index: 50;
	transition: background .28s ease, box-shadow .28s ease, backdrop-filter .28s ease;
}

.admin-bar .v4-nav-bar {
	top: 32px;
}

.v4-nav {
	transition: padding .28s ease;
}

.v4-nav__logo img {
	transition: width .28s ease, height .28s ease;
}

.v4-nav-bar.is-stuck {
	background: rgba(243, 250, 251, .72);
	-webkit-backdrop-filter: saturate(180%) blur(16px);
	backdrop-filter: saturate(180%) blur(16px);
	box-shadow: 0 1px 0 rgba(17, 20, 28, .06), 0 10px 30px rgba(17, 20, 28, .06);
}

.v4-nav-bar.is-stuck .v4-nav {
	padding-block: 12px;
}

.v4-nav-bar.is-stuck .v4-nav__logo img {
	width: 88px;
	height: 30.75px;
}

.v4-nav-bar.is-stuck .v4-btn--dark {
	padding-block: 11px;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.v4-nav-bar.is-stuck {
		background: rgba(243, 250, 251, .96);
	}
}

/* ==========================================================================
   Cart drawer
   ========================================================================== */

.v4-cart__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	margin-left: 8px;
	padding-inline: 6px;
	border-radius: 999px;
	background: var(--v4-pink);
	color: #fff;
	font-family: var(--f-body);
	font-weight: 600;
	font-size: 11.5px;
	line-height: 1;
}

.v4-drawer {
	position: fixed;
	inset: 0;
	z-index: 200;
	visibility: hidden;
}

.v4-drawer.is-open {
	visibility: visible;
}

.v4-drawer__scrim {
	position: absolute;
	inset: 0;
	background: rgba(17, 20, 28, .42);
	opacity: 0;
	transition: opacity .3s ease;
}

.v4-drawer.is-open .v4-drawer__scrim {
	opacity: 1;
}

.v4-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	width: min(440px, 100%);
	height: 100%;
	background: #fff;
	box-shadow: -30px 0 60px rgba(17, 20, 28, .18);
	transform: translateX(100%);
	transition: transform .34s cubic-bezier(.4, 0, .2, 1);
}

.v4-drawer.is-open .v4-drawer__panel {
	transform: none;
}

.v4-drawer__head {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 24px 24px 18px;
	border-bottom: 1px solid var(--v4-border);
}

.v4-drawer__head h2 {
	flex: 1 0 0;
	min-width: 0;
	font-family: var(--f-display);
	font-size: 22px;
	line-height: 1.3;
	letter-spacing: -.01em;
	color: var(--v4-ink);
}

.v4-drawer__close {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 999px;
	background: #f4f8fa;
	color: var(--v4-ink);
	font-size: 18px;
	line-height: 1;
	transition: background .18s ease;
}

.v4-drawer__close:hover {
	background: var(--v4-mint);
}

.v4-drawer__ship {
	padding: 16px 24px;
	border-bottom: 1px solid var(--v4-border);
	font-size: 13px;
	line-height: 1.5;
	color: var(--v4-body);
}

.v4-drawer__ship b {
	font-weight: 600;
	color: var(--v4-ink);
}

.v4-drawer__meter {
	height: 6px;
	margin-top: 10px;
	border-radius: 999px;
	background: #e6eef1;
	overflow: hidden;
}

.v4-drawer__meter i {
	display: block;
	width: var(--w, 0%);
	height: 100%;
	border-radius: 999px;
	background: var(--v4-grad);
	transition: width .4s ease;
}

.v4-drawer__body {
	flex: 1 1 auto;
	min-height: 0;
	padding: 8px 24px;
	overflow-y: auto;
}

.v4-drawer__empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	padding: 48px 0;
	color: var(--v4-body);
}

.v4-line {
	display: flex;
	gap: 16px;
	padding: 20px 0;
	border-bottom: 1px solid var(--v4-border);
}

.v4-line:last-child {
	border-bottom: 0;
}

.v4-line__media {
	flex: none;
	width: 76px;
	height: 90px;
	border-radius: 12px;
	background: var(--v4-mint);
	object-fit: contain;
}

.v4-line__main {
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.v4-line__name {
	font-family: var(--f-display);
	font-size: 18px;
	line-height: 1.38;
	letter-spacing: -.006em;
	color: var(--v4-ink);
}

.v4-line__plan {
	display: inline-flex;
	align-self: flex-start;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--v4-lilac);
	font-weight: 600;
	font-size: 11px;
	line-height: 1.2;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--v4-indigo);
}

.v4-line__row {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 4px;
}

.v4-qty {
	display: inline-flex;
	align-items: center;
	padding: 4px;
	border: 1px solid var(--v4-border);
	border-radius: 999px;
}

.v4-qty button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 999px;
	background: #f4f8fa;
	font-family: var(--f-display);
	font-size: 15px;
	line-height: 1;
	color: var(--v4-ink);
	transition: background .18s ease;
}

.v4-qty button:hover {
	background: var(--v4-mint);
}

.v4-qty span {
	width: 34px;
	text-align: center;
	font-weight: 500;
	font-size: 14px;
	color: var(--v4-ink);
}

.v4-line__price {
	margin-left: auto;
	font-family: var(--f-display);
	font-size: 18px;
	line-height: 1.2;
	color: var(--v4-ink);
}

.v4-line__remove {
	align-self: flex-start;
	font-size: 12px;
	line-height: 1.5;
	color: var(--v4-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.v4-line__remove:hover {
	color: var(--v4-pink-deep);
}

.v4-drawer__foot {
	flex: none;
	padding: 20px 24px 24px;
	border-top: 1px solid var(--v4-border);
	background: #fff;
}

.v4-drawer__totals {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 16px;
}

.v4-drawer__totals div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	font-size: 14px;
	line-height: 1.62;
	color: var(--v4-body);
}

.v4-drawer__totals .is-discount {
	color: var(--v4-green-light);
}

.v4-drawer__totals .is-total {
	font-family: var(--f-display);
	font-size: 22px;
	line-height: 1.3;
	color: var(--v4-ink);
}

.v4-drawer__totals .is-total span:last-child {
	font-size: 24px;
}

.v4-drawer__note {
	margin-top: 12px;
	font-size: 12px;
	line-height: 1.55;
	text-align: center;
	color: var(--v4-muted);
}

.v4-drawer__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.v4-drawer[aria-busy="true"] .v4-drawer__panel {
	cursor: progress;
}

.v4-drawer.is-busy .v4-drawer__body {
	opacity: .55;
	transition: opacity .2s ease;
}

/* Toast */
.v4-toast {
	position: fixed;
	left: 50%;
	bottom: 28px;
	z-index: 220;
	padding: 14px 22px;
	border-radius: 999px;
	background: var(--v4-ink);
	color: #fff;
	font-size: 14px;
	line-height: 1.4;
	box-shadow: var(--elev-3);
	transform: translate(-50%, 20px);
	opacity: 0;
	pointer-events: none;
	transition: opacity .24s ease, transform .24s ease;
}

.v4-toast.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* ==========================================================================
   Single product page
   ========================================================================== */

.v4-pdp {
	background: #fff;
}

.v4-pdp__inner {
	display: flex;
	align-items: flex-start;
	gap: 64px;
	padding-block: 28px 84px;
}

.v4-breadcrumb {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 8px;
	font-size: 12px;
	line-height: 1.55;
	color: var(--v4-body);
	white-space: nowrap;
}

.v4-breadcrumb i {
	font-style: normal;
	color: #b6c3cb;
}

.v4-breadcrumb [aria-current] {
	color: var(--v4-ink);
}

.v4-gallery {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 16px;
	width: 640px;
	max-width: 100%;
}

.v4-gallery__stage {
	position: relative;
	height: 600px;
	border-radius: 24px;
	overflow: hidden;
	background: var(--v4-mint);
}

.v4-gallery__stage img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.v4-tag-bestseller {
	position: absolute;
	left: 24px;
	top: 24px;
	padding: 8px 14px;
	border-radius: 999px;
	background: var(--v4-pink);
	box-shadow: 0 6px 14px rgba(233, 25, 127, .26), 0 16px 34px rgba(233, 25, 127, .24);
	font-weight: 600;
	font-size: 11.5px;
	line-height: 1.2;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: #fff;
}

.v4-thumbs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

.v4-thumb {
	display: block;
	height: 128px;
	padding: 0;
	border: 1px solid #d6e7ec;
	border-radius: 14px;
	background: #d6e7ec;
	overflow: hidden;
	cursor: pointer;
	transition: border-color .18s ease;
}

.v4-thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: var(--v4-mint);
}

.v4-thumb[aria-selected="true"] {
	border: 2px solid var(--v4-ink);
}

.v4-buybox {
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
}

.v4-buybox__title {
	margin-top: 22px;
	font-family: var(--f-display);
	font-weight: 400;
	font-size: clamp(38px, 3.75vw, 54px);
	line-height: 1.06;
	letter-spacing: -.022em;
	color: var(--v4-ink);
}

.v4-rating-row {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 14px;
	font-size: 14px;
	white-space: nowrap;
}

.v4-rating-row .v4-stars {
	font-size: 14px;
}

.v4-rating-row b {
	font-weight: 500;
	color: var(--v4-ink);
}

.v4-rating-row i {
	font-style: normal;
	color: #b6c3cb;
}

.v4-rating-row span {
	color: var(--v4-body);
}

.v4-buybox__lede {
	margin-top: 22px;
}

.v4-benefits-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
	margin-top: 26px;
}

.v4-benefits-list li {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 16px;
	line-height: 1.68;
	color: var(--v4-ink);
}

.v4-benefits-list i {
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--v4-teal);
}

.v4-benefits-list li:nth-child(2) i {
	background: var(--v4-indigo);
}

.v4-benefits-list li:nth-child(3) i {
	background: var(--v4-pink);
}

.v4-plan-label {
	margin-top: 32px;
	font-weight: 600;
	font-size: 11.5px;
	line-height: 1.2;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--v4-muted);
}

.v4-plans {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
	margin-top: 14px;
}

.v4-plan {
	position: relative;
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 22px 24px 22px 22px;
	border: 1px solid #dce9ed;
	border-radius: 18px;
	background: #fff;
	cursor: pointer;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.v4-plan input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.v4-plan__radio {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border: 1.5px solid #c6d6dc;
	border-radius: 999px;
	background: #fff;
	transition: border-color .2s ease, background .2s ease;
}

.v4-plan__radio::after {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #fff;
	transform: scale(0);
	transition: transform .2s ease;
}

.v4-plan__copy {
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.v4-plan__title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--f-display);
	font-size: 18px;
	line-height: 1.38;
	letter-spacing: -.006em;
	color: var(--v4-ink);
}

.v4-plan__badge {
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--v4-pink);
	font-family: var(--f-body);
	font-weight: 600;
	font-size: 11.5px;
	line-height: 1.2;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: #fff;
}

.v4-plan__sub {
	font-size: 14px;
	line-height: 1.62;
	color: var(--v4-muted);
}

.v4-plan__price {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	white-space: nowrap;
}

.v4-plan__price b {
	font-family: var(--f-display);
	font-weight: 400;
	font-size: 24px;
	line-height: 1.2;
	letter-spacing: -.01em;
	color: var(--v4-ink);
}

.v4-plan__price span {
	font-size: 12px;
	line-height: 1.55;
	color: var(--v4-muted);
}

.v4-plan:has(input:checked) {
	border: 2px solid var(--v4-indigo-light);
	padding: 21px 23px 21px 21px;
	box-shadow: var(--elev-2);
}

.v4-plan:has(input:checked) .v4-plan__radio {
	border-color: var(--v4-indigo-light);
	background: var(--v4-indigo-light);
}

.v4-plan:has(input:checked) .v4-plan__radio::after {
	transform: scale(1);
}

.v4-plan:has(input:checked) .v4-plan__price b {
	color: var(--v4-indigo);
}

.v4-plan:has(input:focus-visible) {
	outline: 2px solid var(--v4-indigo);
	outline-offset: 3px;
}

.v4-buyrow {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	margin-top: 24px;
}

.v4-stepper {
	display: inline-flex;
	flex: none;
	align-items: center;
	padding: 6px;
	border: 1px solid #dce9ed;
	border-radius: 999px;
	background: #fff;
}

.v4-stepper button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 999px;
	background: #f4f8fa;
	font-family: var(--f-display);
	font-size: 17px;
	line-height: 1.2;
	color: var(--v4-ink);
	transition: background .18s ease;
}

.v4-stepper button:hover {
	background: var(--v4-mint);
}

.v4-stepper input {
	width: 44px;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--f-display);
	font-size: 17px;
	line-height: 1.2;
	text-align: center;
	color: var(--v4-ink);
	-moz-appearance: textfield;
}

.v4-stepper input::-webkit-outer-spin-button,
.v4-stepper input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.v4-stepper input:focus {
	outline: none;
}

.v4-buyrow .v4-btn--primary {
	flex: 1 0 0;
	min-width: 0;
	padding-block: 24px;
}

.v4-btn[aria-busy="true"] {
	opacity: .72;
	pointer-events: none;
}

.v4-guarantees {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	width: 100%;
	margin-top: 22px;
}

.v4-guarantee {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 15px 14px;
	border-radius: 14px;
	text-align: center;
	white-space: nowrap;
}

.v4-guarantee b {
	font-weight: 500;
	font-size: 14px;
	line-height: 1.2;
}

.v4-guarantee span {
	font-size: 12px;
	line-height: 1.55;
	color: var(--v4-body);
}

.v4-guarantee--green {
	background: #e8f5ef;
}

.v4-guarantee--green b {
	color: var(--v4-green-light);
}

.v4-guarantee--teal {
	background: var(--v4-mint);
}

.v4-guarantee--teal b {
	color: var(--v4-teal);
}

.v4-guarantee--indigo {
	background: var(--v4-lilac);
}

.v4-guarantee--indigo b {
	color: var(--v4-indigo);
}

.v4-guarantee--pink {
	background: var(--v4-tile-pink);
}

.v4-guarantee--pink b {
	color: var(--v4-pink-deep);
}

.v4-buybox__use {
	margin-top: 18px;
	font-size: 12px;
	line-height: 1.55;
	color: var(--v4-muted);
}

/* Supplement facts ------------------------------------------------------- */

.v4-facts {
	background: var(--v4-mint);
}

.v4-facts__inner {
	display: flex;
	align-items: flex-start;
	gap: 56px;
	padding-block: 96px 100px;
}

.v4-panel {
	flex: none;
	width: 600px;
	max-width: 100%;
	padding: 22px 26px 24px;
	border: 2px solid var(--v4-ink);
	border-radius: 18px;
	background: #fff;
}

.v4-panel h2 {
	font-family: var(--f-display);
	font-size: 30px;
	line-height: 1.2;
	letter-spacing: -.014em;
	color: var(--v4-ink);
}

.v4-panel__serving {
	margin-top: 8px;
	font-size: 14px;
	line-height: 1.62;
	color: var(--v4-ink);
}

.v4-panel__rule {
	height: 5px;
	margin-top: 10px;
	background: var(--v4-ink);
}

.v4-panel table {
	width: 100%;
	margin-top: 4px;
	border-collapse: collapse;
	font-size: 14px;
	line-height: 1.62;
	color: var(--v4-ink);
}

.v4-panel th,
.v4-panel td {
	padding: 7px 0;
	text-align: left;
	font-weight: 400;
	vertical-align: top;
}

.v4-panel th:first-child {
	font-weight: 500;
	line-height: 1.2;
}

.v4-panel td:nth-child(2),
.v4-panel th:nth-child(2) {
	width: 126px;
	padding-left: 10px;
	text-align: right;
}

.v4-panel td:nth-child(3),
.v4-panel th:nth-child(3) {
	width: 92px;
	padding-left: 10px;
	text-align: right;
}

.v4-panel thead tr {
	border-bottom: 2px solid var(--v4-ink);
}

.v4-panel tbody tr + tr {
	border-top: 1px solid #c6d0dc;
}

.v4-panel tfoot tr {
	border-top: 2px solid var(--v4-ink);
}

.v4-panel tfoot th {
	font-weight: 500;
	line-height: 1.2;
}

.v4-panel__blend {
	margin-top: 4px;
	font-size: 12px;
	line-height: 1.55;
	color: var(--v4-body);
}

.v4-panel__rule--end {
	height: 5px;
	margin-top: 12px;
	background: var(--v4-ink);
}

.v4-panel__dv {
	margin-top: 10px;
	font-size: 12px;
	line-height: 1.55;
	color: var(--v4-ink);
}

.v4-panel__other {
	margin-top: 12px;
	font-size: 12px;
	line-height: 1.55;
	color: var(--v4-body);
}

.v4-panel__tm {
	margin-top: 10px;
	font-size: 12px;
	line-height: 1.55;
	color: var(--v4-muted);
}

.v4-good {
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
	min-width: 0;
}

.v4-info-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	padding: 24px 26px 26px;
	border: 1.5px solid #d6edf2;
	border-radius: 18px;
	background: #fff;
}

.v4-info-card--warn {
	border-color: #fbd9e8;
}

.v4-info-card--plain {
	border-color: #e1e6ee;
}

.v4-info-card__head {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--f-display);
	font-size: 18px;
	line-height: 1.38;
	letter-spacing: -.006em;
	color: var(--v4-ink);
}

.v4-info-card__head i {
	flex: none;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--v4-teal);
}

.v4-info-card--warn .v4-info-card__head i {
	background: var(--v4-pink);
}

.v4-info-card--plain .v4-info-card__head i {
	background: var(--v4-muted);
}

/* ==========================================================================
   Generic page shell (Contact, Cart, Checkout, My account)
   ========================================================================== */

.v4-page-hero {
	background: var(--v4-mint);
}

.v4-page-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	padding-block: 72px 64px;
}

.v4-page-hero h1 {
	font-family: var(--f-display);
	font-weight: 400;
	font-size: clamp(34px, 3.75vw, 54px);
	line-height: 1.06;
	letter-spacing: -.022em;
	color: var(--v4-ink);
}

.v4-page-hero p {
	max-width: 620px;
	font-size: 18px;
	line-height: 1.66;
	color: var(--v4-body);
}

.v4-page-body {
	background: #fff;
}

.v4-page-body__inner {
	padding-block: 72px 96px;
}

/* ==========================================================================
   Contact
   ========================================================================== */

.v4-contact {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 380px;
	gap: 64px;
	align-items: start;
}

.v4-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.v4-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.v4-field label {
	font-weight: 500;
	font-size: 14px;
	line-height: 1.2;
	color: var(--v4-ink);
}

.v4-field input,
.v4-field textarea,
.v4-field select {
	width: 100%;
	padding: 15px 18px;
	border: 1px solid #dce9ed;
	border-radius: 14px;
	background: #fff;
	font-family: var(--f-body);
	font-size: 16px;
	line-height: 1.5;
	color: var(--v4-ink);
	transition: border-color .18s ease, box-shadow .18s ease;
}

.v4-field textarea {
	min-height: 168px;
	resize: vertical;
}

.v4-field input:focus,
.v4-field textarea:focus,
.v4-field select:focus {
	outline: none;
	border-color: var(--v4-indigo-light);
	box-shadow: 0 0 0 4px rgba(90, 99, 180, .12);
}

.v4-field__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.v4-form__actions {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
}

.v4-form__note {
	font-size: 13px;
	line-height: 1.55;
	color: var(--v4-muted);
}

.v4-contact__aside {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.v4-contact-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 26px;
	border: 1px solid var(--v4-border);
	border-radius: 18px;
	background: #fff;
	box-shadow: var(--elev-2);
}

.v4-contact-card h2 {
	font-family: var(--f-display);
	font-size: 18px;
	line-height: 1.38;
	letter-spacing: -.006em;
	color: var(--v4-ink);
}

.v4-contact-card p,
.v4-contact-card a {
	font-size: 14px;
	line-height: 1.62;
	color: var(--v4-body);
}

.v4-contact-card a {
	color: var(--v4-indigo);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ==========================================================================
   WooCommerce — account, cart, checkout
   ========================================================================== */

.v4-woo {
	font-family: var(--f-body);
	color: var(--v4-body);
}

.v4-woo .woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 32px;
	padding: 8px;
	border-radius: 999px;
	background: var(--v4-mint);
	list-style: none;
}

.v4-woo .woocommerce-MyAccount-navigation li a {
	display: inline-flex;
	align-items: center;
	padding: 10px 20px;
	border-radius: 999px;
	font-family: var(--f-display);
	font-size: 16px;
	line-height: 1.2;
	letter-spacing: -.004em;
	color: var(--v4-body);
	transition: background .18s ease, color .18s ease;
}

.v4-woo .woocommerce-MyAccount-navigation li a:hover {
	color: var(--v4-ink);
}

.v4-woo .woocommerce-MyAccount-navigation li.is-active a {
	background: #fff;
	box-shadow: var(--elev-2);
	color: var(--v4-ink);
}

.v4-woo .woocommerce-MyAccount-content {
	font-size: 16px;
	line-height: 1.68;
}

.v4-woo h2,
.v4-woo h3 {
	font-family: var(--f-display);
	font-weight: 400;
	letter-spacing: -.01em;
	color: var(--v4-ink);
}

.v4-woo h2 {
	margin: 0 0 16px;
	font-size: 22px;
	line-height: 1.3;
}

.v4-woo form .form-row,
.v4-woo .woocommerce-form-row {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0 0 20px;
	padding: 0;
}

.v4-woo label {
	font-weight: 500;
	font-size: 14px;
	line-height: 1.2;
	color: var(--v4-ink);
}

.v4-woo input[type="text"],
.v4-woo input[type="email"],
.v4-woo input[type="tel"],
.v4-woo input[type="password"],
.v4-woo input[type="number"],
.v4-woo textarea,
.v4-woo select,
.v4-woo .select2-selection {
	width: 100%;
	padding: 15px 18px;
	border: 1px solid #dce9ed;
	border-radius: 14px;
	background: #fff;
	font-family: var(--f-body);
	font-size: 16px;
	line-height: 1.5;
	color: var(--v4-ink);
}

.v4-woo input:focus,
.v4-woo textarea:focus,
.v4-woo select:focus {
	outline: none;
	border-color: var(--v4-indigo-light);
	box-shadow: 0 0 0 4px rgba(90, 99, 180, .12);
}

.v4-woo .button,
.v4-woo button[type="submit"],
.v4-woo a.button,
.v4-woo .wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 16px 30px;
	border: 0;
	border-radius: 999px;
	background: var(--v4-grad);
	box-shadow: var(--elev-brand);
	font-family: var(--f-display);
	font-weight: 400;
	font-size: 17px;
	line-height: 1.2;
	letter-spacing: -.004em;
	color: #fff;
	cursor: pointer;
	transition: transform .18s ease, filter .18s ease;
}

.v4-woo .button:hover,
.v4-woo button[type="submit"]:hover,
.v4-woo a.button:hover {
	transform: translateY(-1px);
	filter: saturate(1.06);
}

.v4-woo table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.v4-woo table th,
.v4-woo table td {
	padding: 14px 12px;
	text-align: left;
	border-bottom: 1px solid var(--v4-border);
}

.v4-woo table th {
	font-weight: 600;
	font-size: 11.5px;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--v4-muted);
}

.v4-woo .woocommerce-message,
.v4-woo .woocommerce-info,
.v4-woo .woocommerce-error {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 28px;
	padding: 18px 22px;
	border: 1px solid var(--v4-border);
	border-left: 4px solid var(--v4-indigo-light);
	border-radius: 14px;
	background: #fff;
	list-style: none;
	font-size: 15px;
	color: var(--v4-ink);
}

.v4-woo .woocommerce-error {
	border-left-color: var(--v4-pink);
}

.v4-woo .woocommerce-message .button,
.v4-woo .woocommerce-info .button {
	margin-left: auto;
	padding: 11px 22px;
	font-size: 15px;
}

.v4-woo .woocommerce-form-login__rememberme,
.v4-woo .woocommerce-form__label-for-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
}

.v4-woo .woocommerce-form-login__rememberme input,
.v4-woo .woocommerce-form__label-for-checkbox input {
	width: auto;
}

.v4-woo .woocommerce-privacy-policy-text {
	font-size: 13px;
	color: var(--v4-muted);
}

.v4-woo u,
.v4-woo .required {
	color: var(--v4-pink-deep);
	text-decoration: none;
}

.v4-account-cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px;
	align-items: start;
}

/* ==========================================================================
   Responsive — new sections
   ========================================================================== */

@media (max-width: 1180px) {
	.v4-pdp__inner,
	.v4-facts__inner {
		flex-direction: column;
		gap: 44px;
	}

	.v4-gallery,
	.v4-panel {
		width: 100%;
	}

	.v4-contact {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}
}

@media (max-width: 900px) {
	.v4-pdp__inner {
		padding-block: 20px 64px;
	}

	.v4-facts__inner {
		padding-block: 72px;
	}

	.v4-gallery__stage {
		height: 420px;
	}

	.v4-thumb {
		height: 84px;
	}

	.v4-guarantees {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.v4-account-cols {
		grid-template-columns: minmax(0, 1fr);
	}

	.v4-page-hero__inner {
		padding-block: 56px 48px;
	}

	.v4-page-body__inner {
		padding-block: 56px 72px;
	}
}

@media (max-width: 720px) {
	.v4-plan {
		flex-wrap: wrap;
		gap: 14px;
	}

	.v4-plan__price {
		align-items: flex-start;
		width: 100%;
		padding-left: 40px;
	}

	.v4-buyrow {
		flex-wrap: wrap;
	}

	.v4-buyrow .v4-btn--primary {
		flex-basis: 100%;
		padding-block: 20px;
	}

	.v4-field__row {
		grid-template-columns: minmax(0, 1fr);
	}

	.v4-drawer__panel {
		width: 100%;
	}
}

/* ==========================================================================
   Overrides — round 2
   ========================================================================== */

.v4-btn--block {
	display: flex;
	width: 100%;
}

/* Woo's generic button styling must not swallow our own buttons. */
.v4-woo .button:not(.v4-btn),
.v4-woo button[type="submit"]:not(.v4-btn),
.v4-woo a.button:not(.v4-btn) {
	padding: 16px 30px;
}

.v4-woo .v4-btn--primary {
	padding: 20px 34px;
}

/* Active nav state, driven by WordPress body classes (no PHP needed). */
body.home .v4-nav__link[data-nav="shop"],
body.single-product .v4-nav__link[data-nav="shop"] {
	color: var(--v4-ink);
}

body.home .v4-nav__link[data-nav="shop"]::after,
body.single-product .v4-nav__link[data-nav="shop"]::after {
	background: var(--v4-pink);
}

/* The product page opens on white, so the sticky bar starts white there. */
body.single-product .v4-nav-bar,
body.woocommerce-cart .v4-nav-bar,
body.woocommerce-checkout .v4-nav-bar,
body.woocommerce-account .v4-nav-bar {
	background: #fff;
}

body.single-product .v4-nav-bar.is-stuck,
body.woocommerce-cart .v4-nav-bar.is-stuck,
body.woocommerce-checkout .v4-nav-bar.is-stuck,
body.woocommerce-account .v4-nav-bar.is-stuck {
	background: rgba(255, 255, 255, .74);
}

/* Woo pages get the shell padding from the template, not from Woo. */
.v4-woo .woocommerce {
	max-width: none;
}

.v4-woo .woocommerce-MyAccount-navigation {
	margin-bottom: 0;
}

.v4-woo p {
	margin: 0 0 16px;
}

.v4-woo a:not(.button):not(.v4-btn) {
	color: var(--v4-indigo);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.v4-woo .woocommerce-MyAccount-navigation a {
	text-decoration: none;
}

/* ==========================================================================
   Overrides — round 3

   The base resets `.v4 button {background:none;color:inherit;border:0}` and
   `.v4 p/h1/h2/h3/ul {margin:0}` are element+class (0,1,1) selectors, so they
   out-specify single-class component rules (0,1,0). Anything that sets a
   background, colour, border or margin on a <button>/<p>/<h*>/<ul> has to be
   re-asserted with the element in the selector.
   ========================================================================== */

.v4 button.v4-btn--primary {
	background: var(--v4-grad);
	color: #fff;
}

.v4 button.v4-btn--dark {
	background: var(--v4-ink);
	color: #fff;
}

.v4 button.v4-drawer__close {
	background: #f4f8fa;
	color: var(--v4-ink);
}

.v4 button.v4-drawer__close:hover {
	background: var(--v4-mint);
}

.v4 button.v4-line__remove {
	color: var(--v4-muted);
}

.v4 button.v4-line__remove:hover {
	color: var(--v4-pink-deep);
}

.v4 button.v4-thumb {
	border: 1px solid #d6e7ec;
	background: #d6e7ec;
}

.v4 button.v4-thumb[aria-selected="true"] {
	border: 2px solid var(--v4-ink);
}

/* Vertical rhythm in the buy box, panel and drawer. */
.v4 h1.v4-buybox__title {
	margin-top: 22px;
}

.v4 p.v4-rating-row {
	margin-top: 14px;
}

.v4 p.v4-buybox__lede {
	margin-top: 22px;
}

.v4 ul.v4-benefits-list {
	margin-top: 26px;
}

.v4 p.v4-plan-label {
	margin-top: 32px;
}

.v4 p.v4-buybox__use {
	margin-top: 18px;
}

.v4 p.v4-panel__serving {
	margin-top: 8px;
}

.v4 p.v4-panel__blend {
	margin-top: 4px;
}

.v4 p.v4-panel__dv {
	margin-top: 10px;
}

.v4 p.v4-panel__other {
	margin-top: 12px;
}

.v4 p.v4-panel__tm {
	margin-top: 10px;
}

.v4 p.v4-reviewer__meta {
	margin-top: 2px;
}

.v4 p.v4-drawer__note {
	margin-top: 12px;
}

.v4 p.v4-line__plan {
	margin: 0;
}

/* Contact form buttons are <button> too. */
.v4 button.v4-btn--primary:hover {
	transform: translateY(-1px);
	filter: saturate(1.06);
}

/* ==========================================================================
   Overrides — round 4
   ========================================================================== */

/* WordPress wraps each template part in a <div class="wp-block-template-part">.
   That wrapper becomes the sticky header's containing block, so the header
   scrolls away with it. Taking the wrapper out of the box tree makes
   .v4-nav-bar stick to the viewport instead. */
.wp-block-template-part {
	display: contents;
}

/* ==========================================================================
   Overrides — round 5
   ========================================================================== */

/* `.v4-page-hero p` (0,1,1) was resizing the eyebrow pill. */
.v4-page-hero p.v4-eyebrow {
	max-width: none;
	font-size: 11.5px;
	line-height: 1.2;
	color: var(--v4-pink-deep);
}

.v4-page-hero p.v4-eyebrow--indigo {
	color: var(--v4-indigo);
}

/* --------------------------------------------------------------------------
   My account — replace Woo's float layout with a sidebar grid
   -------------------------------------------------------------------------- */

.v4-woo .woocommerce:has(.woocommerce-MyAccount-navigation) {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 56px;
	align-items: start;
}

.v4-woo .woocommerce::before,
.v4-woo .woocommerce::after {
	content: none;
}

.v4-woo .woocommerce-MyAccount-navigation,
.v4-woo .woocommerce-MyAccount-content {
	float: none;
	width: auto;
}

.v4-woo .woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: 10px;
	border-radius: 20px;
	background: var(--v4-mint);
}

.v4-woo .woocommerce-MyAccount-navigation ul li {
	margin: 0;
	list-style: none;
}

.v4-woo .woocommerce-MyAccount-navigation ul li a:not(.button) {
	display: block;
	padding: 12px 18px;
	border-radius: 14px;
	font-family: var(--f-display);
	font-size: 16px;
	line-height: 1.2;
	letter-spacing: -.004em;
	color: var(--v4-body);
	text-decoration: none;
	transition: background .18s ease, color .18s ease;
}

.v4-woo .woocommerce-MyAccount-navigation ul li a:not(.button):hover {
	background: rgba(255, 255, 255, .6);
	color: var(--v4-ink);
}

.v4-woo .woocommerce-MyAccount-navigation ul li.is-active a:not(.button) {
	background: #fff;
	box-shadow: var(--elev-2);
	color: var(--v4-ink);
}

.v4-woo .woocommerce-MyAccount-content > :first-child {
	margin-top: 0;
}

/* Login / register columns */
.v4-woo .u-columns {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px;
	align-items: start;
}

.v4-woo .u-column1,
.v4-woo .u-column2 {
	float: none;
	width: auto;
	padding: 30px;
	border: 1px solid var(--v4-border);
	border-radius: 20px;
	background: #fff;
	box-shadow: var(--elev-2);
}

.v4-woo .woocommerce-form {
	margin: 0;
	padding: 0;
	border: 0;
}

@media (max-width: 900px) {
	.v4-woo .woocommerce:has(.woocommerce-MyAccount-navigation) {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.v4-woo .woocommerce-MyAccount-navigation ul {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.v4-woo .u-columns {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Woo adds bottom margin to account-nav list items; the sidebar sets its own. */
.v4-woo .woocommerce .woocommerce-MyAccount-navigation ul li {
	margin: 0;
	padding: 0;
	border: 0;
}

/* `[hidden]` is a UA rule; `.v4-drawer__totals div {display:flex}` outranks it. */
.v4-drawer__totals div[hidden] {
	display: none;
}

/* ==========================================================================
   Hero watermark, gradient descenders, nav icons
   ========================================================================== */

.v4 svg {
	display: block;
}

/* `background-clip: text` only paints inside the element's background box.
   With line-height:1 the descender of "g" falls below that box and vanishes,
   so pad the box down and pull the layout back with a matching margin. The
   gradient is horizontal (90deg), so a taller box does not shift its colours. */
.v4-grad-text {
	padding-bottom: .16em;
	margin-bottom: -.16em;
}

/* Watermark: parked further right so it clears the copy column, and nudged
   horizontally by scroll direction (see initHeroParallax in site.js). */
.v4-hero__watermark {
	left: 7%;
	width: 132%;
	will-change: transform;
}

/* Nav actions ------------------------------------------------------------ */

.v4-nav__actions {
	display: flex;
	flex: none;
	align-items: center;
	gap: 12px;
}

.v4-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border: 1px solid var(--v4-border);
	border-radius: 999px;
	background: #fff;
	box-shadow: var(--elev-2);
	color: var(--v4-ink);
	transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, width .28s ease, height .28s ease;
}

.v4 a.v4-icon-btn {
	color: var(--v4-ink);
}

.v4-icon-btn:hover {
	transform: translateY(-1px);
	border-color: #cfe0e6;
}

.v4-icon-btn svg {
	width: 20px;
	height: 20px;
}

.v4-nav-bar.is-stuck .v4-icon-btn {
	width: 40px;
	height: 40px;
}

/* Cart pill with icon: keep "Cart (0)" as one flex item so the gap only
   separates the icon from the label. */
.v4-btn--dark {
	gap: 10px;
}

.v4-btn__icon {
	flex: none;
	width: 18px;
	height: 18px;
}

@media (max-width: 560px) {
	.v4-nav__actions {
		gap: 8px;
	}

	.v4-icon-btn {
		width: 42px;
		height: 42px;
	}
}

/* ==========================================================================
   "Fourteen actives. One job." — endless ingredient marquee
   ==========================================================================
   Two identical groups sit side by side in one flex track. Translating the
   track by exactly one group + one gap (`-50% - gap/2`, because the track's
   own gap sits between the two groups) lands group 2 precisely where group 1
   started, so the loop has no seam. Edges are cut with a mask so the fade is
   truly transparent rather than a coloured overlay — it stays seamless on any
   background. A gradient fallback in the section colour covers no-mask UAs.
   ========================================================================== */

.v4-marquee {
	--marquee-gap: 24px;
	--marquee-fade: clamp(48px, 10vw, 220px);
	position: relative;
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--marquee-fade), #000 calc(100% - var(--marquee-fade)), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 var(--marquee-fade), #000 calc(100% - var(--marquee-fade)), transparent 100%);
}

.v4-marquee__track {
	display: flex;
	gap: var(--marquee-gap);
	width: max-content;
	animation: v4-marquee 40s linear infinite;
}

.v4-marquee__group {
	display: flex;
	flex: none;
	gap: var(--marquee-gap);
	align-items: stretch;
}

.v4-marquee__group .v4-ingredient {
	flex: none;
	width: 306px;
}

@keyframes v4-marquee {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(calc(-50% - var(--marquee-gap) / 2), 0, 0);
	}
}

.v4-marquee:hover .v4-marquee__track,
.v4-marquee:focus-within .v4-marquee__track {
	animation-play-state: paused;
}

/* No mask support — fade with the section colour instead. */
@supports not ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
	.v4-marquee::before,
	.v4-marquee::after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		z-index: 2;
		width: var(--marquee-fade);
		pointer-events: none;
	}

	.v4-marquee::before {
		left: 0;
		background: linear-gradient(90deg, var(--v4-mint) 0, rgba(236, 247, 249, 0) 100%);
	}

	.v4-marquee::after {
		right: 0;
		background: linear-gradient(270deg, var(--v4-mint) 0, rgba(236, 247, 249, 0) 100%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.v4-marquee {
		overflow-x: auto;
		scrollbar-width: none;
	}

	.v4-marquee::-webkit-scrollbar {
		display: none;
	}

	.v4-marquee__track {
		animation: none;
		padding-inline: var(--v4-pad);
	}

	.v4-marquee__group[aria-hidden="true"] {
		display: none;
	}
}

@media (max-width: 560px) {
	.v4-marquee {
		--marquee-gap: 16px;
	}

	.v4-marquee__group .v4-ingredient {
		width: 272px;
	}
}

/* ==========================================================================
   Cart & checkout — WooCommerce Blocks in the V4 system
   ==========================================================================
   Both pages use the block cart/checkout (`wc-block-*`), not the classic
   shortcodes, so these override Woo's own component styles. Visual only —
   nothing here changes layout the blocks depend on for behaviour.
   ========================================================================== */

/* Slim checkout chrome -------------------------------------------------- */

.v4-checkout-bar {
	border-bottom: 1px solid var(--v4-border);
	background: var(--v4-mint);
}

.v4-checkout-bar__inner {
	display: flex;
	align-items: center;
	gap: 24px;
	padding-block: 22px;
}

.v4-checkout-bar__secure {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-inline: auto;
	font-weight: 500;
	font-size: 14px;
	line-height: 1.2;
	color: var(--v4-body);
}

.v4-checkout-bar__secure svg {
	width: 18px;
	height: 18px;
	color: var(--v4-green-light);
}

.v4-checkout-body .v4-page-body__inner {
	padding-block: 56px 88px;
}

.v4-checkout-foot {
	border-top: 1px solid var(--v4-border);
	background: #fff;
}

.v4-checkout-foot__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	padding-block: 28px 40px;
	font-size: 12px;
	line-height: 1.55;
	color: var(--v4-muted);
}

.v4-checkout-foot__inner p {
	flex: 1 0 0;
	min-width: 0;
	margin: 0;
}

.v4-checkout-foot__links {
	display: flex;
	gap: 20px;
}

.v4 .v4-checkout-foot__links a {
	color: var(--v4-body);
	text-decoration: none;
}

.v4 .v4-checkout-foot__links a:hover {
	color: var(--v4-ink);
}

/* Shared block resets ---------------------------------------------------- */

.v4-wc .wc-block-components-title,
.v4-wc .wc-block-cart__main > h2,
.v4-wc .wc-block-components-checkout-step__title,
.v4-wc .wc-block-components-order-summary__title,
.v4-wc .wp-block-woocommerce-cart-order-summary-heading-block {
	font-family: var(--f-display);
	font-weight: 400;
	letter-spacing: -.01em;
	color: var(--v4-ink);
	text-transform: none;
}

.v4-wc .wc-block-components-checkout-step__title,
.v4-wc .wc-block-components-title {
	font-size: 22px;
	line-height: 1.3;
}

.v4-wc .wc-block-components-checkout-step__description {
	font-size: 14px;
	line-height: 1.62;
	color: var(--v4-muted);
}

/* Buttons ---------------------------------------------------------------- */

.v4-wc .wc-block-components-button:not(.is-link),
.v4-wc .wc-block-cart__submit-button,
.v4-wc .wc-block-components-checkout-place-order-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	padding: 20px 34px;
	border: 0;
	border-radius: 999px;
	background: var(--v4-grad);
	box-shadow: var(--elev-brand);
	font-family: var(--f-display);
	font-weight: 400;
	font-size: 17px;
	line-height: 1.2;
	letter-spacing: -.004em;
	color: #fff;
	transition: transform .18s ease, filter .18s ease;
}

.v4-wc .wc-block-components-button:not(.is-link):hover,
.v4-wc .wc-block-cart__submit-button:hover,
.v4-wc .wc-block-components-checkout-place-order-button:hover {
	transform: translateY(-1px);
	filter: saturate(1.06);
	background: var(--v4-grad);
	color: #fff;
}

.v4-wc .wc-block-components-button__text {
	color: inherit;
}

.v4-wc .wc-block-components-button.is-link {
	color: var(--v4-indigo);
	text-underline-offset: 3px;
}

/* Inputs ----------------------------------------------------------------- */

.v4-wc .wc-block-components-text-input input[type="text"],
.v4-wc .wc-block-components-text-input input[type="email"],
.v4-wc .wc-block-components-text-input input[type="tel"],
.v4-wc .wc-block-components-text-input input[type="number"],
.v4-wc .wc-block-components-form input,
.v4-wc .wc-block-components-combobox input,
.v4-wc select,
.v4-wc textarea {
	border: 1px solid #dce9ed;
	border-radius: 14px;
	background: #fff;
	font-family: var(--f-body);
	font-size: 16px;
	color: var(--v4-ink);
}

.v4-wc .wc-block-components-text-input input:focus,
.v4-wc .wc-block-components-combobox input:focus,
.v4-wc select:focus,
.v4-wc textarea:focus {
	outline: none;
	border-color: var(--v4-indigo-light);
	box-shadow: 0 0 0 4px rgba(90, 99, 180, .12);
}

.v4-wc .wc-block-components-text-input label,
.v4-wc .wc-block-components-combobox label {
	color: var(--v4-muted);
}

.v4-wc .wc-block-components-text-input.is-active label {
	color: var(--v4-body);
}

/* Sidebar / order summary ------------------------------------------------ */

.v4-wc .wc-block-components-sidebar .wc-block-components-panel,
.v4-wc .wc-block-components-sidebar .wc-block-components-totals-wrapper,
.v4-wc .wc-block-components-order-summary {
	border-color: var(--v4-border);
}

.v4-wc .wc-block-components-sidebar > .wc-block-components-totals-wrapper,
.v4-wc .wp-block-woocommerce-cart-totals-block,
.v4-wc .wp-block-woocommerce-checkout-totals-block {
	border-radius: 20px;
}

.v4-wc .wc-block-components-sidebar {
	padding: 0;
}

.v4-wc .wc-block-cart__sidebar .wc-block-components-sidebar,
.v4-wc .wc-block-checkout__sidebar .wc-block-components-sidebar {
	border: 1px solid var(--v4-border);
	border-radius: 20px;
	background: #fff;
	box-shadow: var(--elev-2);
	overflow: hidden;
}

.v4-wc .wc-block-checkout__sidebar .wc-block-components-sidebar {
	position: sticky;
	top: 104px;
}

.v4-wc .wc-block-components-totals-item {
	font-size: 14px;
	line-height: 1.62;
	color: var(--v4-body);
}

.v4-wc .wc-block-components-totals-item__label {
	font-weight: 400;
}

.v4-wc .wc-block-components-totals-item__value {
	color: var(--v4-ink);
}

.v4-wc .wc-block-components-totals-footer-item {
	font-family: var(--f-display);
	font-weight: 400;
	font-size: 22px;
	line-height: 1.3;
	letter-spacing: -.01em;
	color: var(--v4-ink);
}

.v4-wc .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: 24px;
}

.v4-wc .wc-block-components-totals-discount__coupon-list,
.v4-wc .wc-block-components-totals-discount .wc-block-components-totals-item__value {
	color: var(--v4-green-light);
}

.v4-wc .wc-block-components-panel__button {
	font-family: var(--f-body);
	font-weight: 500;
	font-size: 14px;
	color: var(--v4-ink);
}

/* Cart line items -------------------------------------------------------- */

.v4-wc .wc-block-cart-items__header {
	font-weight: 600;
	font-size: 11.5px;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--v4-muted);
	border-bottom-color: var(--v4-border);
}

.v4-wc .wc-block-cart-items__row {
	border-bottom: 1px solid var(--v4-border);
}

.v4-wc .wc-block-cart-item__image img {
	border-radius: 14px;
	background: var(--v4-mint);
}

.v4-wc .wc-block-components-product-name {
	font-family: var(--f-display);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.38;
	letter-spacing: -.006em;
	color: var(--v4-ink);
	text-decoration: none;
}

.v4-wc .wc-block-components-product-metadata,
.v4-wc .wc-block-components-product-metadata__description {
	font-size: 13px;
	line-height: 1.55;
	color: var(--v4-muted);
}

.v4-wc .wc-block-components-quantity-selector {
	border: 1px solid var(--v4-border);
	border-radius: 999px;
	background: #fff;
	overflow: hidden;
}

.v4-wc .wc-block-components-quantity-selector::after {
	display: none;
}

.v4-wc .wc-block-components-quantity-selector__button {
	color: var(--v4-ink);
	background: #f4f8fa;
	transition: background .18s ease;
}

.v4-wc .wc-block-components-quantity-selector__button:hover {
	background: var(--v4-mint);
}

.v4-wc .wc-block-components-quantity-selector__input {
	font-weight: 500;
	color: var(--v4-ink);
}

.v4-wc .wc-block-cart-item__remove-link {
	font-size: 12px;
	color: var(--v4-muted);
	text-underline-offset: 3px;
}

.v4-wc .wc-block-cart-item__remove-link:hover {
	color: var(--v4-pink-deep);
}

.v4-wc .wc-block-components-product-price__value,
.v4-wc .wc-block-cart-item__total-price-and-sale-badge-wrapper .wc-block-components-product-price {
	font-family: var(--f-display);
	font-weight: 400;
	font-size: 18px;
	letter-spacing: -.006em;
	color: var(--v4-ink);
}

/* Checkout steps --------------------------------------------------------- */

.v4-wc .wc-block-components-checkout-step {
	padding-left: 0;
	border: 0;
}

.v4-wc .wc-block-components-checkout-step__container::after {
	display: none;
}

.v4-wc .wc-block-components-checkout-step__heading {
	margin-top: 0;
}

.v4-wc .wc-block-checkout__actions {
	padding-top: 8px;
}

.v4-wc .wc-block-components-checkbox__label,
.v4-wc .wc-block-components-radio-control__label {
	font-size: 15px;
	color: var(--v4-body);
}

.v4-wc .wc-block-components-radio-control-accordion-option,
.v4-wc .wc-block-components-radio-control__option {
	border-color: var(--v4-border);
	border-radius: 14px;
}

/* Notices ---------------------------------------------------------------- */

.v4-wc .wc-block-components-notice-banner {
	border-radius: 14px;
	border-width: 1px;
	font-size: 15px;
}

.v4-wc .wc-block-components-notice-banner.is-error {
	border-color: #f6c9dd;
	background: var(--v4-tile-pink);
	color: var(--v4-ink);
}

.v4-wc .wc-block-components-notice-banner.is-info {
	border-color: #cfe3e8;
	background: var(--v4-mint);
	color: var(--v4-ink);
}

/* Empty cart ------------------------------------------------------------- */

.v4-wc .wc-block-cart__empty-cart__title {
	font-family: var(--f-display);
	font-weight: 400;
	letter-spacing: -.018em;
	color: var(--v4-ink);
}

/* ==========================================================================
   My account — panel treatment
   ========================================================================== */

.v4-woo .woocommerce-MyAccount-content {
	padding: 32px 34px 34px;
	border: 1px solid var(--v4-border);
	border-radius: 20px;
	background: #fff;
	box-shadow: var(--elev-2);
}

.v4-woo .woocommerce-MyAccount-content > p:last-child {
	margin-bottom: 0;
}

.v4-woo .woocommerce-MyAccount-content table {
	margin-top: 8px;
}

.v4-woo .woocommerce-MyAccount-content table td {
	color: var(--v4-body);
}

.v4-woo .woocommerce-MyAccount-content table tr:last-child td {
	border-bottom: 0;
}

.v4-woo .woocommerce-Address {
	padding: 24px 26px;
	border: 1px solid var(--v4-border);
	border-radius: 18px;
	background: #fff;
}

.v4-woo .woocommerce-Address-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 12px;
}

.v4-woo .woocommerce-Address address {
	font-style: normal;
	font-size: 15px;
	line-height: 1.7;
	color: var(--v4-body);
}

.v4-woo fieldset {
	margin: 28px 0 0;
	padding: 24px 26px;
	border: 1px solid var(--v4-border);
	border-radius: 18px;
}

.v4-woo fieldset legend {
	padding: 0 8px;
	font-family: var(--f-display);
	font-size: 18px;
	letter-spacing: -.006em;
	color: var(--v4-ink);
}

@media (max-width: 900px) {
	.v4-woo .woocommerce-MyAccount-content {
		padding: 24px 22px 26px;
	}

	.v4-checkout-bar__inner {
		flex-wrap: wrap;
		gap: 12px 16px;
	}

	.v4-checkout-bar__secure {
		margin-inline: 0;
		order: 3;
		width: 100%;
	}

	.v4-checkout-bar__back {
		margin-left: auto;
	}
}

/* ==========================================================================
   Cart & checkout — corrections
   ==========================================================================
   `.v4-woo a:not(.button):not(.v4-btn)` (0,3,1) was underlining the block
   buttons and product links, and the sidebar card class sits on the same
   element as `.wc-block-cart__sidebar` rather than a child, so both patterns
   are targeted below.
   ========================================================================== */

.v4-woo.v4-wc a.wc-block-components-button,
.v4-woo.v4-wc a.wc-block-cart__submit-button,
.v4-woo.v4-wc .wc-block-components-checkout-place-order-button {
	color: #fff;
	text-decoration: none;
}

.v4-woo.v4-wc a.wc-block-components-product-name {
	color: var(--v4-ink);
	text-decoration: none;
}

.v4-woo.v4-wc a.wc-block-components-product-name:hover {
	color: var(--v4-indigo);
}

.v4-woo.v4-wc .wc-block-components-panel__button,
.v4-woo.v4-wc .wc-block-cart-item__remove-link {
	text-decoration: none;
}

.v4-woo.v4-wc .wc-block-cart-item__remove-link {
	color: var(--v4-muted);
	text-decoration: underline;
}

/* Sidebar card — the class may be on the block wrapper itself. */
.v4-wc .wc-block-cart__sidebar,
.v4-wc .wc-block-checkout__sidebar,
.v4-wc .wp-block-woocommerce-cart-totals-block,
.v4-wc .wp-block-woocommerce-checkout-totals-block {
	padding: 26px 28px 28px;
	border: 1px solid var(--v4-border);
	border-radius: 20px;
	background: #fff;
	box-shadow: var(--elev-2);
}

.v4-wc .wc-block-cart__sidebar .wc-block-components-sidebar,
.v4-wc .wc-block-checkout__sidebar .wc-block-components-sidebar {
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	overflow: visible;
}

.v4-wc .wc-block-cart__sidebar h2,
.v4-wc .wc-block-checkout__sidebar h2,
.v4-wc .wc-block-components-checkout-order-summary__title-text {
	font-family: var(--f-display);
	font-weight: 400;
	font-size: 22px;
	line-height: 1.3;
	letter-spacing: -.01em;
	color: var(--v4-ink);
	text-transform: none;
}

/* Line-items panel */
.v4-wc .wc-block-cart__main {
	padding-right: 44px;
}

.v4-wc .wc-block-cart-items__header th {
	padding-bottom: 14px;
}

.v4-wc .wc-block-cart-item__wrap {
	padding-block: 8px;
}

/* Quantity stepper legibility */
.v4-wc .wc-block-components-quantity-selector__button {
	font-size: 18px;
	line-height: 1;
	opacity: 1;
}

.v4-wc .wc-block-components-quantity-selector__input {
	font-size: 15px;
}

/* Proceed / place-order buttons should fill their column. */
.v4-wc .wc-block-cart__submit-button,
.v4-wc .wc-block-components-checkout-place-order-button {
	width: 100%;
}

.v4-wc .wc-block-cart__submit-container {
	padding: 0;
	margin-top: 18px;
}

@media (max-width: 900px) {
	.v4-wc .wc-block-cart__main {
		padding-right: 0;
	}

	.v4-wc .wc-block-cart__sidebar,
	.v4-wc .wc-block-checkout__sidebar,
	.v4-wc .wp-block-woocommerce-cart-totals-block,
	.v4-wc .wp-block-woocommerce-checkout-totals-block {
		padding: 22px 20px 24px;
	}
}

/* ==========================================================================
   Cart & checkout — corrections, round 2
   ========================================================================== */

/* On checkout the sidebar wrapper and the totals block are separate nested
   elements, so carding both produced a card inside a card. Keep the outer. */
.v4-wc .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-totals-block,
.v4-wc .wp-block-woocommerce-checkout-totals-block .wc-block-checkout__sidebar,
.v4-wc .wc-block-cart__sidebar .wp-block-woocommerce-cart-totals-block,
.v4-wc .wp-block-woocommerce-cart-totals-block .wc-block-cart__sidebar {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

/* `.v4 p { margin: 0 }` (0,1,1) was cancelling the auto margins. */
.v4 p.v4-checkout-bar__secure {
	margin-block: 0;
	margin-inline: auto;
}

/* Woo gives the order-summary block its own bordered card; our sidebar card
   already provides that frame, so flatten the inner one (keeping the row
   dividers, which come from the totals wrappers). */
.v4-wc .wc-block-components-checkout-order-summary,
.v4-wc .wp-block-woocommerce-checkout-order-summary-block,
.v4-wc .wc-block-components-order-summary {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

/* ==========================================================================
   My account — support strip
   ========================================================================== */

.v4-page-body__inner--account {
	padding-block: 72px 28px;
}

.v4-account-help {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	padding-bottom: 96px;
}

.v4-account-help .v4-contact-card p {
	margin: 0;
}

@media (max-width: 900px) {
	.v4-account-help {
		grid-template-columns: minmax(0, 1fr);
		padding-bottom: 72px;
	}

	.v4-page-body__inner--account {
		padding-block: 56px 24px;
	}
}

/* ==========================================================================
   FAQ — open/close motion
   ==========================================================================
   The height animation itself is driven by site.js (initFaq), because a
   native <details> has no animatable box between closed and open. Here we
   handle the answer fade and turn the +/− glyph into two bars so the icon
   can rotate into a minus instead of swapping characters.
   ========================================================================== */

.v4-faq-item {
	overflow: hidden;
}

.v4-faq-item__answer {
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity .3s ease .05s, transform .3s ease .05s;
}

.v4-faq-item[open] .v4-faq-item__answer {
	opacity: 1;
	transform: none;
}

.v4-faq-item__toggle {
	position: relative;
	width: 22px;
	height: 22px;
	font-size: 0;
}

.v4-faq-item__toggle::before,
.v4-faq-item__toggle::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 16px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transform: translate(-50%, -50%);
	transition: transform .34s cubic-bezier(.4, 0, .2, 1);
}

.v4-faq-item__toggle::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.v4-faq-item[open] .v4-faq-item__toggle::after {
	transform: translate(-50%, -50%) rotate(0deg);
}

.v4-faq-item > summary {
	transition: color .2s ease;
}

.v4-faq-item > summary:hover h3 {
	color: var(--v4-indigo);
}

@media (prefers-reduced-motion: reduce) {
	.v4-faq-item__answer {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.v4-faq-item__toggle::before,
	.v4-faq-item__toggle::after {
		transition: none;
	}
}

/* ==========================================================================
   Shop archive
   ========================================================================== */

.v4-shop {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 56px;
	align-items: start;
	padding-block: 64px 96px;
}

.v4-shop__side {
	display: flex;
	flex-direction: column;
	gap: 28px;
	position: sticky;
	top: 104px;
}

.v4-facet {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-bottom: 26px;
	border-bottom: 1px solid var(--v4-border);
}

.v4-facet:last-of-type {
	border-bottom: 0;
	padding-bottom: 0;
}

.v4 .v4-facet__title {
	font-family: var(--f-body);
	font-weight: 600;
	font-size: 11.5px;
	line-height: 1.2;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--v4-muted);
}

.v4-facet__list {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.v4 .v4-facet__list a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 12px;
	margin-inline: -12px;
	border-radius: 12px;
	font-family: var(--f-display);
	font-size: 16px;
	line-height: 1.3;
	letter-spacing: -.004em;
	color: var(--v4-body);
	text-decoration: none;
	transition: background .18s ease, color .18s ease;
}

.v4 .v4-facet__list a:hover {
	background: var(--v4-mint);
	color: var(--v4-ink);
}

.v4 .v4-facet__list a.is-active {
	background: var(--v4-mint);
	color: var(--v4-ink);
}

.v4-facet__list .v4-stars {
	font-size: 12px;
}

.v4-facet__price {
	display: flex;
	align-items: center;
	gap: 8px;
}

.v4-facet__price input {
	width: 100%;
	min-width: 0;
	padding: 11px 12px;
	border: 1px solid #dce9ed;
	border-radius: 12px;
	background: #fff;
	font-family: var(--f-body);
	font-size: 15px;
	color: var(--v4-ink);
	-moz-appearance: textfield;
}

.v4-facet__price input::-webkit-outer-spin-button,
.v4-facet__price input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.v4-facet__price input:focus {
	outline: none;
	border-color: var(--v4-indigo-light);
	box-shadow: 0 0 0 4px rgba(90, 99, 180, .12);
}

.v4-facet__price span {
	color: var(--v4-muted);
}

.v4 button.v4-facet__apply {
	align-self: flex-start;
	padding: 10px 22px;
	border-radius: 999px;
	background: var(--v4-ink);
	font-family: var(--f-display);
	font-size: 15px;
	line-height: 1.2;
	letter-spacing: -.004em;
	color: #fff;
	transition: transform .18s ease;
}

.v4 button.v4-facet__apply:hover {
	transform: translateY(-1px);
}

.v4-facet--clear {
	padding-bottom: 0;
	border-bottom: 0;
}

.v4-shop__help {
	margin-top: 4px;
}

.v4-shop__help p {
	margin: 0;
}

/* Toolbar ---------------------------------------------------------------- */

.v4-shop__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	padding-bottom: 22px;
	margin-bottom: 28px;
	border-bottom: 1px solid var(--v4-border);
}

.v4-shop__toolbar .woocommerce-result-count,
.v4-shop__toolbar .wc-block-product-results-count {
	flex: 1 0 auto;
	margin: 0;
	font-size: 14px;
	line-height: 1.62;
	color: var(--v4-muted);
}

.v4-shop__toolbar .woocommerce-ordering,
.v4-shop__toolbar .wc-block-catalog-sorting {
	margin: 0;
}

.v4-shop__toolbar select {
	padding: 11px 40px 11px 16px;
	border: 1px solid #dce9ed;
	border-radius: 999px;
	background: #fff;
	font-family: var(--f-body);
	font-size: 15px;
	color: var(--v4-ink);
}

.v4-shop__toolbar select:focus {
	outline: none;
	border-color: var(--v4-indigo-light);
	box-shadow: 0 0 0 4px rgba(90, 99, 180, .12);
}

/* Product grid ----------------------------------------------------------- */

.v4-shop__main .wc-block-product-template,
.v4-shop__main .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.v4-shop__main .wc-block-product-template__responsive,
.v4-shop__main .wc-block-product {
	display: flex;
	flex-direction: column;
	padding: 18px 18px 24px;
	border: 1px solid var(--v4-border);
	border-radius: 24px;
	background: #fff;
	box-shadow: var(--elev-2);
	transition: transform .2s ease, box-shadow .2s ease;
}

.v4-shop__main .wc-block-product:hover {
	transform: translateY(-3px);
	box-shadow: var(--elev-3);
}

.v4-shop__main .wc-block-components-product-image {
	margin-bottom: 0;
}

.v4-shop__main .wc-block-components-product-image img {
	width: 100%;
	height: 260px;
	border-radius: 18px;
	background: var(--v4-mint);
	object-fit: contain;
}

.v4-shop__main .wp-block-post-title {
	margin: 14px 0 6px;
	font-family: var(--f-display);
	font-weight: 400;
	font-size: 22px;
	line-height: 1.3;
	letter-spacing: -.01em;
}

.v4 .v4-shop__main .wp-block-post-title a {
	color: var(--v4-ink);
	text-decoration: none;
}

.v4 .v4-shop__main .wp-block-post-title a:hover {
	color: var(--v4-indigo);
}

.v4-shop__main .wc-block-components-product-price {
	font-family: var(--f-display);
	font-size: 18px;
	letter-spacing: -.006em;
	color: var(--v4-body);
}

.v4-shop__main .wp-block-woocommerce-product-button {
	margin-top: auto;
	padding-top: 18px;
}

.v4-shop__main .wp-block-woocommerce-product-button .wp-block-button__link,
.v4-shop__main .wc-block-components-product-button .wc-block-components-product-button__button {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	padding: 15px 24px;
	border: 0;
	border-radius: 999px;
	background: var(--v4-grad);
	box-shadow: var(--elev-brand);
	font-family: var(--f-display);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.2;
	letter-spacing: -.004em;
	color: #fff;
	text-decoration: none;
	transition: transform .18s ease, filter .18s ease;
}

.v4-shop__main .wc-block-components-product-button .wc-block-components-product-button__button:hover {
	transform: translateY(-1px);
	filter: saturate(1.06);
	color: #fff;
}

/* Pagination ------------------------------------------------------------- */

.v4-shop__main .wp-block-query-pagination {
	gap: 8px;
	margin-top: 44px;
}

.v4 .v4-shop__main .wp-block-query-pagination a,
.v4-shop__main .wp-block-query-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding-inline: 12px;
	border-radius: 999px;
	font-family: var(--f-display);
	font-size: 16px;
	color: var(--v4-body);
	text-decoration: none;
	transition: background .18s ease, color .18s ease;
}

.v4 .v4-shop__main .wp-block-query-pagination a:hover {
	background: var(--v4-mint);
	color: var(--v4-ink);
}

.v4-shop__main .wp-block-query-pagination .page-numbers.current {
	background: var(--v4-ink);
	color: #fff;
}

/* Archive hero ----------------------------------------------------------- */

.v4-page-hero .wp-block-query-title {
	font-family: var(--f-display);
	font-weight: 400;
	font-size: clamp(34px, 3.75vw, 54px);
	line-height: 1.06;
	letter-spacing: -.022em;
	color: var(--v4-ink);
}

.v4-page-hero .wp-block-term-description {
	max-width: 620px;
	font-size: 18px;
	line-height: 1.66;
	color: var(--v4-body);
}

/* Reviews block that ends a page needs its own breathing room. */
.v4-proof--standalone .v4-proof__inner {
	padding-bottom: 104px;
}

@media (max-width: 1100px) {
	.v4-shop {
		grid-template-columns: 220px minmax(0, 1fr);
		gap: 40px;
	}

	.v4-shop__main .wc-block-product-template,
	.v4-shop__main .wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.v4-shop {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
		padding-block: 44px 72px;
	}

	.v4-shop__side {
		position: static;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}

	.v4-proof--standalone .v4-proof__inner {
		padding-bottom: 72px;
	}
}

@media (max-width: 640px) {
	.v4-shop__side {
		grid-template-columns: minmax(0, 1fr);
	}

	.v4-shop__main .wc-block-product-template,
	.v4-shop__main .wp-block-post-template {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==========================================================================
   Shop grid — corrections
   ==========================================================================
   Product Collection renders `<ul class="wp-block-post-template …">` with
   `<li>` items and applies its own flex layout plus per-item widths. Card the
   <li> only (an earlier rule also matched a wrapper, giving a card inside a
   card) and override the flex sizing so the grid controls the columns.
   ========================================================================== */

.v4-shop__main .wc-block-product-template__responsive,
.v4-shop__main .wc-block-product,
.v4-shop__main .wp-block-woocommerce-product-collection {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.v4-shop__main .wp-block-post-template {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.v4-shop__main .wp-block-post-template > li {
	display: flex !important;
	flex-direction: column;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 18px 18px 24px;
	border: 1px solid var(--v4-border);
	border-radius: 24px;
	background: #fff;
	box-shadow: var(--elev-2);
	transition: transform .2s ease, box-shadow .2s ease;
}

.v4-shop__main .wp-block-post-template > li:hover {
	transform: translateY(-3px);
	box-shadow: var(--elev-3);
}

.v4-shop__main .wp-block-post-template > li > * {
	max-width: none;
}

.v4-shop__main .wp-block-woocommerce-product-image,
.v4-shop__main .wc-block-components-product-image {
	margin: 0;
}

.v4-shop__main .wp-block-woocommerce-product-image img,
.v4-shop__main .wc-block-components-product-image img {
	display: block;
	width: 100%;
	height: 260px;
	border-radius: 18px;
	background: var(--v4-mint);
	object-fit: contain;
}

@media (max-width: 1100px) {
	.v4-shop__main .wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.v4-shop__main .wp-block-post-template {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==========================================================================
   Shop grid — corrections, round 2
   ==========================================================================
   Target the collection's list/items structurally rather than by Woo's
   class names, which move between releases.
   ========================================================================== */

.v4-shop__main .wp-block-woocommerce-product-collection > ul {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.v4-shop__main .wp-block-woocommerce-product-collection > ul > li {
	display: flex !important;
	flex-direction: column;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 18px 18px 24px;
	border: 1px solid var(--v4-border);
	border-radius: 24px;
	background: #fff;
	box-shadow: var(--elev-2);
	transition: transform .2s ease, box-shadow .2s ease;
}

.v4-shop__main .wp-block-woocommerce-product-collection > ul > li:hover {
	transform: translateY(-3px);
	box-shadow: var(--elev-3);
}

.v4-shop__main .wp-block-woocommerce-product-collection > ul > li img {
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	border-radius: 18px;
	background: var(--v4-mint);
	object-fit: contain;
}

.v4-shop__main .wp-block-woocommerce-product-collection > ul > li .wp-block-woocommerce-product-button {
	margin-top: auto;
	padding-top: 18px;
}

/* `[hidden]` is a UA rule and loses to `.v4-facet { display: flex }`. */
.v4-facet[hidden] {
	display: none;
}

/* Shop empty state (injected by shop.js when a filter excludes everything) */
.v4-shop__empty {
	padding: 56px 0 72px;
	max-width: 480px;
}

.v4 .v4-shop__empty h2 {
	margin-bottom: 10px;
	font-family: var(--f-display);
	font-weight: 400;
	font-size: 22px;
	line-height: 1.3;
	letter-spacing: -.01em;
	color: var(--v4-ink);
}

.v4-shop__empty p {
	font-size: 16px;
	line-height: 1.68;
	color: var(--v4-body);
}

.v4 .v4-shop__empty a {
	color: var(--v4-indigo);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ==========================================================================
   Overrides — round 6
   ========================================================================== */

/* The ingredient marquee no longer stops under the pointer. The cards carry no
   links, so the pause was not buying time to click anything, and catching a
   moving strip mid-travel reads as a stall rather than as a control.

   Keyboard focus still pauses it. Below 560px the strip becomes a horizontal
   scroll container, which browsers make focusable, and a target that keeps
   moving while you are arrowing through it is a genuine problem.

   Both halves have to be spelled out: the rule this answers
   (`.v4-marquee:hover .v4-marquee__track`, up at line ~3362) carries the same
   0-3-0 specificity, so only source order separates them. Restating the
   focus-within case *after* the hover override keeps focus-while-hovering
   paused instead of letting `running` win it. */
.v4-marquee:hover .v4-marquee__track {
	animation-play-state: running;
}

.v4-marquee:focus-within .v4-marquee__track {
	animation-play-state: paused;
}

/* ==========================================================================
   Legal / policy documents
   --------------------------------------------------------------------------
   Privacy, Terms, Refunds and Shipping share one prose layout. Note the
   namespace: .v4-legal is already the footer's FDA / Prop 65 block, so these
   use .v4-doc.

   .v4-doc__todo marks a fact that still needs confirming before this is a
   real policy. It is deliberately highlighted rather than hidden — a
   placeholder that looks like body copy is a placeholder that ships.
   ========================================================================== */

.v4-doc{
	max-width: 74ch;
	margin-inline: auto;
}

.v4-doc__meta{
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin: 0 0 34px;
	padding: 0 0 22px;
	border-bottom: 1px solid var(--v4-border);
	font-size: 13.5px;
	color: var(--v4-muted, #6b7280);
}
.v4-doc__meta b{ color: var(--v4-ink, #11141c); font-weight: 600 }

.v4-doc__intro{
	font-size: 17.5px;
	line-height: 1.7;
	color: var(--v4-ink, #11141c);
	margin: 0 0 34px;
}

/* contents */
.v4-doc__toc{
	margin: 0 0 44px;
	padding: 22px 24px;
	border: 1px solid var(--v4-border);
	border-radius: 16px;
	background: #fbfcfe;
}
.v4-doc__toc h2{
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--v4-muted, #6b7280);
	margin: 0 0 12px;
}
.v4-doc__toc ol{
	margin: 0;
	padding-left: 1.25em;
	columns: 2;
	column-gap: 28px;
	font-size: 14.5px;
	line-height: 1.9;
}
.v4-doc__toc a{ color: var(--v4-ink, #11141c); text-decoration: none }
.v4-doc__toc a:hover{ color: var(--v4-indigo, #4f46e5); text-decoration: underline }

.v4-doc h2{
	font-size: clamp(19px, 2vw, 23px);
	font-weight: 700;
	letter-spacing: -.015em;
	line-height: 1.3;
	margin: 46px 0 12px;
	scroll-margin-top: 110px;
}
.v4-doc h2:first-of-type{ margin-top: 0 }

.v4-doc h3{
	font-size: 16px;
	font-weight: 700;
	margin: 26px 0 8px;
}

.v4-doc p,
.v4-doc li{
	font-size: 16px;
	line-height: 1.75;
	color: var(--v4-body, #3f4451);
}
.v4-doc p{ margin: 0 0 16px }

.v4-doc ul,
.v4-doc ol{ margin: 0 0 18px; padding-left: 1.35em }
.v4-doc li{ margin: 0 0 8px }
.v4-doc li::marker{ color: var(--v4-muted, #6b7280) }

.v4-doc a{ color: var(--v4-indigo, #4f46e5); text-decoration: underline; text-underline-offset: 3px }

.v4-doc strong{ color: var(--v4-ink, #11141c); font-weight: 600 }

/* a short definition-style row, used for the subscription terms */
.v4-doc__facts{
	margin: 0 0 22px;
	border: 1px solid var(--v4-border);
	border-radius: 14px;
	overflow: hidden;
}
.v4-doc__facts div{
	display: grid;
	grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
	gap: 14px;
	padding: 13px 18px;
	font-size: 15px;
	border-top: 1px solid var(--v4-border);
}
.v4-doc__facts div:first-child{ border-top: 0 }
.v4-doc__facts dt{ font-weight: 600; color: var(--v4-ink, #11141c) }
.v4-doc__facts dd{ margin: 0; color: var(--v4-body, #3f4451) }

/* callout */
.v4-doc__note{
	margin: 0 0 24px;
	padding: 16px 20px;
	border-left: 3px solid var(--v4-indigo, #4f46e5);
	border-radius: 0 12px 12px 0;
	background: #f6f7fe;
	font-size: 15px;
	line-height: 1.65;
}
.v4-doc__note p{ margin: 0; font-size: 15px }
.v4-doc__note p + p{ margin-top: 10px }

/* unresolved facts — highlighted on purpose */
.v4-doc__todo{
	background: #fff3c4;
	color: #6b4e00;
	padding: 1px 6px;
	border-radius: 5px;
	font-weight: 600;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

.v4-doc__updated{
	margin: 44px 0 0;
	padding-top: 22px;
	border-top: 1px solid var(--v4-border);
	font-size: 14px;
	color: var(--v4-muted, #6b7280);
}

@media (max-width: 720px){
	.v4-doc__toc ol{ columns: 1 }
	.v4-doc__facts div{ grid-template-columns: 1fr; gap: 2px }
}