/**
 * LD Starter — main stylesheet.
 *
 *  1. Design tokens
 *  2. Base
 *  3. Layout
 *  4. Components (buttons, forms, icons, pagination)
 *  5. Header — top bar
 *  6. Header — main bar & navigation
 *  7. Header — actions, search panel
 *  8. Content (cards, entries, pages, 404)
 *  9. Comments
 * 10. Footer
 * 11. Back to top
 * 12. WordPress core classes & accessibility
 */

/* ==========================================================================
   1. Design tokens
   ========================================================================== */
:root {
	/* Brand */
	--color-accent: #dc143c;
	--color-accent-hover: #b0102f;
	--color-accent-soft: rgba(220, 20, 60, 0.1);

	/* Neutrals */
	--color-black: #0a0a0a;
	--color-white: #ffffff;
	--color-bg: var(--color-white);
	--color-surface: #f6f6f6;
	--color-text: #111111;
	--color-muted: #6b6b6b;
	--color-border: #e6e6e6;

	/* Dark sections */
	--dark-bg: #0a0a0a;
	--dark-text: #a3a3a3;
	--dark-heading: #ffffff;
	--dark-line: rgba(255, 255, 255, 0.1);

	/* Typography */
	--font-base: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--fs-base: 1.0625rem;

	/* Layout */
	--container: 1240px;
	--gutter: 20px;
	--radius: 8px;
	--radius-lg: 14px;
	--topbar-height: 40px;
	--header-height: 80px;

	/* Effects */
	--shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.06);
	--shadow: 0 14px 40px rgba(0, 0, 0, 0.12);
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--transition: 0.25s var(--ease);
}

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

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

body {
	margin: 0;
	font-family: var(--font-base);
	font-size: var(--fs-base);
	line-height: 1.65;
	color: var(--color-text);
	background: var(--color-bg);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

body.has-menu-open {
	overflow: hidden;
}

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

a {
	color: var(--color-accent);
	transition: color var(--transition);
}
a:hover {
	color: var(--color-accent-hover);
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 0.6em;
	line-height: 1.2;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--color-black);
}

::selection {
	background: var(--color-accent);
	color: var(--color-white);
}

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

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

.site-main {
	padding: 64px 0 96px;
	min-height: 60vh;
}

/* ==========================================================================
   4. Components
   ========================================================================== */

/* Buttons */
.button,
.wp-block-button__link,
input[type='submit'],
button[type='submit'] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 26px;
	border: 2px solid var(--color-accent);
	border-radius: var(--radius);
	background: var(--color-accent);
	color: var(--color-white);
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition:
		background var(--transition),
		border-color var(--transition),
		color var(--transition),
		transform var(--transition),
		box-shadow var(--transition);
}

.button:hover,
.wp-block-button__link:hover,
input[type='submit']:hover,
button[type='submit']:hover {
	background: var(--color-accent-hover);
	border-color: var(--color-accent-hover);
	color: var(--color-white);
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(220, 20, 60, 0.3);
}

.button .icon {
	width: 18px;
	height: 18px;
}

.button--outline-light {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.5);
	color: var(--color-white);
}

.button--outline-light:hover {
	background: var(--color-white);
	border-color: var(--color-white);
	color: var(--color-black);
	box-shadow: none;
}

/* Forms */
input[type='text'],
input[type='email'],
input[type='url'],
input[type='tel'],
input[type='search'],
input[type='password'],
textarea,
select {
	width: 100%;
	padding: 13px 16px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background: var(--color-white);
	color: var(--color-text);
	font: inherit;
	transition:
		border-color var(--transition),
		box-shadow var(--transition);
}

input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--color-accent);
	box-shadow: 0 0 0 4px var(--color-accent-soft);
}

.search-form {
	display: flex;
	gap: 8px;
	max-width: 520px;
}
.search-form label {
	flex: 1;
}

/* Icons */
.icon {
	width: 1em;
	height: 1em;
	fill: currentColor;
	flex-shrink: 0;
}

/* Page header */
.page-header {
	margin-bottom: 48px;
}
.page-header__title {
	font-size: clamp(2rem, 4vw, 3rem);
}
.page-header__title span {
	color: var(--color-accent);
}
.page-header__description {
	color: var(--color-muted);
	max-width: 680px;
}

/* Pagination */
.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 56px;
}

.page-numbers {
	min-width: 44px;
	padding: 10px 16px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	color: var(--color-text);
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	transition: all var(--transition);
}

.page-numbers.current,
a.page-numbers:hover {
	background: var(--color-black);
	border-color: var(--color-black);
	color: var(--color-white);
}

/* ==========================================================================
   5. Header — top bar
   ========================================================================== */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
}

.admin-bar .site-header {
	top: 32px;
}

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

@media (max-width: 600px) {
	.admin-bar .site-header {
		top: 0;
	}
}

.topbar {
	position: relative;
	height: var(--topbar-height);
	overflow: hidden;
	background: var(--color-black);
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.8125rem;
	transition: height 0.35s var(--ease);
}

/* Animated accent line under the top bar */
.topbar::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
	background-size: 50% 100%;
	background-repeat: no-repeat;
	animation: topbar-sweep 6s linear infinite;
}

@keyframes topbar-sweep {
	from {
		background-position: -50% 0;
	}
	to {
		background-position: 150% 0;
	}
}

.site-header.is-scrolled .topbar {
	height: 0;
}

.topbar__inner {
	height: 100%;
}

.topbar__ticker {
	position: relative;
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.topbar__item {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	white-space: nowrap;
	opacity: 0;
	transform: translateY(100%);
	transition:
		opacity 0.5s var(--ease),
		transform 0.5s var(--ease);
	pointer-events: none;
}

.topbar__item.is-active {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.topbar__item.is-leaving {
	opacity: 0;
	transform: translateY(-100%);
}

.topbar__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--color-accent);
	color: var(--color-white);
	animation: topbar-pulse 2.4s ease-out infinite;
}

.topbar__icon .icon {
	width: 12px;
	height: 12px;
}

@keyframes topbar-pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(220, 20, 60, 0.6);
	}
	70% {
		box-shadow: 0 0 0 8px rgba(220, 20, 60, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(220, 20, 60, 0);
	}
}

.topbar__text {
	overflow: hidden;
	text-overflow: ellipsis;
}

.topbar__link,
.topbar__value {
	color: var(--color-white);
	font-weight: 700;
	text-decoration: none;
}

.topbar__link:hover {
	color: var(--color-accent);
}

/* ==========================================================================
   6. Header — main bar & navigation
   ========================================================================== */
.site-header__main {
	position: relative;
	z-index: 2;
	background: rgba(255, 255, 255, 0.96);
	border-bottom: 1px solid var(--color-border);
	transition:
		box-shadow var(--transition),
		background var(--transition);
}

@supports (backdrop-filter: blur(10px)) {
	.site-header__main {
		background: rgba(255, 255, 255, 0.85);
		backdrop-filter: saturate(180%) blur(14px);
	}
}

.site-header.is-scrolled .site-header__main {
	box-shadow: var(--shadow-sm);
}

.site-header__inner {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 32px;
	min-height: var(--header-height);
	transition: min-height 0.35s var(--ease);
}

.site-header.is-scrolled .site-header__inner {
	min-height: 68px;
}

/* Branding */
.site-branding {
	display: flex;
	align-items: center;
}

.site-title {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 900;
	letter-spacing: -0.02em;
	line-height: 1;
}

.site-title a {
	color: var(--color-black);
	text-decoration: none;
}
.site-title a:hover {
	color: var(--color-accent);
}

.custom-logo-link {
	display: block;
	line-height: 0;
}

.custom-logo {
	display: block;
	width: auto;
	max-height: 52px;
	transition: max-height 0.35s var(--ease);
}

.site-header.is-scrolled .custom-logo {
	max-height: 42px;
}

/* Desktop navigation */
.main-navigation {
	justify-self: center;
}

.main-navigation__list,
.main-navigation__list .sub-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.main-navigation__list {
	display: flex;
	align-items: center;
	gap: 6px;
}

.main-navigation__list > li {
	position: relative;
}

.main-navigation__list a {
	position: relative;
	display: block;
	padding: 10px 14px;
	color: var(--color-black);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	transition: color var(--transition);
}

.main-navigation__list > li > a::after {
	content: '';
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 4px;
	height: 2px;
	background: var(--color-accent);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.3s var(--ease);
}

.main-navigation__list > li > a:hover::after,
.main-navigation__list > .current-menu-item > a::after,
.main-navigation__list > .current-menu-ancestor > a::after {
	transform: scaleX(1);
	transform-origin: left;
}

.main-navigation__list a:hover,
.main-navigation__list .current-menu-item > a {
	color: var(--color-accent);
}

/* Dropdowns */
.main-navigation__list .menu-item-has-children > a {
	padding-right: 26px;
}

.main-navigation__list .menu-item-has-children > a::before {
	content: '';
	position: absolute;
	right: 12px;
	top: 50%;
	width: 6px;
	height: 6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-70%) rotate(45deg);
}

.main-navigation__list .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	padding: 10px;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-top: 3px solid var(--color-accent);
	border-radius: 0 0 var(--radius) var(--radius);
	box-shadow: var(--shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition:
		opacity var(--transition),
		transform var(--transition),
		visibility var(--transition);
}

.main-navigation__list li:hover > .sub-menu,
.main-navigation__list li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.main-navigation__list .sub-menu a {
	padding: 10px 12px;
	border-radius: 6px;
	font-weight: 500;
}

.main-navigation__list .sub-menu a:hover {
	background: var(--color-surface);
}

/* ==========================================================================
   7. Header — actions, search panel
   ========================================================================== */
.header-actions {
	display: flex;
	align-items: center;
	gap: 6px;
	justify-self: end;
}

.header-actions__button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--color-black);
	cursor: pointer;
	text-decoration: none;
	transition:
		background var(--transition),
		color var(--transition);
}

.header-actions__button:hover,
.header-actions__button[aria-expanded='true'] {
	background: var(--color-surface);
	color: var(--color-accent);
}

.header-actions__button .icon {
	width: 22px;
	height: 22px;
}

/* Cart counter */
.header-cart__count {
	position: absolute;
	top: 4px;
	right: 2px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--color-accent);
	color: var(--color-white);
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}

.header-cart__count.is-empty {
	background: var(--color-black);
}

/* Hamburger */
.menu-toggle {
	display: none;
}

.menu-toggle__bars {
	position: relative;
	display: block;
	width: 22px;
	height: 16px;
}

.menu-toggle__bars span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition:
		transform 0.35s var(--ease),
		opacity 0.2s,
		top 0.35s var(--ease);
}

.menu-toggle__bars span:nth-child(1) {
	top: 0;
}
.menu-toggle__bars span:nth-child(2) {
	top: 7px;
}
.menu-toggle__bars span:nth-child(3) {
	top: 14px;
}

.menu-toggle[aria-expanded='true'] .menu-toggle__bars span:nth-child(1) {
	top: 7px;
	transform: rotate(45deg);
}
.menu-toggle[aria-expanded='true'] .menu-toggle__bars span:nth-child(2) {
	opacity: 0;
}
.menu-toggle[aria-expanded='true'] .menu-toggle__bars span:nth-child(3) {
	top: 7px;
	transform: rotate(-45deg);
}

/* Search panel */
.header-search {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 1;
	padding: 28px 0;
	background: var(--color-white);
	border-bottom: 3px solid var(--color-accent);
	box-shadow: var(--shadow);
	animation: panel-in 0.3s var(--ease);
}

.header-search[hidden] {
	display: none;
}

