/*
 * HONNA design system — built from the HONNA_Designs_FINAL_Copy Figma file.
 *
 * Fonts (Gelica, Area Extended, Area Normal) are served via the client's
 * licensed Adobe Fonts (Typekit) kit — enqueued in functions.php
 * (honna_scripts()) as https://use.typekit.net/cfq8azf.css. No font files
 * are self-hosted in this theme.
 */

/* ---------- Design tokens ---------- */
:root {
	--color-brand: #05305b;
	--color-accent: #fec465;
	--color-highlight: #dd5942;
	--color-subtle-bg: #faf6f1;
	--color-white: #ffffff;
	--color-link-underline: #7499b9;
	--underline-thickness: 1.5px;
	--underline-offset: 4px;

	--font-display: 'gelica', Georgia, 'Times New Roman', serif;
	--font-heading: 'area-extended', Helvetica, Arial, sans-serif;
	--font-body: 'area-normal', Helvetica, Arial, sans-serif;

	--container-max: 1440px;
	--container-padding: 120px;
}

body {
	font-family: var(--font-body);
	color: var(--color-brand);
	background: var(--color-white);
}

a,
a:visited {
	color: inherit;
}

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

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 16px;
	border-radius: 5px;
	border: 1.5px solid var(--color-brand);
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 16px;
	line-height: 20px;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn--primary {
	background: var(--color-brand);
	color: var(--color-white) !important;
}
.btn--outline {
	background: var(--color-white);
	color: var(--color-brand);
}
.btn--outline-white {
	background: transparent;
	color: var(--color-white);
	border-color: var(--color-white);
}
.btn--white {
	background: var(--color-white);
	color: var(--color-brand);
	border-color: var(--color-white);
}
/* Hover states. Light-theme buttons (navy / white fills) → accent-yellow fill,
   navy text. Per client review (Oct 2026) the dark-theme buttons (white /
   outline-white on the hero and navy blocks) use the same yellow + navy hover
   instead of the Figma navy fill. */
.btn--primary:hover,
.btn--primary:focus-visible,
.btn--outline:hover,
.btn--outline:focus-visible {
	background: var(--color-accent);
	color: var(--color-brand) !important;
	border-color: var(--color-brand);
}
.btn--white:hover,
.btn--white:focus-visible,
.btn--outline-white:hover,
.btn--outline-white:focus-visible {
	background: var(--color-accent);
	color: var(--color-brand) !important;
	border-color: var(--color-accent);
}
/* Navy button on the yellow "Find us" image block: white fill on hover. */
.image-block .btn--primary:hover,
.image-block .btn--primary:focus-visible {
	background: var(--color-white);
	color: var(--color-brand) !important;
	border-color: var(--color-brand);
}
.btn-group {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 16px;
	line-height: 20px;
	text-decoration: none;
	white-space: nowrap;
}
.link-arrow img {
	transition: transform 0.25s ease;
}
/* Link-with-arrow hover: the arrow slides on, the text stays put. */
.link-arrow:hover img,
.link-arrow:focus-visible img {
	transform: translateX(6px);
}

/* ---------- Animated underline ----------
   Underline drawn as a background so it can wipe away left → right on hover
   (client review, Oct 2026). Lives on an inline element — .u-link spans inside
   cards / arrow links, or inline text links directly. */
.u-link,
.footer-col .menu a,
.footer-col ul a,
.friends-list__list a,
.event-detail__venue-link,
.accordion-item__content a {
	text-decoration: none;
	background-image: linear-gradient(var(--color-link-underline), var(--color-link-underline));
	background-repeat: no-repeat;
	background-position: 100% 100%;
	background-size: 100% var(--underline-thickness);
	padding-bottom: var(--underline-offset);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	transition: background-size 0.3s ease;
}
.friends-list__list a {
	background-image: linear-gradient(var(--color-brand), var(--color-brand));
}
.u-link:hover,
a:hover > .u-link,
a:focus-visible > .u-link,
.news-card:hover .u-link,
.news-card:focus-visible .u-link,
.event-card:hover .u-link,
.event-card:focus-visible .u-link,
.product-card:hover .u-link,
.product-card:focus-visible .u-link,
a.people-grid__card:hover .u-link,
a.people-grid__card:focus-visible .u-link,
.footer-col .menu a:hover,
.footer-col ul a:hover,
.footer-col .menu a:focus-visible,
.footer-col ul a:focus-visible,
.friends-list__list a:hover,
.friends-list__list a:focus-visible,
.event-detail__venue-link:hover,
.event-detail__venue-link:focus-visible,
.accordion-item__content a:hover,
.accordion-item__content a:focus-visible {
	background-size: 0 var(--underline-thickness);
}

/* ---------- Card image zoom ----------
   Whole card (image + headline) is one link; hovering either zooms the image. */
.card-media {
	overflow: hidden;
	border-radius: 4px;
	flex-shrink: 0;
}
.card-media img,
.product-card__image {
	transition: transform 0.4s ease;
}
.news-card:hover .card-media img,
.news-card:focus-visible .card-media img,
.event-card:hover .card-media img,
.event-card:focus-visible .card-media img,
a.people-grid__card:hover .card-media img,
a.people-grid__card:focus-visible .card-media img,
.product-card:hover .product-card__image,
.product-card:focus-visible .product-card__image {
	transform: scale(1.05);
}

/* ---------- Header ---------- */
.site-header {
	background: var(--color-white);
	padding-top: 30px;
}
.site-header__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 60px;
	padding: 0 var(--container-padding);
	margin-bottom: 30px;
}
.site-logo img {
	width: 299px;
	height: auto;
	display: block;
}
.site-logo .site-logo__img--white {
	display: none;
}
.header-auth {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.main-navigation {
	padding: 0 var(--container-padding) 16px;
	display: flex;
	justify-content: flex-end;
}
.main-navigation ul {
	list-style: none;
	display: flex;
	gap: 63px;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}
.main-navigation a {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 16px;
	text-decoration: none;
	text-decoration-color: var(--color-link-underline);
	text-decoration-thickness: var(--underline-thickness);
	text-underline-offset: var(--underline-offset);
	padding: 8px 0;
	display: inline-block;
}
/* Nav pill hover / active (per Figma "Navigation pill" component):
   the light-blue underline appears on hover and for the current page. */
.main-navigation a:hover,
.main-navigation a:focus-visible,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a,
.main-navigation .current-menu-ancestor > a {
	/* -line, not the shorthand: `text-decoration: underline` resets the colour
	   back to currentColor (navy). */
	text-decoration-line: underline;
}
.menu-toggle {
	display: none;
}

/* ---------- Block separators ----------
   Per client feedback: every top-level block — plus the header and the
   newsletter band — carries a 1.5px navy bottom border for separation.
   Exception: when image + text "paragraph & media" style blocks stack
   directly on top of one another, only the last block in the run keeps its
   border (avoids a stack of lines between adjacent media blocks). */
.site-header {
	border-bottom: 1.5px solid var(--color-brand);
}
.site-main > section {
	border-bottom: 1.5px solid var(--color-brand);
}
.newsletter-signup {
	border-bottom: 1.5px solid var(--color-brand);
}
.site-main > .paragraph-media:has(+ .paragraph-media),
.site-main > .content-block:has(+ .content-block),
.site-main > .feature-block:has(+ .feature-block) {
	border-bottom: none;
}

/* ---------- Hero ---------- */
.hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 597px;
	padding: 160px var(--container-padding) 80px;
	background-size: cover;
	background-position: center bottom;
}
.hero__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.3);
}
.hero__content {
	position: relative;
	z-index: 1;
	max-width: 754px;
	display: flex;
	flex-direction: column;
	gap: 32px;
	color: var(--color-white);
}
.hero__title-block {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.hero__heading {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 72px;
	line-height: 80px;
	max-width: 754px;
	margin: 0;
}
.hero__subheading {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 24px;
	line-height: 34px;
	max-width: 569px;
	margin: 0;
}

/* ---------- Rich text ---------- */
.rich-text {
	background: var(--color-white);
	padding: 80px var(--container-padding);
	display: flex;
	justify-content: center;
}
.rich-text__inner {
	max-width: 780px;
}
.rich-text__inner p {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 24px;
	line-height: 34px;
	margin: 0;
}

/* ---------- Stats block ---------- */
.stats-block {
	background: var(--color-subtle-bg);
	padding: 80px var(--container-padding) 0;
}
.stats-block__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 60px;
	margin-bottom: 50px;
}
.stats-block__header h2 {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 48px;
	line-height: 54px;
	margin: 0;
	flex: 1;
}
.stats-block__nav {
	display: none;
	gap: 10px;
	flex-shrink: 0;
}
.stats-block--nav-desktop .stats-block__nav {
	display: flex;
}
.arrow-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: var(--color-white);
	border: 1.5px solid var(--color-brand);
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.2s ease;
}
/* Slider arrow hover (per Figma "Arrow button" component): accent-yellow fill.
   Disabled arrows (start/end of track) stay inert. */
.arrow-btn:not(:disabled):hover,
.arrow-btn:not(:disabled):focus-visible {
	background: var(--color-accent);
}
.arrow-btn:hover,
.arrow-btn:focus,
.arrow-btn:active {
	border-color: var(--color-brand);
}
/* Timeline (red block): flip to navy fill, white outline + white arrow. */
.timeline-block .arrow-btn:not(:disabled):hover,
.timeline-block .arrow-btn:not(:disabled):focus-visible {
	background: var(--color-brand);
	border-color: var(--color-white);
}
.timeline-block .arrow-btn:not(:disabled):hover .arrow-btn__icon,
.timeline-block .arrow-btn:not(:disabled):focus-visible .arrow-btn__icon {
	filter: brightness(0) invert(1);
}
.arrow-btn:disabled {
	opacity: 0.35;
	cursor: default;
}
.arrow-btn__icon {
	width: 16px;
	height: 16px;
}
.arrow-btn__icon--left {
	transform: scaleX(-1);
}
.stats-block__slider {
	overflow: hidden;
}
.stats-block__track {
	display: flex;
	gap: 60px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	padding-bottom: 32px;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.stats-block__track::-webkit-scrollbar {
	display: none;
}
.stats-card {
	width: calc(25% - 45px);
	flex-shrink: 0;
	scroll-snap-align: start;
}
@media (min-width: 901px) {
	.stats-block--nav-desktop .stats-card {
		width: calc((100% - 240px) / 4.5);
	}
}
.stats-card__number {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 48px;
	line-height: 54px;
	color: var(--color-highlight);
	margin: 0;
}
.stats-card__label {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 20px;
	line-height: 1.2;
	margin: 4px 0 0;
}
.stats-block__illustration {
	width: 100vw;
	margin-left: 50%;
	margin-bottom: -2px;
	transform: translateX(-50%);
}
.stats-block__illustration img {
	width: 100%;
	height: auto;
	display: block;
}

/* ---------- Paragraph & media ---------- */
.paragraph-media {
	position: relative;
	background: var(--color-brand);
	color: var(--color-white);
	display: flex;
	align-items: center;
	gap: 60px;
	padding: 80px var(--container-padding);
	overflow: hidden;
}
.paragraph-media__texture {
	position: absolute;
	inset: 0;
	background-image: url('../img/texture-paragraph.png');
	background-size: 2457px auto;
	background-repeat: repeat;
	background-position: top left;
	opacity: 0.08;
	pointer-events: none;
}
.paragraph-media__text {
	position: relative;
	z-index: 1;
	flex: 0 1 45%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}
.paragraph-media__text h2 {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 48px;
	line-height: 54px;
	color: var(--color-accent);
	margin: 0;
}
.paragraph-media__text p {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 20px;
	line-height: 28px;
	margin: 0 0 8px;
}
.paragraph-media__image {
	position: relative;
	z-index: 1;
	flex: 0 1 55%;
	max-width: 100%;
}
.paragraph-media__image img {
	width: 100%;
	height: auto;
}

/* ---------- Section header (shared: news / product grids) ---------- */
.section-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
	flex-wrap: wrap;
	margin-bottom: 32px;
}
.section-header__text h2,
.card-grid-news h2,
.cards-grid-events__header h2,
.cards-grid-product h2 {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 48px;
	line-height: 54px;
	margin: 0 0 8px;
}
.section-header__text p,
.cards-grid-events__header p {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 20px;
	line-height: 28px;
	margin: 0;
}

