@charset "UTF-8";

/*!
Theme Name: Kidscomms
Theme URI: https://freshdigital.com.au/
Author: Automattic
Author URI: https://automattic.com/
Description: Theme for Kidscomms
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: _s
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

_s is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Header
	- Navigation
	- Footer
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
	- Popup
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Text scale
	- Animate
	- Alignments

--------------------------------------------------------------*/

/* Design tokens — colours
 *
 * Source of truth: design/tokens.json (extracted from design/index.html :root).
 * These SCSS variables exist only to feed sass/base/_root.scss. Components must
 * consume the custom property (var(--primary-color)), never the $variable.
--------------------------------------------- */

/* Underscores base-layer variables
 *
 * Consumed by sass/base/ and sass/components/ inherited from _s. Remapped onto
 * the design palette so the base layer no longer ships its own colour scheme.
--------------------------------------------- */

/* Design tokens — typography
 *
 * Source of truth: design/tokens.json. Components consume var(--body-font) etc.,
 * never these $variables directly.
--------------------------------------------- */

/* Design tokens — structure, spacing, radii, shadows, motion
 *
 * Source of truth: design/tokens.json. Components consume var(--space-lg) etc.
--------------------------------------------- */

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Custom properties (design tokens)
--------------------------------------------- */

/* Design tokens as custom properties
 *
 * The only place SCSS variables are turned into custom properties. Every
 * component consumes var(--token) so the token can be re-pointed in one place
 * (and, once theme.json lands, mirrored into the block editor).
--------------------------------------------- */
:root {

	/* Colour — brand */
	--primary-color: #29abe2;
	--primary-color-dark: #1489bd;
	--primary-color-light: #7dc4e8;
	--secondary-color: #f0716a;
	--secondary-color-dark: #e2554d;
	--accent-color: #f7d64a;
	--tertiary-color: #4d9aa9;
	--success-color: #43a457;
	--star-color: #f5b301;

	/* Colour — ink and surfaces */
	--heading-color: #182230;
	--text-color: #182230;
	--muted-color: #46566b;
	--muted-on-dark-color: #a9bacc;
	--muted-on-dark-light-color: #b6c6d8;
	--muted-on-dark-strong-color: #9db1c7;
	--overlay-light: rgba(255, 255, 255, 0.06);
	--overlay-light-strong: rgba(255, 255, 255, 0.1);
	--overlay-border: rgba(255, 255, 255, 0.12);
	--overlay-rule: rgba(255, 255, 255, 0.1);
	--overlay-strong: rgba(255, 255, 255, 0.2);
	--overlay-ghost: rgba(255, 255, 255, 0.14);
	--overlay-ghost-hover: rgba(255, 255, 255, 0.28);
	--overlay-ghost-border: rgba(255, 255, 255, 0.65);
	--surface-color: #fff;
	--surface-translucent-color: rgba(255, 255, 255, 0.94);
	--surface-alt-color: #f4f9fc;
	--surface-dark-color: #182230;
	--border-color: #e3edf4;
	--hero-band-color: #d4ebf1;
	--hero-band-transparent-color: rgba(212, 235, 241, 0);
	--hero-belt-color: #eaf6f9;
	--kicker-surface-color: #e3f4fc;

	/* Colour — blackout teaser */
	--blackout-surface-color: #0a0a0a;
	--blackout-surface-bg2: #111213;
	--blackout-accent-color: #3dff57;
	--blackout-accent-dark-color: #26d43e;
	--blackout-muted-color: #9aa2a0;
	--blackout-border-color: #282b2c;
	--blackout-ink-color: #04140a;
	--blackout-chip-color: #141414;
	--blackout-ring-color: rgba(61, 255, 87, 0.4);
	--blackout-glow-color: rgba(61, 255, 87, 0.14);
	--blackout-open-border-color: rgba(61, 255, 87, 0.35);

	/* Links */
	--link-color: #1489bd;
	--link-visited-color: #1489bd;
	--link-hover-color: #29abe2;

	/* Typography */
	--body-font: nunito, -apple-system, blinkmacsystemfont, segoe ui, roboto, helvetica neue, sans-serif;
	--heading-font: fredoka, -apple-system, blinkmacsystemfont, segoe ui, roboto, helvetica neue, sans-serif;
	--blackout-display-font: anton, -apple-system, blinkmacsystemfont, segoe ui, roboto, helvetica neue, sans-serif;
	--line-height-body: 1.65;
	--line-height-heading: 1.15;
	--font-size-xs: 0.7rem;
	--font-size-sm: 0.8rem;
	--font-size-base-sm: 0.85rem;
	--font-size-base: 0.95rem;
	--font-size-md: 1.08rem;
	--font-size-lg: 1.22rem;
	--font-size-xl: 1.4rem;
	--font-size-prose-h2: 1.5rem;
	--font-size-h2: clamp(1.9rem, 3.6vw, 2.7rem);
	--font-size-h1: clamp(2rem, 4vw, 3rem);
	--font-size-price: clamp(2.5rem, 5vw, 3.4rem);
	--font-size-hero-sub: clamp(1rem, 1.6vw, 1.16rem);
	--font-size-blackout-h2: clamp(2.1rem, 4.4vw, 3.4rem);
	--font-size-blackout-hero: clamp(2.8rem, 7vw, 5.4rem);
	--letter-spacing-wide: 0.06em;
	--letter-spacing-wider: 0.14em;
	--letter-spacing-widest: 0.16em;

	/* Layout */
	--container-width: 73.75rem;
	--container-gutter: 1.5rem;
	--header-height: 4.75rem;
	--logo-height: 3.25rem;
	--logo-height-footer: 3.5rem;
	--badge-height-footer: 4rem;

	/* Spacing */
	--space-3xs: 0.3125rem;
	--space-2xs: 0.5625rem;
	--space-xs: 0.75rem;
	--space-sm: 0.875rem;
	--space-md: 1.125rem;
	--space-lg: 1.5rem;
	--space-xl: 1.875rem;
	--space-2xl: 2.75rem;
	--space-3xl: 3rem;
	--space-4xl: 4rem;
	--space-section: clamp(4rem, 6vw, 5.25rem);

	/* Radii */
	--border-radius-sm: 0.625rem;
	--border-radius-md: 0.875rem;
	--border-radius: 1.125rem;
	--border-radius-lg: 1.625rem;
	--border-radius-pill: 62.5rem;
	--border-radius-blackout-btn: 0.75rem;

	/* Shadows */
	--shadow: 0 0.875rem 2.5rem rgba(24, 34, 48, 0.1);
	--shadow-sm: 0 0.375rem 1rem rgba(24, 34, 48, 0.07);
	--shadow-primary: 0 0.625rem 1.5rem rgba(41, 171, 226, 0.35);
	--shadow-secondary: 0 0.625rem 1.5rem rgba(240, 113, 106, 0.35);
	--shadow-menu: 0 1.25rem 2.5rem rgba(24, 34, 48, 0.12);
	--shadow-chip: 0 0.25rem 0.75rem rgba(24, 34, 48, 0.05);
	--shadow-sticky: 0 -0.5rem 1.875rem rgba(24, 34, 48, 0.12);
	--shadow-product: 0 1.125rem 2.75rem rgba(41, 171, 226, 0.3);
	--shadow-blackout: 0 0.625rem 1.875rem rgba(61, 255, 87, 0.28);

	/* Decorative gradients and glows */
	--gradient-product-sheen: linear-gradient(155deg, rgba(125, 196, 232, 0.16) 0%, transparent 42%), linear-gradient(335deg, rgba(247, 214, 74, 0.18) 0%, transparent 40%);
	--gradient-prevent-glow: radial-gradient(circle, rgba(41, 171, 226, 0.25), transparent 65%);
	--gradient-blackout-glow: radial-gradient(circle at 50% 45%, rgba(61, 255, 87, 0.16), transparent 62%);
	--gradient-final-cta-facets: linear-gradient(65deg, transparent 78%, rgba(247, 214, 74, 0.35) 78.2%), linear-gradient(-70deg, transparent 84%, rgba(240, 113, 106, 0.35) 84.2%);
	--shadow-product-image: drop-shadow(0 1.5rem 2.375rem rgba(24, 34, 48, 0.22));
	--shadow-blackout-device: drop-shadow(0 1.25rem 2.125rem rgba(0, 0, 0, 0.6));

	/* Motion */
	--transition: 0.22s;
	--transition-fast: 0.2s;
}

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: var(--text-color);
	font-family: var(--body-font);
	font-size: 1rem;
	line-height: var(--line-height-body);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
	color: var(--heading-color);
	font-family: var(--heading-font);
	line-height: var(--line-height-heading);
}

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #f4f9fc;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #46566b;
	cursor: help;
}

mark,
ins {
	background: #f7d64a;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {

	html {
		scroll-behavior: smooth;
	}
}

body {
	background: var(--surface-color);
	color: var(--text-color);
	overflow-x: hidden;
}

.pb-0 {
	padding-bottom: 0 !important;
}

hr {
	background-color: #e3edf4;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

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

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
a {
	color: var(--link-color);
}

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

a:hover,
a:focus,
a:active {
	color: var(--link-hover-color);
}

a:focus-visible {
	outline: 2px solid var(--primary-color);
	outline-offset: 2px;
}

a:hover,
a:active {
	outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	background: var(--primary-color);
	border: 1px solid var(--primary-color);
	border-radius: var(--border-radius-pill);
	color: var(--surface-color);
	font-family: var(--heading-font);
	font-weight: 600;
	line-height: 1;
	padding: 0.9em 1.6em;
	transition: background var(--transition) ease, border-color var(--transition) ease;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	background: var(--primary-color-dark);
	border-color: var(--primary-color-dark);
}

button:active,
button:focus-visible,
input[type="button"]:active,
input[type="button"]:focus-visible,
input[type="reset"]:active,
input[type="reset"]:focus-visible,
input[type="submit"]:active,
input[type="submit"]:focus-visible {
	background: var(--primary-color-dark);
	border-color: var(--primary-color-dark);
}

/* Design-system button
 *
 * Used across the homepage sections, the header CTA and the sticky mobile CTA.
 *
 * Each modifier states its colour on `&, &:visited`. Without the `:visited`
 * half, the base `a:visited` rule (specificity 0,1,1) out-ranks a plain
 * `.button--primary` (0,1,0) and repaints the label link-blue as soon as the
 * target has been visited — which is most buttons, since they point at pages
 * on this same site.
--------------------------------------------- */
.button {
	align-items: center;
	border: 0;
	border-radius: var(--border-radius-pill);
	cursor: pointer;
	display: inline-flex;
	font-family: var(--heading-font);
	font-size: 1.02rem;
	font-weight: 600;
	gap: 0.625rem;
	padding: 0.9375rem 1.875rem;
	text-decoration: none;
	transition: background var(--transition) ease, transform var(--transition) ease, border-color var(--transition) ease, color var(--transition) ease;
}

.button:hover,
.button:focus-visible {
	text-decoration: none;
}

.button--primary {
	background: var(--secondary-color);
	box-shadow: var(--shadow-secondary);
}

.button--primary,
.button--primary:visited {
	color: var(--surface-color);
}

.button--primary:hover,
.button--primary:focus-visible {
	background: var(--secondary-color-dark);
	color: var(--surface-color);
	transform: translateY(-0.125rem);
}

.button--blue {
	background: var(--primary-color);
	box-shadow: var(--shadow-primary);
}

.button--blue,
.button--blue:visited {
	color: var(--surface-color);
}

.button--blue:hover,
.button--blue:focus-visible {
	background: var(--primary-color-dark);
	color: var(--surface-color);
	transform: translateY(-0.125rem);
}

.button--ghost {
	backdrop-filter: blur(0.25rem);
	background: var(--overlay-ghost);
	border: 2px solid var(--overlay-ghost-border);
}

.button--ghost,
.button--ghost:visited {
	color: var(--surface-color);
}

.button--ghost:hover,
.button--ghost:focus-visible {
	background: var(--overlay-ghost-hover);
	color: var(--surface-color);
}

.button--outline {
	background: var(--surface-color);
	border: 2px solid var(--border-color);
}

.button--outline,
.button--outline:visited {
	color: var(--text-color);
}

.button--outline:hover,
.button--outline:focus-visible {
	border-color: var(--primary-color);
	color: var(--primary-color-dark);
}

.button--blackout {
	background: var(--blackout-accent-color);
	box-shadow: var(--shadow-blackout);
}

.button--blackout,
.button--blackout:visited {
	color: var(--blackout-ink-color);
}

.button--blackout:hover,
.button--blackout:focus-visible {
	background: var(--blackout-accent-dark-color);
	color: var(--blackout-ink-color);
	transform: translateY(-0.125rem);
}

.button--large {
	font-size: 1.1rem;
	padding: 1.125rem 2.5rem;
}

.button--block {
	justify-content: center;
	width: 100%;
}

.button-style-outline .wp-element-button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--heading-font);
	font-weight: 600;
	font-size: 1.02rem;
	padding: 15px 30px;
	border-radius: 999px;
	transition: 0.22s;
	cursor: pointer;
	background: var(--surface-color);
	color: var(--ink);
	border: 2px solid var(--hero-belt-color);
}

