/* =========================================================================
   SPx Hybrid Theme — custom front-end CSS
   =========================================================================

   The single home for bespoke CSS on the Salient-based live sites.

   This is the SPx design-system stylesheet written for the Astra rebuild
   (spx-astra-child/assets/css/custom.css), carried across so the Gutenberg
   pages, posts and product pages built there render identically on Salient.
   Keep the two files in step: edit the Astra copy first, then port the
   change here.

   Structure:
     1. Design-system tokens  — from the Six Pack Nutrition Shop Styleguide
     2. Shared patterns       — section heading, row header, carousel, card
     3. Page-specific rules   — in page order, labelled

   Rules:
   - Use theme.json presets first, never raw hex or px:
       var(--wp--preset--color--primary)        #DF2793
       var(--wp--preset--font-size--3xl)        48px
       var(--wp--preset--spacing--12)           48px
       var(--wp--preset--font-family--heading)  Montserrat
     The --spr-* tokens below cover only what theme.json cannot express
     (radii, shadows, gutters). theme.json is identical in both themes, so
     every preset the Astra copy uses resolves here too.
   - Anything expressible in theme.json belongs in theme.json, not here.
   - Keep page sections in page order and label which page they serve, so
     rules can be deleted with confidence when a page is redesigned.

   Not ported from the Astra copy (Salient keeps its own header and footer):
   - 15. HEADER  — Astra Header Builder (.ast-*, .main-header-menu,
                   .spr-topbar).
   - 16. FOOTER  — Astra Footer Builder (.site-footer, .site-*-footer-wrap,
                   .spr-foot-*).
   - 18. Basket icon box — .ast-site-header-cart fixes.
   Section numbers are kept as they are in the Astra copy so the two files
   line up; the gaps are deliberate.

   Gated so they cannot touch legacy Salient content:
   - 19. ARTICLES and 21. SINGLE PRODUCT target WooCommerce's and the
     post template's own markup (.single-post .entry-content,
     .woocommerce-Tabs-panel), which Salient renders for every post and
     product. Here every .single-post / .single-product selector is
     prefixed with body.spx-blocks, a class functions.php adds only when the
     post_content is block-built (has_blocks()). Legacy WPBakery posts and
     products never get the class, so they are untouched. The Astra copy has
     no prefix; strip "body.spx-blocks" when porting a rule back.
   - 19. ARTICLES also relies on the .spx-post-hero markup an Astra hook
     injects (post-layout.php); there is no Salient equivalent yet, so only
     the in-content typography applies here.
   ========================================================================= */

/* =========================================================================
   1. DESIGN-SYSTEM TOKENS
   =========================================================================
   Ported from the Six Pack Nutrition Shop Styleguide (v1.0, Sept 2026).
   Colours deliberately reference the theme.json presets rather than
   restating hex values, so the palette still has one source of truth.
   ========================================================================= */

:root {
	/* Signature gradient — always two stops, pink to blue. 90deg for rules
	   and strips; 135deg reserved for large panels (hero, closing CTA).
	   Turquoise never appears in a gradient. */
	--spr-gradient: var(--wp--preset--gradient--brand-horizontal);
	--spr-gradient-diag: var(--wp--preset--gradient--brand-diagonal);

	/* Radii — cards 12px, card images 8px, everything interactive is a pill. */
	--spr-radius-card: 12px;
	--spr-radius-image: 8px;
	--spr-radius-pill: 9999px;

	/* Shadows — rest, and the pink-tinted hover that pairs with a 4px lift. */
	--spr-shadow-card: 0 2px 12px rgba(0, 0, 0, .08);
	--spr-shadow-card-hover: 0 8px 32px rgba(223, 39, 147, .2);

	/* Spacing — container 1200px (set in theme.json), gutter 24px,
	   section padding 80px desktop / 48px mobile. */
	--spr-gutter: 24px;
	--spr-section-pad: 80px;

	/* The warm beige behind the "Move." pillar. Carried over from the
	   WPBakery original; it has no equivalent in theme.json or the
	   styleguide. Promote it to a real token if the redesign keeps it. */
	--spx-warm-sand: #DBD7D1;
}

@media (max-width: 767px) {
	:root {
		--spr-gutter: 16px;
		--spr-section-pad: 48px;
	}
}


/* =========================================================================
   2. SHARED PATTERNS
   ========================================================================= */

/* ---- Section rhythm -----------------------------------------------------
   Backgrounds alternate white -> #F1F1F2 -> white down the page. Gradients
   are reserved for the hero and the closing CTA.
   ------------------------------------------------------------------------ */

.spr-section {
	padding-block: var(--spr-section-pad);
}

.spr-section-alt {
	background-color: var(--wp--preset--color--grey-section);
}

/* ---- Section heading ----------------------------------------------------
   Montserrat 900 uppercase, centred, with a 64x2px gradient underline.
   This underline is the system's signature and is what makes a converted
   section read as part of the brand rather than a stock block heading.
   ------------------------------------------------------------------------ */

.spr-section-title {
	text-align: center;
	margin-block: 0 var(--wp--preset--spacing--10);
}

.spr-section-title::after {
	content: "";
	display: block;
	width: 64px;
	height: 2px;
	background: var(--spr-gradient);
	margin: 14px auto 0;
}

/* ---- Row header ---------------------------------------------------------
   Sits inside a section, above a carousel: 24px/700 uppercase title with an
   optional pink "View all" on the right, over a 2px gradient rule. Never a
   plain grey line.
   ------------------------------------------------------------------------ */

.spr-rowhead {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: var(--wp--preset--spacing--4);
	padding-bottom: var(--wp--preset--spacing--3);
	margin-bottom: var(--spr-gutter);
	border-bottom: 2px solid transparent;
	border-image: var(--spr-gradient) 1;
}

.spr-rowhead__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.25;
	letter-spacing: -0.02em;
	text-transform: uppercase;
}

.spr-rowhead__link {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* ---- Carousel -----------------------------------------------------------
   The house horizontal scroller. A native scroll-snap track; arrows, dots
   and the track's a11y attributes are injected by assets/js/spr-carousel.js.
   No slider library, no autoplay, no infinite loop.

   Overflow is clipped by the track, never the page — the body must never
   scroll sideways.
   ------------------------------------------------------------------------ */

.spr-carousel {
	position: relative;
	--spr-card-w: calc((100% - 3 * var(--spr-gutter)) / 4);
}

@media (max-width: 1199px) { .spr-carousel { --spr-card-w: calc((100% - 2 * var(--spr-gutter)) / 3); } }
@media (max-width: 1023px) { .spr-carousel { --spr-card-w: 42%; } }
@media (max-width: 767px)  { .spr-carousel { --spr-card-w: 74%; } }

.spr-carousel__track {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--spr-gutter);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	/* 8px/4px of breathing room so the card hover-lift and shadow are not
	   clipped by the scroll container. */
	padding: 8px 4px 24px;
	margin: 0 -4px;
	scrollbar-width: none;
}

.spr-carousel__track::-webkit-scrollbar { display: none; }

/* Explicit stretch so cards in a row share the tallest card's height —
   a quote card is much taller than a results-only one. */
.spr-carousel__track {
	align-items: stretch;
}

.spr-carousel__track > * {
	flex: 0 0 var(--spr-card-w);
	scroll-snap-align: start;
	/* The track is a core group, so WordPress's layout CSS gives every child
	   after the first a 24px block-gap margin. On a horizontal track that gap
	   is meaningless: it drops every card but the first by 24px and stops them
	   stretching to the row height. That rule is emitted as
	   `.wp-block-group.is-layout-flow > :not(:first-child)`, which outranks a
	   single class, so this one has to insist. Horizontal spacing comes from
	   the track's own `gap`. */
	margin-block: 0 !important;
}

/* A row that does not overflow centres its cards and drops its controls,
   so a one- or two-item range never looks broken. Set by the script. */
.spr-carousel.is-static .spr-carousel__track {
	justify-content: center;
	overflow: visible;
	scroll-snap-type: none;
}

.spr-carousel.is-static .spr-carousel__arrow,
.spr-carousel.is-static .spr-carousel__dots {
	display: none;
}

/* Arrows — 48px white circles, 2px pink border, pink chevron. Always visible
   at rest on desktop, never hover-revealed. */
.spr-carousel__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 48px;
	height: 48px;
	padding: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--white);
	border: 2px solid var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
	box-shadow: var(--spr-shadow-card);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}

.spr-carousel__arrow svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.spr-carousel__arrow:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

.spr-carousel__arrow[disabled] {
	opacity: .35;
	pointer-events: none;
}

.spr-carousel__arrow--prev { left: -24px; }
.spr-carousel__arrow--next { right: -24px; }

/* Inside 1280px there is no room outside the track, so overlay the edges. */
@media (max-width: 1279px) {
	.spr-carousel__arrow--prev { left: 8px; }
	.spr-carousel__arrow--next { right: 8px; }
}

@media (max-width: 767px) {
	.spr-carousel__arrow { width: 40px; height: 40px; }
	.spr-carousel__arrow--prev { left: 4px; }
	.spr-carousel__arrow--next { right: 4px; }
}

/* Dots — one per page; the active dot stretches into a pink pill. */
.spr-carousel__dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 4px;
}

.spr-carousel__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: var(--spr-radius-pill);
	background: var(--wp--preset--color--grey-border);
	cursor: pointer;
	transition: width .2s ease, background-color .2s ease;
}

.spr-carousel__dot.is-active {
	width: 24px;
	background: var(--wp--preset--color--primary);
}

/* ---- Card ---------------------------------------------------------------
   One card everywhere: white, 1px border, 12px radius, 16px padding, rest
   shadow. Hover lifts 4px into the pink-tinted shadow.
   ------------------------------------------------------------------------ */

.spr-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--3);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--grey-border);
	border-radius: var(--spr-radius-card);
	box-shadow: var(--spr-shadow-card);
	padding: var(--wp--preset--spacing--4);
	transition: transform .25s ease, box-shadow .25s ease;
	/* No height:100% here. The card is itself the flex item, so an explicit
	   height would cancel the track's align-items:stretch and leave cards
	   ragged. (The styleguide sets it because its card sits inside an <li>.) */
}

.spr-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--spr-shadow-card-hover);
}

.spr-card img {
	border-radius: var(--spr-radius-image);
	width: 100%;
	display: block;
}

/* ---- WooCommerce product rows -------------------------------------------
   A product row is the real WooCommerce product list made into the same
   carousel: woocommerce/product-collection renders ul.wc-block-product-template
   with li.wc-block-product children, and those become the track and the cards.
   One card everywhere — a product looks identical on the homepage and in the
   catalogue.
   ------------------------------------------------------------------------ */

.spr-carousel .wc-block-product-template {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: var(--spr-gutter);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	padding: 8px 4px 24px;
	margin: 0 -4px;
	list-style: none;
	scrollbar-width: none;
}

.spr-carousel .wc-block-product-template::-webkit-scrollbar { display: none; }

.spr-carousel .wc-block-product-template > li {
	flex: 0 0 var(--spr-card-w);
	max-width: var(--spr-card-w);
	scroll-snap-align: start;
	margin-block: 0;
}

.spr-carousel.is-static .wc-block-product-template {
	justify-content: center;
	overflow: visible;
	scroll-snap-type: none;
}

/* The product card itself. */
.spr-carousel li.wc-block-product,
.spr-product-grid li.wc-block-product {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--grey-border);
	border-radius: var(--spr-radius-card);
	box-shadow: var(--spr-shadow-card);
	padding: var(--wp--preset--spacing--4);
	transition: transform .25s ease, box-shadow .25s ease;
}

.spr-carousel li.wc-block-product:hover,
.spr-product-grid li.wc-block-product:hover {
	transform: translateY(-4px);
	box-shadow: var(--spr-shadow-card-hover);
}