@keyframes panel-in {
	from {
		opacity: 0;
		transform: translateY(-12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.header-search__form {
	display: flex;
	gap: 12px;
	max-width: 760px;
	margin: 0 auto;
}

.header-search__input {
	flex: 1;
	padding: 16px 20px;
	font-size: 1.0625rem;
}

.header-search__submit {
	flex-shrink: 0;
}

/* Mobile / tablet header */
@media (max-width: 1024px) {
	.site-header__inner {
		grid-template-columns: 1fr auto;
		gap: 16px;
		min-height: 68px;
	}

	/* backdrop-filter would become the containing block of the fixed menu panel */
	.site-header__main {
		background: var(--color-white);
		backdrop-filter: none;
	}

	.menu-toggle {
		display: inline-flex;
	}

	.main-navigation {
		position: fixed;
		top: var(--header-bottom, 108px);
		right: 0;
		bottom: 0;
		left: 0;
		justify-self: stretch;
		padding: 16px var(--gutter) 40px;
		overflow-y: auto;
		background: var(--color-white);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-16px);
		transition:
			opacity 0.3s var(--ease),
			transform 0.3s var(--ease),
			visibility 0.3s;
	}

	.main-navigation.is-open {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.main-navigation__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.main-navigation__list a {
		padding: 16px 4px;
		font-size: 1.125rem;
		border-bottom: 1px solid var(--color-border);
	}

	.main-navigation__list > li > a::after {
		display: none;
	}

	.main-navigation__list .menu-item-has-children > a::before {
		display: none;
	}

	.main-navigation__list .sub-menu {
		position: static;
		padding: 0 0 0 16px;
		border: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.main-navigation__list .sub-menu a {
		font-size: 1rem;
		border-radius: 0;
	}
}

@media (max-width: 600px) {
	:root {
		--topbar-height: 36px;
		--gutter: 16px;
	}

	.topbar {
		font-size: 0.75rem;
	}
	.topbar__item {
		justify-content: flex-start;
	}

	.header-search {
		padding: 16px 0;
	}
	.header-search__form {
		flex-direction: column;
	}
}

/* ==========================================================================
   8. Content
   ========================================================================== */
.post-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 32px;
}

.post-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	transition:
		box-shadow var(--transition),
		transform var(--transition),
		border-color var(--transition);
}

.post-card:hover {
	border-color: transparent;
	box-shadow: var(--shadow);
	transform: translateY(-4px);
}

.post-card__thumbnail {
	display: block;
	overflow: hidden;
}

.post-card__thumbnail img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	transition: transform 0.6s var(--ease);
}

.post-card:hover .post-card__thumbnail img {
	transform: scale(1.05);
}

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

.post-card__meta {
	margin-bottom: 10px;
	color: var(--color-accent);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.post-card__title {
	font-size: 1.25rem;
}
.post-card__title a {
	color: var(--color-black);
	text-decoration: none;
}
.post-card__title a:hover {
	color: var(--color-accent);
}

.post-card__excerpt {
	flex: 1;
	color: var(--color-muted);
}
.post-card__excerpt p {
	margin: 0 0 18px;
}

.post-card__more {
	align-self: flex-start;
	color: var(--color-black);
	font-weight: 700;
	text-decoration: none;
	border-bottom: 2px solid var(--color-accent);
	padding-bottom: 2px;
}

.post-card__more:hover {
	color: var(--color-accent);
}

/* Single entry */
.entry {
	max-width: 780px;
	margin: 0 auto;
}
.entry__header {
	margin-bottom: 36px;
}

.entry__categories a {
	color: var(--color-accent);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
}

.entry__title {
	margin: 10px 0 18px;
	font-size: clamp(2rem, 4.5vw, 3.25rem);
}

.entry__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	color: var(--color-muted);
	font-size: 0.9375rem;
}

.entry__thumbnail {
	margin: 0 0 40px;
}
.entry__thumbnail img {
	display: block;
	border-radius: var(--radius-lg);
}

.entry__content > * + * {
	margin-top: 1.3em;
}
.entry__content h2,
.entry__content h3 {
	margin-top: 1.8em;
}

.entry__content blockquote {
	margin-left: 0;
	padding: 4px 0 4px 24px;
	border-left: 4px solid var(--color-accent);
	font-size: 1.125rem;
	font-style: italic;
}

.entry__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 48px;
}

.entry__tags a {
	padding: 6px 14px;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	color: var(--color-text);
	font-size: 0.875rem;
	text-decoration: none;
	transition: all var(--transition);
}

.entry__tags a:hover {
	background: var(--color-black);
	border-color: var(--color-black);
	color: var(--color-white);
}

/* Post navigation */
.post-navigation {
	max-width: 780px;
	margin: 64px auto 0;
}

.post-navigation .nav-links {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.post-navigation a {
	display: block;
	height: 100%;
	padding: 20px 24px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	text-decoration: none;
	transition:
		border-color var(--transition),
		box-shadow var(--transition);
}

.post-navigation a:hover {
	border-color: var(--color-accent);
	box-shadow: var(--shadow-sm);
}
.post-navigation .nav-next {
	text-align: right;
}
.nav-subtitle {
	display: block;
	margin-bottom: 4px;
	color: var(--color-muted);
	font-size: 0.8125rem;
}
.nav-title {
	color: var(--color-black);
	font-weight: 700;
}

/* No results */
.no-results {
	padding: 40px 0;
	text-align: center;
}
.no-results .search-form {
	margin: 28px auto 0;
}

/* 404 */
.error-404 {
	max-width: 600px;
	margin: 0 auto;
	padding: 40px 0;
	text-align: center;
}

.error-404__code {
	margin: 0;
	font-size: clamp(6rem, 18vw, 10rem);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.05em;
	background: linear-gradient(135deg, var(--color-black) 30%, var(--color-accent));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.error-404__title {
	font-size: clamp(1.5rem, 3vw, 2rem);
}
.error-404__text {
	color: var(--color-muted);
}
.error-404__search {
	margin: 32px 0;
}
.error-404__search .search-form {
	margin: 0 auto;
}

/* ==========================================================================
   9. Comments
   ========================================================================== */
.comments {
	max-width: 780px;
	margin: 72px auto 0;
}
.comments__list {
	margin: 0 0 48px;
	padding: 0;
	list-style: none;
}
.comments__list .children {
	padding-left: 32px;
	list-style: none;
}
.comment-body {
	padding: 24px 0;
	border-bottom: 1px solid var(--color-border);
}
.comment-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 0.9375rem;
}
.comment-meta .avatar {
	border-radius: 50%;
}
.comment-reply-link {
	font-weight: 700;
	font-size: 0.875rem;
	text-decoration: none;
}
.comments__closed {
	color: var(--color-muted);
}

/**
 * LD Starter — main stylesheet.
 *
 *  1. Design tokens
 *  2. Base
 *  3. Layout
 *  4. Components (buttons, forms, icons, pagination)
 *  5. Header — top bar
 *  6. Header — main bar & navigation
 *  7. Header — actions, search panel
 *  8. Content (cards, entries, pages, 404)
 *  9. Comments
 * 10. Footer
 * 11. Back to top
 * 12. WordPress core classes & accessibility
 */

/* ==========================================================================
   1. Design tokens
   ========================================================================== */
:root {
	/* Brand */
	--color-accent: #dc143c;
	--color-accent-hover: #b0102f;
	--color-accent-soft: rgba(220, 20, 60, 0.1);

	/* Neutrals */
	--color-black: #0a0a0a;
	--color-white: #ffffff;
	--color-bg: var(--color-white);
	--color-surface: #f6f6f6;
	--color-text: #111111;
	--color-muted: #6b6b6b;
	--color-border: #e6e6e6;

	/* Dark sections */
	--dark-bg: #0a0a0a;
	--dark-text: #a3a3a3;
	--dark-heading: #ffffff;
	--dark-line: rgba(255, 255, 255, 0.1);

	/* Typography */
	--font-base: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--fs-base: 1.0625rem;

	/* Layout */
	--container: 1240px;
	--gutter: 20px;
	--radius: 8px;
	--radius-lg: 14px;
	--topbar-height: 40px;
	--header-height: 80px;

	/* Effects */
	--shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.06);
	--shadow: 0 14px 40px rgba(0, 0, 0, 0.12);
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--transition: 0.25s var(--ease);
}

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

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

body {
	margin: 0;
	font-family: var(--font-base);
	font-size: var(--fs-base);
	line-height: 1.65;
	color: var(--color-text);
	background: var(--color-bg);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

body.has-menu-open {
	overflow: hidden;
}

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

a {
	color: var(--color-accent);
	transition: color var(--transition);
}
a:hover {
	color: var(--color-accent-hover);
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 0.6em;
	line-height: 1.2;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--color-black);
}

::selection {
	background: var(--color-accent);
	color: var(--color-white);
}

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

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

.site-main {
	padding: 64px 0 96px;
	min-height: 60vh;
}

/* ==========================================================================
   4. Components
   ========================================================================== */

/* Buttons */
.button,
.wp-block-button__link,
input[type='submit'],
button[type='submit'] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 26px;
	border: 2px solid var(--color-accent);
	border-radius: var(--radius);
	background: var(--color-accent);
	color: var(--color-white);
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition:
		background var(--transition),
		border-color var(--transition),
		color var(--transition),
		transform var(--transition),
		box-shadow var(--transition);
}

.button:hover,
.wp-block-button__link:hover,
input[type='submit']:hover,
button[type='submit']:hover {
	background: var(--color-accent-hover);
	border-color: var(--color-accent-hover);
	color: var(--color-white);
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(220, 20, 60, 0.3);
}

.button .icon {
	width: 18px;
	height: 18px;
}

.button--outline-light {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.5);
	color: var(--color-white);
}

.button--outline-light:hover {
	background: var(--color-white);
	border-color: var(--color-white);
	color: var(--color-black);
	box-shadow: none;
}

/* Forms */
input[type='text'],
input[type='email'],
input[type='url'],
input[type='tel'],
input[type='search'],
input[type='password'],
textarea,
select {
	width: 100%;
	padding: 13px 16px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background: var(--color-white);
	color: var(--color-text);
	font: inherit;
	transition:
		border-color var(--transition),
		box-shadow var(--transition);
}

input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--color-accent);
	box-shadow: 0 0 0 4px var(--color-accent-soft);
}

.search-form {
	display: flex;
	gap: 8px;
	max-width: 520px;
}
.search-form label {
	flex: 1;
}

/* Icons */
.icon {
	width: 1em;
	height: 1em;
	fill: currentColor;
	flex-shrink: 0;
}

/* Page header */
.page-header {
	margin-bottom: 48px;
}
.page-header__title {
	font-size: clamp(2rem, 4vw, 3rem);
}
.page-header__title span {
	color: var(--color-accent);
}
.page-header__description {
	color: var(--color-muted);
	max-width: 680px;
}

/* Pagination */
.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 56px;
}

.page-numbers {
	min-width: 44px;
	padding: 10px 16px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	color: var(--color-text);
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	transition: all var(--transition);
}

.page-numbers.current,
a.page-numbers:hover {
	background: var(--color-black);
	border-color: var(--color-black);
	color: var(--color-white);
}

/* ==========================================================================
   5. Header — top bar
   ========================================================================== */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
}

.admin-bar .site-header {
	top: 32px;
}

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

@media (max-width: 600px) {
	.admin-bar .site-header {
		top: 0;
	}
}

.topbar {
	position: relative;
	height: var(--topbar-height);
	overflow: hidden;
	background: var(--color-black);
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.8125rem;
	transition: height 0.35s var(--ease);
}

/* Animated accent line under the top bar */
.topbar::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
	background-size: 50% 100%;
	background-repeat: no-repeat;
	animation: topbar-sweep 6s linear infinite;
}

@keyframes topbar-sweep {
	from {
		background-position: -50% 0;
	}
	to {
		background-position: 150% 0;
	}
}

.site-header.is-scrolled .topbar {
	height: 0;
}

.topbar__inner {
	height: 100%;
}

.topbar__ticker {
	position: relative;
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.topbar__item {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	white-space: nowrap;
	opacity: 0;
	transform: translateY(100%);
	transition:
		opacity 0.5s var(--ease),
		transform 0.5s var(--ease);
	pointer-events: none;
}

.topbar__item.is-active {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.topbar__item.is-leaving {
	opacity: 0;
	transform: translateY(-100%);
}

.topbar__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--color-accent);
	color: var(--color-white);
	animation: topbar-pulse 2.4s ease-out infinite;
}

.topbar__icon .icon {
	width: 12px;
	height: 12px;
}

@keyframes topbar-pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(220, 20, 60, 0.6);
	}
	70% {
		box-shadow: 0 0 0 8px rgba(220, 20, 60, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(220, 20, 60, 0);
	}
}

