/*
Theme Name: Gencore Global
Theme URI: https://gencoreglobal.com
Author: Gencore Global
Author URI: https://gencoreglobal.com
Description: Master brand theme for Gencore Global — the umbrella account spanning Health, Fitness, Pet, Financial Services, Clothing and Social. Clean white-and-blue design system, built for WooCommerce and Elementor.
Version: 1.0.70
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
Text Domain: gencore
Tags: e-commerce, custom-colors, custom-logo, custom-menu, full-width-template, threaded-comments, translation-ready
*/

/* -----------------------------------------------------------------------
   Design tokens
----------------------------------------------------------------------- */
:root {
	--gc-blue: #5BA7DB;
	--gc-blue-dark: #3D82B3;
	--gc-blue-light: #EAF3FA;
	--gc-blue-lighter: #DCEEFA;

	--gc-bg: #F4F8FB;
	--gc-white: #FFFFFF;

	--gc-ink: #14212B;
	--gc-muted: #5A6B75;

	--gc-accent: #F2994A;
	--gc-warm-bg: #FDF1E4;
	--gc-warm-text: #D97B2E;

	--gc-footer-bg: #14212B;
	--gc-footer-bg-2: #0E2A3B;
	--gc-footer-text: #9FB4C2;
	--gc-footer-text-dim: #7E97A6;
	--gc-footer-divider: #22475C;

	--gc-font-heading: "Manrope", system-ui, sans-serif;
	--gc-font-body: "Inter", system-ui, sans-serif;

	--gc-body-size: 16px;
	--gc-text-color: #14212B;
	--gc-heading-color: #14212B;

	--gc-radius-sm: 10px;
	--gc-radius-md: 16px;
	--gc-radius-pill: 999px;

	--gc-nav-open-delay: 220ms;
	/* Scrolled header: hover-intent before the collapsed pill reopens, how long
	   the halves take to slide out, and how far into that slide the labels
	   start fading up. */
	--gc-nav-reveal-delay: 260ms;
	--gc-nav-slide: 0.38s;
	--gc-nav-fade-in: 0.16s;

	--gc-line: #E1E9EE;

	--gc-shadow-card: 0px 10px 28px -8px rgba(20, 33, 43, 0.12);
	--gc-shadow-card-hover: 0px 18px 40px -10px rgba(20, 33, 43, 0.22);
	--gc-shadow-button: 0px 6px 16px -2px rgba(91, 167, 219, 0.3);
	--gc-shadow-pill: 0px 2px 10px -3px rgba(20, 33, 43, 0.08);

	/* Navbar — all Customizer-controlled (see inc/customizer.php) */
	--gc-header-pad-y: 20px;
	--gc-header-pad-x: 64px;
	--gc-header-fade-opacity: 0.65;   /* top strength of the fade */
	--gc-header-fade-height: 0px;     /* bleed: how far the bar's tint extends below the header, over the page */
	--gc-header-feather: 28px;        /* smoothness: distance over which the bottom edge fades to transparent (independent of bleed) */
	--gc-header-blur: 11px;
	--gc-nav-item-size: 14px;
	--gc-nav-item-pad-y: 11px;        /* menu height */
	--gc-nav-item-pad-x: 16px;
	--gc-nav-text: #000000;
	--gc-glider-opacity: 0.6;         /* frosted pill strength */
	--gc-glider-blur: 8px;

	/* Header action buttons (account/cart icons + CTA) */
	--gc-icon-size: 38px;
	--gc-icon-opacity: 0.45;          /* frosted icon strength */
	--gc-icon-blur: 8px;
	--gc-cta-start: #5BA7DB;          /* CTA gradient start */
	--gc-cta-end: #3D82B3;            /* CTA gradient end */
	--gc-cta-size: 14px;
	--gc-cta-pad-y: 10px;
	--gc-cta-pad-x: 20px;

	--gc-container: 1312px;
	--gc-logo-size: 36px;          /* header logo */
	--gc-footer-logo-size: 36px;   /* footer logo (independent) */

	/* Shop (Product + Cart) — all Customizer-controlled (GC Shop section).
	   woocommerce.css reads only these; the inline block from the Customizer
	   overrides them per option, so nothing below is hardcoded in the templates. */
	--gc-woo-bg: #FFFFFF;              /* page background */
	--gc-woo-card: #FFFFFF;            /* cart item card */
	--gc-woo-card-alt: #F4F8FB;        /* alternating cart card */
	--gc-woo-summary-bg: #F4F8FB;      /* order summary card */
	--gc-woo-surface: #F4F8FB;         /* pills, promo input, thumbs */
	--gc-woo-border: #E1E9EE;          /* dividers, borders */
	--gc-woo-heading: #14212B;         /* titles */
	--gc-woo-text: #5A6B75;            /* body / meta text */
	--gc-woo-price: #14212B;           /* prices */
	--gc-woo-primary: #5BA7DB;         /* buttons */
	--gc-woo-primary-text: #FFFFFF;    /* button label */
	--gc-woo-accent: #F2994A;          /* stars, sale, sparkle, progress */
	--gc-woo-pill-active: #5BA7DB;     /* selected size pill */
	--gc-woo-sale-bg: #FDF1E4;         /* sale pill background */
	--gc-woo-sale-text: #D97B2E;       /* sale pill / remove text */

	--gc-woo-font-heading: var(--gc-font-heading);
	--gc-woo-font-body: var(--gc-font-body);
	--gc-woo-title-size: 32px;         /* product title */
	--gc-woo-price-size: 26px;         /* product price */
	--gc-woo-cart-title-size: 30px;    /* "Your Cart" */
	--gc-woo-total-size: 22px;         /* cart total */

	--gc-woo-top-pad: 145px;           /* clearance under sticky header */
	--gc-woo-x-pad: 64px;              /* section side padding */
	--gc-woo-y-pad: 32px;              /* section vertical padding */
	--gc-woo-col-gap: 48px;            /* gallery/summary column gap */
	--gc-woo-card-pad: 12px;           /* cart card padding */
	--gc-woo-card-radius: 16px;        /* card corner radius */
	--gc-woo-summary-width: 360px;     /* order summary column width */
}

/* -----------------------------------------------------------------------
   Reset & base
----------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }

body {
	margin: 0;
	font-family: var(--gc-font-body);
	font-size: var(--gc-body-size, 16px);
	line-height: 1.6;
	color: var(--gc-text-color, var(--gc-ink));
	background: var(--gc-white);
	-webkit-font-smoothing: antialiased;
	/* Clip the scrollbar-width overhang from full-bleed 100vw bands. clip (not
	   hidden) keeps the sticky header working since it creates no scroll port. */
	overflow-x: clip;
}

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

a { color: var(--gc-blue-dark); text-decoration: none; }
a:hover { color: var(--gc-blue); }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--gc-font-heading);
	font-weight: 800;
	color: var(--gc-heading-color, var(--gc-ink));
	line-height: 1.2;
	margin: 0 0 0.5em;
}

h1 { font-size: clamp(2rem, 1.6rem + 1.6vw, 3rem); }
h2 { font-size: clamp(1.6rem, 1.35rem + 1vw, 2.25rem); }
h3 { font-size: 1.375rem; }

p { margin: 0 0 1em; }

ul, ol { padding-left: 1.25em; }