.spr-carousel .wc-block-components-product-image img,
.spr-product-grid .wc-block-components-product-image img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--spr-radius-image);
	width: 100%;
}

/* Product title — Montserrat 600 15px, sentence case, centred. The one
   approved exception to uppercase headings: a Black-weight uppercase name is
   unreadable at card width. */
.spr-carousel .wp-block-post-title,
.spr-product-grid .wp-block-post-title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 15px;
	line-height: 1.35;
	text-transform: none;
	text-align: center;
	margin: .85rem 0 .4rem;
}

.spr-carousel .wp-block-post-title a,
.spr-product-grid .wp-block-post-title a {
	color: var(--wp--preset--color--black);
	text-decoration: none;
}

/* Stretch the title link over the whole card so anywhere is clickable. */
.spr-carousel .wp-block-post-title a::after,
.spr-product-grid .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.spr-carousel .wc-block-components-product-price,
.spr-product-grid .wc-block-components-product-price {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 15px;
	text-align: center;
	display: block;
	margin: 0 0 14px;
}

.spr-carousel .wc-block-components-product-price del,
.spr-product-grid .wc-block-components-product-price del {
	color: var(--wp--preset--color--muted-text);
	font-weight: 400;
	margin-right: 6px;
}

.spr-carousel .wc-block-components-product-price ins,
.spr-product-grid .wc-block-components-product-price ins {
	text-decoration: none;
	color: var(--wp--preset--color--primary);
}

/* Button pinned to the bottom so buttons align across a row regardless of
   how long the titles are. z-index keeps it above the stretched title link. */
.spr-carousel .wp-block-woocommerce-product-button,
.spr-product-grid .wp-block-woocommerce-product-button {
	margin-top: auto;
	position: relative;
	z-index: 2;
}

.spr-carousel .wp-block-woocommerce-product-button .wp-block-button__link,
.spr-product-grid .wp-block-woocommerce-product-button .wp-block-button__link {
	display: inline-block;
	width: 100%;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 12px;
	line-height: 1;
	letter-spacing: .1em;
	text-transform: uppercase;
	border-radius: var(--spr-radius-pill);
	padding: 12px 20px;
	text-align: center;
}

.spr-carousel .wc-block-components-product-sale-badge,
.spr-product-grid .wc-block-components-product-sale-badge {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	border: 0;
	border-radius: var(--spr-radius-pill);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 6px 12px;
}

/* ---- Product grid (shop / range pages) ---------------------------------- */

.spr-product-grid .wc-block-product-template {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--spr-gutter);
	list-style: none;
	padding: 0;
	margin: 0;
}

/*
 * Fill the grid cell. WooCommerce's `is-flex-container columns-N` CSS and
 * Astra's `ast-grid-common-col` both put their own width on the product li,
 * which leaves ~68px cards sitting inside 245px cells once the template is a
 * grid. Overriding width here is what makes the cards actually the column.
 */
.spr-product-grid .wc-block-product-template > li,
.spr-product-grid .wc-block-product-template.is-flex-container > li {
	width: 100%;
	max-width: none;
	margin: 0;
	float: none;
}

/*
 * Two columns all the way down to the smallest phone — a single-column
 * catalogue turns browsing into an endless scroll and hides how much range
 * there is. The card copes: title and price centre, and the button stays a
 * full-width pill.
 */
@media (max-width: 1023px) { .spr-product-grid .wc-block-product-template { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 600px) {
	.spr-product-grid .wc-block-product-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	/* Tighter card at two-up on a phone. */
	.spr-product-grid li.wc-block-product {
		padding: 10px;
	}

	.spr-product-grid .wp-block-post-title {
		font-size: 13px;
		margin: .6rem 0 .3rem;
	}

	.spr-product-grid .wc-block-components-product-price {
		font-size: 13px;
		margin-bottom: 10px;
	}

	.spr-product-grid .wp-block-woocommerce-product-button .wp-block-button__link {
		font-size: 11px;
		letter-spacing: .06em;
		padding: 10px 8px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.spr-carousel__track,
	.spr-carousel .wc-block-product-template { scroll-behavior: auto; }
	.spr-card,
	.spr-carousel li.wc-block-product,
	.spr-product-grid li.wc-block-product,
	.spr-carousel__arrow,
	.spr-carousel__dot { transition: none; }
	.spr-card:hover,
	.spr-carousel li.wc-block-product:hover,
	.spr-product-grid li.wc-block-product:hover { transform: none; }
}


/* =========================================================================
   3. SHARED PAGE FURNITURE
   ========================================================================= */

/* Intro copy under a section heading. Centred and measured so it does not
   run the full 1200px container. */
.spx-lede {
	max-width: 68ch;
	margin-inline: auto;
	text-align: center;
	color: var(--wp--preset--color--dark-text);
	font-size: var(--wp--preset--font-size--md);
}

/* Closing call to action, and The Programme hero — the two places the
   diagonal gradient is allowed on a page. Reversed copy, white underline,
   white button. */
.spx-closing-cta,
.spx-prog-hero {
	background: var(--spr-gradient-diag);
	padding-block: var(--spr-section-pad);
	text-align: center;
}

.spx-closing-cta .spr-section-title,
.spx-closing-cta .spx-lede,
.spx-prog-hero .spr-section-title,
.spx-prog-hero .spx-lede {
	color: var(--wp--preset--color--white);
}

/* The gradient underline would be invisible on the gradient ground. */
.spx-closing-cta .spr-section-title::after,
.spx-prog-hero .spr-section-title::after {
	background: var(--wp--preset--color--white);
}

.spx-closing-cta .wp-block-button__link,
.spx-prog-hero .wp-block-button__link {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--primary);
}

.spx-closing-cta .wp-block-button__link:hover,
.spx-prog-hero .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
}

.spx-help-cta {
	text-align: center;
}


/* =========================================================================
   4. PROGRAMME SELECTOR (synced pattern, used by Join Now + The Programme)
   ========================================================================= */

.spx-programme-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--spr-gutter);
}

@media (max-width: 1023px) { .spx-programme-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .spx-programme-grid { grid-template-columns: 1fr; } }

.spx-programme {
	text-align: center;
}

.spx-programme__media img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.spx-programme__title {
	font-size: var(--wp--preset--font-size--lg);
	margin-block: var(--wp--preset--spacing--4) var(--wp--preset--spacing--2);
}

.spx-programme__copy {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--dark-text);
	margin-block: 0 var(--wp--preset--spacing--4);
}

/* Pinned to the bottom so buttons align across cards of differing copy length. */
.spx-programme__cta {
	margin-top: auto;
	justify-content: center;
}

.spx-programme__cta .wp-block-button,
.spx-programme__cta .wp-block-button__link {
	width: 100%;
}


/* =========================================================================
   5. TRANSFORMATIONS (815)
   ========================================================================= */

.spx-transformations-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--spr-gutter);
}

@media (max-width: 1023px) { .spx-transformations-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px)  { .spx-transformations-grid { grid-template-columns: repeat(2, 1fr); } }

.spx-transformations-grid > .spx-transformation { margin: 0 !important; }

.spx-transformation {
	margin: 0;
	border-radius: var(--spr-radius-image);
	overflow: hidden;
	background: var(--wp--preset--color--grey-section);
}

.spx-transformation a {
	display: block;
	line-height: 0;
	cursor: zoom-in;
}

/*
 * Show the whole before/after shot. These are composite images where the crop
 * IS the content — cover was slicing the top and bottom off every one. The
 * grid stays even because the tiles are ratio-locked and the image is
 * letterboxed inside, not because the image is cut down.
 */
/*
 * 1:1 — every transformation image is a square composite (1521x1521). Matching
 * the tile to the source means `contain` fits exactly: nothing cropped, and no
 * letterbox bars either.
 */
.spx-transformation img {
	width: 100%;
	height: 100%;
	display: block;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	transition: transform .3s ease;
}

.spx-transformation:hover img,
.spx-transformation:focus-within img {
	transform: scale(1.04);
}

/* A pink veil and a zoom cue on hover, so the tiles read as openable. */
.spx-transformation a::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wp--preset--color--primary);
	opacity: 0;
	transition: opacity .3s ease;
	pointer-events: none;
}

.spx-transformation a {
	position: relative;
}

.spx-transformation:hover a::after,
.spx-transformation:focus-within a::after {
	opacity: .12;
}

.spx-transformation:focus-within {
	outline: 3px solid var(--wp--preset--color--secondary);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.spx-transformation img { transition: none; }
	.spx-transformation:hover img { transform: none; }
}


/* ---- Lightbox ------------------------------------------------------------
   Built by assets/js/spx-lightbox.js. The markup's anchors point at the
   full-size file, so with JS off a click still opens the image.
   ------------------------------------------------------------------------ */

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

.spx-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: rgba(0, 0, 0, .92);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(16px, 4vw, 48px);
}

/*
 * The script toggles the `hidden` attribute, but an author-level `display:flex`
 * beats the user-agent rule for [hidden] — without this the overlay sits over
 * the page from page load. Needs to come after the rule above.
 */
.spx-lightbox[hidden] {
	display: none;
}

.spx-lightbox__figure {
	margin: 0;
	max-width: min(1200px, 92vw);
	max-height: 86vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--4);
}

.spx-lightbox__img {
	max-width: 100%;
	max-height: 78vh;
	width: auto;
	height: auto;
	display: block;
	border-radius: var(--spr-radius-card);
	background: var(--wp--preset--color--white);
}

.spx-lightbox__caption {
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--sm);
	text-align: center;
	margin: 0;
}

.spx-lightbox__counter {
	position: absolute;
	bottom: clamp(12px, 3vw, 28px);
	left: 0;
	right: 0;
	text-align: center;
	margin: 0;
	color: var(--wp--preset--color--muted-text);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: .1em;
	text-transform: uppercase;
}

.spx-lightbox__close {
	position: absolute;
	top: clamp(10px, 2vw, 24px);
	right: clamp(10px, 2vw, 24px);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 2px solid var(--wp--preset--color--primary);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--primary);
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.spx-lightbox__close:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

/* Same arrow treatment as the carousel, so the site has one control language. */
.spx-lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 2px solid var(--wp--preset--color--primary);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--primary);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.spx-lightbox__nav svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.spx-lightbox__nav:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

.spx-lightbox__nav-prev { left: clamp(8px, 2vw, 28px); }
.spx-lightbox__nav-next { right: clamp(8px, 2vw, 28px); }


/* =========================================================================
   6. RECIPE HUB (469136)
   ========================================================================= */

.spx-recipe-grid .wp-block-post-title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--base);
	text-transform: none;
	text-align: center;
	margin-block: var(--wp--preset--spacing--3) 0;
}

.spx-recipe-grid .wp-block-post-featured-image img {
	border-radius: var(--spr-radius-image);
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
}


/* =========================================================================
   7. JOIN NOW (718)
   ========================================================================= */

.spx-join-intro .wp-block-embed__wrapper {
	border-radius: var(--spr-radius-card);
	overflow: hidden;
}

/* The lede is centred by default; beside a video it reads better ranged left. */
.spx-join-intro .spx-lede {
	text-align: left;
	margin-inline: 0;
}


/* =========================================================================
   8. THE NUTRITION (424927)
   ========================================================================= */

/* ---- Category cards -----------------------------------------------------
   Identical image boxes on the section grey with the product cut-out
   letterboxed rather than cropped, a fixed-height uppercase label, and the
   whole card clickable.
   ------------------------------------------------------------------------ */

/*
 * Gutenberg's flow layout gives every sibling after the first a
 * margin-block-start; inside a stretched grid that shortens tiles 2..n and the
 * first tile ends up taller than the rest. Zero it.
 */
