/* ==========================================================================
   Vital Glow Labs — child theme styles
   ========================================================================== */

:root {
	--vgl-navy: #000B60;
	--vgl-blue: #0048FF;
	--vgl-purple: #6D35BB;

	/* categorical spectrum — HSL siblings, brand axis (purple -> cyan).
	   See 02-VitlWeb-Claude/vgl-color-palette.md for usage rules. */
	--vgl-s1: #7631DD;  --vgl-ink1: #3D127C;
	--vgl-s2: #4C31DD;  --vgl-ink2: #23127C;
	--vgl-s3: #313FDD;  --vgl-ink3: #121B7C;
	--vgl-s4: #3168DD;  --vgl-ink4: #12347C;
	--vgl-s5: #3192DD;  --vgl-ink5: #124E7C;
	--vgl-s6: #31BBDD;  --vgl-ink6: #12677C;
}

/* --------------------------------------------------------------------------
   Header legibility — solid bar ONLY where there is no hero behind it
   The Elementor header (id 88) is transparent and floats over the hero on the
   front page and on every inner page built in Elementor with a hero section
   (About / Blog / Contact each carry a background image up under the menu).
   The only views with no hero are the WooCommerce default templates (shop,
   product category, single product, cart, checkout, account), the not-yet-
   built PRODUCTS page (id 25), search and 404. Give the header a solid brand
   background there so the white menu stays legible; leave it transparent
   everywhere else so the hero images are not clipped by a navy bar.
   -------------------------------------------------------------------------- */
body.woocommerce .elementor-location-header,
body.woocommerce-page .elementor-location-header,
body.page-id-25 .elementor-location-header,
body.error404 .elementor-location-header,
body.search .elementor-location-header {
	background-color: var(--vgl-navy);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 30px rgba(0, 11, 96, 0.18);
	position: relative;
	z-index: 100;
}

/* Same no-hero views: neutralise any negative pull-up so content never slides
   behind the now-solid bar. */
body.woocommerce [data-elementor-type="wp-page"],
body.woocommerce-page [data-elementor-type="wp-page"],
body.woocommerce .elementor-location-single,
body.woocommerce-page .elementor-location-single,
body.page-id-25 [data-elementor-type="wp-page"] {
	margin-top: 0 !important;
}

/* WooCommerce archive/single default template: add breathing room under the
   solid header and keep the pale default background off-white, not baby-blue. */
body.woocommerce main,
body.woocommerce-page main {
	padding-top: 32px;
}
/* single product: tighter gap under the header, tighter breadcrumb */
body.single-product main.site-main { padding-top: 14px; }
body.single-product .woocommerce-breadcrumb {
	margin-bottom: 6px;
	font-size: 0.82rem;
}

/* Inner hero pages — the transparent header floats over the hero image with a
   short soft navy scrim for menu legibility. Menu items sit in header
   containers at z-index 900. Front page and no-hero views are excluded.
   Two mechanisms:
   - About (19) / Contact (23): built with padding-top:145 on the hero and no
     negative margin → the header is ABSOLUTE (zero layout height) so the hero
     bleeds to y=0 and the 145px padding clears the menu.
   - Blog (21): built with margin-top:-135 on the hero → keep the header
     in-flow (relative) so that pull-up lands correctly. */
/* Blog (21) keeps its in-flow header + -135px hero pull-up. */
body:not(.home):not(.woocommerce):not(.woocommerce-page):not(.page-id-25):not(.page-id-19):not(.page-id-23):not(.error404):not(.search) .elementor-location-header {
	position: relative;
	z-index: 100;
}
body:not(.home):not(.woocommerce):not(.woocommerce-page):not(.page-id-25):not(.error404):not(.search) .elementor-location-header::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 130px;
	background: linear-gradient(180deg, rgba(0, 11, 96, 0.5) 0%, rgba(0, 11, 96, 0.22) 55%, rgba(0, 11, 96, 0) 100%);
	pointer-events: none;
	z-index: 0;
}
/* About + Contact: absolute header (zero layout height) so the hero fills to
   y=0, plus explicit headroom so the heading clears the ~80px menu. */
body.page-id-19 .elementor-location-header,
body.page-id-23 .elementor-location-header {
	position: absolute !important;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
}
body.page-id-19 [data-elementor-type="wp-page"] > .e-con:first-child,
body.page-id-23 [data-elementor-type="wp-page"] > .e-con:first-child,
body.page-id-19 [data-elementor-type="wp-page"] > .elementor-section:first-child,
body.page-id-23 [data-elementor-type="wp-page"] > .elementor-section:first-child {
	margin-top: 0 !important;
	padding-top: clamp(110px, 12vw, 170px) !important;
}
@media (max-width: 767px) {
	body.page-id-19 [data-elementor-type="wp-page"] > .e-con:first-child,
	body.page-id-23 [data-elementor-type="wp-page"] > .e-con:first-child,
	body.page-id-19 [data-elementor-type="wp-page"] > .elementor-section:first-child,
	body.page-id-23 [data-elementor-type="wp-page"] > .elementor-section:first-child {
		padding-top: 160px !important;
	}
}

/* About hero was only 320px tall — with the ~150px absolute header over it
   the banner was cropped to a sliver. Give it real height and favour the
   upper part of the image. */
body.page-id-19 .elementor-element-bd304f6 {
	min-height: clamp(380px, 46vh, 540px) !important;
	background-position: center 24% !important;
}
body.page-id-19 .elementor-element-bd304f6 > .e-con-inner,
body.page-id-19 .elementor-element-bd304f6 > .elementor-element {
	justify-content: flex-end;
}