.button-style-outline .wp-element-button:hover {
	border-color: var(--link-hover-color);
	color: var(--link-hover-color);
}

@media (prefers-reduced-motion: reduce) {

	.button:hover,
	.button:focus-visible {
		transform: none;
	}
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #46566b;
	border: 1px solid #e3edf4;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #182230;
}

select {
	border: 1px solid #e3edf4;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/* Container
 *
 * Replaces the design's .wrap. Every full-bleed band puts one of these inside
 * itself rather than constraining the band.
--------------------------------------------- */
.container {
	margin-inline: auto;
	max-width: var(--container-width);
	padding-inline: var(--container-gutter);
	width: 100%;
}

/* Section shell
 *
 * The design set `section { padding: 84px 0 }` globally and stepped it down at
 * 960px. Here it is one fluid token instead of a media query.
--------------------------------------------- */
.section {
	padding-block: var(--space-section);
}

.section--flush {
	padding-block: 0;
}

.section--tight {
	padding-block: var(--space-xl);
}

.section--alt {
	background: var(--surface-alt-color);
}

.section--dark {
	background: var(--surface-dark-color);
	color: var(--surface-color);
}

.section__header {
	margin-inline: auto;
	max-width: 50rem;
	text-align: center;
}

.section__kicker {
	background: var(--kicker-surface-color);
	border-radius: var(--border-radius-pill);
	color: var(--primary-color-dark);
	display: inline-block;
	font-family: var(--heading-font);
	font-size: var(--font-size-sm);
	font-weight: 600;
	letter-spacing: var(--letter-spacing-wider);
	margin-bottom: var(--space-md);
	padding: 0.4375rem 1rem;
	text-transform: uppercase;
}

.section__title {
	font-size: var(--font-size-h2);
	font-weight: 600;
	margin-top: 0;
	margin-bottom: var(--space-sm);
}

.section__subtitle {
	color: var(--muted-color);
	font-size: var(--font-size-md);
	margin-bottom: 0;
}

.section--dark .section__kicker {
	background: var(--overlay-light-strong);
	color: var(--primary-color-light);
}

.section--dark .section__title {
	color: var(--surface-color);
}

.section--dark .section__subtitle {
	color: var(--muted-on-dark-light-color);
}

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Header
--------------------------------------------- */

/* Announcement bar
--------------------------------------------- */
.announcement-bar {
	background: var(--surface-dark-color);
	color: var(--surface-color);
	font-size: var(--font-size-base-sm);
	font-weight: 700;
	letter-spacing: var(--letter-spacing-wide);
	padding: 0.5625rem 1rem;
	text-align: center;
}

@media screen and (max-width: 60rem) {

	.announcement-bar {
		font-size: 0.65rem;
	}
}

.announcement-bar__highlight {
	color: var(--accent-color);
}

.announcement-bar--dark {
	background: var(--blackout-surface-color);
	border-bottom: 1px solid var(--blackout-border-color);
	color: var(--surface-color);
	font-weight: 800;
	text-transform: uppercase;
}

.announcement-bar--dark .announcement-bar__highlight {
	color: var(--blackout-accent-color);
}

/* Site header
--------------------------------------------- */
.site-header {
	backdrop-filter: blur(0.625rem);
	background: var(--surface-translucent-color);
	border-bottom: 1px solid var(--border-color);
	position: sticky;
	top: 0;
	z-index: 60;
}

.site-header__inner {
	align-items: center;
	display: flex;
	gap: var(--space-lg);
	justify-content: space-between;
	min-height: var(--header-height);
}

.site-header__ctas {
	align-items: center;
	display: flex;
	gap: var(--space-sm);
}

.site-header__cta {
	font-size: var(--font-size-base);
	padding: 0.6875rem 1.375rem;
}

@media screen and (max-width: 60rem) {

	.site-header__ctas {
		display: none;
	}
}

.site-header {

	/* Dark variant — the Blackout page's "Header Style" setting (see
   * template-blackout.php / inc/blackout.php). Reuses the same
   * --blackout-* tokens as the homepage's Blackout teaser
   * (components/blackout-teaser/), not new colours.
   */
}

.site-header--dark {
	background: var(--blackout-surface-color);
	border-bottom-color: var(--blackout-border-color);
}

.site-header--dark .site-branding__link img {
	background: var(--surface-color);
	border-radius: 0.6rem;
	padding: 0.25rem;
}

.site-header--dark .site-branding__title {
	color: var(--surface-color);
}

.site-header--dark .site-branding__tagline {
	color: var(--blackout-muted-color);
}

.site-header--dark .site-branding__tagline b,
.site-header--dark .site-branding__tagline strong {
	color: var(--blackout-accent-color);
}

.site-header--dark .site-nav__bar {
	background: var(--surface-color);
}

.site-header--dark .site-nav__menu a {
	color: var(--blackout-muted-color) !important;
	font-size: var(--font-size-sm);
	font-weight: 800;
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
}

.site-header--dark .site-nav__menu a:hover,
.site-header--dark .site-nav__menu .current-menu-ancestor > a,
.site-header--dark .site-nav__menu .current_page_ancestor > a {
	color: var(--blackout-accent-color) !important;
}

.site-header--dark .site-nav__menu ul {
	background: var(--blackout-surface-color);
	border-color: var(--blackout-border-color);
}

@media screen and (max-width: 60rem) {

	.site-header--dark .site-nav__menu {
		background: var(--blackout-surface-color);
		border-top-color: var(--blackout-border-color);
		box-shadow: none;
	}

	.site-header--dark .site-nav__menu a {
		border-bottom-color: var(--blackout-border-color);
	}
}

.site-header--dark .site-header__cta {
	background: var(--blackout-accent-color);
	border-radius: var(--border-radius-blackout-btn);
	box-shadow: var(--shadow-blackout);
	color: var(--blackout-ink-color);
	font-weight: 700;
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
}

.site-header--dark .site-header__cta:hover,
.site-header--dark .site-header__cta:focus-visible {
	background: var(--blackout-accent-dark-color);
}

/* Site branding
--------------------------------------------- */
.site-branding {
	align-items: center;
	display: flex;
	gap: var(--space-xs);
}

.site-branding__link {
	align-items: center;
	display: flex;
	gap: var(--space-xs);
	text-decoration: none;
}

.site-branding__logo,
.site-branding .custom-logo {
	display: block;
	height: var(--logo-height);
	width: auto;
}

.site-branding__title {
	color: var(--heading-color);
	font-family: var(--heading-font);
	font-size: var(--font-size-lg);
	line-height: var(--line-height-heading);
	margin: 0;
}

.site-branding__tagline {
	color: var(--muted-color);
	font-family: var(--heading-font);
	font-size: var(--font-size-xs);
	line-height: 1.2;
	margin: 0;
}

.site-branding__tagline b,
.site-branding__tagline strong {
	color: var(--secondary-color);
	font-weight: inherit;
}

/* Navigation
--------------------------------------------- */

/* Primary site navigation
 *
 * Markup is produced by wp_nav_menu() in header.php; behaviour comes from the
 * theme's existing js/navigation.js, which toggles `.toggled` on #site-navigation.
--------------------------------------------- */
.site-nav__toggle {
	background: transparent;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	display: none;
	flex-direction: column;
	gap: 0.3125rem;
	margin-left: auto;
	padding: 0.5rem;
}

.site-nav__toggle:hover,
.site-nav__toggle:focus-visible {
	background: transparent;
	border-color: transparent;
}

.site-nav__bar {
	background: var(--heading-color);
	border-radius: 0.125rem;
	display: block;
	height: 0.1875rem;
	transition: transform var(--transition-fast) ease, opacity var(--transition-fast) ease;
	width: 1.625rem;
}

.site-nav__menu {
	display: flex;
	align-items: center;
	gap: var(--space-xl);
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-nav__menu li {
	position: relative;
}

@media screen and (max-width: 60rem) {

	.site-nav__menu li {
		width: 100%;
	}
}

.site-nav__menu a {
	color: var(--muted-color);
	display: block;
	font-size: var(--font-size-base);
	font-weight: 700;
	text-decoration: none;
	transition: color var(--transition-fast) ease;
}

.site-nav__menu a:hover,
.site-nav__menu a:focus-visible {
	color: var(--primary-color-dark);
}

.site-nav__menu .current-menu-item > a,
.site-nav__menu .current_page_item > a,
.site-nav__menu .current-menu-ancestor > a,
.site-nav__menu .current_page_ancestor > a {
	color: var(--primary-color-dark);
}

.site-nav {

	/* Sub-menus. */
}

.site-nav__menu ul {
	background: var(--surface-color);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-md);
	box-shadow: var(--shadow);
	display: none;
	left: 0;
	list-style: none;
	margin: 0;
	min-width: 12.5rem;
	padding: var(--space-xs);
	position: absolute;
	top: 100%;
	z-index: 99;
}

.site-nav__menu li:hover > ul,
.site-nav__menu li.focus > ul {
	display: block;
}

.site-nav {

	/* The "Blackout" item — flagged with a menu CSS class in Appearance > Menus. */
}

.site-nav__menu .menu-item-blackout > a {
	background: var(--blackout-chip-color);
	border-radius: var(--border-radius-pill);
	color: var(--surface-color);
	font-weight: 800;
	letter-spacing: 0.02em;
	padding: 0.5rem 0.9375rem;
}

.site-nav__menu .menu-item-blackout > a:hover,
.site-nav__menu .menu-item-blackout > a:focus-visible {
	box-shadow: 0 0 0 1px var(--blackout-ring-color);
	color: var(--blackout-accent-color);
}

@media screen and (max-width: 60rem) {

	.site-nav {
		margin-left: auto;
	}

	.site-nav__toggle {
		display: flex;
	}

	.site-nav__menu {
		background: var(--surface-color);
		border-top: 1px solid var(--border-color);
		box-shadow: var(--shadow-menu);
		display: none;
		flex-direction: column;
		gap: 0;
		left: 0;
		padding: 0.5rem var(--container-gutter) var(--space-md);
		position: absolute;
		right: 0;
		top: 100%;
	}

	.site-nav__menu a {
		border-bottom: 1px solid var(--border-color);
		font-family: var(--heading-font);
		font-size: var(--font-size-md);
		font-weight: 600;
		padding: 0.8125rem 0.25rem;
	}

	.site-nav__menu ul {
		border: 0;
		box-shadow: none;
		display: block;
		padding: 0 0 0 var(--space-lg);
		position: static;
	}

	.site-nav.toggled .site-nav__menu {
		display: flex;
		align-items: center;
	}

	.site-nav.toggled .site-nav__bar:nth-child(1) {
		transform: translateY(0.5rem) rotate(45deg);
	}

	.site-nav.toggled .site-nav__bar:nth-child(2) {
		opacity: 0;
	}

	.site-nav.toggled .site-nav__bar:nth-child(3) {
		transform: translateY(-0.5rem) rotate(-45deg);
	}

	.site-nav .hide-mobile {
		display: none;
	}
}

@media screen and (min-width: 60rem) {

	.site-nav .hide-desk {
		display: none;
	}
}

/* Post / comment navigation
--------------------------------------------- */
.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	flex: 1 0 50%;
	text-align: end;
}

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

/* Site footer
--------------------------------------------- */
.site-footer {
	background: var(--surface-dark-color);
	color: var(--muted-on-dark-color);
	font-size: var(--font-size-base);
	padding-block: var(--space-4xl) var(--space-xl);
}

.site-footer__grid {
	display: grid;
	gap: var(--space-2xl);
	grid-template-columns: 2fr 1fr 1fr;
	margin-bottom: var(--space-2xl);
}

.site-footer__logo {
	background: var(--surface-color);
	border-radius: var(--border-radius-md);
	display: block;
	height: var(--logo-height-footer);
	margin-bottom: var(--space-md);
	padding: 0.375rem;
	width: auto;
}

.site-footer__blurb {
	margin-bottom: 0;
}

.site-footer__badges {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
	margin-top: var(--space-md);
}

.site-footer__badge {
	height: var(--badge-height-footer);
	width: auto;
}

.site-footer__heading {
	color: var(--surface-color);
	font-family: var(--heading-font);
	font-size: var(--font-size-md);
	font-weight: 600;
	margin-bottom: var(--space-sm);
}

.site-footer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer__menu a {
	color: inherit;
	display: block;
	padding: var(--space-3xs) 0;
	text-decoration: none;
	transition: color var(--transition-fast) ease;
}

.site-footer__menu a:hover,
.site-footer__menu a:focus-visible {
	color: var(--surface-color);
}

