/*
 * Cabin Fever — main stylesheet
 *
 * Order of concerns:
 *   1. @font-face (self-hosted, /assets/fonts/)
 *   2. CSS custom properties (brand tokens: colors, type, spacing)
 *   3. Reset / base typography
 *   4. Accessibility helpers
 *   5. Layout helpers + component styles (filled in later steps)
 */


/* ----------------------------------------------------------------------
 * 1. @FONT-FACE — self-hosted Google Fonts (Latin subset only)
 *    Fraunces and Roboto are variable fonts; one file serves the whole
 *    weight range specified in the second `font-weight` declaration.
 * -------------------------------------------------------------------- */

/* Display — Fraunces (variable) */
@font-face {
	font-family: 'Fraunces';
	font-style: normal;
	font-weight: 700 900;
	font-display: swap;
	src: url('../fonts/fraunces.woff2') format('woff2-variations'),
	     url('../fonts/fraunces.woff2') format('woff2');
}

/* Subheading — Zilla Slab (static instances) */
@font-face {
	font-family: 'Zilla Slab';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/zilla-slab-500.woff2') format('woff2');
}
@font-face {
	font-family: 'Zilla Slab';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/zilla-slab-600.woff2') format('woff2');
}
@font-face {
	font-family: 'Zilla Slab';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/zilla-slab-700.woff2') format('woff2');
}

/* Body — Poppins (static instances) */
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('../fonts/poppins-300.woff2') format('woff2');
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/poppins-400.woff2') format('woff2');
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/poppins-500.woff2') format('woff2');
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/poppins-600.woff2') format('woff2');
}

/* Caption / small UI — Roboto (variable) */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400 500;
	font-display: swap;
	src: url('../fonts/roboto.woff2') format('woff2-variations'),
	     url('../fonts/roboto.woff2') format('woff2');
}


/* ----------------------------------------------------------------------
 * 2. DESIGN TOKENS — brand colors, type, spacing
 *    All values from the Cabin Fever brand guide + Figma theme.
 * -------------------------------------------------------------------- */
:root {
	/* Primary palette */
	--cf-deep-plum:    #482C4D;
	--cf-berry:        #774D7D;
	--cf-golden-birch: #F4C788;

	/* Accent palette */
	--cf-glacier-teal: #4C7980;
	--cf-peach:        #E99C83;
	--cf-salmon:       #E37A5A;
	--cf-linen:        #E6DDD0;

	/* Semantic roles */
	--cf-bg:            #ffffff;
	--cf-bg-alt:        var(--cf-linen);
	--cf-bg-dark:       var(--cf-deep-plum);
	--cf-text:          var(--cf-deep-plum);
	--cf-text-muted:    #5a4a5d;
	--cf-text-inverse:  #ffffff;
	--cf-border:        rgba(72, 44, 77, 0.15);

	--cf-primary:       var(--cf-deep-plum);
	--cf-secondary:     var(--cf-berry);
	--cf-accent:        var(--cf-salmon);
	--cf-accent-hover:  var(--cf-peach);

	/* Typography — families */
	--cf-font-display:    'Fraunces', Georgia, 'Times New Roman', serif;
	--cf-font-subheading: 'Zilla Slab', Georgia, 'Times New Roman', serif;
	--cf-font-body:       'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--cf-font-caption:    'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

	/* Typography — scale (rem-based for accessibility) */
	--cf-text-xs:   0.75rem;  /* 12px */
	--cf-text-sm:   0.875rem; /* 14px */
	--cf-text-base: 1rem;     /* 16px */
	--cf-text-lg:   1.125rem; /* 18px */
	--cf-text-xl:   1.25rem;  /* 20px */
	--cf-text-2xl:  1.5rem;   /* 24px */
	--cf-text-3xl:  1.875rem; /* 30px */
	--cf-text-4xl:  2.25rem;  /* 36px */
	--cf-text-5xl:  3rem;     /* 48px */
	--cf-text-6xl:  3.75rem;  /* 60px */

	/* Line heights */
	--cf-leading-tight:   1.2;
	--cf-leading-snug:    1.3;
	--cf-leading-normal:  1.5;
	--cf-leading-relaxed: 1.65;

	/* Spacing scale (matches Tailwind 4/8px grid from Figma) */
	--cf-space-1:  0.25rem;
	--cf-space-2:  0.5rem;
	--cf-space-3:  0.75rem;
	--cf-space-4:  1rem;
	--cf-space-6:  1.5rem;
	--cf-space-8:  2rem;
	--cf-space-12: 3rem;
	--cf-space-16: 4rem;
	--cf-space-20: 5rem;
	--cf-space-24: 6rem;

	/* Layout */
	--cf-container-max: 1400px;
	--cf-container-pad: clamp(1rem, 4vw, 2rem);
	--cf-header-h:      5rem; /* 80px */

	/* Radii */
	--cf-radius-sm: 0.25rem;
	--cf-radius:    0.5rem;
	--cf-radius-lg: 0.75rem;
	--cf-radius-full: 9999px;

	/* Motion */
	--cf-transition: 200ms ease;
}