/* ---------- Card grid / News ---------- */
.card-grid-news {
	background: var(--color-white);
	padding: 80px var(--container-padding);
}
.card-grid-news__cards {
	display: flex;
	flex-wrap: wrap;
	gap: 60px;
	justify-content: space-between;
}
.news-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 30%;
	max-width: 100%;
	text-decoration: none;
	color: var(--color-brand);
}
.news-card__image {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}
.news-card__title {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 24px;
	line-height: 34px;
	margin: 0 0 16px;
}
.news-card__date {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 18px;
	line-height: 26px;
	margin: 0;
}

/* ---------- Cards grid / Events ---------- */
.cards-grid-events {
	background: var(--color-white);
	display: flex;
	gap: 100px;
	padding: 80px var(--container-padding);
	flex-wrap: wrap;
}
.cards-grid-events__header {
	display: flex;
	flex-direction: column;
	gap: 32px;
	align-items: flex-start;
	max-width: 360px;
}
.cards-grid-events__list {
	display: flex;
	flex-direction: column;
	gap: 40px;
	flex: 1;
	min-width: 280px;
}
.event-card {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	text-decoration: none;
	color: var(--color-brand);
}
.event-card__image {
	width: 255px;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}
.event-card__content {
	flex: 1;
	min-width: 200px;
}
.event-card__title {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 24px;
	line-height: 34px;
	margin: 0 0 8px;
}
.event-card__meta {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 18px;
	line-height: 26px;
	margin: 0 0 4px;
}

/* ---------- Cards grid / Product ---------- */
.cards-grid-product {
	background: var(--color-white);
	padding: 80px var(--container-padding);
}
.cards-grid-product__list {
	display: flex;
	flex-wrap: wrap;
	gap: 60px;
	justify-content: space-between;
}
.product-card {
	width: 21%;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-decoration: none;
	color: var(--color-brand);
}
.product-card__image-wrap {
	background: var(--color-subtle-bg);
	border-radius: 4px;
	width: 100%;
	height: 240px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.product-card__image {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}
.product-card__content {
	width: 100%;
}
.product-card__title {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 24px;
	line-height: 34px;
	margin: 0 0 8px;
}
.product-card__price {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 18px;
	line-height: 26px;
	margin: 0;
}
.product-card__price del {
	opacity: 0.5;
	margin-right: 6px;
	text-decoration: line-through;
}
.product-card__price ins {
	text-decoration: none;
	background: none;
}

/* ---------- Newsletter signup ---------- */
.newsletter-signup {
	position: relative;
	background: var(--color-accent);
	padding: 80px var(--container-padding);
	overflow: hidden;
}
.newsletter-signup__texture {
	position: absolute;
	inset: 0;
	background-image: url('../img/texture-paragraph.png');
	background-size: 2457px auto;
	background-repeat: repeat;
	background-position: top left;
	opacity: 0.2;
	pointer-events: none;
}
.newsletter-signup__inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 80px;
	flex-wrap: wrap;
}
.newsletter-signup__heading {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 20px;
	line-height: 28px;
	max-width: 673px;
	text-align: left;
	margin: 0;
}
.newsletter-signup__form {
	display: flex;
	align-items: center;
	width: 359px;
	max-width: 100%;
	background: var(--color-white);
	border: 1.5px solid var(--color-brand);
	border-radius: 4px;
	overflow: hidden;
}
.newsletter-signup__form input[type='email'] {
	flex: 1;
	min-width: 0;
	border: none;
	padding: 12px 16px;
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 16px;
	color: var(--color-brand);
	background: transparent;
}
.newsletter-signup__form input[type='email']::placeholder {
	color: var(--color-brand);
	opacity: 1;
}
.newsletter-signup__form button {
	border: none;
	background: transparent;
	flex-shrink: 0;
	width: 46px;
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

/* ---------- Footer ---------- */
.site-footer {
	background: var(--color-white);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	padding: 80px var(--container-padding) 32px;
}
.footer-nav {
	display: flex;
	gap: 39px;
	width: 100%;
	max-width: 1200px;
	flex-wrap: wrap;
}
.footer-nav__logo img {
	width: 101px;
	height: auto;
}
.footer-nav__columns {
	display: flex;
	gap: 45px;
	flex: 1;
	flex-wrap: wrap;
}
.footer-col {
	flex: 1;
	min-width: 160px;
}
.footer-col__title {
	font-family: var(--font-body);
	font-weight: 900;
	font-size: 12px;
	letter-spacing: 3px;
	text-transform: uppercase;
	margin: 0 0 10px;
}
.footer-col .menu,
.footer-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.footer-col .menu a,
.footer-col ul a {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 18px;
}
.footer-col__social {
	display: flex;
	gap: 16px;
	margin-top: 16px;
}
.footer-graphic {
	align-self: stretch;
	width: 100vw;
	margin-left: 50%;
	transform: translateX(-50%);
}
.footer-graphic img {
	width: 100%;
	height: auto;
	display: block;
}
.footer-legal {
	max-width: 848px;
	text-align: left;
	width: 100%;
}
.footer-legal p {
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 18px;
	margin: 0 0 4px;
}
.footer-legal p:first-child {
	font-weight: 900;
}

/* ---------- Page Intro ---------- */
.page-intro {
	background: var(--color-subtle-bg);
	padding: 80px var(--container-padding);
	display: flex;
	flex-direction: column;
	gap: 32px;
}
.page-intro__content {
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 884px;
}
.page-intro__heading {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 72px;
	line-height: 80px;
	margin: 0;
}
.page-intro__body {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 24px;
	line-height: 34px;
	margin: 0;
}
.page-intro__images {
	display: flex;
	gap: 60px;
	flex-wrap: wrap;
}
.page-intro__image {
	width: 465px;
	max-width: 100%;
	height: 310px;
	object-fit: cover;
	border-radius: 4px;
}

/* ---------- Content Block ---------- */
.content-block {
	background: var(--color-white);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 60px;
	padding: 64px var(--container-padding);
}
.content-block--image-right {
	flex-direction: row-reverse;
}
.content-block__image {
	flex-shrink: 0;
	width: 465px;
	max-width: 100%;
}
.content-block__image img {
	width: 100%;
	height: auto;
	display: block;
}
.content-block__text {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 465px;
	max-width: 100%;
}
.content-block__tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	padding: 8px;
	border-radius: 4px;
	font-family: var(--font-body);
	font-weight: 900;
	font-size: 12px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--color-brand);
}
.content-block__tag--accent {
	background: var(--color-accent);
}
.content-block__tag--success {
	background: #a3bf73;
}
.content-block__tag--highlight {
	background: var(--color-highlight);
}
.content-block__heading {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 40px;
	line-height: 48px;
	margin: 0;
}
.content-block__body {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 18px;
	line-height: 26px;
	margin: 0;
}

/* ---------- Feature Block ---------- */
.feature-block {
	background: var(--color-white);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 60px;
	padding: 40px var(--container-padding);
}
.feature-block--spacing-lead {
	padding-top: 80px;
}
.feature-block--spacing-trail {
	padding-bottom: 80px;
	border-bottom: 1.5px solid var(--color-brand);
}
.feature-block--image-right {
	flex-direction: row-reverse;
}
.feature-block__image {
	flex-shrink: 0;
	width: 465px;
	max-width: 100%;
}
.feature-block__image img {
	width: 100%;
	height: auto;
	display: block;
}
.feature-block__text {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 465px;
	max-width: 100%;
}
.feature-block__heading {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 40px;
	line-height: 44px;
	margin: 0;
}
.feature-block__subheading {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 20px;
	line-height: 28px;
	margin: 0;
}
.feature-block__heading + .feature-block__subheading {
	margin-top: -8px;
}
.feature-block__body {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 18px;
	line-height: 26px;
	margin: 0;
}
.feature-block__text > .btn {
	align-self: flex-start;
}

/* ---------- People Grid ---------- */
.people-grid {
	background: var(--color-white);
	padding: 64px var(--container-padding);
	display: flex;
	flex-direction: column;
	gap: 30px;
}
.people-grid__header {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 780px;
}
.people-grid__header h2 {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 48px;
	line-height: 54px;
	margin: 0;
}
.people-grid__header p {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 20px;
	line-height: 28px;
	margin: 0;
}
.people-grid__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 60px;
}
.people-grid__card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	text-decoration: none;
	color: var(--color-brand);
}
.people-grid__image {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}
.people-grid__meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.people-grid__name {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 24px;
	line-height: 34px;
	margin: 0;
}
.people-grid__title {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 18px;
	line-height: 26px;
	margin: 0;
}