.site-footer__menu ul {
	list-style: none;
	margin: 0;
	padding-left: var(--space-md);
}

.site-footer__note {
	border-top: 1px solid var(--overlay-rule);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--font-size-sm);
	gap: var(--space-lg);
	justify-content: space-between;
	padding-top: var(--space-lg);
}

.site-footer__note b {
	color: var(--accent-color);
	font-weight: 800;
}

.site-footer__note a {
	color: inherit;
}

.site-footer .widget-title {
	color: var(--surface-color);
	font-family: var(--heading-font);
	font-size: var(--font-size-md);
	font-weight: 600;
	margin-bottom: var(--space-sm);
}

.site-footer .widget a {
	color: inherit;
	display: block;
	padding: var(--space-3xs) 0;
	text-decoration: none;
	transition: color var(--transition-fast) ease;
}

.site-footer .widget a:hover,
.site-footer .widget a:focus-visible {
	color: var(--surface-color);
}

.site-footer .widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer .widget ul li {
	margin: 0;
}

@media screen and (max-width: 60rem) {

	.site-footer__grid {
		gap: var(--space-xl);
		grid-template-columns: 1fr;
	}
}

.site-footer {

	/* Dark variant — the Blackout page's "Footer Style" setting. Reuses
   * the same --blackout-* tokens as the homepage's Blackout teaser
   * (components/blackout-teaser/) and the header's --dark modifier
   * above, not new colours. Only reachable via get_footer(null,
   * ['use_widgets'=>true,'footer_style'=>'dark']) — see this file's
   * docblock.
   */
}

.site-footer--dark {
	background: var(--blackout-surface-color);
	border-top: 1px solid var(--blackout-border-color);
	color: var(--blackout-muted-color);
}

.site-footer--dark .site-footer__note {
	border-top-color: var(--blackout-border-color);
}

.site-footer--dark .site-footer__note b {
	color: var(--blackout-accent-color);
}

.site-footer--dark .widget-title {
	color: var(--surface-color);
}

.site-footer--dark .widget a:hover,
.site-footer--dark .widget a:focus-visible {
	color: var(--blackout-accent-color);
}

/* Sticky mobile CTA
--------------------------------------------- */
.sticky-cta {
	background: var(--surface-color);
	border-top: 1px solid var(--border-color);
	bottom: 0;
	box-shadow: var(--shadow-sticky);
	display: none;
	left: 0;
	padding: var(--space-xs) 1rem;
	position: fixed;
	right: 0;
	z-index: 70;
}

@media screen and (max-width: 60rem) {

	.sticky-cta {
		display: flex;
		flex-direction: row;
		gap: var(--space-xs);
	}

	.sticky-cta .button {
		flex: 1 1 0;
		font-size: var(--font-size-sm);
		gap: 0.375rem;
		padding: 0.625rem 0.75rem;
		width: auto;
		text-align: center;
	}
}

/* Floating actions — back-to-top + call/email quick-contact
--------------------------------------------- */
.float-actions {
	bottom: var(--space-lg);
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	position: fixed;
	right: var(--space-lg);
	z-index: 80;
}

.float-actions__button {
	align-items: center;
	border: 0;
	border-radius: var(--border-radius-pill);
	box-shadow: var(--shadow-menu);
	cursor: pointer;
	display: flex;
	flex-shrink: 0;
	height: 3.25rem;
	justify-content: center;
	transition: background var(--transition) ease, transform var(--transition) ease;
	width: 3.25rem;
}

.float-actions__button svg {
	color: inherit;
	flex-shrink: 0;
	height: 1.375rem;
	width: 1.375rem;
}

.float-actions__button:hover,
.float-actions__button:focus-visible {
	transform: translateY(-0.125rem);
}

.float-actions__back-to-top {
	background: var(--heading-color);
	color: var(--surface-color);
	opacity: 0;
	pointer-events: none;
	transform: translateY(0.5rem);
	transition: background var(--transition) ease, opacity var(--transition) ease, transform var(--transition) ease;
}

.float-actions__back-to-top.is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

.float-actions__back-to-top:hover,
.float-actions__back-to-top:focus-visible {
	background: var(--blackout-surface-color);
}

.float-actions__group {
	position: relative;
}

.float-actions__toggle {
	background: var(--secondary-color);
	color: var(--surface-color);
	position: relative;
}

.float-actions__toggle:hover,
.float-actions__toggle:focus-visible {
	background: var(--secondary-color-dark);
}

.float-actions__toggle-icon--close {
	display: none;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
}

.float-actions__toggle.is-open .float-actions__toggle-icon--open {
	display: none;
}

.float-actions__toggle.is-open .float-actions__toggle-icon--close {
	display: block;
}

.float-actions__panel {
	bottom: calc(100% + var(--space-sm));
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
	opacity: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
	transform: translateY(0.5rem);
	transition: opacity var(--transition) ease, transform var(--transition) ease;
}

.float-actions__panel.is-open {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

.float-actions__call,
.float-actions__email {
	background: var(--secondary-color);
}

.float-actions__call,
.float-actions__call:visited,
.float-actions__email,
.float-actions__email:visited {
	color: var(--surface-color);
}

.float-actions__call:hover,
.float-actions__call:focus-visible,
.float-actions__email:hover,
.float-actions__email:focus-visible {
	background: var(--secondary-color-dark);
	color: var(--surface-color);
}

.float-actions__cart {
	background: var(--primary-color);
	position: relative;
}

.float-actions__cart,
.float-actions__cart:visited {
	color: var(--surface-color);
}

.float-actions__cart:hover,
.float-actions__cart:focus-visible {
	background: var(--primary-color-dark);
	color: var(--surface-color);
}

.float-actions__cart-count {
	align-items: center;
	background: var(--secondary-color);
	border-radius: var(--border-radius-pill);
	color: var(--surface-color);
	display: flex;
	font-family: var(--heading-font);
	font-size: var(--font-size-xs);
	font-weight: 700;
	height: 1.25rem;
	justify-content: center;
	line-height: 1;
	min-width: 1.25rem;
	padding: 0 0.25rem;
	position: absolute;
	right: -0.25rem;
	top: -0.25rem;
}

.float-actions__cart-count[hidden] {
	display: none;
}

@media screen and (max-width: 60rem) {

	.float-actions {
		bottom: 5.5rem;
		right: var(--space-md);
	}
}

@media (prefers-reduced-motion: reduce) {

	.float-actions__button:hover,
	.float-actions__button:focus-visible,
	.float-actions__back-to-top,
	.float-actions__panel {
		transform: none;
	}
}

/* Homepage sections
--------------------------------------------- */

/* Hero
--------------------------------------------- */
.hero {
	background: var(--hero-belt-color);
}

.hero__controls {
	align-items: center;
	background: var(--hero-belt-color);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	justify-content: center;
	padding: var(--space-xs) var(--container-gutter);
}

.hero__pill {
	align-items: center;
	background: var(--surface-color);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-pill);
	box-shadow: var(--shadow-sm);
	color: var(--primary-color-dark);
	display: inline-flex;
	font-size: var(--font-size-sm);
	font-weight: 800;
	gap: 0.5rem;
	letter-spacing: 0.04em;
	padding: 0.5rem var(--space-md);
}

.hero .region-switch {
	align-items: center;
	background: var(--surface-color);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-pill);
	box-shadow: var(--shadow-sm);
	display: inline-flex;
	gap: 0.125rem;
	padding: 0.1875rem;
}

.hero .region-switch__btn {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: var(--border-radius-pill);
	color: var(--muted-color);
	cursor: pointer;
	display: inline-flex;
	font-family: var(--heading-font);
	font-size: var(--font-size-sm);
	font-weight: 600;
	gap: 0.375rem;
	padding: 0.375rem 0.75rem;
	transition: background var(--transition-fast) ease, color var(--transition-fast) ease;
}

.hero .region-switch__btn:hover,
.hero .region-switch__btn:focus-visible {
	background: var(--surface-alt-color);
	color: var(--heading-color);
}

.hero .region-switch__btn.is-active {
	background: var(--primary-color);
	color: var(--surface-color);
}

.hero .region-switch__label {
	color: var(--muted-color);
	font-size: var(--font-size-xs);
	font-weight: 800;
	letter-spacing: 0.06em;
	padding: 0 0.5rem;
	text-transform: uppercase;
}

.hero .region-switch__flag {
	border-radius: 0.125rem;
	box-shadow: 0 0 0 0.0625rem rgba(0, 0, 0, 0.12);
	flex: none;
	height: 0.875rem;
	width: 1.25rem;
}

.hero .region-switch__flag--globe {
	color: currentColor;
}

@media screen and (max-width: 60rem) {

	.hero .region-switch__label {
		display: none;
	}

	.hero .region-switch__btn {
		font-size: var(--font-size-xs);
		padding: 0.375rem 0.5rem;
	}
}

.hero__band {
	background: var(--hero-band-color);
	height: clamp(15rem, 46vh, 30rem);
	overflow: hidden;
	position: relative;
	width: 100%;
}

.hero__band::after {
	background: linear-gradient(180deg, var(--hero-band-transparent-color), var(--hero-band-color));
	bottom: 0;
	content: "";
	height: 3.25rem;
	left: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
	z-index: 3;
}

.hero__backdrop {
	display: block;
	filter: blur(2.125rem) brightness(0.985);
	height: 100%;
	inset: 0;
	object-fit: cover;
	position: absolute;
	transform: scale(1.06);
	width: 100%;
	z-index: 1;
}

.hero__stage {
	aspect-ratio: 16/9;
	bottom: 0;
	height: 100%;
	left: 50%;
	mask-image: linear-gradient(90deg, transparent 0, #000 20%, #000 80%, transparent 100%);
	position: absolute;
	top: 0;
	transform: translateX(-50%);
	z-index: 2;
}

.hero__stage video,
.hero__stage img {
	display: block;
	height: 100%;
	inset: 0;
	object-fit: cover;
	position: absolute;
	width: 100%;
}

.hero__stage {

	/* A still image is not 16:9 like the design's video — contain it so the
     subject stays whole instead of being cropped to a slice. */
}

.hero__stage--image img {
	object-fit: contain;
}

.hero__belt {
	background: linear-gradient(180deg, var(--hero-band-color), var(--hero-belt-color) 60%);
	padding: var(--space-lg) var(--container-gutter) var(--space-3xs);
	text-align: center;
}

.hero__subtitle {
	color: var(--muted-color);
	font-size: var(--font-size-hero-sub);
	margin: 0 auto var(--space-sm);
	max-width: 45rem;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	justify-content: center;
}

.hero__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
	justify-content: center;
	list-style: none;
	margin: var(--space-sm) 0 0;
	padding: 0;
}

.hero__chips li {
	background: var(--surface-color);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-pill);
	box-shadow: var(--shadow-chip);
	color: var(--muted-color);
	font-size: var(--font-size-sm);
	font-weight: 700;
	padding: 0.375rem 0.9375rem;
}

@media screen and (max-width: 60rem) {

	.hero__band {
		height: clamp(12rem, 38vh, 20.625rem);
	}

	.hero__belt {
		padding: 1rem 1rem 0.25rem;
	}
}

/* Trust bar
--------------------------------------------- */
.trust-bar {
	background: var(--surface-dark-color);
	color: var(--surface-color);
	padding-block: var(--space-lg);
}