/* ----------------------------------------------------------------------
 * 3. BASE TYPOGRAPHY + RESET
 * -------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
	margin: 0;
	background: var(--cf-bg);
	color: var(--cf-text);
	font-family: var(--cf-font-body);
	font-size: var(--cf-text-base);
	font-weight: 400;
	line-height: var(--cf-leading-relaxed);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* Prevent any single block/element from causing sideways page scroll,
	   which visually breaks the right-side gutter on mobile. */
	overflow-x: clip;
}
html { overflow-x: clip; }

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

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--cf-space-4);
	color: var(--cf-text);
	font-weight: 700;
	line-height: var(--cf-leading-tight);
}

h1 {
	font-family: var(--cf-font-display);
	font-weight: 700;
	font-size: clamp(var(--cf-text-3xl), 4vw + 1rem, var(--cf-text-5xl));
}

h2 {
	font-family: var(--cf-font-subheading);
	font-weight: 600;
	font-size: clamp(var(--cf-text-2xl), 3vw + 0.5rem, var(--cf-text-4xl));
	line-height: var(--cf-leading-snug);
}

h3 {
	font-family: var(--cf-font-subheading);
	font-weight: 600;
	font-size: var(--cf-text-xl);
	line-height: 1.4;
}

h4 {
	font-family: var(--cf-font-body);
	font-weight: 500;
	font-size: var(--cf-text-lg);
	line-height: var(--cf-leading-normal);
}

h5, h6 {
	font-family: var(--cf-font-body);
	font-weight: 500;
	font-size: var(--cf-text-base);
}

p {
	margin: 0 0 var(--cf-space-4);
}

small, .caption {
	font-family: var(--cf-font-caption);
	font-size: var(--cf-text-sm);
}

a {
	color: var(--cf-secondary);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	transition: color var(--cf-transition);
}
a:hover, a:focus {
	color: var(--cf-accent);
}

button, input, select, textarea {
	font: inherit;
	color: inherit;
}

:focus-visible {
	outline: 2px solid var(--cf-accent);
	outline-offset: 2px;
	border-radius: var(--cf-radius-sm);
}


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

.skip-link {
	position: absolute;
	top: -100px;
	left: 8px;
	z-index: 100000;
	padding: var(--cf-space-2) var(--cf-space-4);
	background: var(--cf-deep-plum);
	color: #fff;
	text-decoration: none;
	border-radius: var(--cf-radius);
}
.skip-link:focus {
	top: 8px;
}

/* ----------------------------------------------------------------------
 * Reduced motion — honor prefers-reduced-motion for users who've
 * requested less animation in their OS accessibility settings.
 * Neutralizes transitions/animations across the theme (hover lifts,
 * dropdown fades, category-tile zoom, button hovers, etc.) without
 * breaking layout.
 * -------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}


/* ----------------------------------------------------------------------
 * 5. LAYOUT + COMPONENTS — populated in Steps 5–9
 * -------------------------------------------------------------------- */