.spr-catgrid > .spr-cat { margin: 0 !important; }

.spr-catgrid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--spr-gutter);
	align-items: stretch;
	margin-top: var(--wp--preset--spacing--10);
}

@media (max-width: 1023px) { .spr-catgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .spr-catgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479px)  { .spr-catgrid { gap: 16px; } }

.spr-cat {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--grey-border);
	border-radius: var(--spr-radius-card);
	box-shadow: var(--spr-shadow-card);
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease;
}

.spr-cat:hover,
.spr-cat:focus-within {
	transform: translateY(-4px);
	box-shadow: var(--spr-shadow-card-hover);
}

/*
 * Ratio-locked box with an absolutely positioned image. This is the whole
 * trick: it makes the box height depend only on the ratio, never on the image
 * file, so a tall pouch and a wide bar produce identical tiles. object-fit
 * contain on white keeps the whole product visible rather than clipping it.
 */
.spr-cat__img.wp-block-image {
	position: relative;
	display: block;
	margin: 0 !important;
	width: 100%;
	max-width: none;
	aspect-ratio: 4 / 3;
	padding: 0;
	min-height: 0;
	background: var(--wp--preset--color--white);
	overflow: hidden;
	flex: 0 0 auto;
}

@supports not (aspect-ratio: 1) {
	.spr-cat__img.wp-block-image { height: 0; padding-top: 75%; }
}

/* !important is needed here: core's .wp-block-image img { height: auto } wins
   the specificity tie otherwise. */
.spr-cat__img.wp-block-image img {
	position: absolute;
	inset: 12px;
	width: calc(100% - 24px) !important;
	height: calc(100% - 24px) !important;
	max-width: none;
	max-height: none;
	object-fit: contain;
	object-position: center;
	display: block;
	margin: 0;
}

/* Fixed-height band so one-line and two-line labels give the same tile height. */
.spr-cat__label {
	margin: 0;
	padding: 16px;
	min-height: 72px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: 15px;
	line-height: 1.3;
	letter-spacing: .02em;
	text-transform: uppercase;
	text-align: center;
}

.spr-cat__label a {
	color: var(--wp--preset--color--black);
	text-decoration: none;
}

/* Whole tile clickable. */
.spr-cat__label a::before {
	content: "";
	position: absolute;
	inset: 0;
}

.spr-cat:focus-within {
	outline: 3px solid var(--wp--preset--color--secondary);
	outline-offset: 2px;
}

@media (max-width: 479px) {
	.spr-cat__label { font-size: 13px; padding: 12px 10px; min-height: 64px; }
}

/* ---- Row call to action -------------------------------------------------- */

.spx-row-cta {
	justify-content: center;
	margin-block: var(--wp--preset--spacing--6) var(--wp--preset--spacing--10);
	gap: var(--wp--preset--spacing--3);
}

/* ---- Supporting feature columns ------------------------------------------ */

.spx-features {
	gap: var(--spr-gutter);
}

.spx-feature__title {
	font-size: var(--wp--preset--font-size--lg);
	margin-block: 0 var(--wp--preset--spacing--3);
}

.spx-feature__copy {
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--dark-text);
}

.spx-feature__cta {
	margin-top: var(--wp--preset--spacing--4);
}

.spx-nutrition-film .wp-block-embed__wrapper {
	border-radius: var(--spr-radius-card);
	overflow: hidden;
}


/* =========================================================================
   9. HOME (453)
   ========================================================================= */

/* ---- Grey band ----------------------------------------------------------
   Runs behind the film, the pillars, the call to action and the results
   row, so the four read as one section rather than four white ones.
   ------------------------------------------------------------------------ */

.spx-band {
	background-color: var(--wp--preset--color--grey-section);
	padding-block: var(--spr-section-pad);
	margin-block: var(--spr-section-pad);
}

.spx-band > .spx-home-film,
.spx-band > .spx-pillars,
.spx-band > .spx-results {
	margin-block: var(--wp--preset--spacing--12);
}

.spx-band > :first-child { margin-block-start: 0; }
.spx-band > :last-child { margin-block-end: 0; }

/* ---- Film ---------------------------------------------------------------- */

.spx-home-film .wp-block-embed__wrapper {
	border-radius: var(--spr-radius-card);
	overflow: hidden;
}

/* ---- Eat / Move / Thrive pillars ----------------------------------------
   Replaces Salient's [nectar_sticky_media_sections] scroll-pinned panels,
   which have no Spectra equivalent. Now a vertical Spectra Tabs block: the
   tab list sits on the left, the panel fills the rest.

   Spectra's tabs stylesheet only handles background colour and sets no flex
   on the container, so the vertical arrangement is declared explicitly here
   rather than relying on the block's layout attribute.
   ------------------------------------------------------------------------ */

.spx-pillars {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: var(--wp--preset--spacing--8);
}

.spx-pillars__nav {
	display: flex;
	flex-direction: column;
	flex: 0 0 clamp(160px, 18vw, 260px);
	gap: var(--wp--preset--spacing--2);
	align-items: stretch;
}

.spx-pillars > .wp-block-spectra-tabs-child-tabpanel {
	flex: 1 1 auto;
	min-width: 0;
}

/* Spectra ships the panel with a 1px #d2d2d2 border, a 2px radius and its
   own padding. Our panels are full-bleed colour blocks, so all three go.
   The [class*="wp-block"] qualifier matches Spectra's own specificity, so
   this wins without !important. */
.spx-pillars .wp-block-spectra-tabs-child-tabpanel[class*="wp-block"] {
	border: 0;
	border-radius: 0;
	padding: 0;
	overflow: visible;
}

/* Tab buttons render with wp-block-button__link and wp-element-button, so
   they inherit the pink pill from theme.json's elements.button. Strip that
   back to a quiet vertical index that highlights the active pillar. */
.spx-pillars__nav .wp-block-spectra-tabs-child-tab-button {
	background-color: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 900;
	letter-spacing: 0;
	text-transform: uppercase;
	text-align: left;
	justify-content: flex-start;
	width: 100%;
	padding: var(--wp--preset--spacing--3) 0 var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
	border-inline-start: 3px solid var(--wp--preset--color--grey-border);
	color: var(--wp--preset--color--muted-text);
	transition: color 0.2s ease, border-color 0.2s ease;
}

.spx-pillars__nav .wp-block-spectra-tabs-child-tab-button:hover,
.spx-pillars__nav .wp-block-spectra-tabs-child-tab-button:focus-visible {
	background-color: transparent;
	color: var(--wp--preset--color--black);
}

/* Spectra marks the open tab with .spectra-block-is-active as well as aria. */
.spx-pillars__nav .wp-block-spectra-tabs-child-tab-button.spectra-block-is-active,
.spx-pillars__nav .wp-block-spectra-tabs-child-tab-button[aria-selected="true"] {
	color: var(--wp--preset--color--black);
	border-inline-start-color: var(--wp--preset--color--primary);
	background-color: transparent;
}

.spx-panel {
	border-radius: var(--spr-radius-card);
	padding: var(--wp--preset--spacing--12);
	min-height: 60vh;
	display: flex;
	align-items: center;
}

.spx-panel-light { background-color: var(--wp--preset--color--white); }
.spx-panel-warm  { background-color: var(--spx-warm-sand); }
.spx-panel-brand { background-color: var(--wp--preset--color--primary); }

/* The brand panel is pink, so its type has to flip to white. */
.spx-panel-brand .spx-panel__title,
.spx-panel-brand .spx-panel__copy,
.spx-panel-brand .spx-eyebrow {
	color: var(--wp--preset--color--white);
}

.spx-panel__cols {
	gap: var(--wp--preset--spacing--10);
	width: 100%;
}

/* Eyebrow — Montserrat 700 12px uppercase 0.15em, pink. */
.spx-eyebrow {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	margin-block-end: var(--wp--preset--spacing--3);
	color: var(--wp--preset--color--primary);
}

/* Single words ("Eat." / "Move." / "Thrive.") must never wrap. */
.spx-panel__title {
	font-size: clamp(2.5rem, 5vw, 4.5rem);
	line-height: 1;
	white-space: nowrap;
	margin-block: 0 var(--wp--preset--spacing--5);
}

.spx-panel__copy {
	font-size: var(--wp--preset--font-size--md);
	max-width: 42ch;
}

.spx-panel__media img {
	border-radius: var(--spr-radius-image);
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (max-width: 781px) {
	.spx-pillars { flex-direction: column; }

	.spx-pillars__nav {
		flex: 1 1 auto;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.spx-pillars__nav .wp-block-spectra-tabs-child-tab-button {
		width: auto;
		flex: 1 1 auto;
		justify-content: center;
		text-align: center;
		padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--2);
		border-inline-start: 0;
		border-block-end: 3px solid var(--wp--preset--color--grey-border);
		font-size: var(--wp--preset--font-size--lg);
	}

	.spx-pillars__nav .wp-block-spectra-tabs-child-tab-button.spectra-block-is-active,
	.spx-pillars__nav .wp-block-spectra-tabs-child-tab-button[aria-selected="true"] {
		border-block-end-color: var(--wp--preset--color--primary);
	}

	.spx-panel {
		padding: var(--wp--preset--spacing--6);
		min-height: 0;
	}
}

/* ---- Join Today ---------------------------------------------------------
   Centred, and carrying no size overrides so it inherits the same button
   treatment as the hero's "Join Today".
   ------------------------------------------------------------------------ */

.spx-cta {
	display: flex;
	justify-content: center;
}

/* ---- Real People, Real Results ------------------------------------------
   Uses the house .spr-carousel, not a marquee: the styleguide rules out
   autoplay and infinite loops, and this is the same component the product
   rows use, so testimonials read as native to the system.
   ------------------------------------------------------------------------ */

.spx-testimonial .spx-card__quote {
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.5;
	margin: 0;
}

.spx-testimonial .spx-card__media {
	margin: 0;
}

.spx-testimonial .spx-card__media img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

/* Pushed to the bottom so attributions align across cards of differing
   length — quote cards are taller than the results-only ones. */
.spx-testimonial .spx-card__name {
	margin: auto 0 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--sm);
}

.spx-testimonial .spx-card__meta {
	margin: 0;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--muted-text);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* ---- As Featured in -----------------------------------------------------
   A logo strip, not a card row: no card chrome, and the marks are flattened
   to grey so the strip reads evenly.
   ------------------------------------------------------------------------ */

.spx-press__track {
	align-items: center;
}

.spx-press__logo {
	flex: 0 0 auto !important;
	margin: 0;
	display: flex;
	align-items: center;
	padding-inline: var(--wp--preset--spacing--4);
}

.spx-press__logo img {
	height: clamp(28px, 3.5vw, 46px);
	width: auto;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.65;
	transition: filter 0.2s ease, opacity 0.2s ease;
}

.spx-press__logo img:hover {
	filter: grayscale(0);
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.spx-press__logo img { transition: none; }
}


/* =========================================================================
   10. SHOP (641)
   =========================================================================
   The catalogue: the same card in a grid, with a sticky filter rail.
   Rendered from page blocks via the child theme's
   woocommerce/archive-product.php override.
   ========================================================================= */

.spx-shop__eyebrow {
	text-align: center;
	margin-block-end: var(--wp--preset--spacing--2);
}

.spx-shop__title {
	font-size: clamp(2rem, 4vw, 2.75rem);
	text-align: center;
	margin-block: 0 var(--wp--preset--spacing--1);
}

/* Sub-statement: dot-separated triplet, italic Montserrat 500, pink. */
.spx-shop__sub {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 500;
	font-style: italic;
	color: var(--wp--preset--color--primary);
	text-align: center;
	margin-block: 0 var(--wp--preset--spacing--6);
}

