/* ==========================================================================
   Advanced Header by Foxco
   Position-aware header with 4 positions (left/top/right/bottom),
   6 visual presets, and a fullscreen drawer.
   ========================================================================== */

/* ---------- Host collapse ----------
   When auto_collapse_host is ON, the widget writes data-foxco-ah-host on:
     - its own .elementor-widget-foxco_advanced_header wrapper
     - the closest Elementor Container / Section / Column
     - the Theme Builder <header class="elementor-location-header"> wrapper
     - any <header> tag ancestor
   These rules force zero height, padding, margin, and min-height on all of
   them so the fixed-positioned rail/bar never leaves an accidental stripe
   of reserved space at the top of the page.

   An inline script rendered with each widget instance sets data-foxco-ah-host
   BEFORE first paint, preventing any flash of the unstyled container.
*/

[data-foxco-ah-host="widget"],
[data-foxco-ah-host="widget"] > .elementor-widget-container {
	padding: 0 !important;
	margin: 0 !important;
	min-height: 0 !important;
	height: auto !important;
}

[data-foxco-ah-host="container"] {
	min-height: 0 !important;
	height: auto !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	background-image: none !important;
	border: 0 !important;
	box-shadow: none !important;
	overflow: visible !important;
}

/* ---------- Base variables ---------- */

.foxco-ah {
	/* Size per breakpoint (set inline by widget). */
	--foxco-ah-size-desktop: 80px;
	--foxco-ah-size-tablet: 70px;
	--foxco-ah-size-mobile: 60px;

	/* Timing */
	--foxco-ah-speed: 350ms;

	/* Default colors (overridden by preset classes). */
	--foxco-ah-rail-bg: #1a1a2e;
	--foxco-ah-icon: #ffffff;
	--foxco-ah-icon-hover: #df6737;
	--foxco-ah-title: #ffffff;
	--foxco-ah-title-size: 14px;
	--foxco-ah-drawer-bg: #1a1a2e;
	--foxco-ah-drawer-heading: #ffffff;
	--foxco-ah-drawer-link: #df6737;
	--foxco-ah-drawer-link-hover: #ffffff;
	--foxco-ah-border: rgba(255, 255, 255, 0.1);
	--foxco-ah-logo-size: 48px;
	--foxco-ah-logo-hover-opacity: 0.85;
	--foxco-ah-z: 9998;
	--foxco-ah-drawer-z: 9999;

	position: fixed;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--foxco-ah-rail-bg);
	z-index: var(--foxco-ah-z);
	box-sizing: border-box;
}

.foxco-ah *,
.foxco-ah-drawer * {
	box-sizing: border-box;
}

.foxco-ah__inner {
	display: flex;
	align-items: center;
	justify-content: var(--foxco-ah-distribute, space-between);
	width: 100%;
	height: 100%;
	gap: var(--foxco-ah-gap, 16px);
}

/* ==========================================================================
   Position rules - mobile first, then tablet, then desktop.
   Data attributes set per-breakpoint position; each @media layer overrides.
   ========================================================================== */

/* ---- Mobile (default, no media query) ---- */

.foxco-ah[data-pos-mobile="left"],
.foxco-ah[data-pos-mobile="right"] {
	top: 0;
	bottom: 0;
	width: var(--foxco-ah-size-mobile);
	height: auto;
	flex-direction: column;
	padding: var(--foxco-ah-rail-padding-mobile, 16px 8px);
}
.foxco-ah[data-pos-mobile="left"] { left: 0; border-right: var(--foxco-ah-border-width, 1px) solid var(--foxco-ah-border); }
.foxco-ah[data-pos-mobile="right"] { right: 0; border-left: var(--foxco-ah-border-width, 1px) solid var(--foxco-ah-border); }

.foxco-ah[data-pos-mobile="top"],
.foxco-ah[data-pos-mobile="bottom"] {
	left: 0;
	right: 0;
	width: auto;
	height: var(--foxco-ah-size-mobile);
	flex-direction: row;
	padding: var(--foxco-ah-rail-padding-mobile, 0 16px);
}
.foxco-ah[data-pos-mobile="top"] { top: 0; border-bottom: var(--foxco-ah-border-width, 1px) solid var(--foxco-ah-border); }
.foxco-ah[data-pos-mobile="bottom"] { bottom: 0; border-top: var(--foxco-ah-border-width, 1px) solid var(--foxco-ah-border); }

.foxco-ah[data-pos-mobile="left"] .foxco-ah__inner,
.foxco-ah[data-pos-mobile="right"] .foxco-ah__inner { flex-direction: column; }

.foxco-ah[data-pos-mobile="top"] .foxco-ah__inner,
.foxco-ah[data-pos-mobile="bottom"] .foxco-ah__inner { flex-direction: row; }

/* ---- Float FAB mode (mobile, default scope) ---- */
/* The rail collapses to a compact square button anchored to a viewport corner.
   Only the toggle button (hamburger) is visible; logo, title, and utility icons
   should be hidden via Element Alignment -> Visibility to keep it minimal.
   Corner is driven by data-float-corner-mobile. */
.foxco-ah[data-pos-mobile="float"] {
	width: var(--foxco-ah-size-mobile);
	height: var(--foxco-ah-size-mobile);
	border: none;
	padding: 0;
	flex-direction: row;
	border-radius: var(--foxco-ah-corner, 6px);
	box-shadow: var(--foxco-ah-shadow, 0 4px 16px rgba(0,0,0,0.18));
}
.foxco-ah[data-pos-mobile="float"] .foxco-ah__inner {
	flex-direction: row;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
}
/* Corner positioning - bottom-right default */
.foxco-ah[data-pos-mobile="float"][data-float-corner-mobile="bottom-right"] {
	bottom: var(--foxco-ah-float-inset, 20px);
	right: var(--foxco-ah-float-inset, 20px);
}
.foxco-ah[data-pos-mobile="float"][data-float-corner-mobile="bottom-left"] {
	bottom: var(--foxco-ah-float-inset, 20px);
	left: var(--foxco-ah-float-inset, 20px);
}
.foxco-ah[data-pos-mobile="float"][data-float-corner-mobile="top-right"] {
	top: var(--foxco-ah-float-inset, 20px);
	right: var(--foxco-ah-float-inset, 20px);
}
.foxco-ah[data-pos-mobile="float"][data-float-corner-mobile="top-left"] {
	top: var(--foxco-ah-float-inset, 20px);
	left: var(--foxco-ah-float-inset, 20px);
}

/* ---- Tablet (768px and up) ---- */

@media (min-width: 768px) {
	.foxco-ah[data-pos-tablet="left"],
	.foxco-ah[data-pos-tablet="right"] {
		top: 0;
		bottom: 0;
		width: var(--foxco-ah-size-tablet);
		height: auto;
		flex-direction: column;
		padding: var(--foxco-ah-rail-padding-tablet, 20px 10px);
	}
	.foxco-ah[data-pos-tablet="left"] { left: 0; right: auto; border-right: var(--foxco-ah-border-width, 1px) solid var(--foxco-ah-border); border-left: 0; border-top: 0; border-bottom: 0; }
	.foxco-ah[data-pos-tablet="right"] { right: 0; left: auto; border-left: var(--foxco-ah-border-width, 1px) solid var(--foxco-ah-border); border-right: 0; border-top: 0; border-bottom: 0; }

	.foxco-ah[data-pos-tablet="top"],
	.foxco-ah[data-pos-tablet="bottom"] {
		left: 0;
		right: 0;
		width: auto;
		height: var(--foxco-ah-size-tablet);
		flex-direction: row;
		padding: var(--foxco-ah-rail-padding-tablet, 0 20px);
	}
	.foxco-ah[data-pos-tablet="top"] { top: 0; bottom: auto; border-bottom: var(--foxco-ah-border-width, 1px) solid var(--foxco-ah-border); border-top: 0; border-left: 0; border-right: 0; }
	.foxco-ah[data-pos-tablet="bottom"] { bottom: 0; top: auto; border-top: var(--foxco-ah-border-width, 1px) solid var(--foxco-ah-border); border-bottom: 0; border-left: 0; border-right: 0; }

	.foxco-ah[data-pos-tablet="left"] .foxco-ah__inner,
	.foxco-ah[data-pos-tablet="right"] .foxco-ah__inner { flex-direction: column; }

	.foxco-ah[data-pos-tablet="top"] .foxco-ah__inner,
	.foxco-ah[data-pos-tablet="bottom"] .foxco-ah__inner { flex-direction: row; }

	/* Float FAB - tablet */
	.foxco-ah[data-pos-tablet="float"] {
		width: var(--foxco-ah-size-tablet); height: var(--foxco-ah-size-tablet);
		border: none; padding: 0; flex-direction: row;
		border-radius: var(--foxco-ah-corner, 6px);
		box-shadow: var(--foxco-ah-shadow, 0 4px 16px rgba(0,0,0,0.18));
	}
	.foxco-ah[data-pos-tablet="float"] .foxco-ah__inner { flex-direction: row; justify-content: center; align-items: center; width: 100%; height: 100%; }
	.foxco-ah[data-pos-tablet="float"][data-float-corner-tablet="bottom-right"] { bottom: var(--foxco-ah-float-inset,20px); right: var(--foxco-ah-float-inset,20px); top: auto; left: auto; }
	.foxco-ah[data-pos-tablet="float"][data-float-corner-tablet="bottom-left"]  { bottom: var(--foxco-ah-float-inset,20px); left: var(--foxco-ah-float-inset,20px);  top: auto; right: auto; }
	.foxco-ah[data-pos-tablet="float"][data-float-corner-tablet="top-right"]    { top: var(--foxco-ah-float-inset,20px);    right: var(--foxco-ah-float-inset,20px); bottom: auto; left: auto; }
	.foxco-ah[data-pos-tablet="float"][data-float-corner-tablet="top-left"]     { top: var(--foxco-ah-float-inset,20px);    left: var(--foxco-ah-float-inset,20px);  bottom: auto; right: auto; }
}

/* ---- Desktop (1025px and up) ---- */

@media (min-width: 1025px) {
	.foxco-ah[data-pos-desktop="left"],
	.foxco-ah[data-pos-desktop="right"] {
		top: 0;
		bottom: 0;
		width: var(--foxco-ah-size-desktop);
		height: auto;
		flex-direction: column;
		padding: var(--foxco-ah-rail-padding-desktop, 24px 12px);
	}
	.foxco-ah[data-pos-desktop="left"] { left: 0; right: auto; border-right: var(--foxco-ah-border-width, 1px) solid var(--foxco-ah-border); border-left: 0; border-top: 0; border-bottom: 0; }
	.foxco-ah[data-pos-desktop="right"] { right: 0; left: auto; border-left: var(--foxco-ah-border-width, 1px) solid var(--foxco-ah-border); border-right: 0; border-top: 0; border-bottom: 0; }

	.foxco-ah[data-pos-desktop="top"],
	.foxco-ah[data-pos-desktop="bottom"] {
		left: 0;
		right: 0;
		width: auto;
		height: var(--foxco-ah-size-desktop);
		flex-direction: row;
		padding: var(--foxco-ah-rail-padding-desktop, 0 24px);
	}
	.foxco-ah[data-pos-desktop="top"] { top: 0; bottom: auto; border-bottom: var(--foxco-ah-border-width, 1px) solid var(--foxco-ah-border); border-top: 0; border-left: 0; border-right: 0; }
	.foxco-ah[data-pos-desktop="bottom"] { bottom: 0; top: auto; border-top: var(--foxco-ah-border-width, 1px) solid var(--foxco-ah-border); border-bottom: 0; border-left: 0; border-right: 0; }

	.foxco-ah[data-pos-desktop="left"] .foxco-ah__inner,
	.foxco-ah[data-pos-desktop="right"] .foxco-ah__inner { flex-direction: column; }

	.foxco-ah[data-pos-desktop="top"] .foxco-ah__inner,
	.foxco-ah[data-pos-desktop="bottom"] .foxco-ah__inner { flex-direction: row; }

	/* Float FAB - desktop */
	.foxco-ah[data-pos-desktop="float"] {
		width: var(--foxco-ah-size-desktop); height: var(--foxco-ah-size-desktop);
		border: none; padding: 0; flex-direction: row;
		border-radius: var(--foxco-ah-corner, 6px);
		box-shadow: var(--foxco-ah-shadow, 0 4px 16px rgba(0,0,0,0.18));
	}
	.foxco-ah[data-pos-desktop="float"] .foxco-ah__inner { flex-direction: row; justify-content: center; align-items: center; width: 100%; height: 100%; }
	.foxco-ah[data-pos-desktop="float"][data-float-corner-desktop="bottom-right"] { bottom: var(--foxco-ah-float-inset,20px); right: var(--foxco-ah-float-inset,20px); top: auto; left: auto; }
	.foxco-ah[data-pos-desktop="float"][data-float-corner-desktop="bottom-left"]  { bottom: var(--foxco-ah-float-inset,20px); left: var(--foxco-ah-float-inset,20px);  top: auto; right: auto; }
	.foxco-ah[data-pos-desktop="float"][data-float-corner-desktop="top-right"]    { top: var(--foxco-ah-float-inset,20px);    right: var(--foxco-ah-float-inset,20px); bottom: auto; left: auto; }
	.foxco-ah[data-pos-desktop="float"][data-float-corner-desktop="top-left"]     { top: var(--foxco-ah-float-inset,20px);    left: var(--foxco-ah-float-inset,20px);  bottom: auto; right: auto; }
}

