/**
 * Echoes of Fun — core stylesheet
 * 1.  Design tokens
 * 2.  Reset & base
 * 3.  Utilities & helpers
 * 4.  Buttons, pills, decorations
 * 5.  Header & navigation
 * 6.  Mobile nav, search panel, overlay
 * 7.  Home sections
 * 8.  Blog, archives, single
 * 9.  Widgets, comments, forms
 * 10. Footer
 * 11. Blocks
 * 12. Responsive
 */

/* =========================================================================
   1. DESIGN TOKENS  (overridden by the Customizer inline vars)
   ========================================================================= */
:root {
	--eof-navy: #123c7e;
	--eof-navy-dark: #0e2f63;
	--eof-pink: #fb2e8f;
	--eof-pink-dark: #d92679;
	--eof-blue: #1e86e8;
	--eof-blue-dark: #1a73c7;
	--eof-green: #12b981;
	--eof-orange: #f97316;
	--eof-cream: #fff7ec;
	--eof-ice: #dceefc;
	--eof-body: #4b5a72;
	--eof-muted: #7c8899;
	--eof-white: #fff;
	--eof-border: rgba(18, 60, 126, 0.12);

	--eof-radius: 28px;
	--eof-radius-lg: 40px;
	--eof-radius-pill: 999px;

	--eof-shadow-sm: 0 6px 18px rgba(18, 60, 126, 0.07);
	--eof-shadow: 0 18px 44px rgba(18, 60, 126, 0.1);
	--eof-shadow-lg: 0 28px 70px rgba(18, 60, 126, 0.16);
	--eof-shadow-pink: 0 14px 30px rgba(251, 46, 143, 0.34);

	--eof-container: 1240px;
	--eof-gutter: 24px;
	--eof-font-heading: "Baloo 2", system-ui, sans-serif;
	--eof-font-body: "Nunito", system-ui, sans-serif;
	--eof-fs-base: 17px;

	--eof-section-y: clamp(56px, 7vw, 104px);
	--eof-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--eof-header-h: 84px;
}

/* =========================================================================
   2. RESET & BASE
   ========================================================================= */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--eof-header-h) + 20px);
}