.topbar__text {
	overflow: hidden;
	text-overflow: ellipsis;
}

.topbar__link,
.topbar__value {
	color: var(--color-white);
	font-weight: 700;
	text-decoration: none;
}

.topbar__link:hover {
	color: var(--color-accent);
}

/* ==========================================================================
   6. Header — main bar & navigation
   ========================================================================== */
.site-header__main {
	position: relative;
	z-index: 2;
	background: rgba(255, 255, 255, 0.96);
	border-bottom: 1px solid var(--color-border);
	transition:
		box-shadow var(--transition),
		background var(--transition);
}

@supports (backdrop-filter: blur(10px)) {
	.site-header__main {
		background: rgba(255, 255, 255, 0.85);
		backdrop-filter: saturate(180%) blur(14px);
	}
}

.site-header.is-scrolled .site-header__main {
	box-shadow: var(--shadow-sm);
}

.site-header__inner {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 32px;
	min-height: var(--header-height);
	transition: min-height 0.35s var(--ease);
}

.site-header.is-scrolled .site-header__inner {
	min-height: 68px;
}

/* Branding */
.site-branding {
	display: flex;
	align-items: center;
}

.site-title {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 900;
	letter-spacing: -0.02em;
	line-height: 1;
}

.site-title a {
	color: var(--color-black);
	text-decoration: none;
}
.site-title a:hover {
	color: var(--color-accent);
}

.custom-logo-link {
	display: block;
	line-height: 0;
}

.custom-logo {
	display: block;
	width: auto;
	max-height: 52px;
	transition: max-height 0.35s var(--ease);
}

.site-header.is-scrolled .custom-logo {
	max-height: 42px;
}

/* Desktop navigation */
.main-navigation {
	justify-self: center;
}

.main-navigation__list,
.main-navigation__list .sub-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.main-navigation__list {
	display: flex;
	align-items: center;
	gap: 6px;
}

.main-navigation__list > li {
	position: relative;
}

.main-navigation__list a {
	position: relative;
	display: block;
	padding: 10px 14px;
	color: var(--color-black);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	transition: color var(--transition);
}

.main-navigation__list > li > a::after {
	content: '';
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 4px;
	height: 2px;
	background: var(--color-accent);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.3s var(--ease);
}

.main-navigation__list > li > a:hover::after,
.main-navigation__list > .current-menu-item > a::after,
.main-navigation__list > .current-menu-ancestor > a::after {
	transform: scaleX(1);
	transform-origin: left;
}

.main-navigation__list a:hover,
.main-navigation__list .current-menu-item > a {
	color: var(--color-accent);
}

/* Dropdowns */
.main-navigation__list .menu-item-has-children > a {
	padding-right: 26px;
}

.main-navigation__list .menu-item-has-children > a::before {
	content: '';
	position: absolute;
	right: 12px;
	top: 50%;
	width: 6px;
	height: 6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-70%) rotate(45deg);
}

.main-navigation__list .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	padding: 10px;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-top: 3px solid var(--color-accent);
	border-radius: 0 0 var(--radius) var(--radius);
	box-shadow: var(--shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition:
		opacity var(--transition),
		transform var(--transition),
		visibility var(--transition);
}

.main-navigation__list li:hover > .sub-menu,
.main-navigation__list li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.main-navigation__list .sub-menu a {
	padding: 10px 12px;
	border-radius: 6px;
	font-weight: 500;
}

.main-navigation__list .sub-menu a:hover {
	background: var(--color-surface);
}

/* ==========================================================================
   7. Header — actions, search panel
   ========================================================================== */
.header-actions {
	display: flex;
	align-items: center;
	gap: 6px;
	justify-self: end;
}

.header-actions__button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--color-black);
	cursor: pointer;
	text-decoration: none;
	transition:
		background var(--transition),
		color var(--transition);
}

.header-actions__button:hover,
.header-actions__button[aria-expanded='true'] {
	background: var(--color-surface);
	color: var(--color-accent);
}

.header-actions__button .icon {
	width: 22px;
	height: 22px;
}

/* Cart counter */
.header-cart__count {
	position: absolute;
	top: 4px;
	right: 2px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--color-accent);
	color: var(--color-white);
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}

.header-cart__count.is-empty {
	background: var(--color-black);
}

/* Hamburger */
.menu-toggle {
	display: none;
}

.menu-toggle__bars {
	position: relative;
	display: block;
	width: 22px;
	height: 16px;
}

.menu-toggle__bars span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition:
		transform 0.35s var(--ease),
		opacity 0.2s,
		top 0.35s var(--ease);
}

.menu-toggle__bars span:nth-child(1) {
	top: 0;
}
.menu-toggle__bars span:nth-child(2) {
	top: 7px;
}
.menu-toggle__bars span:nth-child(3) {
	top: 14px;
}

.menu-toggle[aria-expanded='true'] .menu-toggle__bars span:nth-child(1) {
	top: 7px;
	transform: rotate(45deg);
}
.menu-toggle[aria-expanded='true'] .menu-toggle__bars span:nth-child(2) {
	opacity: 0;
}
.menu-toggle[aria-expanded='true'] .menu-toggle__bars span:nth-child(3) {
	top: 7px;
	transform: rotate(-45deg);
}

/* Search panel */
.header-search {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 1;
	padding: 28px 0;
	background: var(--color-white);
	border-bottom: 3px solid var(--color-accent);
	box-shadow: var(--shadow);
	animation: panel-in 0.3s var(--ease);
}

.header-search[hidden] {
	display: none;
}

@keyframes panel-in {
	from {
		opacity: 0;
		transform: translateY(-12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.header-search__form {
	display: flex;
	gap: 12px;
	max-width: 760px;
	margin: 0 auto;
}

.header-search__input {
	flex: 1;
	padding: 16px 20px;
	font-size: 1.0625rem;
}

.header-search__submit {
	flex-shrink: 0;
}

/* Mobile / tablet header */
@media (max-width: 1024px) {
	.site-header__inner {
		grid-template-columns: 1fr auto;
		gap: 16px;
		min-height: 68px;
	}

	/* backdrop-filter would become the containing block of the fixed menu panel */
	.site-header__main {
		background: var(--color-white);
		backdrop-filter: none;
	}

	.menu-toggle {
		display: inline-flex;
	}

	.main-navigation {
		position: fixed;
		top: var(--header-bottom, 108px);
		right: 0;
		bottom: 0;
		left: 0;
		justify-self: stretch;
		padding: 16px var(--gutter) 40px;
		overflow-y: auto;
		background: var(--color-white);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-16px);
		transition:
			opacity 0.3s var(--ease),
			transform 0.3s var(--ease),
			visibility 0.3s;
	}

	.main-navigation.is-open {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.main-navigation__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.main-navigation__list a {
		padding: 16px 4px;
		font-size: 1.125rem;
		border-bottom: 1px solid var(--color-border);
	}

	.main-navigation__list > li > a::after {
		display: none;
	}

	.main-navigation__list .menu-item-has-children > a::before {
		display: none;
	}

	.main-navigation__list .sub-menu {
		position: static;
		padding: 0 0 0 16px;
		border: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.main-navigation__list .sub-menu a {
		font-size: 1rem;
		border-radius: 0;
	}
}

@media (max-width: 600px) {
	:root {
		--topbar-height: 36px;
		--gutter: 16px;
	}

	.topbar {
		font-size: 0.75rem;
	}
	.topbar__item {
		justify-content: flex-start;
	}

	.header-search {
		padding: 16px 0;
	}
	.header-search__form {
		flex-direction: column;
	}
}

/* ==========================================================================
   8. Content
   ========================================================================== */
.post-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 32px;
}

.post-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	transition:
		box-shadow var(--transition),
		transform var(--transition),
		border-color var(--transition);
}

.post-card:hover {
	border-color: transparent;
	box-shadow: var(--shadow);
	transform: translateY(-4px);
}

.post-card__thumbnail {
	display: block;
	overflow: hidden;
}

.post-card__thumbnail img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	transition: transform 0.6s var(--ease);
}

.post-card:hover .post-card__thumbnail img {
	transform: scale(1.05);
}

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

.post-card__meta {
	margin-bottom: 10px;
	color: var(--color-accent);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.post-card__title {
	font-size: 1.25rem;
}
.post-card__title a {
	color: var(--color-black);
	text-decoration: none;
}
.post-card__title a:hover {
	color: var(--color-accent);
}

.post-card__excerpt {
	flex: 1;
	color: var(--color-muted);
}
.post-card__excerpt p {
	margin: 0 0 18px;
}

.post-card__more {
	align-self: flex-start;
	color: var(--color-black);
	font-weight: 700;
	text-decoration: none;
	border-bottom: 2px solid var(--color-accent);
	padding-bottom: 2px;
}

.post-card__more:hover {
	color: var(--color-accent);
}

/* Single entry */
.entry {
	max-width: 780px;
	margin: 0 auto;
}
.entry__header {
	margin-bottom: 36px;
}

.entry__categories a {
	color: var(--color-accent);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
}

.entry__title {
	margin: 10px 0 18px;
	font-size: clamp(2rem, 4.5vw, 3.25rem);
}

.entry__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	color: var(--color-muted);
	font-size: 0.9375rem;
}

.entry__thumbnail {
	margin: 0 0 40px;
}
.entry__thumbnail img {
	display: block;
	border-radius: var(--radius-lg);
}

.entry__content > * + * {
	margin-top: 1.3em;
}
.entry__content h2,
.entry__content h3 {
	margin-top: 1.8em;
}

.entry__content blockquote {
	margin-left: 0;
	padding: 4px 0 4px 24px;
	border-left: 4px solid var(--color-accent);
	font-size: 1.125rem;
	font-style: italic;
}

.entry__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 48px;
}

.entry__tags a {
	padding: 6px 14px;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	color: var(--color-text);
	font-size: 0.875rem;
	text-decoration: none;
	transition: all var(--transition);
}

.entry__tags a:hover {
	background: var(--color-black);
	border-color: var(--color-black);
	color: var(--color-white);
}

/* Post navigation */
.post-navigation {
	max-width: 780px;
	margin: 64px auto 0;
}

.post-navigation .nav-links {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.post-navigation a {
	display: block;
	height: 100%;
	padding: 20px 24px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	text-decoration: none;
	transition:
		border-color var(--transition),
		box-shadow var(--transition);
}

.post-navigation a:hover {
	border-color: var(--color-accent);
	box-shadow: var(--shadow-sm);
}
.post-navigation .nav-next {
	text-align: right;
}
.nav-subtitle {
	display: block;
	margin-bottom: 4px;
	color: var(--color-muted);
	font-size: 0.8125rem;
}
.nav-title {
	color: var(--color-black);
	font-weight: 700;
}

/* No results */
.no-results {
	padding: 40px 0;
	text-align: center;
}
.no-results .search-form {
	margin: 28px auto 0;
}

/* 404 */
.error-404 {
	max-width: 600px;
	margin: 0 auto;
	padding: 40px 0;
	text-align: center;
}

.error-404__code {
	margin: 0;
	font-size: clamp(6rem, 18vw, 10rem);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.05em;
	background: linear-gradient(135deg, var(--color-black) 30%, var(--color-accent));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.error-404__title {
	font-size: clamp(1.5rem, 3vw, 2rem);
}
.error-404__text {
	color: var(--color-muted);
}
.error-404__search {
	margin: 32px 0;
}
.error-404__search .search-form {
	margin: 0 auto;
}

/* ==========================================================================
   9. Comments
   ========================================================================== */
.comments {
	max-width: 780px;
	margin: 72px auto 0;
}
.comments__list {
	margin: 0 0 48px;
	padding: 0;
	list-style: none;
}
.comments__list .children {
	padding-left: 32px;
	list-style: none;
}
.comment-body {
	padding: 24px 0;
	border-bottom: 1px solid var(--color-border);
}
.comment-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 0.9375rem;
}
.comment-meta .avatar {
	border-radius: 50%;
}
.comment-reply-link {
	font-weight: 700;
	font-size: 0.875rem;
	text-decoration: none;
}
.comments__closed {
	color: var(--color-muted);
}

/* ==========================================================================
   10. Footer
   ========================================================================== */
.site-footer {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background-color: var(--dark-bg);
	color: var(--dark-text);
	font-size: 0.9375rem;
}

.site-footer--has-image {
	background-image: var(--footer-image);
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}

/* Dark overlay keeps text readable on any photo */
.site-footer::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(ellipse at top right, rgba(220, 20, 60, 0.22), transparent 55%),
		linear-gradient(180deg, rgba(10, 10, 10, 0.78) 0%, rgba(10, 10, 10, 0.93) 45%, rgba(10, 10, 10, 0.98) 100%);
}