/* ==========================================================================
   Inner elements
   ========================================================================== */

.foxco-ah__logo {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

.foxco-ah__logo img {
	/* max-width, max-height, opacity, and filter are written as inline style by
	   render_logo() so they are always exactly what PHP computed - no cascade,
	   no Elementor CSS generation, no caching layer involved.
	   Only transition lives here so browser-native hover and adaptive-filter
	   fades still work. */
	transition: opacity var(--foxco-ah-speed) ease, filter var(--foxco-ah-speed) ease;
}

.foxco-ah__logo a:hover img,
.foxco-ah__logo a:focus-visible img {
	opacity: var(--foxco-ah-logo-hover-opacity, 0.85);
}

.foxco-ah__btn,
.foxco-ah__btn:hover,
.foxco-ah__btn:focus,
.foxco-ah__btn:focus-visible,
.foxco-ah__btn:active {
	background: transparent !important;
	background-image: none !important;
	border: 0 !important;
	box-shadow: none !important;
	text-shadow: none !important;
	appearance: none;
	-webkit-appearance: none;
	border-radius: 0;
	margin: 0;
	padding: var(--foxco-ah-icon-padding, 10px);
	cursor: pointer;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: color var(--foxco-ah-speed) ease, transform var(--foxco-ah-speed) ease, opacity var(--foxco-ah-speed) ease;
}

.foxco-ah__btn { color: var(--foxco-ah-icon); }

/* Explicit sizes - these always win over the armored rule (no font-size in armor) */
.foxco-ah__toggle { font-size: var(--foxco-ah-toggle-size, 24px) !important; flex: 0 0 auto; }
.foxco-ah-drawer__close { font-size: var(--foxco-ah-close-size, 28px) !important; }

.foxco-ah__btn:hover,
.foxco-ah__btn:focus-visible {
	color: var(--foxco-ah-icon-hover) !important;
	outline: none;
}
.foxco-ah__btn:focus-visible { box-shadow: 0 0 0 2px var(--foxco-ah-icon-hover) !important; border-radius: 4px; }

/* ==========================================================================
   Utility icons group (.foxco-ah__icons)
   ----------------------------------------------------------------------------
   A horizontal or vertical run of optional account/cart/search/etc. icons.
   The group itself is a single .foxco-ah__item so it gets the same Element
   Alignment treatment as logo/toggle/title. Direction follows the rail axis:
   horizontal rail (top/bottom) -> icons in a row; vertical rail (left/right)
   -> icons stacked. Color inherits from --foxco-ah-icon so the icons share
   the preset's theme; hover uses --foxco-ah-icon-hover. Per-icon hide-on-{bp}
   classes mirror the existing foxco-ah__item--hide-{bp} pattern.
   ========================================================================== */

.foxco-ah__icons {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: var(--foxco-ah-icons-gap-mobile, 14px);
	flex: 0 0 auto;
}

/* Vertical rails stack icons */
.foxco-ah[data-pos-mobile="left"] .foxco-ah__icons,
.foxco-ah[data-pos-mobile="right"] .foxco-ah__icons {
	flex-direction: column;
}

.foxco-ah__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--foxco-ah-icon);
	font-size: var(--foxco-ah-icons-size-mobile, 20px);
	line-height: 1;
	text-decoration: none;
	transition: color var(--foxco-ah-speed) ease, transform var(--foxco-ah-speed) ease, opacity var(--foxco-ah-speed) ease;
}
.foxco-ah__icon:hover,
.foxco-ah__icon:focus-visible {
	color: var(--foxco-ah-icon-hover);
	outline: none;
}
.foxco-ah__icon:focus-visible {
	box-shadow: 0 0 0 2px var(--foxco-ah-icon-hover);
	border-radius: 4px;
}
.foxco-ah__icon svg,
.foxco-ah__icon i {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* Per-icon visibility (mirrors .foxco-ah__item--hide-{bp}) */
.foxco-ah__icon--hide-mobile { display: none; }

@media (min-width: 768px) {
	.foxco-ah__icons {
		gap: var(--foxco-ah-icons-gap-tablet, 14px);
	}
	.foxco-ah[data-pos-tablet="left"] .foxco-ah__icons,
	.foxco-ah[data-pos-tablet="right"] .foxco-ah__icons {
		flex-direction: column;
	}
	.foxco-ah[data-pos-tablet="top"] .foxco-ah__icons,
	.foxco-ah[data-pos-tablet="bottom"] .foxco-ah__icons {
		flex-direction: row;
	}
	.foxco-ah__icon {
		font-size: var(--foxco-ah-icons-size-tablet, 20px);
	}
	.foxco-ah__icon--hide-mobile { display: inline-flex; }
	.foxco-ah__icon--hide-tablet { display: none; }
}

@media (min-width: 1025px) {
	.foxco-ah__icons {
		gap: var(--foxco-ah-icons-gap-desktop, 14px);
	}
	.foxco-ah[data-pos-desktop="left"] .foxco-ah__icons,
	.foxco-ah[data-pos-desktop="right"] .foxco-ah__icons {
		flex-direction: column;
	}
	.foxco-ah[data-pos-desktop="top"] .foxco-ah__icons,
	.foxco-ah[data-pos-desktop="bottom"] .foxco-ah__icons {
		flex-direction: row;
	}
	.foxco-ah__icon {
		font-size: var(--foxco-ah-icons-size-desktop, 20px);
	}
	.foxco-ah__icon--hide-tablet { display: inline-flex; }
	.foxco-ah__icon--hide-desktop { display: none; }
}

.foxco-ah__btn i,
.foxco-ah__btn svg {
	font-size: inherit;
	width: 1em;
	height: 1em;
	fill: currentColor;
	flex-shrink: 0;
}

.foxco-ah__title-wrap {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
}

.foxco-ah__title {
	color: var(--foxco-ah-title);
	font-size: var(--foxco-ah-title-size);
	font-weight: 600;
	white-space: nowrap;
	letter-spacing: var(--foxco-ah-title-spacing, 0.02em);
	text-transform: var(--foxco-ah-title-transform, uppercase);
}

/* ==========================================================================
   Per-item alignment & order (mobile-first, per-breakpoint)
   --foxco-ah-order-{bp}   numeric flex order (1-3)
   --foxco-ah-align-{bp}   align-self for cross axis + justify-self-ish for main
   Visibility is controlled by .foxco-ah__item--hide-{bp} classes below.
   ========================================================================== */

/* Mobile (default scope - no media query) */
.foxco-ah__item {
	order: var(--foxco-ah-order-mobile, var(--foxco-ah-order-tablet, var(--foxco-ah-order-desktop, 0)));
	align-self: var(--foxco-ah-align-mobile, var(--foxco-ah-align-tablet, var(--foxco-ah-align-desktop, auto)));
}

/* On horizontal bars (top/bottom), alignment controls horizontal position via margin */
.foxco-ah[data-pos-mobile="top"] .foxco-ah__item,
.foxco-ah[data-pos-mobile="bottom"] .foxco-ah__item {
	--foxco-ah-axis: horizontal;
}
.foxco-ah[data-pos-mobile="left"] .foxco-ah__item,
.foxco-ah[data-pos-mobile="right"] .foxco-ah__item {
	--foxco-ah-axis: vertical;
}

/* Visibility per breakpoint - mobile first */
.foxco-ah__item--hide-mobile { display: none !important; }

@media (min-width: 768px) {
	.foxco-ah__item--hide-mobile { display: flex !important; }
	.foxco-ah__item--hide-tablet { display: none !important; }
	.foxco-ah__item {
		order: var(--foxco-ah-order-tablet, var(--foxco-ah-order-desktop, var(--foxco-ah-order-mobile, 0)));
		align-self: var(--foxco-ah-align-tablet, var(--foxco-ah-align-desktop, var(--foxco-ah-align-mobile, auto)));
	}
	.foxco-ah[data-pos-tablet="top"] .foxco-ah__item,
	.foxco-ah[data-pos-tablet="bottom"] .foxco-ah__item {
		--foxco-ah-axis: horizontal;
	}
	.foxco-ah[data-pos-tablet="left"] .foxco-ah__item,
	.foxco-ah[data-pos-tablet="right"] .foxco-ah__item {
		--foxco-ah-axis: vertical;
	}
}

@media (min-width: 1025px) {
	.foxco-ah__item--hide-tablet { display: flex !important; }
	.foxco-ah__item--hide-desktop { display: none !important; }
	.foxco-ah__item {
		order: var(--foxco-ah-order-desktop, var(--foxco-ah-order-tablet, var(--foxco-ah-order-mobile, 0)));
		align-self: var(--foxco-ah-align-desktop, var(--foxco-ah-align-tablet, var(--foxco-ah-align-mobile, auto)));
	}
	.foxco-ah[data-pos-desktop="top"] .foxco-ah__item,
	.foxco-ah[data-pos-desktop="bottom"] .foxco-ah__item {
		--foxco-ah-axis: horizontal;
	}
	.foxco-ah[data-pos-desktop="left"] .foxco-ah__item,
	.foxco-ah[data-pos-desktop="right"] .foxco-ah__item {
		--foxco-ah-axis: vertical;
	}
}

/* ==========================================================================
   Positioned mode (opt-in, activated by data-positioned="1" on the rail)
   ----------------------------------------------------------------------------
   When any element has a Position control set, the rail switches from the
   default flex distribution to absolute placement so each item lands exactly
   at start/center/end of the main axis regardless of sibling widths. The
   key win is that "center" is the true viewport center, not the midpoint
   between siblings, which is what flex space-between gives you.

   Structure: .foxco-ah__inner becomes the positioning context (relative).
   Every .foxco-ah__item becomes position:absolute. Items with explicit
   data-pos-along-{bp} are placed by the breakpoint-scoped rules below;
   items without an explicit position default to start.

   Per-breakpoint orientation lookup:
   - data-pos-{bp}="top"   or "bottom" => horizontal rail, position along X
   - data-pos-{bp}="left"  or "right"  => vertical rail,   position along Y
   In horizontal rails items are also vertically centered; in vertical rails
   horizontally centered. Translates handle the half-self offset for center.
   ========================================================================== */

.foxco-ah[data-positioned="1"] .foxco-ah__inner {
	position: relative;
	/* Restore explicit width/height in case future overrides break it - absolute
	   children need a sized positioning context. */
	width: 100%;
	height: 100%;
}

.foxco-ah[data-positioned="1"] .foxco-ah__item {
	position: absolute;
}

/* ---- Mobile (default scope) ---- */

/* Default placement for items without a mobile position attribute = start */
.foxco-ah[data-positioned="1"][data-pos-mobile="top"] .foxco-ah__item:not([data-pos-along-mobile]),
.foxco-ah[data-positioned="1"][data-pos-mobile="bottom"] .foxco-ah__item:not([data-pos-along-mobile]) {
	left: 0; top: 50%; transform: translateY(-50%);
}
.foxco-ah[data-positioned="1"][data-pos-mobile="left"] .foxco-ah__item:not([data-pos-along-mobile]),
.foxco-ah[data-positioned="1"][data-pos-mobile="right"] .foxco-ah__item:not([data-pos-along-mobile]) {
	top: 0; left: 50%; transform: translateX(-50%);
}

/* Explicit positions on horizontal rails */
.foxco-ah[data-positioned="1"][data-pos-mobile="top"] .foxco-ah__item[data-pos-along-mobile="start"],
.foxco-ah[data-positioned="1"][data-pos-mobile="bottom"] .foxco-ah__item[data-pos-along-mobile="start"] {
	left: 0; right: auto; top: 50%; bottom: auto; transform: translateY(-50%);
}
.foxco-ah[data-positioned="1"][data-pos-mobile="top"] .foxco-ah__item[data-pos-along-mobile="center"],
.foxco-ah[data-positioned="1"][data-pos-mobile="bottom"] .foxco-ah__item[data-pos-along-mobile="center"] {
	left: 50%; right: auto; top: 50%; bottom: auto; transform: translate(-50%, -50%);
}
.foxco-ah[data-positioned="1"][data-pos-mobile="top"] .foxco-ah__item[data-pos-along-mobile="end"],
.foxco-ah[data-positioned="1"][data-pos-mobile="bottom"] .foxco-ah__item[data-pos-along-mobile="end"] {
	left: auto; right: 0; top: 50%; bottom: auto; transform: translateY(-50%);
}

/* Explicit positions on vertical rails */
.foxco-ah[data-positioned="1"][data-pos-mobile="left"] .foxco-ah__item[data-pos-along-mobile="start"],
.foxco-ah[data-positioned="1"][data-pos-mobile="right"] .foxco-ah__item[data-pos-along-mobile="start"] {
	top: 0; bottom: auto; left: 50%; right: auto; transform: translateX(-50%);
}
.foxco-ah[data-positioned="1"][data-pos-mobile="left"] .foxco-ah__item[data-pos-along-mobile="center"],
.foxco-ah[data-positioned="1"][data-pos-mobile="right"] .foxco-ah__item[data-pos-along-mobile="center"] {
	top: 50%; bottom: auto; left: 50%; right: auto; transform: translate(-50%, -50%);
}
.foxco-ah[data-positioned="1"][data-pos-mobile="left"] .foxco-ah__item[data-pos-along-mobile="end"],
.foxco-ah[data-positioned="1"][data-pos-mobile="right"] .foxco-ah__item[data-pos-along-mobile="end"] {
	top: auto; bottom: 0; left: 50%; right: auto; transform: translateX(-50%);
}

/* ---- Tablet overrides (>= 768px) ---- */
@media (min-width: 768px) {
	.foxco-ah[data-positioned="1"][data-pos-tablet="top"] .foxco-ah__item:not([data-pos-along-tablet]),
	.foxco-ah[data-positioned="1"][data-pos-tablet="bottom"] .foxco-ah__item:not([data-pos-along-tablet]) {
		left: 0; right: auto; top: 50%; bottom: auto; transform: translateY(-50%);
	}
	.foxco-ah[data-positioned="1"][data-pos-tablet="left"] .foxco-ah__item:not([data-pos-along-tablet]),
	.foxco-ah[data-positioned="1"][data-pos-tablet="right"] .foxco-ah__item:not([data-pos-along-tablet]) {
		top: 0; bottom: auto; left: 50%; right: auto; transform: translateX(-50%);
	}

	.foxco-ah[data-positioned="1"][data-pos-tablet="top"] .foxco-ah__item[data-pos-along-tablet="start"],
	.foxco-ah[data-positioned="1"][data-pos-tablet="bottom"] .foxco-ah__item[data-pos-along-tablet="start"] {
		left: 0; right: auto; top: 50%; bottom: auto; transform: translateY(-50%);
	}
	.foxco-ah[data-positioned="1"][data-pos-tablet="top"] .foxco-ah__item[data-pos-along-tablet="center"],
	.foxco-ah[data-positioned="1"][data-pos-tablet="bottom"] .foxco-ah__item[data-pos-along-tablet="center"] {
		left: 50%; right: auto; top: 50%; bottom: auto; transform: translate(-50%, -50%);
	}
	.foxco-ah[data-positioned="1"][data-pos-tablet="top"] .foxco-ah__item[data-pos-along-tablet="end"],
	.foxco-ah[data-positioned="1"][data-pos-tablet="bottom"] .foxco-ah__item[data-pos-along-tablet="end"] {
		left: auto; right: 0; top: 50%; bottom: auto; transform: translateY(-50%);
	}

	.foxco-ah[data-positioned="1"][data-pos-tablet="left"] .foxco-ah__item[data-pos-along-tablet="start"],
	.foxco-ah[data-positioned="1"][data-pos-tablet="right"] .foxco-ah__item[data-pos-along-tablet="start"] {
		top: 0; bottom: auto; left: 50%; right: auto; transform: translateX(-50%);
	}
	.foxco-ah[data-positioned="1"][data-pos-tablet="left"] .foxco-ah__item[data-pos-along-tablet="center"],
	.foxco-ah[data-positioned="1"][data-pos-tablet="right"] .foxco-ah__item[data-pos-along-tablet="center"] {
		top: 50%; bottom: auto; left: 50%; right: auto; transform: translate(-50%, -50%);
	}
	.foxco-ah[data-positioned="1"][data-pos-tablet="left"] .foxco-ah__item[data-pos-along-tablet="end"],
	.foxco-ah[data-positioned="1"][data-pos-tablet="right"] .foxco-ah__item[data-pos-along-tablet="end"] {
		top: auto; bottom: 0; left: 50%; right: auto; transform: translateX(-50%);
	}
}

/* ---- Desktop overrides (>= 1025px) ---- */
@media (min-width: 1025px) {
	.foxco-ah[data-positioned="1"][data-pos-desktop="top"] .foxco-ah__item:not([data-pos-along-desktop]),
	.foxco-ah[data-positioned="1"][data-pos-desktop="bottom"] .foxco-ah__item:not([data-pos-along-desktop]) {
		left: 0; right: auto; top: 50%; bottom: auto; transform: translateY(-50%);
	}
	.foxco-ah[data-positioned="1"][data-pos-desktop="left"] .foxco-ah__item:not([data-pos-along-desktop]),
	.foxco-ah[data-positioned="1"][data-pos-desktop="right"] .foxco-ah__item:not([data-pos-along-desktop]) {
		top: 0; bottom: auto; left: 50%; right: auto; transform: translateX(-50%);
	}

	.foxco-ah[data-positioned="1"][data-pos-desktop="top"] .foxco-ah__item[data-pos-along-desktop="start"],
	.foxco-ah[data-positioned="1"][data-pos-desktop="bottom"] .foxco-ah__item[data-pos-along-desktop="start"] {
		left: 0; right: auto; top: 50%; bottom: auto; transform: translateY(-50%);
	}
	.foxco-ah[data-positioned="1"][data-pos-desktop="top"] .foxco-ah__item[data-pos-along-desktop="center"],
	.foxco-ah[data-positioned="1"][data-pos-desktop="bottom"] .foxco-ah__item[data-pos-along-desktop="center"] {
		left: 50%; right: auto; top: 50%; bottom: auto; transform: translate(-50%, -50%);
	}
	.foxco-ah[data-positioned="1"][data-pos-desktop="top"] .foxco-ah__item[data-pos-along-desktop="end"],
	.foxco-ah[data-positioned="1"][data-pos-desktop="bottom"] .foxco-ah__item[data-pos-along-desktop="end"] {
		left: auto; right: 0; top: 50%; bottom: auto; transform: translateY(-50%);
	}

	.foxco-ah[data-positioned="1"][data-pos-desktop="left"] .foxco-ah__item[data-pos-along-desktop="start"],
	.foxco-ah[data-positioned="1"][data-pos-desktop="right"] .foxco-ah__item[data-pos-along-desktop="start"] {
		top: 0; bottom: auto; left: 50%; right: auto; transform: translateX(-50%);
	}
	.foxco-ah[data-positioned="1"][data-pos-desktop="left"] .foxco-ah__item[data-pos-along-desktop="center"],
	.foxco-ah[data-positioned="1"][data-pos-desktop="right"] .foxco-ah__item[data-pos-along-desktop="center"] {
		top: 50%; bottom: auto; left: 50%; right: auto; transform: translate(-50%, -50%);
	}
	.foxco-ah[data-positioned="1"][data-pos-desktop="left"] .foxco-ah__item[data-pos-along-desktop="end"],
	.foxco-ah[data-positioned="1"][data-pos-desktop="right"] .foxco-ah__item[data-pos-along-desktop="end"] {
		top: auto; bottom: 0; left: 50%; right: auto; transform: translateX(-50%);
	}
}

/* ==========================================================================
   Mobile top bar improvements
   When position is top or bottom AND on mobile breakpoint, the title-wrap
   should not stretch and steal space from the logo/hamburger. Also title
   font sizes down so it fits comfortably next to logo + hamburger.
   ========================================================================== */

.foxco-ah[data-pos-mobile="top"] .foxco-ah__title-wrap,
.foxco-ah[data-pos-mobile="bottom"] .foxco-ah__title-wrap {
	flex: 0 1 auto;
	padding: 0 12px;
}

.foxco-ah[data-pos-mobile="top"] .foxco-ah__title,
.foxco-ah[data-pos-mobile="bottom"] .foxco-ah__title {
	font-size: calc(var(--foxco-ah-title-size, 14px) * 0.92);
	letter-spacing: 0.04em;
}

/* Give mobile top bars a bit of breathing room around each element */
.foxco-ah[data-pos-mobile="top"] .foxco-ah__logo,
.foxco-ah[data-pos-mobile="bottom"] .foxco-ah__logo {
	flex: 0 0 auto;
}

.foxco-ah[data-pos-mobile="top"] .foxco-ah__logo img,
.foxco-ah[data-pos-mobile="bottom"] .foxco-ah__logo img {
	/* Keep the logo proportional to the mobile bar height */
	max-height: calc(var(--foxco-ah-size-mobile) - 20px);
	max-width: min(var(--foxco-ah-logo-size, 48px), 40vw);
}

/* If user hasn't set an explicit mobile logo size via max-height, give a sensible cap */
@media (max-width: 767px) {
	.foxco-ah[data-pos-mobile="top"],
	.foxco-ah[data-pos-mobile="bottom"] {
		/* tighter horizontal padding than default 0 16px */
		padding: var(--foxco-ah-rail-padding-mobile, 0 14px);
	}
}

/* ==========================================================================
   Classic mobile defaults for top/bottom bars:
   Logo first (left), Title centered, Hamburger last (right).
   Only applies on mobile when user has NOT set an Order override.
   CSS var fallback chain in .foxco-ah__item already returns 0 for unset
   orders, so we reassign via inherent DOM-order class targets instead.
   ========================================================================== */

@media (max-width: 767px) {
	.foxco-ah[data-pos-mobile="top"] .foxco-ah__logo,
	.foxco-ah[data-pos-mobile="bottom"] .foxco-ah__logo {
		order: var(--foxco-ah-order-mobile, 1);
	}
	.foxco-ah[data-pos-mobile="top"] .foxco-ah__title-wrap,
	.foxco-ah[data-pos-mobile="bottom"] .foxco-ah__title-wrap {
		order: var(--foxco-ah-order-mobile, 2);
		/* Absolute center trick so the title is optically centered even when
		   logo + hamburger are different widths. */
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		pointer-events: none;
	}
	.foxco-ah[data-pos-mobile="top"] .foxco-ah__title-wrap .foxco-ah__title,
	.foxco-ah[data-pos-mobile="bottom"] .foxco-ah__title-wrap .foxco-ah__title {
		pointer-events: auto;
	}
	.foxco-ah[data-pos-mobile="top"] .foxco-ah__toggle,
	.foxco-ah[data-pos-mobile="bottom"] .foxco-ah__toggle {
		order: var(--foxco-ah-order-mobile, 3);
		margin-left: auto;
	}
	/* When user explicitly orders the title, restore flex flow */
	.foxco-ah[data-pos-mobile="top"] .foxco-ah__title-wrap[style*="--foxco-ah-order-mobile"],
	.foxco-ah[data-pos-mobile="bottom"] .foxco-ah__title-wrap[style*="--foxco-ah-order-mobile"] {
		position: static;
		left: auto;
		top: auto;
		transform: none;
		pointer-events: auto;
	}
	/* Parent needs position:relative for absolute title centering */
	.foxco-ah[data-pos-mobile="top"] .foxco-ah__inner,
	.foxco-ah[data-pos-mobile="bottom"] .foxco-ah__inner {
		position: relative;
	}
}

/* Vertical title orientation for left/right rails */
.foxco-ah[data-pos-mobile="left"] .foxco-ah__title,
.foxco-ah[data-pos-mobile="right"] .foxco-ah__title { writing-mode: vertical-rl; }
.foxco-ah[data-pos-mobile="left"] .foxco-ah__title { transform: rotate(180deg); }

@media (min-width: 768px) {
	.foxco-ah[data-pos-tablet="left"] .foxco-ah__title,
	.foxco-ah[data-pos-tablet="right"] .foxco-ah__title { writing-mode: vertical-rl; transform: none; }
	.foxco-ah[data-pos-tablet="left"] .foxco-ah__title { transform: rotate(180deg); }
	.foxco-ah[data-pos-tablet="top"] .foxco-ah__title,
	.foxco-ah[data-pos-tablet="bottom"] .foxco-ah__title { writing-mode: horizontal-tb; transform: none; }
}

@media (min-width: 1025px) {
	.foxco-ah[data-pos-desktop="left"] .foxco-ah__title,
	.foxco-ah[data-pos-desktop="right"] .foxco-ah__title { writing-mode: vertical-rl; transform: none; }
	.foxco-ah[data-pos-desktop="left"] .foxco-ah__title { transform: rotate(180deg); }
	.foxco-ah[data-pos-desktop="top"] .foxco-ah__title,
	.foxco-ah[data-pos-desktop="bottom"] .foxco-ah__title { writing-mode: horizontal-tb; transform: none; }
}

/* ==========================================================================
   Presets
   ========================================================================== */

/* ==========================================================================
   Presets - mobile-first, then overrides per breakpoint.
   The widget and drawer carry data-preset-{desktop,tablet,mobile} attributes.
   Rules in the default scope respond to -mobile; @media (min-width: 768px)
   switches to -tablet; @media (min-width: 1025px) switches to -desktop.
   All presets work via CSS custom properties, so changing the active preset
   at a breakpoint simply swaps the variables - no rules need to be undone.
   ========================================================================== */

/* ---- Mobile (default scope, no media query) ---- */

.foxco-ah[data-preset-mobile="foxco"],
.foxco-ah-drawer[data-preset-mobile="foxco"] {
	--foxco-ah-rail-bg: #1a1a2e;
	--foxco-ah-icon: #ffffff;
	--foxco-ah-icon-hover: #df6737;
	--foxco-ah-title: #ffffff;
	--foxco-ah-drawer-bg: #1a1a2e;
	--foxco-ah-drawer-heading: #ffffff;
	--foxco-ah-drawer-link: #df6737;
	--foxco-ah-drawer-link-hover: #ffffff;
	--foxco-ah-border: rgba(255, 255, 255, 0.08);
}

.foxco-ah[data-preset-mobile="transparent"] {
	--foxco-ah-rail-bg: transparent;
	--foxco-ah-icon: #ffffff;
	--foxco-ah-icon-hover: #df6737;
	--foxco-ah-title: #ffffff;
	--foxco-ah-border: transparent;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
.foxco-ah[data-preset-mobile="transparent"] .foxco-ah__btn { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45)); }
.foxco-ah-drawer[data-preset-mobile="transparent"] {
	--foxco-ah-drawer-bg: rgba(10, 10, 20, 0.92);
	--foxco-ah-drawer-heading: #ffffff;
	--foxco-ah-drawer-link: #df6737;
	--foxco-ah-drawer-link-hover: #ffffff;
}