/* About body copy — left-align (justified text in this narrow column left
   rivers of whitespace and heavy word-breaks). */
body.page-id-19 .elementor-element-d5dcc8d .elementor-widget-text-editor,
body.page-id-19 .elementor-element-d5dcc8d .elementor-widget-text-editor p,
body.page-id-19 .elementor-element-d5dcc8d .elementor-widget-text-editor li {
	text-align: left;
	hyphens: none;
}

/* About page — the "Evidence First / Two Connected Worlds / Nothing Hidden"
   cards: give them the same lift + icon response the rest of the site's
   cards have. */
.elementor-element-608102a,
.elementor-element-dd3d5ed,
.elementor-element-01482e9 {
	border-radius: 14px;
	transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.elementor-element-608102a .elementor-icon,
.elementor-element-dd3d5ed .elementor-icon,
.elementor-element-01482e9 .elementor-icon {
	transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.elementor-element-608102a .elementor-icon-box-title,
.elementor-element-dd3d5ed .elementor-icon-box-title,
.elementor-element-01482e9 .elementor-icon-box-title { transition: color 0.3s ease; }

.elementor-element-608102a:hover .elementor-icon,
.elementor-element-dd3d5ed:hover .elementor-icon,
.elementor-element-01482e9:hover .elementor-icon {
	background-color: var(--vgl-purple);
	border-color: var(--vgl-purple);
	color: #fff;
}
.elementor-element-608102a:hover .elementor-icon svg,
.elementor-element-dd3d5ed:hover .elementor-icon svg,
.elementor-element-01482e9:hover .elementor-icon svg { fill: #fff; }
.elementor-element-608102a:hover .elementor-icon-box-title,
.elementor-element-dd3d5ed:hover .elementor-icon-box-title,
.elementor-element-01482e9:hover .elementor-icon-box-title { color: var(--vgl-purple); }

@media (prefers-reduced-motion: no-preference) {
	.elementor-element-608102a:hover,
	.elementor-element-dd3d5ed:hover,
	.elementor-element-01482e9:hover {
		transform: translateY(-6px);
		box-shadow: 0 22px 46px -22px rgba(0, 11, 96, 0.32);
	}
	.elementor-element-608102a:hover .elementor-icon,
	.elementor-element-dd3d5ed:hover .elementor-icon,
	.elementor-element-01482e9:hover .elementor-icon { transform: translateY(-3px) scale(1.06); }
}

/* --------------------------------------------------------------------------
   Mobile header — the search field was overlapping the logo/menu row
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.elementor-location-header .elementor-widget-search-form {
		position: static !important;
		width: 100% !important;
		margin-top: 8px;
	}
	.elementor-location-header .elementor-nav-menu--dropdown {
		z-index: 999;
	}
}

/* --------------------------------------------------------------------------
   Product single — professional "Product details" table + disclaimer
   (output by inc/display.php)
   -------------------------------------------------------------------------- */
.vgl-proddetails {
	margin: 24px 0;
	border: 1px solid var(--vgl-purple, #6D35BB);
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
}
.vgl-proddetails table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
}
.vgl-proddetails th,
.vgl-proddetails td {
	text-align: left;
	padding: 12px 16px;
	border-bottom: 1px solid #eef1f9;
	font-size: 0.95rem;
	vertical-align: top;
}
.vgl-proddetails tr:last-child th,
.vgl-proddetails tr:last-child td {
	border-bottom: 0;
}
.vgl-proddetails th {
	width: 38%;
	color: var(--vgl-navy);
	font-weight: 600;
	background: #f6f8ff;
}
.vgl-proddetails caption {
	caption-side: top;
	text-align: left;
	font-weight: 700;
	color: #fff;
	padding: 12px 16px;
	background: var(--vgl-navy, #000B60);
	font-size: 0.92rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.vgl-proddisclaimer {
	margin: 20px 0 8px;
	padding: 14px 16px;
	border-left: 3px solid var(--vgl-purple);
	background: #f7f5fc;
	border-radius: 0 8px 8px 0;
	font-size: 0.85rem;
	line-height: 1.6;
	color: #4a4a5a;
}

/* Home aesthetics loop / product cards: ensure placeholder images don't look broken */
.woocommerce ul.products li.product a img,
.jet-woo-builder .jet-woo-product-thumbnail img {
	background: #f4f6fc;
}

/* --------------------------------------------------------------------------
   Shop category navigation
   -------------------------------------------------------------------------- */
.vgl-catnav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 28px;
	padding: 0 0 20px;
	border-bottom: 1px solid #e4e8f5;
}
.vgl-catnav__pill {
	display: inline-block;
	padding: 7px 15px;
	border-radius: 999px;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: none;
	color: var(--vgl-navy);
	background: #eef2ff;
	border: 1px solid transparent;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.vgl-catnav__pill:hover {
	background: #dfe6ff;
	color: var(--vgl-navy);
}
.vgl-catnav__pill.is-active {
	background: var(--vgl-navy);
	color: #fff;
}
.vgl-catnav__pill.is-child {
	background: transparent;
	border-color: #cdd6f5;
	font-weight: 500;
}
.vgl-catnav__pill.is-child.is-active {
	background: var(--vgl-blue);
	border-color: var(--vgl-blue);
	color: #fff;
}

/* Enquiry button on single product */
.vgl-enquire { margin: 18px 0 4px; }
.vgl-enquire .button,
.woocommerce .vgl-enquire a.button {
	background: var(--vgl-navy);
	color: #fff;
	border-radius: 8px;
	padding: 12px 22px;
	font-weight: 600;
}
.vgl-enquire .button:hover { background: var(--vgl-purple); }

/* WooCommerce placeholder image — soften it while real photos are pending */
.woocommerce ul.products li.product img[src*="woocommerce-placeholder"],
.woocommerce div.product img[src*="woocommerce-placeholder"] {
	opacity: 0.35;
	padding: 12%;
}

/* --------------------------------------------------------------------------
   Product card — template 486 (.vgl-pcard) used by the two home loop grids.
   Targets Elementor widget types inside .vgl-pcard (the widget-level
   "CSS Classes" don't survive on every widget type).
   -------------------------------------------------------------------------- */
.vgl-pcard {
	background: #fff;
	border: 1px solid #e4e8f5;
	border-radius: 12px;
	overflow: hidden;
	height: 100%;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.vgl-pcard:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(0, 11, 96, 0.12);
}
.vgl-pcard .elementor-widget-theme-post-featured-image img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: #f4f6fc;
	padding: 10%;
	display: block;
}
/* hide the featured-image widget when the product has no photo */
.vgl-pcard .elementor-widget-theme-post-featured-image:not(:has(img)) { display: none; }

.vgl-pcard .vgl-pcard__body { padding: 16px; gap: 5px; }

.vgl-pcard .elementor-widget-divider { display: none; }

.vgl-pcard__cat {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--vgl-blue);
	text-decoration: none;
}
.vgl-pcard__cat:hover { text-decoration: underline; }

.vgl-pcard .elementor-widget-woocommerce-product-title,
.vgl-pcard .elementor-widget-woocommerce-product-title h1,
.vgl-pcard .elementor-widget-woocommerce-product-title h2,
.vgl-pcard .elementor-widget-woocommerce-product-title a {
	color: var(--vgl-navy) !important;
	font-weight: 700 !important;
	font-size: 1.02rem !important;
	line-height: 1.3 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	text-decoration: none;
}
.vgl-pcard .elementor-widget-woocommerce-product-title { margin: 2px 0 !important; }

.vgl-pcard__brand {
	display: block;
	font-size: 0.8rem;
	color: #7a7a7a;
}

.vgl-pcard .elementor-widget-button { margin-top: auto; padding-top: 8px; }
.vgl-pcard .elementor-widget-button .elementor-button {
	width: 100%;
	background-color: var(--vgl-navy) !important;
	color: #fff !important;
	border-radius: 8px !important;
	font-weight: 600;
	font-size: 0.82rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.vgl-pcard .elementor-widget-button .elementor-button:hover { background-color: var(--vgl-purple) !important; }

/* Mobile: collapse the archive filter sidebar into a toggle */
.vgl-filter-toggle { display: none; }
@media (max-width: 1024px) {
	#vgl-products-archive .vgl-filter-body { display: none; }
	#vgl-products-archive .vgl-filter-body.is-open { display: block; }
	#vgl-products-archive .vgl-filter-toggle { display: inline-flex !important; }
}

/* --------------------------------------------------------------------------
   /products/ archive — WooCommerce shop loop styled as branded cards
   -------------------------------------------------------------------------- */
#vgl-products-archive ul.products {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin: 0;
}
#vgl-products-archive ul.products::before,
#vgl-products-archive ul.products::after { content: none; }
@media (max-width: 1024px) {
	#vgl-products-archive ul.products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	#vgl-products-archive ul.products { grid-template-columns: 1fr; }
}
#vgl-products-archive ul.products { grid-auto-rows: 1fr; } /* every card the same height */
#vgl-products-archive ul.products li.product {
	width: auto !important;
	height: 100%;
	margin: 0 !important;
	float: none !important;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #e4e8f5;
	border-radius: 12px;
	overflow: hidden;
	padding: 0 0 14px;
	box-shadow: 0 3px 10px -5px rgba(0, 11, 96, 0.16);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
#vgl-products-archive ul.products li.product:hover {
	transform: translateY(-3px);
	box-shadow: 0 9px 18px -8px rgba(0, 11, 96, 0.3);
}
#vgl-products-archive li.product a img {
	margin: 0 0 10px;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: #f4f6fc;
	padding: 8%;
}
#vgl-products-archive li.product .vgl-pcard__cat {
	display: block;
	padding: 0 16px;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--vgl-blue);
	text-decoration: none;
}
#vgl-products-archive li.product .woocommerce-loop-product__title {
	padding: 4px 16px 0;
	font-size: 1rem;
	font-weight: 600;
	color: var(--vgl-navy);
	line-height: 1.3;
}
#vgl-products-archive li.product .vgl-pcard__brand {
	padding: 2px 16px 0;
	font-size: 0.8rem;
	color: #7a7a7a;
}
#vgl-products-archive li.product .price { display: none; }
#vgl-products-archive li.product .button,
#vgl-products-archive li.product a.vgl-view-details {
	margin: 12px 16px 0;
	margin-top: auto;   /* pin to the bottom so every card's button lines up */
	padding: 3px 14px;  /* ~half the previous height (36px -> ~21px) */
	background: var(--vgl-navy);
	color: #fff;
	border-radius: 6px;
	text-align: center;
	font-size: 0.75rem;
	line-height: 1.35;
	font-weight: 600;
}
#vgl-products-archive li.product .button:hover { background: var(--vgl-purple); }