.container {
	max-width: var(--cf-container-max);
	margin-inline: auto;
	padding-inline: var(--cf-container-pad);
}

/* ---------- Buttons ---------- */
.button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--cf-space-2);
	padding: var(--cf-space-3) var(--cf-space-8);
	background: var(--cf-accent);
	color: var(--cf-text-inverse);
	font-family: var(--cf-font-body);
	font-weight: 500;
	text-decoration: none;
	border: 2px solid transparent;
	border-radius: var(--cf-radius);
	transition: background var(--cf-transition), color var(--cf-transition), border-color var(--cf-transition);
	cursor: pointer;
}
.button:hover,
.button:focus,
.wp-block-button__link:hover,
.wp-block-button__link:focus {
	background: var(--cf-accent-hover);
	color: var(--cf-text-inverse);
}

.button--ghost {
	background: transparent;
	color: var(--cf-deep-plum);
	border-color: var(--cf-deep-plum);
}
.button--ghost:hover,
.button--ghost:focus {
	background: var(--cf-deep-plum);
	color: var(--cf-text-inverse);
}


/* ---------- Site header ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--cf-golden-birch);
	border-bottom: 1px solid var(--cf-border);
}

.site-header__inner {
	max-width: var(--cf-container-max);
	margin-inline: auto;
	padding-inline: var(--cf-container-pad);
	height: var(--cf-header-h);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cf-space-6);
}

.site-header__logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	text-decoration: none;
}
.site-header__logo img {
	height: 56px;
	width: auto;
}

/* Desktop nav */
.site-nav--desktop {
	display: none;
}
.site-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: var(--cf-space-8);
}
.site-nav__list li { position: relative; }
.site-nav__list a {
	color: var(--cf-deep-plum);
	font-family: var(--cf-font-body);
	font-weight: 500;
	text-decoration: none;
	padding: var(--cf-space-2) 0;
	display: inline-flex;
	align-items: center;
	gap: var(--cf-space-1);
}
.site-nav__list a:hover,
.site-nav__list a:focus,
.site-nav__list .current-menu-item > a {
	color: var(--cf-salmon);
}

/* Submenus (dropdowns) */
.site-nav__list .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 12rem;
	margin: 0;
	padding: var(--cf-space-2) 0;
	list-style: none;
	background: var(--cf-golden-birch);
	border: 1px solid var(--cf-border);
	border-radius: var(--cf-radius);
	box-shadow: 0 10px 25px rgba(72, 44, 77, 0.12);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity var(--cf-transition), transform var(--cf-transition), visibility var(--cf-transition);
}
.site-nav__list li:hover > .sub-menu,
.site-nav__list li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.site-nav__list .sub-menu a {
	display: block;
	padding: var(--cf-space-2) var(--cf-space-4);
}
.site-nav__list .sub-menu a:hover,
.site-nav__list .sub-menu a:focus {
	background: var(--cf-linen);
}
/* Caret on items with a submenu */
.site-nav__list .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 0; height: 0;
	margin-left: var(--cf-space-1);
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 4px solid currentColor;
}

/* Utilities (icons on the right) */
.site-header__utilities {
	display: flex;
	align-items: center;
	gap: var(--cf-space-4);
}
.site-header__icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--cf-deep-plum);
	border-radius: var(--cf-radius-full);
	cursor: pointer;
	position: relative;
	transition: color var(--cf-transition), background var(--cf-transition);
}
.site-header__icon-btn:hover,
.site-header__icon-btn:focus-visible {
	color: var(--cf-salmon);
}
.site-header__cart-count {
	position: absolute;
	top: 0;
	right: 0;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	background: var(--cf-salmon);
	color: #fff;
	font-family: var(--cf-font-caption);
	font-size: 11px;
	font-weight: 500;
	line-height: 20px;
	text-align: center;
	border-radius: var(--cf-radius-full);
}

.site-header__menu-toggle { display: inline-flex; }