.foxco-ah[data-preset-mobile="midnight"],
.foxco-ah-drawer[data-preset-mobile="midnight"] {
	--foxco-ah-rail-bg: #000000;
	--foxco-ah-icon: #e5e5e5;
	--foxco-ah-icon-hover: #ffffff;
	--foxco-ah-title: #ffffff;
	--foxco-ah-drawer-bg: #000000;
	--foxco-ah-drawer-heading: #ffffff;
	--foxco-ah-drawer-link: #9ca3af;
	--foxco-ah-drawer-link-hover: #ffffff;
	--foxco-ah-border: rgba(255, 255, 255, 0.06);
}

.foxco-ah[data-preset-mobile="daylight"],
.foxco-ah-drawer[data-preset-mobile="daylight"] {
	--foxco-ah-rail-bg: #ffffff;
	--foxco-ah-icon: #1a1a2e;
	--foxco-ah-icon-hover: #df6737;
	--foxco-ah-title: #1a1a2e;
	--foxco-ah-drawer-bg: #ffffff;
	--foxco-ah-drawer-heading: #1a1a2e;
	--foxco-ah-drawer-link: #df6737;
	--foxco-ah-drawer-link-hover: #1a1a2e;
	--foxco-ah-border: rgba(0, 0, 0, 0.08);
}
.foxco-ah[data-preset-mobile="daylight"] { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); }