/* ---------- Friends List ---------- */
.friends-list {
	position: relative;
	background: var(--color-highlight);
	padding: 80px var(--container-padding);
	overflow: hidden;
}
.friends-list__texture {
	position: absolute;
	inset: 0;
	background-image: url('../img/texture-paragraph.png');
	background-size: 2457px auto;
	background-repeat: repeat;
	background-position: top left;
	opacity: 0.08;
	pointer-events: none;
}
.friends-list__content {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 60px;
}
.friends-list__text {
	flex: 1 1 0;
	min-width: 0;
}
.friends-list__text h2 {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 48px;
	line-height: 54px;
	color: var(--color-brand);
	margin: 0 0 8px;
}
.friends-list__text > p {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 20px;
	line-height: 28px;
	color: var(--color-white);
	margin: 0 0 24px;
}
.friends-list__columns {
	display: flex;
	flex-wrap: wrap;
	gap: 60px;
}
.friends-list__list {
	list-style: disc;
	margin: 0;
	padding: 0 0 0 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.friends-list__list li {
	list-style: disc;
}
.friends-list__list li::marker {
	color: var(--color-white);
}
.friends-list__list a,
.friends-list__list li {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 20px;
	line-height: 28px;
	color: var(--color-white);
}

.friends-list__image {
	flex: 1 1 0;
	min-width: 0;
}
.friends-list__image img {
	width: 100%;
	height: auto;
	border-radius: 4px;
	display: block;
}

/* ---------- CTA ---------- */
.cta {
	position: relative;
	padding: 80px var(--container-padding);
	overflow: hidden;
}
.cta--brand {
	background: var(--color-brand);
}
.cta--simple {
	background: var(--color-white);
	padding: 64px var(--container-padding);
}
.cta__texture {
	position: absolute;
	inset: 0;
	background-image: url('../img/texture-paragraph.png');
	background-size: 2457px auto;
	background-repeat: repeat;
	background-position: top left;
	opacity: 0.08;
	pointer-events: none;
}
.cta__inner {
	position: relative;
	z-index: 1;
	display: flex;
	gap: 60px;
	align-items: flex-start;
}
.cta__heading-col {
	flex-shrink: 0;
	width: 360px;
}
.cta__heading {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 48px;
	line-height: 54px;
	margin: 0;
}
.cta--brand .cta__heading {
	color: var(--color-accent);
}
.cta--simple .cta__heading {
	color: var(--color-highlight);
}
.cta__content-col {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 32px;
}
.cta__body {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 20px;
	line-height: 28px;
	margin: 0;
}
.cta--brand .cta__body {
	color: var(--color-white);
}
.cta--simple .cta__body {
	color: var(--color-brand);
}
.cta__images {
	display: flex;
	gap: 32px;
	flex-wrap: wrap;
}
.cta__images img {
	width: 238px;
	max-width: 100%;
	height: auto;
}
.cta__content-col > .btn {
	align-self: flex-start;
}

/* ---------- Rich Intro ---------- */
.rich-intro {
	background: var(--color-subtle-bg);
	border-bottom: 1.5px solid var(--color-brand);
	padding: 80px var(--container-padding);
	display: flex;
	flex-direction: column;
	gap: 32px;
}
.rich-intro__content {
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 884px;
}
.rich-intro__heading {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 72px;
	line-height: 80px;
	margin: 0;
}
.rich-intro__intro-copy {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 24px;
	line-height: 34px;
	margin: 0;
}
.rich-intro__body {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 18px;
	line-height: 26px;
}
.rich-intro__body p {
	margin: 0 0 18px;
}
.rich-intro__body p:last-child {
	margin-bottom: 0;
}
.rich-intro__images {
	display: flex;
	gap: 60px;
	flex-wrap: wrap;
}
.rich-intro__image {
	width: 465px;
	max-width: 100%;
	height: 310px;
	object-fit: cover;
	border-radius: 4px;
}

/* ---------- Card grid / Feature ---------- */
.card-grid-feature {
	background: var(--color-white);
	padding: 80px var(--container-padding);
}
.card-grid-feature__cards {
	display: flex;
	flex-wrap: wrap;
	gap: 60px;
	justify-content: space-between;
}
.feature-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 30%;
	max-width: 100%;
	color: var(--color-brand);
}
.feature-card__image {
	border-radius: 4px;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}
.feature-card__title {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 24px;
	line-height: 34px;
	margin: 0;
}
.feature-card__description {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 18px;
	line-height: 26px;
	margin: 0;
}

/* ---------- Timeline Block ---------- */
.timeline-block {
	background: var(--color-highlight);
	border-bottom: 1.5px solid var(--color-brand);
	padding: 80px var(--container-padding);
}
.timeline-block__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 60px;
	margin-bottom: 50px;
}
.timeline-block__header-text {
	color: var(--color-white);
	max-width: 1049px;
}
.timeline-block__header-text h2 {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 48px;
	line-height: 54px;
	margin: 0 0 10px;
}
.timeline-block__header-text p {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 20px;
	line-height: 28px;
	margin: 0;
}
.timeline-block__nav {
	display: flex;
	gap: 10px;
	flex-shrink: 0;
}
.timeline-block__slider {
	overflow: hidden;
}
.timeline-block__track {
	display: flex;
	gap: 60px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.timeline-block__track::-webkit-scrollbar {
	display: none;
}
.timeline-card {
	width: 285px;
	flex-shrink: 0;
	scroll-snap-align: start;
}
.timeline-card__year {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 48px;
	line-height: 54px;
	color: var(--color-brand);
	margin: 0 0 4px;
}
.timeline-card__description {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 18px;
	line-height: 26px;
	color: var(--color-white);
	margin: 0;
}

/* ---------- Image Block ---------- */
.image-block {
	background: var(--color-accent);
	border-bottom: 1.5px solid var(--color-brand);
	padding: 80px 225px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px;
}
.image-block__header {
	color: var(--color-brand);
	max-width: 989px;
}
.image-block__header h2 {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 48px;
	line-height: 54px;
	margin: 0 0 8px;
}
.image-block__header p {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 20px;
	line-height: 28px;
	margin: 0;
}
.image-block__image {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 4px;
}

/* ---------- Image Carousel Block ---------- */
.image-carousel-block {
	--carousel-active-w: 780px;
	--carousel-inactive-w: 464px;
	--carousel-gap: 60px;
	background: var(--color-white);
	border-bottom: 1.5px solid var(--color-brand);
	padding: 80px var(--container-padding);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
}
.image-carousel-block__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 60px;
	width: 100%;
	max-width: 1200px;
}
.image-carousel-block__header-text {
	color: var(--color-brand);
	flex: 1;
	min-width: 0;
}
.image-carousel-block__header-text h2 {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 48px;
	line-height: 54px;
	margin: 0 0 10px;
}
.image-carousel-block__header-text p {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 20px;
	line-height: 28px;
	margin: 0;
}
.image-carousel-block__nav {
	display: flex;
	gap: 10px;
	flex-shrink: 0;
}
.image-carousel-block__viewport {
	width: 100%;
	overflow: hidden;
	/* Pin to the active slide's height: mid-transition the growing + shrinking
	   slides are both shorter, which made the dots/next block jump. */
	height: calc(var(--carousel-active-w) * 2 / 3);
	display: flex;
	align-items: center;
}
.image-carousel-block__track {
	display: flex;
	align-items: center;
	gap: var(--carousel-gap);
	width: max-content;
	transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.carousel-slide {
	flex-shrink: 0;
	width: var(--carousel-inactive-w);
	height: calc(var(--carousel-inactive-w) * 2 / 3);
	opacity: 0.5;
	border-radius: 4px;
	overflow: hidden;
	transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1), height 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.carousel-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.carousel-slide.is-active {
	width: var(--carousel-active-w);
	height: calc(var(--carousel-active-w) * 2 / 3);
	opacity: 1;
}
.image-carousel-block__dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}
.carousel-dot {
	width: 40px;
	height: 3px;
	padding: 0;
	border: 0;
	border-radius: 2px;
	background: var(--color-link-underline);
	cursor: pointer;
}
.carousel-dot.is-active {
	background: var(--color-brand);
}

/* ---------- Neighborhood News Archive Grid ---------- */
.news-archive {
	background: var(--color-white);
	border-bottom: 1.5px solid var(--color-brand);
	padding: 80px var(--container-padding);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 64px;
}
.news-archive .card-grid-news__cards {
	justify-content: flex-start;
	width: 100%;
	max-width: 100%;
}
.news-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 32px;
	flex-wrap: wrap;
	width: 100%;
	max-width: 100%;
}
.news-pagination__prev,
.news-pagination__next {
	color: var(--color-brand);
}
.news-pagination__prev--disabled,
.news-pagination__next--disabled {
	opacity: 0.5;
	pointer-events: none;
}
.news-pagination__prev--disabled .u-link,
.news-pagination__next--disabled .u-link {
	background-size: 0 var(--underline-thickness);
}
.news-pagination__list {
	display: flex;
	align-items: center;
	gap: 8px;
}
.news-pagination__page,
.news-pagination__gap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 4px;
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 16px;
	color: var(--color-brand);
	text-decoration: none;
}
.news-pagination__page {
	border: 1.5px solid var(--color-brand);
}
.news-pagination__page.is-current {
	background: var(--color-brand);
	color: var(--color-white);
}
.news-pagination__gap {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 18px;
}

/* ---------- What's Happening Events Archive ---------- */
.events-archive {
	background: var(--color-white);
	display: flex;
	gap: 165px;
	padding: 80px var(--container-padding);
}
.events-archive__sidebar {
	display: flex;
	flex-direction: column;
	gap: 32px;
	width: 360px;
	flex-shrink: 0;
}
.events-archive__main {
	flex: 1;
	min-width: 280px;
	display: flex;
	flex-direction: column;
	gap: 64px;
}

.calendar-widget {
	background: var(--color-white);
	border: 1.5px solid var(--color-brand);
	border-radius: 8px;
	padding: 16px;
}
.calendar-widget__nav {
	display: flex;
	align-items: center;
	gap: 8px;
}
.calendar-widget__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	color: var(--color-brand);
	text-decoration: none;
	font-size: 16px;
}
.calendar-widget__select {
	flex: 1;
	min-width: 0;
	border: 1.5px solid var(--color-brand);
	border-radius: 4px;
	padding: 6px;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 16px;
	color: var(--color-brand);
	background: var(--color-white);
}
.calendar-widget__weekdays {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	margin-top: 16px;
}
.calendar-widget__weekdays span {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-body);
	font-size: 12px;
	color: var(--color-brand);
	text-align: center;
}
.calendar-widget__days {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	row-gap: 2px;
}
.calendar-widget__day {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1;
	max-width: 40px;
	max-height: 40px;
	margin: 0 auto;
	border-radius: 8px;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 16px;
	color: var(--color-brand);
	text-decoration: none;
}
.calendar-widget__day--empty {
	visibility: hidden;
}
.calendar-widget__day--event {
	background: var(--color-brand);
	color: var(--color-white);
	font-weight: 700;
}
.calendar-widget__day--event.is-selected {
	background: var(--color-accent);
	color: var(--color-brand);
}

.tag-toggle-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.tag-toggle {
	display: flex;
	align-items: center;
	padding: 8px 12px;
	border: 1.5px solid var(--color-brand);
	border-radius: 8px;
	background: var(--color-white);
	color: var(--color-brand);
	font-family: var(--font-body);
	font-weight: 900;
	font-size: 12px;
	letter-spacing: 3px;
	text-transform: uppercase;
	text-decoration: none;
}
.tag-toggle {
	transition: background-color 0.2s ease, color 0.2s ease;
}
.tag-toggle:not(.is-active):hover,
.tag-toggle:not(.is-active):focus-visible {
	background: var(--color-accent);
}
.tag-toggle.is-active {
	background: var(--color-brand);
	color: var(--color-white);
}

.event-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}
.tag-pill {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
	border-radius: 4px;
	background: var(--color-subtle-bg);
	color: var(--color-brand);
	font-family: var(--font-body);
	font-weight: 900;
	font-size: 12px;
	letter-spacing: 3px;
	text-transform: uppercase;
}

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
	:root {
		--container-padding: 60px;
	}
	.image-block {
		padding-left: 60px;
		padding-right: 60px;
	}
}

