/*
 * Flowcat 2B public visual layer.
 * Loaded after page styles so shared chrome and interaction states have one
 * authoritative source without disturbing page-specific content layouts.
 */
/* Build: 2B-public-layer-1 */

:root {
	--fc-ink: #2b2620;
	--fc-brown: #6f4e37;
	--fc-accent: #8e5e43;
	--fc-muted: #74655a;
	--fc-canvas: #faf6f0;
	--fc-surface: #fffdf9;
	--fc-band: #efe5d9;
	--fc-line: #d8c7b6;
	--fc-font-display: "League Spartan", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--fc-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--fc-radius-control: 999px;
	--fc-radius-popover: 4px;
	--fc-shadow-soft: 0 6px 18px rgba(43, 38, 32, 0.06);
	--fc-shadow-popover: 0 18px 44px rgba(43, 38, 32, 0.16);
	--fc-transition: 180ms ease;
}

html body {
	--flowcat-ink: var(--fc-ink);
	--flowcat-brown: var(--fc-brown);
	--flowcat-accent: var(--fc-accent);
	--flowcat-muted: var(--fc-muted);
	--flowcat-ivory: var(--fc-canvas);
	--flowcat-paper: var(--fc-surface);
	--flowcat-band: var(--fc-band);
	--flowcat-line: var(--fc-line);
	color: var(--fc-ink);
	background: var(--fc-canvas);
}

html body :is(a, button, input, select, textarea):focus-visible {
	outline: 2px solid var(--fc-accent);
	outline-offset: 3px;
}

html body :is(.button, button, input[type="submit"], .stk-button, .elementor-button) {
	transition: color var(--fc-transition), background-color var(--fc-transition), border-color var(--fc-transition), transform var(--fc-transition), box-shadow var(--fc-transition);
}

/* Shared desktop header */
@media (min-width: 1024px) {
	html body #header.ct-header,
	html body #header.ct-header > div:first-child,
	html body #header.ct-header .ct-container,
	html body #header.ct-header [data-column],
	html body #header.ct-header [data-column] > div,
	html body #header.ct-header .site-branding {
		height: 96px !important;
		min-height: 96px !important;
		align-items: center !important;
	}

	html body #header.ct-header {
		background: #ffffff !important;
		border-bottom: 1px solid var(--fc-line) !important;
		box-shadow: var(--fc-shadow-soft) !important;
	}

	html body #header.ct-header [data-row="middle"] {
		--height: 96px;
		height: 96px !important;
		min-height: 96px !important;
		background: var(--fc-band) !important;
		border-bottom: 1px solid var(--fc-line) !important;
	}

	html body #header [data-row="middle"] > .ct-container {
		grid-template-columns: 1fr auto 1fr !important;
	}

	html body #header .site-branding {
		margin-left: 17px !important;
	}

	html body #header .site-logo-container {
		--logo-max-height: 26px !important;
		display: flex !important;
		align-items: center !important;
		line-height: 0 !important;
	}

	html body #header .site-logo-container img.default-logo {
		display: block !important;
		width: 190px !important;
		height: 26px !important;
		max-height: 26px !important;
		object-fit: contain !important;
	}

	html body #header.ct-header .header-menu-1 .ct-menu-link {
		position: relative !important;
		height: 96px !important;
		color: var(--fc-ink) !important;
		background: transparent !important;
		font-family: var(--fc-font-body) !important;
		font-size: 13px !important;
		font-weight: 600 !important;
		letter-spacing: 1.8px !important;
		transition: color var(--fc-transition), transform var(--fc-transition) !important;
	}

	html body #header.ct-header .header-menu-1 .ct-menu-link::after {
		content: "" !important;
		position: absolute !important;
		right: 0 !important;
		bottom: 22px !important;
		left: 0 !important;
		height: 1.5px !important;
		background: var(--fc-accent) !important;
		transform: scaleX(0) !important;
		transform-origin: center !important;
		transition: transform var(--fc-transition) !important;
	}

	html body #header.ct-header .header-menu-1 :is(.ct-menu-link:hover, .ct-menu-link:focus-visible) {
		color: var(--fc-brown) !important;
		transform: translateY(-1px) !important;
	}

	html body #header.ct-header .header-menu-1 :is(.ct-menu-link:hover, .ct-menu-link:focus-visible)::after,
	html body #header.ct-header .header-menu-1 .current-menu-item > .ct-menu-link::after {
		transform: scaleX(1) !important;
	}
}