button, input, select, textarea { font-family: inherit; font-size: inherit; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* -----------------------------------------------------------------------
   Layout helpers
----------------------------------------------------------------------- */
/* Runs full width on every page — content stretches edge to edge instead
   of being boxed into a fixed max-width. */
.gc-container {
	width: 100%;
	max-width: none;
	margin-inline: auto;
	padding-inline: 48px;
}
/* Contained content layout caps the width (Gencore > Layout, or per page). */
body.gc-layout-contained .gc-container { max-width: var(--gc-content-max, 1312px); }
@media (max-width: 640px) {
	.gc-container { padding-inline: 20px; }
}

/* Blog / archive: sidebar layout + post columns (Gencore > Layout). */
.gc-blog-wrap { display: block; }
body.gc-blog-sidebar-left .gc-blog-wrap,
body.gc-blog-sidebar-right .gc-blog-wrap {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 48px;
	align-items: start;
}
body.gc-blog-sidebar-left .gc-blog-wrap { grid-template-columns: 300px minmax(0, 1fr); }
body.gc-blog-sidebar-left .gc-blog-main { order: 2; }
body.gc-blog-sidebar-left .gc-blog-aside { order: 1; }
.gc-blog-aside .widget { margin-bottom: 28px; }
.gc-blog-cols-2 .entry-grid,
.gc-blog-cols-3 .entry-grid { display: grid !important; gap: 32px !important; }
.gc-blog-cols-2 .entry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gc-blog-cols-3 .entry-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) {
	body.gc-blog-sidebar-left .gc-blog-wrap,
	body.gc-blog-sidebar-right .gc-blog-wrap { grid-template-columns: 1fr; }
	.gc-blog-cols-2 .entry-grid,
	.gc-blog-cols-3 .entry-grid { grid-template-columns: 1fr; }
}

.site-main { display: block; }

.alignwide { max-width: calc(var(--gc-container) + 6rem); margin-inline: auto; }
.alignfull { max-width: none; }

/* -----------------------------------------------------------------------
   Skip link
----------------------------------------------------------------------- */
.skip-link {
	position: absolute;
	top: -60px;
	left: 6px;
	z-index: 100000;
	background: var(--gc-ink);
	color: var(--gc-white);
	padding: 10px 18px;
	border-radius: var(--gc-radius-sm);
	transition: top 0.15s ease;
}
.skip-link:focus { top: 6px; color: var(--gc-white); }

/* -----------------------------------------------------------------------
   Site header
----------------------------------------------------------------------- */
.site-header {
	position: sticky;
	top: 0;
	/* In-flow, so content sits BENEATH the header at the top of the page.
	   When scrolled, the sticky header pins to the top and content scrolls
	   underneath it — blurred/tinted by the backdrop-filter on ::before. */
	z-index: 50;
	/* 1fr auto 1fr grid: the two side columns are exactly equal, so the
	   auto-width nav column sits on the true header centre regardless of how
	   wide the branding or actions are. */
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 24px;
	padding: var(--gc-header-pad-y) var(--gc-header-pad-x);
}

/* A little breathing room above the nav bar on desktop. Added as top padding
   (not margin) so the header's tint/blur ::before still fills it — a margin
   would expose the dark page background above the in-flow header. */
@media (min-width: 961px) {
	.site-header { padding-top: calc(var(--gc-header-pad-y) + 12px); }
}

/* Keep the sticky header below the wp-admin toolbar instead of under it,
   so a logged-in admin bar doesn't clip the top of the logo. */
.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
	.admin-bar .site-header { top: 46px; }
}

.site-header::before {
	content: "";
	position: absolute;
	/* The bar's tint + blur, extended a short "bleed" (--gc-header-fade-height)
	   below the header so the fade lands over the page. */
	inset: 0 0 calc(var(--gc-header-fade-height) * -1) 0;
	background: rgba(255, 255, 255, var(--gc-header-fade-opacity));
	backdrop-filter: blur(var(--gc-header-blur));
	-webkit-backdrop-filter: blur(var(--gc-header-blur));
	/* Solid across the top, feathering ONLY the bottom edge so the bar melts
	   smoothly into whatever page sits below. Length (--gc-header-fade-height)
	   and smoothness (--gc-header-feather) are independent Customizer sliders:
	   length = how far the tint bleeds past the header; feather = over how many
	   px that bottom edge fades out. A short bleed can still fade smoothly. */
	mask-image: linear-gradient(180deg, #000 0%, #000 calc(100% - var(--gc-header-feather)), transparent 100%);
	-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 calc(100% - var(--gc-header-feather)), transparent 100%);
	pointer-events: none;
	z-index: -1;
}

.site-header > * { position: relative; }

.site-branding {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	/* Hug the content instead of filling the 1fr grid column. */
	justify-self: start;
	/* Own stacking context so the ::before glow can sit behind the logo
	   without dropping behind the header backdrop. */
	position: relative;
	z-index: 0;
}

/* Backlight: a clean pill-shaped glow behind the logo, feathered with a blur
   so the edges stay smooth and anti-aliased against the hero. */
.site-branding::before {
	content: "";
	position: absolute;
	inset: -6px -14px;
	z-index: -1;
	border-radius: var(--gc-radius-pill);
	background: radial-gradient(
		ellipse 80% 72% at center,
		rgba(255,255,255,0.55) 0%,
		rgba(255,255,255,0.28) 52%,
		rgba(255,255,255,0) 100%
	);
	filter: blur(10px);
	pointer-events: none;
}

.site-branding .custom-logo-link { display: flex; }
.site-branding .custom-logo-link img {
	width: var(--gc-logo-size);
	height: auto;
	object-fit: contain;
	transition: width 0.15s ease, height 0.15s ease;
}


.logo-mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--gc-logo-size);
	height: var(--gc-logo-size);
	border-radius: var(--gc-radius-sm);
	background: linear-gradient(-135deg, var(--gc-blue) 15%, var(--gc-blue-dark) 85%);
	flex-shrink: 0;
	transition: width 0.15s ease, height 0.15s ease;
}
.logo-mark svg {
	width: calc(var(--gc-logo-size) * 0.5);
	height: calc(var(--gc-logo-size) * 0.5);
}

.site-title {
	margin: 0;
	font-family: var(--gc-font-heading);
	font-size: 20px;
	font-weight: 800;
	color: var(--gc-ink);
	white-space: nowrap;
}
.site-title a {
	color: inherit;
	display: flex;
	flex-direction: column;
	line-height: 1.02;
}
.site-title-line { display: block; }

.primary-navigation {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
}

/* -----------------------------------------------------------------------
   Centred-logo header (Gencore > Header > Header layout = Centred logo)

   Same 1fr auto 1fr grid, but the columns hold: CTA button | nav pill with
   the logo sitting mid-menu | action icons. The pill chrome moves from the
   two <ul>s onto .gc-navsplit so the left menu, logo and right menu read as
   one continuous bar.
----------------------------------------------------------------------- */
@media (min-width: 961px) {
	/* The logo now lives inside the pill, so the standalone branding block
	   (kept for the mobile bar) is hidden and .gc-hcta takes column one. */
	.gc-header-centre .site-branding { display: none; }
}

.gc-hcta {
	display: flex;
	align-items: center;
	justify-self: start;
	min-width: 0;
}

.gc-navsplit {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 5px;
	border-radius: var(--gc-radius-pill);
	background: rgba(255, 255, 255, 0.68);
	border: 1px solid rgba(255, 255, 255, 0.6);
	backdrop-filter: blur(var(--gc-icon-blur));
	-webkit-backdrop-filter: blur(var(--gc-icon-blur));
	box-shadow: var(--gc-shadow-pill);
}

/* Inside the split pill the two menus are plain lists — .gc-navsplit owns
   the background, border and shadow so there is only one pill outline. */
.gc-navsplit .nav-pill {
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	flex-wrap: nowrap;
}

.gc-navsplit__logo {
	display: flex;
	align-items: center;
	gap: 10px;
	/* Breathing room so the logo reads as the centrepiece, not a menu item. */
	padding: 0 18px;
	min-width: 0;
	white-space: nowrap;
}
/* Same sizing as the left-hand branding block, which is scoped to
   .site-branding and so doesn't reach the copy sitting inside the pill. */
.gc-navsplit__logo .custom-logo-link { display: flex; }
.gc-navsplit__logo .custom-logo-link img {
	width: var(--gc-logo-size);
	height: auto;
	object-fit: contain;
	transition: width 0.15s ease, height 0.15s ease;
}
.gc-navsplit__logo .site-title { font-size: 18px; }

/* Scrolled state: the two menu halves fold into the centre logo, leaving a
   compact logo pill between the CTA and the icon row. Hovering the pill (or
   tabbing into it) opens it again; scrolling back to the top restores it. */