.spx-shop__search {
	max-width: 520px;
	margin-inline: auto;
}

.spx-shop__search .wp-block-search__inside-wrapper {
	border: 1px solid var(--wp--preset--color--grey-border);
	border-radius: var(--spr-radius-pill);
	padding: 4px 4px 4px 20px;
	background: var(--wp--preset--color--white);
}

.spx-shop__search .wp-block-search__input {
	border: 0;
	background: transparent;
	padding: 10px 0;
}

.spx-shop__search .wp-block-search__button {
	border-radius: var(--spr-radius-pill);
	padding: 10px 18px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	border: 0;
	margin: 0;
}

/* ---- Two-column layout --------------------------------------------------- */

.spx-shop {
	gap: var(--wp--preset--spacing--10);
}

/*
 * WordPress sets `.wp-block-columns > .wp-block-column { flex-grow: 1 }`, which
 * outranks a single-class rule and makes the rail expand to half the row —
 * squeezing the product grid to unusable ~34px cards. Matching that
 * specificity pins the rail and lets the catalogue take the rest.
 */
.wp-block-columns > .wp-block-column.spx-shop__rail {
	flex: 0 0 280px;
	max-width: 280px;
}

.wp-block-columns > .wp-block-column.spx-shop__main {
	flex: 1 1 auto;
	min-width: 0;
}

@media (max-width: 800px) {
	.wp-block-columns > .wp-block-column.spx-shop__rail {
		flex: 1 1 100%;
		max-width: none;
	}
}

/* Sticky below the header so filters stay reachable down a long catalogue. */
@media (min-width: 801px) {
	.spx-shop__filters {
		position: sticky;
		top: 96px;
		max-height: calc(100vh - 112px);
		overflow-y: auto;
	}
}

.spx-filter__heading {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: .1em;
	text-transform: uppercase;
	margin-block: var(--wp--preset--spacing--6) var(--wp--preset--spacing--3);
	padding-bottom: 8px;
	border-bottom: 2px solid transparent;
	border-image: var(--spr-gradient) 1;
}

.spx-shop__filters input[type="checkbox"] {
	accent-color: var(--wp--preset--color--primary);
	width: 18px;
	height: 18px;
}

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

.spx-shop__toolbar {
	padding-bottom: var(--wp--preset--spacing--3);
	margin-bottom: var(--spr-gutter);
	border-bottom: 2px solid transparent;
	border-image: var(--spr-gradient) 1;
	color: var(--wp--preset--color--dark-text);
}

.spx-shop__toolbar select {
	border: 1px solid var(--wp--preset--color--grey-border);
	border-radius: var(--spr-radius-pill);
	padding: 8px 16px;
	background: var(--wp--preset--color--white);
}

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

.spx-shop__pagination {
	margin-top: var(--wp--preset--spacing--10);
	gap: 8px;
}

.spx-shop__pagination .page-numbers {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--sm);
	border: 1px solid var(--wp--preset--color--grey-border);
	border-radius: var(--spr-radius-pill);
	padding: 8px 14px;
	min-width: 40px;
	text-align: center;
	text-decoration: none;
	color: var(--wp--preset--color--black);
}

.spx-shop__pagination .page-numbers.current {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}


/* =========================================================================
   11. HOME — the two range cards
   ========================================================================= */

.spx-ranges {
	gap: var(--spr-gutter);
}

.spx-range {
	text-align: center;
	height: 100%;
}

.spx-range__title {
	font-size: var(--wp--preset--font-size--lg);
	margin-block: 0 var(--wp--preset--spacing--2);
}

.spx-range__copy {
	color: var(--wp--preset--color--dark-text);
	margin-block: 0 var(--wp--preset--spacing--4);
}

.spx-range__cta {
	margin-top: auto;
	justify-content: center;
}


/* =========================================================================
   12. THE PROGRAMME (883)
   ========================================================================= */

.spx-prog-intro .wp-block-embed__wrapper {
	border-radius: var(--spr-radius-card);
	overflow: hidden;
}

.spx-prog-intro .spx-lede {
	text-align: left;
	margin-inline: 0;
}

.spx-prog-intro .spx-cta {
	justify-content: flex-start;
}

/* ---- The four pillars ---------------------------------------------------- */

.spx-pillar-grid > .spr-card { margin: 0 !important; }

.spx-pillar-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--spr-gutter);
	align-items: stretch;
}

@media (max-width: 1023px) { .spx-pillar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .spx-pillar-grid { grid-template-columns: 1fr; } }

/* Icon disc above each pillar title. The icons are inline SVGs in a Custom
   HTML block (the four iconsmind glyphs from the Salient original), filled
   with the current colour so they take brand pink from here. */
.spx-pillar-tile__icon {
	width: 96px;
	height: 96px;
	margin: 0 auto var(--wp--preset--spacing--5);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--wp--preset--color--grey-section);
	color: var(--wp--preset--color--primary);
}

.spx-pillar-tile__icon svg {
	display: block;
	width: 44px;
	height: 44px;
	fill: currentColor;
}

.spx-pillar-tile {
	text-align: center;
	padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--6);
}

.spx-pillar-tile__title {
	font-size: var(--wp--preset--font-size--md);
	margin-block: 0 var(--wp--preset--spacing--3);
}

.spx-pillar-tile__copy {
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--dark-text);
	margin: 0;
}

/* ---- Results strip ------------------------------------------------------- */

.spx-result-tile {
	padding: 0;
	overflow: hidden;
}

.spx-result-tile img {
	width: 100%;
	display: block;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--spr-radius-card);
}


/* =========================================================================
   13. LEGACY CONTENT
   =========================================================================
   Pages and posts converted by the bulk unwrapper keep their prose but lose
   WPBakery's button styling, so a converted call to action arrives as a bare
   paragraph carrying .spx-legacy-btn. Style it as a normal pill so old
   campaign pages do not look broken.
   ========================================================================= */

.spx-legacy-btn {
	margin-block: var(--wp--preset--spacing--6);
}

.spx-legacy-btn a {
	display: inline-block;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: var(--spr-radius-pill);
	padding: 14px 32px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	border: 2px solid var(--wp--preset--color--primary);
	transition: background-color .2s ease, border-color .2s ease;
}

.spx-legacy-btn a:hover {
	background: var(--wp--preset--color--primary-hover);
	border-color: var(--wp--preset--color--primary-hover);
	color: var(--wp--preset--color--white);
}


/* =========================================================================
   14. THE NUTRITION — range intro bands
   =========================================================================
   Image one side, heading + copy + shop buttons the other, alternating down
   the page along with the section ground.
   ========================================================================= */

.spx-range-intro {
	gap: var(--wp--preset--spacing--12);
	margin-bottom: var(--wp--preset--spacing--16);
	align-items: center;
}

.spx-range__media {
	margin: 0;
}

.spx-range__media img {
	width: 100%;
	display: block;
	border-radius: var(--spr-radius-card);
	/* These are finished compositions — never crop them. */
	object-fit: contain;
}

.spx-range__heading {
	text-align: left;
	margin-block: 0 var(--wp--preset--spacing--5);
}

.spx-range__copy {
	font-size: var(--wp--preset--font-size--md);
	color: var(--wp--preset--color--dark-text);
	max-width: 52ch;
	margin-block: 0 var(--wp--preset--spacing--6);
}

/* Ranged left beside an image, not centred like a standalone lede. */
.spx-range-intro .spx-row-cta {
	justify-content: flex-start;
	margin-block: 0;
}

@media (max-width: 781px) {
	.spx-range-intro {
		gap: var(--wp--preset--spacing--8);
		margin-bottom: var(--wp--preset--spacing--10);
	}

	.spx-range__heading,
	.spx-range__copy {
		text-align: center;
	}

	.spx-range__copy {
		margin-inline: auto;
	}

	.spx-range-intro .spx-row-cta {
		justify-content: center;
	}
}



/* =========================================================================
   15. HEADER / 16. FOOTER
   =========================================================================
   Not ported — see the note at the top of this file. Salient renders its
   own header and footer on the live sites; the Astra Header/Footer Builder
   rules live in spx-astra-child/assets/css/custom.css.
   ========================================================================= */

/* =========================================================================
   17. SHOP — category tile row + spacing fixes
   ========================================================================= */

/* ---- Spacing ------------------------------------------------------------
   The head, search, tiles and catalogue are one section now. These control
   the rhythm between them so nothing relies on stacked section padding.
   ------------------------------------------------------------------------ */

.spx-shop-page .spx-shop__search {
	margin-bottom: var(--wp--preset--spacing--10);
}

.spx-shop-page .spr-shopcats {
	margin-bottom: var(--wp--preset--spacing--12);
}

/* ---- Alignment ----------------------------------------------------------
   The toolbar was 135px tall because WooCommerce's sorting <select> renders
   at 73px, and centring inside that pushed "Showing 1-12 of ..." well below
   the CATEGORY heading opposite it. Cap the control height and drop the
   first filter heading's top margin so the two columns start level.
   ------------------------------------------------------------------------ */

.spx-shop__toolbar {
	min-height: 0;
	align-items: center;
	gap: var(--wp--preset--spacing--4);
}

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

.spx-shop__toolbar select {
	height: auto;
	line-height: 1.4;
	margin: 0;
}

.spx-shop__toolbar .wc-block-product-results-count,
.spx-shop__toolbar .woocommerce-result-count {
	margin: 0;
}

/* First heading in the rail sits level with the toolbar. */
.spx-shop__filters .spx-filter__heading:first-of-type,
.spx-shop__filters > *:first-child .spx-filter__heading {
	margin-block-start: 0;
}

.spx-shop__filters > *:first-child {
	margin-block-start: 0;
}

/* ---- Category tiles -----------------------------------------------------
   Same object repeated, on the category-navigation treatment: ratio-locked
   white image box with the product letterboxed, fixed-height label band,
   whole tile clickable. Horizontal row here rather than a grid, and a
   scroller on narrow screens.
   ------------------------------------------------------------------------ */

.spr-shopcats {
	position: relative;
}

.spr-shopcats__row {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--spr-gutter);
	list-style: none;
	margin: 0;
	padding: 0;
}

.spr-shopcat {
	margin: 0;
}

.spr-shopcat a {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--grey-border);
	border-radius: var(--spr-radius-card);
	box-shadow: var(--spr-shadow-card);
	overflow: hidden;
	text-decoration: none;
	transition: transform .25s ease, box-shadow .25s ease, border-color .2s ease;
}

.spr-shopcat a:hover,
.spr-shopcat a:focus-visible {
	transform: translateY(-4px);
	box-shadow: var(--spr-shadow-card-hover);
}

/* Ratio-locked box with an absolutely positioned image, so tile height
   depends only on the ratio and never on the image file. */
.spr-shopcat__img {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	background: var(--wp--preset--color--white);
	overflow: hidden;
	flex: 0 0 auto;
}

.spr-shopcat__img img {
	position: absolute;
	inset: 10px;
	width: calc(100% - 20px) !important;
	height: calc(100% - 20px) !important;
	max-width: none;
	max-height: none;
	object-fit: contain;
	object-position: center;
	display: block;
	margin: 0;
}

.spr-shopcat__label {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 60px;
	padding: 12px 14px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: 14px;
	line-height: 1.3;
	letter-spacing: .02em;
	text-transform: uppercase;
	text-align: center;
	color: var(--wp--preset--color--black);
}

/* Active tile: pink border and label band. Clicking it clears the filter. */
.spr-shopcat.is-active a {
	border-color: var(--wp--preset--color--primary);
	box-shadow: var(--spr-shadow-card-hover);
}