.trust-bar__list {
	display: grid;
	gap: var(--space-md);
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

@media screen and (max-width: 60rem) {

	.trust-bar__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

.trust-bar__item {
	align-items: center;
	display: flex;
	font-size: var(--font-size-base);
	font-weight: 700;
	gap: var(--space-xs);
	justify-content: center;
}

.trust-bar__icon {
	align-items: center;
	background: var(--overlay-light-strong);
	border-radius: var(--border-radius-md);
	display: flex;
	flex: 0 0 2.625rem;
	font-size: var(--font-size-lg);
	height: 2.625rem;
	justify-content: center;
	width: 2.625rem;
}

.trust-bar__note {
	color: var(--muted-on-dark-strong-color);
	display: block;
	font-size: var(--font-size-sm);
	font-weight: 600;
}

/* Why Kidcomms — shortcut cards plus the answer card
--------------------------------------------- */
.why__grid {
	display: grid;
	gap: var(--space-lg);
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	list-style: none;
	margin: var(--space-3xl) 0 0;
	padding: 0;
}

.why__card {
	background: var(--surface-color);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	box-shadow: var(--shadow);
	padding: var(--space-2xl) var(--space-xl);
	position: relative;
}

.why__number {
	background: var(--secondary-color);
	border-radius: var(--border-radius-pill);
	color: var(--surface-color);
	font-family: var(--heading-font);
	font-size: var(--font-size-base-sm);
	font-weight: 700;
	left: 1.625rem;
	padding: 0.3125rem var(--space-sm);
	position: absolute;
	top: -1rem;
}

.why__card-title {
	color: var(--heading-color);
	font-size: var(--font-size-lg);
	font-weight: 600;
	margin: 0.625rem 0 var(--space-xs);
}

.why__card-body {
	color: var(--muted-color);
	font-size: var(--font-size-base);
	margin-bottom: 0;
}

.why__answer {
	align-items: flex-start;
	background: linear-gradient(120deg, var(--primary-color) 0%, var(--tertiary-color) 100%);
	border-radius: var(--border-radius);
	box-shadow: var(--shadow-product);
	color: var(--surface-color);
	display: flex;
	gap: var(--space-lg);
	margin-top: var(--space-lg);
	padding: var(--space-2xl);
}

.why__answer-icon {
	align-items: center;
	background: var(--overlay-strong);
	border-radius: var(--border-radius-md);
	display: flex;
	flex: 0 0 3.25rem;
	font-size: var(--font-size-xl);
	height: 3.25rem;
	justify-content: center;
}

.why__answer-title {
	color: var(--surface-color);
	font-size: var(--font-size-xl);
	font-weight: 600;
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}

.why__answer-body {
	margin-bottom: 0;
}

/* Product section
--------------------------------------------- */
.product__grid {
	align-items: center;
	display: grid;
	gap: var(--space-4xl);
	grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}

.product__visual {
	background: var(--surface-color);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-lg);
	box-shadow: var(--shadow);
	padding: var(--space-2xl);
	position: relative;
	text-align: center;
}

.product__visual::before {
	background: var(--gradient-product-sheen);
	border-radius: var(--border-radius-lg);
	content: "";
	inset: 0;
	position: absolute;
}

.product__visual img {
	filter: var(--shadow-product-image);
	margin-inline: auto;
	max-height: 32.5rem;
	position: relative;
	width: auto;
}

.product__badge {
	background: var(--primary-color);
	border-radius: var(--border-radius-pill);
	color: var(--surface-color);
	font-family: var(--heading-font);
	font-size: var(--font-size-sm);
	font-weight: 600;
	left: var(--space-lg);
	letter-spacing: 0.08em;
	padding: 0.4375rem 1rem;
	position: absolute;
	top: var(--space-lg);
	z-index: 2;
}

.product__price-row {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin: var(--space-md) 0 var(--space-3xs);
}

.product__price {
	color: var(--heading-color);
	font-family: var(--heading-font);
	font-size: var(--font-size-price);
	font-weight: 700;
}

.product__price sup {
	font-size: 0.4em;
	top: -1.2em;
}

.product__price-note {
	color: var(--muted-color);
	font-size: var(--font-size-base-sm);
	font-weight: 700;
}

.product__specs {
	display: grid;
	gap: var(--space-xs) var(--space-lg);
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	list-style: none;
	margin: var(--space-lg) 0 var(--space-2xl);
	padding: 0;
}

.product__specs li {
	align-items: center;
	display: flex;
	font-weight: 700;
	gap: 0.6875rem;
}

.product__yes {
	color: var(--success-color);
	font-weight: 800;
}

.product__no {
	color: var(--secondary-color);
	font-weight: 800;
}

.product__actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
}

.product__stock-note {
	color: var(--muted-color);
	font-size: var(--font-size-base-sm);
	font-weight: 600;
	margin: var(--space-sm) 0 0;
}

/* Parents / Kids split cards
--------------------------------------------- */
.split .section__header {
	max-width: 100%;
}

.split__grid {
	display: grid;
	gap: var(--space-lg);
	grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
	margin-top: var(--space-3xl);
}

.split__card {
	background: var(--surface-color);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	box-shadow: var(--shadow);
	padding: var(--space-3xl) var(--space-2xl);
}

.split__card--parents {
	border-top: 0.375rem solid var(--primary-color);
}

.split__card--kids {
	border-top: 0.375rem solid var(--accent-color);
}

.split__title {
	font-size: var(--font-size-xl);
	font-weight: 600;
	margin-bottom: var(--space-3xs);
}

.split__tag {
	color: var(--muted-color);
	display: block;
	font-size: var(--font-size-base-sm);
	font-weight: 800;
	letter-spacing: 0.1em;
	margin-bottom: var(--space-lg);
	text-transform: uppercase;
}

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

.split__list li {
	border-bottom: 1px dashed var(--border-color);
	display: flex;
	font-size: var(--font-size-base);
	gap: var(--space-xs);
	padding: 0.625rem 0;
}

.split__list li:last-child {
	border-bottom: 0;
}

.split__list li b {
	font-weight: 800;
}

.split__mark {
	color: var(--success-color);
	font-weight: 800;
}

/* What the P110 shuts out
--------------------------------------------- */
.prevent {
	overflow: hidden;
	position: relative;
}

.prevent::before {
	background: var(--gradient-prevent-glow);
	border-radius: 50%;
	content: "";
	height: 32.5rem;
	position: absolute;
	right: -7.5rem;
	top: -10rem;
	width: 32.5rem;
}

.prevent__grid {
	display: grid;
	gap: var(--space-lg);
	grid-template-columns: 1fr;
	list-style: none;
	margin: var(--space-3xl) 0 0;
	padding: 0;
	position: relative;
}