/* Header actions and popovers */
html body #header .ct-header-search {
	display: none !important;
}

html body #header .ct-header-account {
	display: inline-flex !important;
	margin-right: 16px !important;
	align-items: center !important;
}

html body #header .ct-account-item .ct-media-container,
html body #header .ct-account-item .ct-icon {
	display: none !important;
}

html body #header .ct-account-item::before {
	content: "" !important;
	display: block !important;
	width: 19px !important;
	height: 19px !important;
	background-color: var(--fc-ink) !important;
	-webkit-mask: url("../images/account.svg") center / contain no-repeat !important;
	mask: url("../images/account.svg") center / contain no-repeat !important;
}

html body #header .ct-account-item:hover::before {
	background-color: var(--fc-brown) !important;
}

html body #header :is(.ct-header-cart, .ct-account-item) {
	color: var(--fc-ink) !important;
}

html body #header .ct-dynamic-count-cart {
	color: #ffffff !important;
	background: var(--fc-brown) !important;
	border-radius: var(--fc-radius-control) !important;
}

html body #header :is(.ct-header-account-dropdown, .ct-cart-content) {
	--dropdown-background-color: var(--fc-canvas);
	--mini-cart-background-color: var(--fc-canvas);
	--dropdown-items-background-hover-color: var(--fc-band);
	--theme-text-color: var(--fc-ink);
	--theme-link-initial-color: var(--fc-ink);
	--theme-link-hover-color: var(--fc-brown);
	color: var(--fc-ink) !important;
	background: var(--fc-canvas) !important;
	border: 1px solid var(--fc-line) !important;
	border-radius: var(--fc-radius-popover) !important;
	box-shadow: var(--fc-shadow-popover) !important;
}

html body #header .ct-header-account-dropdown {
	--dropdown-width: 320px;
	overflow: hidden !important;
}

html body #header :is(.ct-account-welcome, .ct-cart-content .cart-empty) {
	color: var(--fc-ink) !important;
	background: var(--fc-band) !important;
	border-color: var(--fc-line) !important;
}

html body #header .ct-cart-content {
	width: 320px !important;
	padding: 22px !important;
}

html body #header .ct-cart-content .button {
	color: #ffffff !important;
	background: var(--fc-brown) !important;
	border-radius: var(--fc-radius-control) !important;
}

/* Shared footer */
html body footer.ct-footer,
html body footer.ct-footer [data-row] {
	color: var(--fc-ink) !important;
	background: var(--fc-band) !important;
}

html body footer.ct-footer {
	box-shadow: var(--fc-shadow-soft) !important;
}

html body footer.ct-footer a {
	color: var(--fc-ink) !important;
}

html body footer.ct-footer a:hover,
html body footer.ct-footer a:focus-visible {
	color: var(--fc-brown) !important;
}

html body footer.ct-footer .ct-footer-copyright {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	width: 100%;
	color: var(--fc-muted) !important;
	font-size: 13px;
	letter-spacing: 0.02em;
	text-align: left;
}

html body footer.ct-footer [data-row="bottom"] .ct-container > [data-column="copyright"] {
	grid-column: 1 / -1;
	width: 100%;
}

html body footer.ct-footer [data-row="bottom"] .ct-container > [data-column="ghost"] {
	display: none !important;
}

html body footer.ct-footer .flowcat-policy-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 10px 24px;
	margin: 0;
}

html body footer.ct-footer .flowcat-policy-links a {
	position: relative;
	color: var(--fc-muted) !important;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-decoration: none;
	text-transform: uppercase;
}

html body footer.ct-footer .flowcat-policy-links a + a::before {
	position: absolute;
	top: 50%;
	left: -13px;
	width: 3px;
	height: 3px;
	background: var(--fc-line-strong);
	border-radius: 50%;
	content: "";
	transform: translateY(-50%);
}

html body footer.ct-footer .flowcat-policy-links a:is(:hover, :focus-visible) {
	color: var(--fc-brown) !important;
}