/* Search panel */
.site-header__search-panel {
	background: var(--cf-golden-birch);
	border-top: 1px solid var(--cf-border);
}
.site-header__search-inner {
	max-width: var(--cf-container-max);
	margin-inline: auto;
	padding: var(--cf-space-4) var(--cf-container-pad);
}
.site-header__search-panel .search-form {
	display: flex;
	gap: var(--cf-space-2);
}
.site-header__search-panel .search-field {
	flex: 1;
	padding: var(--cf-space-3) var(--cf-space-4);
	border: 1px solid var(--cf-border);
	border-radius: var(--cf-radius);
	background: #fff;
}
.site-header__search-panel .search-submit {
	padding: var(--cf-space-3) var(--cf-space-6);
	border: 0;
	border-radius: var(--cf-radius);
	background: var(--cf-deep-plum);
	color: #fff;
	cursor: pointer;
}

/* Mobile menu panel */
.site-mobile-menu {
	background: var(--cf-golden-birch);
	border-top: 1px solid var(--cf-border);
}
.site-mobile-menu__list,
.site-mobile-menu__nav .menu {
	list-style: none;
	margin: 0;
	padding: var(--cf-space-4) var(--cf-container-pad);
	display: flex;
	flex-direction: column;
	gap: var(--cf-space-1);
}
.site-mobile-menu__list a,
.site-mobile-menu__nav a {
	display: block;
	padding: var(--cf-space-3) var(--cf-space-4);
	color: var(--cf-deep-plum);
	font-family: var(--cf-font-body);
	font-weight: 500;
	text-decoration: none;
	border-radius: var(--cf-radius);
}
.site-mobile-menu__list a:hover,
.site-mobile-menu__list a:focus,
.site-mobile-menu__nav a:hover,
.site-mobile-menu__nav a:focus {
	background: #fff;
	color: var(--cf-salmon);
}
.site-mobile-menu__list .sub-menu,
.site-mobile-menu__nav .sub-menu {
	list-style: none;
	margin: 0 0 0 var(--cf-space-4);
	padding: 0;
}

/* Breakpoint: show desktop nav, hide mobile toggle/menu */
@media (min-width: 900px) {
	.site-nav--desktop { display: flex; }
	.site-header__menu-toggle { display: none; }
	.site-mobile-menu { display: none !important; }
}


/* ---------- Site footer ---------- */
.site-footer {
	position: relative;
	background: var(--cf-golden-birch);
	color: var(--cf-deep-plum);
	overflow: hidden;
}
/* Subtle wood-grain texture overlay (same SVG approach as the Figma mock). */
.site-footer::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath d='M0 0 Q 25 50 0 100 M 20 0 Q 45 50 20 100 M 40 0 Q 65 50 40 100 M 60 0 Q 85 50 60 100 M 80 0 Q 100 50 80 100' stroke='%23482C4D' fill='none' stroke-width='0.5' opacity='0.3'/%3E%3C/svg%3E");
	background-size: 100px 100px;
	opacity: 0.08;
	pointer-events: none;
}

.site-footer__inner {
	position: relative;
	max-width: var(--cf-container-max);
	margin-inline: auto;
	padding: var(--cf-space-16) var(--cf-container-pad);
}

.site-footer__grid {
	display: grid;
	gap: var(--cf-space-12);
	grid-template-columns: 1fr;
}
@media (min-width: 700px) {
	.site-footer__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
	.site-footer__grid {
		grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
		gap: var(--cf-space-8);
	}
}

.site-footer__col--brand .site-footer__logo img {
	height: 64px;
	width: auto;
	margin-bottom: var(--cf-space-4);
}
.site-footer__blurb p {
	font-size: var(--cf-text-sm);
	line-height: var(--cf-leading-relaxed);
}
.site-footer__blurb p:last-child { margin-bottom: 0; }

.site-footer__heading {
	font-family: var(--cf-font-subheading);
	font-weight: 700;
	font-size: var(--cf-text-lg);
	color: var(--cf-deep-plum);
	margin: 0 0 var(--cf-space-4);
}
.site-footer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--cf-space-2);
}
.site-footer__menu a,
.site-footer__address a {
	color: var(--cf-deep-plum);
	font-size: var(--cf-text-sm);
	text-decoration: none;
}
.site-footer__menu a:hover,
.site-footer__menu a:focus,
.site-footer__address a:hover,
.site-footer__address a:focus {
	color: var(--cf-salmon);
}