.site-footer a {
	color: var(--dark-heading);
	text-decoration: none;
}
.site-footer a:hover {
	color: var(--color-accent);
}

/* CTA band */
.footer-cta {
	position: relative;
	padding: 56px 0;
	border-bottom: 1px solid var(--dark-line);
}

.footer-cta__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
}

.footer-cta__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px;
	color: var(--color-accent);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.footer-cta__eyebrow::before {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-accent);
	animation: topbar-pulse 2.4s ease-out infinite;
}

.footer-cta__title {
	max-width: 620px;
	margin: 0;
	color: var(--dark-heading);
	font-size: clamp(1.5rem, 3vw, 2.25rem);
}

.footer-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.site-footer .footer-cta__actions .button--primary {
	color: var(--color-white);
}
.site-footer .footer-cta__actions .button--outline-light:hover {
	color: var(--color-black);
}

/* Columns */
.site-footer__top {
	padding: 72px 0 56px;
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1.2fr 1.3fr;
	gap: 48px;
}

.footer-brand .site-title {
	margin-bottom: 16px;
	font-size: 1.75rem;
}
.footer-brand .site-title a {
	color: var(--dark-heading);
}
.footer-brand .custom-logo {
	max-height: 60px;
	margin-bottom: 18px;
}

.footer-col__text {
	max-width: 320px;
	margin: 0 0 16px;
	line-height: 1.75;
}
.footer-col__empty {
	font-size: 0.875rem;
	font-style: italic;
	opacity: 0.75;
}

.footer-col__title {
	position: relative;
	margin: 0 0 26px;
	padding-bottom: 14px;
	color: var(--dark-heading);
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.footer-col__title::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 36px;
	height: 3px;
	border-radius: 2px;
	background: var(--color-accent);
}

.footer-links,
.footer-posts,
.footer-contact {
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-links li {
	margin-bottom: 12px;
}

.site-footer .footer-links a {
	position: relative;
	display: inline-flex;
	align-items: center;
	color: var(--dark-text);
	transition:
		color var(--transition),
		padding var(--transition);
}

.site-footer .footer-links a::before {
	content: '';
	width: 0;
	height: 2px;
	margin-right: 0;
	background: var(--color-accent);
	transition:
		width var(--transition),
		margin var(--transition);
}

.site-footer .footer-links a:hover {
	color: var(--dark-heading);
}
.site-footer .footer-links a:hover::before {
	width: 12px;
	margin-right: 8px;
}

.footer-posts__item {
	padding-bottom: 14px;
	margin-bottom: 14px;
	border-bottom: 1px solid var(--dark-line);
}

.footer-posts__item:last-child {
	margin-bottom: 0;
	border-bottom: 0;
}
.footer-posts__link {
	font-weight: 600;
	line-height: 1.45;
}

.footer-posts__date {
	display: block;
	margin-top: 4px;
	color: var(--color-accent);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.footer-contact__item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin-bottom: 18px;
	line-height: 1.5;
}

.footer-contact__icon {
	display: flex;
	flex: 0 0 38px;
	align-items: center;
	justify-content: center;
	height: 38px;
	border: 1px solid var(--dark-line);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.04);
	color: var(--color-accent);
	transition:
		background var(--transition),
		color var(--transition),
		border-color var(--transition);
}

.footer-contact__item:hover .footer-contact__icon {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-white);
}

.footer-contact__icon .icon {
	width: 16px;
	height: 16px;
}
.footer-contact__text {
	padding-top: 8px;
	font-style: normal;
}

.footer-widgets .widget {
	margin-top: 20px;
}

/* Bottom bar */
.site-footer__bottom {
	padding: 22px 0;
	background: rgba(0, 0, 0, 0.55);
	border-top: 1px solid var(--dark-line);
	font-size: 0.875rem;
}

.site-footer__bottom-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 28px;
}

.site-footer__copyright {
	margin: 0;
}

.footer-legal__list {
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer .footer-legal a {
	color: var(--dark-text);
}
.site-footer .footer-legal a:hover {
	color: var(--dark-heading);
}

/* Developer credit */
.site-credit {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 7px 8px 7px 16px;
	border: 1px solid var(--dark-line);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.04);
	transition:
		border-color var(--transition),
		background var(--transition);
}

.site-credit__label {
	color: var(--dark-text);
	font-size: 0.75rem;
}

.site-credit__brand {
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--color-accent);
	color: var(--color-white);
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	transition: background var(--transition);
}

.site-footer .site-credit:hover {
	border-color: var(--color-accent);
	background: rgba(220, 20, 60, 0.12);
}
.site-footer .site-credit:hover .site-credit__label {
	color: var(--dark-heading);
}

@media (max-width: 1024px) {
	.footer-grid {
		grid-template-columns: 1fr 1fr;
	}
	.site-footer--has-image {
		background-attachment: scroll;
	}
}

@media (max-width: 600px) {
	.footer-cta {
		padding: 44px 0;
	}
	.footer-cta__actions {
		width: 100%;
	}
	.footer-cta__actions .button {
		flex: 1 1 100%;
	}

	.site-footer__top {
		padding: 56px 0 40px;
	}
	.footer-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.site-footer__bottom-inner {
		flex-direction: column;
		text-align: center;
	}
	.footer-legal__list {
		justify-content: center;
	}
}

/* ==========================================================================
   11. Back to top
   ========================================================================== */
.back-to-top {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--color-accent);
	color: var(--color-white);
	box-shadow: 0 10px 28px rgba(220, 20, 60, 0.35);
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition:
		opacity 0.3s,
		transform 0.3s var(--ease),
		visibility 0.3s,
		background var(--transition);
}

.back-to-top:hover {
	background: var(--color-black);
	color: var(--color-white);
}
.back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
}
.back-to-top .icon {
	width: 24px;
	height: 24px;
}

/* ==========================================================================
   12. WordPress core classes & accessibility
   ========================================================================== */
.alignleft {
	float: left;
	margin: 0 24px 16px 0;
}
.alignright {
	float: right;
	margin: 0 0 16px 24px;
}
.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.alignwide {
	max-width: 1040px;
}

.wp-caption-text,
.wp-element-caption {
	color: var(--color-muted);
	font-size: 0.875rem;
	text-align: center;
}

.sticky,
.bypostauthor,
.gallery-caption {
	display: block;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed !important;
	top: 12px;
	left: 12px;
	z-index: 1000;
	width: auto;
	height: auto;
	padding: 12px 20px;
	margin: 0;
	clip: auto;
	border-radius: var(--radius);
	background: var(--color-black);
	color: var(--color-white);
	font-weight: 700;
} /* ==========================================================================
   Front page
   Scope: every rule is prefixed with .fp so nothing leaks into the theme.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Design tokens
   -------------------------------------------------------------------------- */
.fp {
	--fp-color-primary: #7a1230;
	--fp-color-primary-hover: #5f0d25;
	--fp-color-accent: #c2185b;
	--fp-color-text: #1a1a1f;
	--fp-color-text-muted: #5b5d66;
	--fp-color-surface: #ffffff;
	--fp-color-surface-alt: #f6f6f7;
	--fp-color-border: #e4e4e8;
	--fp-color-dark: #121216;

	--fp-font-heading: 'Outfit', 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--fp-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

	--fp-radius-sm: 6px;
	--fp-radius-md: 10px;
	--fp-radius-lg: 14px;

	--fp-shadow-card: 0 10px 30px rgba(18, 18, 22, 0.12);
	--fp-shadow-soft: 0 2px 10px rgba(18, 18, 22, 0.06);

	--fp-container: 1200px;
	--fp-gutter: clamp(16px, 4vw, 40px);
	--fp-section-space: clamp(56px, 8vw, 96px);

	font-family: var(--fp-font-body);
	color: var(--fp-color-text);
	line-height: 1.6;
}

.fp *,
.fp *::before,
.fp *::after {
	box-sizing: border-box;
}

.fp h1,
.fp h2,
.fp h3,
.fp p,
.fp ol,
.fp ul,
.fp figure {
	margin: 0;
}

.fp ol,
.fp ul {
	padding: 0;
	list-style: none;
}

/* --------------------------------------------------------------------------
   Full-width layout
   Breaks the front page out of the theme's centered wrapper so section
   backgrounds span the whole viewport, while .fp-container keeps the
   content aligned and padded.
   -------------------------------------------------------------------------- */
body.home {
	overflow-x: clip; /* prevents horizontal scroll caused by 100vw + scrollbar */
}

.fp {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 0;
}

/* Remove the gap the theme puts between the header and the content */
body.home .site-header,
body.home #masthead,
body.home header.wp-block-template-part {
	margin-bottom: 0;
}

body.home #page,
body.home #content,
body.home .site,
body.home .site-content,
body.home .content-area,
body.home .site-main,
body.home .wp-site-blocks,
body.home .wp-site-blocks > main,
body.home main#primary {
	max-width: none;
	margin-top: 0;
	padding-top: 0;
	padding-bottom: 0;
}

body.home .wp-site-blocks > * + * {
	margin-block-start: 0; /* block themes add spacing between template parts */
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */
.fp-container {
	width: 100%;
	max-width: calc(var(--fp-container) + var(--fp-gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--fp-gutter);
}

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

.fp-section__header {
	max-width: 640px;
	margin-bottom: clamp(32px, 4vw, 48px);
}

.fp-section__lead {
	margin-top: 16px;
	font-size: 1.0625rem;
	color: var(--fp-color-text-muted);
}

.fp-card {
	background: var(--fp-color-surface);
	border-radius: var(--fp-radius-lg);
	box-shadow: var(--fp-shadow-card);
	padding: clamp(20px, 2.5vw, 28px);
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
.fp-eyebrow {
	position: relative;
	padding-top: 14px;
	margin-bottom: 12px;
	font-family: var(--fp-font-heading);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--fp-color-primary);
}

.fp-eyebrow::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 36px;
	height: 3px;
	border-radius: 2px;
	background: var(--fp-color-primary);
}

.fp-eyebrow--light {
	color: #e8a4bc;
}

.fp-eyebrow--light::before {
	background: var(--fp-color-accent);
}

.fp-heading {
	font-family: var(--fp-font-heading);
	font-size: clamp(2rem, 4vw, 2.75rem);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: var(--fp-color-text);
}

.fp-heading__accent {
	display: block;
	color: var(--fp-color-primary);
}

.fp-heading--light {
	color: #fff;
}

/* Icon slot – stays hidden until an icon (SVG / <i>) is placed inside */
.fp-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 1.25em;
	height: 1.25em;
}

.fp-icon:empty {
	display: none;
}

.fp-icon svg {
	width: 100%;
	height: 100%;
}

.fp-icon--accent {
	color: var(--fp-color-primary);
}

.fp-icon--lg {
	width: 52px;
	height: 52px;
}

/* --------------------------------------------------------------------------
   Buttons & form controls
   -------------------------------------------------------------------------- */
.fp-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 12px 24px;
	border: 0;
	border-radius: var(--fp-radius-sm);
	font-family: var(--fp-font-heading);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color 0.2s ease,
		transform 0.2s ease,
		box-shadow 0.2s ease;
}

.fp-button--primary {
	background: var(--fp-color-primary);
	color: #fff;
}

.fp-button--primary:hover,
.fp-button--primary:focus-visible {
	background: var(--fp-color-primary-hover);
	color: #fff;
	box-shadow: 0 6px 18px rgba(122, 18, 48, 0.35);
}

.fp-button--primary:active {
	transform: translateY(1px);
}

.fp-button--block {
	width: 100%;
}