.foxco-ah[data-preset-mobile="glass"] {
	--foxco-ah-rail-bg: rgba(255, 255, 255, 0.08);
	--foxco-ah-icon: #ffffff;
	--foxco-ah-icon-hover: #df6737;
	--foxco-ah-title: #ffffff;
	--foxco-ah-border: rgba(255, 255, 255, 0.18);
	backdrop-filter: blur(14px) saturate(1.3);
	-webkit-backdrop-filter: blur(14px) saturate(1.3);
}
.foxco-ah-drawer[data-preset-mobile="glass"] {
	--foxco-ah-drawer-bg: rgba(20, 20, 35, 0.72);
	--foxco-ah-drawer-heading: #ffffff;
	--foxco-ah-drawer-link: #df6737;
	--foxco-ah-drawer-link-hover: #ffffff;
	backdrop-filter: blur(18px) saturate(1.3);
	-webkit-backdrop-filter: blur(18px) saturate(1.3);
}

.foxco-ah[data-preset-mobile="terminal"],
.foxco-ah-drawer[data-preset-mobile="terminal"] {
	--foxco-ah-rail-bg: #000000;
	--foxco-ah-icon: #00ff66;
	--foxco-ah-icon-hover: #ffffff;
	--foxco-ah-title: #00ff66;
	--foxco-ah-drawer-bg: #050505;
	--foxco-ah-drawer-heading: #00ff66;
	--foxco-ah-drawer-link: #00ff66;
	--foxco-ah-drawer-link-hover: #ffffff;
	--foxco-ah-border: #00ff66;
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.foxco-ah[data-preset-mobile="terminal"] .foxco-ah__title,
.foxco-ah-drawer[data-preset-mobile="terminal"] .foxco-ah-drawer__heading,
.foxco-ah-drawer[data-preset-mobile="terminal"] .foxco-ah-drawer__links a,
.foxco-ah-drawer[data-preset-mobile="terminal"] .foxco-ah-drawer__menu a,
.foxco-ah-drawer[data-preset-mobile="terminal"] .foxco-ah-drawer__col a:not(.foxco-ah-drawer__social a) {
	font-family: inherit;
	letter-spacing: 0.05em;
}
.foxco-ah[data-preset-mobile="terminal"] { box-shadow: inset 0 0 0 1px #00ff66; }

/* "custom" preset: emits no preset-level vars, so color controls fully govern. */

/* ---- Tablet overrides ---- */
@media (min-width: 768px) {
	.foxco-ah[data-preset-tablet="foxco"],
	.foxco-ah-drawer[data-preset-tablet="foxco"] {
		--foxco-ah-rail-bg: #1a1a2e;
		--foxco-ah-icon: #ffffff;
		--foxco-ah-icon-hover: #df6737;
		--foxco-ah-title: #ffffff;
		--foxco-ah-drawer-bg: #1a1a2e;
		--foxco-ah-drawer-heading: #ffffff;
		--foxco-ah-drawer-link: #df6737;
		--foxco-ah-drawer-link-hover: #ffffff;
		--foxco-ah-border: rgba(255, 255, 255, 0.08);
	}

	.foxco-ah[data-preset-tablet="transparent"] {
		--foxco-ah-rail-bg: transparent;
		--foxco-ah-icon: #ffffff;
		--foxco-ah-icon-hover: #df6737;
		--foxco-ah-title: #ffffff;
		--foxco-ah-border: transparent;
		text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
	}
	.foxco-ah[data-preset-tablet="transparent"] .foxco-ah__btn { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45)); }
	.foxco-ah-drawer[data-preset-tablet="transparent"] {
		--foxco-ah-drawer-bg: rgba(10, 10, 20, 0.92);
		--foxco-ah-drawer-heading: #ffffff;
		--foxco-ah-drawer-link: #df6737;
		--foxco-ah-drawer-link-hover: #ffffff;
	}

	.foxco-ah[data-preset-tablet="midnight"],
	.foxco-ah-drawer[data-preset-tablet="midnight"] {
		--foxco-ah-rail-bg: #000000;
		--foxco-ah-icon: #e5e5e5;
		--foxco-ah-icon-hover: #ffffff;
		--foxco-ah-title: #ffffff;
		--foxco-ah-drawer-bg: #000000;
		--foxco-ah-drawer-heading: #ffffff;
		--foxco-ah-drawer-link: #9ca3af;
		--foxco-ah-drawer-link-hover: #ffffff;
		--foxco-ah-border: rgba(255, 255, 255, 0.06);
	}

	.foxco-ah[data-preset-tablet="daylight"],
	.foxco-ah-drawer[data-preset-tablet="daylight"] {
		--foxco-ah-rail-bg: #ffffff;
		--foxco-ah-icon: #1a1a2e;
		--foxco-ah-icon-hover: #df6737;
		--foxco-ah-title: #1a1a2e;
		--foxco-ah-drawer-bg: #ffffff;
		--foxco-ah-drawer-heading: #1a1a2e;
		--foxco-ah-drawer-link: #df6737;
		--foxco-ah-drawer-link-hover: #1a1a2e;
		--foxco-ah-border: rgba(0, 0, 0, 0.08);
	}
	.foxco-ah[data-preset-tablet="daylight"] { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); }

	.foxco-ah[data-preset-tablet="glass"] {
		--foxco-ah-rail-bg: rgba(255, 255, 255, 0.08);
		--foxco-ah-icon: #ffffff;
		--foxco-ah-icon-hover: #df6737;
		--foxco-ah-title: #ffffff;
		--foxco-ah-border: rgba(255, 255, 255, 0.18);
		backdrop-filter: blur(14px) saturate(1.3);
		-webkit-backdrop-filter: blur(14px) saturate(1.3);
	}
	.foxco-ah-drawer[data-preset-tablet="glass"] {
		--foxco-ah-drawer-bg: rgba(20, 20, 35, 0.72);
		--foxco-ah-drawer-heading: #ffffff;
		--foxco-ah-drawer-link: #df6737;
		--foxco-ah-drawer-link-hover: #ffffff;
		backdrop-filter: blur(18px) saturate(1.3);
		-webkit-backdrop-filter: blur(18px) saturate(1.3);
	}

	.foxco-ah[data-preset-tablet="terminal"],
	.foxco-ah-drawer[data-preset-tablet="terminal"] {
		--foxco-ah-rail-bg: #000000;
		--foxco-ah-icon: #00ff66;
		--foxco-ah-icon-hover: #ffffff;
		--foxco-ah-title: #00ff66;
		--foxco-ah-drawer-bg: #050505;
		--foxco-ah-drawer-heading: #00ff66;
		--foxco-ah-drawer-link: #00ff66;
		--foxco-ah-drawer-link-hover: #ffffff;
		--foxco-ah-border: #00ff66;
		font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	}
	.foxco-ah[data-preset-tablet="terminal"] { box-shadow: inset 0 0 0 1px #00ff66; }
}

