/* =====================================================================
 * astra-child v1.6.9 DRAFT – calm header A–E (Gaia-House style), Rafik 2 Oct 2026
 * Loaded ONLY when a header variant is active (functions.php funguy_header_variant()).
 * Markup: functions.php funguy_header_markup() → <header id="masthead" class="site-header fg-hdr-bar">.
 * Body classes: .fg-hdr .fg-header-{a|b|c|d|e}. All text/background pairs are WCAG AA (≥4.5:1).
 * Rollback: Customizer "FunGuy header (1.6.9)" → "1.6.8 header" (this file then is not loaded).
 * ===================================================================== */

@font-face {
	font-family: "FG Cormorant";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: local("Cormorant Garamond"), url("fonts/cormorant-garamond-latin-var.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}

/* ---------- palettes ---------- */
html body.fg-hdr {
	--fgh-bg: #FBF4EA;
	--fgh-bg2: #F6E6D3;
	--fgh-bgimg: linear-gradient(180deg, var(--fgh-bg) 0%, var(--fgh-bg2) 100%);
	--fgh-text: #1C1917;        /* menu + icons */
	--fgh-name: #9A3412;        /* wordmark */
	--fgh-accent: #9A3412;      /* hover / current (text) */
	--fgh-rule: rgba(194, 65, 12, 0.28);   /* hairlines */
	--fgh-under: #C2410C;       /* little underline under current item */
	--fgh-mark: #EA580C;        /* watermark lotus */
	--fgh-mark-op: 0.10;
	--fgh-ring: #E9B949;        /* ring around the round logo */
	--fgh-drawer: #FFFEF9;
	--fgh-drawer-text: #1C1917;
	--fgh-drawer-accent: #9A3412;
	--fgh-edge: linear-gradient(90deg, rgba(194,65,12,0) 0%, #C2410C 20%, #E9B949 50%, #C2410C 80%, rgba(194,65,12,0) 100%);
}
/* A – sacral orange / cream (closest to today’s cream + terracotta) */
html body.fg-hdr.fg-header-a { }
/* B – heart green / honey gold */
html body.fg-hdr.fg-header-b {
	--fgh-bg: #1F4D3A;
	--fgh-bg2: #163828;
	--fgh-text: #F5F0E8;
	--fgh-name: #F5F0E8;
	--fgh-accent: #E9B949;
	--fgh-rule: rgba(233, 185, 73, 0.30);
	--fgh-under: #E9B949;
	--fgh-mark: #E9B949;
	--fgh-mark-op: 0.11;
	--fgh-ring: #E9B949;
	--fgh-drawer: #163828;
	--fgh-drawer-text: #F5F0E8;
	--fgh-drawer-accent: #E9B949;
	--fgh-edge: linear-gradient(90deg, rgba(233,185,73,0) 0%, #E9B949 50%, rgba(233,185,73,0) 100%);
}
/* C – throat blue / gold (closest to Gaia House) */
html body.fg-hdr.fg-header-c {
	--fgh-bg: #1D3E63;
	--fgh-bg2: #15304D;
	--fgh-text: #F5F0E8;
	--fgh-name: #F5F0E8;
	--fgh-accent: #E3B54A;
	--fgh-rule: rgba(227, 181, 74, 0.30);
	--fgh-under: #E3B54A;
	--fgh-mark: #9CC3EA;
	--fgh-mark-op: 0.12;
	--fgh-ring: #E3B54A;
	--fgh-drawer: #15304D;
	--fgh-drawer-text: #F5F0E8;
	--fgh-drawer-accent: #E3B54A;
	--fgh-edge: linear-gradient(90deg, rgba(227,181,74,0) 0%, #E3B54A 50%, rgba(227,181,74,0) 100%);
}
/* D – indigo / violet dusk */
html body.fg-hdr.fg-header-d {
	--fgh-bg: #241E4E;
	--fgh-bg2: #4C2A73;
	--fgh-bgimg: linear-gradient(115deg, #241E4E 0%, #33235F 55%, #4C2A73 100%);
	--fgh-text: #F3EEFA;
	--fgh-name: #F3EEFA;
	--fgh-accent: #D8C3FF;
	--fgh-rule: rgba(216, 195, 255, 0.28);
	--fgh-under: #D8C3FF;
	--fgh-mark: #D8C3FF;
	--fgh-mark-op: 0.10;
	--fgh-ring: #D8C3FF;
	--fgh-drawer: #241E4E;
	--fgh-drawer-text: #F3EEFA;
	--fgh-drawer-accent: #D8C3FF;
	--fgh-edge: linear-gradient(90deg, rgba(216,195,255,0) 0%, #D8C3FF 50%, rgba(216,195,255,0) 100%);
}
/* E – sunrise: root red → sacral → solar → heart → throat → indigo → crown (deep tones, so white text stays AA) */
html body.fg-hdr.fg-header-e {
	--fgh-bg: #7F1D1D;
	--fgh-bg2: #5B21B6;
	--fgh-bgimg: linear-gradient(90deg, #7F1D1D 0%, #9A3412 17%, #8A5A0B 33%, #166534 50%, #1E4F8F 67%, #3730A3 83%, #5B21B6 100%);
	--fgh-text: #FFFFFF;
	--fgh-name: #FFFFFF;
	--fgh-accent: #FDE68A;
	--fgh-rule: rgba(255, 255, 255, 0.30);
	--fgh-under: #FDE68A;
	--fgh-mark: #FFFFFF;
	--fgh-mark-op: 0.09;
	--fgh-ring: #FDE68A;
	--fgh-drawer: #1C1917;
	--fgh-drawer-text: #F5F0E8;
	--fgh-drawer-accent: #FDE68A;
	--fgh-edge: linear-gradient(90deg, #7F1D1D, #C2410C, #CA8A04, #15803D, #1D4ED8, #4338CA, #7C3AED);
}

/* ---------- bar ---------- */
html body.fg-hdr #masthead.fg-hdr-bar {
	position: relative;
	z-index: 99;
	overflow: visible;
	background: var(--fgh-bgimg) !important;
	color: var(--fgh-text);
	border: 0 !important;
	box-shadow: none !important;
}
html body.fg-hdr #masthead.fg-hdr-bar::after { /* thin edge line under the header */
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 2px;
	background: var(--fgh-edge);
	opacity: .9;
	pointer-events: none;
}
html body.fg-hdr .fg-hdr__mark { /* clip box, so the watermark never spills onto the page */
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}
html body.fg-hdr .fg-hdr__mark::before { /* big faint line-lotus, like Gaia’s watermark */
	content: "";
	position: absolute;
	left: max(-30px, calc(50% - 700px));
	top: -20px;
	width: 300px;
	height: 250px;
	background-color: var(--fgh-mark);
	-webkit-mask: url("fg-lotus-line.svg") center / contain no-repeat;
	        mask: url("fg-lotus-line.svg") center / contain no-repeat;
	opacity: var(--fgh-mark-op);
}
html body.fg-hdr .fg-hdr__inner {
	position: relative;
	box-sizing: border-box;
	max-width: 1240px;
	margin: 0 auto;
	padding: 30px 32px 2px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* ---------- logo + wordmark ---------- */
html body.fg-hdr .fg-hdr__home {
	display: inline-flex;
	align-items: center;
	gap: 18px;
	text-decoration: none !important;
	color: var(--fgh-name) !important;
	border-radius: 999px;
}
html body.fg-hdr .fg-hdr__home:focus-visible { outline: 2px solid var(--fgh-accent); outline-offset: 6px; }
html body.fg-hdr img.fg-hdr__logo {
	display: block;
	width: 84px !important;
	height: 84px !important;
	max-width: none;
	object-fit: cover;
	border-radius: 50%;
	box-shadow: 0 0 0 2px var(--fgh-ring), 0 6px 18px -6px rgba(0, 0, 0, .35);
}
html body.fg-hdr .fg-hdr__words { display: flex; flex-direction: column; align-items: flex-start; }
html body.fg-hdr .fg-hdr__name {
	font-family: "FG Cormorant", "Cormorant Garamond", Garamond, Georgia, "Times New Roman", serif;
	font-weight: 500;
	font-size: 50px;
	line-height: 1;
	letter-spacing: 0.035em;
	color: var(--fgh-name);
}
html body.fg-hdr .fg-hdr__tag {
	margin-top: 6px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--fgh-text);
}

/* ---------- desktop menu ---------- */
html body.fg-hdr .fg-hdr__nav {
	margin-top: 20px;
	width: min(100%, 820px);
	border-top: 1px solid var(--fgh-rule);
	display: flex;
	justify-content: center;
}
html body.fg-hdr .fg-hdr__menu,
html body.fg-hdr .fg-hdr__menu .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}
html body.fg-hdr .fg-hdr__nav > .fg-hdr__menu { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 8px; }
html body.fg-hdr .fg-hdr__nav > .fg-hdr__menu > li { position: relative; margin: 0; }
html body.fg-hdr .fg-hdr__nav > .fg-hdr__menu > li > a {
	position: relative;
	display: block;
	padding: 15px 16px 17px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none !important;
	color: var(--fgh-text) !important;
	background: transparent !important;
}
html body.fg-hdr .fg-hdr__nav > .fg-hdr__menu > li > a::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 8px;
	width: 0;
	height: 1.5px;
	background: var(--fgh-under);
	transform: translateX(-50%);
	transition: width .2s ease;
}
html body.fg-hdr .fg-hdr__nav > .fg-hdr__menu > li:hover > a,
html body.fg-hdr .fg-hdr__nav > .fg-hdr__menu > li:focus-within > a,
html body.fg-hdr .fg-hdr__nav > .fg-hdr__menu > li.current-menu-item > a,
html body.fg-hdr .fg-hdr__nav > .fg-hdr__menu > li.current-menu-ancestor > a,
html body.fg-hdr .fg-hdr__nav > .fg-hdr__menu > li.current_page_parent > a {
	color: var(--fgh-accent) !important;
}
html body.fg-hdr .fg-hdr__nav > .fg-hdr__menu > li:hover > a::after,
html body.fg-hdr .fg-hdr__nav > .fg-hdr__menu > li.current-menu-item > a::after,
html body.fg-hdr .fg-hdr__nav > .fg-hdr__menu > li.current-menu-ancestor > a::after,
html body.fg-hdr .fg-hdr__nav > .fg-hdr__menu > li.current_page_parent > a::after { width: 18px; }
/* caret for items with children (Astra’s own toggles hidden) */
html body.fg-hdr .fg-hdr-bar .dropdown-menu-toggle,
html body.fg-hdr .fg-hdr-bar .ast-menu-toggle,
html body.fg-hdr .fg-hdr-bar .ast-header-navigation-arrow,
html body.fg-hdr .fg-hdr-bar .ast-icon { display: none !important; }
html body.fg-hdr .fg-hdr__nav > .fg-hdr__menu > li.menu-item-has-children > a { padding-right: 26px; }
html body.fg-hdr .fg-hdr__nav > .fg-hdr__menu > li.menu-item-has-children > a::before {
	content: "";
	position: absolute;
	right: 11px;
	top: 50%;
	width: 5px; height: 5px;
	margin-top: -5px;
	border-right: 1.3px solid currentColor;
	border-bottom: 1.3px solid currentColor;
	transform: rotate(45deg);
	opacity: .8;
}
/* dropdown: soft cream card, nested levels shown indented inside it */
html body.fg-hdr .fg-hdr__nav .fg-hdr__menu > li > .sub-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	z-index: 1000;
	min-width: 230px;
	padding: 10px !important;
	background: #FFFEF9 !important;
	border: 1px solid #E7DFD3 !important;
	border-radius: 14px;
	box-shadow: 0 18px 40px -18px rgba(28, 25, 23, .35);
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 6px);
	transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
}
html body.fg-hdr .fg-hdr__nav .fg-hdr__menu > li:hover > .sub-menu,
html body.fg-hdr .fg-hdr__nav .fg-hdr__menu > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
	transition-delay: 0s;
}
html body.fg-hdr .fg-hdr__nav .sub-menu .sub-menu {
	position: static !important;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	padding: 0 0 2px 12px !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	width: auto !important;
}
html body.fg-hdr .fg-hdr__nav .sub-menu li { margin: 0; }
html body.fg-hdr .fg-hdr-bar .fg-hdr__nav .fg-hdr__menu .sub-menu a,
html body.fg-hdr .fg-hdr-bar .fg-hdr__nav .fg-hdr__menu .sub-menu .menu-item > a.menu-link {
	display: block;
	padding: 7px 10px;
	border-radius: 8px;
	font-size: 14px;
	line-height: 1.3;
	letter-spacing: 0.01em;
	text-transform: none;
	text-decoration: none !important;
	color: #1C1917 !important;
	background: transparent !important;
}
html body.fg-hdr .fg-hdr-bar .fg-hdr__nav .fg-hdr__menu .sub-menu a:hover,
html body.fg-hdr .fg-hdr-bar .fg-hdr__nav .fg-hdr__menu .sub-menu a:focus-visible,
html body.fg-hdr .fg-hdr-bar .fg-hdr__nav .fg-hdr__menu .sub-menu .menu-item > a.menu-link:hover,
html body.fg-hdr .fg-hdr-bar .fg-hdr__nav .fg-hdr__menu .sub-menu .current-menu-item > a {
	color: #9A3412 !important;
	background: #F5EDE6 !important;
}

/* v1.6.14: 4+ menu levels (Shop > Products > T-shirt > Female Tshirt). Every deeper level is indented another
   12px inside the same card, with a faint guide line; the card is capped in width and in height (scrolls inside
   if a menu ever grows taller than the window), so it never runs off the screen. */
html body.fg-hdr .fg-hdr__nav .fg-hdr__menu > li > .sub-menu {
	width: max-content;
	max-width: min(320px, calc(100vw - 32px));
	max-height: calc(100vh - 170px);
	overflow-y: auto;
	overscroll-behavior: contain;
}
html body.fg-hdr .fg-hdr__nav .sub-menu .sub-menu .sub-menu {
	margin-left: 10px !important;
	padding-left: 8px !important;
	border-left: 1px solid #E7DFD3 !important;
}
html body.fg-hdr .fg-hdr-bar .fg-hdr__nav .fg-hdr__menu .sub-menu .sub-menu .sub-menu a,
html body.fg-hdr .fg-hdr-bar .fg-hdr__nav .fg-hdr__menu .sub-menu .sub-menu .sub-menu .menu-item > a.menu-link {
	padding-top: 5px;
	padding-bottom: 5px;
	font-size: 13.5px;
	color: #44403C !important;
	white-space: normal;
}

/* ---------- tools (basket, X, search) ---------- */
html body.fg-hdr .fg-hdr__tools {
	position: absolute;
	right: 32px;
	bottom: 6px;
	display: flex;
	align-items: center;
	gap: 4px;
}
html body.fg-hdr .fg-hdr__tool {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background: transparent !important;
	color: var(--fgh-text) !important;
	cursor: pointer;
	text-decoration: none !important;
	box-shadow: none !important;
}
html body.fg-hdr .fg-hdr__tool:hover,
html body.fg-hdr .fg-hdr__tool:focus-visible { color: var(--fgh-accent) !important; }
html body.fg-hdr .fg-hdr__tool:focus-visible,
html body.fg-hdr .fg-hdr__burger:focus-visible { outline: 2px solid var(--fgh-accent); outline-offset: 1px; }
html body.fg-hdr .fg-hdr__count {
	position: absolute;
	top: 3px; right: 2px;
	min-width: 16px; height: 16px;
	padding: 0 4px;
	box-sizing: border-box;
	border-radius: 8px;
	background: #C2410C;
	color: #FFFFFF;
	font-size: 10px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
}
html body.fg-hdr .fg-hdr__burger { display: none; }
/* v1.6.12: drawer copy of the social links (phones only) */
html body.fg-hdr .fg-hdr__drawer-social { display: none; }

/* search panel */
html body.fg-hdr .fg-hdr__search[hidden],
html body.fg-hdr .fg-hdr__drawer[hidden] { display: none !important; }
html body.fg-hdr .fg-hdr__search { position: relative; padding: 0 16px 16px; }
html body.fg-hdr .fg-hdr__search form { display: flex; gap: 8px; max-width: 560px; margin: 0 auto; }
html body.fg-hdr .fg-hdr__search input[type="search"] {
	flex: 1;
	min-width: 0;
	padding: 10px 14px;
	border: 1px solid #D6D3D1;
	border-radius: 999px;
	background: #FFFEF9;
	color: #1C1917;
	font-size: 15px;
}
html body.fg-hdr .fg-hdr__search button {
	padding: 10px 18px;
	border: 0;
	border-radius: 999px;
	background: #1C1917;
	color: #F5F0E8;
	font-size: 14px;
	cursor: pointer;
}

/* ---------- tablet + phone ---------- */
@media (max-width: 921px) {
	html body.fg-hdr .fg-hdr__mark::before { left: auto; right: -46px; top: -30px; width: 190px; height: 160px; }
	html body.fg-hdr .fg-hdr__inner {
		flex-direction: row;
		justify-content: space-between;
		padding: 12px 12px 12px 16px;
		min-height: 74px;
	}
	html body.fg-hdr .fg-hdr__home { gap: 12px; }
	html body.fg-hdr img.fg-hdr__logo { width: 50px !important; height: 50px !important; box-shadow: 0 0 0 1.5px var(--fgh-ring), 0 4px 10px -4px rgba(0,0,0,.35); }
	html body.fg-hdr .fg-hdr__name { font-size: 30px; }
	html body.fg-hdr .fg-hdr__tag { display: none; }
	html body.fg-hdr .fg-hdr__nav { display: none; }
	html body.fg-hdr .fg-hdr__tools { position: static; gap: 0; }
	/* v1.6.12: Instagram + X stay in the bar on tablets (600–921px); on phones they move into the drawer (below). */
	html body.fg-hdr .fg-hdr__tool { width: 42px; height: 42px; }
	html body.fg-hdr .fg-hdr__burger {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin: 0 0 0 4px;
		padding: 0;
		border: 1px solid var(--fgh-rule);
		border-radius: 12px;
		background: transparent !important;
		color: var(--fgh-text) !important;
		cursor: pointer;
	}
	html body.fg-hdr .fg-hdr__burger-lines,
	html body.fg-hdr .fg-hdr__burger-lines::before,
	html body.fg-hdr .fg-hdr__burger-lines::after {
		display: block;
		width: 20px;
		height: 1.6px;
		border-radius: 2px;
		background: currentColor;
		transition: transform .2s ease, opacity .2s ease;
	}
	html body.fg-hdr .fg-hdr__burger-lines { position: relative; }
	html body.fg-hdr .fg-hdr__burger-lines::before,
	html body.fg-hdr .fg-hdr__burger-lines::after { content: ""; position: absolute; left: 0; }
	html body.fg-hdr .fg-hdr__burger-lines::before { top: -6px; }
	html body.fg-hdr .fg-hdr__burger-lines::after { top: 6px; }
	html body.fg-hdr .fg-hdr__burger[aria-expanded="true"] .fg-hdr__burger-lines { background: transparent; }
	html body.fg-hdr .fg-hdr__burger[aria-expanded="true"] .fg-hdr__burger-lines::before { transform: translateY(6px) rotate(45deg); }
	html body.fg-hdr .fg-hdr__burger[aria-expanded="true"] .fg-hdr__burger-lines::after { transform: translateY(-6px) rotate(-45deg); }

	/* drawer: full-width panel under the bar */
	html body.fg-hdr .fg-hdr__drawer {
		position: relative;
		background: var(--fgh-drawer);
		border-top: 1px solid var(--fgh-rule);
		padding: 8px 16px 18px;
	}
	html body.fg-hdr .fg-hdr__drawer .fg-hdr__menu > li { border-bottom: 1px solid var(--fgh-rule); }
	html body.fg-hdr .fg-hdr-bar .fg-hdr__drawer .fg-hdr__menu a,
	html body.fg-hdr .fg-hdr-bar .fg-hdr__drawer .fg-hdr__menu .sub-menu .menu-item > a.menu-link {
		display: block;
		padding: 12px 4px;
		font-size: 16px;
		text-decoration: none !important;
		color: var(--fgh-drawer-text) !important;
		background: transparent !important;
	}
	html body.fg-hdr .fg-hdr__drawer .sub-menu {
		position: static !important; display: block !important; visibility: visible !important; opacity: 1 !important;
		padding: 0 0 8px 16px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; width: auto !important;
	}
	html body.fg-hdr .fg-hdr-bar .fg-hdr__drawer .fg-hdr__menu .sub-menu a { padding: 7px 4px; font-size: 15px; }
	/* v1.6.14: 3rd/4th levels in the drawer – smaller steps (12px) + a faint guide line, so 320px phones keep room */
	html body.fg-hdr .fg-hdr__drawer .sub-menu .sub-menu { padding-left: 12px !important; }
	html body.fg-hdr .fg-hdr__drawer .sub-menu .sub-menu .sub-menu { margin-left: 4px !important; border-left: 1px solid var(--fgh-rule) !important; }
	html body.fg-hdr .fg-hdr-bar .fg-hdr__drawer .fg-hdr__menu .sub-menu .sub-menu .sub-menu a { padding: 6px 4px; font-size: 14.5px; opacity: .92; }
	html body.fg-hdr .fg-hdr-bar .fg-hdr__drawer .fg-hdr__menu a:hover,
	html body.fg-hdr .fg-hdr-bar .fg-hdr__drawer .fg-hdr__menu a:focus-visible,
	html body.fg-hdr .fg-hdr-bar .fg-hdr__drawer .fg-hdr__menu .current-menu-item > a { color: var(--fgh-drawer-accent) !important; background: transparent !important; }
	html body.fg-hdr .fg-hdr-bar .fg-hdr__drawer .fg-hdr__menu .current-menu-item > a { font-weight: 600; }
}
/* v1.6.12: phones – drawer FOLLOW row (Instagram + X as labelled 44px buttons).
   v1.6.13: Instagram + X are ALSO in the phone bar again (see the "v1.6.13 phone bar" block below). */
@media (max-width: 599px) {
	html body.fg-hdr .fg-hdr__drawer-social {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 10px;
		padding: 10px 0 14px;
		border-bottom: 1px solid var(--fgh-rule);
	}
	html body.fg-hdr .fg-hdr__drawer-follow {
		font-size: 12px;
		letter-spacing: .14em;
		text-transform: uppercase;
		color: var(--fgh-drawer-accent);
		margin-right: 4px;
	}
	html body.fg-hdr .fg-hdr-bar .fg-hdr__dsocial {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		min-height: 44px;
		padding: 0 16px;
		border: 1px solid var(--fgh-rule);
		border-radius: 999px;
		color: var(--fgh-drawer-text) !important;
		background: transparent !important;
		font-size: 15px;
		text-decoration: none !important;
	}
	html body.fg-hdr .fg-hdr-bar .fg-hdr__dsocial:hover,
	html body.fg-hdr .fg-hdr-bar .fg-hdr__dsocial:focus-visible { color: var(--fgh-drawer-accent) !important; border-color: var(--fgh-drawer-accent); }
	html body.fg-hdr .fg-hdr-bar .fg-hdr__dsocial:focus-visible { outline: 2px solid var(--fgh-drawer-accent); outline-offset: 2px; }
}
/* ---------- v1.6.13 phone bar (< 600px): mark + wordmark + basket, Instagram, X, search, burger ----------
   Every tool is a 40 x 40px target (burger 40 x 40 too); the gaps between them go to 0 instead of shrinking
   the targets. Room is found by tightening the bar padding and stepping the mark + wordmark down with width.
   Tools row = 5 x 40 + 2 = 202px. 600px and up are unchanged from 1.6.12. */
@media (max-width: 599px) {
	html body.fg-hdr .fg-hdr__inner { padding: 10px 8px 10px 12px; min-height: 66px; gap: 6px; }
	html body.fg-hdr .fg-hdr__home { gap: 9px; min-width: 0; flex: 1 1 auto; }
	html body.fg-hdr .fg-hdr__words { min-width: 0; }
	html body.fg-hdr .fg-hdr__name { font-size: 25px; white-space: nowrap; line-height: 1.05; }
	html body.fg-hdr img.fg-hdr__logo { width: 46px !important; height: 46px !important; flex: 0 0 auto; }
	html body.fg-hdr .fg-hdr__tools { flex: 0 0 auto; gap: 0; }
	html body.fg-hdr .fg-hdr__tool { width: 40px; height: 40px; }
	html body.fg-hdr .fg-hdr__tool svg { width: 19px; height: 19px; }
	html body.fg-hdr .fg-hdr__social--x svg { width: 16px; height: 16px; }
	html body.fg-hdr .fg-hdr__burger { width: 40px; height: 40px; margin: 0 0 0 2px; border-radius: 10px; }
	html body.fg-hdr .fg-hdr__burger-lines,
	html body.fg-hdr .fg-hdr__burger-lines::before,
	html body.fg-hdr .fg-hdr__burger-lines::after { width: 18px; }
	html body.fg-hdr .fg-hdr__count { top: 2px; right: 1px; }
}
/* wordmark size follows the free width: (viewport − mark − gaps − 202px tools − padding) ÷ ~4.9em */
@media (max-width: 599px) {
	html body.fg-hdr .fg-hdr__name { font-size: clamp(18px, calc((100vw - 288px) / 4.9), 24px); }
	html body.fg-hdr .fg-hdr__name-a,
	html body.fg-hdr .fg-hdr__name-b { display: inline; }
}
@media (max-width: 419px) {
	html body.fg-hdr .fg-hdr__home { gap: 8px; }
	html body.fg-hdr img.fg-hdr__logo { width: 44px !important; height: 44px !important; }
	html body.fg-hdr .fg-hdr__name { font-size: clamp(17px, calc((100vw - 286px) / 4.9), 24px); }
}
@media (max-width: 374px) {
	html body.fg-hdr .fg-hdr__inner { padding-left: 10px; padding-right: 6px; gap: 4px; }
	html body.fg-hdr .fg-hdr__home { gap: 7px; }
	html body.fg-hdr img.fg-hdr__logo { width: 40px !important; height: 40px !important; }
	html body.fg-hdr .fg-hdr__name { font-size: clamp(16px, calc((100vw - 274px) / 4.9), 22px); }
}
/* < 360px: the wordmark stacks as "FunGuy" over ".me" so it can stay a readable size */
@media (max-width: 359px) {
	html body.fg-hdr .fg-hdr__inner { padding-left: 8px; padding-right: 4px; }
	html body.fg-hdr .fg-hdr__home { gap: 6px; }
	html body.fg-hdr img.fg-hdr__logo { width: 38px !important; height: 38px !important; }
	html body.fg-hdr .fg-hdr__name { font-size: clamp(16px, calc((100vw - 266px) / 3.5), 21px); line-height: .95; }
	html body.fg-hdr .fg-hdr__name-b { display: block; }
}
@media (prefers-reduced-motion: reduce) {
	html body.fg-hdr .fg-hdr-bar * { transition: none !important; }
}

/* ---------- v1.6.16: sticky header (desktop + tablet + phone), CSS only, no JS ----------
   The header stays at the top while the page scrolls. position: sticky works here because #masthead is a direct child
   of #page (overflow visible) and Astra's body { overflow-x: hidden } is passed up to the viewport (html stays visible).
   z-index 990: above page content, below Astra's cart overlay (999) + cart drawer (10000), lightboxes (1042+),
   the WP admin bar (99999). The bar background is already solid (opaque gradient), so nothing shows through.
   Logged-in users: offset by the admin bar (32px, 46px at <= 782px; at <= 600px the admin bar scrolls away, so 0).
   --fg-hdr-h = measured bar height (182px desktop, 74px at <= 921px, 66px at <= 599px), used for anchors + sidebar.
   Roll back: delete this block (or re-upload 1.6.15). */
html body.fg-hdr {
	--fg-sticky-top: 0px;
	--fg-hdr-h: 182px;
}
html body.fg-hdr.admin-bar { --fg-sticky-top: 32px; }
@media screen and (max-width: 782px) {
	html body.fg-hdr.admin-bar { --fg-sticky-top: 46px; }
}
@media screen and (max-width: 600px) {
	html body.fg-hdr.admin-bar { --fg-sticky-top: 0px; }
}
@media (max-width: 921px) {
	html body.fg-hdr { --fg-hdr-h: 74px; }
}
@media (max-width: 599px) {
	html body.fg-hdr { --fg-hdr-h: 66px; }
}
html body.fg-hdr #masthead.fg-hdr-bar {
	position: -webkit-sticky;
	position: sticky;
	top: var(--fg-sticky-top, 0px);
	z-index: 990;
}
/* anchor links (#section, skip link) land below the header, not under it */
html:has(> body.fg-hdr) { scroll-padding-top: 194px; }
html:has(> body.fg-hdr.admin-bar) { scroll-padding-top: 226px; }
@media (max-width: 921px) {
	html:has(> body.fg-hdr) { scroll-padding-top: 86px; }
	html:has(> body.fg-hdr.admin-bar) { scroll-padding-top: 118px; }
}
@media screen and (max-width: 782px) {
	html:has(> body.fg-hdr.admin-bar) { scroll-padding-top: 132px; }
}
@media screen and (max-width: 600px) {
	html:has(> body.fg-hdr.admin-bar) { scroll-padding-top: 86px; }
}
@media (max-width: 599px) {
	html:has(> body.fg-hdr),
	html:has(> body.fg-hdr.admin-bar) { scroll-padding-top: 78px; }
}
/* desktop dropdown: the header is now always at the top, so cap the card to the space under it */
html body.fg-hdr #masthead.fg-hdr-bar .fg-hdr__nav .fg-hdr__menu > li > .sub-menu {
	max-height: calc(100vh - var(--fg-hdr-h) - var(--fg-sticky-top) - 16px);
}
/* desktop sidebar (sticky itself) starts below the sticky header instead of sliding under it */
html body.fg-hdr #page .fg-side__inner {
	top: calc(var(--fg-sticky-top) + var(--fg-hdr-h) + 28px);
}
/* phone/tablet menu drawer + search: scroll inside, so a long menu is never cut off below the screen */
@media (max-width: 921px) {
	html body.fg-hdr #masthead.fg-hdr-bar .fg-hdr__drawer {
		max-height: calc(100vh - var(--fg-hdr-h) - var(--fg-sticky-top));
		max-height: calc(100dvh - var(--fg-hdr-h) - var(--fg-sticky-top));
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}
	html body.fg-hdr #masthead.fg-hdr-bar.is-search-open .fg-hdr__drawer {
		max-height: calc(100vh - var(--fg-hdr-h) - var(--fg-sticky-top) - 64px);
		max-height: calc(100dvh - var(--fg-hdr-h) - var(--fg-sticky-top) - 64px);
	}
}
/* soft shadow under the bar once the page is scrolled (browsers with scroll-driven animations; others: no shadow) */
html body.fg-hdr #masthead.fg-hdr-bar::before {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 100%;
	height: 10px;
	background: linear-gradient(180deg, rgba(0, 0, 0, .16) 0%, rgba(0, 0, 0, 0) 100%);
	opacity: 0;
	pointer-events: none;
}
@supports (animation-timeline: scroll()) {
	@keyframes fg-hdr-shadow-in { to { opacity: 1; } }
	html body.fg-hdr #masthead.fg-hdr-bar::before {
		animation: fg-hdr-shadow-in linear both;
		animation-timeline: scroll(root);
		animation-range: 0 60px;
	}
}