@media (min-width: 961px) {
	/* --gc-half-w is each list's natural width, measured in main.js, so the
	   collapse animates between an exact pixel width and zero. The list keeps
	   its normal flex layout, so nothing reflows or overlaps when open.

	   The two properties are deliberately staged rather than run together:
	   opening, the pill widens first and the items only fade up once there is
	   room for them, so you never see labels sliding over the logo. Closing,
	   the items fade out first and the pill shrinks behind them. */
	.gc-header-centre .gc-navsplit .nav-pill {
		max-width: var(--gc-half-w, none);
		transition: max-width var(--gc-nav-slide) cubic-bezier(0.4, 0, 0.2, 1),
			opacity 0.22s ease var(--gc-nav-fade-in);
	}
	/* 1fr auto 1fr, the same trick the header itself uses: the two menu tracks
	   are sized equal to each other whatever the labels are, so the logo track
	   lands on the pill's true centre. The halves then hug the logo. */
	.gc-header-centre .gc-navsplit {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		transition: gap var(--gc-nav-slide) cubic-bezier(0.4, 0, 0.2, 1);
	}
	/* Each half fills its equal track, so the end items sit the same distance
	   from the pill ends and from the logo. The slack from the shorter half
	   goes into its own item spacing instead of piling up at one end. */
	.gc-header-centre .gc-navsplit .nav-pill--left,
	.gc-header-centre .gc-navsplit .nav-pill--right { justify-content: space-between; }

	/* Collapsing: fade out fast, shrink just behind it. */
	.gc-header-centre.gc-nav-min .gc-navsplit { gap: 0; }
	.gc-header-centre.gc-nav-min .gc-navsplit .nav-pill {
		max-width: 0;
		opacity: 0;
		pointer-events: none;
		transition: max-width var(--gc-nav-slide) cubic-bezier(0.4, 0, 0.2, 1) 0.1s,
			opacity 0.14s ease;
	}
	/* Collapsing frees plenty of room, so the in-pill logo comes back even in
	   the compact tier that normally drops it. */
	.gc-header-centre.gc-nav-min .gc-navsplit__logo { display: flex; }

	/* Reveal on hover waits --gc-nav-reveal-delay, so brushing past the logo
	   on the way to the icons doesn't throw the whole menu open. Keyboard
	   focus opens straight away. */
	.gc-header-centre.gc-nav-min .gc-navsplit:hover {
		gap: 4px;
		transition-delay: var(--gc-nav-reveal-delay);
	}
	.gc-header-centre.gc-nav-min .gc-navsplit:hover .nav-pill {
		max-width: var(--gc-half-w, none);
		opacity: 1;
		pointer-events: auto;
		transition: max-width var(--gc-nav-slide) cubic-bezier(0.4, 0, 0.2, 1) var(--gc-nav-reveal-delay),
			opacity 0.22s ease calc(var(--gc-nav-reveal-delay) + var(--gc-nav-fade-in));
	}
	.gc-header-centre.gc-nav-min .gc-navsplit:focus-within { gap: 4px; }
	.gc-header-centre.gc-nav-min .gc-navsplit:focus-within .nav-pill {
		max-width: var(--gc-half-w, none);
		opacity: 1;
		pointer-events: auto;
		transition: max-width var(--gc-nav-slide) cubic-bezier(0.4, 0, 0.2, 1),
			opacity 0.22s ease var(--gc-nav-fade-in);
	}

	/* Held while the header is being measured, so a measurement never animates. */
	.site-header.gc-no-anim .gc-navsplit,
	.site-header.gc-no-anim .gc-navsplit .nav-pill { transition: none; }

	/* While the halves are sliding back out they travel under a stationary
	   cursor, and whichever item lands there would open its dropdown on its
	   own. Hold the dropdowns shut until main.js sees the pointer move. */
	.site-header.gc-nav-settling .nav-pill li.menu-item-has-children:hover > .sub-menu {
		opacity: 0;
		visibility: hidden;
		transform: translateY(6px);
		transition-delay: 0s;
	}
	.site-header.gc-nav-settling .nav-pill li.menu-item-has-children:hover > a::after {
		transform: translateY(-2px) rotate(45deg);
		transition-delay: 0s;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gc-header-centre .gc-navsplit,
	.gc-header-centre .gc-navsplit .nav-pill { transition: none; }
}

.nav-pill,
.gencore-fallback-menu {
	position: relative;
	display: flex;
	align-items: center;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 5px;
	flex-wrap: wrap;
	/* Near-solid light pill so black nav text keeps full contrast over a dark
	   hero, instead of washing out on a see-through frosted bar. */
	background: rgba(255,255,255,0.68);
	border: 1px solid rgba(255,255,255,0.6);
	border-radius: var(--gc-radius-pill);
	backdrop-filter: blur(var(--gc-icon-blur));
	-webkit-backdrop-filter: blur(var(--gc-icon-blur));
	box-shadow: var(--gc-shadow-pill);
}

/* Frosted pill that glides between items. JS positions/sizes it; the
   deliberately mismatched transition durations make it stretch mid-travel. */
.nav-glider {
	position: absolute;
	top: 0;
	left: 0;
	height: 36px;
	border-radius: var(--gc-radius-pill);
	background: linear-gradient(135deg, var(--gc-glider-start, #5BA7DB), var(--gc-glider-end, #6EC1E4));
	box-shadow: var(--gc-shadow-pill);
	backdrop-filter: blur(var(--gc-glider-blur));
	-webkit-backdrop-filter: blur(var(--gc-glider-blur));
	pointer-events: none;
	opacity: 0;
	z-index: 0;
	transform: translateX(0);
	transition:
		transform 0.34s cubic-bezier(0.4, 0, 0.2, 1),
		width 0.34s cubic-bezier(0.4, 0, 0.2, 1),
		height 0.25s ease,
		opacity 0.3s ease;
}
.nav-glider.is-ready { opacity: var(--gc-glider-opacity); }

.nav-pill li,
.gencore-fallback-menu li {
	position: relative;
	z-index: 1;
}

.nav-pill li a,
.gencore-fallback-menu li a {
	display: block;
	padding: var(--gc-nav-item-pad-y) var(--gc-nav-item-pad-x);
	border-radius: var(--gc-radius-pill);
	font-size: var(--gc-nav-item-size);
	font-weight: 600;
	color: var(--gc-nav-text);
	white-space: nowrap;
	transition: color 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.4, 0.5, 1);
}
.nav-pill > li:hover > a,
.nav-pill > li:focus-within > a {
	color: var(--gc-white);
}
.nav-pill li.current-menu-item > a,
.nav-pill li.current-menu-ancestor > a {
	color: var(--gc-white);
	font-weight: 600;
}

/* Default (no JS): flat highlight so the active/hovered item is still clear.
   Keyed off :hover on the <li> (not the <a>) so the parent pill stays lit
   while a sub-category in its dropdown is hovered. */
.nav-pill li.current-menu-item > a,
.nav-pill li.current-menu-ancestor > a { background: rgba(91, 167, 219, 0.6); }
.nav-pill > li:hover > a,
.nav-pill > li:focus-within > a { background: rgba(91, 167, 219, 0.6); }

/* When JS enables the glider, hand the highlight over to it and add the dip. */
.nav-pill.js-glider li.current-menu-item > a,
.nav-pill.js-glider li.current-menu-ancestor > a { background: transparent; }
.nav-pill.js-glider > li:hover > a,
.nav-pill.js-glider > li:focus-within > a { background: transparent; transform: translateY(2px); }

/* White text follows the glider (.nav-lit), not the active page. Otherwise the
   active link stays white on the light bar and vanishes once the glider slides
   away to a hovered item. */
.nav-pill.js-glider li.current-menu-item > a,
.nav-pill.js-glider li.current-menu-ancestor > a { color: var(--gc-ink); }
.nav-pill.js-glider li a.nav-lit { color: var(--gc-white); }

/* Slightly inflate the active page's label for emphasis. */
.nav-pill li.current-menu-item > a,
.nav-pill li.current-menu-ancestor > a { font-size: calc(var(--gc-nav-item-size) + 1px); font-weight: 700; }

/* -----------------------------------------------------------------------
   Nav submenu (dropdown) — shows on hover/focus of a parent pill item
----------------------------------------------------------------------- */
.nav-pill li.menu-item-has-children {
	position: relative;
}

.nav-pill li.menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.2s ease;
	opacity: 0.6;
}

.nav-pill li.menu-item-has-children:hover > a::after {
	transform: translateY(0) rotate(225deg);
	transition-delay: var(--gc-nav-open-delay);
}
.nav-pill li.menu-item-has-children:focus-within > a::after {
	transform: translateY(0) rotate(225deg);
	transition-delay: 0s;
}

.nav-pill .sub-menu {
	position: absolute;
	top: calc(100% + 12px);
	left: 0;
	z-index: 60;
	display: flex;
	flex-direction: column;
	gap: 2px;
	width: 240px;
	margin: 0;
	padding: 12px;
	list-style: none;
	background: rgba(255,255,255,0.75);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid rgba(255,255,255,0.6);
	border-radius: var(--gc-radius-md);
	box-shadow: var(--gc-shadow-card);

	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

/* Invisible bridge over the 12px gap above the dropdown so the pointer
   never leaves the menu item's hoverable area while moving from the pill
   down into the sub-menu (which would otherwise drop the hover/highlight). */
.nav-pill .sub-menu::before {
	content: "";
	position: absolute;
	top: -12px;
	left: 0;
	right: 0;
	height: 12px;
}

/* Hover intent: the dropdown waits --gc-nav-open-delay before opening, so
   sweeping the pointer across the pill on the way somewhere else never fires
   a menu. Closing has no delay here (main.js holds it open instead), so a
   half-finished hover reverts instantly. Keyboard focus opens immediately. */
.nav-pill li.menu-item-has-children:hover > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition-delay: var(--gc-nav-open-delay);
}
.nav-pill li.menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition-delay: 0s;
}