.spr-shopcat.is-active .spr-shopcat__label {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

.spr-shopcat a:focus-visible {
	outline: 3px solid var(--wp--preset--color--secondary);
	outline-offset: 2px;
}

/* Scroller on narrow screens: tiles keep their size and the row swipes. */
@media (max-width: 900px) {
	.spr-shopcats {
		/* Bleed to the viewport edges so the row reads as scrollable. */
		margin-inline: calc(50% - 50vw);
		padding-inline: calc(50vw - 50% + 4px);
	}

	.spr-shopcats__row {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		overscroll-behavior-x: contain;
		gap: 16px;
		padding-bottom: 8px;
		scrollbar-width: none;
	}

	.spr-shopcats__row::-webkit-scrollbar {
		display: none;
	}

	.spr-shopcat {
		flex: 0 0 42%;
		scroll-snap-align: start;
	}
}

@media (max-width: 600px) {
	.spr-shopcat {
		flex-basis: 58%;
	}

	.spr-shopcat__label {
		font-size: 13px;
		min-height: 54px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.spr-shopcat a {
		transition: none;
	}

	.spr-shopcat a:hover {
		transform: none;
	}

	.spr-shopcats__row {
		scroll-behavior: auto;
	}
}

/*
 * theme.json gives every core/group 48px of vertical padding, and the product
 * grid is a group — which pushed the toolbar 48px below the filter rail and
 * left the two columns visibly out of step. The shop columns manage their own
 * spacing, so clear it here.
 */
.spx-shop__main > .wp-block-group,
.spx-shop__main .spr-product-grid,
.spx-shop__rail > .wp-block-group {
	padding: 0;
}

/*
 * The toolbar is a core/group too, nested inside the Product Collection, so
 * theme.json's 48px group padding reached it even after the outer wrappers
 * were cleared. Keep only the bottom padding that the gradient rule sits on.
 */
.spx-shop__main .spx-shop__toolbar {
	padding: 0 0 var(--wp--preset--spacing--3);
}

/* Block-gap margin between the column and the collection. */
.spx-shop__main .wp-block-woocommerce-product-collection {
	margin-block-start: 0;
}


/* =========================================================================
   18. SHOP — column alignment + mobile behaviour
   ========================================================================= */

/*
 * Line up the two gradient rules.
 *
 * Both are bottom borders: one under CATEGORY in the rail, one under
 * "Showing 1-12 of ..." in the toolbar. They sat 49px apart because the
 * toolbar carried a 24px top margin the heading did not, and because the
 * toolbar is 52px tall (it holds a 38px sorting select) against the
 * heading's 36px.
 *
 * Matching both boxes to 40px of content plus 12px of padding puts the two
 * rules on the same line. Only the first heading is touched; Price and
 * Availability keep their normal rhythm further down the rail.
 */
@media (min-width: 801px) {
	/*
	 * 52px on both, not 40. box-sizing is border-box, so min-height includes
	 * the 12px padding — at 40px the heading came out 40px tall while the
	 * toolbar was pushed to 52px by its 38px sorting select, leaving the rules
	 * 12px apart. Pinning both to the same total is what actually lines them
	 * up, and it holds if the select's height ever changes.
	 */
	.spx-shop__main .spx-shop__toolbar,
	.spx-shop__filters .spx-filter__heading:first-of-type {
		display: flex;
		align-items: center;
		min-height: 52px;
		margin-top: 0;
		padding-bottom: 12px;
	}
}

/* ---- Mobile -------------------------------------------------------------- */

/*
 * TEMPORARY: the category tiles are hidden on phones at the client's request
 * while the mobile treatment is decided. The row is still rendered (and still
 * works) — remove this block to bring it back.
 */
@media (max-width: 767px) {
	.spr-shopcats {
		display: none;
	}
}

/* Basket icon box (.ast-site-header-cart) not ported — Astra header only. */


/* =========================================================================
   19. ARTICLES (single post)
   =========================================================================
   The 29 blog posts came off Salient with no layout of their own: every
   heading was an h1, every image sat inside a WPBakery column, and the
   emphasis was inline #df2794. The conversion normalised all of that onto a
   few repeating pieces, styled here:

     .spx-post-hero    full-bleed featured image, title reversed out
     .spx-post-lead    the standfirst at the top of the article
     .spx-post-label   the pink sub-label that introduces each point
     .spx-post-emphasis  a whole sentence the author set in pink
     .spx-post-panel   the brand and grey callout cards
     .spx-post-band    the full-width gradient band

   Type is the site scale one step down: articles are read at length, so the
   display sizes used on the landing pages are too loud here.
   ========================================================================= */

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

.spx-post-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 460px;
	margin-bottom: var(--wp--preset--spacing--14);
	background: var(--wp--preset--color--black);
	overflow: hidden;
}

.spx-post-hero__media {
	position: absolute;
	inset: 0;
}

.spx-post-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* Keeps the reversed-out title legible over any photograph. */
.spx-post-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, .15) 0%, rgba(0, 0, 0, .78) 100%);
}

.spx-post-hero-plain {
	min-height: 300px;
	background: var(--spr-gradient-diag);
}

.spx-post-hero-plain::after {
	display: none;
}

.spx-post-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
	padding: var(--wp--preset--spacing--12) var(--spr-gutter);
}

.spx-post-hero__title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 900;
	font-size: clamp(30px, 4.4vw, 48px);
	line-height: 1.1;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: var(--wp--preset--color--white);
	margin: 0;
	max-width: 20ch;
}

.spx-post-hero__meta {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 12px;
	line-height: 1;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--wp--preset--color--white);
	opacity: .78;
	margin: var(--wp--preset--spacing--4) 0 0;
}

/* --- Measure ------------------------------------------------------------ */

/*
 * Posts were rendering at 625px: Astra's narrow container minus a sidebar.
 * Blocks are constrained to a reading measure here instead, and anything that
 * opts into a wider alignment is let out.
 */
body.spx-blocks.single-post .entry-content > * {
	max-width: 800px;
	margin-inline: auto;
}

body.spx-blocks.single-post .entry-content > .alignwide {
	max-width: 1100px;
}

body.spx-blocks.single-post .entry-content > .alignfull {
	max-width: none;
}

/* The hero carries the title and date, so Astra's own header is redundant. */
body.spx-blocks.single-post .entry-header {
	display: none;
}

body.spx-blocks.single-post .entry-content {
	font-family: var(--wp--preset--font-family--body);
	font-size: 17px;
	line-height: 1.65;
	color: var(--wp--preset--color--body);
}

body.spx-blocks.single-post .entry-content > p {
	margin-block: 0 var(--wp--preset--spacing--6);
}

/* --- Article type scale ------------------------------------------------- */

/*
 * One step down from the landing-page scale (48/32/24): headings here
 * punctuate prose rather than announce a section.
 */
body.spx-blocks.single-post .entry-content h2 {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 900;
	font-size: clamp(24px, 3vw, 32px);
	line-height: 1.15;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: var(--wp--preset--color--black);
	margin-block: var(--wp--preset--spacing--12) var(--wp--preset--spacing--5);
}

body.spx-blocks.single-post .entry-content h3 {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: clamp(20px, 2.4vw, 24px);
	line-height: 1.2;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--wp--preset--color--black);
	margin-block: var(--wp--preset--spacing--10) var(--wp--preset--spacing--4);
}

body.spx-blocks.single-post .entry-content h4 {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 20px;
	line-height: 1.25;
	text-transform: none;
	color: var(--wp--preset--color--black);
	margin-block: var(--wp--preset--spacing--8) var(--wp--preset--spacing--4);
}

/* The first heading sits under the hero and does not need the full top gap. */
body.spx-blocks.single-post .entry-content > :is(h2, h3, h4):first-child {
	margin-top: 0;
}

/* --- Standfirst and sub-labels ------------------------------------------ */

body.spx-blocks.single-post .entry-content > .spx-post-lead {
	font-family: var(--wp--preset--font-family--body);
	font-size: 20px;
	line-height: 1.55;
	font-weight: 400;
	color: var(--wp--preset--color--black);
	margin-block: 0 var(--wp--preset--spacing--6);
}

body.spx-blocks.single-post .entry-content > .spx-post-lead:first-child {
	padding-left: var(--wp--preset--spacing--5);
	border-left: 3px solid var(--wp--preset--color--primary);
}

body.spx-blocks.single-post .entry-content .spx-post-label {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 15px;
	line-height: 1.35;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
	margin-block: var(--wp--preset--spacing--7) var(--wp--preset--spacing--2);
}

/* A whole sentence the author set in pink: coloured, but not shouted. */
body.spx-blocks.single-post .entry-content .spx-post-emphasis {
	font-family: var(--wp--preset--font-family--body);
	font-size: 17px;
	line-height: 1.6;
	font-weight: 500;
	color: var(--wp--preset--color--primary);
	margin-block: var(--wp--preset--spacing--6);
}

/* --- Callout panels ----------------------------------------------------- */

body.spx-blocks.single-post .entry-content .spx-post-panel {
	border-radius: var(--spr-radius-card);
	padding: var(--wp--preset--spacing--10);
	margin-block: var(--wp--preset--spacing--10);
}

body.spx-blocks.single-post .entry-content .spx-post-panel > *:first-child,
body.spx-blocks.single-post .entry-content .spx-post-band > *:first-child {
	margin-top: 0;
}

body.spx-blocks.single-post .entry-content .spx-post-panel > *:last-child,
body.spx-blocks.single-post .entry-content .spx-post-band > *:last-child {
	margin-bottom: 0;
}

.spx-post-panel-grey {
	background: var(--wp--preset--color--grey-section);
}

.spx-post-panel-brand {
	background: var(--wp--preset--color--primary);
}

.spx-post-panel-dark {
	background: var(--wp--preset--color--black);
}

/*
 * The legacy posts used 27 different panel colours between them. They are
 * mapped onto these three at conversion time; everything reversed out shares
 * one rule so the treatment stays identical wherever it appears.
 */
body.spx-blocks.single-post .entry-content :is(.spx-post-panel-brand, .spx-post-panel-dark, .spx-post-band) :is(h2, h3, h4, p, li, strong, em) {
	color: var(--wp--preset--color--white);
}

body.spx-blocks.single-post .entry-content :is(.spx-post-panel-brand, .spx-post-panel-dark, .spx-post-band) .spx-pink {
	color: var(--wp--preset--color--white);
}

body.spx-blocks.single-post .entry-content :is(.spx-post-panel-brand, .spx-post-panel-dark, .spx-post-band) a {
	color: var(--wp--preset--color--white);
	text-decoration: underline;
}

/* --- Gradient band ------------------------------------------------------ */

body.spx-blocks.single-post .entry-content .spx-post-band {
	background: var(--spr-gradient-diag);
	border-radius: var(--spr-radius-card);
	padding: var(--wp--preset--spacing--12);
	margin-block: var(--wp--preset--spacing--12);
}

/* Inline brand emphasis inside a sentence. */
body.spx-blocks.single-post .entry-content .spx-pink {
	color: var(--wp--preset--color--primary);
	font-weight: 500;
}

/* --- Images, lists, quotes, rules --------------------------------------- */

body.spx-blocks.single-post .entry-content .spx-post-image {
	margin-block: var(--wp--preset--spacing--10);
}

body.spx-blocks.single-post .entry-content .spx-post-image img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--spr-radius-card);
}

/* A portrait photograph at the full 800px measure is a screen and a half tall. */
body.spx-blocks.single-post .entry-content .spx-post-image.is-portrait img {
	max-width: 520px;
	margin-inline: auto;
}

body.spx-blocks.single-post .entry-content :is(ul, ol) {
	margin-block: 0 var(--wp--preset--spacing--6);
	padding-left: 1.35em;
}

body.spx-blocks.single-post .entry-content li {
	margin-bottom: var(--wp--preset--spacing--2);
}