@media screen and (min-width: 36rem) {

	.prevent__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (min-width: 60rem) {

	.prevent__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.prevent__card {
	background: var(--overlay-light);
	border: 1px solid var(--overlay-border);
	border-radius: var(--border-radius);
	padding: var(--space-lg);
}

.prevent__mark {
	color: var(--secondary-color);
	font-size: var(--font-size-lg);
	font-weight: 800;
}

.prevent__card-title {
	color: var(--surface-color);
	font-size: var(--font-size-md);
	font-weight: 600;
	margin: 0.625rem 0 0.5rem;
}

.prevent__card-body {
	color: var(--muted-on-dark-color);
	font-size: var(--font-size-base);
	margin-bottom: 0;
}

/* Reviews — loops the `testimonial` post type
--------------------------------------------- */
.reviews__grid {
	display: grid;
	gap: var(--space-lg);
	grid-template-columns: 1fr;
	list-style: none;
	margin: var(--space-3xl) 0 0;
	padding: 0;
}

@media screen and (min-width: 36rem) {

	.reviews__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (min-width: 60rem) {

	.reviews__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.reviews__card {
	background: var(--surface-color);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	box-shadow: var(--shadow);
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	padding: var(--space-xl) var(--space-lg);
}

.reviews__stars {
	color: var(--star-color);
	letter-spacing: 0.125rem;
}

.reviews__quote {
	color: var(--muted-color);
	font-size: var(--font-size-base);
	font-style: italic;
	margin: 0;
}

.reviews__quote > :last-child {
	margin-bottom: 0;
}

.reviews__author {
	font-size: var(--font-size-base);
	font-style: normal;
	font-weight: 800;
	margin-top: auto;
}

.reviews__role {
	color: var(--muted-color);
	display: block;
	font-size: var(--font-size-sm);
	font-weight: 600;
}

/* FAQ — restyles Yoast's own FAQ block markup
 *
 * The block ships as `.schema-faq > .schema-faq-section > .schema-faq-question
 * (strong) + .schema-faq-answer (p)`, always fully expanded. The accordion
 * behaviour (hiding/showing `.schema-faq-answer`, toggling `.is-open`) comes
 * from js/faq-accordion.js — without it every answer stays visible, which is
 * the correct no-JS fallback rather than a broken one.
--------------------------------------------- */

/* Each FAQ post is authored as one yoast/faq-block holding every question
 * (see FAQ-ARCHITECTURE.md), so normally there is one .schema-faq wrapper
 * per post. It stays unmargined rather than carrying the header-to-list
 * gap itself: if a post ever ends up with more than one .schema-faq block
 * (e.g. two FAQ blocks inserted by mistake), a margin here would stack a
 * large gap before every block instead of once before the whole list. The
 * header-to-list gap belongs on .faq__list instead; consecutive questions
 * are spaced only by .schema-faq-section's margin-bottom below.
 */
.faq__list {
	margin: var(--space-2xl) auto 0;
	max-width: 51.25rem;
}

.faq__list h2 {
	color: var(--heading-color);
	font-family: var(--heading-font);
	font-size: var(--font-size-xl);
	font-weight: 600;
	margin: var(--space-2xl) 0 var(--space-sm);
}

.faq__list > h2:first-child {
	margin-top: 0;
}

.schema-faq {
	margin: 0;
}

.schema-faq-section {
	background: var(--surface-color);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-md);
	margin-bottom: var(--space-sm);
	overflow: hidden;
	padding: var(--space-lg);
}

.schema-faq-question {
	align-items: center;
	cursor: pointer;
	display: flex;
	font-family: var(--heading-font);
	font-size: var(--font-size-md);
	font-weight: 600;
	gap: var(--space-sm);
	justify-content: space-between;
}

.schema-faq-question::after {
	color: var(--primary-color);
	content: "+";
	flex: 0 0 auto;
	font-size: var(--font-size-xl);
	line-height: 1;
}

.schema-faq-section.is-open > .schema-faq-question::after {
	content: "−";
}

.schema-faq-question:focus-visible {
	outline: 2px solid var(--primary-color);
	outline-offset: 2px;
}

.schema-faq-answer {
	color: var(--muted-color);
	font-size: var(--font-size-base);
	margin: var(--space-md) 0 0;
}

.schema-faq-answer[hidden] {
	display: none;
}

/* Approaches — "one of three ways" shortcut cards, plus the closing answer
 * card. Dark-section variant of the .why component's shape: cards use the
 * translucent-overlay treatment (--overlay-light / --overlay-border /
 * --muted-on-dark-color), same as .prevent__card, since this section always
 * renders on a .section--dark background.
--------------------------------------------- */
.approaches__intro {
	color: var(--muted-on-dark-light-color);
	font-size: var(--font-size-md);
	margin: 0 auto;
	max-width: 42rem;
	text-align: center;
}

.approaches__grid {
	display: grid;
	gap: var(--space-lg);
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	list-style: none;
	margin: var(--space-3xl) 0 0;
	padding: 0;
}

.approaches__card {
	background: var(--overlay-light);
	border: 1px solid var(--overlay-border);
	border-radius: var(--border-radius);
	padding: var(--space-2xl) var(--space-xl);
	position: relative;
}

.approaches__number {
	background: var(--secondary-color);
	border-radius: var(--border-radius-pill);
	color: var(--surface-color);
	font-family: var(--heading-font);
	font-size: var(--font-size-base-sm);
	font-weight: 700;
	left: 1.625rem;
	padding: 0.3125rem var(--space-sm);
	position: absolute;
	top: -1rem;
}

.approaches__card-title {
	color: var(--surface-color);
	font-size: var(--font-size-lg);
	font-weight: 600;
	margin: 0.625rem 0 var(--space-xs);
}

.approaches__card-body {
	color: var(--muted-on-dark-color);
	font-size: var(--font-size-base);
	margin-bottom: 0;
}

.approaches__answer {
	align-items: flex-start;
	background: var(--overlay-light-strong);
	border: 1px solid var(--overlay-border);
	border-radius: var(--border-radius);
	display: flex;
	gap: var(--space-lg);
	margin-top: var(--space-lg);
	padding: var(--space-2xl);
}

.approaches__answer-icon {
	align-items: center;
	background: var(--overlay-light-strong);
	border-radius: var(--border-radius-md);
	display: flex;
	flex: 0 0 3.25rem;
	font-size: var(--font-size-xl);
	height: 3.25rem;
	justify-content: center;
}

.approaches__answer-body {
	color: var(--muted-on-dark-color);
	margin-bottom: 0;
}

/* Feature list — grouped Offer / Prevent / Benefit checklists
 * (Parent and Kid benefit sections)
--------------------------------------------- */
.feature-list {
	display: grid;
	gap: var(--space-xl);
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	margin-top: var(--space-3xl);
}

.feature-list__group {
	background: var(--surface-color);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	box-shadow: var(--shadow);
	padding: var(--space-xl);
}

.feature-list__heading {
	color: var(--heading-color);
	font-size: var(--font-size-lg);
	font-weight: 600;
	margin: 0 0 var(--space-md);
}

.feature-list__items {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	list-style: none;
	margin: 0;
	padding: 0;
}

.feature-list__items li {
	align-items: flex-start;
	color: var(--muted-color);
	display: flex;
	font-size: var(--font-size-base);
	gap: var(--space-xs);
}

.feature-list__mark {
	flex: 0 0 auto;
	font-weight: 800;
}

.feature-list__mark--yes {
	color: var(--success-color);
}

.feature-list__mark--no {
	color: var(--secondary-color);
}

/* Mission — "Kid-safe by design" philosophy statement
--------------------------------------------- */
.mission__body {
	color: var(--text-color);
	font-size: var(--font-size-md);
	margin: var(--space-2xl) auto 0;
	max-width: 46rem;
	text-align: center;
}

/* Blackout teaser band
--------------------------------------------- */
.blackout-teaser {
	background: var(--blackout-surface-color);
	color: var(--surface-color);
	overflow: hidden;
	position: relative;
}

.blackout-teaser::before {
	color: var(--surface-color);
	content: "BLACKOUT BLACKOUT BLACKOUT BLACKOUT BLACKOUT BLACKOUT BLACKOUT BLACKOUT BLACKOUT BLACKOUT BLACKOUT BLACKOUT BLACKOUT BLACKOUT BLACKOUT BLACKOUT BLACKOUT BLACKOUT";
	font-family: var(--heading-font);
	font-size: 4rem;
	font-weight: 700;
	inset: 0;
	letter-spacing: 0.375rem;
	line-height: 1.1;
	opacity: 0.03;
	pointer-events: none;
	position: absolute;
	transform: rotate(-4deg) scale(1.2);
}

.blackout-teaser__inner {
	align-items: center;
	display: grid;
	gap: var(--space-2xl);
	grid-template-columns: 1.3fr 1fr;
	position: relative;
}

.blackout-teaser__kicker {
	background: var(--blackout-glow-color);
	border: 1px solid var(--blackout-ring-color);
	border-radius: var(--border-radius-pill);
	color: var(--blackout-accent-color);
	display: inline-block;
	font-family: var(--heading-font);
	font-size: var(--font-size-sm);
	font-weight: 600;
	letter-spacing: var(--letter-spacing-wider);
	margin-bottom: var(--space-md);
	padding: 0.4375rem 1rem;
	text-transform: uppercase;
}

.blackout-teaser__title {
	color: var(--surface-color);
	font-size: var(--font-size-h2);
	font-weight: 600;
	letter-spacing: 0.02em;
	margin-top: var(--space-xs);
	margin-bottom: var(--space-xs);
	text-transform: uppercase;
}

.blackout-teaser__title em {
	color: var(--blackout-accent-color);
	font-style: normal;
}

.blackout-teaser__body {
	color: var(--blackout-muted-color);
	font-size: var(--font-size-md);
	margin-bottom: var(--space-lg);
	max-width: 32.5rem;
}

.blackout-teaser__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
	list-style: none;
	margin: var(--space-md) 0 0;
	padding: 0;
}

.blackout-teaser__chips li {
	border: 1px solid var(--blackout-border-color);
	border-radius: var(--border-radius-pill);
	color: var(--blackout-muted-color);
	font-size: var(--font-size-sm);
	font-weight: 800;
	letter-spacing: 0.03em;
	padding: 0.375rem var(--space-sm);
	text-transform: uppercase;
}

.blackout-teaser__visual {
	background: var(--gradient-blackout-glow);
	border: 1px solid var(--blackout-border-color);
	border-radius: 1.25rem;
	display: flex;
	justify-content: center;
	padding: var(--space-lg);
}

.blackout-teaser__visual img,
.blackout-teaser__visual svg {
	filter: var(--shadow-blackout-device);
	height: auto;
	width: 18.625rem;
}

.blackout-teaser__visual img {
	border-radius: var(--border-radius);
	object-fit: contain;
}

@media screen and (max-width: 60rem) {

	.blackout-teaser__inner {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.blackout-teaser__body {
		margin-inline: auto;
	}

	.blackout-teaser__chips {
		justify-content: center;
	}

	.blackout-teaser__visual {
		order: -1;
	}
}

/* Final call to action
--------------------------------------------- */
.final-cta {
	background: linear-gradient(120deg, var(--primary-color) 0%, var(--tertiary-color) 60%, var(--success-color) 130%);
	color: var(--surface-color);
	overflow: hidden;
	position: relative;
	text-align: center;
}

.final-cta::before {
	background: var(--gradient-final-cta-facets);
	content: "";
	inset: 0;
	position: absolute;
}

.final-cta__inner {
	position: relative;
}

.final-cta__title {
	color: var(--surface-color);
	font-size: var(--font-size-h1);
	font-weight: 600;
	margin-bottom: var(--space-sm);
}

.final-cta__body {
	font-size: var(--font-size-md);
	margin: 0 auto var(--space-2xl);
	max-width: 35rem;
}

/* Interior pages
--------------------------------------------- */

/* Interior page banner — breadcrumb, kicker, H1, subtitle
--------------------------------------------- */
.page-banner {
	background: linear-gradient(180deg, var(--hero-belt-color), var(--surface-alt-color));
	border-bottom: 1px solid var(--border-color);
	padding-block: var(--space-section);
	text-align: center;
}

.page-banner__crumbs {
	color: var(--muted-color);
	font-size: var(--font-size-base-sm);
	font-weight: 700;
	margin-bottom: var(--space-md);
}

.page-banner__crumbs a {
	color: inherit !important;
	text-decoration: none;
}

.page-banner__crumbs a:hover {
	color: var(--primary-color-dark);
}

.page-banner__kicker {
	background: var(--kicker-surface-color);
	border-radius: var(--border-radius-pill);
	color: var(--primary-color-dark);
	display: inline-block;
	font-family: var(--heading-font);
	font-size: var(--font-size-sm);
	font-weight: 600;
	letter-spacing: var(--letter-spacing-wider);
	margin-bottom: var(--space-md);
	padding: 0.4375rem 1rem;
	text-transform: uppercase;
}

.page-banner__title {
	font-size: var(--font-size-h1);
	font-weight: 600;
	margin-top: 0;
	margin-bottom: var(--space-sm);
}

.page-banner__subtitle {
	color: var(--muted-color);
	font-size: var(--font-size-md);
	margin-inline: auto;
	max-width: 40rem;
}

.page-banner {

	/* Dark variant — the Blackout page's "Page Style" setting (see
   * template-blackout.php). Reuses the same --blackout-* tokens as the
   * homepage's Blackout teaser and the header/footer --dark modifiers,
   * not new colours.
   */
}

.page-banner--dark {
	background: var(--blackout-surface-color);
	border-bottom-color: var(--blackout-border-color);
}

.page-banner--dark .page-banner__crumbs {
	color: var(--blackout-muted-color);
}

.page-banner--dark .page-banner__crumbs a:hover {
	color: var(--blackout-accent-color);
}

.page-banner--dark .page-banner__kicker {
	background: var(--blackout-chip-color);
	color: var(--blackout-accent-color);
}

.page-banner--dark .page-banner__title {
	color: var(--surface-color);
}

.page-banner--dark .page-banner__subtitle {
	color: var(--blackout-muted-color);
}

/* Page prose — narrow-column block-editor content on interior pages
 *
 * Shared by any page whose own post_content is rendered through
 * the_content() (About's intro, Shipping's delivery info, …). Not
 * page-specific despite the first page that needed it — see
 * template-about.php and template-shipping.php.
--------------------------------------------- */
.page-prose {
	color: var(--muted-color);
	font-size: var(--font-size-md);
	margin-inline: auto;
	max-width: 47.5rem;
}

.page-prose h2 {
	color: var(--heading-color);
	font-family: var(--heading-font);
	font-size: var(--font-size-prose-h2);
	font-weight: 600;
	margin: var(--space-2xl) 0 var(--space-sm);
}

.page-prose p {
	margin-bottom: var(--space-md);
}

.page-prose ul {
	margin: 0 0 var(--space-md) var(--space-lg);
}

.page-prose li {
	margin-bottom: var(--space-2xs);
}

.page-prose strong {
	color: var(--heading-color);
	font-weight: 800;
}

.page-prose table {
	border: 1px solid var(--border-color);
	border-collapse: collapse;
	border-radius: var(--border-radius-md);
	margin-top: var(--space-lg);
	overflow: hidden;
	width: 100%;
}

.page-prose th,
.page-prose td {
	border-bottom: 1px solid var(--border-color);
	font-size: var(--font-size-base);
	padding: var(--space-sm) var(--space-md);
	text-align: left;
}

.page-prose th {
	background: var(--surface-alt-color);
	color: var(--heading-color);
	font-family: var(--heading-font);
	font-weight: 600;
}

.page-prose td {
	color: var(--muted-color);
	font-weight: 600;
}

.page-prose tr:last-child td {
	border-bottom: 0;
}

/* About page — value cards, stats band, FAQ "read more" link
 *
 * The prose intro itself uses .page-prose (shared component, see
 * sass/components/page-prose/) rather than an About-specific class.
--------------------------------------------- */
.value-cards {
	display: grid;
	gap: var(--space-lg);
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	list-style: none;
	margin: var(--space-3xl) 0 0;
	padding: 0;
}

.value-cards__card {
	background: var(--surface-color);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	box-shadow: var(--shadow);
	padding: var(--space-2xl) var(--space-xl);
}

.value-cards__icon {
	align-items: center;
	background: var(--kicker-surface-color);
	border-radius: var(--border-radius-md);
	display: flex;
	font-size: var(--font-size-xl);
	height: 3.125rem;
	justify-content: center;
	margin-bottom: var(--space-md);
	width: 3.125rem;
}

.value-cards__title {
	color: var(--heading-color);
	font-size: var(--font-size-lg);
	font-weight: 600;
	margin-bottom: var(--space-xs);
}

.value-cards__body {
	color: var(--muted-color);
	font-size: var(--font-size-base);
	margin-bottom: 0;
}

.about-stats__grid {
	display: grid;
	gap: var(--space-lg);
	grid-template-columns: repeat(2, 1fr);
	text-align: center;
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}

@media screen and (min-width: 60rem) {

	.about-stats__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.about-stats__number {
	color: var(--primary-color-light);
	display: block;
	font-family: var(--heading-font);
	font-size: var(--font-size-h2);
	font-weight: 700;
}

.about-stats__label {
	color: var(--muted-on-dark-strong-color);
	font-size: var(--font-size-base);
	font-weight: 700;
}

.about-stats__press {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xl);
	justify-content: center;
	margin-top: var(--space-2xl);
}

.about-stats__press span {
	color: var(--muted-on-dark-color);
	font-family: var(--heading-font);
	font-size: var(--font-size-lg);
	font-weight: 600;
}

.about-faq-more {
	margin-top: var(--space-xl);
	text-align: center;
}

/* Contact page — form column + info cards
--------------------------------------------- */
.contact-grid {
	display: grid;
	gap: var(--space-2xl);
	grid-template-columns: 1.2fr 0.8fr;
}

@media screen and (max-width: 60rem) {

	.contact-grid {
		grid-template-columns: 1fr;
	}
}

/* Gravity Forms — restyles the plugin's own markup (.gform_wrapper /
 * .gfield / .ginput_container / .gform_button) to match the design's form
 * look. Scoped under .contact-form so it only applies to this one form.
--------------------------------------------- */
.contact-form {
	background: var(--surface-color);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	box-shadow: var(--shadow);
	padding: var(--space-2xl);
}

.contact-form .gform_fields {
	grid-row-gap: 1.25rem !important;
}

.contact-form .gfield_label {
	color: var(--heading-color) !important;
	display: block !important;
	font-size: var(--font-size-base-sm) !important;
	font-weight: 800 !important;
	margin-bottom: var(--space-2xs);
}

.contact-form .gfield_required {
	color: var(--muted-color) !important;
	font-weight: 400 !important;
}

.contact-form .ginput_container input,
.contact-form .ginput_container select,
.contact-form .ginput_container textarea {
	background: var(--surface-alt-color) !important;
	border: 1.5px solid var(--border-color) !important;
	border-radius: var(--border-radius-md) !important;
	color: var(--text-color);
	font-family: var(--body-font);
	font-size: 1rem;
	transition: unset;
	width: 100%;
	padding: 0.65rem;
	line-height: 1.5;
	height: 3rem !important;
	background-repeat: no-repeat;
	background-position: 100% 1rem;
}

.contact-form .ginput_container input:focus,
.contact-form .ginput_container select:focus,
.contact-form .ginput_container textarea:focus {
	background: var(--surface-color);
	border-color: var(--primary-color);
	outline: none;
}

.contact-form .ginput_container textarea {
	min-height: 8.125rem;
	resize: vertical;
}

.contact-form .gform_footer {
	margin-top: var(--space-sm);
}

.contact-form .gform_button {
	background: var(--secondary-color) !important;
	border: 0 !important;
	border-radius: var(--border-radius-pill) !important;
	box-shadow: var(--shadow-secondary) !important;
	color: var(--surface-color) !important;
	cursor: pointer;
	font-family: var(--heading-font) !important;
	font-size: 1.02rem !important;
	font-weight: 600 !important;
	padding: var(--space-md) var(--space-lg) !important;
	transition: background var(--transition) ease, transform var(--transition) ease !important;
	width: 100%;
}

.contact-form .gform_button:hover,
.contact-form .gform_button:focus-visible {
	background: var(--secondary-color-dark) !important;
	transform: translateY(-0.125rem);
}

.contact-form .gform_confirmation_message {
	background: var(--success-color);
	border-radius: var(--border-radius-md);
	color: var(--surface-color);
	font-weight: 700;
	padding: var(--space-md) var(--space-lg);
}

.contact-form .gform_description,
.contact-form .gfield_description {
	color: var(--muted-color);
	font-size: var(--font-size-base-sm);
}

.info-card {
	background: var(--surface-alt-color);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	margin-bottom: var(--space-md);
	padding: var(--space-xl) var(--space-lg);
}

.info-card__title {
	color: var(--heading-color);
	font-size: var(--font-size-lg);
	font-weight: 600;
	margin-bottom: var(--space-2xs);
}

.info-card__body {
	color: var(--muted-color);
	font-size: var(--font-size-base);
	margin-bottom: 0;
}

.info-card a {
	color: var(--primary-color-dark);
	font-weight: 800;
}

.info-card__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs) var(--space-sm);
}

.form-note {
	font-size: 0.82rem;
	color: var(--muted-color);
	margin-top: 8px;
}

/* Blackout page — product, "why Blackout" cards, compare table.
 *
 * Every section here defaults to the site's normal light styling
 * (standard tokens) and is overridden by the .blackout-page--dark
 * ancestor class — the Blackout page's "Page Style" setting (see
 * template-blackout.php) — using the same --blackout-* tokens already
 * established for the homepage's Blackout teaser
 * (components/blackout-teaser/) and the header/footer/page-banner --dark
 * modifiers. Card/grid shapes reuse the site's existing "grid of cards"
 * idiom (.why__grid / .value-cards / ul.products), not a new layout
 * system.
--------------------------------------------- */
.blackout-product__grid {
	align-items: center;
	display: grid;
	gap: var(--space-2xl);
	grid-template-columns: minmax(0, 1fr);
}

@media screen and (min-width: 752px) {

	.blackout-product__grid {
		grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
	}
}

.blackout-product__visual {
	background: var(--surface-alt-color);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-lg);
	display: flex;
	justify-content: center;
	padding: var(--space-2xl);
	position: relative;
}