/* JS-managed open state (main.js): keeps the dropdown open for a short close
   delay after the pointer leaves, so moving from the pill toward the dropdown
   never snaps it shut. Mirrors the :hover open rules above. */
.nav-pill li.menu-item-has-children.gc-nav-open > a::after {
	transform: translateY(0) rotate(225deg);
}
.nav-pill li.menu-item-has-children.gc-nav-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.nav-pill .sub-menu li a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 400;
	color: var(--gc-ink);
	white-space: nowrap;
	transform: none;
}
.nav-pill .sub-menu li a:hover {
	background: var(--gc-blue-light);
	color: var(--gc-blue-dark);
	transform: none;
}

.nav-pill .sub-menu .submenu-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--gc-blue-light);
	color: var(--gc-blue);
}
.nav-pill .sub-menu .submenu-icon svg {
	width: 14px;
	height: 14px;
}
.nav-pill .sub-menu .submenu-icon img {
	width: 15px;
	height: 15px;
	object-fit: contain;
}
.nav-pill .sub-menu .submenu-icon .dashicons {
	font-size: 15px;
	width: 15px;
	height: 15px;
	line-height: 15px;
}
.nav-pill .sub-menu .submenu-label {
	flex: 1 1 0;
}

/* Top-level nav items: an inline icon before the label (chosen per item on
   the Gencore admin Navigation tab). No chip, just the glyph. */
.nav-pill > li > a .nav-pill-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	margin-right: 7px;
	vertical-align: -4px;
	color: currentColor;
}
.nav-pill > li > a .nav-pill-icon svg {
	width: 16px;
	height: 16px;
}
.nav-pill > li > a .nav-pill-icon img {
	width: 16px;
	height: 16px;
	object-fit: contain;
}
.nav-pill > li > a .nav-pill-icon .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
	line-height: 16px;
}

.header-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	/* Right column of the header grid, content pushed to the right edge. */
	justify-self: end;
}

/* The account/basket/ambassador icons are grouped so the CTA can drop onto its
   own line beneath them in the intermediate desktop range. */
.header-icons {
	display: flex;
	align-items: center;
	gap: 10px;
	/* Positioning context for the search panel, which drops centred under the
	   whole row and matches its width. */
	position: relative;
}

.icon-pill {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--gc-icon-size);
	height: var(--gc-icon-size);
	border-radius: 50%;
	/* Frosted glass to match the nav glider and header, not a solid white box. */
	background: rgba(255,255,255, var(--gc-icon-opacity));
	backdrop-filter: blur(var(--gc-icon-blur));
	-webkit-backdrop-filter: blur(var(--gc-icon-blur));
	border: 1px solid rgba(255,255,255,0.55);
	box-shadow: var(--gc-shadow-pill);
	color: var(--gc-ink);
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.4, 0.5, 1);
}
.icon-pill:hover {
	background: rgba(91, 167, 219, 0.6);
	color: var(--gc-white);
	transform: translateY(-1px);
}
.icon-pill svg { width: 18px; height: 18px; }
.icon-pill .dashicons { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; font-size: 18px; line-height: 1; transform: translate(1px, 1px); }
.icon-pill img { display: block; width: 18px; height: 18px; object-fit: contain; }

.icon-pill .badge-dot {
	position: absolute;
	top: 1px;
	right: 5px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--gc-accent);
}