@media (max-width: 900px) {
	:root {
		--container-padding: 24px;
	}
	.site-header {
		position: relative;
	}
	.site-header__row {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
		padding-right: 84px;
	}
	.main-navigation {
		position: absolute;
		top: 30px;
		right: var(--container-padding);
		width: 44px;
		padding: 0;
		display: block;
	}
	.menu-toggle {
		display: block;
		position: relative;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 1.5px solid var(--color-brand);
		border-radius: 4px;
		background: var(--color-white);
		color: transparent;
		font-size: 0;
		cursor: pointer;
	}
	.menu-toggle::before,
	.menu-toggle::after {
		content: '';
		position: absolute;
		left: 11px;
		right: 11px;
		height: 2px;
		background: var(--color-brand);
	}
	/* Three bars: ::before (top), .menu-toggle__bars (middle), ::after (bottom). */
	.menu-toggle::before {
		top: 14px;
	}
	.menu-toggle::after {
		top: 28px;
	}
	.menu-toggle__bars {
		position: absolute;
		left: 11px;
		right: 11px;
		top: 21px;
		height: 2px;
		background: var(--color-brand);
	}
	.main-navigation ul {
		display: none;
		position: absolute;
		top: 54px;
		right: 0;
		flex-direction: column;
		gap: 4px;
		width: 240px;
		max-width: calc(100vw - 2 * var(--container-padding));
		margin: 0;
		padding: 16px;
		background: var(--color-white);
		border: 1.5px solid var(--color-brand);
		border-radius: 8px;
		box-shadow: 0 8px 24px rgba(5, 48, 91, 0.15);
		z-index: 20;
	}
	.main-navigation.toggled ul {
		display: flex;
	}
	.main-navigation a {
		padding: 8px 0;
		width: 100%;
	}
	.hero__heading {
		font-size: 44px;
		line-height: 1.15;
	}
	.stats-block__header,
	.section-header,
	.cards-grid-events {
		flex-direction: column;
		align-items: flex-start;
	}
	.paragraph-media {
		flex-direction: column;
	}
	.paragraph-media__text,
	.paragraph-media__image {
		flex-basis: auto;
		width: 100%;
	}
	.footer-nav {
		flex-direction: column;
	}
	.page-intro__image,
	.rich-intro__image {
		width: 100%;
		height: auto;
	}
	.content-block,
	.content-block--image-right,
	.feature-block,
	.feature-block--image-right {
		flex-direction: column;
	}
	.content-block__image,
	.content-block__text,
	.feature-block__image,
	.feature-block__text {
		width: 100%;
	}
	.people-grid__grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.friends-list__content {
		flex-direction: column;
	}
	.friends-list__image {
		width: 100%;
	}
	.cta__inner {
		flex-direction: column;
	}
	.cta__heading-col {
		width: 100%;
	}
	.timeline-block__header,
	.image-carousel-block__header {
		flex-direction: column;
		align-items: flex-start;
	}
	.image-block__image {
		height: auto;
	}
	.image-block {
		padding-left: 24px;
		padding-right: 24px;
	}
	.events-archive {
		flex-direction: column;
		gap: 40px;
	}
	.events-archive__sidebar {
		width: 100%;
	}
	.stats-block__nav {
		display: flex;
	}
	.stats-card {
		width: calc(50% - 30px);
	}
	.card-grid-news__cards,
	.card-grid-feature__cards,
	.related-news__list {
		gap: 32px;
	}
	.news-card,
	.feature-card {
		width: calc(50% - 16px);
	}
	.cards-grid-product__list {
		gap: 32px;
	}
	.product-card {
		width: calc(50% - 16px);
	}
	.image-carousel-block {
		--carousel-active-w: 460px;
		--carousel-inactive-w: 320px;
		--carousel-gap: 32px;
	}
	.timeline-card {
		width: 240px;
	}
	.timeline-block__track {
		gap: 32px;
	}
}

/* ---------- Product Detail (single product) ---------- */
.product-detail {
	background: var(--color-subtle-bg);
	border-bottom: 1.5px solid var(--color-brand);
	padding: 80px var(--container-padding);
}
.product-detail__inner {
	display: flex;
	flex-direction: column;
	gap: 32px;
	max-width: 1200px;
}
.product-detail__title {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 48px;
	line-height: 54px;
	color: var(--color-brand);
	margin: 0;
	max-width: 884px;
}
.product-detail__info {
	display: flex;
	gap: 60px;
	align-items: flex-start;
}
.product-detail__image {
	width: 570px;
	height: 570px;
	max-width: 45%;
	border-radius: 4px;
	object-fit: contain;
	object-position: center;
	background: var(--color-white);
	flex-shrink: 0;
}
.product-detail__content {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px;
}
.product-detail__price {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 72px;
	line-height: 80px;
	color: var(--color-brand);
	margin: 0;
}
.product-detail__price del {
	opacity: 0.5;
	margin-right: 12px;
	text-decoration: line-through;
	font-size: 0.6em;
}
.product-detail__price ins {
	text-decoration: none;
	background: none;
}
.product-detail__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.tag-pill--white {
	background: var(--color-white);
}
.product-detail__description {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 18px;
	line-height: 26px;
	color: var(--color-brand);
}
.product-detail__description p {
	margin: 0 0 8px;
}
.product-detail__description p:last-child {
	margin-bottom: 0;
}
.product-detail__buy .button,
.product-detail__buy .single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 16px;
	border-radius: 5px;
	border: 1.5px solid var(--color-brand);
	background: var(--color-brand);
	color: var(--color-white);
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 16px;
	line-height: 20px;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}
.product-detail__buy form.cart {
	display: flex;
	align-items: center;
	gap: 12px;
}
.product-detail__buy .quantity {
	margin: 0;
}
.product-detail__buy .quantity .qty {
	width: 64px;
	padding: 12px;
	border: 1.5px solid var(--color-brand);
	border-radius: 5px;
	font-family: var(--font-body);
	font-size: 16px;
	color: var(--color-brand);
}

/* ---------- Return to link ---------- */
.return-to-link {
	padding: 80px var(--container-padding);
	border-bottom: 1.5px solid var(--color-brand);
}
.link-arrow--back img {
	transform: scaleX(-1);
}
.link-arrow--back:hover img,
.link-arrow--back:focus-visible img {
	transform: scaleX(-1) translateX(6px);
}

@media (max-width: 900px) {
	.product-detail__info {
		flex-direction: column;
	}
	.product-detail__image {
		width: 100%;
		max-width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
	}
}

/* ---------- Article hero shared rules (News / Event / Bio detail) ---------- */
.news-detail,
.event-detail,
.bio-detail {
	background: var(--color-subtle-bg);
	border-bottom: 1.5px solid var(--color-brand);
	padding: 80px var(--container-padding);
}
.news-detail__inner,
.event-detail__inner {
	display: flex;
	flex-direction: column;
	gap: 32px;
	max-width: 884px;
}
.bio-detail__inner {
	display: flex;
	flex-direction: column;
	gap: 32px;
	max-width: 990px;
}
/* Text column is narrower than the images (Figma: 779 vs 990). */
.bio-detail__name,
.bio-detail__role,
.bio-detail__tagline,
.bio-detail__body {
	max-width: 779px;
}
.news-detail__title,
.event-detail__title {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 48px;
	line-height: 54px;
	color: var(--color-brand);
	margin: 0;
}
.news-detail__image,
.event-detail__image,
.bio-detail__image {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	border-radius: 4px;
	object-fit: cover;
	object-position: center;
}
.news-detail__intro {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 20px;
	line-height: 28px;
	color: var(--color-brand);
	margin: 0;
}
.news-detail__body,
.event-detail__description,
.bio-detail__body {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 18px;
	line-height: 26px;
	color: var(--color-brand);
}
.news-detail__body p,
.event-detail__description p,
.bio-detail__body p {
	margin: 0 0 16px;
}
.news-detail__body p:last-child,
.event-detail__description p:last-child,
.bio-detail__body p:last-child {
	margin-bottom: 0;
}

/* The Events Calendar wraps single events in a max-width container. */
#tribe-events-pg-template {
	max-width: none;
	margin: 0;
	padding: 0;
}

/* ---------- Event Detail meta block ---------- */
.event-detail__meta {
	max-width: 100%;
}
.event-detail__meta-label {
	font-family: var(--font-body);
	font-weight: 900;
	font-size: 12px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--color-brand);
	margin: 0 0 4px;
}
.event-detail__meta-value {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 20px;
	line-height: 28px;
	color: var(--color-brand);
	margin: 0 0 16px;
}
.event-detail__venue-link {
	color: var(--color-brand);
}
.event-detail__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* ---------- Related events / Related news ---------- */
.related-events,
.related-news {
	background: var(--color-white);
	border-bottom: 1.5px solid var(--color-brand);
	padding: 80px var(--container-padding);
}
.related-events {
	display: flex;
	gap: 60px;
	align-items: flex-start;
}
.related-events__title {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 48px;
	line-height: 54px;
	color: var(--color-brand);
	margin: 0;
	flex-shrink: 0;
	width: 360px;
}
.related-events__list {
	display: flex;
	flex-direction: column;
	gap: 24px;
	flex: 1;
	min-width: 0;
}
.related-news__title {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 48px;
	line-height: 54px;
	color: var(--color-brand);
	margin: 0 0 32px;
}
.related-news__list {
	display: flex;
	flex-wrap: wrap;
	gap: 60px;
	justify-content: space-between;
}

/* ---------- Bio Detail ---------- */
.bio-detail__name {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 72px;
	line-height: 80px;
	color: var(--color-brand);
	margin: 0;
}
.bio-detail__role {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 40px;
	line-height: 48px;
	color: var(--color-brand);
	margin: 0;
}
.bio-detail__tagline {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 24px;
	line-height: 34px;
	color: var(--color-brand);
	margin: 0;
}
.bio-detail__side-images {
	display: flex;
	gap: 60px;
	width: 100%;
}
.bio-detail__side-image {
	flex: 1 1 0;
	min-width: 0;
	height: auto;
	aspect-ratio: 3 / 2;
	border-radius: 4px;
	object-fit: cover;
	object-position: center top;
}

@media (max-width: 900px) {
	.event-detail__image,
	.news-detail__image,
	.bio-detail__image {
		height: auto;
		aspect-ratio: 3 / 2;
	}
	.related-events {
		flex-direction: column;
		gap: 32px;
	}
	.related-events__title {
		width: 100%;
	}
	.bio-detail__side-images {
		flex-direction: column;
	}
	.bio-detail__side-image {
		width: 100%;
	}
}