body {
	margin: 0;
	font-family: var(--eof-font-body);
	font-size: var(--eof-fs-base);
	line-height: 1.72;
	color: var(--eof-body);
	background: var(--eof-white);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

body.eof-no-scroll {
	overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 0.5em;
	font-family: var(--eof-font-heading);
	font-weight: 800;
	line-height: 1.12;
	color: var(--eof-navy);
	letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
h4 { font-size: 1.15rem; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a {
	color: var(--eof-blue);
	text-decoration: none;
	transition: color 0.22s var(--eof-ease);
}

a:hover,
a:focus { color: var(--eof-pink); }

img,
svg,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

ul, ol { padding-left: 1.25em; }

blockquote {
	margin: 2em 0;
	padding: 1.4em 1.8em;
	border-left: 5px solid var(--eof-pink);
	background: var(--eof-cream);
	border-radius: 0 var(--eof-radius) var(--eof-radius) 0;
	font-size: 1.1em;
	color: var(--eof-navy);
	font-weight: 600;
}

code, pre {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.92em;
}

pre {
	padding: 1.2em;
	background: var(--eof-navy);
	color: #e9f1ff;
	border-radius: var(--eof-radius);
	overflow-x: auto;
}

table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1.5em;
}

th, td {
	padding: 0.85em 1em;
	border-bottom: 1px solid var(--eof-border);
	text-align: left;
}

th { color: var(--eof-navy); font-weight: 700; }

hr {
	border: 0;
	height: 2px;
	background: var(--eof-border);
	margin: 2.5em 0;
}

:focus-visible {
	outline: 3px solid var(--eof-pink);
	outline-offset: 3px;
	border-radius: 6px;
}

::selection {
	background: var(--eof-pink);
	color: #fff;
}

/* =========================================================================
   3. UTILITIES
   ========================================================================= */
.container {
	width: 100%;
	max-width: var(--eof-container);
	margin-inline: auto;
	padding-inline: var(--eof-gutter);
}

.section {
	position: relative;
	padding-block: var(--eof-section-y);
}

.section__title { margin-bottom: 0.45em; }

.section__text {
	color: var(--eof-body);
	max-width: 46ch;
	margin-bottom: 1.8em;
}

.section__head {
	text-align: center;
	margin-bottom: 3rem;
}

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

.skip-link:focus {
	clip: auto;
	clip-path: none;
	height: auto;
	width: auto;
	z-index: 9999;
	top: 12px;
	left: 12px;
	padding: 12px 22px;
	background: var(--eof-pink);
	color: #fff;
	border-radius: var(--eof-radius-pill);
	font-weight: 700;
}

.bg-pink   { background: var(--eof-pink); }
.bg-blue   { background: var(--eof-blue); }
.bg-green  { background: var(--eof-green); }
.bg-orange { background: var(--eof-orange); }
.bg-navy   { background: var(--eof-navy); }

.eof-admin-note {
	margin-top: 1rem;
	font-size: 0.85rem;
	color: var(--eof-muted);
	font-style: italic;
	text-align: center;
}

/* =========================================================================
   4. BUTTONS, PILLS, DECOR
   ========================================================================= */
.btn,
button.btn,
input[type="submit"],
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 30px;
	border: 2px solid transparent;
	border-radius: var(--eof-radius-pill);
	font-family: var(--eof-font-heading);
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	text-align: center;
	transition: transform 0.28s var(--eof-ease), box-shadow 0.28s var(--eof-ease),
		background-color 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}

.btn--primary,
input[type="submit"],
.wp-block-button__link {
	background: var(--eof-pink);
	color: #fff;
	box-shadow: var(--eof-shadow-pink);
}

.btn--primary:hover,
.btn--primary:focus,
input[type="submit"]:hover {
	background: var(--eof-pink-dark);
	color: #fff;
	transform: translateY(-3px);
	box-shadow: 0 20px 38px rgba(251, 46, 143, 0.4);
}

.btn--outline {
	background: transparent;
	color: var(--eof-navy);
	border-color: var(--eof-navy);
}

.btn--outline:hover,
.btn--outline:focus {
	background: var(--eof-navy);
	color: #fff;
	transform: translateY(-3px);
	box-shadow: var(--eof-shadow);
}

.btn--white {
	background: #fff;
	color: var(--eof-navy);
	box-shadow: var(--eof-shadow);
}

.btn--white:hover { transform: translateY(-3px); color: var(--eof-pink); }

.btn__arrow {
	transition: transform 0.3s var(--eof-ease);
	flex: none;
}

.btn:hover .btn__arrow { transform: translateX(5px); }

.eyebrow-pill {
	display: inline-block;
	padding: 8px 20px;
	margin-bottom: 1.1rem;
	background: var(--eof-ice);
	color: var(--eof-navy);
	border-radius: var(--eof-radius-pill);
	font-family: var(--eof-font-heading);
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* Decorative blobs */
.eof-decor {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 0;
}

.eof-decor .blob {
	position: absolute;
	display: block;
	opacity: 0.85;
	will-change: transform;
}

/* Translucent rubber: broad reflections and softly shaded, curved edges. */
.eof-decor--hero .blob,
.howitworks .step__icon::before {
	background-color: var(--blob-color);
	background-image:
		radial-gradient(ellipse at 28% 22%, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.24) 19%, transparent 48%),
		radial-gradient(ellipse at 74% 80%, rgba(255, 255, 255, 0.28) 0%, transparent 44%),
		radial-gradient(ellipse at 42% 36%, transparent 38%, rgba(38, 24, 62, 0.16) 100%);
	box-shadow:
		inset 3px 4px 8px rgba(255, 255, 255, 0.48),
		inset -8px -12px 18px rgba(38, 24, 62, 0.17),
		inset 0 0 3px rgba(255, 255, 255, 0.65),
		0 8px 18px rgba(38, 24, 62, 0.06);
	opacity: 0.68;
}

.eof-decor--hero .blob::before,
.howitworks .step__icon::after {
	content: "";
	position: absolute;
	inset: 12% 26% 53% 15%;
	border-radius: 50%;
	background: radial-gradient(ellipse, rgba(255, 255, 255, 0.55), transparent 70%);
	transform: rotate(-28deg);
}

.eof-decor--hero .blob--1 {
	top: -60px; right: 6%;
	width: 190px; height: 150px;
	--blob-color: #ffc93c;
	border-radius: 0 0 60% 60% / 0 0 100% 100%;
	animation: eof-float 9s var(--eof-ease) infinite;
}

.eof-decor--hero .blob--2 {
	top: 120px; left: -70px;
	width: 150px; height: 160px;
	--blob-color: var(--eof-green);
	border-radius: 60% 40% 45% 55% / 55% 45% 55% 45%;
	animation: eof-float 11s var(--eof-ease) infinite reverse;
}

.eof-decor--hero .blob--3 {
	top: 60px; left: 2%;
	width: 120px; height: 110px;
	--blob-color: #ffb020;
	border-radius: 55% 45% 60% 40% / 50% 55% 45% 50%;
	opacity: 0.6;
}

.eof-decor--hero .blob--4 {
	bottom: 60px; right: -50px;
	width: 180px; height: 190px;
	--blob-color: #a855f7;
	border-radius: 50% 50% 55% 45% / 60% 40% 60% 40%;
	animation: eof-float 13s var(--eof-ease) infinite;
}

.eof-decor--cta { container-type: size; }

/* Soft keepsakes drifting from below the banner to above its clipped edge. */
.eof-decor--cta .blob {
	top: 100%;
	width: clamp(95px, 12vw, 170px);
	aspect-ratio: 1;
	background: url('../images/pillow-sunshine.png') center / contain no-repeat;
	border-radius: 0;
	opacity: 0;
	filter: drop-shadow(0 8px 12px rgba(14, 47, 99, .12));
	animation: eof-cta-pillow-rise 18s linear infinite;
}

.eof-decor--cta .blob--1 { left: 8%; animation-delay: -7s; }
.eof-decor--cta .blob--2 {
	left: 43%;
	background-image: url('../images/pillow-character.png');
	animation-duration: 28s;
	animation-delay: -18s;
}
.eof-decor--cta .blob--3 { left: 68%; width: clamp(80px, 10vw, 140px); animation-duration: 38s; animation-delay: -3s; }
.eof-decor--cta .blob--4 {
	right: 3%;
	background-image: url('../images/pillow-character.png');
	animation-duration: 23s;
	animation-delay: -14s;
}

@keyframes eof-cta-pillow-rise {
	0% { opacity: 0; transform: translate3d(-10px, 0, 0) rotate(-12deg); }
	12% { opacity: .65; }
	50% { transform: translate3d(14px, calc(-50cqh - 50%), 0) rotate(7deg); }
	85% { opacity: .65; }
	100% { opacity: 0; transform: translate3d(-6px, calc(-100cqh - 100%), 0) rotate(-6deg); }
}

.eof-decor--section .blob--1 {
	top: 8%; right: -60px;
	width: 140px; height: 140px;
	background: var(--eof-ice);
	border-radius: 50%;
}

.eof-decor--section .blob--2 {
	bottom: 10%; left: -70px;
	width: 160px; height: 160px;
	background: var(--eof-cream);
	border-radius: 50%;
}

.eof-decor--section .blob--3,
.eof-decor--section .blob--4 { display: none; }

@keyframes eof-float {
	0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
	50%      { transform: translate3d(0, -20px, 0) rotate(6deg); }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Wave dividers */
.eof-wave {
	position: absolute;
	left: 0;
	width: 100%;
	line-height: 0;
	pointer-events: none;
	z-index: 1;
}

.eof-wave--top { top: -1px; }
.eof-wave--bottom { bottom: -1px; transform: scaleY(-1); }
.eof-wave svg { width: 100%; height: 90px; display: block; }

/* =========================================================================
   5. HEADER & NAVIGATION
   ========================================================================= */
.topbar {
	background: var(--eof-topbar-bg, var(--eof-navy));
	color: #fff;
	font-size: 0.88rem;
	text-align: center;
	padding: 9px 0;
}

.topbar__text { margin: 0; font-weight: 600; }
.topbar a { color: #fff; text-decoration: underline; }

.site-header {
	position: relative;
	z-index: 100;
	background: #fff;
	transition: box-shadow 0.3s ease, padding 0.3s ease;
}

body.has-sticky-header .site-header {
	position: sticky;
	top: 0;
}

.site-header.is-stuck {
	box-shadow: 0 6px 26px rgba(18, 60, 126, 0.1);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	min-height: var(--eof-header-h);
	padding-block: 12px;
}

.site-branding { flex: none; }

.site-branding img,
.custom-logo {
	max-height: 118px;
	width: auto;
}

.site-title {
	margin: 0;
	font-size: 1.6rem;
	line-height: 1.1;
}

.site-title a { color: var(--eof-navy); }
.site-title a:hover { color: var(--eof-pink); }

.site-description {
	margin: 2px 0 0;
	font-size: 0.8rem;
	color: var(--eof-muted);
}

/* Primary menu */
.main-navigation { flex: 1 1 auto; }

.primary-menu {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.primary-menu li { position: relative; }

.primary-menu > li > a,
.primary-menu > li > .menu-link {
	position: relative;
	display: inline-block;
	padding: 10px 16px;
	font-family: var(--eof-font-heading);
	font-size: 1rem;
	font-weight: 600;
	color: var(--eof-navy);
	white-space: nowrap;
}

.primary-menu > li > a::after {
	content: "";
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 2px;
	height: 3px;
	border-radius: 3px;
	background: var(--eof-blue);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.3s var(--eof-ease);
}

.primary-menu > li:hover > a::after,
.primary-menu > li.current-menu-item > a::after,
.primary-menu > li.current_page_item > a::after,
.primary-menu > li.current-menu-parent > a::after,
.primary-menu > li.current-menu-ancestor > a::after {
	transform: scaleX(1);
}

.primary-menu > li:hover > a { color: var(--eof-blue); }

/* Dropdowns */
.primary-menu .sub-menu {
	position: absolute;
	top: calc(100% + 14px);
	left: 50%;
	transform: translateX(-50%) translateY(10px);
	min-width: 230px;
	margin: 0;
	padding: 12px;
	list-style: none;
	background: #fff;
	border-radius: 22px;
	box-shadow: var(--eof-shadow);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.26s var(--eof-ease), transform 0.26s var(--eof-ease), visibility 0.26s;
	z-index: 40;
}

.primary-menu .sub-menu::before {
	content: "";
	position: absolute;
	top: -14px;
	left: 0;
	right: 0;
	height: 14px;
}

.primary-menu li:hover > .sub-menu,
.primary-menu li:focus-within > .sub-menu,
.primary-menu li.is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.primary-menu .sub-menu .sub-menu {
	top: 0;
	left: calc(100% + 10px);
	transform: translateY(10px);
}

.primary-menu .sub-menu li:hover > .sub-menu {
	transform: translateY(0);
}

.primary-menu .sub-menu a {
	display: block;
	padding: 10px 16px;
	border-radius: 14px;
	font-weight: 600;
	font-size: 0.96rem;
	color: var(--eof-navy);
}

.primary-menu .sub-menu a:hover {
	background: var(--eof-ice);
	color: var(--eof-blue);
}

.primary-menu .submenu-toggle {
	display: none;
}

.primary-menu .has-dropdown > a { padding-right: 30px; }

.primary-menu .has-dropdown > a::before {
	content: "";
	position: absolute;
	right: 12px;
	top: 50%;
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-70%) rotate(45deg);
	opacity: 0.6;
}

/* Header actions */
.header-actions {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: none;
}

.header-action {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--eof-navy);
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.22s ease, color 0.22s ease, transform 0.22s var(--eof-ease);
}

.header-action:hover,
.header-action:focus {
	background: var(--eof-ice);
	color: var(--eof-blue);
	transform: translateY(-2px);
}

.header-action--cart .cart-count {
	position: absolute;
	top: 3px;
	right: 1px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	background: var(--eof-pink);
	color: #fff;
	border: 2px solid #fff;
	border-radius: var(--eof-radius-pill);
	font-family: var(--eof-font-heading);
	font-size: 0.68rem;
	font-weight: 700;
	line-height: 17px;
	text-align: center;
}

.header-action--burger { display: none; }

/* Search panel */
.search-panel {
	border-top: 1px solid var(--eof-border);
	background: #fff;
	padding: 22px 0;
	animation: eof-fade-down 0.3s var(--eof-ease);
}

.search-panel .container {
	display: flex;
	align-items: center;
	gap: 14px;
}

.search-panel .search-form { flex: 1; }

.search-panel__close {
	flex: none;
	width: 42px;
	height: 42px;
	border: 0;
	border-radius: 50%;
	background: var(--eof-cream);
	color: var(--eof-navy);
	display: grid;
	place-items: center;
	cursor: pointer;
}

@keyframes eof-fade-down {
	from { opacity: 0; transform: translateY(-10px); }
	to   { opacity: 1; transform: none; }
}

/* Search form */
.search-form {
	position: relative;
	display: flex;
	align-items: center;
}

.search-form .search-field {
	width: 100%;
	padding: 15px 60px 15px 24px;
	border: 2px solid var(--eof-border);
	border-radius: var(--eof-radius-pill);
	font-family: inherit;
	font-size: 1rem;
	color: var(--eof-navy);
	background: #fff;
	transition: border-color 0.22s ease, box-shadow 0.22s ease;
}

.search-form .search-field:focus {
	outline: none;
	border-color: var(--eof-blue);
	box-shadow: 0 0 0 4px rgba(30, 134, 232, 0.14);
}

.search-form .search-submit {
	position: absolute;
	right: 6px;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: var(--eof-pink);
	color: #fff;
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: background-color 0.22s ease;
}

.search-form .search-submit:hover { background: var(--eof-pink-dark); }

/* =========================================================================
   6. MOBILE NAV / OVERLAY
   ========================================================================= */
.eof-overlay {
	position: fixed;
	inset: 0;
	background: rgba(14, 47, 99, 0.5);
	backdrop-filter: blur(3px);
	z-index: 190;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.eof-overlay.is-visible { opacity: 1; }

.mobile-nav {
	position: fixed;
	top: 0;
	right: 0;
	width: min(400px, 88vw);
	height: 100%;
	background: #fff;
	z-index: 200;
	transform: translateX(105%);
	transition: transform 0.38s var(--eof-ease);
	display: flex;
	flex-direction: column;
	box-shadow: var(--eof-shadow-lg);
}

.mobile-nav.is-open { transform: none; }

.mobile-nav__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 24px;
	border-bottom: 1px solid var(--eof-border);
}

.mobile-nav__close {
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: var(--eof-cream);
	color: var(--eof-navy);
	display: grid;
	place-items: center;
	cursor: pointer;
	flex: none;
}

.mobile-nav__body {
	flex: 1;
	overflow-y: auto;
	padding: 20px 24px 40px;
}

.mobile-menu {
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

.mobile-menu li { border-bottom: 1px solid var(--eof-border); }

.mobile-menu a {
	display: block;
	padding: 14px 40px 14px 0;
	font-family: var(--eof-font-heading);
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--eof-navy);
}

.mobile-menu a:hover { color: var(--eof-pink); }

.mobile-menu .has-dropdown { position: relative; }

.mobile-menu .submenu-toggle {
	position: absolute;
	top: 6px;
	right: 0;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: var(--eof-cream);
	color: var(--eof-navy);
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: transform 0.3s var(--eof-ease);
}

.mobile-menu .submenu-toggle[aria-expanded="true"] { transform: rotate(180deg); }

.mobile-menu .sub-menu {
	display: none;
	margin: 0 0 10px;
	padding-left: 16px;
	list-style: none;
	border-left: 2px solid var(--eof-ice);
}

.mobile-menu .sub-menu.is-open { display: block; }
.mobile-menu .sub-menu li { border: 0; }
.mobile-menu .sub-menu a { font-size: 0.98rem; padding: 10px 0; }

/* Social list */
.social-list {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.social-list a {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: currentColor;
	transition: background-color 0.22s ease, transform 0.22s var(--eof-ease);
}

.social-list a:hover {
	background: var(--eof-pink);
	color: #fff;
	transform: translateY(-3px);
}

.mobile-nav .social-list a {
	background: var(--eof-cream);
	color: var(--eof-navy);
}

/* Back to top */
.back-to-top {
	position: fixed;
	right: 22px;
	bottom: 22px;
	width: 50px;
	height: 50px;
	border: 0;
	border-radius: 50%;
	background: var(--eof-navy);
	color: #fff;
	display: grid;
	place-items: center;
	cursor: pointer;
	z-index: 120;
	box-shadow: var(--eof-shadow);
	transition: transform 0.28s var(--eof-ease), background-color 0.22s ease;
}

.back-to-top svg { transform: rotate(180deg); }
.back-to-top:hover { background: var(--eof-pink); transform: translateY(-4px); }

/* =========================================================================
   7. HOME SECTIONS
   ========================================================================= */

/* --- Hero --- */
.hero {
	position: relative;
	background: linear-gradient(170deg, var(--eof-cream) 0%, #fffdfa 55%, var(--eof-cream) 100%);
	padding-block: clamp(40px, 5vw, 70px) clamp(70px, 9vw, 130px);
	overflow: hidden;
}

.hero::after {
	/* content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 120px;
	background: var(--eof-ice);
	clip-path: ellipse(75% 100% at 50% 100%);
	z-index: 1;
	*/
}

.hero__inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr 1.08fr;
	align-items: center;
	gap: clamp(24px, 4vw, 60px);
}

.hero__eyebrow {
	margin-bottom: 0.9rem;
	font-family: var(--eof-font-heading);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--eof-navy);
	opacity: 0.85;
}

.hero__title {
	font-size: clamp(2.4rem, 5vw, 3.75rem);
	margin-bottom: 0.5em;
	max-width: 14ch;
}

.hero__text {
	max-width: 40ch;
	margin-bottom: 2rem;
	font-size: 1.06rem;
}

.hero__text strong { color: var(--eof-navy); }

.hero__media {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 380px;
}

.hero__glow {
	position: absolute;
	inset: 6% 8%;
	background: radial-gradient(circle at 50% 50%, #e6f3ff 0%, rgba(230, 243, 255, 0.6) 55%, rgba(230, 243, 255, 0) 72%);
	border-radius: 48% 52% 55% 45% / 52% 48% 52% 48%;
	z-index: 0;
}

.hero__image {
	position: relative;
	z-index: 1;
	width: min(100%, 520px);
	filter: drop-shadow(0 30px 40px rgba(18, 60, 126, 0.18));
	animation: eof-bob 6s ease-in-out infinite;
}

.hero__image--placeholder {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	background: #fff;
	border-radius: 50%;
	color: var(--eof-blue);
	box-shadow: var(--eof-shadow);
}

@keyframes eof-bob {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-14px); }
}

.hero__sticker {
	position: absolute;
	top: 18%;
	right: -2%;
	z-index: 2;
	text-align: center;
	transform: rotate(-7deg);
}

.hero__sticker-text {
	display: block;
	max-width: 7ch;
	font-family: var(--eof-font-heading);
	font-size: clamp(1.3rem, 2.2vw, 1.85rem);
	font-weight: 700;
	line-height: 1.15;
	color: var(--eof-navy);
}

.hero__sticker-heart {
	margin: 10px auto 0;
	color: var(--eof-pink);
	fill: var(--eof-pink);
}

.confetti {
	position: absolute;
	z-index: 2;
	border-radius: var(--eof-radius-pill);
	display: block;
}

.confetti--a { top: 22%; left: 2%;  width: 26px; height: 7px; background: var(--eof-pink);   transform: rotate(-30deg); }
.confetti--b { top: 30%; left: 6%;  width: 22px; height: 7px; background: #ffc93c;           transform: rotate(35deg); }
.confetti--c { top: 16%; right: 22%; width: 24px; height: 7px; background: #a855f7;          transform: rotate(18deg); }
.confetti--d { top: 34%; right: 14%; width: 20px; height: 7px; background: var(--eof-green); transform: rotate(-24deg); }

/* --- USPs --- */
.usps {
	position: relative;
	background: var(--eof-ice);
	padding-block: clamp(30px, 4vw, 54px) clamp(56px, 7vw, 92px);
	padding-bottom: 0;
	padding-top: 80px;
	overflow: clip;
	z-index: 2;
}

.usps .cta__title {
	text-align: center;
}

.usps::after {
	/* content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 90px;
	background: #fff;
	clip-path: ellipse(80% 100% at 50% 100%);
	*/
}

.usps__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.usp { text-align: center; }

.usp__icon {
	display: grid;
	place-items: center;
	width: 78px;
	height: 78px;
	margin: 0 auto 1.1rem;
	border-radius: 50%;
	color: #fff;
	box-shadow: 0 12px 26px rgba(18, 60, 126, 0.16);
	transition: transform 0.35s var(--eof-ease);
}

.usp:hover .usp__icon { transform: translateY(-6px) scale(1.06) rotate(-5deg); }

.usp__title {
	margin-bottom: 0.4em;
	font-size: 1.12rem;
}

.usp__text {
	margin: 0 auto;
	max-width: 24ch;
	font-size: 0.95rem;
	color: var(--eof-body);
}

/* An interactive orbit of promises around the workshop portrait. */
.usps__hint { text-align: center; margin: -20px auto 24px; color: var(--eof-body); }
.usps__orbit { position: relative; max-width: 960px; height: 600px; margin-inline: auto; isolation: isolate; }
.usps__orbit::before {
	content: "";
	position: absolute;
	inset: 9% 16% 13%;
	border: 2px dashed rgba(18, 60, 126, .17);
	border-radius: 50%;
	transform: rotate(-12deg);
	z-index: -1;
}
.usps__portrait { position: absolute; isolation: isolate; inset: auto 0 0; width: 370px; max-width: 60%; margin: 0 auto; }
.usps__portrait img { display: block; width: 100%; height: auto; filter: drop-shadow(0 16px 18px rgba(18, 60, 126, .1)); }
.usps__satellites { list-style: none; margin: 0; padding: 0; }
.usps__satellite { position: absolute; width: 126px; text-align: center; z-index: 2; }
.usps__satellite--1 { left: 12%; top: 18%; }
.usps__satellite--2 { right: 12%; top: 18%; }
.usps__satellite--3 { left: 12%; bottom: 24%; }
.usps__satellite--4 { right: 12%; bottom: 24%; }
.usps__satellite:has([open]) { z-index: 3; }
.usps__orbit.is-orbiting::before { inset: 13% 16% 27%; transform: none; }
.usps__orbit.is-orbiting .usps__satellite { top: 0; left: 0; right: auto; bottom: auto; }
.usp-disclosure__trigger { list-style: none; cursor: pointer; border-radius: 24px; }
.usp-disclosure__trigger::-webkit-details-marker { display: none; }
.usp-disclosure__trigger:focus-visible { outline: 3px solid var(--eof-navy); outline-offset: 8px; }
.usp-disclosure__trigger .usp__icon {
	width: 88px; height: 88px; margin: 0 auto 12px;
	border: 5px solid rgba(255, 255, 255, .75);
	border-radius: 44% 56% 53% 47% / 54% 42% 58% 46%;
	transition: transform .35s var(--eof-ease), box-shadow .35s var(--eof-ease);
}
.usp-disclosure__label { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 99px; background: #fff; color: var(--eof-navy); font-weight: 800; font-size: .9rem; box-shadow: var(--eof-shadow-sm); }
.usp-disclosure__plus { font-size: 1.15rem; transition: transform .3s var(--eof-ease); }
.usp-disclosure[open] .usp-disclosure__plus { transform: rotate(45deg); }
.usp-disclosure[open] .usp__icon { transform: translateY(-7px) rotate(-8deg) scale(1.08); box-shadow: 0 18px 30px rgba(18, 60, 126, .22); }
.usp-disclosure__panel {
	position: absolute; top: calc(100% + 12px); left: 50%; width: 224px;
	margin-left: -112px; padding: 20px; border-radius: 20px;
	background: #fff; border: 1px solid var(--eof-border); box-shadow: var(--eof-shadow);
	transform-origin: top center;
}
.usp-disclosure__panel::before { content: ""; position: absolute; top: -7px; left: calc(50% - 7px); width: 14px; height: 14px; background: #fff; transform: rotate(45deg); border-top: 1px solid var(--eof-border); border-left: 1px solid var(--eof-border); }
.usp-disclosure[open] .usp-disclosure__panel { animation: eof-usp-reveal .3s var(--eof-ease) both; }
@keyframes eof-usp-reveal {
	from { opacity: 0; transform: translateY(-8px) scale(.94); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 600px) {
	.usps__orbit { height: 530px; }
	.usps__portrait { max-width: 72%; width: 300px; bottom: 0; }
	.usps__orbit::before { inset: 14% 5% 17%; }
	.usps__satellite { width: 108px; }
	.usps__satellite--1, .usps__satellite--3 { left: 0; }
	.usps__satellite--2, .usps__satellite--4 { right: 0; }
	.usps__satellite--1, .usps__satellite--2 { top: 16%; }
	.usps__satellite--3, .usps__satellite--4 { bottom: 26%; }
	.usp-disclosure__trigger .usp__icon { width: 70px; height: 70px; }
	.usp-disclosure__label { font-size: .78rem; gap: 5px; padding: 6px 9px; }
	.usp-disclosure__panel { width: 190px; margin-left: 0; left: 0; }
	.usps__satellite--2 .usp-disclosure__panel, .usps__satellite--4 .usp-disclosure__panel { left: auto; right: 0; }
	.usp-disclosure__panel::before { left: 46px; }
	.usps__satellite--2 .usp-disclosure__panel::before, .usps__satellite--4 .usp-disclosure__panel::before { left: auto; right: 46px; }
}

.usps__orbit.is-orbiting .usp-disclosure__panel {
	left: 50%; right: auto; margin-left: calc(-112px + var(--usp-panel-shift, 0px));
}
.usps__orbit.is-orbiting .usp-disclosure__panel::before { left: calc(50% - 7px - var(--usp-panel-shift, 0px)); right: auto; }
.usps__orbit.is-orbiting .usps__satellite--above .usp-disclosure__panel { top: auto; bottom: calc(100% + 12px); transform-origin: bottom center; }
.usps__orbit.is-orbiting .usps__satellite--above .usp-disclosure__panel::before { top: auto; bottom: -7px; border: 0; border-bottom: 1px solid var(--eof-border); border-right: 1px solid var(--eof-border); }
@media (max-width: 600px) {
	.usps__orbit.is-orbiting .usp-disclosure__panel { margin-left: calc(-95px + var(--usp-panel-shift, 0px)); }
}

/* --- Featured collection --- */
.featured {
	background: #fff;
	padding-block: clamp(36px, 5vw, 76px) clamp(56px, 7vw, 100px);
}

.featured__inner {
	display: grid;
	grid-template-columns: minmax(260px, 0.75fr) 2.2fr;
	align-items: center;
	gap: clamp(28px, 4vw, 56px);
}

.featured__intro .section__title {
	font-size: clamp(2rem, 3.4vw, 2.9rem);
}

/* --- How it works --- */
.howitworks {
	position: relative;
	background: var(--eof-cream);
	padding-block: clamp(56px, 7vw, 100px) clamp(40px, 5vw, 72px);
}

.howitworks__inner {
	display: grid;
	grid-template-columns: minmax(260px, 0.85fr) 2fr;
	align-items: center;
	gap: clamp(28px, 4vw, 56px);
}

.howitworks .section__title { font-size: clamp(1.9rem, 3.2vw, 2.6rem); }
.howitworks .section__text strong { color: var(--eof-navy); }

.steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 42px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: step;
}

.step {
	position: relative;
	text-align: center;
}

.step__icon {
	position: relative;
	isolation: isolate;
	display: grid;
	place-items: center;
	width: 92px;
	height: 92px;
	margin: 0 auto 1.2rem;
	border-radius: 60% 40% 45% 55% / 55% 45% 55% 45%;
	color: #fff;
	transition: transform 0.35s var(--eof-ease);
}

.howitworks .step__icon { background: transparent; }

.step__icon.bg-pink   { --blob-color: var(--eof-pink); }
.step__icon.bg-blue   { --blob-color: var(--eof-blue); }
.step__icon.bg-green  { --blob-color: var(--eof-green); }
.step__icon.bg-orange { --blob-color: var(--eof-orange); }
.step__icon.bg-navy   { --blob-color: var(--eof-navy); }

.howitworks .step__icon::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	z-index: -1;
}

.howitworks .step__icon::after {
	opacity: 0.68;
	z-index: -1;
}

.step:nth-child(2) .step__icon {
	border-radius: 55% 45% 60% 40% / 50% 55% 45% 50%;
}

.step:nth-child(3) .step__icon {
	border-radius: 50% 50% 55% 45% / 60% 40% 60% 40%;
}

.step:hover .step__icon { transform: translateY(-6px) scale(1.05); }

.step__title { margin-bottom: 0.35em; font-size: 1.15rem; }

.step__text {
	margin: 0 auto;
	max-width: 22ch;
	font-size: 0.95rem;
}

.step__arrow {
	position: absolute;
	top: 34px;
	right: -32px;
	color: var(--eof-navy);
	opacity: 0.75;
}

/* --- CTA --- */
.cta { padding: 0; background: var(--eof-cream); }

.cta__band {
	position: relative;
	overflow: hidden;
	background: linear-gradient(105deg, var(--eof-blue) 0%, #1f6fd0 60%, var(--eof-blue-dark) 100%);
	border-radius: var(--eof-radius-lg) var(--eof-radius-lg) 0 0;
	margin-inline: clamp(0px, 3vw, 44px);
	padding-block: clamp(30px, 4vw, 44px);
}

.cta__band::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 18% 120%, rgba(255, 255, 255, 0.18), transparent 45%);
}

.cta__inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 0.9fr 1.2fr;
	align-items: center;
	gap: clamp(24px, 4vw, 50px);
}

.cta__media { position: relative; isolation: isolate; display: grid; place-items: center; }

.cta__backdrop,
.usps__backdrop {
	position: absolute;
	top: 50%; left: 50%;
	width: min(90%, 360px);
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	pointer-events: none;
	z-index: -1;
}
.cta__backdrop span,
.usps__backdrop span {
	position: absolute;
	width: 72%; height: 72%;
	border-radius: 58% 42% 48% 52% / 46% 55% 45% 54%;
	box-shadow: inset 3px 5px 18px rgba(255, 255, 255, .22);
}
.cta__backdrop span:nth-child(1), .usps__backdrop span:nth-child(1) { top: 0; left: 0; background: #ffc93c; transform: rotate(-18deg); }
.cta__backdrop span:nth-child(2), .usps__backdrop span:nth-child(2) { top: 0; right: 0; background: #fb83b4; transform: rotate(20deg); }
.cta__backdrop span:nth-child(3), .usps__backdrop span:nth-child(3) { bottom: 0; right: 0; background: #b6a0e5; transform: rotate(-12deg); }
.cta__backdrop span:nth-child(4), .usps__backdrop span:nth-child(4) { bottom: 0; left: 0; background: #98ccc4; transform: rotate(18deg); }

.cta__image {
	width: min(100%, 380px);
	border-radius: var(--eof-radius);
	filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.2));
}

.cta__image--placeholder {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
}

.cta__content { text-align: center; }

.cta__eyebrow {
	margin-bottom: 0.7rem;
	font-family: var(--eof-font-heading);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.9);
}

.cta__title {
	max-width: 14ch;
	margin: 0 auto 1.4rem;
	color: #fff;
	font-size: clamp(1.8rem, 3.4vw, 2.75rem);
}

/* =========================================================================
   8. BLOG / ARCHIVES / SINGLE
   ========================================================================= */
.page-hero {
	position: relative;
	background: linear-gradient(170deg, var(--eof-cream), #fffdf9);
	padding-block: clamp(46px, 6vw, 84px) clamp(70px, 8vw, 110px);
	text-align: center;
	overflow: hidden;
}

.page-hero .container { position: relative; z-index: 2; }
.page-hero__title { margin-bottom: 0.3em; }

.page-hero__subtitle {
	max-width: 58ch;
	margin: 0 auto;
	font-size: 1.05rem;
}

.eof-breadcrumbs {
	padding: 18px 0;
	font-size: 0.9rem;
	color: var(--eof-muted);
}

.eof-breadcrumbs a { color: var(--eof-navy); font-weight: 600; }
.eof-breadcrumbs a:hover { color: var(--eof-pink); }
.eof-breadcrumbs .sep { margin: 0 8px; opacity: 0.5; }

.content-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px;
	padding-block: clamp(40px, 5vw, 72px);
}

.content-layout.has-sidebar {
	grid-template-columns: minmax(0, 1fr) 320px;
}

.site-main--page { padding-block: clamp(40px, 5vw, 72px); }

.post-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	gap: 32px;
}

.post-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: var(--eof-radius);
	overflow: hidden;
	box-shadow: var(--eof-shadow-sm);
	transition: transform 0.35s var(--eof-ease), box-shadow 0.35s var(--eof-ease);
}

.post-card:hover {
	transform: translateY(-8px);
	box-shadow: var(--eof-shadow);
}

.post-card__media { display: block; overflow: hidden; aspect-ratio: 16 / 11; }

.post-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--eof-ease);
}