@media screen and (min-width: 752px) {

	.blackout-product__visual {
		order: 1;
	}
}

.blackout-product__visual svg {
	height: auto;
	width: min(15.625rem, 60vw);
}

.blackout-product__visual img {
	border-radius: var(--border-radius);
	height: auto;
	max-height: 32.5rem;
	max-width: 100%;
	object-fit: contain;
	width: auto;
}

.blackout-product__badge {
	background: var(--secondary-color);
	border-radius: var(--border-radius-pill);
	color: var(--surface-color);
	font-family: var(--heading-font);
	font-size: var(--font-size-sm);
	font-weight: 600;
	left: var(--space-lg);
	padding: 0.4375rem var(--space-sm);
	position: absolute;
	text-transform: uppercase;
	top: var(--space-lg);
}

.blackout-product__price-row {
	align-items: baseline;
	display: flex;
	gap: var(--space-sm);
	margin: var(--space-md) 0 var(--space-sm);
}

.blackout-product__price {
	color: var(--heading-color);
	font-family: var(--heading-font);
	font-size: var(--font-size-price);
	font-weight: 700;
}

.blackout-product__price sup {
	font-size: var(--font-size-lg);
}

.blackout-product__price-note {
	color: var(--muted-color);
	font-size: var(--font-size-base-sm);
	font-weight: 700;
	text-transform: uppercase;
}

.blackout-product__specs {
	display: grid;
	gap: var(--space-sm) var(--space-lg);
	grid-template-columns: 1fr 1fr;
	list-style: none;
	margin: var(--space-lg) 0;
	padding: 0;
}

.blackout-product__specs li {
	align-items: center;
	display: flex;
	font-weight: 700;
	gap: var(--space-xs);
}

.blackout-product__yes {
	color: var(--blackout-accent-color) !important;
}

.blackout-product__no {
	color: var(--secondary-color-dark) !important;
}

.blackout-product__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
}

.blackout-product__stock-note {
	color: var(--muted-color);
	font-size: var(--font-size-base-sm);
	font-weight: 700;
	margin-top: var(--space-md);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.blackout-product__footnote {
	color: var(--muted-color);
	font-size: var(--font-size-xs);
	margin-top: var(--space-md);
}

.blackout-focus {
	background-color: var(--blackout-surface-bg2) !important;
}

.blackout-focus__grid {
	display: grid;
	gap: var(--space-lg);
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	list-style: none;
	margin: var(--space-3xl) 0 0;
	padding: 0;
}

.blackout-focus__card {
	background: var(--surface-color);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	box-shadow: var(--shadow);
	padding: var(--space-2xl) var(--space-xl);
	transition: transform var(--transition) ease, border-color var(--transition) ease;
}

.blackout-focus__card:hover {
	transform: translateY(-0.25rem);
}

.blackout-focus__icon {
	align-items: center;
	background: var(--kicker-surface-color);
	border-radius: var(--border-radius-md);
	display: flex;
	font-size: var(--font-size-xl);
	height: 3.25rem;
	justify-content: center;
	margin-bottom: var(--space-md);
	width: 3.25rem;
}

.blackout-focus__title {
	color: var(--heading-color);
	font-size: var(--font-size-lg);
	font-weight: 600;
	margin-bottom: var(--space-xs);
}

.blackout-focus__body {
	color: var(--muted-color);
	font-size: var(--font-size-base);
	margin-bottom: 0;
}

.blackout-compare {
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-lg);
	margin: var(--space-3xl) auto 0;
	max-width: 53.75rem;
	overflow: hidden;
	width: 100%;
}

.blackout-compare__row {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
}

.blackout-compare__row > div {
	border-bottom: 1px solid var(--border-color);
	font-size: var(--font-size-base);
	font-weight: 700;
	padding: var(--space-md) var(--space-lg);
}

.blackout-compare__row > div:not(:first-child) {
	text-align: center;
}

.blackout-compare__row:last-child > div {
	border-bottom: 0;
}

.blackout-compare__head {
	background: var(--surface-alt-color);
	font-family: var(--heading-font);
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
}

.blackout-compare__head .blackout-compare__highlight {
	color: var(--secondary-color-dark);
}

.blackout-compare__label {
	color: var(--muted-color);
	font-weight: 600;
}

.blackout-compare__yes {
	color: var(--blackout-accent-color) !important;
}

.blackout-compare__no {
	color: var(--secondary-color-dark) !important;
}

/* Dark variant — Page Style = Dark.
 *
 * .blackout-page--dark now wraps the *entire* page body, not just the
 * product/focus/compare sections (see template-blackout.php) — the FAQ and
 * Final CTA sections it reuses (section-faq.php, section-final-cta.php)
 * used to fall outside this wrapper and outside any Blackout-aware styling
 * at all, so Page Style: Dark left them either on the generic navy
 * .section--dark (FAQ, via a style neither page nor design intended) or the
 * site's default blue/teal/green gradient (Final CTA) — neither matches
 * design/blackout.html's black-and-neon look. Fixed at the wrapper level so
 * every descendant section, present or future, inherits it automatically
 * instead of needing its own one-off dark styling.
--------------------------------------------- */
.blackout-page--dark {
	background: var(--blackout-surface-color);
	color: var(--surface-color);
}

.blackout-page--dark .section {
	background: transparent;
}

.blackout-page--dark h1,
.blackout-page--dark h2,
.blackout-page--dark h3 {
	font-family: var(--blackout-display-font);
	font-weight: 400;
	letter-spacing: 0.01em;
	line-height: 1.02;
	text-transform: uppercase;
}

.blackout-page--dark .button {
	border-radius: var(--border-radius-blackout-btn);
	font-weight: 700;
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
}

.blackout-page--dark .button--outline {
	background: transparent;
	border-color: var(--blackout-border-color);
}

.blackout-page--dark .button--outline,
.blackout-page--dark .button--outline:visited {
	color: var(--surface-color);
}

.blackout-page--dark .button--outline:hover,
.blackout-page--dark .button--outline:focus-visible {
	border-color: var(--blackout-accent-color);
	color: var(--blackout-accent-color);
}

.blackout-page--dark .section__kicker {
	background: var(--blackout-glow-color);
	color: var(--blackout-accent-color);
}

.blackout-page--dark .section__title {
	color: var(--surface-color);
	font-size: var(--font-size-blackout-h2);
}

.blackout-page--dark .section__subtitle {
	color: var(--blackout-muted-color);
}

.blackout-page--dark .blackout-product__visual {
	background: var(--gradient-blackout-glow);
	border-color: var(--blackout-border-color);
}

.blackout-page--dark .blackout-product__badge {
	background: var(--blackout-accent-color);
	color: var(--blackout-ink-color);
}

.blackout-page--dark .blackout-product__price {
	color: var(--blackout-accent-color);
	font-family: var(--blackout-display-font);
	font-weight: 400;
}

.blackout-page--dark .blackout-product__price-note {
	color: var(--blackout-muted-color);
}

.blackout-page--dark .blackout-product__yes {
	color: var(--blackout-accent-color);
}

.blackout-page--dark .blackout-product__stock-note {
	color: var(--blackout-muted-color);
}

.blackout-page--dark .blackout-product__footnote {
	color: var(--blackout-muted-color);
}

.blackout-page--dark .blackout-focus__card {
	background: var(--blackout-chip-color);
	border-color: var(--blackout-border-color);
}

.blackout-page--dark .blackout-focus__card:hover {
	border-color: var(--blackout-accent-color);
}

.blackout-page--dark .blackout-focus__icon {
	background: var(--blackout-glow-color);
	border: 1px solid var(--blackout-ring-color);
}

.blackout-page--dark .blackout-focus__title {
	color: var(--surface-color);
}

.blackout-page--dark .blackout-focus__body {
	color: var(--blackout-muted-color);
}

.blackout-page--dark .blackout-compare {
	border-color: var(--blackout-border-color);
}

.blackout-page--dark .blackout-compare__row > div {
	border-bottom-color: var(--blackout-border-color);
	color: var(--surface-color);
}

.blackout-page--dark .blackout-compare__head {
	background: var(--blackout-chip-color);
}

.blackout-page--dark .blackout-compare__head .blackout-compare__highlight {
	color: var(--blackout-accent-color);
}

.blackout-page--dark .blackout-compare__label {
	color: var(--blackout-muted-color);
}

.blackout-page--dark .blackout-compare__yes {
	color: var(--blackout-accent-color);
}

.blackout-page--dark .blackout-compare__no {
	color: var(--secondary-color-dark);
}

.blackout-page--dark .section.faq {
	background-color: var(--blackout-surface-bg2);
}

.blackout-page--dark .schema-faq-section {
	background: var(--blackout-chip-color);
	border-color: var(--blackout-border-color);
}

.blackout-page--dark .schema-faq-section.is-open {
	border-color: var(--blackout-open-border-color);
}

.blackout-page--dark .schema-faq-question {
	color: var(--surface-color);
}

.blackout-page--dark .schema-faq-question::after {
	color: var(--blackout-accent-color);
}

.blackout-page--dark .schema-faq-answer {
	color: var(--blackout-muted-color);
}

.blackout-page--dark .final-cta {
	background: #000;
}

.blackout-page--dark .final-cta::before {
	background: var(--gradient-blackout-glow);
}

.blackout-page--dark .final-cta__title {
	font-size: var(--font-size-blackout-h2);
}

.blackout-page--dark .final-cta__title .final-cta__title-accent {
	color: var(--blackout-accent-color);
	text-shadow: 0 0 1.875rem rgba(61, 255, 87, 0.5);
}

.blackout-page--dark .final-cta .button--primary {
	background: var(--blackout-accent-color);
	box-shadow: var(--shadow-blackout);
	color: var(--blackout-ink-color);
}

.blackout-page--dark .final-cta .button--primary:hover,
.blackout-page--dark .final-cta .button--primary:focus-visible {
	background: var(--blackout-accent-dark-color);
	color: var(--blackout-ink-color);
}

@media screen and (max-width: 60rem) {

	.blackout-product__specs {
		grid-template-columns: 1fr;
	}

	.blackout-compare__row {
		grid-template-columns: 1.2fr 0.9fr 0.9fr;
	}

	.blackout-compare__row > div {
		font-size: var(--font-size-base-sm);
		padding: var(--space-sm) var(--space-md);
	}
}

/* Blackout hero — template-parts/sections/section-blackout-hero.php.
 *
 * Default (light) uses the site's normal tokens, same as every other
 * .blackout-page section; .blackout-page--dark (the wrapper this section
 * lives inside — see sass/components/blackout-page/_blackout-page.scss)
 * swaps it to design/blackout.html's black/neon treatment. Not `.section`
 * — this needs its own full-bleed watermark backdrop that a shared
 * .section--dark/--alt swap would fight.
--------------------------------------------- */
.blackout-hero {
	overflow: hidden;
	padding-block: var(--space-section);
	position: relative;
}