.fp-button:focus-visible,
.fp-select__control:focus-visible {
	outline: 3px solid rgba(194, 24, 91, 0.35);
	outline-offset: 2px;
}

.fp-select {
	position: relative;
}

.fp-select::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 16px;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--fp-color-text);
	border-bottom: 2px solid var(--fp-color-text);
	transform: translateY(-70%) rotate(45deg);
	pointer-events: none;
}

.fp-select__control {
	width: 100%;
	min-height: 48px;
	padding: 10px 40px 10px 14px;
	border: 1px solid var(--fp-color-border);
	border-radius: var(--fp-radius-sm);
	background: var(--fp-color-surface);
	font: inherit;
	font-size: 0.9375rem;
	color: var(--fp-color-text-muted);
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	transition: border-color 0.2s ease;
}

.fp-select__control:hover {
	border-color: #c9c9d0;
}

/* --------------------------------------------------------------------------
   1. Hero
   -------------------------------------------------------------------------- */
.fp-hero {
	position: relative;
	padding-block: clamp(56px, 7vw, 88px);
	background-color: var(--fp-color-dark);
	background-image:
		linear-gradient(90deg, rgba(10, 10, 12, 0.92) 0%, rgba(10, 10, 12, 0.7) 45%, rgba(10, 10, 12, 0.15) 100%),
		var(--fp-hero-bg);
	background-size: cover;
	background-position: right center;
	color: #fff;
}

.fp-hero__header {
	max-width: 680px;
	margin-bottom: clamp(32px, 4vw, 40px);
}

.fp-hero__title {
	font-family: var(--fp-font-heading);
	font-size: clamp(2.25rem, 5vw, 3.25rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: #fff;
}

.fp-hero__title-accent {
	display: block;
	color: #e05a8a;
}

.fp-hero__lead {
	margin-top: 18px;
	font-size: 1.125rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.9);
}

.fp-hero__panels {
	display: grid;
	grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}

/* Search form */
.fp-search__fields {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin-bottom: 18px;
}

.fp-search__label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
	font-family: var(--fp-font-heading);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--fp-color-text);
}

/* Contact card */
.fp-contact {
	color: var(--fp-color-text);
}

.fp-contact__title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 18px;
	font-family: var(--fp-font-heading);
	font-size: 1.125rem;
	font-weight: 700;
}

.fp-contact__list {
	display: grid;
	gap: 12px;
	margin-bottom: 22px;
}

.fp-contact__item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 0.875rem;
	line-height: 1.5;
}

.fp-contact__item a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.fp-contact__item a:hover {
	color: var(--fp-color-primary);
}

.fp-contact .fp-button {
	min-height: 42px;
	font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
   2. Savings / breakdown
   -------------------------------------------------------------------------- */
.fp-savings {
	background: var(--fp-color-surface-alt);
}

.fp-savings__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	gap: clamp(32px, 5vw, 64px);
	align-items: center;
}

.fp-savings .fp-section__header {
	margin-bottom: 0;
}

.fp-breakdown__title {
	margin-bottom: 18px;
	font-family: var(--fp-font-heading);
	font-size: 1.25rem;
	font-weight: 700;
}

.fp-breakdown__bar {
	display: flex;
	align-items: stretch;
}

.fp-breakdown__segment {
	position: relative;
	flex: var(--fp-segment-size) 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* Coloured block (label + value) */
.fp-breakdown__label,
.fp-breakdown__value {
	width: 100%;
	font-family: var(--fp-font-heading);
}

.fp-breakdown__label {
	padding-top: 18px;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.fp-breakdown__value {
	padding-bottom: 18px;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
}

.fp-breakdown__segment--skipped .fp-breakdown__label,
.fp-breakdown__segment--skipped .fp-breakdown__value {
	background: var(--fp-color-primary);
	color: #fff;
}

.fp-breakdown__segment--core .fp-breakdown__label,
.fp-breakdown__segment--core .fp-breakdown__value {
	background: var(--fp-color-surface);
	color: var(--fp-color-text);
}

.fp-breakdown__segment--core .fp-breakdown__label {
	font-size: 0.9375rem;
}

.fp-breakdown__segment:first-child .fp-breakdown__label {
	border-top-left-radius: var(--fp-radius-sm);
}

.fp-breakdown__segment:first-child .fp-breakdown__value {
	border-bottom-left-radius: var(--fp-radius-sm);
}

.fp-breakdown__segment:last-child .fp-breakdown__label {
	border-top-right-radius: var(--fp-radius-sm);
}

.fp-breakdown__segment:last-child .fp-breakdown__value {
	border-bottom-right-radius: var(--fp-radius-sm);
}

/* Bracket + caption under each block */
.fp-breakdown__caption {
	position: relative;
	width: calc(100% - 8px);
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--fp-color-primary);
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--fp-color-text-muted);
}

.fp-breakdown__caption::before,
.fp-breakdown__caption::after {
	content: '';
	position: absolute;
	top: -8px;
	width: 1px;
	height: 8px;
	background: var(--fp-color-primary);
}

.fp-breakdown__caption::before {
	left: 0;
}

.fp-breakdown__caption::after {
	right: 0;
}

.fp-breakdown__caption strong {
	display: block;
	color: var(--fp-color-text);
}

/* Soft shadow behind the whole bar */
.fp-breakdown__bar {
	filter: drop-shadow(0 6px 14px rgba(18, 18, 22, 0.08));
}

/* --------------------------------------------------------------------------
   3. Order process steps
   -------------------------------------------------------------------------- */
.fp-steps {
	background: var(--fp-color-surface);
}

.fp-steps .fp-section__header {
	max-width: 760px;
}

.fp-steps__list {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 36px;
	counter-reset: fp-step;
}

.fp-step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 64px 18px 28px;
	text-align: center;
	background: var(--fp-color-surface);
	border: 1px solid var(--fp-color-border);
	border-radius: var(--fp-radius-md);
	box-shadow: var(--fp-shadow-soft);
	transition:
		transform 0.25s ease,
		box-shadow 0.25s ease,
		border-color 0.25s ease;
}

.fp-step:hover {
	transform: translateY(-4px);
	border-color: rgba(122, 18, 48, 0.3);
	box-shadow: var(--fp-shadow-card);
}

/* Arrow between cards */
.fp-step:not(:last-child)::after {
	content: '\2192';
	position: absolute;
	top: 50%;
	right: -27px;
	font-size: 1.25rem;
	line-height: 1;
	color: var(--fp-color-primary);
	transform: translateY(-50%);
}

.fp-step__number {
	position: absolute;
	top: 14px;
	left: 14px;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--fp-color-primary);
	font-family: var(--fp-font-heading);
	font-size: 1rem;
	font-weight: 700;
	color: #fff;
}

.fp-step__icon {
	margin-bottom: 18px;
	color: var(--fp-color-text);
}

.fp-step__title {
	font-family: var(--fp-font-heading);
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--fp-color-text);
}

.fp-step__time {
	margin-top: 10px;
	font-family: var(--fp-font-heading);
	font-size: 0.9375rem;
	font-weight: 500;
	text-transform: uppercase;
	color: var(--fp-color-text);
}

.fp-step__description {
	margin-top: 16px;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--fp-color-text-muted);
}

/* --------------------------------------------------------------------------
   4. Features (why us)
   -------------------------------------------------------------------------- */
.fp-features {
	position: relative;
	overflow: hidden;
	background-color: var(--fp-color-dark);
	background-image:
		linear-gradient(180deg, rgba(14, 14, 18, 0.88) 0%, rgba(14, 14, 18, 0.78) 60%, rgba(60, 8, 26, 0.85) 100%),
		var(--fp-features-bg);
	background-size: cover;
	background-position: center;
	color: #fff;
}

.fp-features__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}

.fp-feature {
	display: flex;
	flex-direction: column;
	padding: 24px;
	background: rgba(18, 18, 22, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--fp-radius-md);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition:
		border-color 0.25s ease,
		transform 0.25s ease;
}

.fp-feature:hover {
	border-color: rgba(224, 90, 138, 0.55);
	transform: translateY(-4px);
}

.fp-feature__badge {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin-bottom: 20px;
	border-radius: 50%;
	background: var(--fp-color-primary);
	color: #fff;
	font-size: 1.5rem;
}

.fp-feature__title {
	font-family: var(--fp-font-heading);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
	color: #fff;
}

.fp-feature__description {
	margin-top: 10px;
	font-size: 0.875rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.78);
}