.site-footer__address {
	font-style: normal;
	font-size: var(--cf-text-sm);
	line-height: var(--cf-leading-relaxed);
	margin-bottom: var(--cf-space-4);
}

.site-footer__social {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: var(--cf-space-4);
}
.site-footer__social a {
	color: var(--cf-deep-plum);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--cf-radius-full);
	transition: color var(--cf-transition), background var(--cf-transition);
}
.site-footer__social a:hover,
.site-footer__social a:focus {
	color: var(--cf-salmon);
}

.site-footer__bottom {
	margin-top: var(--cf-space-12);
	padding-top: var(--cf-space-8);
	border-top: 1px solid var(--cf-border);
	display: flex;
	flex-direction: column;
	gap: var(--cf-space-4);
	align-items: flex-start;
	justify-content: space-between;
	font-size: var(--cf-text-sm);
}
@media (min-width: 700px) {
	.site-footer__bottom {
		flex-direction: row;
		align-items: center;
	}
}
.site-footer__copyright { margin: 0; }
.site-footer__legal {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--cf-space-6);
}
.site-footer__legal a {
	color: var(--cf-deep-plum);
	text-decoration: none;
}
.site-footer__legal a:hover,
.site-footer__legal a:focus {
	color: var(--cf-salmon);
}


/* ======================================================================
 * BLOCK EDITOR / GUTENBERG — front-end support
 * The home page is now built from block patterns (see inc/block-patterns.php).
 * These rules keep alignfull/alignwide working and ensure our typography
 * flows into core blocks cleanly.
 * ==================================================================== */

/* Allow full-width / wide blocks to escape the main content container. */
.site-main > .alignfull,
.home-content.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
.alignwide {
	max-width: var(--cf-container-max);
	margin-inline: auto;
}

/* Any full-width Group block (used by our Category Tiles, Feature Band,
   Featured Products, CTA Band patterns) gets horizontal gutters so its
   content doesn't touch the viewport edges — while its background still
   extends true edge-to-edge. */
.wp-block-group.alignfull {
	padding-left: var(--cf-container-pad);
	padding-right: var(--cf-container-pad);
	box-sizing: border-box;
	max-width: 100%;
}
/* Columns inside a full-width group shouldn't push beyond parent width. */
.wp-block-group.alignfull .wp-block-columns {
	max-width: 100%;
	margin-inline: auto;
}
/* Same for full-width Cover blocks that contain inner content. The Hero
   pattern handles its own centering, but this covers ad-hoc Covers. */
.wp-block-cover.alignfull > .wp-block-cover__inner-container {
	padding-inline: var(--cf-container-pad);
}

/* Home article wrapper — remove default page gutters so sections hit edges. */
article.home-content {
	margin: 0;
	padding: 0;
}

/* ---------- Contact / Visit Us list (Contact pattern) ---------- */
.cf-contact-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--cf-space-6);
}
.cf-contact-list__item {
	display: flex;
	align-items: flex-start;
	gap: var(--cf-space-4);
}
.cf-contact-list__icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--cf-radius);
	background: var(--cf-linen);
	color: var(--cf-deep-plum);
}
.cf-contact-list__body h3 {
	font-family: var(--cf-font-subheading);
	font-size: var(--cf-text-lg);
	font-weight: 600;
	color: var(--cf-deep-plum);
	margin: 0 0 var(--cf-space-1);
}
.cf-contact-list__body p {
	margin: 0;
	color: var(--cf-berry);
	line-height: var(--cf-leading-relaxed);
}
.cf-contact-list__body a {
	color: inherit;
	text-decoration: none;
}
.cf-contact-list__body a:hover,
.cf-contact-list__body a:focus {
	color: var(--cf-salmon);
}

/* Map placeholder shown inside the Contact pattern until you swap it
   for a Custom HTML iframe block. */