/* --- shorter controls: card buttons + the sort dropdown, ~50% less tall --- */
/* native <select> fallback (JS replaces it with .vgl-sort below) */
#vgl-products-archive .woocommerce-ordering select,
.woocommerce-page .woocommerce-ordering select {
	padding: 2px 30px 2px 10px;
	min-height: 0;
	height: auto;
	font-size: 0.76rem;
	line-height: 1.35;
	border: 1px solid var(--vgl-purple, #6D35BB);
	border-radius: 6px;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236D35BB' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 8px center;
	background-size: 13px;
}
#vgl-products-archive .woocommerce-ordering select:focus,
.woocommerce-page .woocommerce-ordering select:focus {
	outline: none;
	box-shadow: none;
	border-color: #9C6FE6;
}

/* custom compact sort dropdown */
.vgl-sort { position: relative; display: inline-block; font-size: 0.78rem; }
.vgl-sort__btn {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 24px;
	padding: 0 10px;
	border: 1px solid var(--vgl-purple, #6D35BB);
	border-radius: 6px;
	background: #fff;
	color: var(--vgl-navy, #000B60);
	font: inherit;
	line-height: 1;
	cursor: pointer;
	transition: border-color 0.15s ease;
}
.vgl-sort__btn:hover { border-color: #9C6FE6; }
.vgl-sort__btn svg { width: 12px; height: 12px; color: var(--vgl-purple, #6D35BB); flex: none; }
.vgl-sort__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.vgl-sort__list {
	position: absolute;
	z-index: 200;
	right: 0;
	top: calc(100% + 4px);
	min-width: 100%;
	margin: 0;
	padding: 4px;
	list-style: none;
	background: #fff;
	border: 1px solid rgba(0, 11, 96, 0.12);
	border-radius: 8px;
	box-shadow: 0 14px 30px -14px rgba(0, 11, 96, 0.4);
}
.vgl-sort__list li { list-style: none; }
.vgl-sort__opt {
	display: block;
	padding: 3px 10px;
	border-radius: 5px;
	white-space: nowrap;
	line-height: 1.4;
	cursor: pointer;
	text-decoration: none;
	color: var(--vgl-navy, #000B60);
}
.vgl-sort__list li[aria-selected="true"] .vgl-sort__opt,
.vgl-sort__opt:hover,
.vgl-sort__opt[aria-selected="true"] { background: rgba(109, 53, 187, 0.10); }
/* mobile "Filters" toggle */
.elementor-element-vglftgl a {
	padding-top: 6px !important;
	padding-bottom: 6px !important;
	font-size: 0.8rem !important;
	line-height: 1.3 !important;
}

/* --- pagination: branded chips --- */
.woocommerce nav.woocommerce-pagination {
	margin: 34px 0 8px;
	text-align: center;
}
.woocommerce nav.woocommerce-pagination ul {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	padding: 0;
	border: 0;
}
.woocommerce nav.woocommerce-pagination ul li {
	margin: 0;
	border: 0;
	overflow: visible;
}
.woocommerce nav.woocommerce-pagination ul li .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	padding: 0 8px;
	border: 1px solid rgba(0, 11, 96, 0.14);
	border-radius: 9px;
	background: #fff;
	color: var(--vgl-navy, #000B60);
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.woocommerce nav.woocommerce-pagination ul li a.page-numbers:hover {
	border-color: var(--vgl-purple, #6D35BB);
	background: rgba(109, 53, 187, 0.08);
	color: var(--vgl-purple, #6D35BB);
}
.woocommerce nav.woocommerce-pagination ul li span.page-numbers.current {
	background: linear-gradient(160deg, var(--vgl-purple, #6D35BB), var(--vgl-navy, #000B60));
	border-color: transparent;
	color: #fff;
	box-shadow: 0 6px 16px -8px rgba(109, 53, 187, 0.6);
}
/* prev / next -> chevron icon chips */
.woocommerce nav.woocommerce-pagination ul li .page-numbers.prev,
.woocommerce nav.woocommerce-pagination ul li .page-numbers.next {
	min-width: 34px;
	padding: 0;
	font-size: 0;
	color: var(--vgl-purple, #6D35BB);
}
.woocommerce nav.woocommerce-pagination ul li .page-numbers.prev::after,
.woocommerce nav.woocommerce-pagination ul li .page-numbers.next::after {
	content: "";
	width: 15px;
	height: 15px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.woocommerce nav.woocommerce-pagination ul li .page-numbers.prev::after { transform: rotate(180deg); }
.woocommerce nav.woocommerce-pagination ul li .page-numbers.prev:hover,
.woocommerce nav.woocommerce-pagination ul li .page-numbers.next:hover { color: #fff; background: var(--vgl-purple, #6D35BB); border-color: var(--vgl-purple, #6D35BB); }
.woocommerce nav.woocommerce-pagination ul li .page-numbers.dots {
	border-color: transparent;
	background: none;
}

/* --------------------------------------------------------------------------
   Products archive — reclaim the dead gap between the filter rail and the
   grid so the 3 cards are wide enough for one-line titles, and tidy the
   filter sidebar (drop the repeated "Filter" wording, add group labels).
   -------------------------------------------------------------------------- */
/* keep the archive at the standard 1200px, centred; 25% filters / 75% grid */
#vgl-products-archive > .e-con-inner {
	max-width: 1200px;
	width: 100%;
	margin-inline: auto;
	gap: 0;
	align-items: flex-start;
}
#vgl-products-archive .elementor-element-9a4a61a {
	flex: 0 0 25%;
	max-width: 25%;
	width: 25% !important;
	padding-right: 26px;
}
#vgl-products-archive .elementor-element-536ad5b {
	flex: 0 0 75%;
	max-width: 75%;
	width: 75% !important;
	min-width: 0;
}
@media (max-width: 1024px) {
	#vgl-products-archive .elementor-element-9a4a61a,
	#vgl-products-archive .elementor-element-536ad5b {
		flex: 1 1 100%;
		max-width: 100%;
		width: 100% !important;
		padding-right: 0;
	}
}

/* one "Filter" label is enough: hide the heading, and the toggle is
   mobile-only */
.elementor-element-vglfhead { display: none; }
@media (min-width: 1025px) {
	.elementor-element-vglftgl { display: none; }
}

/* group labels above each checkbox filter */
.elementor-element-a1b2c33,
.elementor-element-a1b2c34,
.elementor-element-a1b2c35,
.elementor-element-a1b2c36 { position: relative; margin-top: 20px; }
.elementor-element-a1b2c33::before,
.elementor-element-a1b2c34::before,
.elementor-element-a1b2c35::before,
.elementor-element-a1b2c36::before {
	display: block;
	margin-bottom: 8px;
	padding-bottom: 6px;
	border-bottom: 1px solid rgba(0, 11, 96, 0.12);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--vgl-navy);
}
.elementor-element-a1b2c33::before { content: "Category"; }
.elementor-element-a1b2c34::before { content: "Brand"; }
.elementor-element-a1b2c35::before { content: "Form"; }
.elementor-element-a1b2c36::before { content: "Route"; }

/* "Remove filters" — quiet, and it only matters once something is active */
.elementor-element-a1b2c32 .jet-remove-all-filters__button {
	font-size: 0.75rem;
	color: var(--vgl-purple);
	background: none;
	border: 0;
	padding: 0;
	text-decoration: underline;
}

/* filter sidebar */
#vgl-products-archive .vgl-filter-title { color: var(--vgl-navy); margin: 0 0 4px; }
#vgl-products-archive .jet-smart-filters-checkboxes__label,
#vgl-products-archive .jet-filter-label { font-size: 0.9rem; }

/* --------------------------------------------------------------------------
   Single product — branded layout (inc/single-product.php)
   -------------------------------------------------------------------------- */
.vgl-phero {
	background: linear-gradient(120deg, var(--vgl-navy) 0%, #1a1f8a 55%, var(--vgl-purple) 130%);
	padding: 12px 0 11px;
	margin-bottom: 20px;
	border-radius: 12px;
	overflow: hidden;
}
.vgl-phero__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 30px;
}
.vgl-phero__eyebrow {
	display: inline-block;
	color: #cdd6ff;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.vgl-phero--research .vgl-phero__eyebrow { color: #ffd7a8; }

/* summary column */
.woocommerce div.product .product_title {
	color: var(--vgl-navy);
	font-weight: 700;
}
.vgl-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0 18px;
}
.vgl-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border-radius: 999px;
	background: #eef2ff;
	color: var(--vgl-navy);
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.3;
}
.vgl-chip__k {
	color: var(--vgl-blue);
	font-weight: 700;
	font-size: 0.68rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
/* Key Features / Benefits from the short description */
.woocommerce div.product .woocommerce-product-details__short-description h3 {
	font-size: 0.85rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--vgl-navy);
	margin: 16px 0 6px;
}
.woocommerce div.product .woocommerce-product-details__short-description ul {
	margin: 0 0 8px;
	padding-left: 1.1em;
}
.woocommerce div.product .woocommerce-product-details__short-description li {
	margin-bottom: 4px;
	font-size: 0.92rem;
}

/* tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: #f6f8ff;
	border-color: #e4e8f5;
	border-radius: 8px 8px 0 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background: #fff;
	border-bottom-color: #fff;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	color: var(--vgl-navy);
	font-weight: 600;
}
.vgl-tab-content h2,
.vgl-tab-content h3,
.woocommerce-Tabs-panel h2 {
	color: var(--vgl-navy);
	font-size: 1.15rem;
	margin: 18px 0 8px;
}
.vgl-tab-content--table table {
	width: 100%;
	border-collapse: collapse;
	margin: 8px 0;
	font-size: 0.9rem;
}
.vgl-tab-content--table th,
.vgl-tab-content--table td {
	border: 1px solid #e4e8f5;
	padding: 8px 12px;
	text-align: left;
}
.vgl-tab-content--table thead th {
	background: #f6f8ff;
	color: var(--vgl-navy);
}

/* related products — reuse the card look */
.woocommerce .related.products > h2 {
	color: var(--vgl-navy);
	margin-bottom: 18px;
}
.woocommerce .related.products ul.products li.product {
	background: #fff;
	border: 1px solid #e4e8f5;
	border-radius: 12px;
	overflow: hidden;
	padding-bottom: 14px;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.woocommerce .related.products ul.products li.product:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(0, 11, 96, 0.12);
}
.woocommerce .related.products li.product a img {
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: #f4f6fc;
	padding: 8%;
	margin-bottom: 8px;
}
.woocommerce .related.products li.product .price { display: none; }
.woocommerce .related.products li.product .vgl-pcard__cat,
.woocommerce .related.products li.product .woocommerce-loop-product__title,
.woocommerce .related.products li.product .vgl-pcard__brand { padding-inline: 14px; }
.woocommerce .related.products li.product .button {
	margin: 10px 14px 0;
	background: var(--vgl-navy);
	color: #fff;
	border-radius: 8px;
}

/* default product meta (Categories / Tags / Brand) — the chip row replaces it */
.woocommerce div.product .product_meta { display: none; }

/* --------------------------------------------------------------------------
   Home — Testimonials section: guarantee text contrast over the photo with a
   left-anchored dark scrim, and make the quote/name reliably light.
   -------------------------------------------------------------------------- */
.elementor-element-6f681a0 { position: relative; }
.elementor-element-6f681a0 > .e-con-inner,
.elementor-element-6f681a0 > .elementor-container { position: relative; z-index: 1; }
.elementor-element-6f681a0::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0, 11, 96, 0.78) 0%, rgba(0, 11, 96, 0.55) 42%, rgba(0, 11, 96, 0.12) 70%, rgba(0, 11, 96, 0) 100%);
	pointer-events: none;
	z-index: 0;
}
.elementor-element-6f681a0 .elementor-testimonial-content,
.elementor-element-6f681a0 .elementor-testimonial__text,
.elementor-element-6f681a0 .elementor-testimonial-name,
.elementor-element-6f681a0 blockquote,
.elementor-element-6f681a0 h2,
.elementor-element-6f681a0 h3 {
	color: #eef2ff !important;
}

/* --------------------------------------------------------------------------
   Fluent Forms — brand the contact form
   -------------------------------------------------------------------------- */
.fluentform .ff-el-input--label label { color: var(--vgl-navy); font-weight: 600; }
.fluentform .ff-el-form-control {
	border: 1px solid #cdd6f5;
	border-radius: 8px;
}
.fluentform .ff-el-form-control:focus {
	border-color: var(--vgl-blue);
	box-shadow: 0 0 0 3px rgba(0, 72, 255, 0.12);
}
.fluentform .ff-btn-submit,
.fluentform button.ff-btn-submit {
	background: var(--vgl-navy) !important;
	border-color: var(--vgl-navy) !important;
	border-radius: 8px;
	font-weight: 600;
	letter-spacing: 0.03em;
	padding: 12px 26px;
}
.fluentform .ff-btn-submit:hover { background: var(--vgl-purple) !important; border-color: var(--vgl-purple) !important; }

/* hello-elementor's reset paints bare <button>/<input type=submit> hover
   #cc3366 — bring it onto the brand accent everywhere (Elementor button
   widgets keep their own styling). */
button:not(.elementor-button):not(.vgl-goal-chip):hover,
button:not(.elementor-button):not(.vgl-goal-chip):focus,
input[type="button"]:hover,
input[type="submit"]:not(.ff-btn-submit):hover,
input[type="submit"]:not(.ff-btn-submit):focus {
	background-color: var(--vgl-purple);
	border-color: var(--vgl-purple);
}
#vglcformsec, .elementor-element-vglcformsec { max-width: 720px; }

@media (max-width: 767px) {
	.vgl-chips { gap: 6px; }
	.vgl-phero { padding: 10px 0 9px; }
}

/* --------------------------------------------------------------------------
   Home — "AESTHETIC & SKIN SOLUTIONS" loop grid (widget a52c7c9, 3 cols)
   The section header spans the full 1200px content width, but Elementor's
   loop grid shrink-wraps to its cards' natural width (~305px each), so with
   only 6 aesthetics products the 3-column grid sat at ~940px and left a
   ~240px gap on the right. Force the grid to fill the section and share the
   width across 3 equal columns (2 on tablet, 1 on mobile).
   -------------------------------------------------------------------------- */
.elementor-element-a52c7c9,
.elementor-element-a52c7c9 > .elementor-widget-container,
.elementor-element-a52c7c9 .elementor-loop-container {
	width: 100% !important;
}
.elementor-element-a52c7c9 .elementor-loop-container {
	grid-template-columns: repeat(3, 1fr) !important;
}
@media (max-width: 1024px) {
	.elementor-element-a52c7c9 .elementor-loop-container {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}
@media (max-width: 767px) {
	.elementor-element-a52c7c9 .elementor-loop-container {
		grid-template-columns: 1fr !important;
	}
}

/* ==========================================================================
   Blog — listing page (21) + single post template (3317)
   ========================================================================== */

/* --- 1. Link colour. The theme reset paints every <a> in post content and
   the post grid #cc3366 (magenta). Bring links onto the brand. --- */
body.page-id-21 .elementor-widget-theme-post-title a,
body.page-id-21 .elementor-post__title a,
body.single-post .elementor-widget-posts .elementor-post__title a,
body.single-post .elementor-widget-theme-post-title a {
	color: var(--vgl-navy);
	transition: color 0.2s ease;
}
body.page-id-21 .elementor-widget-theme-post-title a:hover,
body.page-id-21 .elementor-post__title a:hover,
body.single-post .elementor-widget-posts .elementor-post__title a:hover,
body.single-post .elementor-widget-theme-post-title a:hover {
	color: var(--vgl-purple);
}
/* body copy links inside an article — readable, on-brand, underlined */
body.single-post .elementor-widget-theme-post-content a {
	color: var(--vgl-purple);
	text-decoration: underline;
	text-underline-offset: 2px;
}
body.single-post .elementor-widget-theme-post-content a:hover {
	color: var(--vgl-navy);
}

/* --- 2. Blog hero: the sub-title widget ships with line-height:12px on 25px
   text, so its glyphs ride up into the "Blog" H1. Restore a sane line box
   and add a little air under the heading. --- */
body.page-id-21 .elementor-element-0cab815 {
	gap: 0.7rem !important;
}
body.page-id-21 .elementor-element-a395c20,
body.page-id-21 .elementor-element-a395c20 p {
	line-height: 1.5 !important;
}

/* --- 3. Header search toggle: a 72x72 solid-purple square. Bring it down to
   the logo / menu scale. (Header is global — this applies site-wide.) --- */
.elementor-element-a53bdea .e-search-form,
.elementor-element-a53bdea .e-search-input-wrapper,
.elementor-element-a53bdea .e-search-input {
	height: 46px !important;
}
.elementor-element-a53bdea .e-search-submit {
	width: 46px !important;
	height: 46px !important;
	padding: 0 !important;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;   /* icon was pinned to the left edge */
}
.elementor-element-a53bdea .e-search-submit svg {
	width: 18px;
	height: 18px;
	margin: 0 !important;   /* ships with margin-right:12px → icon sat left of centre */
}

/* --- 4. "Unlock Your Vitality" CTA at the foot of every article: it shipped
   with purple text (#8600FF) on a purple fill — invisible. Give it a clear
   rest / hover pair. --- */
.elementor-element-930973b .elementor-button,
.elementor-element-930973b a.elementor-button {
	background-color: var(--vgl-purple) !important;
	border-color: var(--vgl-purple) !important;
	color: #fff !important;
}
.elementor-element-930973b .elementor-button:hover,
.elementor-element-930973b a.elementor-button:hover,
.elementor-element-930973b .elementor-button:focus {
	background-color: var(--vgl-navy) !important;
	border-color: var(--vgl-navy) !important;
	color: #fff !important;
}

/* --- 5. Broken "Article Audio" block in the post sidebar: an unfinished HTML
   widget (placeholder image src="YOUR_IMAGE_URL", invalid CSS "##4F00D6",
   empty audio source). No post has audio yet — hide it until it's built. --- */
.elementor-element-f9e4ec3,
.elementor-element-fadc610 {
	display: none !important;
}

/* --- Sidebar "Related posts" list: the widget renders a 2-column grid inside
   a ~190px rail, so each card is ~67px wide and every title breaks one word
   per line. Force a single column and a normal stacked card. --- */
body.single-post .elementor-element-e8a2178 .elementor-posts-container,
body.single-post .elementor-element-e8a2178 .elementor-posts {
	display: grid !important;
	grid-template-columns: 1fr !important;
	gap: 14px !important;
}
body.single-post .elementor-element-e8a2178 .elementor-post {
	display: block !important;
}
body.single-post .elementor-element-e8a2178 .elementor-post__thumbnail {
	width: 100% !important;
	margin: 0 0 6px !important;
}
body.single-post .elementor-element-e8a2178 .elementor-post__title {
	font-size: 0.9rem;
	line-height: 1.35;
	word-break: normal;
	overflow-wrap: anywhere;
	hyphens: none;
}

/* --- B12 post callout: the "Blueprint for a Healthier Life" media-text block
   carries a stale Astra colour class that resolves to #7a7a7a — grey text on
   a saturated background. Its background is recoloured to the brand gradient
   (scripts/p9-blog-fixes.php); force the text white. This radial-gradient
   media-text pattern is unique to that one block. --- */
body.single-post .elementor-widget-theme-post-content .wp-block-media-text[style*="radial-gradient"] :where(h1,h2,h3,h4,h5,h6,p,li,strong,em,a) {
	color: #fff !important;
}

/* --- "The Biological Revolution in Weight Loss" (post 3275) is a research /
   education piece — suppress the shop CTA the single-post template appends
   after every article, and give its callout boxes readable contrast. --- */
body.postid-3275 .elementor-element-930973b {
	display: none !important;
}
body.postid-3275 .elementor-widget-theme-post-content p.has-background {
	color: var(--vgl-navy);
}

/* ==========================================================================
   Products archive (template 930)
   ========================================================================== */

/* --- Hero row: "PRODUCTS" heading left, a live product search on the right
   (scripts/p11 + p12 move it out of the filter sidebar; assets/vgl-search.js
   drives the dropdown against /wp-json/vgl/v1/search). --- */
.elementor-element-3f4c8bb {
	gap: clamp(1rem, 4vw, 3rem);
	flex-wrap: wrap;
	align-items: flex-end;
}
.elementor-element-3f4c8bb > .elementor-element-eac482d {
	flex: 1 1 auto;
	width: auto;
}
.elementor-element-3f4c8bb > .elementor-element-b5a914b {
	flex: 0 1 340px;
	width: auto;
	max-width: 340px;
	margin-left: auto;
	align-self: flex-end;
	justify-content: flex-end !important;
	padding-bottom: clamp(6px, 1vw, 14px);
}
.elementor-element-vglherosrch,
.elementor-element-vglherosrch > .elementor-widget-container { width: 100%; }

.vgl-hsearch {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	height: 34px;
	padding: 0 13px;
	/* frame matches the hero divider / brand button colour (#6D35BB) */
	border: 1.5px solid var(--vgl-purple, #6D35BB);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.04);
	color: #fff;
	transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.vgl-hsearch:focus-within {
	border-color: #9C6FE6;
	background: rgba(255, 255, 255, 0.08);
	box-shadow: 0 0 0 3px rgba(109, 53, 187, 0.3);
}
.vgl-hsearch__ico {
	flex: none;
	width: 15px;
	height: 15px;
	color: var(--vgl-purple, #6D35BB);
}
.vgl-hsearch:focus-within .vgl-hsearch__ico { color: #9C6FE6; }
.vgl-hsearch .vgl-hsearch__input,
.vgl-hsearch input.vgl-hsearch__input {
	flex: 1;
	min-width: 0;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0 !important;
	background: transparent !important;
	color: #fff;
	font-size: 13px;
	line-height: 1;
	box-shadow: none !important;
	outline: none !important;
	-webkit-appearance: none;
	appearance: none;
}
.vgl-hsearch__input::placeholder { color: rgba(255, 255, 255, 0.5); }
.vgl-hsearch__input::-webkit-search-cancel-button { display: none; }
.vgl-hsearch__input:focus { outline: none !important; box-shadow: none !important; }

/* results panel */
.vgl-hsearch__panel {
	position: absolute;
	z-index: 2000;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	max-height: 62vh;
	overflow-y: auto;
	padding: 6px;
	border-radius: 14px;
	background: #fff;
	border: 1px solid rgba(0, 11, 96, 0.10);
	box-shadow: 0 24px 54px -20px rgba(0, 11, 96, 0.4);
}
.vgl-hsearch__hit {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 10px;
	border-radius: 10px;
	text-decoration: none;
	color: var(--vgl-navy, #000B60);
}
.vgl-hsearch__hit.is-active,
.vgl-hsearch__hit:hover { background: rgba(109, 53, 187, 0.10); }
.vgl-hsearch__thumb {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 8px;
	object-fit: cover;
	background: #EEF0FA;
}
.vgl-hsearch__thumb--ph {
	background:
		linear-gradient(135deg, #E8ECF9, #F4F1FC);
}
.vgl-hsearch__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vgl-hsearch__name {
	font-size: 13.5px;
	font-weight: 500;
	color: var(--vgl-navy, #000B60);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.vgl-hsearch__name mark {
	background: rgba(109, 53, 187, 0.16);
	color: inherit;
	border-radius: 3px;
	padding: 0 1px;
}
.vgl-hsearch__cat {
	font-size: 11px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--vgl-purple, #6D35BB);
}
.vgl-hsearch__empty {
	margin: 0;
	padding: 14px 12px;
	font-size: 13px;
	color: #6b6b86;
}

@media (max-width: 767px) {
	.elementor-element-3f4c8bb > .elementor-element-b5a914b {
		max-width: none;
		margin-left: 0;
		flex-basis: 100%;
	}
}

/* ==========================================================================
   Mobile / tablet polish + "Be Bold" section background (post 09-09 deploy).
   Tiers:  <=819  phones & folded foldables
           820-1024  tablets & unfolded foldables (Z Fold etc.)
           >=1025  desktop (untouched)
   ========================================================================== */

/* -- every small / medium screen -- */
@media (max-width: 1024px) {

	/* Home hero H1 carries an atomic width (~362px) + margin-right:-40px from
	   the desktop layout, so the last word is pushed under the section's
	   overflow:hidden and clipped. Let it use the column width and wrap. */
	.elementor-element-64a156d .e-heading-base,
	.elementor-element-64a156d h1 {
		width: auto !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* "Be Bold" description shipped with line-height:17px on 16px text. */
	.elementor-element-16857d0 .elementor-image-box-description {
		line-height: 1.6 !important;
	}

	/* "Be Bold" section — the wide banner shipped as background-size:contain,
	   which drops it in as a floating strip across the copy. Fill the frame. */
	.elementor-element-6d2f257 {
		background-size: cover !important;
		background-repeat: no-repeat !important;
		min-height: 460px !important;
	}
}

/* -- phones & folded foldables -- */
@media (max-width: 819px) {

	/* Blog hero: contain leaves a tall empty band under the banner. */
	.elementor-element-16c51e2 {
		background-size: cover !important;
		background-position: 50% 25% !important;
	}

	/* Be Bold: the right half of the image (the clinic photo) fills the phone
	   width, under a white scrim so the navy / blue copy stays readable. */
	.elementor-element-6d2f257 {
		background-image:
			linear-gradient(rgba(255, 255, 255, 0.64), rgba(255, 255, 255, 0.44)),
			url("/wp-content/uploads/2026/05/VGLab-002-C.jpg") !important;
		background-position: 78% center !important;   /* the doctor / consult */
		min-height: 420px !important;
	}
	.elementor-element-e2bec00 .elementor-heading-title { font-size: 34px !important; line-height: 1.1 !important; }
	.elementor-element-d4d5b0c .elementor-heading-title { font-size: 30px !important; line-height: 1.1 !important; }
	.elementor-element-16857d0 .elementor-image-box-title { font-size: 22px !important; line-height: 1.25 !important; }
}

/* -- tablets & unfolded foldables -- */
@media (min-width: 820px) and (max-width: 1024px) {

	/* Be Bold: the left half of the image (light, watermark) zoomed to fill the
	   whole section — desktop-like, copy crisp, no scrim needed. */
	.elementor-element-6d2f257 {
		background-position: left center !important;
	}
	.elementor-element-e2bec00 .elementor-heading-title { font-size: 48px !important; line-height: 1.05 !important; }
	.elementor-element-d4d5b0c .elementor-heading-title { font-size: 42px !important; line-height: 1.05 !important; }
	.elementor-element-16857d0 .elementor-image-box-title { font-size: 30px !important; line-height: 1.2 !important; }
}