.post-card:hover .post-card__media img { transform: scale(1.06); }

.post-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 26px 26px 24px;
}

.post-card__cat {
	align-self: flex-start;
	margin-bottom: 0.8rem;
	padding: 5px 14px;
	background: var(--eof-ice);
	color: var(--eof-navy);
	border-radius: var(--eof-radius-pill);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.post-card__title { font-size: 1.3rem; margin-bottom: 0.5em; }
.post-card__title a { color: var(--eof-navy); }
.post-card__title a:hover { color: var(--eof-pink); }

.post-card__excerpt {
	font-size: 0.96rem;
	margin-bottom: 1.4em;
}

.post-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid var(--eof-border);
	font-size: 0.86rem;
	color: var(--eof-muted);
}

.post-card__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--eof-font-heading);
	font-weight: 700;
	color: var(--eof-pink);
}

.post-card__more svg { transition: transform 0.3s var(--eof-ease); }
.post-card__more:hover svg { transform: translateX(4px); }

/* Single */
.single-post,
.page-article {
	max-width: 820px;
	margin-inline: auto;
}

.content-layout.has-sidebar .single-post { max-width: none; }

.entry-header { margin-bottom: 2rem; }
.entry-title { margin-bottom: 0.4em; }

.entry-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 18px;
	font-size: 0.9rem;
	color: var(--eof-muted);
}