/* ---------- Card grid / Pricing ---------- */
.card-grid-pricing {
	background: var(--color-white);
	padding: 80px var(--container-padding);
}
.section-header__body {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 18px;
	line-height: 26px;
	margin: 16px 0 0;
	max-width: 780px;
}
.card-grid-pricing__cards {
	display: flex;
	flex-wrap: wrap;
	gap: 60px;
	margin-top: 32px;
}
.pricing-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: calc((100% - 120px) / 3);
	max-width: 100%;
	padding: 24px;
	border-radius: 4px;
	border: 1.5px solid var(--color-brand);
	background: var(--color-subtle-bg);
	color: var(--color-brand);
}
.pricing-card__label {
	font-family: var(--font-body);
	font-weight: 900;
	font-size: 12px;
	letter-spacing: 3px;
	text-transform: uppercase;
	margin: 0;
}
.pricing-card__price {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 48px;
	line-height: 54px;
	margin: 0;
}
.pricing-card__price-unit {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 18px;
	line-height: 26px;
}
.pricing-card__features {
	list-style: disc;
	padding-left: 27px;
	margin: 0;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 18px;
	line-height: 26px;
}
.pricing-card__features li {
	margin-bottom: 4px;
}
.pricing-card__button {
	width: 100%;
}

/* ---------- Accordion (FAQ) ---------- */
.accordion-block {
	padding: 80px var(--container-padding);
	border-bottom: 1.5px solid var(--color-brand);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
}
.accordion-block .section-header {
	width: 100%;
	max-width: 780px;
	margin-bottom: 0;
	justify-content: flex-start;
}
.accordion-block__disclaimer {
	font-family: var(--font-body);
	font-style: italic;
	font-weight: 500;
	font-size: 18px;
	line-height: 26px;
	margin: 8px 0 0;
}
.accordion-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 780px;
	max-width: 100%;
}
.accordion-item {
	border: 1.5px solid var(--color-brand);
	border-radius: 8px;
	background: var(--color-subtle-bg);
	padding: 16px;
}
.accordion-item[open] {
	background: var(--color-white);
}
.accordion-item__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	cursor: pointer;
	list-style: none;
	font-family: var(--font-body);
	font-weight: 900;
	font-size: 18px;
	line-height: 26px;
	color: var(--color-brand);
}
.accordion-item__title::-webkit-details-marker {
	display: none;
}
.accordion-item__icon {
	flex-shrink: 0;
	width: 10px;
	height: 10px;
	background-image: url('../img/icon-chevron.svg');
	background-repeat: no-repeat;
	background-size: contain;
	transform: rotate(-90deg);
}
.accordion-item[open] .accordion-item__icon {
	transform: rotate(90deg);
}
.accordion-item__content {
	margin-top: 8px;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 18px;
	line-height: 26px;
	color: var(--color-brand);
}
.accordion-item__content p {
	margin: 0 0 18px;
}
.accordion-item__content p:last-child {
	margin-bottom: 0;
}
.accordion-item__content p em {
	font-style: italic;
}
.accordion-item__content ul {
	margin: 0;
	padding-left: 1.2em;
	list-style: disc;
}
.accordion-item__content li {
	margin-bottom: 12px;
}
.accordion-item__content li:last-child {
	margin-bottom: 0;
}
.accordion-item__content strong {
	font-weight: 900;
}
.accordion-item__content a {
	color: var(--color-brand);
	font-weight: 900;
}

@media (max-width: 900px) {
	.card-grid-pricing__cards {
		flex-direction: column;
	}
	.pricing-card {
		width: 100%;
	}
	.accordion-list {
		width: 100%;
	}
}

/* ---------- Contact Form (Gravity Forms embed) ---------- */
.contact-form {
	background: var(--color-white);
	display: flex;
	justify-content: center;
	padding: 80px var(--container-padding);
}
.contact-form__inner {
	width: 100%;
	max-width: 780px;
}
.contact-form .gform_wrapper {
	max-width: 780px;
}
.contact-form .gform_wrapper .gform_fields {
	display: flex;
	flex-direction: column;
	gap: 24px;
	grid-row-gap: 24px;
}
.contact-form .gform_wrapper .gfield {
	grid-column: 1 / -1;
	margin: 0 !important;
}
.contact-form .gform_wrapper .gfield_required {
	display: none;
}
.contact-form .gform_wrapper .gfield_label,
.contact-form .gform_wrapper .gform-field-label,
.contact-form .gform_wrapper legend.gfield_label {
	font-family: var(--font-body) !important;
	font-weight: 900 !important;
	font-size: 18px !important;
	line-height: 26px !important;
	color: var(--color-brand) !important;
	margin: 0 0 8px !important;
}
.contact-form .gform_wrapper .ginput_container input[type='text'],
.contact-form .gform_wrapper .ginput_container input[type='email'],
.contact-form .gform_wrapper .ginput_container textarea {
	width: 100%;
	border: 1.5px solid var(--color-brand) !important;
	border-radius: 4px !important;
	padding: 12px 16px !important;
	font-family: var(--font-body) !important;
	font-weight: 500 !important;
	font-size: 18px !important;
	line-height: 26px !important;
	color: var(--color-brand) !important;
	background: var(--color-white) !important;
	box-shadow: none !important;
}
.contact-form .gform_wrapper .ginput_container textarea {
	min-height: 80px;
	resize: vertical;
}
.contact-form .gform_wrapper .gform_footer,
.contact-form .gform_wrapper .gform-footer {
	margin: 0 !important;
	padding: 0 !important;
}
.contact-form .gform_wrapper .gform_button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	padding: 12px 16px !important;
	border-radius: 5px !important;
	border: 1.5px solid var(--color-brand) !important;
	background: var(--color-brand) !important;
	color: var(--color-white) !important;
	font-family: var(--font-heading) !important;
	font-weight: 800 !important;
	font-size: 16px !important;
	line-height: 20px !important;
	cursor: pointer;
	box-shadow: none !important;
}
.contact-form .gform_wrapper .validation_error {
	font-family: var(--font-body);
	color: var(--color-highlight) !important;
	border-color: var(--color-highlight) !important;
}
.contact-form .gform_wrapper .gfield_validation_message,
.contact-form .gform_wrapper .gfield_description.validation_message {
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--color-highlight) !important;
}
.contact-form .gform_confirmation_wrapper {
	font-family: var(--font-body);
	font-size: 18px;
	color: var(--color-brand);
}

/* ---------- Contact Info ---------- */
.contact-info {
	background: var(--color-white);
	border-bottom: 1.5px solid var(--color-brand);
	display: flex;
	justify-content: center;
	padding: 40px var(--container-padding);
}
.contact-info__inner {
	width: 100%;
	max-width: 780px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.contact-info__heading {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 40px;
	line-height: 48px;
	margin: 0;
}
.contact-info__details p {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 18px;
	line-height: 26px;
	margin: 0;
}
.contact-info__social {
	display: flex;
	align-items: center;
	gap: 16px;
}

/* ---------- WooCommerce Notices (add-to-cart success/error) ---------- */
.woocommerce-notices-wrapper--product {
	padding: 24px var(--container-padding) 0;
}
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
	list-style: none;
	margin: 0 0 24px;
	padding: 16px 20px;
	border: 1.5px solid var(--color-brand);
	border-radius: 8px;
	background: var(--color-subtle-bg);
	color: var(--color-brand);
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 18px;
	line-height: 26px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.woocommerce-error {
	border-color: var(--color-highlight);
	color: var(--color-highlight);
}
.woocommerce-message {
	background: var(--color-brand);
	color: var(--color-white);
}
.woocommerce-message li,
.woocommerce-error li,
.woocommerce-info li {
	list-style: none;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	width: 100%;
}
.woocommerce-message .button.wc-forward {
	background: var(--color-white) !important;
	color: var(--color-brand) !important;
	border-color: var(--color-white) !important;
}
.woocommerce-message .button.wc-forward:hover,
.woocommerce-message .button.wc-forward:focus-visible {
	background: var(--color-accent) !important;
	border-color: var(--color-accent) !important;
}
.woocommerce-message .button.wc-forward,
.woocommerce-info .button.wc-forward {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 16px;
	border-radius: 5px;
	border: 1.5px solid var(--color-brand);
	background: var(--color-brand);
	color: var(--color-white);
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 16px;
	line-height: 20px;
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
}

/* =====================================================================
   Fallback / utility pages (Cart, Checkout, My Account, 404, Search)
   These render default WordPress/WooCommerce markup rather than the
   ACF Page Sections builder, so they need their own container width +
   base typography layer. Scoped to .site-main--default so full-bleed
   ACF builder sections (which manage their own edge-to-edge
   backgrounds) are never affected.
   ===================================================================== */

.site-main--default {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 60px var(--container-padding) 100px;
}

/* ---------- Generic page title + body typography ---------- */
.site-main--default .entry-header,
.site-main--default .page-header {
	margin-bottom: 32px;
}
.site-main--default .entry-title,
.site-main--default .page-title {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 48px;
	line-height: 54px;
	color: var(--color-brand);
	margin: 0;
}
.site-main--default .entry-content,
.site-main--default .page-content {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 18px;
	line-height: 26px;
	color: var(--color-brand);
}
.site-main--default .entry-content h2,
.site-main--default .page-content h2 {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 32px;
	line-height: 1.2;
	color: var(--color-brand);
	margin: 40px 0 16px;
}
.site-main--default .entry-content h3,
.site-main--default .page-content h3 {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 22px;
	line-height: 1.3;
	color: var(--color-brand);
	margin: 32px 0 12px;
}
.site-main--default .entry-content p {
	margin: 0 0 18px;
}
.site-main--default .entry-content a,
.site-main--default .page-content a {
	color: var(--color-brand);
	text-decoration: underline;
	text-decoration-color: var(--color-link-underline);
	text-decoration-thickness: 2px;
	font-weight: 900;
}
.site-main--default .entry-content ul,
.site-main--default .page-content ul {
	margin: 0 0 18px;
	padding-left: 1.2em;
}
.site-main--default .entry-content li {
	margin-bottom: 8px;
}

/* ---------- Search form (used on 404 + search results) ---------- */
.search-form {
	display: flex;
	gap: 12px;
	max-width: 460px;
	margin: 24px 0 32px;
	flex-wrap: wrap;
}
.search-form .search-field {
	flex: 1 0 auto;
	min-width: 200px;
	border: 1.5px solid var(--color-brand);
	border-radius: 4px;
	padding: 12px 16px;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 16px;
	color: var(--color-brand);
	background: var(--color-white);
}
.search-form .search-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 20px;
	border-radius: 5px;
	border: 1.5px solid var(--color-brand);
	background: var(--color-brand);
	color: var(--color-white);
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 16px;
	cursor: pointer;
}

/* ---------- 404 page ---------- */
.error-404__home-link {
	display: inline-flex;
	margin-bottom: 48px;
}
.error-404__recent h2 {
	font-family: var(--font-heading) !important;
	font-weight: 600 !important;
	font-size: 22px !important;
	margin: 0 0 16px !important;
}
.error-404__recent ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* ---------- Search results list ---------- */
.site-main--default article {
	padding-bottom: 32px;
	margin-bottom: 32px;
	border-bottom: 1.5px solid var(--color-subtle-bg);
}
.site-main--default article:last-of-type {
	border-bottom: none;
}
.site-main--default .entry-summary p {
	margin: 0;
}
.page-header .page-title span {
	color: var(--color-highlight);
}
.posts-navigation,
.pagination {
	display: flex;
	gap: 12px;
	margin-top: 32px;
}
.posts-navigation a,
.pagination a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 16px;
	border-radius: 5px;
	border: 1.5px solid var(--color-brand);
	color: var(--color-brand);
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 14px;
	text-decoration: none;
}