html body footer.ct-footer .ct-icon-container {
	color: var(--fc-brown) !important;
	background: #ffffff !important;
	border: 1px solid var(--fc-line) !important;
	border-radius: 8px !important;
	box-shadow: none !important;
}

html body footer.ct-footer .ct-icon,
html body footer.ct-footer .ct-icon svg,
html body footer.ct-footer .ct-icon-container svg {
	color: var(--fc-brown) !important;
	fill: var(--fc-brown) !important;
}

html body footer.ct-footer [data-row="middle"] {
	display: none !important;
}

html body footer.ct-footer [data-row="top"],
html body footer.ct-footer [data-row="bottom"] {
	border-top: 1px solid var(--fc-line) !important;
}

/* Shared accessibility */

html body :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--fc-brown) !important;
	outline-offset: 3px !important;
}

@media (prefers-reduced-motion: reduce) {
	html:focus-within {
		scroll-behavior: auto !important;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}

@media (max-width: 689px) {
	html body footer.ct-footer .ct-footer-copyright {
		flex-direction: column;
		gap: 16px;
		text-align: center;
	}

	html body footer.ct-footer .flowcat-policy-links {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px 18px;
		width: min(100%, 340px);
	}

	html body footer.ct-footer .flowcat-policy-links a + a::before {
		display: none;
	}
}

html body footer.ct-footer [data-row="top"] .ct-container {
	padding-top: 40px !important;
	padding-bottom: 28px !important;
}

html body footer.ct-footer [data-row="bottom"] .ct-container {
	padding-top: 22px !important;
	padding-bottom: 22px !important;
}

/* Shared mobile header and navigation */
@media (max-width: 1023px) {
	html body #header.ct-header,
	html body #header.ct-header > div:first-child,
	html body #header.ct-header .ct-container {
		height: 72px !important;
		min-height: 72px !important;
	}

	html body #header.ct-header,
	html body #header [data-device="mobile"] [data-row="middle"] {
		background: var(--fc-band) !important;
		border-bottom: 1px solid var(--fc-line) !important;
	}

	html body #header [data-device="mobile"] [data-row="middle"] > .ct-container,
	html body #header [data-device="mobile"] .site-branding {
		height: 72px !important;
		align-items: center !important;
	}

	html body #header [data-device="mobile"] [data-row="middle"] > .ct-container {
		grid-template-columns: minmax(0, 1fr) auto !important;
	}

	html body #header [data-device="mobile"] .site-logo-container img {
		width: auto !important;
		max-width: 178px !important;
		max-height: 28px !important;
	}

	html body #header .ct-header-trigger {
		color: var(--fc-brown) !important;
	}

	html body #offcanvas.ct-panel {
		background: rgba(43, 38, 32, 0.48) !important;
	}

	html body #offcanvas .ct-panel-inner {
		--side-panel-width: min(calc(100vw - 24px), 420px);
		width: min(calc(100vw - 24px), 420px) !important;
		max-width: 420px !important;
		color: var(--fc-ink) !important;
		background: var(--fc-canvas) !important;
		border-left: 1px solid var(--fc-line) !important;
		box-shadow: -18px 0 48px rgba(43, 38, 32, 0.18) !important;
	}

	html body #offcanvas .ct-toggle-close {
		color: var(--fc-brown) !important;
		background: var(--fc-surface) !important;
		border: 1px solid var(--fc-line) !important;
		border-radius: 50% !important;
	}

	html body #offcanvas .mobile-menu .menu-item {
		width: 100% !important;
		border-bottom: 1px solid var(--fc-line) !important;
	}

	html body #offcanvas .mobile-menu .ct-menu-link {
		width: 100% !important;
		min-height: 56px !important;
		color: var(--fc-ink) !important;
		font-family: var(--fc-font-display) !important;
		font-size: 20px !important;
		font-weight: 700 !important;
	}

	html body #offcanvas .mobile-menu :is(.current-menu-item > .ct-menu-link, .ct-menu-link:hover, .ct-menu-link:focus-visible) {
		color: var(--fc-brown) !important;
		background: var(--fc-band) !important;
		box-shadow: inset 3px 0 0 var(--fc-accent) !important;
	}

	html body footer.ct-footer [data-row="top"] .ct-container {
		padding-top: 28px !important;
		padding-bottom: 20px !important;
	}
}