.entry-meta a { color: var(--eof-navy); font-weight: 600; }

.entry-media {
	margin: 0 0 2.4rem;
	border-radius: var(--eof-radius);
	overflow: hidden;
	box-shadow: var(--eof-shadow);
}

.entry-content > * + * { margin-top: 1.15em; }
.entry-content h2 { margin-top: 1.8em; }
.entry-content h3 { margin-top: 1.5em; }

.entry-content ul,
.entry-content ol { padding-left: 1.4em; }
.entry-content li + li { margin-top: 0.4em; }

.entry-content img { border-radius: var(--eof-radius); }

.entry-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 2.4rem;
}

.entry-tags a {
	padding: 7px 16px;
	background: var(--eof-cream);
	border-radius: var(--eof-radius-pill);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--eof-navy);
}

.entry-tags a:hover { background: var(--eof-pink); color: #fff; }

.post-navigation {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 20px;
	margin-top: 3rem;
}

.post-navigation .nav-links {
	display: contents;
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
	padding: 22px 26px;
	background: var(--eof-cream);
	border-radius: var(--eof-radius);
}

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

.post-navigation .nav-label {
	display: block;
	font-size: 0.76rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--eof-muted);
	margin-bottom: 4px;
}

.post-navigation .nav-title {
	font-family: var(--eof-font-heading);
	font-weight: 700;
	color: var(--eof-navy);
}