/* =====================================================================
   WooCommerce Blocks — Cart & Checkout
   Base layout/spacing comes from WC's own block stylesheets; these
   rules only recolor/refont to match the site design system.
   ===================================================================== */

/* Cart/Checkout 2-column layout. WooCommerce sizes the main + sidebar columns
   to sum to ~100% of the container, so a plain `gap` on the flex row overflows
   and wraps the sidebar underneath. Only apply the gap in the .is-large
   (2-column) state and give the columns explicit widths that leave room for it;
   narrower containers get WC's native stacked layout. */
.wc-block-components-sidebar-layout.is-large {
	gap: 48px;
	flex-wrap: nowrap;
}
.wc-block-components-sidebar-layout.is-large > .wc-block-components-main {
	flex: 1 1 auto !important;
	max-width: none !important;
}
.wc-block-components-sidebar-layout.is-large > .wc-block-components-sidebar {
	flex: 0 0 380px !important;
	max-width: 380px !important;
}
.wc-block-cart-items,
.wc-block-components-main {
	font-family: var(--font-body);
	color: var(--color-brand);
}
.wc-block-cart-items__header th span,
.wc-block-cart-items__header th {
	font-family: var(--font-body);
	font-weight: 900;
	font-size: 12px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--color-brand);
}
.wc-block-cart-items__row,
.wc-block-cart-items {
	border-color: var(--color-subtle-bg) !important;
}
.wc-block-components-product-name {
	font-family: var(--font-heading) !important;
	font-weight: 700 !important;
	color: var(--color-brand) !important;
	text-decoration: underline;
	text-decoration-color: var(--color-link-underline);
}
.wc-block-components-product-price,
.wc-block-components-totals-item__value,
.wc-block-components-order-summary-item__total-price {
	font-family: var(--font-body);
	color: var(--color-brand);
}
.wc-block-components-product-metadata__description p {
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--color-brand);
}

/* Quantity stepper */
.wc-block-components-quantity-selector {
	border: 1.5px solid var(--color-brand) !important;
	border-radius: 4px;
	overflow: hidden;
}
.wc-block-components-quantity-selector__button,
.wc-block-components-quantity-selector__input {
	font-family: var(--font-heading);
	font-weight: 700;
	color: var(--color-brand);
}
.wc-block-components-quantity-selector__button {
	background: var(--color-white);
}

/* Totals / Order summary panel */
.wc-block-components-sidebar,
.wc-block-components-order-summary {
	border: 1.5px solid var(--color-brand);
	border-radius: 8px;
	padding: 24px;
	background: var(--color-subtle-bg);
}
.wc-block-components-order-summary {
	border: none;
	padding: 0;
	background: none;
}
.wc-block-cart__totals-title,
.wc-block-components-checkout-order-summary__title-text,
.wc-block-components-checkout-step__title {
	font-family: var(--font-display) !important;
	font-weight: 400 !important;
	color: var(--color-brand) !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}
.wc-block-components-totals-item__label,
.wc-block-components-totals-item__description,
.wc-block-components-panel__button {
	font-family: var(--font-body);
	color: var(--color-brand);
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 20px;
}
.wc-block-components-totals-wrapper {
	border-color: var(--color-brand) !important;
}

/* Buttons (Proceed to Checkout / Place Order / Update cart) */
.wc-block-components-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	background: var(--color-brand) !important;
	border: 1.5px solid var(--color-brand) !important;
	border-radius: 5px !important;
	font-family: var(--font-heading) !important;
	font-weight: 800 !important;
	color: var(--color-white) !important;
	text-decoration: none !important;
	box-shadow: none !important;
}
.wc-block-components-button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
	opacity: 0.9;
}

/* Form inputs (billing/shipping address, contact info) */
.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wc-block-components-select-input select,
.wc-block-components-combobox-control input {
	font-family: var(--font-body) !important;
	color: var(--color-brand) !important;
}
.wc-block-components-text-input input,
.wc-block-components-select-input select {
	border-color: var(--color-brand) !important;
	border-radius: 4px !important;
}
.wc-block-components-text-input input:focus,
.wc-block-components-select-input select:focus {
	outline-color: var(--color-brand);
	box-shadow: none !important;
}
.wc-block-components-text-input label,
.wc-block-components-select-input label {
	font-family: var(--font-body) !important;
}
.wc-block-components-checkbox__mark {
	color: var(--color-brand);
}
.wc-block-components-checkbox__input:checked + .wc-block-components-checkbox__mark {
	color: var(--color-brand);
}
.wc-block-checkout__terms,
.wc-block-components-checkbox__label {
	font-family: var(--font-body);
	color: var(--color-brand);
}

/* Client type scale on Cart / Checkout (review, Oct 2026):
   H3 40/48, H4 24/34, body 18/26, small 12/18. WC Blocks default to 13px. */
.wc-block-cart .wc-block-components-product-name {
	font-family: var(--font-heading) !important;
	font-weight: 600 !important;
	font-size: 24px !important;
	line-height: 34px !important;
}
.wc-block-cart .wc-block-components-product-price,
.wc-block-cart .wc-block-components-product-metadata__description p,
.wc-block-cart .wc-block-components-totals-coupon .wc-block-components-panel__button,
.wc-block-components-country-input select,
.wc-block-components-country-input input {
	font-size: 18px !important;
	line-height: 26px !important;
}
.wc-block-cart__totals-title,
.wc-block-components-checkout-step__title {
	font-size: 40px !important;
	line-height: 48px !important;
}
.wc-block-components-checkout-order-summary__title-text {
	font-family: var(--font-heading) !important;
	font-weight: 600 !important;
	font-size: 24px !important;
	line-height: 34px !important;
}
.wc-block-components-order-summary-item__description .wc-block-components-product-name {
	font-family: var(--font-heading) !important;
	font-weight: 600 !important;
	font-size: 20px !important;
	line-height: 28px !important;
}
.wc-block-checkout__guest-checkout-notice,
.wc-block-components-address-form__address_2-toggle,
.wc-block-checkout__add-note .wc-block-components-checkbox__label,
.wc-block-components-order-summary-item__description .wc-block-components-product-metadata__description p {
	font-size: 12px !important;
	line-height: 18px !important;
}
/* Order summary sits inside the bordered sidebar already — drop WC's inner box. */
.wp-block-woocommerce-checkout-order-summary-block {
	border: none !important;
}
/* Navy rule between the Cart / Checkout content and the newsletter band. */
.site-main--default + .newsletter-signup {
	border-top: 1.5px solid var(--color-brand);
}

/* Notices (e.g. "no payment methods available") */
.wc-block-components-notice-banner {
	border-radius: 8px !important;
	font-family: var(--font-body) !important;
}
.wc-block-components-notice-banner.is-error {
	border-color: var(--color-highlight) !important;
	background: #fdf1ee !important;
}
.wc-block-components-notice-banner.is-error .wc-block-components-notice-banner__content,
.wc-block-components-notice-banner.is-error svg {
	color: var(--color-highlight) !important;
	fill: var(--color-highlight) !important;
}

/* =====================================================================
   Classic WooCommerce (My Account, login/register, lost password)
   ===================================================================== */

.site-main--default .woocommerce {
	font-family: var(--font-body);
	color: var(--color-brand);
}
.site-main--default .woocommerce h2 {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 32px;
	color: var(--color-brand);
	margin: 0 0 24px;
}
.site-main--default .woocommerce .woocommerce-form-row label,
.site-main--default .woocommerce label {
	font-family: var(--font-body);
	font-weight: 900;
	font-size: 16px;
	color: var(--color-brand);
	display: block;
	margin-bottom: 8px;
}
.site-main--default .woocommerce .woocommerce-Input,
.site-main--default .woocommerce input.input-text,
.site-main--default .woocommerce input[type='text'],
.site-main--default .woocommerce input[type='email'],
.site-main--default .woocommerce input[type='password'],
.site-main--default .woocommerce input[type='tel'],
.site-main--default .woocommerce select,
.site-main--default .woocommerce textarea {
	border: 1.5px solid var(--color-brand);
	border-radius: 4px;
	padding: 12px 16px;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 16px;
	color: var(--color-brand);
	background: var(--color-white);
	max-width: 360px;
	width: 100%;
}
.site-main--default .woocommerce .woocommerce-form-row {
	margin-bottom: 20px;
}
.site-main--default .woocommerce .password-input {
	position: relative;
	display: block;
	max-width: 360px;
}
.site-main--default .woocommerce .password-input .woocommerce-Input {
	max-width: 100%;
}
.site-main--default .woocommerce .woocommerce-button,
.site-main--default .woocommerce button.button,
.site-main--default .woocommerce a.button,
.site-main--default .woocommerce input.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 20px;
	border-radius: 5px;
	border: 1.5px solid var(--color-brand);
	background: var(--color-brand);
	color: var(--color-white) !important;
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 16px;
	cursor: pointer;
	text-decoration: none;
}
.site-main--default .woocommerce .woocommerce-form__input-checkbox {
	width: auto;
	margin-right: 8px;
}
.site-main--default .woocommerce .show-password-input {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	padding: 0;
	width: 20px;
	height: 20px;
	opacity: 0.6;
}
.site-main--default .woocommerce .password-input .woocommerce-Input {
	padding-right: 44px;
}
.site-main--default .woocommerce .woocommerce-LostPassword a {
	color: var(--color-brand);
	text-decoration: underline;
	text-decoration-color: var(--color-link-underline);
}

/* My Account dashboard (once logged in) */
.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	border-bottom: 1.5px solid var(--color-subtle-bg);
	padding-bottom: 16px;
}
.woocommerce-MyAccount-navigation li a {
	display: inline-flex;
	padding: 8px 16px;
	border-radius: 20px;
	background: var(--color-subtle-bg);
	color: var(--color-brand);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
}
.woocommerce-MyAccount-navigation li.is-active a {
	background: var(--color-brand);
	color: var(--color-white);
}
.woocommerce-MyAccount-content table,
.site-main--default .woocommerce table.shop_table {
	width: 100%;
	border-collapse: collapse;
	margin: 16px 0;
	font-family: var(--font-body);
}
.woocommerce-MyAccount-content th,
.site-main--default .woocommerce table.shop_table th {
	text-align: left;
	font-family: var(--font-body);
	font-weight: 900;
	font-size: 12px;
	letter-spacing: 2px;
	text-transform: uppercase;
	padding: 12px 8px;
	border-bottom: 1.5px solid var(--color-brand);
}
.woocommerce-MyAccount-content td,
.site-main--default .woocommerce table.shop_table td {
	padding: 12px 8px;
	border-bottom: 1.5px solid var(--color-subtle-bg);
}
.woocommerce-Addresses {
	display: flex;
	gap: 40px;
	flex-wrap: wrap;
}
.woocommerce-Address {
	flex: 1 1 300px;
}
.woocommerce-Address-title h3 {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 20px;
	color: var(--color-brand);
}