body.spx-blocks.single-post .entry-content blockquote {
	border-left: 3px solid var(--wp--preset--color--primary);
	padding-left: var(--wp--preset--spacing--6);
	margin-block: var(--wp--preset--spacing--10);
	font-size: 19px;
	font-style: italic;
	color: var(--wp--preset--color--black);
}

body.spx-blocks.single-post .entry-content a {
	color: var(--wp--preset--color--primary);
}

/*
 * ...but not the ones that are buttons. The link colour above was landing on
 * the label of every pink pill - the legacy call to action, and WooCommerce's
 * add-to-basket in the recipe-book panels - leaving pink text on a pink
 * background, readable only on hover.
 */
body.spx-blocks.single-post .entry-content a.button,
body.spx-blocks.single-post .entry-content .wp-block-button__link,
body.spx-blocks.single-post .entry-content .spx-legacy-btn a {
	color: var(--wp--preset--color--white);
}

body.spx-blocks.single-post .entry-content hr.wp-block-separator {
	height: 2px;
	border: 0;
	background: var(--spr-gradient);
	opacity: 1;
	margin-block: var(--wp--preset--spacing--12);
}

@media (max-width: 921px) {
	.spx-post-hero {
		min-height: 340px;
	}

	body.spx-blocks.single-post .entry-content .spx-post-panel,
	body.spx-blocks.single-post .entry-content .spx-post-band {
		padding: var(--wp--preset--spacing--8);
	}
}


/* =========================================================================
   20. ABOUT THE SIX PACK REVOLUTION (synced pattern)
   =========================================================================
   The sign-off that closes every article, and can be dropped onto pages.
   Content lives in the synced pattern of the same name — edit it once and
   every post follows. This styles it wherever it appears.

   Edge to edge on SPR blue, everything centred. The logo is the white
   lockup, which is why it was invisible on the white card it used to sit in.
   ========================================================================= */

/*
 * The band is wider than the viewport by the width of the scrollbar, which is
 * what 100vw means. Clip rather than hide: hidden on an ancestor turns the
 * page into a scroll container and breaks the sticky header.
 */
body.spx-blocks.single-post .site-content,
.page .site-content {
	overflow-x: clip;
}

.spx-about {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: var(--wp--preset--spacing--14) var(--spr-gutter);
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--white);
	text-align: center;
}

/* Beat the generic article measure, which caps every child at 800px. */
body.spx-blocks.single-post .entry-content > .spx-about {
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-block: var(--wp--preset--spacing--14) 0;
}

.spx-about > * {
	max-width: 800px;
	margin-inline: auto;
}

.spx-about p {
	font-family: var(--wp--preset--font-family--body);
	font-size: 17px;
	line-height: 1.65;
	color: var(--wp--preset--color--white);
	margin-block: 0 var(--wp--preset--spacing--6);
}

/*
 * The article heading rule in section 19 is more specific than a bare
 * .spx-about h2, so it has to be named here too or the heading stays black on
 * the blue band.
 */
.spx-about h2,
body.spx-blocks.single-post .entry-content .spx-about h2 {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 900;
	font-size: clamp(24px, 3vw, 32px);
	line-height: 1.15;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: var(--wp--preset--color--white);
	margin-block: var(--wp--preset--spacing--10) var(--wp--preset--spacing--6);
}

/* Just the logo — no card, no shadow, no rounded corners. */
.spx-about .spx-about-logo {
	margin-block: 0 var(--wp--preset--spacing--10);
}

.spx-about .spx-about-logo img {
	width: auto;
	max-width: 300px;
	height: auto;
	border-radius: 0;
	box-shadow: none;
	margin-inline: auto;
}

.spx-about .wp-block-buttons {
	margin-block: 0;
}

.spx-about .spx-about-cta .wp-block-button__link {
	display: inline-block;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: var(--spr-radius-pill);
	padding: 16px 36px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	border: 2px solid var(--wp--preset--color--primary);
	transition: background-color .2s ease, border-color .2s ease;
}

.spx-about .spx-about-cta .wp-block-button__link:hover,
.spx-about .spx-about-cta .wp-block-button__link:focus {
	background: var(--wp--preset--color--primary-hover);
	border-color: var(--wp--preset--color--primary-hover);
	color: var(--wp--preset--color--white);
}

@media (max-width: 921px) {
	.spx-about {
		padding-block: var(--wp--preset--spacing--10);
	}

	.spx-about .spx-about-logo img {
		max-width: 220px;
	}
}


/* =========================================================================
   21. SINGLE PRODUCT — description and short description
   =========================================================================
   Product copy came off WPBakery as section headings, two columns of spec
   bullets, a founder note with a signature, and a grey panel of ingredients
   and legal small print. That structure is now core blocks; this gives it the
   same shape it had before.

   The nutrition products render from a synced pattern whose spec bullets are
   custom fields, so those pieces carry their own classes:
     .spx-prod-specs     the two-column spec row
     .spx-prod-speclist  a spec field rendered as a list
     .spx-prod-label     INGREDIENTS: / ALLERGENS: / STORAGE: / ADVICE:
     .spx-prod-alert     the per-variation notice
     .spx-prod-image     the founder signature
   ========================================================================= */

body.spx-blocks.single-product .woocommerce-Tabs-panel,
body.spx-blocks.single-product .woocommerce-product-details__short-description {
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	line-height: 1.65;
	color: var(--wp--preset--color--body);
}

body.spx-blocks.single-product .woocommerce-Tabs-panel h2,
body.spx-blocks.single-product .woocommerce-Tabs-panel h3 {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 900;
	font-size: clamp(20px, 2.4vw, 26px);
	line-height: 1.15;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: var(--wp--preset--color--black);
	margin-block: var(--wp--preset--spacing--10) var(--wp--preset--spacing--4);
}

body.spx-blocks.single-product .woocommerce-Tabs-panel > :first-child,
body.spx-blocks.single-product .woocommerce-Tabs-panel h2:first-child {
	margin-top: 0;
}

body.spx-blocks.single-product .woocommerce-Tabs-panel p {
	margin-block: 0 var(--wp--preset--spacing--5);
}

/* --- Spec lists --------------------------------------------------------- */

/*
 * One rule for both kinds: the lists the converter rebuilt from [fancy-ul],
 * and the ones the child theme builds from the sprprod_usp custom fields.
 */
body.spx-blocks.single-product .woocommerce-Tabs-panel ul,
body.spx-blocks.single-product .woocommerce-product-details__short-description ul,
.spx-prod-speclist {
	list-style: none;
	margin: 0 0 var(--wp--preset--spacing--5);
	padding: 0;
}

body.spx-blocks.single-product .woocommerce-Tabs-panel li,
body.spx-blocks.single-product .woocommerce-product-details__short-description li,
.spx-prod-speclist li {
	position: relative;
	padding-left: 20px;
	margin-bottom: 10px;
}

body.spx-blocks.single-product .woocommerce-Tabs-panel li::before,
body.spx-blocks.single-product .woocommerce-product-details__short-description li::before,
.spx-prod-speclist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .62em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
}

/* Nested lists keep the indent but drop the second bullet. */
body.spx-blocks.single-product .woocommerce-Tabs-panel li li::before {
	background: var(--wp--preset--color--grey-border);
}

.spx-prod-specs {
	gap: var(--spr-gutter);
	margin-block: var(--wp--preset--spacing--6) var(--wp--preset--spacing--8);
}

/* --- Ingredient panel --------------------------------------------------- */

body.spx-blocks.single-product .spx-post-panel {
	background: var(--wp--preset--color--grey-section);
	border-radius: var(--spr-radius-card);
	padding: var(--wp--preset--spacing--8);
	margin-block: var(--wp--preset--spacing--8);
	font-size: 14px;
}

body.spx-blocks.single-product .spx-post-panel > *:last-child {
	margin-bottom: 0;
}

.spx-prod-label {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--black);
	margin-block: var(--wp--preset--spacing--5) var(--wp--preset--spacing--2) !important;
}

.spx-prod-label strong {
	font-weight: inherit;
}

/* --- Founder signature and per-variation notice ------------------------- */

/*
 * sprprod_image1 is the flavour's pack shot, not a signature — the plugin
 * renders it with its own inline border radius, so only the size is set here.
 */
.spx-prod-image {
	text-align: center;
}

.spx-prod-image img {
	max-width: 420px;
	width: 100%;
	height: auto;
	margin-inline: auto;
}

.spx-prod-alert:not(:has(.sprprod-field:not(:empty))) {
	display: none;
}

.spx-prod-alert .sprprod-field {
	display: block;
	background: var(--wp--preset--color--grey-section);
	border-left: 3px solid var(--wp--preset--color--primary);
	border-radius: var(--spr-radius-card);
	padding: var(--wp--preset--spacing--5);
	font-size: 15px;
}

/* --- Images in the description ------------------------------------------ */

body.spx-blocks.single-product .woocommerce-Tabs-panel .wp-block-image img {
	border-radius: var(--spr-radius-card);
	height: auto;
}

body.spx-blocks.single-product .woocommerce-Tabs-panel figure {
	box-shadow: none;
}

/* --- Legacy call to action ---------------------------------------------- */

body.spx-blocks.single-product .spx-legacy-btn a {
	color: var(--wp--preset--color--white);
}

/* --- Programme pages ---------------------------------------------------- */

/*
 * The programme descriptions are three set pieces: a centred title over the
 * video, a grey band with the copy beside an image, and a grid of six feature
 * cards with pink titles. WPBakery expressed all of it through per-element
 * settings; these classes are what the conversion turned those into.
 */

/*
 * A text-alignment wrapper, not a section: theme.json gives core/group 48px of
 * padding, which is right for a banded section and wrong for a centred line.
 */
.spx-center {
	text-align: center;
	padding: 0;
}

.spx-center h2,
.spx-center h3 {
	text-align: center;
}

/* The section lead-in above the feature cards. */
.spx-center > p {
	max-width: 640px;
	margin-inline: auto;
	color: var(--wp--preset--color--muted-text);
}

/*
 * These groups usually hold a single line — a title, a lead-in, a closing
 * note. Left to the section heading margins they opened a screen-deep gap
 * between the title and the line under it.
 */
body.spx-blocks.single-product .woocommerce-Tabs-panel .spx-center {
	/* Beats Astra's .entry-content > .wp-block-group block padding. */
	padding: 0;
	margin-block: var(--wp--preset--spacing--8) var(--wp--preset--spacing--4);
}

body.spx-blocks.single-product .woocommerce-Tabs-panel .spx-center > :first-child {
	margin-top: 0;
}

body.spx-blocks.single-product .woocommerce-Tabs-panel .spx-center > :last-child {
	margin-bottom: 0;
}

body.spx-blocks.single-product .woocommerce-Tabs-panel .spx-center h2 {
	margin-bottom: var(--wp--preset--spacing--4);
}

/* Text beside an image on one grey ground, not two stacked boxes. */
body.spx-blocks.single-product .spx-post-panel .wp-block-columns {
	gap: var(--wp--preset--spacing--10);
	align-items: center;
	margin-block: 0;
}

body.spx-blocks.single-product .spx-post-panel .wp-block-column > :first-child {
	margin-top: 0;
}

body.spx-blocks.single-product .spx-post-panel .wp-block-column > :last-child {
	margin-bottom: 0;
}

body.spx-blocks.single-product .spx-post-panel .wp-block-image img {
	border-radius: var(--spr-radius-card);
}

/* --- Feature cards ------------------------------------------------------ */

.spx-card-grid {
	gap: var(--spr-gutter);
	align-items: stretch;
	margin-block: var(--wp--preset--spacing--8);
}

/* Same story as .spx-center: Astra pads a top-level columns block. */
body.spx-blocks.single-product .woocommerce-Tabs-panel .spx-card-grid {
	padding: 0;
}