/* Pagination */
.pagination {
	margin-top: 3rem;
	display: flex;
	justify-content: center;
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 46px;
	height: 46px;
	padding: 0 12px;
	border-radius: var(--eof-radius-pill);
	background: var(--eof-cream);
	font-family: var(--eof-font-heading);
	font-weight: 700;
	color: var(--eof-navy);
	transition: background-color 0.22s ease, color 0.22s ease, transform 0.22s var(--eof-ease);
}

.pagination .page-numbers:hover,
.pagination .page-numbers.current {
	background: var(--eof-pink);
	color: #fff;
	transform: translateY(-2px);
}

/* No results / 404 */
.no-results,
.error-404__inner {
	text-align: center;
	max-width: 620px;
	margin-inline: auto;
	padding-block: clamp(40px, 6vw, 80px);
}

.no-results__icon,
.error-404__icon {
	display: inline-grid;
	place-items: center;
	color: var(--eof-blue);
	margin-bottom: 1rem;
}

.error-404 { background: var(--eof-cream); overflow: hidden; }
.error-404__inner { position: relative; z-index: 2; }

.error-404__code {
	font-family: var(--eof-font-heading);
	font-size: clamp(3.4rem, 9vw, 6rem);
	font-weight: 800;
	line-height: 1;
	color: var(--eof-pink);
	margin: 0 0 0.1em;
}