@media (max-width: 900px) {
	.site-main--default {
		padding: 40px var(--container-padding) 60px;
	}
	.wc-block-components-sidebar-layout {
		flex-direction: column;
	}
	.woocommerce-Addresses {
		flex-direction: column;
	}
}

/* ---------- Phone tier ---------- */
@media (max-width: 600px) {
	.hero {
		min-height: 480px;
		padding-top: 120px;
		padding-bottom: 48px;
	}
	.hero__heading {
		font-size: 34px;
		line-height: 1.2;
	}
	.hero__subheading {
		font-size: 18px;
		line-height: 1.4;
	}
	.rich-text__inner p,
	.page-intro__body,
	.rich-intro__intro-copy {
		font-size: 20px;
		line-height: 1.4;
	}
	.page-intro__heading,
	.rich-intro__heading {
		font-size: 44px;
		line-height: 1.2;
	}
	.bio-detail__name {
		font-size: 44px;
		line-height: 1.2;
	}
	.bio-detail__role {
		font-size: 28px;
		line-height: 1.3;
	}
	.stats-block__header h2,
	.section-header__text h2,
	.card-grid-news h2,
	.cards-grid-events__header h2,
	.cards-grid-product h2,
	.paragraph-media__text h2,
	.people-grid__header h2,
	.friends-list__text h2,
	.cta__heading,
	.timeline-block__header-text h2,
	.image-block__header h2,
	.image-carousel-block__header-text h2,
	.related-events__title,
	.related-news__title,
	.product-detail__title,
	.news-detail__title,
	.event-detail__title {
		font-size: 34px;
		line-height: 1.25;
	}
	.product-detail__price {
		font-size: 44px;
		line-height: 1.2;
	}
	.stats-card__number {
		font-size: 34px;
		line-height: 1.2;
	}
	.stats-card {
		width: 100%;
	}
	.people-grid__grid {
		grid-template-columns: 1fr;
	}
	.news-card,
	.feature-card,
	.product-card {
		width: 100%;
	}
	.footer-nav__columns {
		flex-direction: column;
		gap: 32px;
	}
	.friends-list__columns {
		flex-direction: column;
		gap: 32px;
	}
	.newsletter-signup__inner {
		justify-content: flex-start;
	}
	.newsletter-signup__form {
		width: 100%;
	}
	.image-carousel-block {
		--carousel-active-w: 280px;
		--carousel-inactive-w: 200px;
		--carousel-gap: 20px;
	}
	.calendar-widget__select {
		padding: 6px 4px;
		font-size: 14px;
	}
}

/* =====================================================================
   Hover states — functional buttons (Gravity Forms, WooCommerce, search,
   pagination). These reuse the same interaction language as the Figma
   "Button" component's primary hover: accent-yellow fill with navy
   text/border. Kept here so the design-system .btn hovers above and these
   framework-rendered buttons stay visually consistent.
   ===================================================================== */