.fp-tagline {
	margin-top: clamp(32px, 4vw, 48px);
	font-family: var(--fp-font-heading);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-align: right;
	text-transform: uppercase;
	word-spacing: 0.3em;
	color: rgba(255, 255, 255, 0.85);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
	.fp-steps__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.fp-step:nth-child(3)::after {
		display: none;
	}

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

@media (max-width: 960px) {
	.fp-hero__panels,
	.fp-savings__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.fp-hero {
		background-image:
			linear-gradient(180deg, rgba(10, 10, 12, 0.85) 0%, rgba(10, 10, 12, 0.75) 100%), var(--fp-hero-bg);
	}
}

@media (max-width: 720px) {
	.fp-search__fields {
		grid-template-columns: minmax(0, 1fr);
	}

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

	.fp-step:not(:last-child)::after,
	.fp-step:nth-child(3)::after {
		display: block;
		content: '\2193';
		top: auto;
		right: 50%;
		bottom: -32px;
		transform: translateX(50%);
	}

	.fp-breakdown__value {
		font-size: 1.125rem;
	}

	.fp-breakdown__label {
		font-size: 0.625rem;
		letter-spacing: 0.04em;
	}

	.fp-breakdown__caption {
		font-size: 0.6875rem;
	}

	.fp-tagline {
		text-align: center;
	}
}

@media (max-width: 560px) {
	.fp-features__list {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.fp-button,
	.fp-step,
	.fp-feature {
		transition: none;
	}

	.fp-step:hover,
	.fp-feature:hover {
		transform: none;
	}
}
/* ==========================================================================
   Site header
   Top bar marquee + main bar (logo / navigation / actions) + search panel.
   Load after the theme stylesheet so these rules take precedence.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Design tokens (shared palette with front-page.css)
   -------------------------------------------------------------------------- */
.site-header {
	--hdr-color-primary: #7a1230;
	--hdr-color-primary-hover: #5f0d25;
	--hdr-color-accent: #e05a8a;
	--hdr-color-text: #1a1a1f;
	--hdr-color-text-muted: #5b5d66;
	--hdr-color-surface: #ffffff;
	--hdr-color-surface-alt: #f6f6f7;
	--hdr-color-border: #e9e9ed;
	--hdr-color-dark: #121216;

	--hdr-font-heading: 'Outfit', 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--hdr-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

	--hdr-topbar-height: 38px;
	--hdr-main-height: 76px;
	--hdr-gutter: clamp(16px, 4vw, 40px);
	--hdr-container: 1200px;

	position: sticky;
	top: 0;
	z-index: 1000;
	margin: 0;
	font-family: var(--hdr-font-body);
	background: var(--hdr-color-surface);
	box-shadow:
		0 1px 0 var(--hdr-color-border),
		0 6px 20px rgba(18, 18, 22, 0.05);
}

/* Keep the sticky header below the WordPress admin bar */
.admin-bar .site-header {
	top: 32px;
}

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

@media (max-width: 600px) {
	.admin-bar .site-header {
		top: 0; /* admin bar is not fixed on small screens */
	}
}

.site-header *,
.site-header *::before,
.site-header *::after {
	box-sizing: border-box;
}

.site-header .container {
	width: 100%;
	max-width: calc(var(--hdr-container) + var(--hdr-gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--hdr-gutter);
}

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

/* --------------------------------------------------------------------------
   Top bar – infinite marquee
   -------------------------------------------------------------------------- */
.topbar {
	position: relative;
	height: var(--hdr-topbar-height);
	overflow: hidden;
	background: linear-gradient(90deg, var(--hdr-color-dark) 0%, #2a0a16 50%, var(--hdr-color-dark) 100%);
	color: rgba(255, 255, 255, 0.88);
	font-size: 0.8125rem;
	line-height: 1;
}

.topbar__marquee {
	height: 100%;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
}

.topbar__track {
	display: flex;
	width: max-content;
	height: 100%;
	animation: topbar-scroll var(--topbar-duration, 40s) linear infinite;
}

.topbar__marquee:hover .topbar__track,
.topbar__marquee:focus-within .topbar__track {
	animation-play-state: paused;
}

.topbar__group {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.topbar__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
}

/* Separator dot after every item – keeps the loop seamless */
.topbar__item::after {
	content: '';
	width: 5px;
	height: 5px;
	margin-inline: 28px;
	border-radius: 50%;
	background: var(--hdr-color-accent);
	opacity: 0.8;
}

.topbar__icon {
	display: inline-flex;
	width: 14px;
	height: 14px;
	color: var(--hdr-color-accent);
}

.topbar__icon svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.topbar__text {
	letter-spacing: 0.01em;
}

.topbar__link,
.topbar__value {
	font-weight: 600;
	color: #fff;
}

.topbar__link {
	text-decoration: none;
	border-bottom: 1px solid rgba(224, 90, 138, 0.6);
	transition:
		color 0.2s ease,
		border-color 0.2s ease;
}

.topbar__link:hover,
.topbar__link:focus-visible {
	color: var(--hdr-color-accent);
	border-color: var(--hdr-color-accent);
}

@keyframes topbar-scroll {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

/* --------------------------------------------------------------------------
   Main bar
   -------------------------------------------------------------------------- */
.site-header__main {
	position: relative;
	background: var(--hdr-color-surface);
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: 32px;
	min-height: var(--hdr-main-height);
}

/* Branding */
.site-branding {
	flex-shrink: 0;
	min-width: 0;
}

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

.site-branding .site-title,
.site-branding .site-title a {
	margin: 0;
	font-family: var(--hdr-font-heading);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--hdr-color-text);
	text-decoration: none;
}

.site-branding .site-description {
	margin: 2px 0 0;
	font-size: 0.75rem;
	color: var(--hdr-color-text-muted);
}

/* Navigation */
.main-navigation {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
}

.main-navigation__list {
	display: flex;
	align-items: center;
	gap: clamp(16px, 2.4vw, 32px);
}

.main-navigation__list > li {
	position: relative;
}

.main-navigation__list a {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: var(--hdr-main-height);
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--hdr-color-text);
	text-decoration: none;
	transition: color 0.2s ease;
}

.main-navigation__list > li > a::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 22px;
	height: 2px;
	border-radius: 2px;
	background: var(--hdr-color-primary);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s ease;
}

.main-navigation__list a:hover,
.main-navigation__list a:focus-visible,
.main-navigation__list .current-menu-item > a,
.main-navigation__list .current-menu-ancestor > a {
	color: var(--hdr-color-primary);
}

.main-navigation__list > li > a:hover::after,
.main-navigation__list > li > a:focus-visible::after,
.main-navigation__list > .current-menu-item > a::after,
.main-navigation__list > .current-menu-ancestor > a::after {
	transform: scaleX(1);
}

/* Dropdowns (desktop) */
.main-navigation .sub-menu {
	position: absolute;
	top: 100%;
	left: -16px;
	min-width: 220px;
	padding: 8px;
	background: var(--hdr-color-surface);
	border: 1px solid var(--hdr-color-border);
	border-radius: 10px;
	box-shadow: 0 12px 30px rgba(18, 18, 22, 0.12);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition:
		opacity 0.2s ease,
		transform 0.2s ease,
		visibility 0.2s;
}

.main-navigation li:hover > .sub-menu,
.main-navigation li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.main-navigation .sub-menu a {
	display: flex;
	min-height: 0;
	padding: 10px 12px;
	border-radius: 6px;
	font-size: 0.875rem;
}

.main-navigation .sub-menu a:hover {
	background: var(--hdr-color-surface-alt);
}

/* --------------------------------------------------------------------------
   Header actions
   -------------------------------------------------------------------------- */
.header-actions {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
	margin-left: auto;
}

.header-actions__button {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--hdr-color-text);
	cursor: pointer;
	text-decoration: none;
	transition:
		background-color 0.2s ease,
		color 0.2s ease;
}

.header-actions__button:hover,
.header-actions__button[aria-expanded='true'] {
	background: var(--hdr-color-surface-alt);
	color: var(--hdr-color-primary);
}

.header-actions__button:focus-visible,
.main-navigation__list a:focus-visible,
.topbar__link:focus-visible {
	outline: 3px solid rgba(194, 24, 91, 0.35);
	outline-offset: 2px;
}

.header-actions .icon {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

/* Cart badge */
.header-cart__count {
	position: absolute;
	top: 4px;
	right: 2px;
	display: grid;
	place-items: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background: var(--hdr-color-primary);
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1;
	color: #fff;
}

.header-cart__count.is-empty {
	display: none;
}

/* Menu toggle (hamburger → X) */
.menu-toggle {
	display: none;
}

.menu-toggle__bars {
	position: relative;
	display: block;
	width: 22px;
	height: 16px;
}

.menu-toggle__bars span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition:
		transform 0.25s ease,
		opacity 0.2s ease,
		top 0.25s ease;
}

.menu-toggle__bars span:nth-child(1) {
	top: 0;
}
.menu-toggle__bars span:nth-child(2) {
	top: 7px;
}
.menu-toggle__bars span:nth-child(3) {
	top: 14px;
}

.menu-toggle[aria-expanded='true'] .menu-toggle__bars span:nth-child(1) {
	top: 7px;
	transform: rotate(45deg);
}

.menu-toggle[aria-expanded='true'] .menu-toggle__bars span:nth-child(2) {
	opacity: 0;
}

.menu-toggle[aria-expanded='true'] .menu-toggle__bars span:nth-child(3) {
	top: 7px;
	transform: rotate(-45deg);
}

/* --------------------------------------------------------------------------
   Search panel
   -------------------------------------------------------------------------- */
.header-search {
	padding-block: 16px;
	background: var(--hdr-color-surface-alt);
	border-top: 1px solid var(--hdr-color-border);
}

.header-search[hidden] {
	display: none;
}

.header-search__form {
	display: flex;
	gap: 10px;
}

.header-search__input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 48px;
	padding: 10px 16px;
	border: 1px solid var(--hdr-color-border);
	border-radius: 6px;
	background: var(--hdr-color-surface);
	font: inherit;
	font-size: 0.9375rem;
	color: var(--hdr-color-text);
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease;
}

.header-search__input:focus {
	outline: none;
	border-color: var(--hdr-color-primary);
	box-shadow: 0 0 0 3px rgba(122, 18, 48, 0.15);
}

.header-search__submit {
	min-height: 48px;
	padding: 10px 24px;
	border: 0;
	border-radius: 6px;
	background: var(--hdr-color-primary);
	font-family: var(--hdr-font-heading);
	font-size: 0.9375rem;
	font-weight: 600;
	color: #fff;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.header-search__submit:hover,
.header-search__submit:focus-visible {
	background: var(--hdr-color-primary-hover);
}

/* --------------------------------------------------------------------------
   Responsive – mobile navigation
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
	.site-header {
		--hdr-main-height: 64px;
	}

	.menu-toggle {
		display: inline-grid;
	}

	.site-branding .site-title,
	.site-branding .site-title a {
		font-size: 1rem;
	}

	.main-navigation {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: block;
		max-height: calc(100vh - var(--hdr-topbar-height) - var(--hdr-main-height));
		overflow-y: auto;
		padding: 8px var(--hdr-gutter) 20px;
		background: var(--hdr-color-surface);
		border-top: 1px solid var(--hdr-color-border);
		box-shadow: 0 16px 30px rgba(18, 18, 22, 0.12);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition:
			opacity 0.2s ease,
			transform 0.2s ease,
			visibility 0.2s;
	}

	/* Open state – follows the toggle's aria-expanded, independent of theme JS classes */
	.site-header:has(.menu-toggle[aria-expanded='true']) .main-navigation,
	.main-navigation.toggled,
	.main-navigation.is-open {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.main-navigation__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.main-navigation__list a {
		min-height: 52px;
		width: 100%;
		border-bottom: 1px solid var(--hdr-color-border);
		font-size: 1rem;
	}

	.main-navigation__list > li > a::after {
		display: none;
	}

	.main-navigation .sub-menu {
		position: static;
		min-width: 0;
		padding: 0 0 0 16px;
		border: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}
}

@media (max-width: 480px) {
	.site-header {
		--hdr-topbar-height: 34px;
	}

	.topbar {
		font-size: 0.75rem;
	}

	.site-header__inner {
		gap: 12px;
	}

	.header-search__form {
		flex-direction: column;
	}
}

/* --------------------------------------------------------------------------
   Reduced motion – static, horizontally scrollable top bar
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.topbar__track {
		animation: none;
	}

	.topbar__marquee {
		overflow-x: auto;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.topbar__group[aria-hidden='true'] {
		display: none;
	}

	.topbar__group {
		padding-inline: var(--hdr-gutter);
	}

	.main-navigation,
	.menu-toggle__bars span,
	.main-navigation__list > li > a::after {
		transition: none;
	}
}

/* ==========================================================================
   11. Back to top
   ========================================================================== */
.back-to-top {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--color-accent);
	color: var(--color-white);
	box-shadow: 0 10px 28px rgba(220, 20, 60, 0.35);
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition:
		opacity 0.3s,
		transform 0.3s var(--ease),
		visibility 0.3s,
		background var(--transition);
}

.back-to-top:hover {
	background: var(--color-black);
	color: var(--color-white);
}
.back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
}
.back-to-top .icon {
	width: 24px;
	height: 24px;
}

/* ==========================================================================
   12. WordPress core classes & accessibility
   ========================================================================== */
.alignleft {
	float: left;
	margin: 0 24px 16px 0;
}
.alignright {
	float: right;
	margin: 0 0 16px 24px;
}
.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.alignwide {
	max-width: 1040px;
}

.wp-caption-text,
.wp-element-caption {
	color: var(--color-muted);
	font-size: 0.875rem;
	text-align: center;
}

.sticky,
.bypostauthor,
.gallery-caption {
	display: block;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed !important;
	top: 12px;
	left: 12px;
	z-index: 1000;
	width: auto;
	height: auto;
	padding: 12px 20px;
	margin: 0;
	clip: auto;
	border-radius: var(--radius);
	background: var(--color-black);
	color: var(--color-white);
	font-weight: 700;
} /* ==========================================================================
   Front page
   Scope: every rule is prefixed with .fp so nothing leaks into the theme.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Design tokens
   -------------------------------------------------------------------------- */
.fp {
	--fp-color-primary: #7a1230;
	--fp-color-primary-hover: #5f0d25;
	--fp-color-accent: #c2185b;
	--fp-color-text: #1a1a1f;
	--fp-color-text-muted: #5b5d66;
	--fp-color-surface: #ffffff;
	--fp-color-surface-alt: #f6f6f7;
	--fp-color-border: #e4e4e8;
	--fp-color-dark: #121216;

	--fp-font-heading: 'Outfit', 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--fp-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

	--fp-radius-sm: 6px;
	--fp-radius-md: 10px;
	--fp-radius-lg: 14px;

	--fp-shadow-card: 0 10px 30px rgba(18, 18, 22, 0.12);
	--fp-shadow-soft: 0 2px 10px rgba(18, 18, 22, 0.06);

	--fp-container: 1200px;
	--fp-gutter: clamp(16px, 4vw, 40px);
	--fp-section-space: clamp(56px, 8vw, 96px);

	font-family: var(--fp-font-body);
	color: var(--fp-color-text);
	line-height: 1.6;
}

.fp *,
.fp *::before,
.fp *::after {
	box-sizing: border-box;
}

.fp h1,
.fp h2,
.fp h3,
.fp p,
.fp ol,
.fp ul,
.fp figure {
	margin: 0;
}

.fp ol,
.fp ul {
	padding: 0;
	list-style: none;
}

/* --------------------------------------------------------------------------
   Full-width layout
   Breaks the front page out of the theme's centered wrapper so section
   backgrounds span the whole viewport, while .fp-container keeps the
   content aligned and padded.
   -------------------------------------------------------------------------- */
body.home {
	overflow-x: clip; /* prevents horizontal scroll caused by 100vw + scrollbar */
}