.error-404__text { margin-bottom: 1.8rem; }

.error-404__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin-top: 1.8rem;
}

.search-count {
	margin-bottom: 1.8rem;
	font-weight: 600;
	color: var(--eof-navy);
}

/* =========================================================================
   9. WIDGETS, COMMENTS, FORMS
   ========================================================================= */
.widget-area .widget + .widget { margin-top: 28px; }

.widget {
	padding: 26px;
	background: var(--eof-cream);
	border-radius: var(--eof-radius);
}

.widget-title {
	margin-bottom: 1rem;
	font-size: 1.15rem;
}

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

.widget li + li {
	margin-top: 6px;
	padding-top: 6px;
	border-top: 1px solid var(--eof-border);
}

.widget a { color: var(--eof-navy); font-weight: 600; }
.widget a:hover { color: var(--eof-pink); }

/* Forms */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
select,
textarea {
	width: 100%;
	padding: 13px 20px;
	border: 2px solid var(--eof-border);
	border-radius: 18px;
	background: #fff;
	font-family: inherit;
	font-size: 1rem;
	color: var(--eof-navy);
	transition: border-color 0.22s ease, box-shadow 0.22s ease;
}

textarea { min-height: 150px; resize: vertical; }

input:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: var(--eof-blue);
	box-shadow: 0 0 0 4px rgba(30, 134, 232, 0.13);
}

label {
	display: block;
	margin-bottom: 6px;
	font-weight: 700;
	color: var(--eof-navy);
	font-size: 0.94rem;
}

/* Comments */
.comments-area {
	margin-top: 3.5rem;
	padding-top: 3rem;
	border-top: 2px solid var(--eof-border);
}

.comments-title { margin-bottom: 1.6rem; }

.comment-list {
	margin: 0 0 2.5rem;
	padding: 0;
	list-style: none;
}

.comment-list .children {
	margin: 1.2rem 0 0 clamp(16px, 4vw, 48px);
	padding: 0;
	list-style: none;
}

.comment-body {
	position: relative;
	padding: 24px 26px;
	margin-bottom: 1.2rem;
	background: var(--eof-cream);
	border-radius: var(--eof-radius);
}

.comment-author {
	display: flex;
	align-items: center;
	gap: 12px;
	font-weight: 700;
	color: var(--eof-navy);
}

.comment-author img { border-radius: 50%; }
.comment-author .says { display: none; }

.comment-metadata {
	margin: 4px 0 12px;
	font-size: 0.85rem;
	color: var(--eof-muted);
}

.reply a {
	display: inline-block;
	margin-top: 8px;
	font-weight: 700;
	color: var(--eof-pink);
}

.comment-respond {
	padding: 32px;
	background: var(--eof-ice);
	border-radius: var(--eof-radius);
}

.comment-form p { margin-bottom: 1rem; }
.comment-form .form-submit { margin-bottom: 0; }

/* =========================================================================
   10. FOOTER
   ========================================================================= */
.site-footer {
	position: relative;
	background: var(--eof-navy);
	color: rgba(255, 255, 255, 0.82);
	padding-top: clamp(40px, 5vw, 62px);
}

.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer .widget-title { color: #fff; }

.site-footer a { color: rgba(255, 255, 255, 0.85); }
.site-footer a:hover { color: #fff; }

.footer-widgets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 36px;
	padding-bottom: 44px;
	margin-bottom: 10px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.footer-widgets .widget {
	background: transparent;
	padding: 0;
}

.footer-widgets .widget li { border-color: rgba(255, 255, 255, 0.12); }
.footer-widgets .widget a { font-weight: 500; }

.footer-main {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 32px;
	padding-bottom: 34px;
}

.footer-logo img { max-height: 64px; width: auto; }

.footer-logo__text {
	font-family: var(--eof-font-heading);
	font-size: 1.5rem;
	font-weight: 800;
	color: #fff;
}

.footer-tagline {
	margin: 10px 0 0;
	font-size: 0.88rem;
	color: rgba(255, 255, 255, 0.7);
}

.footer-menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-menu a {
	font-family: var(--eof-font-heading);
	font-weight: 600;
	font-size: 0.98rem;
}

.footer-social {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
	color: #fff;
}

.footer-slogan {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.88rem;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.86);
}

.footer-slogan__heart { color: var(--eof-pink); fill: var(--eof-pink); }

.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	padding: 18px 0;
	text-align: center;
}

.footer-copy {
	margin: 0;
	font-size: 0.84rem;
	color: rgba(255, 255, 255, 0.62);
}

/* =========================================================================
   11. BLOCK STYLES
   ========================================================================= */
.is-style-eof-bubble .wp-block-button__link,
.wp-block-button.is-style-eof-bubble .wp-block-button__link {
	background: var(--eof-pink);
	color: #fff;
	border-radius: var(--eof-radius-pill);
	box-shadow: var(--eof-shadow-pink);
}

.wp-block-button.is-style-eof-outline .wp-block-button__link {
	background: transparent;
	color: var(--eof-navy);
	border: 2px solid var(--eof-navy);
	box-shadow: none;
}

.wp-block-image.is-style-eof-blob img {
	border-radius: 52% 48% 45% 55% / 48% 52% 48% 52%;
}

.wp-block-group.is-style-eof-card {
	padding: clamp(24px, 4vw, 44px);
	background: var(--eof-cream);
	border-radius: var(--eof-radius);
	box-shadow: var(--eof-shadow-sm);
}

.wp-block-list.is-style-eof-check {
	list-style: none;
	padding-left: 0;
}

.wp-block-list.is-style-eof-check li {
	position: relative;
	padding-left: 34px;
	margin-bottom: 0.6em;
}

.wp-block-list.is-style-eof-check li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.35em;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--eof-green);
	box-shadow: inset 0 0 0 2px #fff;
}

.has-navy-color { color: var(--eof-navy) !important; }
.has-pink-color { color: var(--eof-pink) !important; }
.has-navy-background-color { background-color: var(--eof-navy) !important; }
.has-pink-background-color { background-color: var(--eof-pink) !important; }
.has-cream-background-color { background-color: var(--eof-cream) !important; }
.has-ice-background-color { background-color: var(--eof-ice) !important; }