.product-detail__buy .button,
.product-detail__buy .single_add_to_cart_button,
.contact-form .gform_wrapper .gform_button,
.search-form .search-submit,
.woocommerce-message .button.wc-forward,
.woocommerce-info .button.wc-forward,
.wc-block-components-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.woocommerce .woocommerce-button,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.add_to_cart_button,
.posts-navigation a,
.pagination a,
.news-pagination__page {
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Product "Add to cart" (single product) */
.product-detail__buy .button:hover,
.product-detail__buy .single_add_to_cart_button:hover,
.product-detail__buy .button:focus-visible,
.product-detail__buy .single_add_to_cart_button:focus-visible {
	background: var(--color-accent);
	color: var(--color-brand);
	border-color: var(--color-brand);
}

/* Gravity Forms submit (contact form) */
.contact-form .gform_wrapper .gform_button:hover,
.contact-form .gform_wrapper .gform_button:focus-visible {
	background: var(--color-accent) !important;
	color: var(--color-brand) !important;
	border-color: var(--color-brand) !important;
}

/* Search submit (404 / search results) */
.search-form .search-submit:hover,
.search-form .search-submit:focus-visible {
	background: var(--color-accent);
	color: var(--color-brand);
	border-color: var(--color-brand);
}

/* WooCommerce add-to-cart notice ("View cart") */
.woocommerce-message .button.wc-forward:hover,
.woocommerce-info .button.wc-forward:hover,
.woocommerce-message .button.wc-forward:focus-visible,
.woocommerce-info .button.wc-forward:focus-visible {
	background: var(--color-accent);
	color: var(--color-brand);
	border-color: var(--color-brand);
}

/* WooCommerce Blocks buttons (cart / checkout) — replaces the flat opacity hover */
.wc-block-components-button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-button:focus-visible,
.wc-block-cart__submit-button:focus-visible,
.wc-block-components-checkout-place-order-button:focus-visible {
	background: var(--color-accent) !important;
	color: var(--color-brand) !important;
	border-color: var(--color-brand) !important;
	opacity: 1;
}

/* Classic WooCommerce buttons (My Account, login/register, cross-sells) */
.woocommerce .woocommerce-button:hover,
.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce input.button:hover,
.add_to_cart_button:hover,
.woocommerce .woocommerce-button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce a.button:focus-visible,
.woocommerce input.button:focus-visible,
.add_to_cart_button:focus-visible {
	background: var(--color-accent);
	color: var(--color-brand) !important;
	border-color: var(--color-brand);
}

/* Pagination links (search / archives) */
.posts-navigation a:hover,
.pagination a:hover,
.posts-navigation a:focus-visible,
.pagination a:focus-visible {
	background: var(--color-accent);
	color: var(--color-brand);
	border-color: var(--color-brand);
}

/* Neighborhood-news numbered pagination */
.news-pagination__page:hover,
.news-pagination__page:focus-visible {
	background: var(--color-accent);
	color: var(--color-brand);
}

/* =====================================================================
   Mobile — matched to the "HONNA_Mobile_Designs_FINAL" Figma prototype
   (Oct 2026). Measured at a 390px frame: 30px side margins, 40px section
   padding, type scale H1 56/56 · H2 40/44 · H3 32/36 · H4 20/28 ·
   intro 20/28 · body 16/24, and a full-screen navy menu.
   ===================================================================== */

/* ---------- Full-screen menu (tablet + phone, wherever the toggle shows) ---------- */
@media (max-width: 900px) {
	/* Join us / Shop / Member login live inside the menu on small screens. */
	.header-auth {
		display: none;
	}
	body:has(.main-navigation.toggled) {
		overflow: hidden;
	}
	.site-header:has(.main-navigation.toggled) {
		position: fixed;
		inset: 0;
		z-index: 100;
		display: flex;
		flex-direction: column;
		overflow-y: auto;
		padding-bottom: 60px;
		background: var(--color-brand);
		border-bottom: none;
	}
	.site-header:has(.main-navigation.toggled) .site-header__row {
		display: contents;
	}
	.site-header:has(.main-navigation.toggled) .site-branding {
		order: 1;
		padding: 0 var(--container-padding);
	}
	.site-header:has(.main-navigation.toggled) .site-logo__img {
		display: none;
	}
	.site-header:has(.main-navigation.toggled) .site-logo__img--white {
		display: block;
	}
	.main-navigation.toggled {
		order: 2;
		position: static;
		width: auto;
		padding: 0 var(--container-padding);
		margin-top: 106px;
	}
	.main-navigation.toggled .menu-toggle {
		position: absolute;
		top: var(--menu-toggle-top, 30px);
		right: var(--container-padding);
		background: transparent;
		border-color: var(--color-white);
	}
	.main-navigation.toggled ul {
		position: static;
		display: flex;
		flex-direction: column;
		gap: 50px;
		width: auto;
		max-width: none;
		padding: 0;
		background: none;
		border: none;
		box-shadow: none;
	}
	.main-navigation.toggled a {
		padding: 0;
		width: auto;
		color: var(--color-white);
		font-weight: 600;
		font-size: 24px;
		line-height: 34px;
		text-decoration-color: var(--color-accent);
	}
	.site-header:has(.main-navigation.toggled) .header-auth {
		order: 3;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
		margin-top: 100px;
		padding: 0 var(--container-padding);
	}
	.site-header:has(.main-navigation.toggled) .header-auth .btn--primary {
		background: var(--color-white);
		color: var(--color-brand) !important;
		border-color: var(--color-white);
	}
	.site-header:has(.main-navigation.toggled) .header-auth .btn--outline {
		background: transparent;
		color: var(--color-white);
		border-color: var(--color-white);
	}
	.site-header:has(.main-navigation.toggled) .header-auth .btn:hover,
	.site-header:has(.main-navigation.toggled) .header-auth .btn:focus-visible {
		background: var(--color-accent);
		color: var(--color-brand) !important;
		border-color: var(--color-accent);
	}
	/* Hamburger → X, "Slider" style (jonsuh.com/hamburgers): the outer bars
	   swing into an X while the middle bar slides out to the left. */
	.menu-toggle::before,
	.menu-toggle::after,
	.menu-toggle__bars {
		transition: transform 0.25s ease, opacity 0.2s ease, background-color 0.2s ease;
	}
	.main-navigation.toggled .menu-toggle::before,
	.main-navigation.toggled .menu-toggle::after,
	.main-navigation.toggled .menu-toggle__bars {
		background: var(--color-white);
	}
	.main-navigation.toggled .menu-toggle::before {
		transform: translateY(7px) rotate(45deg);
	}
	.main-navigation.toggled .menu-toggle::after {
		transform: translateY(-7px) rotate(-45deg);
	}
	.main-navigation.toggled .menu-toggle__bars {
		transform: translateX(-14px);
		opacity: 0;
	}

	/* Header slides away on scroll down, returns on scroll up (navigation.js). */
	.site-header {
		position: sticky;
		top: 0;
		z-index: 50;
		transition: transform 0.3s ease;
	}
	.site-header.is-hidden {
		transform: translateY(-100%);
	}

	/* Intro photos keep the 3:2 crop when stacked. */
	.page-intro__image,
	.rich-intro__image {
		aspect-ratio: 3 / 2;
		object-fit: cover;
	}

	/* Pagination: Previous / numbers / Next with the numbers truly centred. */
	.news-pagination {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		gap: 16px;
	}
	.news-pagination__prev {
		justify-self: start;
	}
	.news-pagination__next {
		justify-self: end;
	}

	/* WooCommerce resets the sidebar padding at small widths — restore it so the
	   cart totals / order summary text doesn't touch the border. */
	.wc-block-components-sidebar,
	.wc-block-checkout__sidebar {
		padding: 20px !important;
	}
	/* Checkout shows the order summary twice on mobile (collapsible at the top +
	   a full copy above "Place order"). Keep only the top one. */
	.wc-block-checkout__main .checkout-order-summary-block-fill-wrapper,
	.wc-block-components-sidebar-layout:not(.is-large) .checkout-order-summary-block-fill-wrapper {
		display: none !important;
	}
	/* Tablet: stats two-up (the desktop "bleed" sizing is desktop-only). */
	.stats-block--nav-desktop .stats-card {
		width: calc(50% - 30px);
	}
}

/* ---------- Phone ---------- */
@media (max-width: 600px) {
	:root {
		--container-padding: 30px;
		--menu-toggle-top: 44px;
	}

	/* Header: logo + menu button only */
	.site-header {
		padding-top: 20px;
	}
	.site-header__row {
		margin-bottom: 18px;
	}
	.site-logo img {
		width: 238px;
	}
	.main-navigation {
		top: var(--menu-toggle-top);
	}

	/* Section rhythm: 40px top/bottom instead of the desktop 80px */
	.rich-text,
	.paragraph-media,
	.card-grid-news,
	.cards-grid-events,
	.cards-grid-product,
	.newsletter-signup,
	.page-intro,
	.rich-intro,
	.content-block,
	.people-grid,
	.friends-list,
	.cta,
	.cta--simple,
	.card-grid-feature,
	.timeline-block,
	.image-block,
	.image-carousel-block,
	.news-archive,
	.events-archive,
	.product-detail,
	.news-detail,
	.event-detail,
	.bio-detail,
	.related-events,
	.related-news,
	.card-grid-pricing,
	.accordion-block,
	.contact-form,
	.return-to-link {
		padding-top: 40px;
		padding-bottom: 40px;
	}
	.stats-block {
		padding-top: 40px;
	}

	/* Hero */
	.hero {
		min-height: 476px;
		padding-top: 80px;
		padding-bottom: 40px;
	}
	.hero__content {
		gap: 20px;
	}

	/* H1 56/56 — long words hyphenate rather than overflow at this size */
	.hero__heading,
	.page-intro__heading,
	.rich-intro__heading,
	.bio-detail__name {
		font-size: 56px;
		line-height: 56px;
		-webkit-hyphens: auto;
		hyphens: auto;
	}
	/* Intro copy 18/28 (Samar's mobile type styles, Oct 2026) */
	.hero__subheading,
	.rich-text__inner p,
	.page-intro__body,
	.rich-intro__intro-copy,
	.section-header__text p,
	.cards-grid-events__header p,
	.people-grid__header p,
	.friends-list__text > p,
	.friends-list__list a,
	.friends-list__list li,
	.paragraph-media__text p,
	.cta__body,
	.feature-block__subheading,
	.timeline-block__header-text p,
	.image-block__header p,
	.image-carousel-block__header-text p,
	.newsletter-signup__heading,
	.news-detail__intro,
	.event-detail__meta-value,
	.stats-card__label {
		font-size: 18px;
		line-height: 28px;
	}
	/* Body copy bold / italics / link 16/26 */
	.footer-col .menu a,
	.footer-col ul a,
	.accordion-item__title,
	.accordion-block__disclaimer,
	.event-detail__venue-link {
		font-size: 16px;
		line-height: 26px;
	}
	/* Tag 12/16 */
	.footer-col__title,
	.tag-pill,
	.tag-toggle,
	.content-block__tag,
	.pricing-card__label,
	.event-detail__meta-label {
		font-size: 12px;
		line-height: 16px;
	}
	/* H2 40/44 */
	.stats-block__header h2,
	.section-header__text h2,
	.card-grid-news h2,
	.cards-grid-events__header h2,
	.cards-grid-product h2,
	.paragraph-media__text h2,
	.people-grid__header h2,
	.friends-list__text h2,
	.cta__heading,
	.timeline-block__header-text h2,
	.image-block__header h2,
	.image-carousel-block__header-text h2,
	.related-events__title,
	.related-news__title,
	.product-detail__title,
	.news-detail__title,
	.event-detail__title {
		font-size: 40px;
		line-height: 44px;
	}
	/* H3 32/36 */
	.content-block__heading,
	.feature-block__heading,
	.contact-info__heading,
	.bio-detail__role {
		font-size: 32px;
		line-height: 36px;
	}
	/* H4 20/28 */
	.news-card__title,
	.event-card__title,
	.product-card__title,
	.people-grid__name,
	.feature-card__title,
	.bio-detail__tagline {
		font-size: 20px;
		line-height: 28px;
	}
	/* Body 16/24 */
	.news-card__date,
	.event-card__meta,
	.product-card__price,
	.people-grid__title,
	.content-block__body,
	.feature-block__body,
	.feature-card__description,
	.rich-intro__body,
	.timeline-card__description,
	.news-detail__body,
	.event-detail__description,
	.bio-detail__body,
	.accordion-item__content,
	.section-header__body,
	.pricing-card__features,
	.product-detail__description {
		font-size: 16px;
		line-height: 24px;
	}

	/* Stats: two cards in view, the next one bleeding off the edge */
	.stats-card,
	.stats-block--nav-desktop .stats-card {
		width: 218px;
	}
	.stats-card__number {
		font-size: 48px;
		line-height: 54px;
	}

	/* Client spacing rule (mobile review, Oct 2026): 20px between components
	   inside a block (header → cards, card → card, text → button),
	   16px between elements inside a component (image → title → date). */
	.section-header,
	.stats-block__header,
	.timeline-block__header,
	.image-carousel-block__header,
	.related-news__title {
		margin-bottom: 20px;
		gap: 20px;
	}
	.cards-grid-events,
	.cards-grid-events__header,
	.cta__content-col,
	.paragraph-media,
	.page-intro,
	.rich-intro,
	.rich-intro__images,
	.page-intro__images,
	.content-block,
	.feature-block,
	.people-grid,
	.friends-list__content,
	.image-block,
	.image-carousel-block,
	.accordion-block,
	.news-archive,
	.events-archive,
	.events-archive__main,
	.news-detail__inner,
	.event-detail__inner,
	.bio-detail__inner,
	.product-detail__inner,
	.newsletter-signup__inner {
		gap: 20px;
	}
	.card-grid-news__cards,
	.card-grid-feature__cards,
	.cards-grid-product__list,
	.cards-grid-events__list,
	.related-news__list,
	.people-grid__grid,
	.card-grid-pricing__cards {
		gap: 20px;
	}
	.news-card,
	.event-card,
	.product-card,
	.feature-card,
	.people-grid__card,
	.paragraph-media__text,
	.content-block__text,
	.feature-block__text,
	.page-intro__content,
	.rich-intro__content,
	.pricing-card {
		gap: 16px;
	}
	.news-card__title,
	.event-card__title,
	.product-card__title {
		margin-bottom: 0;
	}
	.news-card__content,
	.event-card__content,
	.product-card__content {
		display: flex;
		flex-direction: column;
		gap: 4px;
	}

	.wc-block-components-checkout-order-summary__title-text {
		font-size: 20px !important;
		line-height: 28px !important;
	}

	/* Event cards: full-width 3:2 image above the text */
	.event-card .card-media,
	.event-card__image {
		width: 100%;
	}

	/* Our friends: the two columns read as one continuous list */
	.friends-list__columns {
		gap: 8px;
	}

	/* CTA hexagons: one row that runs off the right edge */
	.cta__inner {
		align-items: stretch;
		gap: 16px;
	}
	/* …and swipes like the stats / timeline sliders (snap per hexagon). */
	.cta__images {
		flex-wrap: nowrap;
		margin-right: calc(-1 * var(--container-padding));
		padding-right: var(--container-padding);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
	}
	.cta__images::-webkit-scrollbar {
		display: none;
	}
	.cta__images img {
		flex-shrink: 0;
		scroll-snap-align: start;
	}

	/* Footer */
	.footer-nav__columns {
		gap: 40px;
	}
	.footer-col__title {
		margin-bottom: 18px;
	}
	.footer-col .menu,
	.footer-col ul {
		gap: 14px;
	}
	/* Illustrations keep ~60% of their desktop scale (as in the mobile Figma),
	   centred and cropped by the viewport instead of shrinking to 390px. */
	.footer-graphic,
	.stats-block__illustration {
		overflow: hidden;
	}
	.footer-graphic img,
	.stats-block__illustration img {
		max-width: none;
		position: relative;
		left: 50%;
		transform: translateX(-50%);
	}
	.footer-graphic img {
		width: 670px;
	}
	.stats-block__illustration img {
		width: 900px;
	}
}

/* =====================================================================
   Shop groups + floating cart (client review, Oct 2026)
   ===================================================================== */
.product-group + .product-group {
	margin-top: 80px;
}
.product-group__header {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 32px;
}
.product-group__heading {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 40px;
	line-height: 48px;
	color: var(--color-brand);
	margin: 0;
}
.product-group__note {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 18px;
	line-height: 26px;
	color: var(--color-brand);
	margin: 0;
}
/* Grid rows inside a group start at the left rather than spreading out. */
.product-group .cards-grid-product__list {
	justify-content: flex-start;
	column-gap: calc((100% - 4 * 21%) / 3);
}

.external-arrow {
	margin-left: 2px;
}

.floating-cart {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--color-brand);
	color: var(--color-white);
	border: 1.5px solid var(--color-brand);
	box-shadow: 0 6px 18px rgba(5, 48, 91, 0.25);
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.floating-cart[hidden] {
	display: none;
}
/* Keep the icon white after the cart has been visited — the global
   `a:visited { color: inherit }` rule is more specific and turned it navy. */
.floating-cart:link,
.floating-cart:visited {
	color: var(--color-white);
}
.floating-cart:hover,
.floating-cart:focus-visible,
.floating-cart:visited:hover {
	background: var(--color-accent);
	color: var(--color-brand);
	transform: translateY(-2px);
}
.floating-cart__count {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 24px;
	height: 24px;
	padding: 0 6px;
	border-radius: 12px;
	background: var(--color-accent);
	color: var(--color-brand);
	border: 1.5px solid var(--color-brand);
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 12px;
	line-height: 21px;
	text-align: center;
}
.floating-cart:hover .floating-cart__count,
.floating-cart:focus-visible .floating-cart__count {
	background: var(--color-white);
}
/* Never sit above the open full-screen mobile menu. */
body:has(.main-navigation.toggled) .floating-cart {
	display: none;
}

@media (max-width: 900px) {
	.product-group .cards-grid-product__list {
		column-gap: 32px;
	}
}
@media (max-width: 600px) {
	.product-group + .product-group {
		margin-top: 40px;
	}
	.product-group__header {
		margin-bottom: 20px;
	}
	.product-group__heading {
		font-size: 32px;
		line-height: 36px;
	}
	.product-group__note {
		font-size: 16px;
		line-height: 24px;
	}
	.floating-cart {
		right: 16px;
		bottom: 16px;
		width: 56px;
		height: 56px;
	}
}

/* Logged-in admins get SiteGround AI Studio's chat launcher (60px, 30px from
   the bottom-right corner) — stack the cart button above it instead of under. */
body:has(#wp-ai-studio-container) .floating-cart {
	right: 30px;
	bottom: 106px;
}
@media (max-width: 600px) {
	body:has(#wp-ai-studio-container) .floating-cart {
		right: 32px;
	}
}