.cf-map-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--cf-linen);
	color: var(--cf-deep-plum);
	text-align: center;
}
.cf-map-placeholder__inner {
	padding: var(--cf-space-8);
	max-width: 320px;
}
.cf-map-placeholder svg {
	color: var(--cf-deep-plum);
	margin: 0 auto var(--cf-space-3);
	display: block;
}
.cf-map-placeholder p {
	font-size: var(--cf-text-sm);
	margin: 0;
	line-height: var(--cf-leading-relaxed);
}

/* Image-pair pattern: subtle natural shadow if the user keeps it on. */
.cf-image-pair__item img {
	width: 100%;
	height: 380px;
	object-fit: cover;
}
@media (max-width: 700px) {
	.cf-image-pair__item img { height: 280px; }
}

/* ---------- Product card grid (used by [cf_newest_products] & [cf_featured_products]) ---------- */

/* Wrapper — gives the grid proper gutters when it renders inside a full-width
   block (like the Featured Products pattern on the home page). */
.cf-newest-products,
.cf-featured-products {
	max-width: var(--cf-container-max);
	margin-inline: auto;
	padding-inline: var(--cf-container-pad);
}

.product-grid {
	display: grid;
	gap: var(--cf-space-6);
	grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 900px) {
	.product-grid { grid-template-columns: repeat(4, 1fr); }
}
.product-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	border-radius: var(--cf-radius-lg);
	overflow: hidden;
	background: var(--cf-linen);
	transition: transform var(--cf-transition), box-shadow var(--cf-transition);
}
.product-card:hover,
.product-card:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 12px 30px rgba(72, 44, 77, 0.12);
}
.product-card__media {
	aspect-ratio: 1 / 1;
	background: var(--cf-linen);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.product-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.product-card__placeholder {
	font-family: var(--cf-font-display);
	font-size: 4rem;
	color: var(--cf-berry);
	opacity: 0.5;
}
.product-card__body {
	padding: var(--cf-space-4);
	/* Inherit the card's Linen background so shorter cards don't grow a
	   white tail when the grid equalizes heights. */
	background: transparent;
	flex: 1; /* let body fill remaining card height naturally */
}
.product-card__title {
	font-family: var(--cf-font-subheading);
	font-size: var(--cf-text-base);
	margin: 0 0 var(--cf-space-1);
	color: var(--cf-deep-plum);
}
.product-card__price {
	font-family: var(--cf-font-caption);
	font-size: var(--cf-text-sm);
	color: var(--cf-text-muted);
	margin: 0;
}

/* Map embed wrapper — used to drop a Google Maps iframe into a Feature Band
   or any column and have it match the original image placeholder's shape.
   Set on a Custom HTML block wrapping an <iframe>. */
.cf-map-embed {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: var(--cf-radius-lg);
	overflow: hidden;
	background: var(--cf-linen);
}
.cf-map-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* Modifier: match the Image Pair pattern's exact dimensions
   (380px tall on desktop, 280px on mobile, full column width).
   Add `cf-map-embed--match-pair` alongside `cf-map-embed`. */
.cf-map-embed--match-pair {
	aspect-ratio: auto;
	height: 380px;
}
@media (max-width: 700px) {
	.cf-map-embed--match-pair { height: 280px; }
}

/* Utility: force all links inside this block to render white.
   Add `cf-links-white` in the block's Advanced → Additional CSS class(es) field. */
.cf-links-white a,
.cf-links-white a:visited {
	color: #ffffff !important;
}
.cf-links-white a:hover,
.cf-links-white a:focus {
	color: var(--cf-golden-birch) !important;
}

/* Buttons rendered by core/button take on our pill style. */
.wp-block-button .wp-element-button,
.wp-block-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--cf-space-2);
	padding: var(--cf-space-3) var(--cf-space-8);
	font-family: var(--cf-font-body);
	font-weight: 500;
	border-radius: var(--cf-radius);
	transition: background var(--cf-transition), color var(--cf-transition), border-color var(--cf-transition), transform var(--cf-transition);
}
.wp-block-button .wp-element-button:hover,
.wp-block-button .wp-block-button__link:hover {
	transform: translateY(-1px);
}