.spx-card-grid > .wp-block-column {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--grey-border);
	border-radius: var(--spr-radius-card);
	padding: var(--wp--preset--spacing--8);
	text-align: center;
}

.spx-card-grid > .wp-block-column > :last-child {
	margin-bottom: 0;
}

.spx-card-grid p {
	font-size: 15px;
	line-height: 1.6;
	margin-block: 0 var(--wp--preset--spacing--4);
}

/*
 * The card title: an 18px bold pink line, not a section heading. Rendering
 * these as h2 is what made the programme pages read as a wall of shouting
 * headings instead of a grid of cards.
 */
.spx-card-title {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: 18px !important;
	line-height: 1.25;
	color: var(--wp--preset--color--primary);
	margin-block: 0 var(--wp--preset--spacing--3) !important;
}

@media (max-width: 781px) {
	.spx-card-grid > .wp-block-column {
		flex-basis: 100% !important;
	}
}

@media (max-width: 600px) {
	body.spx-blocks.single-product .wp-block-columns {
		gap: 0;
	}

	.spx-card-grid,
	body.spx-blocks.single-product .spx-post-panel .wp-block-columns {
		gap: var(--spr-gutter);
	}
}


/* =========================================================================
   22. PAUSE PROGRAMME (442856)
   =========================================================================
   Pause has its own palette — rose, pale pink and purple — which is why the
   tokens below are literal rather than drawn from the SPR presets. They are
   the colours the original page used, and they are scoped to this product so
   they cannot leak onto the rest of the shop.

   The page is a run of full-bleed bands. Inside a WooCommerce tab there is no
   alignfull to inherit, so each band breaks out with the same 100vw technique
   the article sign-off uses.
   ========================================================================= */

.spx-pause-band {
	--pause-rose: #d7888b;
	--pause-rose-light: #f6c3c6;
	--pause-blush: #ffe0e4;
	--pause-purple: #641a86;
	--pause-pink: #de3d95;

	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: var(--wp--preset--spacing--14) var(--spr-gutter);
	text-align: center;
}

body.spx-blocks.single-product .site-content {
	overflow-x: clip;
}

.spx-pause-band > * {
	max-width: 1100px;
	margin-inline: auto;
}

.spx-pause-band p {
	font-family: var(--wp--preset--font-family--body);
	font-size: 17px;
	line-height: 1.7;
	margin-block: 0 var(--wp--preset--spacing--5);
}

/* --- Section titles ----------------------------------------------------- */

body.spx-blocks.single-product .woocommerce-Tabs-panel .spx-pause-title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: clamp(26px, 3.4vw, 40px);
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--pause-purple);
	text-align: center;
	margin-block: 0 var(--wp--preset--spacing--8);
}

body.spx-blocks.single-product .woocommerce-Tabs-panel .spx-pause-title-pink {
	color: var(--pause-pink);
}

body.spx-blocks.single-product .woocommerce-Tabs-panel .spx-pause-title-light {
	color: var(--wp--preset--color--white);
}

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

.spx-pause-hero {
	background: linear-gradient(135deg, var(--pause-rose-light) 0%, var(--pause-rose) 100%);
	color: var(--wp--preset--color--white);
	padding-block: var(--wp--preset--spacing--16, 96px);
}

.spx-pause-hero .spx-pause-logo img {
	max-width: 320px;
	height: auto;
	margin-inline: auto;
}

.spx-pause-hero .spx-pause-lead {
	max-width: 760px;
	margin-inline: auto;
	font-size: 19px;
	color: var(--wp--preset--color--white);
}

.spx-pause-hero .spx-pause-byline {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--wp--preset--color--white);
	opacity: .85;
	margin-bottom: var(--wp--preset--spacing--8);
}

/* --- Video and copy bands ----------------------------------------------- */

.spx-pause-video {
	background: var(--wp--preset--color--white);
}

.spx-pause-what {
	background: var(--pause-blush);
}

.spx-pause-what > p,
.spx-pause-video > p {
	max-width: 800px;
	margin-inline: auto;
}

.spx-pause-features {
	gap: var(--spr-gutter);
	margin-top: var(--wp--preset--spacing--10);
}

body.spx-blocks.single-product .woocommerce-Tabs-panel .spx-pause-feature-title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 18px;
	line-height: 1.3;
	text-transform: none;
	color: var(--pause-purple);
	text-align: center;
	margin-block: 0 var(--wp--preset--spacing--3);
}

.spx-pause-feature-title a {
	color: inherit;
	text-decoration: none;
}

.spx-pause-feature-title a:hover {
	text-decoration: underline;
}

.spx-pause-features p {
	font-size: 15px;
}

/* --- A game-changer ----------------------------------------------------- */

.spx-pause-game {
	background: var(--wp--preset--color--white);
	padding-inline: 0;
}

.spx-pause-game > .spx-pause-split {
	max-width: 1280px;
	gap: var(--wp--preset--spacing--12);
	align-items: center;
	text-align: left;
	margin-inline: auto;
	padding-inline: var(--spr-gutter);
}

.spx-pause-split .spx-pause-title {
	text-align: left !important;
}

.spx-pause-split .wp-block-buttons {
	justify-content: flex-start;
}

.spx-pause-portrait img {
	width: 100%;
	height: auto;
	border-radius: var(--spr-radius-card);
}

/* --- Stories and testimonials ------------------------------------------- */

.spx-pause-stories {
	background: var(--pause-purple);
	color: var(--wp--preset--color--white);
}

.spx-pause-stories p {
	color: var(--wp--preset--color--white);
}

.spx-pause-stories > p {
	max-width: 820px;
	margin-inline: auto var(--wp--preset--spacing--10);
	margin-inline: auto;
	margin-bottom: var(--wp--preset--spacing--10);
}

.spx-pause-quotes {
	--spr-card-w: calc((100% - 2 * var(--spr-gutter)) / 3);
	max-width: 1100px;
}

@media (max-width: 1023px) { .spx-pause-quotes { --spr-card-w: 60%; } }
@media (max-width: 767px)  { .spx-pause-quotes { --spr-card-w: 84%; } }

.spx-quote {
	background: rgba(255, 255, 255, .1);
	border-radius: var(--spr-radius-card);
	padding: var(--wp--preset--spacing--8);
	text-align: left;
	display: flex;
	flex-direction: column;
}

.spx-quote-text {
	font-size: 16px !important;
	line-height: 1.65;
	flex: 1;
}

.spx-quote-text::before {
	content: "\201C";
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 44px;
	line-height: .8;
	opacity: .5;
	margin-bottom: 8px;
}

.spx-quote-name {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 14px !important;
	letter-spacing: .08em;
	text-transform: uppercase;
	margin-bottom: 2px !important;
}

.spx-quote-role {
	font-size: 13px !important;
	opacity: .75;
	margin-bottom: 0 !important;
}

/* --- Experts ------------------------------------------------------------ */

.spx-pause-experts {
	background: var(--wp--preset--color--grey-section);
}

.spx-expert-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--spr-gutter);
	max-width: 1100px;
	margin-inline: auto;
	padding: 0;
}

/* Grid items inherit the flow-layout sibling margin, which makes the first
   card of each row taller than the rest. */
.spx-expert-grid > .spx-expert {
	margin: 0 !important;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--grey-border);
	border-radius: var(--spr-radius-card);
	padding: var(--wp--preset--spacing--6);
	text-align: center;
}

.spx-expert-photo {
	margin: 0 0 var(--wp--preset--spacing--4);
}

/* Beats the product tab's blanket card radius on description images. */
body.spx-blocks.single-product .woocommerce-Tabs-panel .spx-expert-photo img,
.spx-expert-photo img {
	width: 160px;
	height: 160px;
	object-fit: cover;
	border-radius: 50%;
	margin-inline: auto;
}

body.spx-blocks.single-product .woocommerce-Tabs-panel .spx-expert-name {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 17px;
	line-height: 1.3;
	text-transform: none;
	color: var(--wp--preset--color--black);
	text-align: center;
	margin-block: 0 6px;
}

.spx-expert-role {
	font-size: 13px !important;
	line-height: 1.45;
	color: var(--wp--preset--color--muted-text);
	margin-bottom: 8px !important;
}

.spx-expert-mini {
	font-size: 13px !important;
	font-weight: 500;
	color: var(--pause-pink);
	margin-bottom: 12px !important;
}

.spx-expert details {
	text-align: left;
	margin-top: 12px;
}

.spx-expert summary {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--pause-pink);
	text-align: center;
	list-style: none;
}

.spx-expert summary::-webkit-details-marker {
	display: none;
}

.spx-expert details[open] summary {
	margin-bottom: 12px;
}

.spx-expert details p {
	font-size: 14px !important;
	line-height: 1.6;
}

.spx-expert-links {
	font-size: 13px !important;
	margin-bottom: 0 !important;
}

.spx-expert-links a {
	color: var(--pause-pink);
}

@media (max-width: 921px) {
	.spx-expert-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.spx-expert-grid {
		grid-template-columns: 1fr;
	}
}

/* --- Recipes ------------------------------------------------------------ */

.spx-pause-recipes-band {
	background: var(--pause-blush);
}

.spx-pause-recipes-band > p {
	max-width: 760px;
	margin-inline: auto;
	margin-bottom: var(--wp--preset--spacing--10);
}

.spx-pause-recipes {
	max-width: 1200px;
}

.spx-recipe-shot {
	margin: 0;
}

.spx-recipe-shot img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--spr-radius-card);
}

/* --- Closing band ------------------------------------------------------- */

.spx-pause-close {
	background: linear-gradient(135deg, var(--pause-rose) 0%, var(--pause-rose-light) 100%);
}

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

.spx-pause-cta .wp-block-button__link {
	display: inline-block;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: var(--spr-radius-pill);
	padding: 16px 40px;
	background: var(--pause-purple);
	color: var(--wp--preset--color--white);
	border: 2px solid var(--pause-purple);
	transition: background-color .2s ease, border-color .2s ease;
}

.spx-pause-cta .wp-block-button__link:hover,
.spx-pause-cta .wp-block-button__link:focus {
	background: var(--pause-pink);
	border-color: var(--pause-pink);
	color: var(--wp--preset--color--white);
}

@media (max-width: 781px) {
	.spx-pause-band {
		padding-block: var(--wp--preset--spacing--10);
	}

	.spx-pause-split > .wp-block-column {
		flex-basis: 100% !important;
	}
}


/* =========================================================================
   23. NUTRITION PRODUCT PAGES — the two set pieces
   =========================================================================
   Every meal replacement, post-workout and overnight oats page is the same
   two blocks side by side, then the small print:

     .spx-prod-split          Eat Clean Get Lean: copy left, lifestyle photo
     .spx-prod-split-alt      A word from The Founder: photo left, copy right
     .spx-prod-specs          the two columns of spec bullets
     .spx-spec-list           a Spectra icon list of those bullets

   The containers are spectra/container, so the widths are set on the half
   groups rather than on the flex parent.
   ========================================================================= */

body.spx-blocks.single-product .woocommerce-Tabs-panel .spx-prod-split {
	gap: var(--wp--preset--spacing--12);
	align-items: center;
	margin-block: var(--wp--preset--spacing--10);
	padding: 0;
}

body.spx-blocks.single-product .woocommerce-Tabs-panel .spx-prod-split > .spx-prod-half {
	flex: 1 1 calc(50% - var(--wp--preset--spacing--12));
	min-width: 280px;
	padding: 0;
	margin: 0;
}

/* Photo first on the founder block, and on the left. */
.spx-prod-split-alt {
	flex-direction: row;
}

body.spx-blocks.single-product .woocommerce-Tabs-panel .spx-prod-photo {
	margin: 0;
}