.fp {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 0;
}

/* Remove the gap the theme puts between the header and the content */
body.home .site-header,
body.home #masthead,
body.home header.wp-block-template-part {
	margin-bottom: 0;
}

body.home #page,
body.home #content,
body.home .site,
body.home .site-content,
body.home .content-area,
body.home .site-main,
body.home .wp-site-blocks,
body.home .wp-site-blocks > main,
body.home main#primary {
	max-width: none;
	margin-top: 0;
	padding-top: 0;
	padding-bottom: 0;
}

body.home .wp-site-blocks > * + * {
	margin-block-start: 0; /* block themes add spacing between template parts */
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */
.fp-container {
	width: 100%;
	max-width: calc(var(--fp-container) + var(--fp-gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--fp-gutter);
}

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

.fp-section__header {
	max-width: 640px;
	margin-bottom: clamp(32px, 4vw, 48px);
}

.fp-section__lead {
	margin-top: 16px;
	font-size: 1.0625rem;
	color: var(--fp-color-text-muted);
}

.fp-card {
	background: var(--fp-color-surface);
	border-radius: var(--fp-radius-lg);
	box-shadow: var(--fp-shadow-card);
	padding: clamp(20px, 2.5vw, 28px);
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
.fp-eyebrow {
	position: relative;
	padding-top: 14px;
	margin-bottom: 12px;
	font-family: var(--fp-font-heading);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--fp-color-primary);
}

.fp-eyebrow::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 36px;
	height: 3px;
	border-radius: 2px;
	background: var(--fp-color-primary);
}

.fp-eyebrow--light {
	color: #e8a4bc;
}

.fp-eyebrow--light::before {
	background: var(--fp-color-accent);
}

.fp-heading {
	font-family: var(--fp-font-heading);
	font-size: clamp(2rem, 4vw, 2.75rem);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: var(--fp-color-text);
}

.fp-heading__accent {
	display: block;
	color: var(--fp-color-primary);
}

.fp-heading--light {
	color: #fff;
}

/* Icon slot – stays hidden until an icon (SVG / <i>) is placed inside */
.fp-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 1.25em;
	height: 1.25em;
}

.fp-icon:empty {
	display: none;
}

.fp-icon svg {
	width: 100%;
	height: 100%;
}

.fp-icon--accent {
	color: var(--fp-color-primary);
}

.fp-icon--lg {
	width: 52px;
	height: 52px;
}

/* --------------------------------------------------------------------------
   Buttons & form controls
   -------------------------------------------------------------------------- */
.fp-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 12px 24px;
	border: 0;
	border-radius: var(--fp-radius-sm);
	font-family: var(--fp-font-heading);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color 0.2s ease,
		transform 0.2s ease,
		box-shadow 0.2s ease;
}

.fp-button--primary {
	background: var(--fp-color-primary);
	color: #fff;
}

.fp-button--primary:hover,
.fp-button--primary:focus-visible {
	background: var(--fp-color-primary-hover);
	color: #fff;
	box-shadow: 0 6px 18px rgba(122, 18, 48, 0.35);
}

.fp-button--primary:active {
	transform: translateY(1px);
}

.fp-button--block {
	width: 100%;
}

.fp-button:focus-visible,
.fp-select__control:focus-visible {
	outline: 3px solid rgba(194, 24, 91, 0.35);
	outline-offset: 2px;
}

.fp-select {
	position: relative;
}

.fp-select::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 16px;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--fp-color-text);
	border-bottom: 2px solid var(--fp-color-text);
	transform: translateY(-70%) rotate(45deg);
	pointer-events: none;
}

.fp-select__control {
	width: 100%;
	min-height: 48px;
	padding: 10px 40px 10px 14px;
	border: 1px solid var(--fp-color-border);
	border-radius: var(--fp-radius-sm);
	background: var(--fp-color-surface);
	font: inherit;
	font-size: 0.9375rem;
	color: var(--fp-color-text-muted);
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	transition: border-color 0.2s ease;
}

.fp-select__control:hover {
	border-color: #c9c9d0;
}

/* --------------------------------------------------------------------------
   1. Hero
   -------------------------------------------------------------------------- */
.fp-hero {
	position: relative;
	padding-block: clamp(56px, 7vw, 88px);
	background-color: var(--fp-color-dark);
	background-image:
		linear-gradient(90deg, rgba(10, 10, 12, 0.92) 0%, rgba(10, 10, 12, 0.7) 45%, rgba(10, 10, 12, 0.15) 100%),
		var(--fp-hero-bg);
	background-size: cover;
	background-position: right center;
	color: #fff;
}

.fp-hero__header {
	max-width: 680px;
	margin-bottom: clamp(32px, 4vw, 40px);
}

.fp-hero__title {
	font-family: var(--fp-font-heading);
	font-size: clamp(2.25rem, 5vw, 3.25rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: #fff;
}

.fp-hero__title-accent {
	display: block;
	color: #e05a8a;
}

.fp-hero__lead {
	margin-top: 18px;
	font-size: 1.125rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.9);
}

.fp-hero__panels {
	display: grid;
	grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}

/* Search form */
.fp-search__fields {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin-bottom: 18px;
}

.fp-search__label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
	font-family: var(--fp-font-heading);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--fp-color-text);
}

/* Contact card */
.fp-contact {
	color: var(--fp-color-text);
}

.fp-contact__title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 18px;
	font-family: var(--fp-font-heading);
	font-size: 1.125rem;
	font-weight: 700;
}

.fp-contact__list {
	display: grid;
	gap: 12px;
	margin-bottom: 22px;
}

.fp-contact__item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 0.875rem;
	line-height: 1.5;
}

.fp-contact__item a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.fp-contact__item a:hover {
	color: var(--fp-color-primary);
}

.fp-contact .fp-button {
	min-height: 42px;
	font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
   2. Savings / breakdown
   -------------------------------------------------------------------------- */
.fp-savings {
	background: var(--fp-color-surface-alt);
}

.fp-savings__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	gap: clamp(32px, 5vw, 64px);
	align-items: center;
}

.fp-savings .fp-section__header {
	margin-bottom: 0;
}

.fp-breakdown__title {
	margin-bottom: 18px;
	font-family: var(--fp-font-heading);
	font-size: 1.25rem;
	font-weight: 700;
}

.fp-breakdown__bar {
	display: flex;
	align-items: stretch;
}

.fp-breakdown__segment {
	position: relative;
	flex: var(--fp-segment-size) 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* Coloured block (label + value) */
.fp-breakdown__label,
.fp-breakdown__value {
	width: 100%;
	font-family: var(--fp-font-heading);
}

.fp-breakdown__label {
	padding-top: 18px;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.fp-breakdown__value {
	padding-bottom: 18px;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
}

.fp-breakdown__segment--skipped .fp-breakdown__label,
.fp-breakdown__segment--skipped .fp-breakdown__value {
	background: var(--fp-color-primary);
	color: #fff;
}

.fp-breakdown__segment--core .fp-breakdown__label,
.fp-breakdown__segment--core .fp-breakdown__value {
	background: var(--fp-color-surface);
	color: var(--fp-color-text);
}

.fp-breakdown__segment--core .fp-breakdown__label {
	font-size: 0.9375rem;
}

.fp-breakdown__segment:first-child .fp-breakdown__label {
	border-top-left-radius: var(--fp-radius-sm);
}

.fp-breakdown__segment:first-child .fp-breakdown__value {
	border-bottom-left-radius: var(--fp-radius-sm);
}

.fp-breakdown__segment:last-child .fp-breakdown__label {
	border-top-right-radius: var(--fp-radius-sm);
}

.fp-breakdown__segment:last-child .fp-breakdown__value {
	border-bottom-right-radius: var(--fp-radius-sm);
}

/* Bracket + caption under each block */
.fp-breakdown__caption {
	position: relative;
	width: calc(100% - 8px);
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--fp-color-primary);
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--fp-color-text-muted);
}

.fp-breakdown__caption::before,
.fp-breakdown__caption::after {
	content: '';
	position: absolute;
	top: -8px;
	width: 1px;
	height: 8px;
	background: var(--fp-color-primary);
}

.fp-breakdown__caption::before {
	left: 0;
}

.fp-breakdown__caption::after {
	right: 0;
}

.fp-breakdown__caption strong {
	display: block;
	color: var(--fp-color-text);
}

/* Soft shadow behind the whole bar */
.fp-breakdown__bar {
	filter: drop-shadow(0 6px 14px rgba(18, 18, 22, 0.08));
}

/* --------------------------------------------------------------------------
   3. Order process steps
   -------------------------------------------------------------------------- */
.fp-steps {
	background: var(--fp-color-surface);
}

.fp-steps .fp-section__header {
	max-width: 760px;
}

.fp-steps__list {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 36px;
	counter-reset: fp-step;
}

.fp-step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 64px 18px 28px;
	text-align: center;
	background: var(--fp-color-surface);
	border: 1px solid var(--fp-color-border);
	border-radius: var(--fp-radius-md);
	box-shadow: var(--fp-shadow-soft);
	transition:
		transform 0.25s ease,
		box-shadow 0.25s ease,
		border-color 0.25s ease;
}

.fp-step:hover {
	transform: translateY(-4px);
	border-color: rgba(122, 18, 48, 0.3);
	box-shadow: var(--fp-shadow-card);
}

/* Arrow between cards */
.fp-step:not(:last-child)::after {
	content: '\2192';
	position: absolute;
	top: 50%;
	right: -27px;
	font-size: 1.25rem;
	line-height: 1;
	color: var(--fp-color-primary);
	transform: translateY(-50%);
}

.fp-step__number {
	position: absolute;
	top: 14px;
	left: 14px;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--fp-color-primary);
	font-family: var(--fp-font-heading);
	font-size: 1rem;
	font-weight: 700;
	color: #fff;
}

.fp-step__icon {
	margin-bottom: 18px;
	color: var(--fp-color-text);
}

.fp-step__title {
	font-family: var(--fp-font-heading);
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--fp-color-text);
}

.fp-step__time {
	margin-top: 10px;
	font-family: var(--fp-font-heading);
	font-size: 0.9375rem;
	font-weight: 500;
	text-transform: uppercase;
	color: var(--fp-color-text);
}

.fp-step__description {
	margin-top: 16px;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--fp-color-text-muted);
}

/* --------------------------------------------------------------------------
   4. Features (why us)
   -------------------------------------------------------------------------- */
.fp-features {
	position: relative;
	overflow: hidden;
	background-color: var(--fp-color-dark);
	background-image:
		linear-gradient(180deg, rgba(14, 14, 18, 0.88) 0%, rgba(14, 14, 18, 0.78) 60%, rgba(60, 8, 26, 0.85) 100%),
		var(--fp-features-bg);
	background-size: cover;
	background-position: center;
	color: #fff;
}

.fp-features__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}

.fp-feature {
	display: flex;
	flex-direction: column;
	padding: 24px;
	background: rgba(18, 18, 22, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--fp-radius-md);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition:
		border-color 0.25s ease,
		transform 0.25s ease;
}

.fp-feature:hover {
	border-color: rgba(224, 90, 138, 0.55);
	transform: translateY(-4px);
}

.fp-feature__badge {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin-bottom: 20px;
	border-radius: 50%;
	background: var(--fp-color-primary);
	color: #fff;
	font-size: 1.5rem;
}

.fp-feature__title {
	font-family: var(--fp-font-heading);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
	color: #fff;
}

.fp-feature__description {
	margin-top: 10px;
	font-size: 0.875rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.78);
}