/* Cover blocks used for hero / tiles */
.wp-block-cover.cf-hero {
	min-height: clamp(520px, 80vh, 720px);
}

/* Placeholder image boxes inside pattern product cards — give them a visible
   1:1 area when the image src is empty so layout doesn't collapse. */
.wp-block-column .wp-block-image figure {
	margin: 0 0 var(--cf-space-4);
	aspect-ratio: 1 / 1;
	background: var(--cf-bg);
	border-radius: var(--cf-radius);
	overflow: hidden;
}
.wp-block-column .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.wp-block-column .wp-block-image img[src=""] { display: none; }

/* Ghost button variant (for the themed .button legacy class kept for patterns) */
.button--on-dark {
	color: var(--cf-golden-birch);
	border-color: var(--cf-golden-birch);
	background: transparent;
}
.button--on-dark:hover,
.button--on-dark:focus {
	background: var(--cf-golden-birch);
	color: var(--cf-deep-plum);
	border-color: var(--cf-golden-birch);
}

/* ======================================================================
 * INTERIOR PAGE TEMPLATE (page.php)
 * ==================================================================== */

.page-hero {
	background: var(--cf-linen);
	padding-block: var(--cf-space-16);
	text-align: center;
	border-bottom: 1px solid var(--cf-border);
}
.page-hero__inner {
	max-width: 860px;
}
.page-hero__title {
	font-family: var(--cf-font-display);
	font-weight: 700;
	font-size: clamp(var(--cf-text-3xl), 4vw + 1rem, var(--cf-text-5xl));
	color: var(--cf-deep-plum);
	margin: 0 0 var(--cf-space-3);
	line-height: 1.15;
}
/* Compact variant used by the Store template — less vertical space,
   since Ecwid itself has lots of chrome. */
.page-hero--compact {
	padding-block: var(--cf-space-8);
}
.page-hero--compact .page-hero__title {
	font-size: clamp(var(--cf-text-3xl), 3vw + 0.5rem, var(--cf-text-4xl));
}

.page-hero__excerpt {
	font-size: var(--cf-text-lg);
	color: var(--cf-text-muted);
	max-width: 640px;
	margin: 0 auto;
	line-height: var(--cf-leading-relaxed);
}

article.page-content {
	margin: 0;
	padding: 0;
}

/* Reading-width content column; alignwide/alignfull break out. */
.page-content__body {
	max-width: 720px;
	margin-inline: auto;
	padding: var(--cf-space-16) var(--cf-container-pad);
}
.page-content__body > .alignwide {
	max-width: var(--cf-container-max);
	width: min(100%, var(--cf-container-max));
	margin-inline: auto;
}
.page-content__body > .alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Child page nav */
.page-children {
	padding-block: var(--cf-space-12);
	border-top: 1px solid var(--cf-border);
}
.page-children__title {
	font-family: var(--cf-font-subheading);
	font-size: var(--cf-text-xl);
	margin: 0 0 var(--cf-space-4);
}
.page-children__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--cf-space-3);
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.page-children__list a {
	display: block;
	padding: var(--cf-space-4);
	background: var(--cf-linen);
	color: var(--cf-deep-plum);
	font-family: var(--cf-font-body);
	font-weight: 500;
	text-decoration: none;
	border-radius: var(--cf-radius);
	transition: background var(--cf-transition), color var(--cf-transition);
}
.page-children__list a:hover,
.page-children__list a:focus {
	background: var(--cf-golden-birch);
}

/* Multi-page pagination */
.page-links {
	padding-block: var(--cf-space-6);
	display: flex;
	gap: var(--cf-space-2);
	align-items: center;
	font-family: var(--cf-font-body);
}
.page-links a,
.page-links > .post-page-numbers {
	padding: var(--cf-space-1) var(--cf-space-3);
	border-radius: var(--cf-radius-sm);
	background: var(--cf-linen);
	color: var(--cf-deep-plum);
	text-decoration: none;
}
.page-links > .current {
	background: var(--cf-deep-plum);
	color: #fff;
}