/* ---- Desktop overrides ---- */
@media (min-width: 1025px) {
	.foxco-ah[data-preset-desktop="foxco"],
	.foxco-ah-drawer[data-preset-desktop="foxco"] {
		--foxco-ah-rail-bg: #1a1a2e;
		--foxco-ah-icon: #ffffff;
		--foxco-ah-icon-hover: #df6737;
		--foxco-ah-title: #ffffff;
		--foxco-ah-drawer-bg: #1a1a2e;
		--foxco-ah-drawer-heading: #ffffff;
		--foxco-ah-drawer-link: #df6737;
		--foxco-ah-drawer-link-hover: #ffffff;
		--foxco-ah-border: rgba(255, 255, 255, 0.08);
	}

	.foxco-ah[data-preset-desktop="transparent"] {
		--foxco-ah-rail-bg: transparent;
		--foxco-ah-icon: #ffffff;
		--foxco-ah-icon-hover: #df6737;
		--foxco-ah-title: #ffffff;
		--foxco-ah-border: transparent;
		text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
	}
	.foxco-ah[data-preset-desktop="transparent"] .foxco-ah__btn { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45)); }
	.foxco-ah-drawer[data-preset-desktop="transparent"] {
		--foxco-ah-drawer-bg: rgba(10, 10, 20, 0.92);
		--foxco-ah-drawer-heading: #ffffff;
		--foxco-ah-drawer-link: #df6737;
		--foxco-ah-drawer-link-hover: #ffffff;
	}

	.foxco-ah[data-preset-desktop="midnight"],
	.foxco-ah-drawer[data-preset-desktop="midnight"] {
		--foxco-ah-rail-bg: #000000;
		--foxco-ah-icon: #e5e5e5;
		--foxco-ah-icon-hover: #ffffff;
		--foxco-ah-title: #ffffff;
		--foxco-ah-drawer-bg: #000000;
		--foxco-ah-drawer-heading: #ffffff;
		--foxco-ah-drawer-link: #9ca3af;
		--foxco-ah-drawer-link-hover: #ffffff;
		--foxco-ah-border: rgba(255, 255, 255, 0.06);
	}

	.foxco-ah[data-preset-desktop="daylight"],
	.foxco-ah-drawer[data-preset-desktop="daylight"] {
		--foxco-ah-rail-bg: #ffffff;
		--foxco-ah-icon: #1a1a2e;
		--foxco-ah-icon-hover: #df6737;
		--foxco-ah-title: #1a1a2e;
		--foxco-ah-drawer-bg: #ffffff;
		--foxco-ah-drawer-heading: #1a1a2e;
		--foxco-ah-drawer-link: #df6737;
		--foxco-ah-drawer-link-hover: #1a1a2e;
		--foxco-ah-border: rgba(0, 0, 0, 0.08);
	}
	.foxco-ah[data-preset-desktop="daylight"] { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); }

	.foxco-ah[data-preset-desktop="glass"] {
		--foxco-ah-rail-bg: rgba(255, 255, 255, 0.08);
		--foxco-ah-icon: #ffffff;
		--foxco-ah-icon-hover: #df6737;
		--foxco-ah-title: #ffffff;
		--foxco-ah-border: rgba(255, 255, 255, 0.18);
		backdrop-filter: blur(14px) saturate(1.3);
		-webkit-backdrop-filter: blur(14px) saturate(1.3);
	}
	.foxco-ah-drawer[data-preset-desktop="glass"] {
		--foxco-ah-drawer-bg: rgba(20, 20, 35, 0.72);
		--foxco-ah-drawer-heading: #ffffff;
		--foxco-ah-drawer-link: #df6737;
		--foxco-ah-drawer-link-hover: #ffffff;
		backdrop-filter: blur(18px) saturate(1.3);
		-webkit-backdrop-filter: blur(18px) saturate(1.3);
	}

	.foxco-ah[data-preset-desktop="terminal"],
	.foxco-ah-drawer[data-preset-desktop="terminal"] {
		--foxco-ah-rail-bg: #000000;
		--foxco-ah-icon: #00ff66;
		--foxco-ah-icon-hover: #ffffff;
		--foxco-ah-title: #00ff66;
		--foxco-ah-drawer-bg: #050505;
		--foxco-ah-drawer-heading: #00ff66;
		--foxco-ah-drawer-link: #00ff66;
		--foxco-ah-drawer-link-hover: #ffffff;
		--foxco-ah-border: #00ff66;
		font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	}
	.foxco-ah[data-preset-desktop="terminal"] { box-shadow: inset 0 0 0 1px #00ff66; }
}

/* ==========================================================================
   Adaptive hamburger color (per-breakpoint, opt-in)
   ----------------------------------------------------------------------------
   "outline"          - drop-shadow halo around the icon (subtle)
   "outline-strong"   - heavier halo for very busy / high-detail backdrops
   "blend-difference" - Auto-Invert via mix-blend-mode: difference. The icon is
       forced to pure white so the difference math gives a clean inversion of
       whatever is behind. Works on Transparent (no rail bg between icon and
       page) AND Glass (backdrop-filter renders the blurred page into the
       rail's painted output, which the blend then reads). Effectively useless
       on opaque presets - the rail bg blocks the page from the blend's view.
   Halo color is governed by --foxco-ah-halo. Defaults to soft black.
   isolation: auto on the rail is a defensive override - guarantees no v1.9.x
       hardening or 3rd-party CSS accidentally isolates the rail's blend.
   ========================================================================== */

/* ---- Mobile (default scope) ---- */
.foxco-ah[data-adapt-mobile="outline"] .foxco-ah__toggle svg,
.foxco-ah[data-adapt-mobile="outline"] .foxco-ah__toggle i {
	filter:
		drop-shadow(0 0 1px var(--foxco-ah-halo, rgba(0, 0, 0, 0.65)))
		drop-shadow(0 0 2px var(--foxco-ah-halo, rgba(0, 0, 0, 0.65)));
}
.foxco-ah[data-adapt-mobile="outline-strong"] .foxco-ah__toggle svg,
.foxco-ah[data-adapt-mobile="outline-strong"] .foxco-ah__toggle i {
	filter:
		drop-shadow(0 0 1.5px var(--foxco-ah-halo, rgba(0, 0, 0, 0.85)))
		drop-shadow(0 0 3px var(--foxco-ah-halo, rgba(0, 0, 0, 0.85)))
		drop-shadow(0 1px 2px var(--foxco-ah-halo, rgba(0, 0, 0, 0.85)));
}
.foxco-ah[data-adapt-mobile="blend-difference"] {
	isolation: auto;
}
.foxco-ah[data-adapt-mobile="blend-difference"] .foxco-ah__toggle {
	color: #ffffff !important;
}
.foxco-ah[data-adapt-mobile="blend-difference"] .foxco-ah__toggle svg,
.foxco-ah[data-adapt-mobile="blend-difference"] .foxco-ah__toggle i {
	mix-blend-mode: difference;
	color: #ffffff !important;
}
.foxco-ah[data-adapt-mobile="blend-difference"] .foxco-ah__toggle svg *,
.foxco-ah[data-adapt-mobile="blend-difference"] .foxco-ah__toggle svg path {
	fill: #ffffff !important;
	stroke: #ffffff;
}
.foxco-ah[data-adapt-mobile="blend-difference"] .foxco-ah__toggle:hover svg,
.foxco-ah[data-adapt-mobile="blend-difference"] .foxco-ah__toggle:hover i,
.foxco-ah[data-adapt-mobile="blend-difference"] .foxco-ah__toggle:focus-visible svg,
.foxco-ah[data-adapt-mobile="blend-difference"] .foxco-ah__toggle:focus-visible i {
	color: #ffffff !important;
}

/* Auto Color (scroll-aware / section-aware). The JS sets data-adapt-state on the
   rail to "light" or "dark" depending on scroll position or section overlap.
   These rules apply when the matching mode is active for the current breakpoint. */