/* Navbar basket hover preview (mini-cart). */
.gc-cart { position: relative; display: inline-flex; }
.gc-cart__count {
	position: absolute;
	top: -3px;
	right: -3px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: var(--gc-accent, #F2994A);
	color: #fff;
	font-family: var(--gc-font-heading, "Manrope", sans-serif);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}
.gc-cart__count.is-empty { display: none; }
.gc-cart__panel {
	position: absolute;
	top: calc(100% + 12px);
	right: 0;
	z-index: 1200;
	width: var(--gc-cart-w, 336px);
	max-width: calc(100vw - 32px);
	padding: 18px;
	background: var(--gc-white, #fff);
	border: 1px solid var(--gc-woo-border, #E1E9EE);
	border-radius: 16px;
	box-shadow: 0 24px 50px -18px rgba(20, 33, 43, 0.34);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
/* Invisible bridge so the pointer can travel from icon to panel without a gap. */
.gc-cart__panel::before {
	content: "";
	position: absolute;
	top: -14px;
	right: 0;
	left: 0;
	height: 14px;
}
.gc-cart__panel::after {
	content: "";
	position: absolute;
	top: -6px;
	right: 16px;
	width: 12px;
	height: 12px;
	background: var(--gc-white, #fff);
	border-left: 1px solid var(--gc-woo-border, #E1E9EE);
	border-top: 1px solid var(--gc-woo-border, #E1E9EE);
	transform: rotate(45deg);
}
/* Left-aligned variant: panel and arrow anchor to the left edge of the icon. */
.gc-cart--left .gc-cart__panel { right: auto; left: 0; }
.gc-cart--left .gc-cart__panel::after { right: auto; left: 16px; }
.gc-cart:hover .gc-cart__panel,
.gc-cart:focus-within .gc-cart__panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* WooCommerce mini-cart inside the panel */
.gc-cart__panel .woocommerce-mini-cart__empty-message,
.gc-cart__panel .elementor-menu-cart__empty-message { margin: 8px 0; color: var(--gc-muted, #5A6B75); font-size: 14px; text-align: center; }
.gc-cart__panel ul.cart_list,
.gc-cart__panel ul.product_list_widget { list-style: none; margin: 0 0 6px; padding: 0; max-height: var(--gc-cart-maxh, 320px); overflow-y: auto; }
.gc-cart__panel ul.cart_list li,
.gc-cart__panel ul.product_list_widget li { position: relative; display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; padding: 12px 0 12px 22px; border-bottom: 1px solid var(--gc-woo-border, #E1E9EE); font-size: 13.5px; }
.gc-cart__panel ul.cart_list li a { color: var(--gc-heading-color, #14212B); font-weight: 600; text-decoration: none; font-family: var(--gc-font-heading, "Manrope", sans-serif); }
.gc-cart__panel ul.cart_list li img { grid-column: 1; width: 48px; height: 48px; object-fit: cover; border-radius: 10px; float: none; margin: 0; }
.gc-cart__panel ul.cart_list li .quantity { color: var(--gc-muted, #5A6B75); font-size: 12.5px; }
.gc-cart-stars { gap: 2px; }
.gc-cart-stars .gc-star { display: inline-flex; }
.gc-cart-stars .gc-star svg { width: 13px; height: 13px; }
.gc-cart-stars .gc-star.is-on { color: var(--gc-woo-accent, #F2994A); }
.gc-cart-stars .gc-star.is-off { color: var(--gc-woo-border, #E1E9EE); }
/* Below the name: own line. Inline: sits after the name. */
.gc-cart-stars--below { display: flex; margin: 3px 0 0; }
.gc-cart-stars--inline { display: inline-flex; margin-left: 6px; vertical-align: middle; }
.gc-cart__panel ul.cart_list li a.remove { position: absolute; top: 12px; left: 0; width: 18px; height: 18px; line-height: 18px; text-align: center; border-radius: 50%; color: var(--gc-muted, #5A6B75) !important; font-size: 14px; }
.gc-cart__panel ul.cart_list li a.remove:hover { background: rgba(210, 60, 60, 0.12); color: #c0392b !important; }
.gc-cart__panel .woocommerce-mini-cart__total { display: flex; justify-content: space-between; align-items: center; margin: 14px 0; padding-top: 12px; font-family: var(--gc-font-heading, "Manrope", sans-serif); font-size: 15px; color: var(--gc-heading-color, #14212B); }
.gc-cart__panel .woocommerce-mini-cart__buttons { display: flex; gap: 10px; margin: 0; }
.gc-cart__panel .woocommerce-mini-cart__buttons .button { flex: 1; text-align: center; padding: 10px 12px; border-radius: 10px; font-family: var(--gc-font-heading, "Manrope", sans-serif); font-weight: 700; font-size: 13.5px; text-decoration: none; }
.gc-cart__panel .woocommerce-mini-cart__buttons .button:not(.checkout) { background: var(--gc-woo-surface, #F4F8FB); color: var(--gc-heading-color, #14212B); }
.gc-cart__panel .woocommerce-mini-cart__buttons .button.checkout { background: linear-gradient(135deg, var(--gc-blue, #5BA7DB), var(--gc-glider-end, #6EC1E4)); color: #fff; }

.gc-cart__panel .elementor-menu-cart__products { margin: 0 0 6px; padding: 0; max-height: var(--gc-cart-maxh, 320px); overflow-y: auto; }
.gc-cart__panel .elementor-menu-cart__product { position: relative; display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; padding: 12px 0 12px 22px; border-bottom: 1px solid var(--gc-woo-border, #E1E9EE); font-size: 13.5px; }
.gc-cart__panel .elementor-menu-cart__product-image { grid-column: 1; width: 48px; }
.gc-cart__panel .elementor-menu-cart__product-image a { display: block; }
.gc-cart__panel .elementor-menu-cart__product-image img { display: block; width: 48px; height: 48px; object-fit: cover; border-radius: 10px; margin: 0; }
.gc-cart__panel .elementor-menu-cart__product-name { grid-column: 2; min-width: 0; }
.gc-cart__panel .elementor-menu-cart__product-name a { color: var(--gc-heading-color, #14212B); font-weight: 600; text-decoration: none; font-family: var(--gc-font-heading, "Manrope", sans-serif); }
.gc-cart__panel .elementor-menu-cart__product-price { grid-column: 3; color: var(--gc-muted, #5A6B75); font-size: 12.5px; text-align: right; white-space: nowrap; }
.gc-cart__panel .elementor-menu-cart__product-remove { position: absolute; top: 12px; left: 0; }
.gc-cart__panel .elementor-menu-cart__product-remove a.remove { display: block; width: 18px; height: 18px; line-height: 18px; text-align: center; border-radius: 50%; color: var(--gc-muted, #5A6B75) !important; font-size: 14px; }
.gc-cart__panel .elementor-menu-cart__product-remove a.remove:hover { background: rgba(210, 60, 60, 0.12); color: #c0392b !important; }
.gc-cart__panel .elementor-menu-cart__subtotal { display: flex; justify-content: space-between; align-items: center; margin: 14px 0; padding-top: 12px; border: 0; font-family: var(--gc-font-heading, "Manrope", sans-serif); font-size: 15px; text-align: left; color: var(--gc-heading-color, #14212B); }
.gc-cart__panel .elementor-menu-cart__footer-buttons { display: flex; gap: 10px; margin: 0; }
.gc-cart__panel .elementor-menu-cart__footer-buttons .elementor-button { flex: 1; justify-content: center; text-align: center; padding: 10px 12px; border-radius: 10px; font-family: var(--gc-font-heading, "Manrope", sans-serif); font-weight: 700; font-size: 13.5px; text-decoration: none; }
.gc-cart__panel .elementor-menu-cart__footer-buttons .elementor-button--view-cart { background: var(--gc-woo-surface, #F4F8FB); color: var(--gc-heading-color, #14212B); }
.gc-cart__panel .elementor-menu-cart__footer-buttons .elementor-button--checkout { background: linear-gradient(135deg, var(--gc-blue, #5BA7DB), var(--gc-glider-end, #6EC1E4)); color: #fff; }
.gc-cart:not(:hover):not(:focus-within) .gc-cart__panel { content-visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
	.gc-cart__panel { transition: none; }
}
@media (max-width: 960px) {
	/* Anchor the panel to the actions group (not the small icon, which sits
	   mid-bar) so a full-width panel stays inside the viewport. Matches the
	   width at which the header collapses to the compact bar. */
	.header-actions { position: relative; }
	.gc-cart { position: static; }
	.gc-cart__panel {
		top: calc(100% + 10px);
		left: 50%;
		right: auto;
		transform: translateX(-50%);
		width: min(320px, calc(100vw - 24px));
	}
	.gc-cart:hover .gc-cart__panel,
	.gc-cart:focus-within .gc-cart__panel { transform: translateX(-50%); }
	.gc-cart__panel::after, .gc-cart__panel::before { display: none; }
}

/* Account hover/click panel — mirrors the basket preview mechanics. */
.gc-account { position: relative; display: inline-flex; }
.gc-account__panel {
	position: absolute;
	top: calc(100% + 12px);
	right: 0;
	z-index: 1200;
	width: 300px;
	max-width: calc(100vw - 32px);
	padding: 18px;
	background: var(--gc-white, #fff);
	border: 1px solid var(--gc-woo-border, #E1E9EE);
	border-radius: var(--gc-radius-md, 16px);
	box-shadow: 0 24px 50px -18px rgba(20, 33, 43, 0.34);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	font-family: var(--gc-font-body, "Inter", sans-serif);
}
/* Invisible bridge so the pointer can cross the gap to the panel. */
.gc-account__panel::before {
	content: "";
	position: absolute;
	top: -14px;
	right: 0;
	left: 0;
	height: 14px;
}
.gc-account__panel::after {
	content: "";
	position: absolute;
	top: -6px;
	right: 16px;
	width: 12px;
	height: 12px;
	background: var(--gc-white, #fff);
	border-left: 1px solid var(--gc-woo-border, #E1E9EE);
	border-top: 1px solid var(--gc-woo-border, #E1E9EE);
	transform: rotate(45deg);
}
/* Hover mode opens on hover/focus; click mode opens via the is-open class. */
.gc-account--hover:hover .gc-account__panel,
.gc-account--hover:focus-within .gc-account__panel,
.gc-account.is-open .gc-account__panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Ambassador hover quick-view (mirrors the account/cart panels). Distinct
   .gc-ambq prefix so it never clashes with the dashboard's .gc-amb-* styles. */
.gc-ambq { position: relative; display: inline-flex; }
.gc-ambq__panel {
	position: absolute;
	top: calc(100% + 12px);
	right: 0;
	z-index: 1200;
	width: 260px;
	max-width: calc(100vw - 32px);
	padding: 16px;
	background: var(--gc-white, #fff);
	border: 1px solid var(--gc-woo-border, #E1E9EE);
	border-radius: var(--gc-radius-md, 16px);
	box-shadow: 0 24px 50px -18px rgba(20, 33, 43, 0.34);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	font-family: var(--gc-font-body, "Inter", sans-serif);
}
.gc-ambq__panel::before { content: ""; position: absolute; top: -14px; right: 0; left: 0; height: 14px; }
.gc-ambq__panel::after {
	content: "";
	position: absolute;
	top: -6px;
	right: 16px;
	width: 12px;
	height: 12px;
	background: var(--gc-white, #fff);
	border-left: 1px solid var(--gc-woo-border, #E1E9EE);
	border-top: 1px solid var(--gc-woo-border, #E1E9EE);
	transform: rotate(45deg);
}
.gc-ambq:hover .gc-ambq__panel,
.gc-ambq:focus-within .gc-ambq__panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.gc-ambq__head { margin: 0 0 10px; }
.gc-ambq__title { font-family: var(--gc-font-heading, "Manrope", sans-serif); font-weight: 800; font-size: 13px; letter-spacing: .02em; color: var(--gc-heading-color, #14212B); }
.gc-ambq__hero { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px; background: linear-gradient(150deg, #fff, var(--gc-blue-light, #EAF3FA)); border: 1px solid var(--gc-woo-border, #E1E9EE); margin: 0 0 12px; }
.gc-ambq__hero-lab { font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: var(--gc-muted, #5A6B75); }
.gc-ambq__hero-num { font-family: var(--gc-font-heading, "Manrope", sans-serif); font-weight: 800; font-size: 22px; color: var(--gc-blue-dark, #3D82B3); font-variant-numeric: tabular-nums; line-height: 1.1; }
.gc-ambq__stats { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.gc-ambq__stats li { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--gc-muted, #5A6B75); }
.gc-ambq__stats li strong { font-family: var(--gc-font-heading, "Manrope", sans-serif); color: var(--gc-heading-color, #14212B); font-variant-numeric: tabular-nums; }
.gc-ambq__cta-text { margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: var(--gc-muted, #5A6B75); }
.gc-ambq__btn { display: block; text-align: center; padding: 10px 12px; border-radius: 10px; font-family: var(--gc-font-heading, "Manrope", sans-serif); font-weight: 700; font-size: 13.5px; text-decoration: none; color: #fff; background: linear-gradient(135deg, var(--gc-blue, #5BA7DB), var(--gc-glider-end, #6EC1E4)); }
@media (prefers-reduced-motion: reduce) { .gc-ambq__panel { transition: none; } }
@media (max-width: 960px) {
	.header-actions { position: relative; }
	.gc-ambq { position: static; }
	.gc-ambq__panel {
		top: calc(100% + 10px);
		left: 50%;
		right: auto;
		transform: translateX(-50%);
		width: min(300px, calc(100vw - 24px));
	}
	.gc-ambq:hover .gc-ambq__panel,
	.gc-ambq:focus-within .gc-ambq__panel { transform: translateX(-50%); }
	.gc-ambq__panel::after, .gc-ambq__panel::before { display: none; }
}

.gc-account__hello {
	margin: 0 0 12px;
	font-family: var(--gc-font-heading, "Manrope", sans-serif);
	font-weight: 700;
	font-size: 15px;
	color: var(--gc-ink, #14212B);
}
.gc-account__links { display: flex; flex-direction: column; }
.gc-account__links a {
	padding: 10px 0;
	color: var(--gc-ink, #14212B);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid var(--gc-woo-border, #E1E9EE);
}
.gc-account__links a:last-child { border-bottom: 0; }
.gc-account__links a:hover { color: var(--gc-blue-dark, #3D82B3); }
.gc-account__logout { color: var(--gc-muted, #5A6B75) !important; }

/* Login form (wp_login_form output) */
#gc-account-loginform p { margin: 0 0 12px; }
#gc-account-loginform label {
	display: block;
	margin-bottom: 5px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--gc-muted, #5A6B75);
}
#gc-account-loginform input[type="text"],
#gc-account-loginform input[type="password"] {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--gc-woo-border, #E1E9EE);
	border-radius: var(--gc-radius-sm, 10px);
	font-size: 14px;
	font-family: inherit;
	color: var(--gc-ink, #14212B);
	background: var(--gc-bg, #F4F8FB);
}
#gc-account-loginform input[type="text"]:focus,
#gc-account-loginform input[type="password"]:focus {
	outline: 2px solid var(--gc-blue, #5BA7DB);
	outline-offset: 1px;
	border-color: transparent;
	background: var(--gc-white, #fff);
}
#gc-account-loginform .login-remember {
	font-size: 13px;
	font-weight: 500;
	color: var(--gc-muted, #5A6B75);
}
#gc-account-loginform .login-remember label {
	display: inline;
	margin: 0 0 0 4px;
	font-weight: 500;
}
#gc-account-loginform .login-submit { margin-bottom: 0; }
#gc-account-loginform .button-primary {
	width: 100%;
	padding: 11px 14px;
	border: 0;
	border-radius: var(--gc-radius-sm, 10px);
	background: linear-gradient(135deg, var(--gc-blue, #5BA7DB), var(--gc-glider-end, #6EC1E4));
	color: #fff;
	font-family: var(--gc-font-heading, "Manrope", sans-serif);
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
}
#gc-account-loginform .button-primary:hover { filter: brightness(1.03); }
.gc-account__meta {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--gc-woo-border, #E1E9EE);
}
.gc-account__meta a {
	font-size: 13px;
	font-weight: 600;
	color: var(--gc-blue-dark, #3D82B3);
	text-decoration: none;
}
.gc-account__meta a:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) {
	.gc-account__panel { transition: none; }
}
@media (max-width: 960px) {
	/* Centre the panel under the icon row so it stays inside the viewport
	   instead of overflowing off the account icon. Matches the width at which
	   the header collapses to the centred mobile layout. */
	.header-actions { position: relative; }
	.gc-account { position: static; }
	.gc-account__panel {
		top: calc(100% + 10px);
		left: 50%;
		right: auto;
		transform: translateX(-50%);
		width: min(300px, calc(100vw - 24px));
	}
	/* Keep it centred in the open/hover state (base reveal resets transform). */
	.gc-account--hover:hover .gc-account__panel,
	.gc-account--hover:focus-within .gc-account__panel,
	.gc-account.is-open .gc-account__panel { transform: translateX(-50%); }
	.gc-account__panel::after, .gc-account__panel::before { display: none; }
}

.menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: var(--gc-icon-size);
	height: var(--gc-icon-size);
	border: 1px solid rgba(255,255,255,0.55);
	border-radius: 50%;
	background: rgba(255,255,255, var(--gc-icon-opacity));
	backdrop-filter: blur(var(--gc-icon-blur));
	-webkit-backdrop-filter: blur(var(--gc-icon-blur));
	box-shadow: var(--gc-shadow-pill);
	cursor: pointer;
}
.menu-toggle svg { width: 18px; height: 18px; }

/* -----------------------------------------------------------------------
   Buttons
----------------------------------------------------------------------- */
.btn,
.btn-primary,
.btn-secondary,
button.button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 20px;
	border: 0;
	border-radius: var(--gc-radius-pill);
	font-family: var(--gc-font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: normal;
	cursor: pointer;
	transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
	white-space: nowrap;
}

.btn-primary,
button.button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce a.added_to_cart {
	background: var(--gc-blue);
	color: var(--gc-white);
	box-shadow: var(--gc-shadow-button);
}
.btn-primary:hover,
button.button:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce #respond input#submit:hover {
	background: var(--gc-blue-dark);
	color: var(--gc-white);
	box-shadow: 0px 8px 24px 0px rgba(91, 167, 219, 0.5);
}
.btn-primary:focus-visible,
button.button:focus-visible {
	outline: 2px solid var(--gc-blue);
	outline-offset: 3px;
}

.btn-secondary,
.woocommerce a.button.alt,
.woocommerce #respond input#submit.alt {
	background: var(--gc-blue-light);
	color: var(--gc-blue-dark);
}
.btn-secondary:hover {
	background: var(--gc-blue-lighter);
	color: var(--gc-blue-dark);
}

.btn-cta {
	/* Match the navbar pill (glider) blue so the CTA reads as part of the nav. */
	background: linear-gradient(135deg, var(--gc-glider-start, #5BA7DB), var(--gc-glider-end, #6EC1E4));
	color: var(--gc-white);
	box-shadow: var(--gc-shadow-button);
	padding: var(--gc-cta-pad-y, 10px) var(--gc-cta-pad-x, 20px);
	font-size: var(--gc-cta-size, 14px);
}
.btn-cta:hover {
	background: linear-gradient(135deg, var(--gc-glider-start, #5BA7DB), var(--gc-glider-end, #6EC1E4));
	filter: brightness(1.04);
	color: var(--gc-white);
	transform: translateY(-1px);
	box-shadow: 0px 8px 24px 0px rgba(91, 167, 219, 0.5);
}

/* -----------------------------------------------------------------------
   Badges
----------------------------------------------------------------------- */
.badge {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	border-radius: var(--gc-radius-pill);
	font-size: 12px;
	font-weight: 700;
	background: var(--gc-blue-light);
	color: var(--gc-blue-dark);
}
.badge-accent { background: var(--gc-blue); color: var(--gc-white); }
.badge-warm { background: var(--gc-warm-bg); color: var(--gc-warm-text); }
.badge-sold-out { background: var(--gc-muted); color: var(--gc-white); }

/* -----------------------------------------------------------------------
   Form fields
----------------------------------------------------------------------- */
.form-field,
p.form-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 16px;
}

label,
.form-field label {
	font-size: 13px;
	font-weight: 600;
	color: var(--gc-ink);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
select,
textarea,
.select2-container .select2-selection--single {
	width: 100%;
	padding: 12px;
	border: 1px solid transparent;
	border-radius: var(--gc-radius-sm);
	background: var(--gc-bg);
	color: var(--gc-ink);
	transition: border-color 0.15s ease;
}
input:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: var(--gc-blue);
	background: var(--gc-bg);
}

/* -----------------------------------------------------------------------
   Site footer
----------------------------------------------------------------------- */
.site-footer {
	position: relative;
	overflow: hidden;
	padding: 36px 64px 24px;
	background: var(--gc-footer-bg);
	color: var(--gc-footer-text);
}
.site-footer::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 55% 65% at 82% 0%, rgba(91,167,219,0.12) 0%, rgba(91,167,219,0) 100%);
	pointer-events: none;
}

.footer-inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 24px; }

.footer-top {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 24px 40px;
}

.footer-brand { display: flex; flex-direction: column; gap: 12px; max-width: 320px; }
.footer-brand-row { display: flex; align-items: center; gap: 10px; }
.footer-brand .logo-mark { background: var(--gc-blue); }
.footer-brand-row .custom-logo-link { display: flex; }
.footer-brand-row .custom-logo-link img {
	width: var(--gc-footer-logo-size);
	height: var(--gc-footer-logo-size);
	object-fit: contain;
}
/* Separate footer logo (often a wordmark) scales by height, keeps aspect. */
.footer-brand-row .custom-logo-link img.footer-custom-logo {
	width: auto;
	max-width: 260px;
	height: var(--gc-footer-logo-size);
}
.footer-brand .site-title { color: var(--gc-white); font-size: 18px; }
.footer-tagline { font-size: 14px; line-height: 1.5; color: var(--gc-footer-text); margin: 0; }

.footer-column { display: flex; flex-direction: column; gap: 10px; min-width: 160px; }
.footer-column h4 {
	margin: 0;
	font-family: var(--gc-font-heading);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.5px;
	color: var(--gc-white);
}
/* Tight rows: the Pages column mirrors the whole primary nav, so a roomy gap
   made the footer taller than the content warranted. */
.footer-column ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.footer-column a { display: block; font-size: 13px; line-height: 1.5; color: var(--gc-footer-text); }

/* The Pages list runs to the full primary nav, which alone made the footer
   twice as tall as the other columns. There is plenty of width going spare,
   so split it into two columns on desktop and let it fill sideways instead. */
@media (min-width: 961px) {
	.footer-column--pages ul {
		display: block;
		column-count: 2;
		column-gap: 48px;
	}
	.footer-column--pages ul li { break-inside: avoid; margin-bottom: 4px; }
	.footer-column--pages { min-width: 260px; }
}
.footer-column a:hover { color: var(--gc-white); }

.footer-divider { height: 1px; background: var(--gc-footer-divider); border: 0; margin: 0; }

.footer-bottom {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 16px;
}

.footer-copyright { font-size: 12px; color: var(--gc-footer-text-dim); margin: 0; }

.footer-legal { display: flex; gap: 24px; list-style: none; margin: 0; padding: 0; }
.footer-legal a { font-size: 12px; color: var(--gc-footer-text-dim); }
.footer-legal a:hover { color: var(--gc-white); }

.footer-bottom-right { display: flex; align-items: center; gap: 24px; grid-column: 3; justify-self: end; }

.footer-social { display: flex; align-items: center; gap: 12px; justify-self: center; }
.footer-social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	color: var(--gc-footer-text-dim);
	transition: color 0.2s ease, background 0.2s ease;
}
.footer-social-link:hover { color: var(--gc-white); background: rgba(255,255,255,0.1); }
.footer-social-link svg { width: 18px; height: 18px; flex-shrink: 0; }

.back-to-top {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--gc-accent);
	color: var(--gc-white);
	flex-shrink: 0;
}
.back-to-top svg { width: 16px; height: 16px; }
.back-to-top:hover { color: var(--gc-white); opacity: 0.9; }

/* -----------------------------------------------------------------------
   Responsive
----------------------------------------------------------------------- */
/* The in-menu ambassador/CTA extras only ever show inside the opened mobile
   menu; hidden everywhere else (including the desktop nav). */
.gc-mnav-extras { display: none; }

/* Compact desktop header: applied by JS (gc-header-compact) ONLY when the logo +
   centred nav + action buttons no longer fit on one row and would overlap. When
   there is room the header stays in its normal single-row grid layout. Hides the
   logo to free space, keeps the nav on the top row beside the icons, and stacks
   the "Join the movement" CTA on a second line beneath the icons (matched to the
   icon-row width). Guarded to desktop widths; the mobile layout owns <=960. */
@media (min-width: 961px) {
	/* Middle tier: the content fits on one row but the centred grid (symmetric
	   side columns) does not. Switch to a space-between flex row so the logo
	   stays and everything sits on one line, using the space efficiently. */
	.site-header.gc-header-fit {
		display: flex;
		align-items: center;
		justify-content: space-between;
		column-gap: 12px;
		padding-top: max(12px, var(--gc-header-pad-y));
		padding-bottom: 12px;
	}
	.site-header.gc-header-fit .primary-navigation { flex: 0 1 auto; min-width: 0; justify-content: center; }
	.site-header.gc-header-fit .nav-pill { flex-wrap: nowrap; }

	.site-header.gc-header-compact {
		display: flex;
		align-items: center;
		gap: 16px;
		padding-left: clamp(20px, var(--gc-header-pad-x), 40px);
		padding-right: clamp(20px, var(--gc-header-pad-x), 40px);
		/* Enough top room that the round icon buttons are not clipped by the
		   header's top edge, regardless of the configured header padding. */
		padding-top: max(12px, var(--gc-header-pad-y));
		padding-bottom: 12px;
	}
	.site-header.gc-header-compact .site-branding { display: none; }
	.site-header.gc-header-compact .primary-navigation {
		flex: 1 1 auto;
		min-width: 0;
		justify-content: center;
	}
	.site-header.gc-header-compact .nav-pill { flex-wrap: nowrap; }
	.site-header.gc-header-compact .header-actions {
		flex: 0 0 auto;
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
		width: max-content;
	}
	.site-header.gc-header-compact .header-icons { flex-wrap: nowrap; justify-content: space-between; padding-top: 2px; }
	.site-header.gc-header-compact .header-actions .btn-cta { text-align: center; padding-top: 7px; padding-bottom: 7px; }

	/* Centred layout tiers. The branding block is already hidden here, so the
	   compact tier reclaims its space by dropping the in-pill logo instead,
	   and the CTA stays on the left rather than stacking under the icons. */
	.site-header.gc-header-centre.gc-header-fit .gc-hcta,
	.site-header.gc-header-centre.gc-header-compact .gc-hcta { flex: 0 0 auto; }
	.site-header.gc-header-centre.gc-header-compact .gc-navsplit__logo { display: none; }
	/* No logo to balance here, and the tier exists because room is tight, so
	   the halves go back to their natural widths. */
	.site-header.gc-header-centre.gc-header-compact .gc-navsplit {
		display: flex;
	}
	.site-header.gc-header-centre.gc-header-compact .header-actions {
		flex-direction: row;
		align-items: center;
		width: auto;
	}
}

@media (max-width: 960px) {
	/* Desktop uses a 1fr auto 1fr grid to centre the nav; on mobile the header
	   stacks: the logo centred on top, then a centred row of the action icons
	   (account, basket, ambassador, menu) beneath it. */
	.site-header {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10px;
		padding: var(--gc-m-bar-pad, 10px) 16px;
	}
	.site-branding {
		order: 1;
		margin: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
	.header-actions {
		order: 2;
		position: relative;
		justify-content: center;
		flex-wrap: wrap;
		gap: 10px;
	}
	.menu-toggle { display: flex; }

	/* Compact icon buttons, sized from the Customizer. */
	.header-actions .icon-pill,
	.menu-toggle {
		width: var(--gc-m-btn, 40px);
		height: var(--gc-m-btn, 40px);
	}
	.header-actions .icon-pill svg,
	.menu-toggle svg { width: 20px; height: 20px; }

	/* Logo modes (Gencore > Header > Mobile header). */
	.gc-m-logo-none .site-branding { display: none; }
	.gc-m-logo-mark .site-title { display: none; }
	.gc-m-logo-mark .site-branding .custom-logo,
	.gc-m-logo-mark .site-branding img,
	.gc-m-logo-mark .logo-mark { max-height: 30px; width: auto; }
	.gc-m-logo-full .site-branding .custom-logo,
	.gc-m-logo-full .site-branding img { max-height: 34px; width: auto; }
	.gc-m-logo-full .site-title { font-size: 15px; line-height: 1.1; }

	/* Ambassador icon and CTA drop out of the bar and into the opened menu. */
	.gc-m-amb-menu .header-actions .gc-amb-pill { display: none; }
	.gc-m-cta-menu .header-actions .btn-cta { display: none; }

	/* Centred layout on mobile: the bar goes back to logo + icon row, the
	   split pill flattens into the usual vertical dropdown list (logo out,
	   it is already in the bar), and the left CTA becomes a full-width row
	   under the icons. */
	.gc-navsplit {
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
		width: 100%;
		padding: 0;
		background: transparent;
		border: 0;
		box-shadow: none;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
	.gc-navsplit__logo { display: none; }
	.gc-hcta {
		order: 3;
		width: 100%;
		justify-content: center;
	}
	.gc-hcta .btn-cta { text-align: center; }
	.gc-m-cta-menu .gc-hcta { display: none; }

	/* The open menu drops as an absolute overlay UNDER the bar, so it does not
	   inflate the header box (which would stretch the header's white fade tint
	   into a large field over the page). */
	.primary-navigation {
		display: none;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 12px;
	}
	.primary-navigation.is-open,
	#primary-menu.is-open {
		display: flex;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 40;
		padding: 12px 16px 16px;
		background: var(--gc-white, #fff);
		border-radius: 0 0 var(--gc-radius-md, 16px) var(--gc-radius-md, 16px);
		box-shadow: 0 24px 40px -20px rgba(20, 33, 43, 0.35);
		max-height: calc(100vh - 72px);
		overflow-y: auto;
	}
	/* Stack the menu as a full-width vertical list; the overlay above provides
	   the card background, so the pill itself goes flat/transparent. */
	.nav-pill,
	.gencore-fallback-menu {
		flex-direction: column;
		align-items: stretch;
		flex-wrap: nowrap;
		gap: 2px;
		width: 100%;
		padding: 0;
		background: transparent;
		border: 0;
		box-shadow: none;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
	.nav-pill li,
	.gencore-fallback-menu li { width: 100%; }
	.nav-pill li a,
	.gencore-fallback-menu li a {
		width: 100%;
		text-align: left;
		border-radius: var(--gc-radius-sm, 10px);
	}

	/* Sub-menus collapse inline; tapping the parent expands them (JS toggles
	   .is-expanded). The caret stays as an open/close indicator. */
	.nav-pill li.menu-item-has-children > a {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.nav-pill li.menu-item-has-children > a::after { margin-left: auto; }
	.nav-pill li.menu-item-has-children.is-expanded > a::after {
		transform: translateY(0) rotate(225deg);
	}
	.nav-pill .sub-menu {
		position: static;
		width: 100%;
		display: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: none;
		background: transparent;
		border: 0;
		box-shadow: none;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		padding: 2px 0 2px 12px;
		gap: 2px;
	}
	.nav-pill li.menu-item-has-children.is-expanded > .sub-menu { display: flex; }
	.nav-pill .sub-menu::before { display: none; }
	.nav-pill .sub-menu li a { width: 100%; }

	/* Glider tracking is desktop-only; use the flat active state on mobile. */
	.nav-glider { display: none; }
	.nav-pill.js-glider li.current-menu-item > a,
	.nav-pill.js-glider li.current-menu-ancestor > a { background: rgba(91, 167, 219, 0.6); }
	.nav-pill.js-glider > li > a:hover { background: rgba(91, 167, 219, 0.6); transform: none; }

	/* In-menu extras shown when the menu is open. */
	.primary-navigation .gc-mnav-extras {
		display: flex;
		flex-direction: column;
		gap: 10px;
		padding-top: 4px;
	}
	.gc-mnav-amb {
		font-family: var(--gc-font-heading, "Manrope", sans-serif);
		font-weight: 600;
		font-size: 15px;
		color: var(--gc-ink, #14212B);
		text-decoration: none;
	}
	.gc-mnav-cta { text-align: center; }

	.site-footer { padding: 48px 24px 32px; }
}

@media (prefers-reduced-motion: reduce) {
	.nav-glider { transition: opacity 0.2s ease; }
	.nav-pill > li > a:hover { transform: none; }
}

@media (max-width: 640px) {
	.site-footer { padding: 36px 20px 24px; }
	.footer-top { gap: 24px 16px; }
	.footer-brand { flex-basis: 100%; max-width: none; gap: 8px; }
	.footer-column { flex: 1 1 132px; min-width: 132px; gap: 8px; }
	.footer-column h4 { margin-bottom: 2px; }
	.footer-column ul { gap: 2px; }
	.footer-column a { font-size: 12.5px; }
	.footer-column--pages { flex-basis: 100%; }
	.footer-column--pages ul { display: block; column-count: 2; column-gap: 16px; }
	.footer-column--pages ul li { break-inside: avoid; }
	.footer-bottom { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
	.footer-bottom-right { grid-column: unset; justify-self: unset; gap: 16px; }
	.footer-social { justify-self: unset; }
	#gc-account-loginform input[type="text"],
	#gc-account-loginform input[type="password"] { font-size: 16px; }
}