.blackout-hero__inner {
	align-items: center;
	display: grid;
	gap: var(--space-2xl);
	grid-template-columns: 1fr;
	position: relative;
	z-index: 1;
}

@media screen and (min-width: 60rem) {

	.blackout-hero__inner {
		grid-template-columns: 1fr 1.1fr;
	}
}

.blackout-hero__stamp {
	background: var(--surface-color);
	border-radius: var(--border-radius-sm);
	box-shadow: var(--shadow-sm);
	color: var(--heading-color);
	display: inline-block;
	font-family: var(--heading-font);
	font-size: 1.4rem;
	font-weight: 700;
	margin-bottom: var(--space-lg);
	padding: 0.375rem 1.375rem;
	text-transform: uppercase;
	transform: rotate(-2deg);
}

.blackout-hero__title {
	color: var(--heading-color);
	font-size: var(--font-size-blackout-hero);
	font-weight: 700;
	line-height: 1.05;
	margin: 0 0 var(--space-2xs);
}

.blackout-hero__title-accent {
	color: var(--secondary-color-dark);
}

.blackout-hero__tagline {
	color: var(--muted-color);
	font-family: var(--heading-font);
	font-size: var(--font-size-base);
	font-weight: 600;
	letter-spacing: var(--letter-spacing-wider);
	margin: var(--space-sm) 0 var(--space-lg);
	text-transform: uppercase;
}

.blackout-hero__subtitle {
	color: var(--muted-color);
	font-size: var(--font-size-md);
	max-width: 34rem;
}

.blackout-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
	margin-top: var(--space-xl);
}

.blackout-hero__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
	list-style: none;
	margin: var(--space-xl) 0 0;
	padding: 0;
}

.blackout-hero__chip {
	align-items: center;
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-pill);
	color: var(--muted-color);
	display: inline-flex;
	font-size: var(--font-size-sm);
	font-weight: 800;
	gap: 0.4375rem;
	padding: 0.375rem 0.9375rem;
	text-transform: uppercase;
}

.blackout-hero__chip.is-on {
	color: var(--success-color);
}

.blackout-hero__chips-note {
	color: var(--muted-color);
	font-size: var(--font-size-xs);
	margin: var(--space-sm) 0 0;
	max-width: 34rem;
}

.blackout-hero__visual {
	display: flex;
	justify-content: center;
	order: -1;
}

.blackout-hero__visual img,
.blackout-hero__visual svg {
	height: auto;
	width: min(22.75rem, 72vw);
}

.blackout-hero__visual img {
	border-radius: var(--border-radius-lg);
	object-fit: contain;
}

@media screen and (min-width: 60rem) {

	.blackout-hero__visual {
		order: 0;
	}
}

/* Dark variant — set on the ancestor .blackout-page--dark, not this
 * section directly, so it always tracks the page's own Page Style.
--------------------------------------------- */
.blackout-page--dark .blackout-hero {
	background: #000;
}

.blackout-page--dark .blackout-hero::before {
	color: var(--surface-color);
	content: "BLACKOUT BLACKOUT BLACKOUT BLACKOUT BLACKOUT BLACKOUT BLACKOUT BLACKOUT BLACKOUT BLACKOUT BLACKOUT BLACKOUT BLACKOUT BLACKOUT";
	font-family: var(--blackout-display-font);
	font-size: 5rem;
	inset: 0;
	letter-spacing: 0.25rem;
	line-height: 1.05;
	opacity: 0.03;
	overflow: hidden;
	pointer-events: none;
	position: absolute;
	transform: rotate(-4deg) scale(1.2);
	word-spacing: 0.5rem;
	z-index: 0;
}

.blackout-page--dark .blackout-hero .blackout-hero__stamp {
	background: var(--surface-color);
	box-shadow: 0.375rem 0.375rem 0 var(--blackout-accent-color);
	color: #000;
	font-family: var(--blackout-display-font);
	font-weight: 400;
}

.blackout-page--dark .blackout-hero .blackout-hero__title {
	color: var(--surface-color);
	font-family: var(--blackout-display-font);
	font-weight: 400;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.blackout-page--dark .blackout-hero .blackout-hero__title-accent {
	color: var(--blackout-accent-color);
	text-shadow: 0 0 1.875rem rgba(61, 255, 87, 0.45);
}

.blackout-page--dark .blackout-hero .blackout-hero__tagline {
	color: var(--blackout-muted-color);
}

.blackout-page--dark .blackout-hero .blackout-hero__subtitle {
	color: var(--blackout-muted-color);
}

.blackout-page--dark .blackout-hero .blackout-hero__chip {
	border-color: var(--blackout-border-color);
	color: var(--blackout-muted-color);
}

.blackout-page--dark .blackout-hero .blackout-hero__chip.is-on {
	border-color: var(--blackout-ring-color);
	color: var(--blackout-accent-color);
}

.blackout-page--dark .blackout-hero .blackout-hero__chips-note {
	color: var(--blackout-muted-color);
}

.blackout-page--dark .blackout-hero .blackout-hero__visual img,
.blackout-page--dark .blackout-hero .blackout-hero__visual svg {
	filter: drop-shadow(0 1.875rem 3.125rem rgba(61, 255, 87, 0.16));
}

@media (prefers-reduced-motion: no-preference) {

	.blackout-page--dark .blackout-hero .blackout-hero__visual img,
	.blackout-page--dark .blackout-hero .blackout-hero__visual svg {
		animation: freshdi-blackout-float 5s ease-in-out infinite;
	}
}

@keyframes freshdi-blackout-float {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-0.75rem);
	}
}

@media screen and (max-width: 60rem) {

	.blackout-hero__actions,
	.blackout-hero__chips {
		justify-content: center;
	}

	.blackout-hero__content {
		text-align: center;
	}

	.blackout-hero__subtitle,
	.blackout-hero__chips-note {
		margin-inline: auto;
	}
}

/* Blackout Pre-order Progress —
 * template-parts/sections/section-blackout-preorder.php.
 *
 * Default (light) uses the site's normal tokens, same as every other
 * .blackout-page section; .blackout-page--dark (see
 * sass/components/blackout-page/_blackout-page.scss) swaps it to
 * design/blackout.html's black-panel-and-neon treatment. The card's own
 * numbers come from real admin-editable post meta
 * (freshdi_get_blackout_preorder(), inc/blackout.php) — never a hardcoded
 * placeholder.
--------------------------------------------- */
.blackout-preorder__card {
	background: var(--surface-alt-color);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-lg);
	box-shadow: var(--shadow);
	margin: var(--space-2xl) auto 0;
	max-width: 51.25rem;
	padding: var(--space-2xl);
}

.blackout-preorder__top {
	align-items: flex-end;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
	justify-content: space-between;
	margin-bottom: var(--space-md);
}

.blackout-preorder__count {
	color: var(--heading-color);
	font-family: var(--heading-font);
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 700;
	line-height: 1;
}

.blackout-preorder__count-number {
	font-size: 1.2em;
}

.blackout-preorder__goal {
	color: var(--muted-color);
}

.blackout-preorder__goal-inline {
	color: var(--blackout-accent-dark-color) !important;
}

.blackout-preorder__goal {
	font-size: var(--font-size-sm);
	font-weight: 800;
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
}

.blackout-preorder__bar {
	background: var(--surface-color);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-pill);
	height: 1.25rem;
	overflow: hidden;
	position: relative;
}

.blackout-preorder__fill {
	background: linear-gradient(90deg, var(--primary-color-dark), var(--primary-color));
	border-radius: var(--border-radius-pill);
	height: 100%;
	position: relative;
	width: var(--freshdi-preorder-percent, 0%);
}

.blackout-preorder__pct {
	color: var(--surface-color);
	font-family: var(--heading-font);
	font-size: var(--font-size-xs);
	font-weight: 700;
	position: absolute;
	right: 0.875rem;
	top: 50%;
	transform: translateY(-50%);
}

.blackout-preorder__meta {
	display: grid;
	gap: var(--space-md);
	grid-template-columns: repeat(3, 1fr);
	margin-top: var(--space-xl);
}

.blackout-preorder__meta > div {
	background: var(--surface-color);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-md);
	padding: var(--space-sm) var(--space-md);
}

.blackout-preorder__meta strong {
	color: var(--heading-color);
	display: block;
	font-family: var(--heading-font);
	font-size: var(--font-size-base);
	margin-bottom: var(--space-3xs);
}

.blackout-preorder__meta small {
	color: var(--muted-color);
	font-size: var(--font-size-sm);
	font-weight: 600;
}

.blackout-preorder__cta {
	margin-top: var(--space-xl);
	text-align: center;
}

.blackout-preorder .section__header {
	max-width: 55rem;
}

/* Dark variant — set on the ancestor .blackout-page--dark, not this
 * section directly, so it always tracks the page's own Page Style.
--------------------------------------------- */
.blackout-page--dark .blackout-preorder {
	background: linear-gradient(180deg, #000, var(--blackout-chip-color));
}

.blackout-page--dark .blackout-preorder__card {
	background: var(--blackout-chip-color);
	border-color: var(--blackout-border-color);
	box-shadow: 0 1.25rem 3.75rem rgba(0, 0, 0, 0.5);
}

.blackout-page--dark .blackout-preorder__count {
	color: var(--surface-color);
	font-family: var(--blackout-display-font);
	font-weight: 400;
	text-transform: uppercase;
}

.blackout-page--dark .blackout-preorder__count-number {
	color: var(--blackout-accent-color);
}

.blackout-page--dark .blackout-preorder__goal,
.blackout-page--dark .blackout-preorder__goal-inline {
	color: var(--blackout-muted-color);
}

.blackout-page--dark .blackout-preorder__bar {
	background: #000;
	border-color: var(--blackout-border-color);
}

.blackout-page--dark .blackout-preorder__fill {
	background: linear-gradient(90deg, var(--blackout-accent-dark-color), var(--blackout-accent-color));
	box-shadow: 0 0 1.25rem rgba(61, 255, 87, 0.6);
}

.blackout-page--dark .blackout-preorder__pct {
	color: var(--blackout-ink-color);
}

.blackout-page--dark .blackout-preorder__meta > div {
	background: var(--overlay-light);
	border-color: var(--blackout-border-color);
}

.blackout-page--dark .blackout-preorder__meta strong {
	color: var(--surface-color);
}

.blackout-page--dark .blackout-preorder__meta small {
	color: var(--blackout-muted-color);
}

@media screen and (max-width: 60rem) {

	.blackout-preorder__meta {
		grid-template-columns: 1fr;
	}
}

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

.post,
.page {
	margin: 0;
}

.updated:not(.published) {
	display: none;
}

.entry-summary {
	margin: 1.5em 0 0;
}

.page-content,
.entry-content {
	margin-inline: auto;
	margin-top: var(--space-lg);
	max-width: var(--container-width);
	padding-inline: var(--container-gutter);
	width: 100%;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Blog — archive, home (blog index), single post
--------------------------------------------- */

/* Blog — post card grid + pagination.
 *
 * Shared by home.php (the blog index), archive.php (category/tag/date/
 * author archives), and single.php's Related Posts section
 * (template-parts/content-excerpt.php renders one .post-card; none of the
 * three duplicate the card markup). Same "grid of cards" idiom as
 * .why__grid / ul.products elsewhere in the theme, not a new design style.
--------------------------------------------- */
.no-results .page-header {
	margin-bottom: var(--space-lg);
	text-align: center;
}

.no-results .page-title {
	color: var(--heading-color);
	font-size: var(--font-size-h2);
	font-weight: 600;
}

.no-results .page-content {
	text-align: center;
}

.no-results .page-content p {
	color: var(--muted-color);
	margin-bottom: var(--space-lg);
}

.post-grid {
	display: grid;
	gap: var(--space-xl);
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	list-style: none;
	margin: var(--space-2xl) 0 0;
	padding: 0;
}

.grid-blog ul.wp-block-post-template {
	display: grid;
	gap: 1.5rem 1rem;
	grid-template-columns: repeat(3, 1fr);
	margin-left: 0;
	padding-left: 0;
}

@media (max-width: 64rem) {

	.grid-blog ul.wp-block-post-template {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 40rem) {

	.grid-blog ul.wp-block-post-template {
		grid-template-columns: 1fr;
	}
}

.post-card {
	background: var(--surface-color);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	box-shadow: var(--shadow);
	overflow: hidden;
	transition: transform var(--transition) ease, box-shadow var(--transition) ease;
}

.post-card:hover,
.post-card:focus-within {
	box-shadow: var(--shadow-product);
	transform: translateY(-0.25rem);
}

.post-card__link {
	color: inherit;
	display: block;
	text-decoration: none;
}

.post-card__image {
	aspect-ratio: 16/10;
	background: var(--surface-alt-color);
	overflow: hidden;
}

.post-card__image img {
	display: block;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition) ease;
	width: 100%;
}

.post-card:hover .post-card__image img,
.post-card:focus-within .post-card__image img {
	transform: scale(1.04);
}

.post-card__body {
	padding: var(--space-lg) var(--space-xl) var(--space-xl);
}

.post-card__category {
	background: var(--kicker-surface-color);
	border-radius: var(--border-radius-pill);
	color: var(--primary-color-dark);
	display: inline-block;
	font-size: var(--font-size-xs);
	font-weight: 700;
	letter-spacing: var(--letter-spacing-wide);
	margin-bottom: var(--space-sm);
	padding: 0.25rem var(--space-sm);
	text-transform: uppercase;
}

.post-card__title {
	color: var(--heading-color);
	font-size: var(--font-size-lg);
	font-weight: 600;
	margin: 0 0 var(--space-xs);
}

.post-card__meta {
	color: var(--muted-color);
	font-size: var(--font-size-base-sm);
	margin-bottom: var(--space-sm);
}

.post-card__excerpt {
	color: var(--muted-color);
	font-size: var(--font-size-base);
	margin-bottom: 0;
}

/* Pagination — the_posts_pagination() default class names.
--------------------------------------------- */
.pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
	justify-content: center;
	margin-top: var(--space-3xl);
}

.pagination .page-numbers {
	align-items: center;
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-pill);
	color: var(--heading-color);
	display: inline-flex;
	font-weight: 600;
	height: 2.75rem;
	justify-content: center;
	min-width: 2.75rem;
	padding: 0 var(--space-sm);
	text-decoration: none;
	transition: background var(--transition-fast) ease, color var(--transition-fast) ease;
}