.foxco-ah[data-adapt-mobile="auto-scroll"] .foxco-ah__toggle,
.foxco-ah[data-adapt-mobile="auto-section"] .foxco-ah__toggle {
	color: var(--foxco-ah-adapt-light, #ffffff) !important;
	transition: color 220ms ease;
}
.foxco-ah[data-adapt-mobile="auto-scroll"] .foxco-ah__toggle svg,
.foxco-ah[data-adapt-mobile="auto-scroll"] .foxco-ah__toggle i,
.foxco-ah[data-adapt-mobile="auto-section"] .foxco-ah__toggle svg,
.foxco-ah[data-adapt-mobile="auto-section"] .foxco-ah__toggle i {
	color: var(--foxco-ah-adapt-light, #ffffff) !important;
	transition: color 220ms ease;
}
.foxco-ah[data-adapt-mobile="auto-scroll"][data-adapt-state="dark"] .foxco-ah__toggle,
.foxco-ah[data-adapt-mobile="auto-section"][data-adapt-state="dark"] .foxco-ah__toggle,
.foxco-ah[data-adapt-mobile="auto-scroll"][data-adapt-state="dark"] .foxco-ah__toggle svg,
.foxco-ah[data-adapt-mobile="auto-scroll"][data-adapt-state="dark"] .foxco-ah__toggle i,
.foxco-ah[data-adapt-mobile="auto-section"][data-adapt-state="dark"] .foxco-ah__toggle svg,
.foxco-ah[data-adapt-mobile="auto-section"][data-adapt-state="dark"] .foxco-ah__toggle i {
	color: var(--foxco-ah-adapt-dark, #111111) !important;
}

/* Utility-icons group follows the same dark/light state swap as the hamburger. */
.foxco-ah[data-adapt-mobile="auto-scroll"] .foxco-ah__icon,
.foxco-ah[data-adapt-mobile="auto-section"] .foxco-ah__icon {
	color: var(--foxco-ah-adapt-light, #ffffff) !important;
	transition: color 220ms ease;
}
.foxco-ah[data-adapt-mobile="auto-scroll"][data-adapt-state="dark"] .foxco-ah__icon,
.foxco-ah[data-adapt-mobile="auto-section"][data-adapt-state="dark"] .foxco-ah__icon {
	color: var(--foxco-ah-adapt-dark, #111111) !important;
}

/* Adaptive PNG logo. Triggered by data-logo-on-dark and data-logo-on-light on the
   rail combined with data-adapt-state (set by the JS watcher used for the hamburger).
   - data-logo-on-* applies when the *opposite* state is active, because the rail's
     state="light" (light icon color) means the rail is OVER a dark area, and
     state="dark" (dark icon color) means it is OVER a light area. The user picks
     filters based on what the BACKGROUND looks like, which is the inverse of the
     icon-color state. !important is used to override any always-on Logo Filter set
     on the Style tab. Browser-native filter transitions handle the fade. */
.foxco-ah[data-logo-on-dark] .foxco-ah__logo img,
.foxco-ah[data-logo-on-light] .foxco-ah__logo img {
	transition: filter 220ms ease;
}
/* Filters over DARK backgrounds (icon is in light-color state) */
.foxco-ah[data-logo-on-dark="white"][data-adapt-state="light"] .foxco-ah__logo img {
	filter: brightness(0) invert(1) !important;
}
.foxco-ah[data-logo-on-dark="black"][data-adapt-state="light"] .foxco-ah__logo img {
	filter: brightness(0) !important;
}
.foxco-ah[data-logo-on-dark="invert"][data-adapt-state="light"] .foxco-ah__logo img {
	filter: invert(1) !important;
}
.foxco-ah[data-logo-on-dark="grayscale"][data-adapt-state="light"] .foxco-ah__logo img {
	filter: grayscale(1) !important;
}
/* Filters over LIGHT backgrounds (icon is in dark-color state) */
.foxco-ah[data-logo-on-light="white"][data-adapt-state="dark"] .foxco-ah__logo img {
	filter: brightness(0) invert(1) !important;
}
.foxco-ah[data-logo-on-light="black"][data-adapt-state="dark"] .foxco-ah__logo img {
	filter: brightness(0) !important;
}
.foxco-ah[data-logo-on-light="invert"][data-adapt-state="dark"] .foxco-ah__logo img {
	filter: invert(1) !important;
}
.foxco-ah[data-logo-on-light="grayscale"][data-adapt-state="dark"] .foxco-ah__logo img {
	filter: grayscale(1) !important;
}

/* ---- Tablet overrides ---- */
@media (min-width: 768px) {
	.foxco-ah[data-adapt-tablet=""] .foxco-ah__toggle svg,
	.foxco-ah[data-adapt-tablet=""] .foxco-ah__toggle i {
		filter: none;
		mix-blend-mode: normal;
	}
	.foxco-ah[data-adapt-tablet="outline"] .foxco-ah__toggle svg,
	.foxco-ah[data-adapt-tablet="outline"] .foxco-ah__toggle i {
		filter:
			drop-shadow(0 0 1px var(--foxco-ah-halo, rgba(0, 0, 0, 0.65)))
			drop-shadow(0 0 2px var(--foxco-ah-halo, rgba(0, 0, 0, 0.65)));
		mix-blend-mode: normal;
	}
	.foxco-ah[data-adapt-tablet="outline-strong"] .foxco-ah__toggle svg,
	.foxco-ah[data-adapt-tablet="outline-strong"] .foxco-ah__toggle i {
		filter:
			drop-shadow(0 0 1.5px var(--foxco-ah-halo, rgba(0, 0, 0, 0.85)))
			drop-shadow(0 0 3px var(--foxco-ah-halo, rgba(0, 0, 0, 0.85)))
			drop-shadow(0 1px 2px var(--foxco-ah-halo, rgba(0, 0, 0, 0.85)));
		mix-blend-mode: normal;
	}
	.foxco-ah[data-adapt-tablet="blend-difference"] {
		isolation: auto;
	}
	.foxco-ah[data-adapt-tablet="blend-difference"] .foxco-ah__toggle {
		color: #ffffff !important;
	}
	.foxco-ah[data-adapt-tablet="blend-difference"] .foxco-ah__toggle svg,
	.foxco-ah[data-adapt-tablet="blend-difference"] .foxco-ah__toggle i {
		mix-blend-mode: difference;
		color: #ffffff !important;
		filter: none;
	}
	.foxco-ah[data-adapt-tablet="blend-difference"] .foxco-ah__toggle svg *,
	.foxco-ah[data-adapt-tablet="blend-difference"] .foxco-ah__toggle svg path {
		fill: #ffffff !important;
		stroke: #ffffff;
	}
	.foxco-ah[data-adapt-tablet="blend-difference"] .foxco-ah__toggle:hover svg,
	.foxco-ah[data-adapt-tablet="blend-difference"] .foxco-ah__toggle:hover i,
	.foxco-ah[data-adapt-tablet="blend-difference"] .foxco-ah__toggle:focus-visible svg,
	.foxco-ah[data-adapt-tablet="blend-difference"] .foxco-ah__toggle:focus-visible i {
		color: #ffffff !important;
	}
	.foxco-ah[data-adapt-tablet="auto-scroll"] .foxco-ah__toggle,
	.foxco-ah[data-adapt-tablet="auto-section"] .foxco-ah__toggle,
	.foxco-ah[data-adapt-tablet="auto-scroll"] .foxco-ah__toggle svg,
	.foxco-ah[data-adapt-tablet="auto-scroll"] .foxco-ah__toggle i,
	.foxco-ah[data-adapt-tablet="auto-section"] .foxco-ah__toggle svg,
	.foxco-ah[data-adapt-tablet="auto-section"] .foxco-ah__toggle i {
		color: var(--foxco-ah-adapt-light, #ffffff) !important;
		transition: color 220ms ease;
		mix-blend-mode: normal;
		filter: none;
	}
	.foxco-ah[data-adapt-tablet="auto-scroll"][data-adapt-state="dark"] .foxco-ah__toggle,
	.foxco-ah[data-adapt-tablet="auto-section"][data-adapt-state="dark"] .foxco-ah__toggle,
	.foxco-ah[data-adapt-tablet="auto-scroll"][data-adapt-state="dark"] .foxco-ah__toggle svg,
	.foxco-ah[data-adapt-tablet="auto-scroll"][data-adapt-state="dark"] .foxco-ah__toggle i,
	.foxco-ah[data-adapt-tablet="auto-section"][data-adapt-state="dark"] .foxco-ah__toggle svg,
	.foxco-ah[data-adapt-tablet="auto-section"][data-adapt-state="dark"] .foxco-ah__toggle i {
		color: var(--foxco-ah-adapt-dark, #111111) !important;
	}
	.foxco-ah[data-adapt-tablet="auto-scroll"] .foxco-ah__icon,
	.foxco-ah[data-adapt-tablet="auto-section"] .foxco-ah__icon {
		color: var(--foxco-ah-adapt-light, #ffffff) !important;
		transition: color 220ms ease;
	}
	.foxco-ah[data-adapt-tablet="auto-scroll"][data-adapt-state="dark"] .foxco-ah__icon,
	.foxco-ah[data-adapt-tablet="auto-section"][data-adapt-state="dark"] .foxco-ah__icon {
		color: var(--foxco-ah-adapt-dark, #111111) !important;
	}
}

/* ---- Desktop overrides ---- */
@media (min-width: 1025px) {
	.foxco-ah[data-adapt-desktop=""] .foxco-ah__toggle svg,
	.foxco-ah[data-adapt-desktop=""] .foxco-ah__toggle i {
		filter: none;
		mix-blend-mode: normal;
	}
	.foxco-ah[data-adapt-desktop="outline"] .foxco-ah__toggle svg,
	.foxco-ah[data-adapt-desktop="outline"] .foxco-ah__toggle i {
		filter:
			drop-shadow(0 0 1px var(--foxco-ah-halo, rgba(0, 0, 0, 0.65)))
			drop-shadow(0 0 2px var(--foxco-ah-halo, rgba(0, 0, 0, 0.65)));
		mix-blend-mode: normal;
	}
	.foxco-ah[data-adapt-desktop="outline-strong"] .foxco-ah__toggle svg,
	.foxco-ah[data-adapt-desktop="outline-strong"] .foxco-ah__toggle i {
		filter:
			drop-shadow(0 0 1.5px var(--foxco-ah-halo, rgba(0, 0, 0, 0.85)))
			drop-shadow(0 0 3px var(--foxco-ah-halo, rgba(0, 0, 0, 0.85)))
			drop-shadow(0 1px 2px var(--foxco-ah-halo, rgba(0, 0, 0, 0.85)));
		mix-blend-mode: normal;
	}
	.foxco-ah[data-adapt-desktop="blend-difference"] {
		isolation: auto;
	}
	.foxco-ah[data-adapt-desktop="blend-difference"] .foxco-ah__toggle {
		color: #ffffff !important;
	}
	.foxco-ah[data-adapt-desktop="blend-difference"] .foxco-ah__toggle svg,
	.foxco-ah[data-adapt-desktop="blend-difference"] .foxco-ah__toggle i {
		mix-blend-mode: difference;
		color: #ffffff !important;
		filter: none;
	}
	.foxco-ah[data-adapt-desktop="blend-difference"] .foxco-ah__toggle svg *,
	.foxco-ah[data-adapt-desktop="blend-difference"] .foxco-ah__toggle svg path {
		fill: #ffffff !important;
		stroke: #ffffff;
	}
	.foxco-ah[data-adapt-desktop="blend-difference"] .foxco-ah__toggle:hover svg,
	.foxco-ah[data-adapt-desktop="blend-difference"] .foxco-ah__toggle:hover i,
	.foxco-ah[data-adapt-desktop="blend-difference"] .foxco-ah__toggle:focus-visible svg,
	.foxco-ah[data-adapt-desktop="blend-difference"] .foxco-ah__toggle:focus-visible i {
		color: #ffffff !important;
	}
	.foxco-ah[data-adapt-desktop="auto-scroll"] .foxco-ah__toggle,
	.foxco-ah[data-adapt-desktop="auto-section"] .foxco-ah__toggle,
	.foxco-ah[data-adapt-desktop="auto-scroll"] .foxco-ah__toggle svg,
	.foxco-ah[data-adapt-desktop="auto-scroll"] .foxco-ah__toggle i,
	.foxco-ah[data-adapt-desktop="auto-section"] .foxco-ah__toggle svg,
	.foxco-ah[data-adapt-desktop="auto-section"] .foxco-ah__toggle i {
		color: var(--foxco-ah-adapt-light, #ffffff) !important;
		transition: color 220ms ease;
		mix-blend-mode: normal;
		filter: none;
	}
	.foxco-ah[data-adapt-desktop="auto-scroll"][data-adapt-state="dark"] .foxco-ah__toggle,
	.foxco-ah[data-adapt-desktop="auto-section"][data-adapt-state="dark"] .foxco-ah__toggle,
	.foxco-ah[data-adapt-desktop="auto-scroll"][data-adapt-state="dark"] .foxco-ah__toggle svg,
	.foxco-ah[data-adapt-desktop="auto-scroll"][data-adapt-state="dark"] .foxco-ah__toggle i,
	.foxco-ah[data-adapt-desktop="auto-section"][data-adapt-state="dark"] .foxco-ah__toggle svg,
	.foxco-ah[data-adapt-desktop="auto-section"][data-adapt-state="dark"] .foxco-ah__toggle i {
		color: var(--foxco-ah-adapt-dark, #111111) !important;
	}
	.foxco-ah[data-adapt-desktop="auto-scroll"] .foxco-ah__icon,
	.foxco-ah[data-adapt-desktop="auto-section"] .foxco-ah__icon {
		color: var(--foxco-ah-adapt-light, #ffffff) !important;
		transition: color 220ms ease;
	}
	.foxco-ah[data-adapt-desktop="auto-scroll"][data-adapt-state="dark"] .foxco-ah__icon,
	.foxco-ah[data-adapt-desktop="auto-section"][data-adapt-state="dark"] .foxco-ah__icon {
		color: var(--foxco-ah-adapt-dark, #111111) !important;
	}
}

/* ==========================================================================
   Drawer
   ========================================================================== */

/* ==========================================================================
   Drawer root = backdrop layer (dimmed/blurred page behind).
   Drawer panel = the actual content container (sized per drawer_size mode).
   For fullscreen mode (default), panel is inset:0 so it looks identical
   to pre-v1.6.0 output. Non-fullscreen sizes center the panel and reveal
   the backdrop around it.
   ========================================================================== */

.foxco-ah-drawer {
	position: fixed;
	inset: 0;
	color: var(--foxco-ah-drawer-heading);
	z-index: var(--foxco-ah-drawer-z, 9999);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--foxco-ah-speed) ease, visibility var(--foxco-ah-speed) ease;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Fullscreen mode: no backdrop layer needed, panel fills everything */
.foxco-ah-drawer[data-size-mobile="full"] {
	background: var(--foxco-ah-drawer-bg);
}

/* Sized modes: apply backdrop + blur to the drawer root */
.foxco-ah-drawer:not([data-size-mobile="full"]) {
	background: var(--foxco-ah-backdrop, rgba(0, 0, 0, 0.6));
	backdrop-filter: blur(var(--foxco-ah-backdrop-blur, 6px));
	-webkit-backdrop-filter: blur(var(--foxco-ah-backdrop-blur, 6px));
}

.foxco-ah-drawer.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* ---- Drawer panel ---- */

.foxco-ah-drawer__panel {
	position: relative;
	background: var(--foxco-ah-drawer-bg);
	opacity: var(--foxco-ah-drawer-overlay-opacity, 1);
	color: var(--foxco-ah-drawer-heading);
	overflow-y: auto;
	overflow-x: hidden;
	transition: transform var(--foxco-ah-speed) ease, opacity var(--foxco-ah-speed) ease;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
}

/* ---- Size: Fullscreen (default, mobile-first) ---- */
.foxco-ah-drawer[data-size-mobile="full"] .foxco-ah-drawer__panel {
	width: 100%;
	height: 100%;
	border-radius: 0;
}

/* ---- Shape presets (all centered, ignore rail position) ---- */
/* Mobile: scale down dimensions so they fit narrow phones.
   Every preset uses min() to cap against viewport so nothing ever overflows. */
.foxco-ah-drawer[data-size-mobile="wide"] .foxco-ah-drawer__panel {
	width: min(85vw, 720px);
	height: min(70vh, 560px);
	border-radius: var(--foxco-ah-panel-radius, 12px);
}
.foxco-ah-drawer[data-size-mobile="landscape"] .foxco-ah-drawer__panel {
	width: min(92vw, 640px);
	height: min(60vh, 420px);
	border-radius: var(--foxco-ah-panel-radius, 12px);
}
.foxco-ah-drawer[data-size-mobile="square"] .foxco-ah-drawer__panel {
	width: min(88vw, 480px);
	height: min(70vh, 480px);
	border-radius: var(--foxco-ah-panel-radius, 12px);
}
.foxco-ah-drawer[data-size-mobile="portrait"] .foxco-ah-drawer__panel {
	width: min(88vw, 420px);
	height: min(80vh, 620px);
	border-radius: var(--foxco-ah-panel-radius, 12px);
}
.foxco-ah-drawer[data-size-mobile="narrow"] .foxco-ah-drawer__panel {
	width: min(88vw, 340px);
	height: min(70vh, 520px);
	border-radius: var(--foxco-ah-panel-radius, 12px);
}

/* ---- Size: Auto (fit to content) ----
   Panel sizes itself to whatever the content needs, with sensible caps.
*/
.foxco-ah-drawer[data-size-mobile="auto"] .foxco-ah-drawer__panel {
	width: auto;
	height: auto;
	max-width: min(92vw, 900px);
	max-height: min(90vh, 720px);
	border-radius: var(--foxco-ah-panel-radius, 12px);
}

/* ---- Panel border (pinline around perimeter) ---- */
.foxco-ah-drawer .foxco-ah-drawer__panel {
	border: var(--foxco-ah-panel-border, 0 none);
	box-shadow: var(--foxco-ah-panel-shadow, none);
}

/* Fullscreen mode: suppress panel-level border + shadow so it looks seamless */
.foxco-ah-drawer[data-size-mobile="full"] .foxco-ah-drawer__panel { border: 0; box-shadow: none; }

/* ---- Column divider (vertical line between drawer columns) ---- */
.foxco-ah-drawer--divider .foxco-ah-drawer__grid > .foxco-ah-drawer__col:not(:last-child) {
	border-right: 1px solid var(--foxco-ah-divider, rgba(255, 255, 255, 0.12));
	padding-right: clamp(16px, 3vw, 40px);
}

@media (max-width: 639px) {
	.foxco-ah-drawer--divider .foxco-ah-drawer__grid > .foxco-ah-drawer__col:not(:last-child) {
		border-right: 0;
		padding-right: 0;
		border-bottom: 1px solid var(--foxco-ah-divider, rgba(255, 255, 255, 0.12));
		padding-bottom: clamp(16px, 3vw, 32px);
	}
}

/* ---- Tablet overrides ---- */
@media (min-width: 768px) {
	.foxco-ah-drawer[data-size-tablet="full"] { background: var(--foxco-ah-drawer-bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
	.foxco-ah-drawer[data-size-tablet]:not([data-size-tablet="full"]) {
		background: var(--foxco-ah-backdrop, rgba(0, 0, 0, 0.6));
		backdrop-filter: blur(var(--foxco-ah-backdrop-blur, 6px));
		-webkit-backdrop-filter: blur(var(--foxco-ah-backdrop-blur, 6px));
	}

	.foxco-ah-drawer[data-size-tablet="full"] .foxco-ah-drawer__panel { width: 100%; height: 100%; border-radius: 0; }

	.foxco-ah-drawer[data-size-tablet="wide"] .foxco-ah-drawer__panel {
		width: min(85vw, 960px); height: min(70vh, 640px);
		border-radius: var(--foxco-ah-panel-radius, 12px);
	}
	.foxco-ah-drawer[data-size-tablet="landscape"] .foxco-ah-drawer__panel {
		width: min(90vw, 800px); height: min(60vh, 500px);
		border-radius: var(--foxco-ah-panel-radius, 12px);
	}
	.foxco-ah-drawer[data-size-tablet="square"] .foxco-ah-drawer__panel {
		width: min(70vw, 560px); height: min(75vh, 560px);
		border-radius: var(--foxco-ah-panel-radius, 12px);
	}
	.foxco-ah-drawer[data-size-tablet="portrait"] .foxco-ah-drawer__panel {
		width: min(60vw, 500px); height: min(80vh, 680px);
		border-radius: var(--foxco-ah-panel-radius, 12px);
	}
	.foxco-ah-drawer[data-size-tablet="narrow"] .foxco-ah-drawer__panel {
		width: min(50vw, 380px); height: min(70vh, 580px);
		border-radius: var(--foxco-ah-panel-radius, 12px);
	}
	.foxco-ah-drawer[data-size-tablet="auto"] .foxco-ah-drawer__panel {
		width: auto; height: auto;
		max-width: min(90vw, 960px); max-height: min(90vh, 760px);
		border-radius: var(--foxco-ah-panel-radius, 12px);
	}
}

/* ---- Desktop overrides ---- */
@media (min-width: 1025px) {
	.foxco-ah-drawer[data-size-desktop="full"] { background: var(--foxco-ah-drawer-bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
	.foxco-ah-drawer[data-size-desktop]:not([data-size-desktop="full"]) {
		background: var(--foxco-ah-backdrop, rgba(0, 0, 0, 0.6));
		backdrop-filter: blur(var(--foxco-ah-backdrop-blur, 6px));
		-webkit-backdrop-filter: blur(var(--foxco-ah-backdrop-blur, 6px));
	}

	.foxco-ah-drawer[data-size-desktop="full"] .foxco-ah-drawer__panel { width: 100%; height: 100%; border-radius: 0; }

	.foxco-ah-drawer[data-size-desktop="wide"] .foxco-ah-drawer__panel {
		width: min(85vw, 1280px); height: min(70vh, 720px);
		border-radius: var(--foxco-ah-panel-radius, 12px);
	}
	.foxco-ah-drawer[data-size-desktop="landscape"] .foxco-ah-drawer__panel {
		width: min(85vw, 960px); height: min(65vh, 560px);
		border-radius: var(--foxco-ah-panel-radius, 12px);
	}
	.foxco-ah-drawer[data-size-desktop="square"] .foxco-ah-drawer__panel {
		width: min(50vw, 620px); height: min(80vh, 620px);
		border-radius: var(--foxco-ah-panel-radius, 12px);
	}
	.foxco-ah-drawer[data-size-desktop="portrait"] .foxco-ah-drawer__panel {
		width: min(40vw, 560px); height: min(80vh, 720px);
		border-radius: var(--foxco-ah-panel-radius, 12px);
	}
	.foxco-ah-drawer[data-size-desktop="narrow"] .foxco-ah-drawer__panel {
		width: min(30vw, 420px); height: min(70vh, 640px);
		border-radius: var(--foxco-ah-panel-radius, 12px);
	}
	.foxco-ah-drawer[data-size-desktop="auto"] .foxco-ah-drawer__panel {
		width: auto; height: auto;
		max-width: min(85vw, 1100px); max-height: min(90vh, 820px);
		border-radius: var(--foxco-ah-panel-radius, 12px);
	}
}

/* ---- Animations now apply to the panel, not the backdrop ---- */
.foxco-ah-drawer--anim-fade .foxco-ah-drawer__panel { transform: none; }
.foxco-ah-drawer--anim-slide-down .foxco-ah-drawer__panel { transform: translateY(-100%); }
.foxco-ah-drawer--anim-slide-up .foxco-ah-drawer__panel { transform: translateY(100%); }
.foxco-ah-drawer--anim-slide-left .foxco-ah-drawer__panel { transform: translateX(-100%); }
.foxco-ah-drawer--anim-slide-right .foxco-ah-drawer__panel { transform: translateX(100%); }
.foxco-ah-drawer--anim-zoom .foxco-ah-drawer__panel { transform: scale(0.9); opacity: 0; }
.foxco-ah-drawer--anim-none .foxco-ah-drawer,
.foxco-ah-drawer--anim-none .foxco-ah-drawer__panel { transition: none; }

.foxco-ah-drawer.is-open .foxco-ah-drawer__panel {
	transform: none !important;
	opacity: 1 !important;
}

/* Close button */
.foxco-ah-drawer .foxco-ah-drawer__close {
	position: absolute;
	color: var(--foxco-ah-drawer-heading) !important;
	padding: 12px;
	z-index: 2;
}
.foxco-ah-drawer--close-top-right .foxco-ah-drawer__close { top: 16px; right: 16px; }
.foxco-ah-drawer--close-top-left .foxco-ah-drawer__close { top: 16px; left: 16px; }
.foxco-ah-drawer--close-bottom-right .foxco-ah-drawer__close { bottom: 16px; right: 16px; }
.foxco-ah-drawer--close-bottom-left .foxco-ah-drawer__close { bottom: 16px; left: 16px; }

/* ---------- Mirror mode ----------
   The close button sits in the same screen region as the rail's hamburger.
   Positioning is driven by the drawer's data-pos-{bp} attribute so it
   tracks the rail's position per breakpoint automatically.
*/

/* Mobile (default scope) */
.foxco-ah-drawer--close-mirror[data-pos-mobile="left"] .foxco-ah-drawer__close {
	top: 0;
	left: 0;
	width: var(--foxco-ah-size-mobile);
	height: var(--foxco-ah-size-mobile);
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.foxco-ah-drawer--close-mirror[data-pos-mobile="right"] .foxco-ah-drawer__close {
	top: 0;
	right: 0;
	width: var(--foxco-ah-size-mobile);
	height: var(--foxco-ah-size-mobile);
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.foxco-ah-drawer--close-mirror[data-pos-mobile="top"] .foxco-ah-drawer__close {
	top: 0;
	right: 0;
	width: var(--foxco-ah-size-mobile);
	height: var(--foxco-ah-size-mobile);
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.foxco-ah-drawer--close-mirror[data-pos-mobile="bottom"] .foxco-ah-drawer__close {
	bottom: 0;
	right: 0;
	width: var(--foxco-ah-size-mobile);
	height: var(--foxco-ah-size-mobile);
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

@media (min-width: 768px) {
	.foxco-ah-drawer--close-mirror[data-pos-tablet="left"] .foxco-ah-drawer__close {
		top: 0; left: 0; right: auto; bottom: auto;
		width: var(--foxco-ah-size-tablet);
		height: var(--foxco-ah-size-tablet);
	}
	.foxco-ah-drawer--close-mirror[data-pos-tablet="right"] .foxco-ah-drawer__close {
		top: 0; right: 0; left: auto; bottom: auto;
		width: var(--foxco-ah-size-tablet);
		height: var(--foxco-ah-size-tablet);
	}
	.foxco-ah-drawer--close-mirror[data-pos-tablet="top"] .foxco-ah-drawer__close {
		top: 0; right: 0; left: auto; bottom: auto;
		width: var(--foxco-ah-size-tablet);
		height: var(--foxco-ah-size-tablet);
	}
	.foxco-ah-drawer--close-mirror[data-pos-tablet="bottom"] .foxco-ah-drawer__close {
		bottom: 0; right: 0; top: auto; left: auto;
		width: var(--foxco-ah-size-tablet);
		height: var(--foxco-ah-size-tablet);
	}
}

@media (min-width: 1025px) {
	.foxco-ah-drawer--close-mirror[data-pos-desktop="left"] .foxco-ah-drawer__close {
		top: 0; left: 0; right: auto; bottom: auto;
		width: var(--foxco-ah-size-desktop);
		height: var(--foxco-ah-size-desktop);
	}
	.foxco-ah-drawer--close-mirror[data-pos-desktop="right"] .foxco-ah-drawer__close {
		top: 0; right: 0; left: auto; bottom: auto;
		width: var(--foxco-ah-size-desktop);
		height: var(--foxco-ah-size-desktop);
	}
	.foxco-ah-drawer--close-mirror[data-pos-desktop="top"] .foxco-ah-drawer__close {
		top: 0; right: 0; left: auto; bottom: auto;
		width: var(--foxco-ah-size-desktop);
		height: var(--foxco-ah-size-desktop);
	}
	.foxco-ah-drawer--close-mirror[data-pos-desktop="bottom"] .foxco-ah-drawer__close {
		bottom: 0; right: 0; top: auto; left: auto;
		width: var(--foxco-ah-size-desktop);
		height: var(--foxco-ah-size-desktop);
	}
}

.foxco-ah-drawer--close-mirror .foxco-ah-drawer__close {
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.foxco-ah-drawer .foxco-ah-drawer__close:hover,
.foxco-ah-drawer .foxco-ah-drawer__close:focus-visible { color: var(--foxco-ah-icon-hover) !important; }

/* Drawer layout */
.foxco-ah-drawer__inner {
	min-height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--foxco-ah-drawer-padding-mobile, 80px 24px 40px);
}
@media (min-width: 768px) {
	.foxco-ah-drawer__inner { padding: var(--foxco-ah-drawer-padding-tablet, var(--foxco-ah-drawer-padding-mobile, 80px 24px 40px)); }
}
@media (min-width: 1025px) {
	.foxco-ah-drawer__inner { padding: var(--foxco-ah-drawer-padding-desktop, var(--foxco-ah-drawer-padding-tablet, var(--foxco-ah-drawer-padding-mobile, 80px 24px 40px))); }
}

.foxco-ah-drawer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	width: 100%;
	max-width: 1200px;
}

@media (min-width: 640px) {
	.foxco-ah-drawer__grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
}
@media (min-width: 1024px) {
	.foxco-ah-drawer__grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 56px; }
}

.foxco-ah-drawer .foxco-ah-drawer__heading {
	color: var(--foxco-ah-drawer-heading);
	font-size: 28px;
	font-weight: 700;
	margin: 0 0 20px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Heading link: inherits all typographic properties from the parent h3 so the
   link-typography group control does not override the heading look, and it
   gets a subtle underline-on-hover treatment instead. */
.foxco-ah-drawer .foxco-ah-drawer__heading-link {
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	text-decoration: none;
	transition: opacity 0.18s ease, text-decoration-color 0.18s ease;
}
.foxco-ah-drawer .foxco-ah-drawer__heading-link:hover,
.foxco-ah-drawer .foxco-ah-drawer__heading-link:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.15em;
	opacity: 0.85;
}

.foxco-ah-drawer__links,
.foxco-ah-drawer__menu,
.foxco-ah-drawer__social {
	list-style: none;
	margin: 0;
	padding: 0;
}

.foxco-ah-drawer__links li,
.foxco-ah-drawer__menu li { margin: 0 0 10px; }

/* ==========================================================================
   Drawer link + social icon colors.
   ALL color-bearing selectors are prefixed with .foxco-ah-drawer so their
   specificity is 0,2,1 or higher. This beats the typical theme/Elementor
   link color rule (.elementor-widget-container a, body a, .site a etc.)
   which sits at 0,1,1. Without this, themes that set link color on a
   class+element selector can appear to work in the editor (where Elementor
   applies its own normalization) but override our colors on the frontend.
   ========================================================================== */

.foxco-ah-drawer .foxco-ah-drawer__links a,
.foxco-ah-drawer .foxco-ah-drawer__menu a,
.foxco-ah-drawer .foxco-ah-drawer__col a:not(.foxco-ah-drawer__social a) {
	color: var(--foxco-ah-drawer-link);
	text-decoration: none;
	display: inline-block;
	transition: color var(--foxco-ah-speed) ease, transform var(--foxco-ah-speed) ease, text-decoration-color var(--foxco-ah-speed) ease;
}

.foxco-ah-drawer .foxco-ah-drawer__links a:hover,
.foxco-ah-drawer .foxco-ah-drawer__menu a:hover,
.foxco-ah-drawer .foxco-ah-drawer__col a:not(.foxco-ah-drawer__social a):hover,
.foxco-ah-drawer .foxco-ah-drawer__links a:focus-visible,
.foxco-ah-drawer .foxco-ah-drawer__menu a:focus-visible,
.foxco-ah-drawer .foxco-ah-drawer__col a:not(.foxco-ah-drawer__social a):focus-visible {
	color: var(--foxco-ah-drawer-link-hover);
	outline: none;
}

/* Hover effect variants */
.foxco-ah-drawer--hover-slide .foxco-ah-drawer__links a:hover,
.foxco-ah-drawer--hover-slide .foxco-ah-drawer__menu a:hover,
.foxco-ah-drawer--hover-slide .foxco-ah-drawer__col a:not(.foxco-ah-drawer__social a):hover,
.foxco-ah-drawer--hover-slide .foxco-ah-drawer__links a:focus-visible,
.foxco-ah-drawer--hover-slide .foxco-ah-drawer__menu a:focus-visible,
.foxco-ah-drawer--hover-slide .foxco-ah-drawer__col a:not(.foxco-ah-drawer__social a):focus-visible {
	transform: translateX(6px);
}

.foxco-ah-drawer--hover-underline .foxco-ah-drawer__links a,
.foxco-ah-drawer--hover-underline .foxco-ah-drawer__menu a,
.foxco-ah-drawer--hover-underline .foxco-ah-drawer__col a:not(.foxco-ah-drawer__social a) {
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 6px;
	text-decoration-thickness: 2px;
}
.foxco-ah-drawer--hover-underline .foxco-ah-drawer__links a:hover,
.foxco-ah-drawer--hover-underline .foxco-ah-drawer__menu a:hover,
.foxco-ah-drawer--hover-underline .foxco-ah-drawer__col a:not(.foxco-ah-drawer__social a):hover,
.foxco-ah-drawer--hover-underline .foxco-ah-drawer__links a:focus-visible,
.foxco-ah-drawer--hover-underline .foxco-ah-drawer__menu a:focus-visible,
.foxco-ah-drawer--hover-underline .foxco-ah-drawer__col a:not(.foxco-ah-drawer__social a):focus-visible {
	text-decoration-color: currentColor;
}

.foxco-ah-drawer--hover-scale .foxco-ah-drawer__links a:hover,
.foxco-ah-drawer--hover-scale .foxco-ah-drawer__menu a:hover,
.foxco-ah-drawer--hover-scale .foxco-ah-drawer__col a:not(.foxco-ah-drawer__social a):hover,
.foxco-ah-drawer--hover-scale .foxco-ah-drawer__links a:focus-visible,
.foxco-ah-drawer--hover-scale .foxco-ah-drawer__menu a:focus-visible,
.foxco-ah-drawer--hover-scale .foxco-ah-drawer__col a:not(.foxco-ah-drawer__social a):focus-visible {
	transform: scale(1.08);
	transform-origin: left center;
}

/* hover-none: no transform, only color change (already applied above) */

.foxco-ah-drawer__social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--foxco-ah-social-gap, 16px);
}

/* Circled style (default) - .foxco-ah-drawer prefix raises specificity to 0,2,1 */
.foxco-ah-drawer .foxco-ah-drawer__social a {
	color: var(--foxco-ah-social-color, var(--foxco-ah-drawer-link));
	font-size: var(--foxco-ah-social-size, 24px);
	width: calc(var(--foxco-ah-social-size, 24px) + 20px);
	height: calc(var(--foxco-ah-social-size, 24px) + 20px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid var(--foxco-ah-border);
	text-decoration: none;
	transition: color var(--foxco-ah-speed) ease, border-color var(--foxco-ah-speed) ease, transform var(--foxco-ah-speed) ease;
}

.foxco-ah-drawer .foxco-ah-drawer__social a:hover,
.foxco-ah-drawer .foxco-ah-drawer__social a:focus-visible {
	color: var(--foxco-ah-social-hover, var(--foxco-ah-drawer-link-hover));
	border-color: var(--foxco-ah-social-hover, var(--foxco-ah-drawer-link-hover));
	transform: translateY(-2px);
	outline: none;
}

/* Flat style - no border, no circle, just the icon */
.foxco-ah-drawer__social[data-style="flat"] a {
	width: auto;
	height: auto;
	padding: 6px;
	border: 0;
	border-radius: 0;
}

.foxco-ah-drawer__social[data-style="flat"] a:hover,
.foxco-ah-drawer__social[data-style="flat"] a:focus-visible {
	border: 0;
	transform: translateY(-2px);
}

/* Custom SVG icon containers */
.foxco-ah-drawer__social .foxco-ah-svg-icon,
.foxco-ah-drawer__social .foxco-ah-svg-img {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1em;
	height: 1em;
	font-size: inherit;
}

.foxco-ah-drawer__social .foxco-ah-svg-icon svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.foxco-ah-drawer__social .foxco-ah-svg-img {
	width: var(--foxco-ah-social-size, 24px);
	height: var(--foxco-ah-social-size, 24px);
	object-fit: contain;
}

/* Also make toggle/close buttons scale uploaded SVGs nicely */
.foxco-ah__btn svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.foxco-ah-drawer__html { color: var(--foxco-ah-drawer-heading); font-size: 16px; line-height: 1.6; }
.foxco-ah-drawer__html a { color: var(--foxco-ah-drawer-link); }
.foxco-ah-drawer__html a:hover { color: var(--foxco-ah-drawer-link-hover); }

/* ==========================================================================
   Tile Grid drawer layout (.foxco-ah-drawer__tiles)
   ----------------------------------------------------------------------------
   A grid of square nav-button tiles, label + link, replacing the column/list
   layout entirely when Drawer Source = "Tile Grid". Sizing controls (columns,
   gap, min-height) are responsive CSS vars set inline by render_drawer_tiles().
   Colors fall back through the active preset's drawer vars when not explicitly
   overridden via the Tile Grid section color pickers, so tiles auto-theme.
   Specificity follows the .foxco-ah-drawer prefix pattern used elsewhere in
   this file so theme/Elementor link-color rules can't override tile text.
   ========================================================================== */

.foxco-ah-drawer__tiles {
	display: grid;
	grid-template-columns: repeat(var(--foxco-ah-tiles-cols-mobile, 2), 1fr);
	gap: var(--foxco-ah-tiles-gap-mobile, 0px);
	width: 100%;
}

.foxco-ah-drawer .foxco-ah-drawer__tile {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--foxco-ah-tiles-minh-mobile, 130px);
	background: var(--foxco-ah-tile-bg, var(--foxco-ah-drawer-bg));
	color: var(--foxco-ah-tile-text, var(--foxco-ah-drawer-link)) !important;
	border: 1px solid var(--foxco-ah-tile-border, var(--foxco-ah-border));
	text-decoration: none;
	text-align: center;
	padding: 16px;
	box-sizing: border-box;
	transition: background-color var(--foxco-ah-speed) ease, color var(--foxco-ah-speed) ease;
}

.foxco-ah-drawer .foxco-ah-drawer__tile:hover,
.foxco-ah-drawer .foxco-ah-drawer__tile:focus-visible {
	background: var(--foxco-ah-tile-bg-hover, var(--foxco-ah-drawer-link-hover));
	color: var(--foxco-ah-tile-text, var(--foxco-ah-drawer-bg)) !important;
	outline: none;
}

.foxco-ah-drawer__tile-label {
	font-weight: 600;
	font-size: 18px;
	letter-spacing: 0.03em;
	text-transform: var(--foxco-ah-tiles-transform, uppercase);
	line-height: 1.3;
}

@media (min-width: 768px) {
	.foxco-ah-drawer__tiles {
		grid-template-columns: repeat(var(--foxco-ah-tiles-cols-tablet, var(--foxco-ah-tiles-cols-mobile, 2)), 1fr);
		gap: var(--foxco-ah-tiles-gap-tablet, var(--foxco-ah-tiles-gap-mobile, 0px));
	}
	.foxco-ah-drawer .foxco-ah-drawer__tile {
		min-height: var(--foxco-ah-tiles-minh-tablet, var(--foxco-ah-tiles-minh-mobile, 130px));
	}
}

@media (min-width: 1025px) {
	.foxco-ah-drawer__tiles {
		grid-template-columns: repeat(var(--foxco-ah-tiles-cols-desktop, var(--foxco-ah-tiles-cols-tablet, var(--foxco-ah-tiles-cols-mobile, 2))), 1fr);
		gap: var(--foxco-ah-tiles-gap-desktop, var(--foxco-ah-tiles-gap-tablet, var(--foxco-ah-tiles-gap-mobile, 0px)));
	}
	.foxco-ah-drawer .foxco-ah-drawer__tile {
		min-height: var(--foxco-ah-tiles-minh-desktop, var(--foxco-ah-tiles-minh-tablet, var(--foxco-ah-tiles-minh-mobile, 130px)));
	}
}

/* ==========================================================================
   Body lock when drawer is open
   ========================================================================== */

body.foxco-ah-locked { overflow: hidden; }

/* ==========================================================================
   Utilities & reduced motion
   ========================================================================== */

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

@media (prefers-reduced-motion: reduce) {
	.foxco-ah, .foxco-ah *, .foxco-ah-drawer, .foxco-ah-drawer * {
		transition: none !important;
		animation: none !important;
	}
}

/* ==========================================================================
   Elementor editor - show drawer inline for preview when toggle is clicked
   (no behavioral change; JS handles it everywhere)
   ========================================================================== */

.elementor-editor-active .foxco-ah { /* keep normal behavior */ }