body.spx-blocks.single-product .woocommerce-Tabs-panel .spx-prod-photo img {
	width: 100%;
	height: auto;
	border-radius: var(--spr-radius-card);
	display: block;
}

body.spx-blocks.single-product .woocommerce-Tabs-panel .spx-prod-half > :first-child {
	margin-top: 0;
}

body.spx-blocks.single-product .woocommerce-Tabs-panel .spx-prod-half > :last-child {
	margin-bottom: 0;
}

body.spx-blocks.single-product .woocommerce-Tabs-panel .spx-prod-signature {
	margin: var(--wp--preset--spacing--6) 0 0;
}

body.spx-blocks.single-product .woocommerce-Tabs-panel .spx-prod-signature img {
	max-width: 220px;
	height: auto;
	border-radius: 0;
}

/* --- Spec bullets ------------------------------------------------------- */

body.spx-blocks.single-product .woocommerce-Tabs-panel .spx-prod-specs {
	gap: var(--spr-gutter);
	align-items: flex-start;
	margin-top: var(--wp--preset--spacing--6);
	padding: 0;
}

body.spx-blocks.single-product .woocommerce-Tabs-panel .spx-prod-specs > .spx-prod-specs-col {
	flex: 1 1 calc(50% - var(--spr-gutter));
	min-width: 160px;
	padding: 0;
	margin: 0;
}

/*
 * Spectra draws its own list marker, so the shared product-tab bullet rule in
 * section 21 would give these two: one from Spectra, one from ::before.
 */
body.spx-blocks.single-product .woocommerce-Tabs-panel .spx-spec-list {
	list-style: none;
	margin: 0;
	padding: 0;
	/* Spectra lays its list out as a flex column with a 24px gap, which reads
	   as a menu rather than a spec sheet. */
	gap: 0;
}

body.spx-blocks.single-product .woocommerce-Tabs-panel .spx-spec-list li {
	position: relative;
	padding-left: 20px;
	margin-bottom: 10px;
	font-size: 15px;
	line-height: 1.5;
}

body.spx-blocks.single-product .woocommerce-Tabs-panel .spx-spec-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .55em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
}

/* Spectra's own icon slot is unused here — the dot above is the marker. */
body.spx-blocks.single-product .woocommerce-Tabs-panel .spx-spec-list .spectra-list-item-icon {
	display: none;
}

body.spx-blocks.single-product .woocommerce-Tabs-panel .spx-spec-list .wp-block-spectra-content {
	display: inline;
}

@media (max-width: 781px) {
	body.spx-blocks.single-product .woocommerce-Tabs-panel .spx-prod-split > .spx-prod-half {
		flex-basis: 100%;
	}

	/* Keep the photo under the copy on mobile, where side-by-side has gone. */
	.spx-prod-split-alt {
		flex-direction: column-reverse;
	}
}


/* =========================================================================
   24. BOOKS
   =========================================================================
   The landing page and the four title pages. Each book carries its own
   publisher colour, applied through .spx-tone-* so the tone lives in one
   place and the layout classes stay neutral:

     navy    High Protein Meals In Minutes
     green   Eat Your Way to a Six Pack
     teal    Grumpy Gorilla and Happy Hippo
     orange  Oh Yes I Can!

   The two DK titles share one structure (cover + retailers, spreads, about
   beside the endorsements). The children's books keep their own illustrated
   treatment, which is the point of them.
   ========================================================================= */

.spx-tone-navy   { --book-tone: #17244d; }
.spx-tone-green  { --book-tone: #55b948; }
.spx-tone-teal   { --book-tone: #72c9bd; }
.spx-tone-orange { --book-tone: #e35c40; }

.page .spx-book-page-title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 900;
	font-size: clamp(30px, 4vw, 46px);
	line-height: 1.1;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: var(--wp--preset--color--black);
	margin-block: 0 var(--wp--preset--spacing--5);
}

.page .spx-book-section-title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: clamp(20px, 2.6vw, 28px);
	line-height: 1.2;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--wp--preset--color--black);
	margin-block: 0 var(--wp--preset--spacing--6);
}

.spx-book-intro {
	max-width: 680px;
	font-size: 18px;
	color: var(--wp--preset--color--body);
	margin-bottom: var(--wp--preset--spacing--12);
}

/* --- Landing: the card grid --------------------------------------------- */

.spx-book-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--wp--preset--spacing--10);
	padding: 0;
}

/* Grid items inherit the flow-layout sibling margin. */
.spx-book-grid > .spx-book-card {
	margin: 0 !important;
	padding: 0;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--grey-border);
	border-radius: var(--spr-radius-card);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform .2s ease, box-shadow .2s ease;
}

.spx-book-grid > .spx-book-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 32px rgba(223, 39, 147, .2);
}

/*
 * Both halves have to be told to fill the card: theme.json gives core/group a
 * constrained layout, which centres the block at the content size and leaves
 * the coloured ground floating in the middle of the card.
 */
.spx-book-card__media,
.spx-book-card__body {
	width: 100%;
	max-width: none;
}

.spx-book-card__media {
	background: var(--book-tone, var(--wp--preset--color--grey-section));
	padding: var(--wp--preset--spacing--10);
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 280px;
}

.spx-book-card__media .spx-book-cover {
	margin: 0;
}

.spx-book-card__media img {
	max-height: 240px;
	width: auto;
	height: auto;
	border-radius: 4px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}

.spx-book-card__body {
	padding: var(--wp--preset--spacing--8);
	margin: 0;
	display: flex;
	flex-direction: column;
	flex: 1;
	text-align: center;
}

.spx-book-card__body .wp-block-buttons {
	justify-content: center;
}

.page .spx-book-card__title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 900;
	font-size: 20px;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	margin-block: 0 var(--wp--preset--spacing--3);
}

.spx-book-card__body p {
	font-size: 15px;
	line-height: 1.6;
	margin-block: 0 var(--wp--preset--spacing--6);
	flex: 1;
}

.spx-book-cta .wp-block-button__link,
.spx-book-hero-kids .wp-block-button__link {
	display: inline-block;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: var(--spr-radius-pill);
	padding: 14px 32px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	border: 2px solid var(--wp--preset--color--primary);
	transition: background-color .2s ease, border-color .2s ease;
}

.spx-book-cta .wp-block-button__link:hover {
	background: var(--wp--preset--color--primary-hover);
	border-color: var(--wp--preset--color--primary-hover);
}

/* --- Title pages: shared rows ------------------------------------------- */

.spx-book-hero,
.spx-book-about,
.spx-book-split {
	gap: var(--wp--preset--spacing--12);
	margin-block: var(--wp--preset--spacing--12);
	padding: 0;
}

.spx-book-hero > .spx-book-half,
.spx-book-about > .spx-book-half,
.spx-book-split > .spx-book-half {
	flex: 1 1 calc(50% - var(--wp--preset--spacing--12));
	min-width: 280px;
	padding: 0;
	margin: 0;
}

.spx-book-half > :first-child { margin-top: 0; }
.spx-book-half > :last-child  { margin-bottom: 0; }

.spx-book-hero .spx-book-cover {
	margin: 0;
}

.spx-book-hero .spx-book-cover img {
	width: 100%;
	height: auto;
	border-radius: var(--spr-radius-card);
}

.spx-book-byline {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted-text);
	line-height: 1.8;
	margin-bottom: var(--wp--preset--spacing--8);
}

/* --- Retailer buttons --------------------------------------------------- */

.spx-retailers {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
	padding: 0;
	width: 100%;
	max-width: none;
}

.spx-retailers > * {
	max-width: none;
	margin: 0;
}

.spx-retailer {
	/*
	 * Explicit rather than relying on align-items: stretch — the constrained
	 * group layout gives each child margin-inline: auto, which makes a stretch
	 * item shrink to fit and leaves the six buttons ragged.
	 */
	width: 100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 16px;
	background: var(--wp--preset--color--grey-section);
	border-radius: var(--spr-radius-card);
	padding: 12px 20px;
	text-decoration: none;
	transition: background-color .2s ease;
}

.spx-retailer:hover {
	background: var(--wp--preset--color--grey-card);
}

.spx-retailer__logo {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--wp--preset--color--white);
	display: flex;
	align-items: center;
	justify-content: center;
}

.spx-retailer__logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.spx-retailer__label {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--black);
}

/* --- Spreads, video and endorsements ------------------------------------ */

.spx-book-band {
	background: var(--wp--preset--color--grey-section);
	border-radius: var(--spr-radius-card);
	padding: var(--wp--preset--spacing--10);
	margin-block: var(--wp--preset--spacing--12);
}

.spx-book-video {
	padding: 0;
	margin-block: var(--wp--preset--spacing--12);
}

.spx-book-spreads {
	--spr-card-w: calc((100% - 2 * var(--spr-gutter)) / 3);
}

.spx-book-quotes {
	--spr-card-w: 100%;
}

.spx-book-spread,
.spx-book-quote {
	margin: 0;
}

.spx-book-spread img,
.spx-book-quote img {
	width: 100%;
	height: auto;
	border-radius: var(--spr-radius-card);
}

.spx-book-details {
	list-style: none;
	gap: 0;
	margin: var(--wp--preset--spacing--6) 0 0;
	padding: 0;
}

.spx-book-details li {
	position: relative;
	padding-left: 18px;
	margin-bottom: 6px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--wp--preset--color--muted-text);
}

.spx-book-details li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .55em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
}

/* --- Children's books --------------------------------------------------- */

.spx-book-hero-kids {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background: var(--book-tone, var(--wp--preset--color--grey-section));
	padding: var(--wp--preset--spacing--14) var(--spr-gutter);
	text-align: center;
	margin-block-start: 0;
}

.spx-book-hero-kids > * {
	max-width: 720px;
	margin-inline: auto;
}

.spx-book-hero-kids .spx-book-cover {
	margin: 0 auto var(--wp--preset--spacing--8);
}

.spx-book-hero-kids .spx-book-cover img {
	max-width: 380px;
	width: 100%;
	height: auto;
	border-radius: 6px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, .28);
	margin-inline: auto;
}

.page .spx-book-hero-kids .spx-book-page-title,
.spx-book-hero-kids p {
	color: var(--wp--preset--color--white);
}

.spx-book-eyebrow {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .15em;
	text-transform: uppercase;
	opacity: .85;
	margin-bottom: var(--wp--preset--spacing--2);
}

.spx-book-lead {
	font-size: 17px;
	line-height: 1.7;
	margin-bottom: var(--wp--preset--spacing--8);
}

.spx-book-hero-kids .price {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 22px;
	color: var(--wp--preset--color--white);
	display: block;
	margin-bottom: var(--wp--preset--spacing--4);
}

.spx-book-art {
	margin: 0;
}

.spx-book-art img {
	width: 100%;
	height: auto;
	border-radius: var(--spr-radius-card);
}

.spx-book-story p {
	font-size: 17px;
	line-height: 1.7;
}

/* The add-to-basket shortcode, wherever it lands on these pages. */
.spx-book-split .add_to_cart_inline,
.spx-book-hero-kids .add_to_cart_inline {
	border: 0 !important;
	padding: 0 !important;
}

.page .add_to_cart_inline .button,
.page .spx-book-half .button {
	color: var(--wp--preset--color--white);
}

@media (max-width: 921px) {
	.spx-book-grid {
		grid-template-columns: 1fr;
	}

	.spx-book-spreads {
		--spr-card-w: 60%;
	}
}

@media (max-width: 781px) {
	.spx-book-hero > .spx-book-half,
	.spx-book-about > .spx-book-half,
	.spx-book-split > .spx-book-half {
		flex-basis: 100%;
	}

	.spx-book-spreads {
		--spr-card-w: 82%;
	}
}