/* ---------- v1.6.17: compact sticky header on scroll (desktop >= 922px only; phones/tablets unchanged) ----------
   assets/fg-header-1617.js adds html.fg-hdr-shrink (JS running) and toggles html.fg-hdr-compact
   (on past 80px of scroll, off again above 24px). Compact = 86px visible: logo 84 → 38px, wordmark 50 → 24px,
   tagline hidden, menu row tighter (gap 20 → 4px, links 45 → 32px), basket/Instagram/X/search stay in the row.
   No layout jump: the bar keeps its full height in the flow (min-height = --fg-hdr-full, measured by the JS),
   its content sits at the bottom, and the sticky top goes negative so only the bottom 86px stays on screen.
   Without JS nothing here applies (full sticky header as in 1.6.16). */
html body.fg-hdr { --fg-hdr-compact: 86px; }
@media (min-width: 922px) {
	html.fg-hdr-shrink body.fg-hdr #masthead.fg-hdr-bar { transition: top .28s ease; }
	html.fg-hdr-shrink body.fg-hdr .fg-hdr__inner {
		min-height: var(--fg-hdr-full, 182px);
		justify-content: flex-end;
	}
	html.fg-hdr-shrink body.fg-hdr img.fg-hdr__logo { transition: width .28s ease, height .28s ease; }
	html.fg-hdr-shrink body.fg-hdr .fg-hdr__home { transition: gap .28s ease; }
	html.fg-hdr-shrink body.fg-hdr .fg-hdr__name { transition: font-size .28s ease; }
	html.fg-hdr-shrink body.fg-hdr .fg-hdr__tag { max-height: 30px; overflow: hidden; transition: max-height .28s ease, margin-top .28s ease, opacity .2s ease; }
	html.fg-hdr-shrink body.fg-hdr .fg-hdr__nav { transition: margin-top .28s ease; }
	html.fg-hdr-shrink body.fg-hdr .fg-hdr__nav > .fg-hdr__menu > li > a { transition: padding .28s ease; }
	html.fg-hdr-shrink body.fg-hdr .fg-hdr__tools { transition: bottom .28s ease; }
	html.fg-hdr-shrink body.fg-hdr #page .fg-side__inner { transition: top .28s ease; }

	/* compact state */
	html.fg-hdr-compact body.fg-hdr { --fg-hdr-h: var(--fg-hdr-compact); }
	html.fg-hdr-shrink.fg-hdr-compact body.fg-hdr #masthead.fg-hdr-bar {
		top: calc(var(--fg-sticky-top, 0px) + var(--fg-hdr-compact) - var(--fg-hdr-full, 182px));
	}
	html.fg-hdr-shrink.fg-hdr-compact body.fg-hdr img.fg-hdr__logo { width: 38px !important; height: 38px !important; }
	html.fg-hdr-shrink.fg-hdr-compact body.fg-hdr .fg-hdr__home { gap: 12px; }
	html.fg-hdr-shrink.fg-hdr-compact body.fg-hdr .fg-hdr__name { font-size: 24px; }
	html.fg-hdr-shrink.fg-hdr-compact body.fg-hdr .fg-hdr__tag { max-height: 0; margin-top: 0; opacity: 0; }
	html.fg-hdr-shrink.fg-hdr-compact body.fg-hdr .fg-hdr__nav { margin-top: 4px; }
	html.fg-hdr-shrink.fg-hdr-compact body.fg-hdr .fg-hdr__nav > .fg-hdr__menu > li > a { padding-top: 9px; padding-bottom: 10px; }
	html.fg-hdr-shrink.fg-hdr-compact body.fg-hdr .fg-hdr__nav > .fg-hdr__menu > li > a::after { bottom: 4px; }
	html.fg-hdr-shrink.fg-hdr-compact body.fg-hdr .fg-hdr__tools { bottom: 0; }

	/* anchors: with the JS running, the header is compact whenever an anchor target is further down the page */
	html.fg-hdr-shrink:has(> body.fg-hdr) { scroll-padding-top: 98px; }
	html.fg-hdr-shrink:has(> body.fg-hdr.admin-bar) { scroll-padding-top: 130px; }
}
@media (prefers-reduced-motion: reduce) {
	html.fg-hdr-shrink body.fg-hdr #masthead.fg-hdr-bar,
	html.fg-hdr-shrink body.fg-hdr #page .fg-side__inner { transition: none !important; }
}