.fp-tagline {
	margin-top: clamp(32px, 4vw, 48px);
	font-family: var(--fp-font-heading);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-align: right;
	text-transform: uppercase;
	word-spacing: 0.3em;
	color: rgba(255, 255, 255, 0.85);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
	.fp-steps__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.fp-step:nth-child(3)::after {
		display: none;
	}

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

@media (max-width: 960px) {
	.fp-hero__panels,
	.fp-savings__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.fp-hero {
		background-image:
			linear-gradient(180deg, rgba(10, 10, 12, 0.85) 0%, rgba(10, 10, 12, 0.75) 100%), var(--fp-hero-bg);
	}
}

@media (max-width: 720px) {
	.fp-search__fields {
		grid-template-columns: minmax(0, 1fr);
	}

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

	.fp-step:not(:last-child)::after,
	.fp-step:nth-child(3)::after {
		display: block;
		content: '\2193';
		top: auto;
		right: 50%;
		bottom: -32px;
		transform: translateX(50%);
	}

	.fp-breakdown__value {
		font-size: 1.125rem;
	}

	.fp-breakdown__label {
		font-size: 0.625rem;
		letter-spacing: 0.04em;
	}

	.fp-breakdown__caption {
		font-size: 0.6875rem;
	}

	.fp-tagline {
		text-align: center;
	}
}

@media (max-width: 560px) {
	.fp-features__list {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.fp-button,
	.fp-step,
	.fp-feature {
		transition: none;
	}

	.fp-step:hover,
	.fp-feature:hover {
		transform: none;
	}
}
/* ==========================================================================
   Site header
   Top bar marquee + main bar (logo / navigation / actions) + search panel.
   Load after the theme stylesheet so these rules take precedence.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Design tokens (shared palette with front-page.css)
   -------------------------------------------------------------------------- */
.site-header {
	--hdr-color-primary: #7a1230;
	--hdr-color-primary-hover: #5f0d25;
	--hdr-color-accent: #e05a8a;
	--hdr-color-text: #1a1a1f;
	--hdr-color-text-muted: #5b5d66;
	--hdr-color-surface: #ffffff;
	--hdr-color-surface-alt: #f6f6f7;
	--hdr-color-border: #e9e9ed;
	--hdr-color-dark: #121216;

	--hdr-font-heading: 'Outfit', 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--hdr-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

	--hdr-topbar-height: 38px;
	--hdr-main-height: 76px;
	--hdr-gutter: clamp(16px, 4vw, 40px);
	--hdr-container: 1200px;

	position: sticky;
	top: 0;
	z-index: 1000;
	margin: 0;
	font-family: var(--hdr-font-body);
	background: var(--hdr-color-surface);
	box-shadow:
		0 1px 0 var(--hdr-color-border),
		0 6px 20px rgba(18, 18, 22, 0.05);
}

/* Keep the sticky header below the WordPress admin bar */
.admin-bar .site-header {
	top: 32px;
}

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

@media (max-width: 600px) {
	.admin-bar .site-header {
		top: 0; /* admin bar is not fixed on small screens */
	}
}

.site-header *,
.site-header *::before,
.site-header *::after {
	box-sizing: border-box;
}

.site-header .container {
	width: 100%;
	max-width: calc(var(--hdr-container) + var(--hdr-gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--hdr-gutter);
}

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

/* --------------------------------------------------------------------------
   Top bar – infinite marquee
   -------------------------------------------------------------------------- */
.topbar {
	position: relative;
	height: var(--hdr-topbar-height);
	overflow: hidden;
	background: linear-gradient(90deg, var(--hdr-color-dark) 0%, #2a0a16 50%, var(--hdr-color-dark) 100%);
	color: rgba(255, 255, 255, 0.88);
	font-size: 0.8125rem;
	line-height: 1;
}

.topbar__marquee {
	height: 100%;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
}

.topbar__track {
	display: flex;
	width: max-content;
	height: 100%;
	animation: topbar-scroll var(--topbar-duration, 40s) linear infinite;
}

.topbar__marquee:hover .topbar__track,
.topbar__marquee:focus-within .topbar__track {
	animation-play-state: paused;
}

.topbar__group {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.topbar__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
}

/* Separator dot after every item – keeps the loop seamless */
.topbar__item::after {
	content: '';
	width: 5px;
	height: 5px;
	margin-inline: 28px;
	border-radius: 50%;
	background: var(--hdr-color-accent);
	opacity: 0.8;
}

.topbar__icon {
	display: inline-flex;
	width: 14px;
	height: 14px;
	color: var(--hdr-color-accent);
}

.topbar__icon svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.topbar__text {
	letter-spacing: 0.01em;
}

.topbar__link,
.topbar__value {
	font-weight: 600;
	color: #fff;
}

.topbar__link {
	text-decoration: none;
	border-bottom: 1px solid rgba(224, 90, 138, 0.6);
	transition:
		color 0.2s ease,
		border-color 0.2s ease;
}

.topbar__link:hover,
.topbar__link:focus-visible {
	color: var(--hdr-color-accent);
	border-color: var(--hdr-color-accent);
}

@keyframes topbar-scroll {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

/* --------------------------------------------------------------------------
   Main bar
   -------------------------------------------------------------------------- */
.site-header__main {
	position: relative;
	background: var(--hdr-color-surface);
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: 32px;
	min-height: var(--hdr-main-height);
}

/* Branding */
.site-branding {
	flex-shrink: 0;
	min-width: 0;
}

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

.site-branding .site-title,
.site-branding .site-title a {
	margin: 0;
	font-family: var(--hdr-font-heading);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--hdr-color-text);
	text-decoration: none;
}

.site-branding .site-description {
	margin: 2px 0 0;
	font-size: 0.75rem;
	color: var(--hdr-color-text-muted);
}

/* Navigation */
.main-navigation {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
}

.main-navigation__list {
	display: flex;
	align-items: center;
	gap: clamp(16px, 2.4vw, 32px);
}

.main-navigation__list > li {
	position: relative;
}

.main-navigation__list a {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: var(--hdr-main-height);
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--hdr-color-text);
	text-decoration: none;
	transition: color 0.2s ease;
}

.main-navigation__list > li > a::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 22px;
	height: 2px;
	border-radius: 2px;
	background: var(--hdr-color-primary);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s ease;
}

.main-navigation__list a:hover,
.main-navigation__list a:focus-visible,
.main-navigation__list .current-menu-item > a,
.main-navigation__list .current-menu-ancestor > a {
	color: var(--hdr-color-primary);
}

.main-navigation__list > li > a:hover::after,
.main-navigation__list > li > a:focus-visible::after,
.main-navigation__list > .current-menu-item > a::after,
.main-navigation__list > .current-menu-ancestor > a::after {
	transform: scaleX(1);
}

/* Dropdowns (desktop) */
.main-navigation .sub-menu {
	position: absolute;
	top: 100%;
	left: -16px;
	min-width: 220px;
	padding: 8px;
	background: var(--hdr-color-surface);
	border: 1px solid var(--hdr-color-border);
	border-radius: 10px;
	box-shadow: 0 12px 30px rgba(18, 18, 22, 0.12);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition:
		opacity 0.2s ease,
		transform 0.2s ease,
		visibility 0.2s;
}

.main-navigation li:hover > .sub-menu,
.main-navigation li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.main-navigation .sub-menu a {
	display: flex;
	min-height: 0;
	padding: 10px 12px;
	border-radius: 6px;
	font-size: 0.875rem;
}

.main-navigation .sub-menu a:hover {
	background: var(--hdr-color-surface-alt);
}

/* --------------------------------------------------------------------------
   Header actions
   -------------------------------------------------------------------------- */
.header-actions {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
	margin-left: auto;
}

.header-actions__button {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--hdr-color-text);
	cursor: pointer;
	text-decoration: none;
	transition:
		background-color 0.2s ease,
		color 0.2s ease;
}

.header-actions__button:hover,
.header-actions__button[aria-expanded='true'] {
	background: var(--hdr-color-surface-alt);
	color: var(--hdr-color-primary);
}

.header-actions__button:focus-visible,
.main-navigation__list a:focus-visible,
.topbar__link:focus-visible {
	outline: 3px solid rgba(194, 24, 91, 0.35);
	outline-offset: 2px;
}

.header-actions .icon {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

/* Cart badge */
.header-cart__count {
	position: absolute;
	top: 4px;
	right: 2px;
	display: grid;
	place-items: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background: var(--hdr-color-primary);
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1;
	color: #fff;
}

.header-cart__count.is-empty {
	display: none;
}

/* Menu toggle (hamburger → X) */
.menu-toggle {
	display: none;
}

.menu-toggle__bars {
	position: relative;
	display: block;
	width: 22px;
	height: 16px;
}

.menu-toggle__bars span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition:
		transform 0.25s ease,
		opacity 0.2s ease,
		top 0.25s ease;
}

.menu-toggle__bars span:nth-child(1) {
	top: 0;
}
.menu-toggle__bars span:nth-child(2) {
	top: 7px;
}
.menu-toggle__bars span:nth-child(3) {
	top: 14px;
}

.menu-toggle[aria-expanded='true'] .menu-toggle__bars span:nth-child(1) {
	top: 7px;
	transform: rotate(45deg);
}

.menu-toggle[aria-expanded='true'] .menu-toggle__bars span:nth-child(2) {
	opacity: 0;
}

.menu-toggle[aria-expanded='true'] .menu-toggle__bars span:nth-child(3) {
	top: 7px;
	transform: rotate(-45deg);
}

/* --------------------------------------------------------------------------
   Search panel
   -------------------------------------------------------------------------- */
.header-search {
	padding-block: 16px;
	background: var(--hdr-color-surface-alt);
	border-top: 1px solid var(--hdr-color-border);
}

.header-search[hidden] {
	display: none;
}

.header-search__form {
	display: flex;
	gap: 10px;
}

.header-search__input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 48px;
	padding: 10px 16px;
	border: 1px solid var(--hdr-color-border);
	border-radius: 6px;
	background: var(--hdr-color-surface);
	font: inherit;
	font-size: 0.9375rem;
	color: var(--hdr-color-text);
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease;
}

.header-search__input:focus {
	outline: none;
	border-color: var(--hdr-color-primary);
	box-shadow: 0 0 0 3px rgba(122, 18, 48, 0.15);
}

.header-search__submit {
	min-height: 48px;
	padding: 10px 24px;
	border: 0;
	border-radius: 6px;
	background: var(--hdr-color-primary);
	font-family: var(--hdr-font-heading);
	font-size: 0.9375rem;
	font-weight: 600;
	color: #fff;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.header-search__submit:hover,
.header-search__submit:focus-visible {
	background: var(--hdr-color-primary-hover);
}

/* --------------------------------------------------------------------------
   Responsive – mobile navigation
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
	.site-header {
		--hdr-main-height: 64px;
	}

	.menu-toggle {
		display: inline-grid;
	}

	.site-branding .site-title,
	.site-branding .site-title a {
		font-size: 1rem;
	}

	.main-navigation {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: block;
		max-height: calc(100vh - var(--hdr-topbar-height) - var(--hdr-main-height));
		overflow-y: auto;
		padding: 8px var(--hdr-gutter) 20px;
		background: var(--hdr-color-surface);
		border-top: 1px solid var(--hdr-color-border);
		box-shadow: 0 16px 30px rgba(18, 18, 22, 0.12);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition:
			opacity 0.2s ease,
			transform 0.2s ease,
			visibility 0.2s;
	}

	/* Open state – follows the toggle's aria-expanded, independent of theme JS classes */
	.site-header:has(.menu-toggle[aria-expanded='true']) .main-navigation,
	.main-navigation.toggled,
	.main-navigation.is-open {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.main-navigation__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.main-navigation__list a {
		min-height: 52px;
		width: 100%;
		border-bottom: 1px solid var(--hdr-color-border);
		font-size: 1rem;
	}

	.main-navigation__list > li > a::after {
		display: none;
	}

	.main-navigation .sub-menu {
		position: static;
		min-width: 0;
		padding: 0 0 0 16px;
		border: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}
}

@media (max-width: 480px) {
	.site-header {
		--hdr-topbar-height: 34px;
	}

	.topbar {
		font-size: 0.75rem;
	}

	.site-header__inner {
		gap: 12px;
	}

	.header-search__form {
		flex-direction: column;
	}
}

/* --------------------------------------------------------------------------
   Reduced motion – static, horizontally scrollable top bar
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.topbar__track {
		animation: none;
	}

	.topbar__marquee {
		overflow-x: auto;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.topbar__group[aria-hidden='true'] {
		display: none;
	}

	.topbar__group {
		padding-inline: var(--hdr-gutter);
	}

	.main-navigation,
	.menu-toggle__bars span,
	.main-navigation__list > li > a::after {
		transition: none;
	}
}