.alignwide { max-width: min(1400px, 94vw); margin-inline: auto; }
.alignfull { width: 100vw; margin-left: calc(50% - 50vw); max-width: none; }

.sticky .post-card__title::before {
	content: "★ ";
	color: var(--eof-orange);
}

/* =========================================================================
   12. RESPONSIVE
   ========================================================================= */
@media (max-width: 1100px) {
	.featured__inner,
	.howitworks__inner {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.featured__intro .section__text,
	.howitworks__intro .section__text {
		margin-inline: auto;
	}

	.step__arrow { right: -22px; }
}

@media (max-width: 992px) {
	.main-navigation { display: none; }
	.header-action--burger { display: inline-flex; }

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

	.hero__title,
	.hero__text { max-width: none; margin-inline: auto; }

	.hero__media { order: -1; min-height: 300px; }
	.hero__sticker { right: 2%; top: 6%; }

	.usps__grid { grid-template-columns: repeat(2, 1fr); gap: 34px 20px; }

	.cta__inner { grid-template-columns: 1fr; }
	.cta__media { max-width: 340px; margin-inline: auto; }

	.content-layout.has-sidebar { grid-template-columns: 1fr; }

	.footer-main {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
	}

	.footer-social { align-items: center; }
	.footer-brand { display: grid; justify-items: center; }
}

@media (max-width: 720px) {
	:root { --eof-gutter: 18px; --eof-section-y: 52px; }

	.steps { grid-template-columns: 1fr; gap: 34px; }
	.step__arrow { display: none; }

	.cta__band { margin-inline: 0; border-radius: var(--eof-radius) var(--eof-radius) 0 0; }

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

	.hero::after { height: 70px; }

	.eof-decor--hero .blob--1,
	.eof-decor--hero .blob--4 { width: 110px; height: 100px; }
}

@media (max-width: 520px) {
	.usps__grid { grid-template-columns: 1fr; }
	.hero__sticker { display: none; }
	.header-actions { gap: 0; }
	.header-action { width: 40px; height: 40px; }
	.back-to-top { right: 14px; bottom: 14px; }
}

/* Print */
@media print {
	.site-header, .site-footer, .eof-decor, .back-to-top,
	.mobile-nav, .eof-overlay, .mini-cart { display: none !important; }
	body { color: #000; }
}

/* Full-width page template */
.site-main--full { padding-block: 0; }
.page-article--full { max-width: none; }
.page-article--full .entry-content > *:not(.alignfull):not(.alignwide) {
	max-width: var(--eof-container);
	margin-inline: auto;
	padding-inline: var(--eof-gutter);
}

/* Experience content pages and homepage additions */
.hero__actions, .experience-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.hero__age { margin-top: 24px; font-size: .85rem; font-weight: 800; color: var(--eof-navy); }
.hero__image { object-fit: contain; }
.section-heading { max-width: 780px; margin: 0 auto 44px; text-align: center; }
.section-heading .section__text { margin-inline: auto; }
.usps__heading { text-align: center; margin-bottom: 40px; }
.experiences__closing { text-align: center; font-family: var(--eof-font-heading); color: var(--eof-navy); font-size: 1.35rem; margin-top: 36px; }
.experience-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.experience-card { overflow: hidden; background: #fff; border: 1px solid var(--eof-border); border-radius: var(--eof-radius); box-shadow: var(--eof-shadow-sm); }
.experience-card__media { height: 270px; display: flex; align-items: center; justify-content: center; background: var(--eof-ice); overflow: hidden; }
.experience-card--pink .experience-card__media { background: #fff0f6; }
.experience-card--orange .experience-card__media { background: var(--eof-cream); }
.experience-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.experience-card__media--cutout { padding: 22px; }
.experience-card__media--cutout img { object-fit: contain; }
.experience-card:hover .experience-card__media img { transform: scale(1.035); }
.experience-card__body { padding: 28px; }
.experience-card__body h3 a { color: var(--eof-navy); }
.experience-card__body p { font-size: .96rem; }
.experience-card__number { color: #ad2261; font-weight: 800; font-size: .8rem; letter-spacing: .12em; }
.experience-link { font-weight: 800; color: var(--eof-navy); }
.experience-events, .experience-shop { background: var(--eof-cream); }
.experience-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: clamp(28px, 5vw, 72px); }
.experience-split figure { margin: 0; }
.experience-split figure img { width: 100%; border-radius: var(--eof-radius); }
.experience-split .experience-actions { margin-top: 28px; }
.event-pricing { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 36px; margin-top: 52px; align-items: start; }
.event-pricing__package { padding: clamp(24px, 4vw, 42px); border-radius: var(--eof-radius); background: white; box-shadow: var(--eof-shadow-sm); border: 1px solid var(--eof-border); }
.event-price { font-family: var(--eof-font-heading); font-size: 3.8rem; color: var(--eof-navy); line-height: 1.1; font-weight: 800; margin: 20px 0; }
.event-price span { display: block; font-family: var(--eof-font-body); font-size: .9rem; margin-top: 10px; color: var(--eof-body); }
.experience-list { padding-left: 1.4em; margin-block: 24px; }
.experience-list li { margin-bottom: 8px; }
.experience-list li::marker { color: #a62663; }
.event-extras { margin: 0 0 24px; }
.event-extras > div { padding: 14px 0; border-bottom: 1px solid var(--eof-border); }
.event-extras dt { color: var(--eof-navy); font-weight: 800; }
.event-extras dd { margin: 3px 0 0; }
.pricing-table-wrap { overflow-x: auto; border-radius: 16px; }
.pricing-table { width: 100%; border-collapse: collapse; background: #fff; font-size: .9rem; }
.pricing-table caption { text-align: start; font-weight: 800; color: var(--eof-navy); padding: 12px 0; }
.pricing-table th, .pricing-table td { text-align: start; padding: 12px 14px; border-bottom: 1px solid var(--eof-border); white-space: nowrap; }
.pricing-table thead tr th { color: #fff;}


.pricing-table thead { background: var(--eof-navy); color: #fff; }
.upcoming-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0 0 32px; padding: 0; list-style: none; }
.upcoming-grid li {
	--upcoming-tint: 232, 168, 183;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-height: 260px;
	border-radius: 24px;
	padding: 28px;
	background-color: rgb(var(--upcoming-tint));
	background-image:
		linear-gradient(180deg, rgba(var(--upcoming-tint), 0.3) 0%, rgba(var(--upcoming-tint), 0.55) 45%, rgba(var(--upcoming-tint), 0.96) 78%),
		var(--upcoming-image);
	background-size: cover;
	background-position: center, var(--upcoming-position, center);
	background-repeat: no-repeat;
	transition: transform 0.35s var(--eof-ease), box-shadow 0.35s var(--eof-ease);
}
.upcoming-grid li h3 { margin-top: auto; margin-bottom: 0; padding-top: 36px; }
@media (hover: hover) and (pointer: fine) {
	.upcoming-grid li:hover {
		transform: translateY(-8px) rotate(-1deg);
		box-shadow: 0 18px 32px rgba(18, 60, 126, 0.16);
	}
	.upcoming-grid li:nth-child(even):hover { transform: translateY(-8px) rotate(1deg); }
}
/* Six distinct colours drawn from the logo's lettering, stars and cream backing. */
.upcoming-grid li:nth-child(6n + 1) {
	--upcoming-tint: 232, 168, 183; /* Rose pink */
	--upcoming-image: url('../images/upcoming-plush-v2.jpg');
}
.upcoming-grid li:nth-child(6n + 2) {
	--upcoming-tint: 152, 204, 196; /* Teal */
	--upcoming-image: url('../images/upcoming-pillows-v2.jpg');
}
.upcoming-grid li:nth-child(6n + 3) {
	--upcoming-tint: 199, 175, 203; /* Lavender */
	--upcoming-image: url('../images/upcoming-dtf.jpg');
}
.upcoming-grid li:nth-child(6n + 4) {
	--upcoming-tint: 192, 210, 173; /* Sage green */
	--upcoming-image: url('../images/upcoming-seasonal.jpg');
}
.upcoming-grid li:nth-child(6n + 5) {
	--upcoming-tint: 239, 208, 146; /* Golden yellow */
	--upcoming-image: url('../images/upcoming-community.jpg');
}
.upcoming-grid li:nth-child(6n + 6) {
	--upcoming-tint: 251, 245, 233; /* Warm cream */
	--upcoming-image: url('../images/upcoming-holiday-v2.jpg');
}
.coming-soon-badge, .age-badge { display: inline-block; padding: 6px 14px; border-radius: 999px; background: #fff; color: var(--eof-navy); font-size: .78rem; font-weight: 800; margin-bottom: 20px; }
.age-badge { background: var(--eof-ice); margin-bottom: 0; }
.experience-upcoming .experience-actions { justify-content: center; }
.story-belief { font-family: var(--eof-font-heading); color: var(--eof-navy); font-size: 1.55rem; line-height: 1.35; }
.why-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; list-style: none; padding: 0; text-align: center; }
.why-grid h3 { font-size: 1.3rem; }
.why-grid p { font-size: .95rem; }
.why-grid__number { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 20px; border-radius: 16px; background: var(--eof-ice); color: var(--eof-navy); font-weight: 800; }
.experience-shop__image img { max-height: 330px; object-fit: contain; }

#shop-preview .experience-shop__image img,
.experience-page--contact .experience-hero__media img {
	transform-origin: center bottom;
	animation: eof-pillow-hop 4.8s ease-in-out infinite;
}

@keyframes eof-pillow-hop {
	0%, 14%, 64%, 100% {
		transform: translateY(0) scale(1, 1);
	}
	/* A soft crouch before pushing off. */
	21% {
		transform: translateY(0) scale(1.07, 0.89);
		animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1);
	}
	28% {
		transform: translateY(-24px) scale(0.97, 1.05);
		animation-timing-function: ease-out;
	}
	37% {
		transform: translateY(-38px) scale(1.02, 0.98);
		animation-timing-function: ease-in;
	}
	47% {
		transform: translateY(0) scale(0.98, 1.02);
	}
	/* Absorb the landing, then settle back into shape. */
	52% { transform: translateY(0) scale(1.08, 0.9); }
	58% { transform: translateY(-3px) scale(0.99, 1.02); }
}

.experience-hero { background: var(--eof-cream); }
.experience-hero__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.experience-hero__inner--text { grid-template-columns: 1fr; max-width: 860px; }
.experience-hero h1 { margin-top: 20px; font-size: clamp(2.4rem, 4.5vw, 4rem); }
.experience-hero__lead { font-size: 1.25rem; color: var(--eof-navy); }
.experience-hero__media { margin: 0; }
.experience-hero__media img { width: 100%; border-radius: var(--eof-radius); max-height: 470px; object-fit: cover; }
.experience-hero__media--cutout img { object-fit: contain; }
.experience-prose { max-width: 820px; margin: 0 auto 40px; }
.experience-prose h2 { margin-top: 1.6em; font-size: clamp(1.6rem, 2.8vw, 2.1rem); }
.experience-prose h3 { margin-top: 1.5em; }
.experience-prose > h2:first-child { margin-top: 0; }
.experience-prose .btn { margin: 16px 0; }
.experience-prose--terms { max-width: 860px; }
.terms-index { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px; padding: 28px; background: var(--eof-ice); border-radius: 24px; margin-bottom: 52px; }
.terms-index a { font-size: .9rem; color: var(--eof-navy); text-decoration: underline; text-underline-offset: 3px; }
.experience-note { max-width: 820px; padding: 32px; background: var(--eof-ice); border-radius: 24px; margin: 36px auto; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.contact-card { display: grid; gap: 10px; padding: 32px; border: 1px solid var(--eof-border); border-radius: 24px; background: var(--eof-cream); color: var(--eof-navy); overflow-wrap: anywhere; }
.contact-card strong { font-size: clamp(1rem, 2vw, 1.4rem); }
.contact-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.contact-info .contact-grid { grid-template-columns: 1fr; margin-block: 28px; }
.contact-info__note { padding: 24px; border-radius: 24px; background: var(--eof-ice); }
.contact-info__note p:last-child { margin-bottom: 0; }
.contact-form-panel { padding: clamp(24px, 4vw, 40px); border: 1px solid var(--eof-border); border-radius: var(--eof-radius); background: var(--eof-cream); scroll-margin-top: 110px; }
.contact-form-panel h2 { margin-bottom: 12px; }
.contact-form-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.contact-form-fields p { margin: 0; min-width: 0; }
.contact-form-fields label { display: block; font-weight: 700; color: var(--eof-navy); }
.contact-form-fields .wpcf7-form-control-wrap { display: block; margin-top: 8px; }
.contact-form-fields input, .contact-form-fields select, .contact-form-fields textarea { width: 100%; max-width: 100%; background-color: #fff; }
.contact-form-fields__full { grid-column: 1 / -1; }
.contact-form-note { margin-top: 20px; font-size: .85rem; }
.contact-form-panel .wpcf7-not-valid-tip { margin-top: 6px; font-weight: 400; font-size: .85rem; }
.contact-form-panel .wpcf7 form .wpcf7-response-output { margin: 20px 0 0; padding: 16px; border-radius: 12px; }
@media (max-width: 800px) {
	.contact-layout { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
	.contact-form-fields { grid-template-columns: 1fr; }
	.contact-form-panel .wpcf7-submit { width: 100%; }
}
.pillow-pair { max-width: 300px; margin: 30px auto; }
.image-caption { font-size: .8rem; text-align: center; color: var(--eof-body); margin-top: 36px; }
.experience-footer { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; padding-top: 60px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.18); }
.experience-footer h3 { font-size: 1.2rem; color: #fff; }
.experience-footer ul { list-style: none; padding: 0; margin: 0; }
.experience-footer li { margin-bottom: 10px; }
.experience-footer a { color: #fff; font-size: .87rem; overflow-wrap: anywhere; }
.experience-footer a:hover { text-decoration: underline; }
@media (max-width: 1000px) {
	.why-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.experience-card__body { padding: 22px; }
	.experience-card__media { height: 230px; }
	.experience-hero__inner { gap: 28px; }
}
@media (max-width: 800px) {
	.experience-cards, .experience-split, .event-pricing, .experience-hero__inner { grid-template-columns: 1fr; }
	.experience-hero__media { max-width: 560px; width: 100%; margin-inline: auto; }
	.experience-card__media { height: 300px; }
	.upcoming-grid, .experience-footer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hero__actions { justify-content: center; }
	.experience-prose .experience-why .container { padding: 0; }
}
@media (max-width: 520px) {
	.why-grid, .upcoming-grid, .contact-grid, .terms-index, .experience-footer { grid-template-columns: 1fr; }
	.experience-card__media { height: 260px; }
	.experience-actions .btn { width: 100%; }
	.experience-footer { gap: 24px; }
	.pricing-table th, .pricing-table td { padding: 10px; font-size: .8rem; }
	.event-pricing { gap: 24px; }
}
@media (prefers-reduced-motion: reduce) {
	.experience-card__media img { transition: none; }
	.eof-decor--cta .blob { animation: none; opacity: .65; transform: rotate(-10deg); }
	.eof-decor--cta .blob--1, .eof-decor--cta .blob--3 { top: 15%; }
	.eof-decor--cta .blob--2, .eof-decor--cta .blob--4 { top: 60%; }
	.usp-disclosure[open] .usp-disclosure__panel { animation: none; }
	.usp-disclosure__trigger .usp__icon, .usp-disclosure__plus { transition: none; }
	#shop-preview .experience-shop__image img,
	.experience-page--contact .experience-hero__media img { animation: none; }
	.upcoming-grid li { transition: none; }
	.upcoming-grid li:hover,
	.upcoming-grid li:nth-child(even):hover { transform: none; }
}