/* ---------- v1.6.21: Shop dropdown opened when hovering the empty space below the menu bar (desktop only) ----------
   Cause: the hidden card (> .sub-menu: opacity 0 + visibility hidden) keeps its nested lists forced to
   "visibility: visible !important" (rule above). A visible child inside a hidden parent is still hit-testable,
   so the invisible Products/Designs lists under the bar caught the pointer and fired li:hover on Shop.
   Fix: hidden card and everything in it ignore the pointer; nested lists inherit the card's visibility;
   the card takes the pointer only while its own item is hovered/focused; a small bridge covers the gap. */
@media (min-width: 922px) {
	html body.fg-hdr .fg-hdr__nav .fg-hdr__menu > li > .sub-menu,
	html body.fg-hdr .fg-hdr__nav .fg-hdr__menu > li > .sub-menu * {
		pointer-events: none;
	}
	html body.fg-hdr .fg-hdr__nav .fg-hdr__menu > li > .sub-menu .sub-menu {
		visibility: inherit !important;
	}
	html body.fg-hdr .fg-hdr__nav .fg-hdr__menu > li:hover > .sub-menu,
	html body.fg-hdr .fg-hdr__nav .fg-hdr__menu > li:focus-within > .sub-menu,
	html body.fg-hdr .fg-hdr__nav .fg-hdr__menu > li:hover > .sub-menu *,
	html body.fg-hdr .fg-hdr__nav .fg-hdr__menu > li:focus-within > .sub-menu * {
		pointer-events: auto;
	}
	/* hover bridge: keeps li:hover alive across the 6px slide-in offset between item and card */
	html body.fg-hdr .fg-hdr__nav > .fg-hdr__menu > li.menu-item-has-children:hover::after {
		content: "";
		position: absolute;
		left: 0; right: 0; top: 100%;
		height: 8px;
	}
}