.pagination .page-numbers:hover,
.pagination .page-numbers:focus-visible {
	background: var(--surface-alt-color);
}

.pagination .page-numbers.current {
	background: var(--primary-color);
	border-color: var(--primary-color);
	color: var(--surface-color);
}

.pagination .page-numbers.dots {
	border-color: transparent;
}

/* Single post — header, featured image, prev/next navigation, related posts.
 *
 * Related posts reuse .post-grid / .post-card (sass/components/blog/_blog.scss)
 * — not a second card style.
--------------------------------------------- */
.single-post__header {
	padding-block: var(--space-3xl) var(--space-xl);
	text-align: center;
}

.single-post__header .page-banner__crumbs {
	margin-bottom: var(--space-md);
}

.single-post__category {
	background: var(--kicker-surface-color);
	border-radius: var(--border-radius-pill);
	color: var(--primary-color-dark);
	display: inline-block;
	font-size: var(--font-size-sm);
	font-weight: 700;
	letter-spacing: var(--letter-spacing-wide);
	margin-bottom: var(--space-md);
	padding: 0.4375rem 1rem;
	text-decoration: none;
	text-transform: uppercase;
	transition: background var(--transition-fast) ease;
}

.single-post__category:hover,
.single-post__category:focus-visible {
	background: var(--primary-color-light);
}

.single-post__title {
	color: var(--heading-color);
	font-size: var(--font-size-h1);
	font-weight: 700;
	margin: 0 auto var(--space-md);
	max-width: 45rem;
}

.single-post__meta {
	color: var(--muted-color);
	font-size: var(--font-size-base-sm);
	font-weight: 600;
	padding-bottom: var(--space-xl);
	border-bottom: 1px solid var(--border-color);
	margin-inline: auto;
	max-width: 47.5rem;
}

.single-post__thumbnail {
	margin-bottom: var(--space-2xl);
}

.single-post__thumbnail .container {
	max-width: 47.5rem;
}

.single-post__thumbnail img {
	background: var(--surface-alt-color);
	border-radius: var(--border-radius-lg);
	box-shadow: var(--shadow);
	display: block;
	max-height: 26rem;
	object-fit: contain;
	width: 100%;
}

/* Prev / next navigation — the_post_navigation()'s default markup,
 * .nav-subtitle / .nav-title already chosen in single.php's call.
--------------------------------------------- */
.post-navigation {
	border-top: 1px solid var(--border-color);
	display: grid;
	gap: var(--space-lg);
	grid-template-columns: 1fr;
	margin-top: var(--space-3xl);
	padding-top: var(--space-2xl);
}

.post-navigation .nav-previous a,
.post-navigation .nav-next a {
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-md);
	color: inherit;
	display: block;
	padding: var(--space-md) var(--space-lg);
	text-decoration: none;
	transition: border-color var(--transition-fast) ease, box-shadow var(--transition-fast) ease;
}

.post-navigation .nav-previous a:hover,
.post-navigation .nav-previous a:focus-visible,
.post-navigation .nav-next a:hover,
.post-navigation .nav-next a:focus-visible {
	border-color: var(--primary-color);
	box-shadow: var(--shadow-sm);
}

.post-navigation .nav-next {
	text-align: right;
}

.post-navigation .nav-subtitle {
	color: var(--muted-color);
	display: block;
	font-size: var(--font-size-xs);
	font-weight: 700;
	letter-spacing: var(--letter-spacing-wide);
	margin-bottom: var(--space-3xs);
	text-transform: uppercase;
}

.post-navigation .nav-title {
	color: var(--heading-color);
	font-weight: 600;
}

@media screen and (max-width: 60rem) {

	.post-navigation {
		grid-template-columns: 1fr;
	}

	.post-navigation .nav-next {
		text-align: left;
	}
}

/* Related posts section itself needs no dedicated rule — its heading
 * markup reuses .section__header / .section__title
 * (sass/layouts/_section.scss), already centred by default, same as
 * every other section on the site (Why Kidcomms, FAQ, …).
--------------------------------------------- */

/* 404
--------------------------------------------- */

/* 404 — styles WordPress's own HTML5 search form output
 * (add_theme_support('html5', ['search-form'])'s default
 * .search-form / .search-field / .search-submit markup — no
 * searchform.php override) plus the two CTA buttons back into the site.
--------------------------------------------- */
.error-404__search {
	margin: 0 auto var(--space-2xl);
	max-width: 30rem;
}

.error-404__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
	justify-content: center;
}

.search-form {
	align-items: stretch;
	display: flex;
	gap: var(--space-sm);
}

.search-form label {
	flex: 1 1 auto;
}

.search-field {
	background: var(--surface-alt-color);
	border: 1.5px solid var(--border-color);
	border-radius: var(--border-radius-md);
	font-family: var(--body-font);
	font-size: var(--font-size-base);
	height: 3.25rem;
	padding: 0 var(--space-md);
	width: 100%;
}

.search-submit {
	background: var(--primary-color);
	border: 0;
	border-radius: var(--border-radius-md);
	color: var(--surface-color);
	cursor: pointer;
	flex: 0 0 auto;
	font-family: var(--heading-font);
	font-weight: 600;
	padding: 0 var(--space-lg);
	transition: background var(--transition) ease;
}

.search-submit:hover,
.search-submit:focus-visible {
	background: var(--primary-color-dark);
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Light pass so #comments doesn't look like unstyled scaffolding right
 * below single.php's Related Posts section — comments.php's own markup
 * (WordPress's default wp_list_comments()/comment_form() output) is
 * unchanged, only styled here.
--------------------------------------------- */
.comments-area {
	margin: 0 auto;
	max-width: 47.5rem;
	padding-top: var(--space-2xl);
}

.comments-title {
	color: var(--heading-color);
	font-family: var(--heading-font);
	font-size: var(--font-size-h2);
	font-weight: 600;
	margin-bottom: var(--space-lg);
}

.comment-list {
	list-style: none;
	margin: 0 0 var(--space-xl);
	padding: 0;
}

.comment-list .children {
	list-style: none;
	margin: 0;
	padding-left: var(--space-xl);
}

.comment-body {
	border-bottom: 1px solid var(--border-color);
	padding: var(--space-lg) 0;
}

.comment-author {
	align-items: center;
	display: flex;
	gap: var(--space-sm);
	margin-bottom: var(--space-xs);
}

.comment-author .avatar {
	border-radius: var(--border-radius-pill);
	display: block;
	height: 2.75rem;
	width: 2.75rem;
}

.comment-author .fn {
	color: var(--heading-color);
	font-style: normal;
	font-weight: 700;
}

.comment-metadata {
	color: var(--muted-color);
	font-size: var(--font-size-base-sm);
}

.comment-metadata a {
	color: inherit;
}

.comment-content p {
	margin-bottom: var(--space-sm);
}

.reply {
	margin-top: var(--space-sm);
}

.reply a {
	color: var(--primary-color-dark);
	font-size: var(--font-size-base-sm);
	font-weight: 700;
}

#respond {
	background: var(--surface-alt-color);
	border-radius: var(--border-radius-md);
	padding: var(--space-xl);
}

.comment-reply-title {
	color: var(--heading-color);
	font-family: var(--heading-font);
	font-size: var(--font-size-lg);
	font-weight: 600;
	margin-bottom: var(--space-md);
}

.comment-form p {
	margin-bottom: var(--space-md);
}

.comment-form label {
	color: var(--heading-color);
	display: block;
	font-size: var(--font-size-base-sm);
	font-weight: 700;
	margin-bottom: var(--space-2xs);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	background: var(--surface-color);
	border: 1.5px solid var(--border-color);
	border-radius: var(--border-radius-md);
	font-family: var(--body-font);
	font-size: var(--font-size-base);
	padding: var(--space-sm) var(--space-md);
	width: 100%;
}

.comment-form textarea {
	min-height: 8rem;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/* Popup
--------------------------------------------- */
.freshdi-popup,
.freshdi-popup *,
.freshdi-popup *::before,
.freshdi-popup *::after {
	box-sizing: border-box;
}

.freshdi-popup {
	display: grid;
	inset: 0;
	padding: 1.5rem;
	place-items: center;
	position: fixed;
	z-index: 999;
}

.freshdi-popup[hidden] {
	display: none;
}

.freshdi-popup__backdrop {
	background: rgba(0, 0, 0, 0.6);
	inset: 0;
	opacity: 0;
	position: absolute;
	transition: opacity 0.2s ease;
}

.freshdi-popup__dialog {
	background: #fff;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
	max-height: min(85vh, 100%);
	max-width: 40rem;
	opacity: 0;
	overflow: auto;
	padding: 2rem;
	position: relative;
	transform: scale(0.96);
	transition: opacity 0.2s ease, transform 0.2s ease;
	width: 100%;
}

.freshdi-popup__content img {
	height: auto;
	max-width: 100%;
}

.freshdi-popup__content > :last-child {
	margin-bottom: 0;
}

.freshdi-popup.is-open .freshdi-popup__backdrop {
	opacity: 1;
}

.freshdi-popup.is-open .freshdi-popup__dialog {
	opacity: 1;
	transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {

	.freshdi-popup__backdrop,
	.freshdi-popup__dialog {
		transition: none;
	}
}

.freshdi-popup__close {
	align-items: center;
	appearance: none;
	background: none;
	border: 0;
	border-radius: 50%;
	color: #182230;
	cursor: pointer;
	display: flex;
	font-size: 1.75rem;
	height: 44px;
	justify-content: center;
	line-height: 1;
	position: absolute;
	right: 0;
	top: 0;
	width: 44px;
}

.freshdi-popup__close:hover,
.freshdi-popup__close:focus-visible {
	background: rgba(0, 0, 0, 0.05);
}

.freshdi-popup__close:focus-visible {
	outline: 2px solid #e3edf4;
	outline-offset: 2px;
}

/* Body scroll lock while a popup is open. */
html.popup-open {
	overflow: hidden;
}

@media (max-width: 47.99em) {

	.freshdi-popup {
		padding: 0;
	}

	.freshdi-popup__dialog {
		inset: 0.75rem;
		max-width: none;
		max-height: none;
		position: absolute;
		width: auto;
	}
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f4f9fc;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #1489bd;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Text scale
--------------------------------------------- */

/* Text scale
--------------------------------------------- */
html {
	font-size: calc(100% * var(--text-scale-factor, 1));
}

.text-scale-control {
	align-items: center;
	display: flex;
	gap: 4px;
}

.text-scale-control button {
	background: transparent;
	border: 1px solid currentColor;
	border-radius: 3px;
	cursor: pointer;
	line-height: 1;
	padding: 4px 8px;
}

.text-scale-control button:hover,
.text-scale-control button:focus {
	background: rgba(0, 0, 0, 0.05);
}

.text-scale-control [data-text-scale="decrease"] {
	font-size: 0.75rem;
}

.text-scale-control [data-text-scale="increase"] {
	font-size: 1rem;
}

.text-scale-control [data-text-scale="reset"] {
	font-size: 0.75rem;
}

/* Animate
--------------------------------------------- */

/* Animate
--------------------------------------------- */
.animate {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity var(--animate-duration, 0.6s) ease, transform var(--animate-duration, 0.6s) ease;
	transition-delay: var(--animate-delay, 0s);
}

.animate.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {

	.animate {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}