/*
Theme Name: VelocityEngine
Theme URI: https://deenpixel.com/velocityengine
Author: Noureen
Author URI: https://deenpixel.com
Description: A lightweight, high-converting WordPress & WooCommerce theme built on a performance-focused foundation designed to support strong Core Web Vitals, technical SEO, structured-data and semantic-markup support, and digital-product conversion. Zero framework bloat — native CSS + vanilla ES6.
Version: 2.57.1
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: velocityengine
Tags: woocommerce, e-commerce, blog, performance, seo, custom-colors, translation-ready
*/

/* ==========================================================================
   1. DESIGN TOKENS  (Global CSS Custom Properties)
   ========================================================================== */
:root {
	/* Brand palette */
	--ve-color-primary: #4f46e5;
	--ve-color-primary-hover: #4338ca;
	--ve-color-accent: #f59e0b;
	--ve-color-success: #16a34a;
	--ve-color-danger: #dc2626;

	/* Neutrals */
	--ve-color-ink: #0f172a;
	--ve-color-body: #334155;
	--ve-color-muted: #64748b;
	--ve-color-line: #e2e8f0;
	--ve-color-surface: #ffffff;
	--ve-color-surface-alt: #f8fafc;
	--ve-color-bg: #ffffff;

	/* Typography — system font stacks kill FOIT/FOUT and render instantly */
	--ve-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
	--ve-font-serif: Georgia, Cambria, "Times New Roman", Times, serif;
	--ve-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/* Fluid type scale (clamp = no CLS across breakpoints) */
	--ve-text-xs: 0.8125rem;
	--ve-text-sm: 0.9375rem;
	--ve-text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	--ve-text-lg: clamp(1.15rem, 1.05rem + 0.5vw, 1.375rem);
	--ve-text-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
	--ve-text-2xl: clamp(2rem, 1.5rem + 2vw, 3rem);

	--ve-leading: 1.7;
	--ve-leading-tight: 1.25;

	/* Spacing scale (each step = n × 0.25rem) */
	--ve-space-1: 0.25rem;
	--ve-space-2: 0.5rem;
	--ve-space-3: 0.75rem;
	--ve-space-4: 1rem;
	--ve-space-5: 1.25rem;
	--ve-space-6: 1.5rem;
	--ve-space-7: 1.75rem;
	--ve-space-8: 2rem;
	--ve-space-9: 2.25rem;
	--ve-space-10: 2.5rem;
	--ve-space-12: 3rem;
	--ve-space-16: 4rem;
	--ve-space-24: 6rem;

	/* Layout */
	--ve-container: 1180px;
	--ve-container-narrow: 760px;
	--ve-radius: 12px;
	--ve-radius-sm: 8px;
	--ve-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
	--ve-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.15);

	/* Motion */
	--ve-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--ve-header-h: 68px;
}

/* Dark palette — applied only when the admin chooses "Dark" (Customizer →
   Header & Branding → Color scheme). The [data-theme="dark"] selector is more
   specific than the dynamic :root{} Customizer colors, so it reliably wins.
   Auto-dark via prefers-color-scheme was removed because it conflicted with the
   Customizer colors and produced dark-on-dark on some devices. */
:root[data-theme="dark"] {
	--ve-color-ink: #f1f5f9;
	--ve-color-body: #cbd5e1;
	--ve-color-muted: #94a3b8;
	--ve-color-line: #1e293b;
	--ve-color-surface: #0f172a;
	--ve-color-surface-alt: #1e293b;
	--ve-color-bg: #0b1120;
}

/* ==========================================================================
   2. RESET  (minimal, modern, box-sizing safe)
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	font-family: var(--ve-font-sans);
	font-size: var(--ve-text-base);
	line-height: var(--ve-leading);
	color: var(--ve-color-body);
	background: var(--ve-color-bg);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	min-height: 100vh;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
img { background: var(--ve-color-surface-alt); } /* placeholder tint = no white flash */
input, button, textarea, select { font: inherit; color: inherit; }
a { color: var(--ve-color-primary); text-decoration-thickness: 1px; text-underline-offset: 2px; }
h1, h2, h3, h4 { color: var(--ve-color-ink); line-height: var(--ve-leading-tight); font-weight: 750; }
h1 { font-size: var(--ve-text-2xl); }
h2 { font-size: var(--ve-text-xl); }
ul, ol { padding-left: 1.25rem; }
:where(a, button, input, select, textarea):focus-visible {
	outline: 3px solid var(--ve-color-primary);
	outline-offset: 2px;
	border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ==========================================================================
   3. LAYOUT PRIMITIVES
   ========================================================================== */
/* Safety net: never let a stray wide element cause sideways page scroll on
   phones. `clip` (not hidden) so the sticky header keeps working. */
html { overflow-x: clip; }
.ve-container { width: 100%; max-width: var(--ve-container); margin-inline: auto; padding-inline: var(--ve-space-4); }
.ve-narrow { max-width: var(--ve-container-narrow); }
.ve-grid { display: grid; gap: var(--ve-space-6); }
.ve-flex { display: flex; gap: var(--ve-space-4); align-items: center; }
.ve-stack > * + * { margin-top: var(--ve-space-4); }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: var(--ve-space-4); top: var(--ve-space-4); z-index: 1000; background: var(--ve-color-ink); color: #fff; padding: var(--ve-space-2) var(--ve-space-4); border-radius: var(--ve-radius-sm); }

/* ==========================================================================
   4. BUTTONS
   ========================================================================== */
.ve-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--ve-space-2);
	padding: 0.75rem 1.5rem; border-radius: var(--ve-radius-sm); border: 1px solid transparent;
	font-weight: 650; cursor: pointer; text-decoration: none; line-height: 1;
	transition: transform 0.15s var(--ve-ease), background 0.2s var(--ve-ease);
}
.ve-btn:active { transform: translateY(1px); }
.ve-btn--primary { background: var(--ve-color-primary); color: #fff; }
.ve-btn--primary:hover { background: var(--ve-color-primary-hover); }
.ve-btn--accent { background: var(--ve-color-accent); color: #1f2937; }
.ve-btn--block { width: 100%; }
.ve-btn--lg { padding: 1rem 2rem; font-size: var(--ve-text-lg); }

/* ==========================================================================
   5. SITE HEADER + NAV
   ========================================================================== */

/* Optional slim announcement / promo bar above the header */
.ve-topbar {
	background: var(--ve-bg-topbar, linear-gradient(90deg, var(--ve-color-primary), var(--ve-color-primary-hover)));
	color: var(--ve-topbar-color, #fff); text-align: center;
	font-size: var(--ve-topbar-fs, var(--ve-text-sm));
	font-weight: var(--ve-topbar-weight, 550); font-style: var(--ve-topbar-style, normal);
	padding: var(--ve-space-2) var(--ve-space-4);
}
.ve-topbar a { color: var(--ve-topbar-color, #fff); text-underline-offset: 3px; }
/* Announcement/top-bar alignment */
.ve-topbar__inner[data-align="left"] { justify-content: flex-start; }
.ve-topbar__inner[data-align="center"] { justify-content: center; }
.ve-topbar__inner[data-align="right"] { justify-content: flex-end; }

/* Header shell */
.ve-header {
	position: sticky; top: 0; z-index: 100;
	background: var(--ve-bg-header, color-mix(in srgb, var(--ve-color-surface) 85%, transparent));
	backdrop-filter: saturate(180%) blur(12px);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid transparent;
	transition: border-color 0.25s var(--ve-ease), box-shadow 0.25s var(--ve-ease), background 0.25s var(--ve-ease), transform 0.3s var(--ve-ease);
}
/* Non-sticky header (Customizer: Header on scroll = "Scrolls away normally") */
.ve-header--static { position: static; }
/* Auto-hide mode: slide the (sticky) header out of view on scroll-down (toggled by theme.js) */
.ve-header--hidden { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) { .ve-header { transition: none; } }
/* Elevated state once the page is scrolled (toggled by theme.js) */
.ve-header.is-scrolled {
	border-bottom-color: var(--ve-color-line);
	box-shadow: 0 6px 24px -14px rgba(15, 23, 42, 0.35);
}
.ve-header__inner {
	display: flex; align-items: center; gap: var(--ve-space-6);
	min-height: var(--ve-header-h);
}
/* Primary menu alignment in the header */
.ve-header__inner[data-nav-align="center"] .ve-nav { margin-inline: auto; }
.ve-header__inner[data-nav-align="right"] .ve-nav { margin-inline-start: auto; }
.ve-header__inner[data-nav-align="right"] .ve-header__actions { margin-inline-start: var(--ve-space-6); }

/* Header layout presets (desktop only; mobile keeps the flex + hamburger row).
   Uses named grid areas so items land in the right cell regardless of DOM order
   (placing by grid-column alone makes out-of-order items stagger onto new rows). */
@media (min-width: 901px) {
	.ve-header__inner[data-layout] { display: grid; align-items: center; column-gap: var(--ve-space-6); }
	.ve-header__inner[data-layout] .ve-brand-wrap { grid-area: brand; }
	.ve-header__inner[data-layout] .ve-nav { grid-area: nav; margin-inline: 0; }
	.ve-header__inner[data-layout] .ve-header__actions { grid-area: actions; margin-inline-start: 0; }
	/* 1 — logo left, menu centre, icons right */
	.ve-header__inner[data-layout="1"] { grid-template-columns: auto 1fr auto; grid-template-areas: "brand nav actions"; }
	.ve-header__inner[data-layout="1"] .ve-brand-wrap { justify-self: start; }
	.ve-header__inner[data-layout="1"] .ve-nav { justify-self: center; }
	.ve-header__inner[data-layout="1"] .ve-header__actions { justify-self: end; }
	/* 2 — icons left, menu centre, logo right */
	.ve-header__inner[data-layout="2"] { grid-template-columns: auto 1fr auto; grid-template-areas: "actions nav brand"; }
	.ve-header__inner[data-layout="2"] .ve-header__actions { justify-self: start; }
	.ve-header__inner[data-layout="2"] .ve-nav { justify-self: center; }
	.ve-header__inner[data-layout="2"] .ve-brand-wrap { justify-self: end; }
	/* 3 — menu left, logo centre, icons right */
	.ve-header__inner[data-layout="3"] { grid-template-columns: 1fr auto 1fr; grid-template-areas: "nav brand actions"; }
	.ve-header__inner[data-layout="3"] .ve-nav { justify-self: start; }
	.ve-header__inner[data-layout="3"] .ve-brand-wrap { justify-self: center; }
	.ve-header__inner[data-layout="3"] .ve-header__actions { justify-self: end; }
	/* 4 — logo centre (top row), menu below-left, icons right (top row) */
	.ve-header__inner[data-layout="4"] { grid-template-columns: 1fr auto 1fr; grid-template-areas: ". brand actions" "nav nav nav"; row-gap: var(--ve-space-2); }
	.ve-header__inner[data-layout="4"] .ve-brand-wrap { justify-self: center; }
	.ve-header__inner[data-layout="4"] .ve-header__actions { justify-self: end; }
	.ve-header__inner[data-layout="4"] .ve-nav { justify-self: start; }
}

/* Brand: gradient logo mark + wordmark */
.ve-brand {
	display: inline-flex; align-items: center; gap: var(--ve-space-3);
	font-weight: 800; font-size: var(--ve-text-lg); letter-spacing: -0.02em;
	color: var(--ve-color-ink); text-decoration: none; flex-shrink: 0;
}
.ve-brand__mark {
	display: grid; place-items: center;
	width: 36px; height: 36px; border-radius: 10px;
	background: linear-gradient(135deg, var(--ve-color-primary), var(--ve-color-accent));
	color: #fff; font-size: 1.1rem; font-weight: 900; line-height: 1;
	box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--ve-color-primary) 70%, transparent);
}
.ve-brand .custom-logo, .ve-brand-wrap .custom-logo { max-height: var(--ve-header-logo-size, 44px); width: auto; flex-shrink: 0; }

/* Brand wrapper: logo/title inline, tagline drops beneath */
.ve-brand-wrap { display: flex; align-items: center; gap: var(--ve-space-3); flex-wrap: wrap; flex-shrink: 0; }
.ve-brand-wrap .custom-logo-link { display: inline-flex; }
.ve-brand__text--beside { font-weight: 800; font-size: var(--ve-text-lg); letter-spacing: -0.02em; color: var(--ve-color-ink); text-decoration: none; }
.ve-brand__tagline { flex-basis: 100%; margin-top: -6px; font-size: var(--ve-text-sm); color: var(--ve-color-muted); font-weight: 500; line-height: 1.2; }
@media (max-width: 900px) { .ve-brand__tagline { display: none; } }
/* Main-header text color (overrides defaults when set) */
.ve-iconbtn { color: var(--ve-header-color, var(--ve-color-body)); }
.ve-brand, .ve-brand__text, .ve-brand__text--beside { color: var(--ve-header-color, var(--ve-color-ink)); }

/* Primary nav */
.ve-nav { margin-inline-start: var(--ve-space-4); }
.ve-nav__list { display: flex; align-items: center; gap: var(--ve-nav-gap, var(--ve-space-2)); list-style: none; padding: 0; margin: 0; }
.ve-nav__list a {
	position: relative; display: inline-block;
	font-size: var(--ve-nav-fs, 1rem);
	color: var(--ve-header-color, var(--ve-color-body));
	padding: var(--ve-space-2) var(--ve-space-3);
	color: var(--ve-color-body); text-decoration: none; font-weight: 550;
	border-radius: var(--ve-radius-sm);
	transition: color 0.15s var(--ve-ease), background 0.15s var(--ve-ease);
}
.ve-nav__list a::after {
	content: ""; position: absolute; left: var(--ve-space-3); right: var(--ve-space-3); bottom: 6px;
	height: 2px; border-radius: 2px; background: var(--ve-color-primary);
	transform: scaleX(0); transform-origin: left; transition: transform 0.2s var(--ve-ease);
}
.ve-nav__list a:hover { color: var(--ve-color-primary); }
.ve-nav__list a:hover::after,
.ve-nav__list .current-menu-item > a::after { transform: scaleX(1); }
.ve-nav__list .current-menu-item > a { color: var(--ve-color-primary); }
/* Dropdown submenus */
.ve-nav__list .sub-menu {
	position: absolute; top: calc(100% + 8px); left: 0; min-width: 200px;
	background: var(--ve-color-surface); border: 1px solid var(--ve-color-line);
	border-radius: var(--ve-radius); box-shadow: var(--ve-shadow);
	padding: var(--ve-space-2); list-style: none; margin: 0;
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity 0.18s var(--ve-ease), transform 0.18s var(--ve-ease), visibility 0.18s;
}
.ve-nav__list li { position: relative; }
.ve-nav__list li:hover > .sub-menu,
.ve-nav__list li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.ve-nav__list .sub-menu a { display: block; }
.ve-nav__list .sub-menu a::after { content: none; }

/* Right-side actions */
.ve-header__actions { display: flex; align-items: center; gap: var(--ve-space-2); margin-inline-start: auto; }

/* Circular icon buttons (search, cart) */
.ve-iconbtn {
	display: inline-grid; place-items: center;
	width: 42px; height: 42px; border-radius: 50%;
	background: transparent; border: 1px solid transparent; color: var(--ve-color-body);
	cursor: pointer; text-decoration: none; position: relative;
	transition: background 0.15s var(--ve-ease), color 0.15s var(--ve-ease);
}
.ve-iconbtn:hover { background: var(--ve-color-surface-alt); color: var(--ve-color-ink); }
.ve-cart__count {
	position: absolute; top: 2px; right: 2px;
	min-width: 18px; height: 18px; padding: 0 5px;
	display: grid; place-items: center;
	background: var(--ve-color-accent); color: #1f2937;
	font-size: 0.7rem; font-weight: 700; line-height: 1; border-radius: 999px;
}


/* Header search — icon (click to reveal popover) or always-on inline box. No cross. */
.ve-search-wrap { position: relative; display: inline-flex; }
.ve-search__field {
	display: flex; align-items: center;
	border: 1px solid var(--ve-color-line); border-radius: 999px;
	background: var(--ve-color-surface); padding: 0 var(--ve-space-2) 0 var(--ve-space-4);
}
.ve-search__field input[type="search"] {
	border: 0; background: transparent; outline: none; padding: 0.5rem 0;
	font-size: var(--ve-text-sm); width: 180px;
}
.ve-search__field button { background: none; border: 0; cursor: pointer; color: var(--ve-color-muted); display: inline-grid; place-items: center; padding: var(--ve-space-2); }
/* Icon mode: field is a popover under the icon, hidden until toggled open */
.ve-search-wrap .ve-search__field {
	position: absolute; top: calc(100% + 8px); right: 0; z-index: 20;
	box-shadow: var(--ve-shadow); opacity: 0; visibility: hidden; transform: translateY(-6px);
	transition: opacity 0.18s var(--ve-ease), transform 0.18s var(--ve-ease), visibility 0.18s;
}
.ve-search-wrap[data-open="true"] .ve-search__field { opacity: 1; visibility: visible; transform: translateY(0); }
/* Inline (box) mode: always visible in the header */
.ve-search--inline .ve-search__field { position: static; box-shadow: none; opacity: 1; visibility: visible; transform: none; }

/* Instant-search results dropdown */
.ve-search__field { position: relative; }
.ve-search-results {
	position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
	width: min(360px, 92vw); max-height: 70vh; overflow-y: auto;
	background: var(--ve-color-surface); border: 1px solid var(--ve-color-line);
	border-radius: var(--ve-radius); box-shadow: var(--ve-shadow); padding: var(--ve-space-2);
}
.ve-search-wrap .ve-search-results { left: auto; right: 0; }
.ve-sr-group + .ve-sr-group { border-top: 1px solid var(--ve-color-line); margin-top: var(--ve-space-2); padding-top: var(--ve-space-2); }
.ve-sr-head { font-family: var(--ve-font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ve-color-muted); margin: 0 0 var(--ve-space-1); padding: 0 var(--ve-space-2); }
.ve-sr-item { display: flex; align-items: center; gap: var(--ve-space-3); padding: var(--ve-space-2); border-radius: var(--ve-radius-sm); text-decoration: none; color: var(--ve-color-body); }
.ve-sr-item:hover { background: var(--ve-color-surface-alt); }
.ve-sr-thumb { width: 40px; height: 40px; border-radius: var(--ve-radius-sm); object-fit: cover; flex-shrink: 0; background: var(--ve-color-surface-alt); }
.ve-sr-text { display: flex; flex-direction: column; min-width: 0; }
.ve-sr-title { font-weight: 600; color: var(--ve-color-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ve-sr-sub { font-size: var(--ve-text-sm); color: var(--ve-color-primary); }
.ve-sr-empty { margin: 0; padding: var(--ve-space-3); color: var(--ve-color-muted); font-size: var(--ve-text-sm); }

/* ==========================================================================
   VelocityEngine widgets
   ========================================================================== */
.ve-w-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ve-space-3); }
.ve-w-item { display: flex; gap: var(--ve-space-3); align-items: center; }
.ve-w-thumb { flex: 0 0 auto; }
.ve-w-thumb img { width: 52px; height: 52px; object-fit: cover; border-radius: var(--ve-radius-sm); display: block; background: var(--ve-color-surface-alt); }
.ve-w-text { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.ve-w-title { font-weight: 600; color: var(--ve-color-ink); text-decoration: none; line-height: 1.3; }
.ve-w-title:hover { color: var(--ve-color-primary); }
.ve-w-meta { font-size: var(--ve-text-sm); color: var(--ve-color-muted); }
.ve-w-rc { color: var(--ve-color-muted); }
.ve-w-cavatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; }
.ve-w-empty { color: var(--ve-color-muted); font-size: var(--ve-text-sm); margin: 0; }

/* Tabs widget */
.ve-w-tabnav { display: flex; gap: 2px; border-bottom: 1px solid var(--ve-color-line); margin-bottom: var(--ve-space-4); }
.ve-w-tab { flex: 1; font: inherit; font-size: var(--ve-text-sm); font-weight: 600; cursor: pointer; background: none; border: 0; border-bottom: 2px solid transparent; padding: var(--ve-space-2) var(--ve-space-2); color: var(--ve-color-muted); }
.ve-w-tab.is-active { color: var(--ve-color-primary); border-bottom-color: var(--ve-color-primary); }
.ve-w-panel[hidden] { display: none; }

/* Social panel */
.ve-w-social { display: flex; flex-direction: column; gap: var(--ve-space-3); }
.ve-w-social-post { position: relative; display: block; border-radius: var(--ve-radius-sm); overflow: hidden; }
.ve-w-social-post img { width: 100%; display: block; }
.ve-w-social-cap { display: block; font-size: var(--ve-text-sm); color: var(--ve-color-muted); margin-top: var(--ve-space-1); }
.ve-w-follow { text-align: center; }

/* Newsletter widget */
.ve-nl-form { display: flex; flex-direction: column; gap: var(--ve-space-2); }
.ve-nl-text { margin: 0; font-size: var(--ve-text-sm); color: var(--ve-color-muted); }
.ve-nl-row { display: flex; gap: var(--ve-space-2); }
.ve-nl-row input[type="email"] { flex: 1; min-width: 0; padding: 0.55em 0.7em; border: 1px solid var(--ve-color-line); border-radius: var(--ve-radius-sm); background: var(--ve-color-surface); color: var(--ve-color-body); font: inherit; }
.ve-nl-row input[type="email"]:focus { outline: none; border-color: var(--ve-color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ve-color-primary) 18%, transparent); }
.ve-nl-consent { font-size: var(--ve-text-sm); color: var(--ve-color-muted); display: flex; gap: var(--ve-space-2); align-items: flex-start; }
.ve-nl-msg { font-size: var(--ve-text-sm); margin: 0; min-height: 1.2em; }
.ve-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 560px) { .ve-search--inline { display: none; } }

/* Animated hamburger */
.ve-nav__toggle {
	display: none; flex-direction: column; justify-content: center; gap: 5px;
	width: 42px; height: 42px; border-radius: var(--ve-radius-sm); flex-shrink: 0;
	background: var(--ve-color-surface); border: 1px solid var(--ve-color-line); cursor: pointer;
	box-shadow: var(--ve-shadow-sm);
}
.ve-nav__toggle span { display: block; width: 20px; height: 2px; margin: 0 auto; background: var(--ve-color-ink); border-radius: 2px; transition: transform 0.25s var(--ve-ease), opacity 0.2s var(--ve-ease); }
.ve-nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ve-nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ve-nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- Mobile ---- */
@media (max-width: 900px) {
	.ve-header__inner { position: relative; gap: var(--ve-space-3); }
	/* Let a long site title truncate instead of pushing the actions off-screen. */
	.ve-brand-wrap, .ve-brand { flex-shrink: 1; min-width: 0; }
	.ve-brand__text, .ve-brand__text--beside { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.ve-header__actions { flex-shrink: 0; margin-inline-start: auto; }
	.ve-nav__toggle { display: flex; }
	.ve-nav {
		position: fixed; inset: calc(var(--ve-header-h) + 1px) 0 auto 0; margin: 0;
		background: var(--ve-color-surface); border-bottom: 1px solid var(--ve-color-line);
		box-shadow: var(--ve-shadow);
		transform: translateY(calc(-100% - var(--ve-header-h) - 24px)); visibility: hidden; transition: transform 0.28s var(--ve-ease), visibility 0s linear 0.28s;
		max-height: calc(100vh - var(--ve-header-h)); overflow-y: auto;
	}
	.ve-nav[data-open="true"] { transform: translateY(0); visibility: visible; transition: transform 0.28s var(--ve-ease), visibility 0s; }
	.ve-nav__list { flex-direction: column; align-items: stretch; padding: var(--ve-space-4); gap: 0; }
	.ve-nav__list a { padding: var(--ve-space-3) var(--ve-space-4); border-radius: var(--ve-radius-sm); }
	.ve-nav__list a::after { content: none; }
	.ve-nav__list .sub-menu {
		position: static; transform: none;
		box-shadow: none; border: 0; border-left: 2px solid var(--ve-color-line);
		border-radius: 0; margin-left: var(--ve-space-4);
		/* Stay hidden with the closed panel (do NOT force visibility here, or the
		   submenu items leak out at the top of the page). Revealed only when the
		   hamburger opens the menu — see the [data-open] rule below. */
	}
	.ve-nav[data-open="true"] .sub-menu { opacity: 1; visibility: visible; }
	/* Search box at the top of the open mobile menu. */
	.ve-nav__search { display: flex; }
}
/* In-menu search: only inside the mobile nav panel, never in the desktop bar. */
.ve-nav__search { display: none; align-items: center; gap: var(--ve-space-2); margin: var(--ve-space-4) var(--ve-space-4) 0; padding: 0 var(--ve-space-2) 0 var(--ve-space-4); border: 1px solid var(--ve-color-line); border-radius: 999px; background: var(--ve-color-surface); }
.ve-nav__search input[type="search"] { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; padding: 0.6rem 0; font-size: var(--ve-text-sm); color: var(--ve-color-body); }
.ve-nav__search button { background: none; border: 0; cursor: pointer; color: var(--ve-color-muted); display: inline-grid; place-items: center; padding: var(--ve-space-2); }
@media (max-width: 560px) {
	.ve-iconbtn--search { display: none; } /* declutter very small screens */
}

/* ==========================================================================
   6. ARTICLE / SINGLE POST
   ========================================================================== */
.ve-reading-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--ve-color-primary); z-index: 200; transition: width 0.1s linear; }
.ve-article__header { margin-bottom: var(--ve-space-8); }
.ve-article__meta { display: flex; flex-wrap: wrap; gap: var(--ve-space-4); color: var(--ve-color-muted); font-size: var(--ve-text-sm); }
.ve-article__hero { border-radius: var(--ve-radius); overflow: hidden; margin-bottom: var(--ve-space-8); aspect-ratio: 16 / 9; }
.ve-article__hero img { width: 100%; height: 100%; object-fit: cover; }
.ve-prose { font-size: var(--ve-text-base); }
.ve-prose > * + * { margin-top: var(--ve-space-6); }
.ve-prose h2, .ve-prose h3 { margin-top: var(--ve-space-12); scroll-margin-top: calc(var(--ve-header-h) + 1rem); }
.ve-prose img { border-radius: var(--ve-radius-sm); }
.ve-prose blockquote { border-left: 4px solid var(--ve-color-primary); padding-left: var(--ve-space-4); color: var(--ve-color-ink); font-style: italic; }
.ve-prose pre { background: var(--ve-color-ink); color: #f8fafc; padding: var(--ve-space-4); border-radius: var(--ve-radius-sm); overflow-x: auto; font-family: var(--ve-font-mono); font-size: var(--ve-text-sm); }
.ve-prose code { font-family: var(--ve-font-mono); font-size: 0.9em; }

/* Gutenberg blocks inside articles */
.ve-prose .wp-block-table { overflow-x: auto; display: block; }
.ve-prose .wp-block-table table { border-collapse: collapse; width: 100%; font-size: var(--ve-text-sm); }
.ve-prose .wp-block-table th, .ve-prose .wp-block-table td { border: 1px solid var(--ve-color-line); padding: var(--ve-space-2) var(--ve-space-3); text-align: left; }
.ve-prose .wp-block-table th { background: var(--ve-color-surface-alt); }
.ve-prose .wp-block-table figcaption { color: var(--ve-color-muted); font-size: var(--ve-text-sm); }
.ve-prose .wp-block-pullquote { border-top: 3px solid var(--ve-color-primary); border-bottom: 3px solid var(--ve-color-primary); padding: var(--ve-space-8) 0; text-align: center; }
.ve-prose .wp-block-pullquote p { font-size: 1.5em; font-style: italic; color: var(--ve-color-ink); }
.ve-prose .wp-block-pullquote cite { font-size: var(--ve-text-sm); color: var(--ve-color-muted); font-style: normal; }
.ve-prose figcaption, .ve-prose .wp-element-caption { color: var(--ve-color-muted); font-size: var(--ve-text-sm); text-align: center; margin-top: var(--ve-space-2); }
.ve-prose .wp-block-image img { border-radius: var(--ve-radius-sm); }
.ve-prose .wp-block-separator { border: none; border-top: 1px solid var(--ve-color-line); max-width: 6rem; margin-inline: auto; }
.ve-prose .wp-block-separator.is-style-wide { max-width: 100%; }
.ve-prose .wp-block-button__link { background: var(--ve-color-primary); color: #fff; border-radius: var(--ve-radius-sm); padding: 0.7em 1.4em; text-decoration: none; display: inline-block; }
.ve-prose .wp-block-details summary { cursor: pointer; font-weight: 600; color: var(--ve-color-ink); }
.ve-prose .wp-block-details { border: 1px solid var(--ve-color-line); border-radius: var(--ve-radius-sm); padding: var(--ve-space-4) var(--ve-space-5); }
.ve-prose .wp-block-footnotes { font-size: var(--ve-text-sm); color: var(--ve-color-muted); }
.ve-prose .wp-block-cover { border-radius: var(--ve-radius); overflow: hidden; }
/* Wide/full breakout of the narrow article column. 50% resolves against the
   column, so these centre the element on the viewport. */
.ve-prose .alignwide {
	width: min(1080px, 92vw);
	max-width: min(1080px, 92vw);
	margin-left: calc(50% - min(540px, 46vw));
	margin-right: calc(50% - min(540px, 46vw));
}
.ve-prose .alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	border-radius: 0;
}
.ve-prose .alignwide img, .ve-prose .alignfull img { width: 100%; }
.ve-prose .wp-block-embed figcaption { text-align: center; }

/* Product rating + meta blocks */
.ve-product__rating { margin: 0 0 var(--ve-space-3); }
.ve-product__meta { margin-top: var(--ve-space-4); font-size: var(--ve-text-sm); color: var(--ve-color-muted); }
.ve-product__meta .sku_wrapper, .ve-product__meta .posted_in, .ve-product__meta .tagged_as { display: block; margin: 2px 0; }
.ve-product__meta a { color: var(--ve-color-body); text-decoration: none; }
.ve-product__meta a:hover { color: var(--ve-color-primary); }

/* Table of contents */
.ve-toc { background: var(--ve-color-surface-alt); border: 1px solid var(--ve-color-line); border-radius: var(--ve-radius); padding: var(--ve-space-6); }
.ve-toc__title { font-size: var(--ve-text-sm); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ve-color-muted); margin-bottom: var(--ve-space-3); }
.ve-toc ol { margin: 0; }
.ve-toc a { text-decoration: none; color: var(--ve-color-body); }
.ve-toc a:hover, .ve-toc a[aria-current="true"] { color: var(--ve-color-primary); font-weight: 600; }

/* Byline avatar + meta chips */
.ve-article__byline { display: inline-flex; align-items: center; gap: var(--ve-space-2); }
.ve-article__avatar { width: 28px; height: 28px; border-radius: 50%; }
.ve-article__updated { color: var(--ve-color-primary); font-weight: 600; }
.ve-article__commentcount { text-decoration: none; color: var(--ve-color-muted); }
.ve-article__commentcount:hover { color: var(--ve-color-primary); }

/* Article social share */
.ve-post-share { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ve-space-2); margin-top: var(--ve-space-8); padding-top: var(--ve-space-6); border-top: 1px solid var(--ve-color-line); }
.ve-post-share__label { font-size: var(--ve-text-sm); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ve-color-muted); margin-right: var(--ve-space-2); }
.ve-post-share__btn { font: inherit; font-size: var(--ve-text-sm); line-height: 1; cursor: pointer; padding: 0.5em 0.85em; border-radius: var(--ve-radius-sm); border: 1px solid var(--ve-color-line); background: var(--ve-color-surface-alt); color: var(--ve-color-body); text-decoration: none; transition: background .15s, color .15s, border-color .15s; }
.ve-post-share__btn:hover { background: var(--ve-color-primary); color: #fff; border-color: var(--ve-color-primary); }
.ve-post-share__btn.is-copied { background: var(--ve-color-primary); color: #fff; border-color: var(--ve-color-primary); }

/* Previous / next navigation */
.ve-postnav { display: flex; gap: var(--ve-space-4); margin-top: var(--ve-space-12); }
.ve-postnav__link { flex: 1 1 0; display: flex; flex-direction: column; gap: var(--ve-space-1); padding: var(--ve-space-4) var(--ve-space-6); border: 1px solid var(--ve-color-line); border-radius: var(--ve-radius); text-decoration: none; color: var(--ve-color-body); transition: border-color .15s, background .15s; }
.ve-postnav__link:hover { border-color: var(--ve-color-primary); background: var(--ve-color-surface-alt); }
.ve-postnav__next { text-align: right; }
.ve-postnav__dir { font-size: var(--ve-text-sm); color: var(--ve-color-muted); }
.ve-postnav__title { font-weight: 600; }
@media (max-width: 600px) { .ve-postnav { flex-direction: column; } }

/* Related posts */
.ve-related-posts { margin-top: var(--ve-space-16); }
.ve-related-posts__title { margin-bottom: var(--ve-space-6); }
.ve-related-posts__grid { grid-template-columns: repeat(var(--ve-home-cols, 3), minmax(0, 1fr)); }
@media (max-width: 860px) { .ve-related-posts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ve-related-posts__grid { grid-template-columns: 1fr; } }

/* Author box */
.ve-authorbox { display: flex; gap: var(--ve-space-4); align-items: flex-start; background: var(--ve-color-surface-alt); border: 1px solid var(--ve-color-line); border-radius: var(--ve-radius); padding: var(--ve-space-6); margin-top: var(--ve-space-16); }
.ve-authorbox img { width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0; }

/* Author archive page */
.ve-authorpage { display: flex; gap: var(--ve-space-6); align-items: center; background: var(--ve-color-surface-alt); border: 1px solid var(--ve-color-line); border-radius: var(--ve-radius); padding: var(--ve-space-8); margin: var(--ve-space-6) 0 var(--ve-space-10); }
.ve-authorpage__avatar { width: 96px; height: 96px; border-radius: 50%; flex-shrink: 0; }
.ve-authorpage__eyebrow { font-size: var(--ve-text-sm); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ve-color-muted); margin: 0 0 var(--ve-space-1); }
.ve-authorpage__name { margin: 0 0 var(--ve-space-2); }
.ve-authorpage__bio { margin: 0 0 var(--ve-space-2); max-width: 60ch; }
.ve-authorpage__meta { margin: 0; font-size: var(--ve-text-sm); color: var(--ve-color-muted); }
@media (max-width: 600px) { .ve-authorpage { flex-direction: column; text-align: center; align-items: center; } }

/* Search results */
.ve-search-refine { margin-top: var(--ve-space-4); max-width: 420px; }
.ve-search-pages { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--ve-space-2); }
.ve-search-pages a { text-decoration: none; color: var(--ve-color-body); }
.ve-search-pages a:hover { color: var(--ve-color-primary); }
.ve-noresults { font-size: var(--ve-text-lg); color: var(--ve-color-muted); }

/* 404 */
.ve-404 { text-align: center; padding: var(--ve-space-16) 0 var(--ve-space-10); }
.ve-404__code { font-family: var(--ve-font-heading, inherit); font-size: clamp(4rem, 14vw, 8rem); font-weight: 800; line-height: 1; color: var(--ve-color-primary); margin: 0; opacity: 0.9; }
.ve-404__title { margin: 0 0 var(--ve-space-3); }
.ve-404__search { max-width: 420px; margin: var(--ve-space-6) auto; }

/* Comments */
.ve-comments { margin-top: var(--ve-space-16); }
.ve-comments__title { margin-bottom: var(--ve-space-6); }
.ve-commentlist { list-style: none; margin: 0 0 var(--ve-space-8); padding: 0; display: flex; flex-direction: column; gap: var(--ve-space-6); }
.ve-commentlist .children { list-style: none; margin: var(--ve-space-6) 0 0; padding-left: var(--ve-space-6); border-left: 2px solid var(--ve-color-line); display: flex; flex-direction: column; gap: var(--ve-space-6); }
.ve-comment__body { display: flex; gap: var(--ve-space-4); align-items: flex-start; }
.ve-comment__avatar { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; }
.ve-comment__main { flex: 1; min-width: 0; }
.ve-comment__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ve-space-2); margin-bottom: var(--ve-space-1); }
.ve-comment__author { font-weight: 600; color: var(--ve-color-ink); }
.ve-comment__author a { color: inherit; text-decoration: none; }
.ve-comment__badge { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; background: var(--ve-color-primary); color: #fff; padding: 1px 7px; border-radius: 100px; }
.ve-comment__date { font-size: var(--ve-text-sm); color: var(--ve-color-muted); }
.ve-comment__date a { color: inherit; text-decoration: none; }
.ve-comment__mod { font-size: var(--ve-text-sm); color: var(--ve-color-primary); font-style: italic; }
.ve-comment__text { color: var(--ve-color-body); }
.ve-comment__text > * + * { margin-top: var(--ve-space-3); }
.ve-comment__reply { display: inline-block; margin-top: var(--ve-space-2); font-size: var(--ve-text-sm); }
.ve-comment__reply a { color: var(--ve-color-primary); text-decoration: none; font-weight: 600; }
.ve-comments__closed { color: var(--ve-color-muted); font-size: var(--ve-text-sm); }
.ve-commentform { margin-top: var(--ve-space-8); display: flex; flex-direction: column; gap: var(--ve-space-4); }
.ve-commentform__title { margin-bottom: 0; }
.ve-commentform input[type="text"], .ve-commentform input[type="email"], .ve-commentform input[type="url"], .ve-commentform textarea { width: 100%; padding: 0.7em 0.9em; border: 1px solid var(--ve-color-line); border-radius: var(--ve-radius-sm); background: var(--ve-color-surface); color: var(--ve-color-body); font: inherit; }
.ve-commentform input:focus, .ve-commentform textarea:focus { outline: none; border-color: var(--ve-color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ve-color-primary) 18%, transparent); }
.ve-commentform label { font-size: var(--ve-text-sm); color: var(--ve-color-muted); }

/* ==========================================================================
   7. WOOCOMMERCE — DIGITAL PRODUCT CONVERSION SUITE
   ========================================================================== */
/* Space below header + between product and tabs */
.ve-product-single .ve-container { padding-top: var(--ve-space-8); }
.ve-product { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--ve-space-12); align-items: start; margin-top: var(--ve-space-6); }
@media (max-width: 860px) { .ve-product { grid-template-columns: 1fr; } }
.ve-product__gallery img { border-radius: var(--ve-radius); width: 100%; }
/* Keep the WooCommerce "Sale" flash pinned inside the gallery — otherwise, with
   no positioned ancestor, it anchors to the top of the page and overlaps the
   announcement bar (notably on mobile). */
.ve-product__gallery, .ve-product__gallery .woocommerce-product-gallery { position: relative; }
.ve-product__gallery span.onsale { position: absolute; top: var(--ve-space-3); left: var(--ve-space-3); right: auto; z-index: 3; margin: 0; }
.ve-product__title { font-size: var(--ve-pp-title-size, var(--ve-text-2xl)); }
.ve-product__short { font-size: var(--ve-pp-body-size, var(--ve-text-base)); }
.ve-product__details { margin-top: var(--ve-space-16); }
.ve-product-single .woocommerce-Tabs-panel, .ve-product-single .woocommerce-Tabs-panel p { font-size: var(--ve-pp-body-size, var(--ve-text-base)); }
/* Restore paragraph/line spacing lost to the CSS reset (short desc + tabs + description) */
.ve-product__short > *,
.ve-product-single .woocommerce-Tabs-panel > *,
.ve-product-single .woocommerce-product-details__short-description > * { margin-bottom: 1em; }
.ve-product__short > *:last-child,
.ve-product-single .woocommerce-Tabs-panel > *:last-child { margin-bottom: 0; }
.ve-product__short ul, .ve-product__short ol,
.ve-product-single .woocommerce-Tabs-panel ul,
.ve-product-single .woocommerce-Tabs-panel ol { padding-left: 1.25rem; }
.ve-product__short li,
.ve-product-single .woocommerce-Tabs-panel li { margin-bottom: 0.4em; }
.ve-product__price { font-size: var(--ve-pp-price-size, var(--ve-text-2xl)); font-weight: 800; color: var(--ve-price-color, var(--ve-color-ink)); }
.ve-product__price del { color: var(--ve-color-muted); font-weight: 500; font-size: 0.6em; margin-right: var(--ve-space-2); }
.ve-product__price ins { text-decoration: none; color: var(--ve-sale-color, var(--ve-price-color, var(--ve-color-ink))); }
.woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--ve-price-color, var(--ve-color-ink)); }
.woocommerce div.product .price ins, .woocommerce div.product .price ins .amount { color: var(--ve-sale-color, var(--ve-price-color, var(--ve-color-ink))); }
.woocommerce span.onsale, .ve-pcard__sale { background: var(--ve-sale-color, var(--ve-color-accent)); color: #fff; }

.ve-instant { display: inline-flex; align-items: center; gap: var(--ve-space-2); background: color-mix(in srgb, var(--ve-color-success) 12%, transparent); color: var(--ve-color-success); padding: var(--ve-space-2) var(--ve-space-3); border-radius: 999px; font-size: var(--ve-text-sm); font-weight: 650; }

/* Buy row: add-to-cart + wishlist side by side */
.ve-buyrow { display: flex; align-items: center; gap: var(--ve-space-3); flex-wrap: wrap; margin-top: var(--ve-space-4); }
.ve-buyrow .cart { margin: 0; display: flex; align-items: center; gap: var(--ve-space-3); flex-wrap: wrap; }

/* Add-to-cart button — colorable via Customizer (specificity beats Woo's .button.alt) */
.woocommerce .ve-product-single .ve-buyrow button.single_add_to_cart_button {
	background: var(--ve-atc-bg, var(--ve-color-primary)); color: var(--ve-atc-color, #fff);
	border: 0; border-radius: var(--ve-radius-sm); padding: 0.9rem 2rem;
	font-weight: 700; font-size: var(--ve-text-lg); line-height: 1; cursor: pointer;
	transition: filter 0.15s var(--ve-ease), transform 0.1s var(--ve-ease);
}
.woocommerce .ve-product-single .ve-buyrow button.single_add_to_cart_button:hover { filter: brightness(0.93); background: var(--ve-atc-bg, var(--ve-color-primary)); color: var(--ve-atc-color, #fff); }
.woocommerce .ve-product-single .ve-buyrow button.single_add_to_cart_button:active { transform: translateY(1px); }
.ve-product-single .quantity input.qty { padding: 0.6rem; border: 1px solid var(--ve-color-line); border-radius: var(--ve-radius-sm); width: 4.5rem; }

/* Wishlist / favorite button */
.ve-wishlist { display: inline-flex; align-items: center; gap: var(--ve-space-2); background: transparent; border: 1px solid var(--ve-color-line); border-radius: var(--ve-radius-sm); padding: 0.8rem 1.1rem; cursor: pointer; color: var(--ve-color-body); font-weight: 600; transition: color 0.15s var(--ve-ease), border-color 0.15s var(--ve-ease); }
.ve-wishlist:hover { border-color: var(--ve-color-primary); color: var(--ve-color-primary); }
.ve-wishlist__icon { transition: fill 0.15s var(--ve-ease); }
.ve-wishlist.is-saved { color: #e0245e; border-color: #e0245e; }
.ve-wishlist.is-saved .ve-wishlist__icon { fill: #e0245e; }

.ve-trust { display: flex; flex-wrap: wrap; gap: var(--ve-space-4); margin-top: var(--ve-space-6); padding-top: var(--ve-space-6); border-top: 1px solid var(--ve-color-line); }
.ve-trust__item { display: flex; align-items: center; gap: var(--ve-space-2); font-size: var(--ve-trust-size, var(--ve-text-sm)); color: var(--ve-trust-color, var(--ve-color-muted)); font-weight: var(--ve-trust-weight, 400); font-style: var(--ve-trust-style, normal); }
.ve-trust__img { margin-top: var(--ve-space-4); }
.ve-trust__img img { max-width: 100%; height: auto; }
.ve-trust--column { flex-direction: column; align-items: flex-start; }
.ve-trust__icon { height: 22px; width: auto; vertical-align: middle; }
/* Gallery on the right (summary left) */
.ve-product--gright .ve-product__gallery { order: 2; }
.ve-product--gright .ve-product__summary { order: 1; }
/* Product-page video block */
.ve-product__video { margin-top: var(--ve-space-4); }
/* Related products as an arrow carousel (click arrows to reveal more) */
.ve-related--carousel { position: relative; }
.ve-related--carousel ul.products { display: flex !important; grid-template-columns: none !important; overflow-x: auto; gap: var(--ve-space-6); scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; margin: 0; }
.ve-related--carousel ul.products::-webkit-scrollbar { display: none; }
.ve-related--carousel ul.products li.product { flex: 0 0 240px !important; scroll-snap-align: start; }

/* Shared arrow-carousel navigation buttons */
.ve-carousel__nav { position: absolute; z-index: 5; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--ve-color-line); background: var(--ve-color-surface); color: var(--ve-color-ink); font-size: 1.5rem; line-height: 1; cursor: pointer; display: grid; place-items: center; box-shadow: var(--ve-shadow-sm); }
.ve-carousel__nav--prev, .ve-carousel__nav--next { top: 50%; transform: translateY(-50%); }
.ve-carousel__nav--prev { left: -8px; }
.ve-carousel__nav--next { right: -8px; }
.ve-carousel__nav--up, .ve-carousel__nav--down { left: 50%; transform: translateX(-50%) rotate(90deg); }
.ve-carousel__nav--up { top: -8px; }
.ve-carousel__nav--down { bottom: -8px; }
.ve-carousel__nav:disabled { opacity: 0.35; cursor: default; }
.ve-carousel__nav:hover:not(:disabled) { background: var(--ve-color-primary); color: #fff; border-color: var(--ve-color-primary); }
/* Gallery thumbnail strip carousel */
.ve-thumbs-carousel { position: relative; }
.ve-thumbs-carousel .ve-carousel__nav { width: 30px; height: 30px; font-size: 1.1rem; }

/* Products / posts carousel block (image with text overlay) */
.ve-carousel { position: relative; }
.ve-carousel-track { display: flex; gap: var(--ve-space-6); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.ve-carousel-track::-webkit-scrollbar { display: none; }
.ve-carousel-cell { flex: 0 0 calc((100% - (var(--ve-car-cols, 4) - 1) * var(--ve-space-6)) / var(--ve-car-cols, 4)); scroll-snap-align: start; min-width: 0; }
@media (max-width: 900px) { .ve-carousel-cell { flex-basis: calc((100% - var(--ve-space-6)) / 2); } }
@media (max-width: 560px) { .ve-carousel-cell { flex-basis: 82%; } }

.ve-caro-card { position: relative; display: block; border-radius: var(--ve-radius); overflow: hidden; text-decoration: none; aspect-ratio: 3 / 4; background: var(--ve-color-surface-alt); box-shadow: var(--ve-shadow-sm); }
.ve-caro-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--ve-ease); }
.ve-caro-card:hover .ve-caro-card__img { transform: scale(1.05); }
.ve-caro-card__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: var(--ve-space-6); background: linear-gradient(to top, rgba(0,0,0,0.80) 0%, rgba(0,0,0,0.35) 45%, rgba(0,0,0,0) 78%); }
.ve-caro-card__cat { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; color: #fff; opacity: 0.92; }
.ve-caro-card__title { font-family: var(--ve-font-heading, inherit); font-weight: 700; font-size: 1.05rem; line-height: 1.25; color: #fff; }
.ve-caro-card__meta { font-size: var(--ve-text-sm); color: #fff; opacity: 0.95; }
.ve-caro-card__meta * { color: #fff !important; }
.ve-caro-card__meta del { opacity: 0.7; }
.ve-caro-card__badge { position: absolute; top: var(--ve-space-3); left: var(--ve-space-3); background: var(--ve-color-primary); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 100px; }

/* ==========================================================================
   Showcase cards (manual cards with links — demo/feature grid)
   ========================================================================== */
.ve-showcase-grid { display: grid; grid-template-columns: repeat(var(--ve-sc-cols, 2), minmax(0, 1fr)); gap: var(--ve-space-10) var(--ve-space-8); }
@media (max-width: 782px) { .ve-showcase-grid { grid-template-columns: 1fr; } }
.ve-sc-card { display: flex; flex-direction: column; }
.ve-sc-card__media { position: relative; overflow: hidden; border-radius: var(--ve-radius); aspect-ratio: var(--ve-sc-ratio, 3 / 2); background: var(--ve-color-surface-alt); }
.ve-showcase-grid--sq .ve-sc-card__media { border-radius: 0; }
.ve-sc-card__img, .ve-sc-card__ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ve-ease); }
/* Empty showcase card → clear "Insert image" placeholder (a template applied
   before the customer has added their own pictures). */
.ve-sc-card__ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: var(--ve-color-surface-alt, #eef0f4); color: var(--ve-color-muted, #6b7280); border: 1px dashed color-mix(in srgb, var(--ve-color-muted, #6b7280) 45%, transparent); }
.ve-sc-card__ph-ic { width: 34px; height: 34px; border-radius: 8px; border: 2px solid currentColor; opacity: 0.6; position: relative; }
.ve-sc-card__ph-ic::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 2px solid currentColor; width: 10px; height: 10px; top: 6px; left: 6px; }
.ve-sc-card__ph-ic::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: 5px; height: 9px; background: currentColor; clip-path: polygon(0 100%, 38% 40%, 60% 70%, 80% 30%, 100% 100%); opacity: 0.8; }
.ve-sc-card__ph-label { font-family: var(--ve-font-mono, monospace); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.ve-sc-card:hover .ve-sc-card__img { transform: scale(1.04); }
.ve-sc-card__num { position: absolute; top: var(--ve-space-4); left: var(--ve-space-4); background: var(--ve-color-ink, #1d2327); color: #fff; font-family: var(--ve-font-mono, monospace); font-size: var(--ve-text-sm); font-weight: 700; line-height: 1; padding: 8px 10px; border-radius: 4px; }
.ve-sc-card__btn { position: absolute; right: var(--ve-space-4); bottom: var(--ve-space-4); display: inline-flex; align-items: center; gap: 6px; }
.ve-sc-card__btn span { transition: transform 0.2s var(--ve-ease); }
.ve-sc-card__btn:hover span { transform: translateX(3px); }
.ve-sc-card__body { padding-top: var(--ve-space-4); border-top: 1px solid var(--ve-color-line); margin-top: var(--ve-space-4); }
.ve-sc-card__eyebrow { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ve-space-4); flex-wrap: wrap; }
.ve-sc-card__cat { font-size: var(--ve-text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ve-color-muted); }
.ve-sc-card__tag { font-size: var(--ve-text-sm); color: var(--ve-color-muted); text-align: right; }
.ve-sc-card__title { font-family: var(--ve-font-heading, inherit); font-size: var(--ve-text-2xl, 1.6rem); line-height: 1.15; margin-top: var(--ve-space-2); }
.ve-sc-card__title a { color: var(--ve-color-ink); text-decoration: none; }
.ve-sc-card__title a:hover { color: var(--ve-color-primary); }
/* Alignment control (ve-secalign-*) recentres the eyebrow row + title. */
.ve-secalign-center .ve-sc-card__eyebrow { justify-content: center; }
.ve-secalign-center .ve-sc-card__tag { text-align: center; }
.ve-secalign-right .ve-sc-card__eyebrow { justify-content: flex-end; }
.ve-section--onbg .ve-sc-card__title a { color: #fff; }
.ve-section--onbg .ve-sc-card__body { border-color: rgba(255,255,255,0.22); }

/* ==========================================================================
   Per-section styling (background, subtitle eyebrow, alignment)
   ========================================================================== */
.ve-section__sub, .ve-spotlight__sub, .ve-spotlight__cat { display: block; font-family: var(--ve-font-mono, monospace); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ve-color-primary); margin-bottom: var(--ve-space-2); }
.ve-section__block { padding: var(--ve-space-10) var(--ve-space-8); border-radius: var(--ve-radius); }
/* On a dark section band, ONLY the text sitting directly on the band turns white.
   Cards (products, posts, testimonials) keep their own solid background and normal
   text, so a section background colour never bleeds into them. */
.ve-section--onbg .ve-section__head h2,
.ve-section--onbg .ve-spotlight__title, .ve-section--onbg .ve-spotlight__title a,
.ve-section--onbg .ve-spotlight__desc, .ve-section--onbg .ve-spotlight__desc *,
.ve-section--onbg .ve-product__price,
.ve-section--onbg .ve-prose, .ve-section--onbg .ve-prose *,
.ve-section--onbg .ve-rt-title { color: #fff !important; }
.ve-section--onbg .ve-section__sub,
.ve-section--onbg .ve-spotlight__sub, .ve-section--onbg .ve-spotlight__cat { color: rgba(255,255,255,0.85) !important; }
/* Hero block on a dark section background keeps its text readable. */
.ve-section--onbg .ve-hero__title { color: #fff !important; }
.ve-section--onbg .ve-hero__sub { color: rgba(255,255,255,0.85) !important; }
.ve-btn--sq { border-radius: 0 !important; }
/* Vertical thumbnail strip (left/right) becomes the scrollable flex child */
.ve-product__gallery[data-thumbs="left"] .ve-thumbs-carousel,
.ve-product__gallery[data-thumbs="right"] .ve-thumbs-carousel { flex: 0 0 var(--ve-thumb-size, 72px); }
.ve-thumbs-carousel.is-vertical .flex-control-thumbs { max-height: 460px; overflow-y: auto; scrollbar-width: none; }
.ve-thumbs-carousel.is-vertical .flex-control-thumbs::-webkit-scrollbar { display: none; }

/* Social share */
.ve-share { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ve-space-2); margin: var(--ve-space-4) 0; }
.ve-share__label { font-size: var(--ve-text-sm); color: var(--ve-color-muted); font-weight: 600; margin-right: var(--ve-space-1); }
.ve-share__link { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--ve-color-surface-alt); color: var(--ve-color-body); border: 1px solid var(--ve-color-line); cursor: pointer; transition: background 0.15s var(--ve-ease), color 0.15s var(--ve-ease), transform 0.15s var(--ve-ease); }
.ve-share__link:hover { background: var(--ve-color-primary); color: #fff; border-color: var(--ve-color-primary); transform: translateY(-2px); }
.ve-share__copy.is-copied { background: var(--ve-color-success); color: #fff; border-color: var(--ve-color-success); }

/* Bundle offer */
.ve-bundle { margin-top: var(--ve-space-6); padding: var(--ve-space-6); border: 1px solid var(--ve-color-line); border-radius: var(--ve-radius); background: var(--ve-color-surface-alt); }
.ve-bundle__title { font-size: var(--ve-text-lg); margin-bottom: var(--ve-space-2); }
.ve-bundle__note { color: var(--ve-color-muted); font-size: var(--ve-text-sm); margin-bottom: var(--ve-space-4); }
.ve-bundle__items { display: flex; flex-wrap: wrap; gap: var(--ve-space-4); margin-bottom: var(--ve-space-4); }
.ve-bundle__item { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 96px; text-align: center; text-decoration: none; color: var(--ve-color-body); }
.ve-bundle__item img { border-radius: var(--ve-radius-sm); }
.ve-bundle__name { font-size: var(--ve-text-xs); line-height: 1.25; }
.ve-bundle__price { font-size: var(--ve-text-xs); font-weight: 700; color: var(--ve-color-ink); }
.ve-bundle__pricing { margin: var(--ve-space-3) 0 var(--ve-space-4); display: flex; align-items: baseline; gap: var(--ve-space-2); flex-wrap: wrap; }
.ve-bundle__was { color: var(--ve-color-muted); text-decoration: line-through; }
.ve-bundle__now { color: var(--ve-color-ink); font-weight: 800; font-size: var(--ve-text-lg); }
.ve-bundle__save { background: color-mix(in srgb, var(--ve-color-success) 15%, transparent); color: var(--ve-color-success); font-weight: 700; font-size: var(--ve-text-sm); padding: 2px 10px; border-radius: 999px; }
.ve-bundle__cta { align-self: flex-start; }

/* Wishlist page (My Account) */
.ve-wishlist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--ve-space-6); }
.ve-wishlist-card { display: flex; flex-direction: column; background: var(--ve-color-surface); border: 1px solid var(--ve-color-line); border-radius: var(--ve-radius); overflow: hidden; box-shadow: var(--ve-shadow-sm); }
.ve-wishlist-card__media img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.ve-wishlist-card__title { padding: var(--ve-space-3) var(--ve-space-3) 0; font-weight: 650; color: var(--ve-color-ink); text-decoration: none; }
.ve-wishlist-card__price { padding: 0 var(--ve-space-3); color: var(--ve-color-ink); font-weight: 700; }
.ve-wishlist-card__actions { display: flex; align-items: center; gap: var(--ve-space-2); padding: var(--ve-space-3); margin-top: auto; }
.ve-wishlist-card__actions .ve-btn { padding: 0.5rem 0.9rem; font-size: var(--ve-text-sm); }
.ve-wishlist-remove { margin-left: auto; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--ve-color-line); background: transparent; cursor: pointer; font-size: 1.1rem; line-height: 1; color: var(--ve-color-muted); }
.ve-wishlist-remove:hover { border-color: var(--ve-color-danger); color: var(--ve-color-danger); }

/* Product gallery — thumbnail position (left / right / bottom) + small thumbs */
/* Thumbnails: no list numbers, configurable gap + size, in every layout */
.ve-product__gallery .flex-control-thumbs { list-style: none !important; margin: 0; padding: 0; }
.ve-product__gallery .flex-control-thumbs li { list-style: none !important; }
.ve-product__gallery .flex-control-thumbs li::marker { content: none; }
.ve-product__gallery .flex-control-thumbs img { border-radius: var(--ve-radius-sm); width: 100%; height: auto; cursor: pointer; }
/* Bottom (default): horizontal row of thumbnails */
.ve-product__gallery[data-thumbs="bottom"] .flex-control-thumbs {
	display: flex !important; flex-direction: row; flex-wrap: nowrap;
	gap: var(--ve-thumb-gap, 8px); margin-top: var(--ve-thumb-gap, 8px);
	overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.ve-product__gallery[data-thumbs="bottom"] .flex-control-thumbs::-webkit-scrollbar { display: none; }
.ve-product__gallery[data-thumbs="bottom"] .flex-control-thumbs li { flex: 0 0 var(--ve-thumb-size, 72px); width: var(--ve-thumb-size, 72px) !important; margin: 0 !important; scroll-snap-align: start; }
/* Left / right: vertical strip beside the main image */
.ve-product__gallery[data-thumbs="left"] .woocommerce-product-gallery,
.ve-product__gallery[data-thumbs="right"] .woocommerce-product-gallery { display: flex; gap: var(--ve-thumb-gap, 8px); align-items: flex-start; }
.ve-product__gallery[data-thumbs="left"] .woocommerce-product-gallery { flex-direction: row-reverse; }
.ve-product__gallery[data-thumbs="left"] .woocommerce-product-gallery__wrapper,
.ve-product__gallery[data-thumbs="right"] .woocommerce-product-gallery__wrapper { flex: 1 1 auto; min-width: 0; }
.ve-product__gallery[data-thumbs="left"] .flex-control-thumbs,
.ve-product__gallery[data-thumbs="right"] .flex-control-thumbs { display: flex !important; flex-direction: column; flex: 0 0 var(--ve-thumb-size, 72px); gap: var(--ve-thumb-gap, 8px); }
.ve-product__gallery[data-thumbs="left"] .flex-control-thumbs li,
.ve-product__gallery[data-thumbs="right"] .flex-control-thumbs li { width: 100% !important; margin: 0 !important; }

/* Description / Reviews — horizontal tabs with active/inactive colors */
.ve-product-single .woocommerce-tabs ul.tabs { display: flex; flex-wrap: wrap; gap: var(--ve-space-2); list-style: none; margin: 0 0 var(--ve-space-6); padding: 0 0 0; border-bottom: 2px solid var(--ve-color-line); }
.ve-product-single .woocommerce-tabs ul.tabs::before { display: none; }
.ve-product-single .woocommerce-tabs ul.tabs li { margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; }
.ve-product-single .woocommerce-tabs ul.tabs li::before,
.ve-product-single .woocommerce-tabs ul.tabs li::after { display: none; }
.ve-product-single .woocommerce-tabs ul.tabs li a {
	display: block; padding: 0.75rem 1.25rem; text-decoration: none; font-weight: var(--ve-tab-weight, 650);
	font-size: var(--ve-pp-tab-size, 1rem);
	border-radius: var(--ve-radius-sm) var(--ve-radius-sm) 0 0; margin-bottom: -2px;
	background: var(--ve-tab-inactive-bg, transparent);
	color: var(--ve-tab-inactive-color, var(--ve-color-muted));
	border-bottom: 2px solid transparent;
	font-style: var(--ve-tab-style, normal);
}
.ve-product-single .woocommerce-tabs ul.tabs li a:hover { color: var(--ve-tab-active-color, var(--ve-color-primary)); }
.ve-product-single .woocommerce-tabs ul.tabs li.active a {
	background: var(--ve-tab-active-bg, transparent);
	color: var(--ve-tab-active-color, var(--ve-color-primary));
	border-bottom-color: var(--ve-tab-active-color, var(--ve-color-primary));
}
.ve-product-single .woocommerce-tabs .panel { padding-top: var(--ve-space-2); }

/* Description "Show more" collapse */
.woocommerce-Tabs-panel--description.ve-collapsible { max-height: var(--ve-collapse-h, 340px); overflow: hidden; position: relative; }
.woocommerce-Tabs-panel--description.ve-collapsible::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(transparent, var(--ve-color-bg)); pointer-events: none; }
.woocommerce-Tabs-panel--description.ve-collapsible.is-open { max-height: none; }
.woocommerce-Tabs-panel--description.ve-collapsible.is-open::after { display: none; }
.ve-showmore { margin-top: var(--ve-space-3); background: transparent; border: 1px solid var(--ve-color-primary); color: var(--ve-color-primary); border-radius: var(--ve-radius-sm); padding: 0.55rem 1.4rem; font-weight: 650; cursor: pointer; transition: background 0.15s var(--ve-ease); }
.ve-showmore:hover { background: color-mix(in srgb, var(--ve-color-primary) 10%, transparent); }

/* Sticky Buy Bar */
.ve-stickybar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
	background: var(--ve-color-surface); border-top: 1px solid var(--ve-color-line);
	box-shadow: 0 -8px 24px -12px rgba(15, 23, 42, 0.25);
	transform: translateY(110%); visibility: hidden;
	transition: transform 0.3s var(--ve-ease), visibility 0s linear 0.3s;
	padding: var(--ve-space-3) 0;
}
/* Visible: also focusable. Hidden (off-screen): visibility:hidden keeps its
   button out of the tab order and the accessibility tree. */
.ve-stickybar[data-visible="true"] { transform: translateY(0); visibility: visible; transition: transform 0.3s var(--ve-ease); }
.ve-stickybar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--ve-space-4); }
.ve-stickybar__info { display: flex; align-items: center; gap: var(--ve-space-3); min-width: 0; }
.ve-stickybar__info img { width: 44px; height: 44px; border-radius: var(--ve-radius-sm); }
.ve-stickybar__title { font-weight: 650; color: var(--ve-color-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 560px) { .ve-stickybar__title { display: none; } }

/* ==========================================================================
   8. HIGH-CONVERSION UI — LEAD POPUP, PUSH MODAL, SOCIAL PROOF TOASTS
   ========================================================================== */
.ve-modal[hidden] { display: none; }
.ve-modal {
	position: fixed; inset: 0; z-index: 300;
	display: grid; place-items: center; padding: var(--ve-space-4);
	background: rgba(15, 23, 42, 0.55);
	animation: ve-fade 0.2s var(--ve-ease);
}
.ve-modal__box {
	background: var(--ve-color-surface); border-radius: var(--ve-radius);
	box-shadow: var(--ve-shadow); max-width: 440px; width: 100%;
	padding: var(--ve-space-8); position: relative;
	animation: ve-pop 0.25s var(--ve-ease);
}
.ve-modal__close { position: absolute; top: var(--ve-space-3); right: var(--ve-space-3); background: none; border: 0; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--ve-color-muted); }
.ve-modal__title { font-size: var(--ve-text-xl); margin-bottom: var(--ve-space-2); }
.ve-field { width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--ve-color-line); border-radius: var(--ve-radius-sm); background: var(--ve-color-surface); margin-bottom: var(--ve-space-3); }
.ve-form__msg { font-size: var(--ve-text-sm); min-height: 1.2em; }
.ve-form__msg[data-state="ok"] { color: var(--ve-color-success); }
.ve-form__msg[data-state="err"] { color: var(--ve-color-danger); }

.ve-toast-wrap { position: fixed; left: var(--ve-space-4); bottom: var(--ve-space-4); z-index: 250; display: flex; flex-direction: column; gap: var(--ve-space-3); max-width: 320px; }
.ve-toast {
	display: flex; gap: var(--ve-space-3); align-items: center;
	background: var(--ve-color-surface); border: 1px solid var(--ve-color-line);
	border-radius: var(--ve-radius); box-shadow: var(--ve-shadow); padding: var(--ve-space-3);
	font-size: var(--ve-text-sm); animation: ve-slide-in 0.35s var(--ve-ease);
}
.ve-toast img { width: 40px; height: 40px; border-radius: var(--ve-radius-sm); }
.ve-toast strong { color: var(--ve-color-ink); }
.ve-toast__meta { color: var(--ve-color-muted); font-size: var(--ve-text-xs); }

@keyframes ve-fade { from { opacity: 0; } }
@keyframes ve-pop { from { opacity: 0; transform: scale(0.96) translateY(8px); } }
@keyframes ve-slide-in { from { opacity: 0; transform: translateX(-20px); } }

/* Utilities */
.ve-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.ve-muted { color: var(--ve-color-muted); }
.ve-btn--ghost { background: transparent; border-color: var(--ve-color-line); color: var(--ve-color-ink); }
.ve-btn--ghost:hover { background: var(--ve-color-surface-alt); }

/* ==========================================================================
   10. TOP BAR (contact + social) & SOCIAL ICONS
   ========================================================================== */
/* Announcement bar — separate from the top bar, own colors/size/style/align */
.ve-announce {
	background: var(--ve-announce-bg, linear-gradient(90deg, var(--ve-color-accent), var(--ve-color-primary)));
	color: var(--ve-announce-color, #fff);
	font-size: var(--ve-announce-fs, var(--ve-text-sm));
	font-weight: var(--ve-announce-weight, 600); font-style: var(--ve-announce-style, normal);
	padding: var(--ve-space-2) var(--ve-space-4);
}
.ve-announce a { color: var(--ve-announce-color, #fff); text-underline-offset: 3px; }
.ve-announce__link { display: inline-block; text-decoration: none; } /* whole-bar clickable link */
.ve-announce__link:hover { text-decoration: underline; }
.ve-announce__inner { text-align: center; }
.ve-announce__inner[data-align="left"] { text-align: left; }
.ve-announce__inner[data-align="right"] { text-align: right; }

.ve-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--ve-space-4); flex-wrap: wrap; }
.ve-topbar__left { display: flex; align-items: center; gap: var(--ve-space-4); flex-wrap: wrap; }
.ve-topbar__logo { display: inline-flex; align-items: center; }
.ve-topbar__logo .custom-logo, .ve-topbar .custom-logo { max-height: 26px; width: auto; }
.ve-topbar__logo .custom-logo-link { display: inline-flex; }
.ve-topbar__contact { opacity: 0.9; }

.ve-social { display: inline-flex; align-items: center; gap: var(--ve-space-2); }
.ve-social__link { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: var(--ve-color-body); background: var(--ve-color-surface-alt); transition: background 0.15s var(--ve-ease), color 0.15s var(--ve-ease), transform 0.15s var(--ve-ease); }
.ve-social__link:hover { background: var(--ve-color-primary); color: #fff; transform: translateY(-2px); }
.ve-social--top .ve-social__link { width: 30px; height: 30px; background: rgba(255,255,255,0.15); color: var(--ve-topbar-social-color, #fff); }
.ve-social--top .ve-social__link:hover { background: rgba(255,255,255,0.3); }
.ve-social--footer { margin-top: var(--ve-space-4); }
.ve-social--mini .ve-social__link { width: 32px; height: 32px; }
/* Footer social icons — own color, independent of footer/bottom text color */
.ve-social--footer .ve-social__link, .ve-social--mini .ve-social__link { color: var(--ve-social-color, var(--ve-color-body)); }
.ve-social--footer .ve-social__link:hover, .ve-social--mini .ve-social__link:hover { color: #fff; }

/* ==========================================================================
   11. HERO
   ========================================================================== */
.ve-hero { padding-block: clamp(3rem, 6vw, 5.5rem); }
.ve-hero__inner { display: flex; flex-wrap: wrap; gap: var(--ve-space-12); align-items: center; }
/* Hero text sits at ~45% of the hero width (full width on mobile). */
.ve-hero__content { flex: 0 1 45%; max-width: 45%; min-width: 300px; }
.ve-hero--image_left .ve-hero__content, .ve-hero--image_right .ve-hero__content { flex: 1 1 45%; }
.ve-hero__title { font-size: var(--ve-text-2xl); letter-spacing: -0.03em; }
.ve-hero__sub { font-size: var(--ve-text-lg); color: var(--ve-color-muted); margin-top: var(--ve-space-6); }
.ve-hero__actions { display: flex; flex-wrap: wrap; gap: var(--ve-space-3); margin-top: var(--ve-space-8); }
.ve-hero__media { flex: 1 1 45%; min-width: 300px; }
.ve-hero__media .ve-hero__img, .ve-hero__media img { width: 100%; height: auto; border-radius: var(--ve-radius); box-shadow: var(--ve-shadow); }
/* image_left → image before text; image_right → default order */
.ve-hero--image_left .ve-hero__inner { flex-direction: row-reverse; }
/* Stacked variants: image + text in a centered column. */
.ve-hero--image_top .ve-hero__inner,
.ve-hero--image_bottom .ve-hero__inner { flex-direction: column; align-items: center; text-align: center; }
.ve-hero--image_top .ve-hero__inner { flex-direction: column-reverse; }
.ve-hero--image_top .ve-hero__content,
.ve-hero--image_bottom .ve-hero__content { flex: 0 1 auto; max-width: 720px; min-width: 0; }
.ve-hero--image_top .ve-hero__actions,
.ve-hero--image_bottom .ve-hero__actions { justify-content: center; }
.ve-hero--image_top .ve-hero__media,
.ve-hero--image_bottom .ve-hero__media { flex: 0 1 auto; width: 100%; max-width: 960px; }
@media (max-width: 860px) {
	.ve-hero__content, .ve-hero--image_left .ve-hero__content, .ve-hero--image_right .ve-hero__content { flex-basis: 100%; max-width: 100%; }
	.ve-hero__media { order: -1; flex-basis: 100%; }
}

/* ---- Hero slider (CSS scroll-snap; tiny JS for dots/autoplay) ---- */
.ve-hero-slider { position: relative; overflow: hidden; }
.ve-slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.ve-slides::-webkit-scrollbar { display: none; }
.ve-slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; }
.ve-slide__img { width: 100%; height: clamp(360px, 58vh, 620px); object-fit: cover; display: block; }
.ve-slide__overlay { position: absolute; inset: 0; display: flex; align-items: center; background: linear-gradient(90deg, rgba(15,23,42,0.7), rgba(15,23,42,0.15)); color: #fff; }
.ve-slide__title { color: var(--ve-slide-color, #fff); font-size: var(--ve-slide-title-size, var(--ve-text-2xl)); letter-spacing: -0.03em; max-width: 22ch; margin: 0; }
.ve-slide__caption { color: var(--ve-slide-color, rgba(255,255,255,0.92)); font-size: var(--ve-slide-caption-size, var(--ve-text-lg)); max-width: 44ch; margin: var(--ve-space-4) 0 var(--ve-space-8); }
.ve-slide__meta { color: var(--ve-slide-color, #fff); font-weight: 700; font-size: var(--ve-text-lg); margin: var(--ve-space-2) 0 0; }
/* "Image only" slides: make the whole slide clickable */
.ve-slide__link { position: absolute; inset: 0; z-index: 2; }
/* Slider text alignment */
.ve-hero-slider[data-align="center"] .ve-slide__overlay .ve-container { text-align: center; }
.ve-hero-slider[data-align="center"] .ve-slide__title, .ve-hero-slider[data-align="center"] .ve-slide__caption { margin-inline: auto; }
.ve-hero-slider[data-align="right"] .ve-slide__overlay .ve-container { text-align: right; }
.ve-hero-slider[data-align="right"] .ve-slide__title, .ve-hero-slider[data-align="right"] .ve-slide__caption { margin-left: auto; }
.ve-hero-slider[data-align="right"] .ve-slide__overlay { background: linear-gradient(270deg, rgba(15,23,42,0.7), rgba(15,23,42,0.15)); }
/* Slider button — dedicated color/text/size (falls back to theme primary) */
.ve-hero-slider .ve-slide__overlay .ve-btn {
	background: var(--ve-slide-btn-bg, var(--ve-color-primary));
	color: var(--ve-slide-btn-color, #fff);
	font-size: var(--ve-slide-btn-size, var(--ve-text-lg));
}
.ve-hero-slider .ve-slide__overlay .ve-btn:hover { filter: brightness(0.93); }
.ve-slider__dots { position: absolute; left: 0; right: 0; bottom: var(--ve-space-4); display: flex; gap: 8px; justify-content: center; z-index: 3; }
.ve-slider__dots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,0.55); cursor: pointer; }
.ve-slider__dots button[aria-current="true"] { background: #fff; width: 26px; border-radius: 6px; }
.ve-slider__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.9); color: var(--ve-color-ink); font-size: 1.7rem; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.ve-slider__arrow--prev { left: var(--ve-space-4); }
.ve-slider__arrow--next { right: var(--ve-space-4); }
@media (max-width: 600px) {
	.ve-slider__arrow { display: none; }
	.ve-slide__overlay { background: linear-gradient(0deg, rgba(15,23,42,0.8), rgba(15,23,42,0.2)); align-items: flex-end; padding-bottom: var(--ve-space-12); }
}

/* ==========================================================================
   12. SECTIONS + GRIDS (products, categories, cards)
   ========================================================================== */
.ve-section { padding-block: var(--ve-space-16); }
.ve-section--alt { background: var(--ve-color-surface-alt); }
/* Per-section alignment (head + card contents) and padding */
/* Heading alignment (separate control from content). */
.ve-secheadalign-center .ve-section__head { justify-content: center; text-align: center; }
.ve-secheadalign-right .ve-section__head { justify-content: flex-end; text-align: right; }
/* Content alignment (cards, prose, category name + count, spotlight details). */
.ve-secalign-center .ve-pcard__body, .ve-secalign-center .ve-card__body { text-align: center; align-items: center; }
.ve-secalign-right .ve-pcard__body, .ve-secalign-right .ve-card__body { text-align: right; align-items: flex-end; }
.ve-secalign-center .ve-cat-card__name, .ve-secalign-center .ve-cat-card__count { text-align: center; }
.ve-secalign-right .ve-cat-card__name, .ve-secalign-right .ve-cat-card__count { text-align: right; }
/* The category chip on blog cards uses align-self, so text-align alone won't move
   it — realign the flex item too. */
.ve-secalign-center .ve-card__cat { align-self: center; }
.ve-secalign-right .ve-card__cat { align-self: flex-end; }
.ve-secalign-center .ve-spotlight__info { text-align: center; }
.ve-secalign-right .ve-spotlight__info { text-align: right; }

/* Shop-by-Category: fixed columns grid (2×2 etc.) instead of auto-fill. */
/* .ve-cat-grid.ve-cat-grid--fixed (higher specificity) so it wins over the base
   auto-fill .ve-cat-grid rule regardless of source order — otherwise 2×2 renders
   as a single row of 4. */
.ve-cat-grid.ve-cat-grid--fixed { grid-template-columns: repeat(var(--ve-cat-cols, 3), minmax(0, 1fr)); }
@media (max-width: 700px) { .ve-cat-grid.ve-cat-grid--fixed { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .ve-cat-grid.ve-cat-grid--fixed { grid-template-columns: 1fr; } }
/* Category name/count ABOVE the image. */
/* Double-class so display:flex wins over the later .ve-cat-card{display:block}. */
.ve-cat-card.ve-cat-card--above { display: flex; flex-direction: column; }
.ve-cat-card--above img { order: 3; }
.ve-cat-card--above .ve-cat-card__name { order: 1; padding-top: var(--ve-space-3); }
.ve-cat-card--above .ve-cat-card__count { order: 2; padding-bottom: var(--ve-space-2); }

/* Overlay label placement (tl/tc/tr/cl/cc/cr/bl/bc/br) for overlay cards. */
.ve-cat-card--overlay .ve-cat-card__count { display: none; }
.ve-cat-card--overlay .ve-cat-card__name { position: absolute; inset: 0; display: flex; padding: var(--ve-space-4); color: #fff; background: linear-gradient(to top, rgba(0,0,0,0.72), rgba(0,0,0,0) 65%); }
.ve-ovpos-tl .ve-cat-card__name, .ve-ovpos-tl.ve-pcard__body { align-items: flex-start; justify-content: flex-start; text-align: left; }
.ve-ovpos-tc .ve-cat-card__name { align-items: flex-start; justify-content: center; text-align: center; }
.ve-ovpos-tr .ve-cat-card__name { align-items: flex-start; justify-content: flex-end; text-align: right; }
.ve-ovpos-cl .ve-cat-card__name { align-items: center; justify-content: flex-start; text-align: left; }
.ve-ovpos-cc .ve-cat-card__name { align-items: center; justify-content: center; text-align: center; }
.ve-ovpos-cr .ve-cat-card__name { align-items: center; justify-content: flex-end; text-align: right; }
.ve-ovpos-bl .ve-cat-card__name { align-items: flex-end; justify-content: flex-start; text-align: left; }
.ve-ovpos-bc .ve-cat-card__name { align-items: flex-end; justify-content: center; text-align: center; }
.ve-ovpos-br .ve-cat-card__name { align-items: flex-end; justify-content: flex-end; text-align: right; }

/* Rating stars in homepage product cards / spotlight. */
.ve-pcard__rating, .ve-spotlight__rating { margin: 2px 0; }
.ve-pcard__rating .star-rating, .ve-spotlight__rating .star-rating { font-size: 0.85em; }

/* Products grid: image aspect-ratio override, plus above / overlay detail layouts. */
.ve-products-grid { --ve-home-ratio: 1 / 1; }
.ve-products-grid .ve-pcard__media img { aspect-ratio: var(--ve-home-ratio, 1 / 1); }
.ve-products-grid--above .ve-pcard { flex-direction: column; }
.ve-products-grid--above .ve-pcard__media { order: 2; }
.ve-products-grid--above .ve-pcard__body { order: 1; }
.ve-products-grid--overlay .ve-pcard { position: relative; }
.ve-products-grid--overlay .ve-pcard__body { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 4px; padding: var(--ve-space-5); color: #fff; background: linear-gradient(to top, rgba(0,0,0,0.78), rgba(0,0,0,0) 70%); }
.ve-products-grid--overlay .ve-pcard__title, .ve-products-grid--overlay .ve-pcard__price { color: #fff; }
/* Overlay add-to-cart button follows the chosen overlay position (via the body's
   align-items set by the .ve-ovpos-* rules above) instead of forcing left. */
.ve-products-grid--overlay .ve-pcard__body .button { align-self: auto; }
.ve-ovpos-tl.ve-pcard .ve-pcard__body { justify-content: flex-start; align-items: flex-start; }
.ve-ovpos-tc.ve-pcard .ve-pcard__body { justify-content: flex-start; align-items: center; text-align: center; }
.ve-ovpos-tr.ve-pcard .ve-pcard__body { justify-content: flex-start; align-items: flex-end; text-align: right; }
.ve-ovpos-cl.ve-pcard .ve-pcard__body { justify-content: center; align-items: flex-start; }
.ve-ovpos-cc.ve-pcard .ve-pcard__body { justify-content: center; align-items: center; text-align: center; }
.ve-ovpos-cr.ve-pcard .ve-pcard__body { justify-content: center; align-items: flex-end; text-align: right; }
.ve-ovpos-bl.ve-pcard .ve-pcard__body { justify-content: flex-end; align-items: flex-start; }
.ve-ovpos-bc.ve-pcard .ve-pcard__body { justify-content: flex-end; align-items: center; text-align: center; }
.ve-ovpos-br.ve-pcard .ve-pcard__body { justify-content: flex-end; align-items: flex-end; text-align: right; }
/* Rich-text + testimonial blocks also follow the section's alignment. */
.ve-secalign-center .ve-prose, .ve-secalign-center .ve-testi { text-align: center; }
.ve-secalign-right .ve-prose, .ve-secalign-right .ve-testi { text-align: right; }
.ve-secalign-center .ve-prose > *, .ve-secalign-right .ve-prose > * { margin-inline: 0; }
.ve-secpad-none.ve-section { padding-block: 0; }
.ve-secpad-large.ve-section { padding-block: var(--ve-space-24, 6rem); }
/* Padding control also applies to hero / slider blocks. */
.ve-secpad-none.ve-hero, .ve-secpad-none.ve-hero-slider { padding-block: 0; }
.ve-secpad-large.ve-hero { padding-block: var(--ve-space-24, 6rem); }
.ve-cat-card.ve-cat-card--sq, .ve-cat-card.ve-cat-card--sq img { border-radius: 0; }
.ve-section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--ve-space-4); margin-bottom: var(--ve-space-8); }
.ve-section__head .ve-section__sub { flex-basis: 100%; width: 100%; margin-bottom: var(--ve-space-1); }
.ve-rt-title { margin: 0 0 var(--ve-space-6); } /* rich-text heading inherits text-align from its section */
/* Honeypot: off-screen for humans, still present in the DOM for bots to fill */
.ve-hp { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* Lead-capture consent checkbox */
.ve-lead-consent { display: flex; gap: 8px; align-items: flex-start; text-align: left; font-size: 0.85rem; margin: var(--ve-space-2) 0; }
.ve-lead-consent input { margin-top: 3px; flex: 0 0 auto; }
/* FAQ accordion — visible content that backs the FAQPage schema */
.ve-faq { margin-top: var(--ve-space-10); }
.ve-faq__title { margin-bottom: var(--ve-space-4); }
.ve-faq__item { border-bottom: 1px solid var(--ve-color-line); padding: var(--ve-space-3) 0; }
.ve-faq__q { cursor: pointer; font-weight: 600; list-style: none; padding-right: 1.5em; position: relative; }
.ve-faq__q::-webkit-details-marker { display: none; }
.ve-faq__q::after { content: "+"; position: absolute; right: 0; top: 0; font-weight: 400; }
.ve-faq__item[open] .ve-faq__q::after { content: "−"; }
.ve-faq__a { padding-top: var(--ve-space-2); }
.ve-section__more { text-decoration: none; font-weight: 600; white-space: nowrap; }
.ve-section__morewrap { margin-top: var(--ve-space-8); }
.ve-morealign-left { text-align: left; }
.ve-morealign-center { text-align: center; }
.ve-morealign-right { text-align: right; }

.ve-products-grid { display: grid; grid-template-columns: repeat(var(--ve-home-cols, 4), minmax(0, 1fr)); gap: var(--ve-space-6); }
.ve-products-grid::before, .ve-products-grid::after { content: none !important; display: none !important; }
@media (max-width: 900px) { .ve-products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .ve-products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .ve-products-grid { grid-template-columns: 1fr; } }

/* Homepage video embed (responsive) */
.ve-video-embed { position: relative; }
.ve-video-embed iframe, .ve-video-embed video { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--ve-radius); display: block; }

/* Homepage testimonials — horizontal track (arrows reveal more), centered cards */
.ve-testi-carousel { position: relative; }
.ve-testi-grid { display: flex; gap: var(--ve-space-6); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.ve-testi-grid::-webkit-scrollbar { display: none; }
.ve-testi { flex: 0 0 calc((100% - (var(--ve-testi-cols, 3) - 1) * var(--ve-space-6)) / var(--ve-testi-cols, 3)); scroll-snap-align: start; margin: 0; background: var(--ve-color-surface); border: 1px solid var(--ve-color-line); border-radius: var(--ve-radius); padding: var(--ve-space-6); box-shadow: var(--ve-shadow-sm); }
@media (max-width: 900px) { .ve-testi { flex-basis: calc((100% - var(--ve-space-6)) / 2); } }
@media (max-width: 560px) { .ve-testi { flex-basis: 100%; } }
.ve-testi--center { text-align: center; display: flex; flex-direction: column; align-items: center; }
.ve-testi__avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; margin-bottom: var(--ve-space-3); }
.ve-testi__avatar--initial { display: grid; place-items: center; background: var(--ve-color-primary); color: #fff; font-weight: 800; font-size: 1.6rem; }
.ve-testi__name { font-weight: 700; color: var(--ve-color-ink); margin-bottom: var(--ve-space-2); }
.ve-testi__quote { margin: 0; font-family: var(--ve-font-serif); font-size: var(--ve-text-base); color: var(--ve-color-body); line-height: 1.6; }

/* Single-product spotlight */
.ve-spotlight { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ve-space-12); align-items: center; }
.ve-spotlight--left { direction: rtl; }
.ve-spotlight--left > * { direction: ltr; }
.ve-spotlight__media img { width: 100%; height: auto; border-radius: var(--ve-radius); box-shadow: var(--ve-shadow); }
.ve-spotlight__title { font-size: var(--ve-text-xl); margin: 0 0 var(--ve-space-3); }
.ve-spotlight__title a { color: var(--ve-color-ink); text-decoration: none; }
.ve-spotlight__info .ve-product__price { margin-bottom: var(--ve-space-4); }
.ve-spotlight__desc { color: var(--ve-color-body); margin-bottom: var(--ve-space-6); }
.ve-spotlight__desc > * + * { margin-top: var(--ve-space-3); }
@media (max-width: 768px) { .ve-spotlight { grid-template-columns: 1fr; } .ve-spotlight--left { direction: ltr; } .ve-spotlight__media { order: -1; } }
/* Spotlight image aspect-ratio (when a ratio is chosen). */
.ve-spotlight--ratio .ve-spotlight__media img { aspect-ratio: var(--ve-spot-ratio, 3 / 2); object-fit: cover; height: auto; }

/* Overlay-position variables shared by overlay cards (single source of truth). */
.ve-ovpos-tl { --ov-j: flex-start; --ov-a: flex-start; --ov-t: left; }
.ve-ovpos-tc { --ov-j: flex-start; --ov-a: center; --ov-t: center; }
.ve-ovpos-tr { --ov-j: flex-start; --ov-a: flex-end; --ov-t: right; }
.ve-ovpos-cl { --ov-j: center; --ov-a: flex-start; --ov-t: left; }
.ve-ovpos-cc { --ov-j: center; --ov-a: center; --ov-t: center; }
.ve-ovpos-cr { --ov-j: center; --ov-a: flex-end; --ov-t: right; }
.ve-ovpos-bl { --ov-j: flex-end; --ov-a: flex-start; --ov-t: left; }
.ve-ovpos-bc { --ov-j: flex-end; --ov-a: center; --ov-t: center; }
.ve-ovpos-br { --ov-j: flex-end; --ov-a: flex-end; --ov-t: right; }

/* Blog spotlight — overlay layout (post details over the image). */
.ve-spotlight-ov { position: relative; display: block; overflow: hidden; border-radius: var(--ve-radius); text-decoration: none; aspect-ratio: var(--ve-spot-ratio, 16 / 9); box-shadow: var(--ve-shadow); }
.ve-spotlight-ov__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ve-ease); }
.ve-spotlight-ov:hover .ve-spotlight-ov__img { transform: scale(1.04); }
.ve-spotlight-ov__body { position: absolute; inset: 0; display: flex; flex-direction: column; gap: var(--ve-space-2); padding: clamp(1.25rem, 4vw, 3rem); color: #fff; background: linear-gradient(to top, rgba(0,0,0,0.78), rgba(0,0,0,0.15) 60%, rgba(0,0,0,0) 100%); justify-content: var(--ov-j, flex-end); align-items: var(--ov-a, flex-start); text-align: var(--ov-t, left); }
.ve-spotlight-ov__body .ve-spotlight__cat { color: rgba(255,255,255,0.9); }
.ve-spotlight-ov__title { font-family: var(--ve-font-heading, inherit); font-weight: 800; font-size: var(--ve-text-2xl, 1.6rem); line-height: 1.15; color: #fff; }
.ve-spotlight-ov__desc { max-width: 60ch; color: rgba(255,255,255,0.92); }
.ve-spotlight-ov .ve-btn { margin-top: var(--ve-space-3); }
.ve-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--ve-space-4); }
/* Category carousel (homepage builder "Category carousel" section) */
.ve-cat-carousel { position: relative; }
.ve-cat-grid--carousel { display: flex; grid-template-columns: none; overflow-x: auto; gap: var(--ve-space-4); scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.ve-cat-grid--carousel::-webkit-scrollbar { display: none; }
.ve-cat-grid--carousel .ve-cat-card { flex: 0 0 calc((100% - (var(--ve-cat-cols, 4) - 1) * var(--ve-space-4)) / var(--ve-cat-cols, 4)); min-width: 150px; scroll-snap-align: start; }
@media (max-width: 700px) { .ve-cat-grid--carousel .ve-cat-card { flex-basis: 46%; } }
/* Fallback tile for a category with no image (e.g. a blog category) */
.ve-cat-card__ph { display: flex; align-items: center; justify-content: center; aspect-ratio: var(--ve-cat-ratio, 3 / 2); background: var(--ve-color-surface-alt, #f1f5f9); color: var(--ve-color-primary); font-size: 2rem; font-weight: 700; }

/* Product card (homepage featured) */
.ve-pcard { display: flex; flex-direction: column; background: var(--ve-color-surface); border: 1px solid var(--ve-color-line); border-radius: var(--ve-radius); overflow: hidden; box-shadow: var(--ve-shadow-sm); transition: transform 0.2s var(--ve-ease), box-shadow 0.2s var(--ve-ease); }
.ve-pcard:hover { transform: translateY(-4px); box-shadow: var(--ve-shadow); }
.ve-pcard__media { position: relative; display: block; }
.ve-pcard__media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.ve-pcard__sale { position: absolute; top: var(--ve-space-3); left: var(--ve-space-3); background: var(--ve-color-danger); color: #fff; font-size: var(--ve-text-xs); font-weight: 700; padding: 2px 10px; border-radius: 999px; }
.ve-pcard__body { padding: var(--ve-space-4); display: flex; flex-direction: column; gap: var(--ve-space-2); flex: 1; }
.ve-pcard__title { font-weight: 650; color: var(--ve-color-ink); text-decoration: none; }
.ve-pcard__title:hover { color: var(--ve-color-primary); }
.ve-pcard__price { color: var(--ve-color-ink); font-weight: 700; margin-top: auto; }
.ve-pcard .button, .ve-pcard .added_to_cart { display: inline-flex; align-items: center; justify-content: center; margin-top: var(--ve-space-2); padding: 0.5rem 1rem; background: var(--ve-color-primary); color: #fff; border-radius: var(--ve-radius-sm); text-decoration: none; font-weight: 600; font-size: var(--ve-text-sm); border: 0; cursor: pointer; }
.ve-pcard .button:hover { background: var(--ve-color-primary-hover); }
.ve-cat-card { position: relative; display: block; border-radius: var(--ve-radius); overflow: hidden; text-decoration: none; background: var(--ve-color-surface); border: 1px solid var(--ve-color-line); box-shadow: var(--ve-shadow-sm); transition: transform 0.2s var(--ve-ease), box-shadow 0.2s var(--ve-ease); }
.ve-cat-card:hover { transform: translateY(-4px); box-shadow: var(--ve-shadow); }
.ve-cat-card img { width: 100%; aspect-ratio: var(--ve-cat-ratio, 3 / 2); object-fit: cover; }
/* Overlay label placement is governed by the flex rule at .ve-cat-card--overlay
   .ve-cat-card__name above (position:absolute; inset:0; display:flex) together with
   the .ve-ovpos-* classes — do NOT redefine it here as a bottom strip, or the
   9-point alignment stops working. */
.ve-cat-card__name { display: block; padding: var(--ve-space-3) var(--ve-space-4) 0; font-weight: 700; color: var(--ve-color-ink); }
.ve-cat-card__count { display: block; padding: 0 var(--ve-space-4) var(--ve-space-4); font-size: var(--ve-text-sm); color: var(--ve-color-muted); }
/* Category image shape: round = circle, oval = ellipse. Frame drops away so the
   shape reads cleanly, and the label centres under it. Double-class selectors keep
   these ahead of --sq / base rules no matter the source order or theme child CSS. */
.ve-cat-card.ve-cat-card--round, .ve-cat-card.ve-cat-card--oval { border: 0; background: transparent; box-shadow: none; overflow: visible; }
.ve-cat-card.ve-cat-card--round:hover, .ve-cat-card.ve-cat-card--oval:hover { box-shadow: none; }
.ve-cat-card.ve-cat-card--round img, .ve-cat-card.ve-cat-card--round .ve-cat-card__ph { aspect-ratio: 1 / 1; border-radius: 50%; }
.ve-cat-card.ve-cat-card--oval img, .ve-cat-card.ve-cat-card--oval .ve-cat-card__ph { aspect-ratio: var(--ve-cat-ratio, 3 / 2); border-radius: 50%; }
/* Below/above label: centre it under the shape. Excludes overlay mode so the
   .ve-ovpos-* text-align keeps control there. */
.ve-cat-card.ve-cat-card--round:not(.ve-cat-card--overlay) .ve-cat-card__name, .ve-cat-card.ve-cat-card--oval:not(.ve-cat-card--overlay) .ve-cat-card__name,
.ve-cat-card.ve-cat-card--round:not(.ve-cat-card--overlay) .ve-cat-card__count, .ve-cat-card.ve-cat-card--oval:not(.ve-cat-card--overlay) .ve-cat-card__count { text-align: center; padding-inline: var(--ve-space-2); }
/* Overlay text ON a circle/ellipse: clip the gradient to the shape so it matches
   the image, and keep the flex + .ve-ovpos-* alignment working. A touch more
   padding keeps corner-positioned text inside the curve. */
.ve-cat-card.ve-cat-card--round.ve-cat-card--overlay .ve-cat-card__name,
.ve-cat-card.ve-cat-card--oval.ve-cat-card--overlay .ve-cat-card__name { border-radius: 50%; overflow: hidden; padding: clamp(1rem, 12%, 2.5rem); }

/* Pricing / packages table (homepage Pricing block + product Packages tab) */
.ve-pricing { display: grid; grid-template-columns: repeat(var(--ve-price-cols, 3), minmax(0, 1fr)); gap: var(--ve-space-6); align-items: start; }
@media (max-width: 900px) { .ve-pricing { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }
.ve-price-card { position: relative; display: flex; flex-direction: column; gap: var(--ve-space-3); background: var(--ve-color-surface); border: 1px solid var(--ve-color-line); border-radius: var(--ve-radius); padding: var(--ve-space-8) var(--ve-space-6); box-shadow: var(--ve-shadow-sm); }
.ve-price-card--featured { border-color: var(--ve-color-primary); box-shadow: var(--ve-shadow); }
.ve-price-card__badge { position: absolute; top: calc(-1 * var(--ve-space-3)); left: var(--ve-space-6); background: var(--ve-color-primary); color: #fff; font-size: var(--ve-text-xs, 0.72rem); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.35em 0.85em; border-radius: 999px; }
.ve-price-card__name { margin: 0; font-size: var(--ve-text-xl, 1.4rem); }
.ve-price-card__price { margin: 0; font-weight: 800; line-height: 1.1; }
.ve-price-card__amt { font-size: clamp(2rem, 4vw, 2.6rem); letter-spacing: -0.02em; }
.ve-price-card__old { color: var(--ve-color-muted); font-weight: 600; font-size: 1.15rem; margin-right: 0.3em; }
.ve-price-card__note { color: var(--ve-color-muted); margin: 0; }
.ve-price-card__features { list-style: none; margin: var(--ve-space-3) 0; padding: 0; display: flex; flex-direction: column; }
.ve-price-card__features li { position: relative; padding: var(--ve-space-2) 0 var(--ve-space-2) 1.6em; border-top: 1px solid var(--ve-color-line); }
.ve-price-card__features li::before { content: "✓"; position: absolute; left: 0; top: var(--ve-space-2); color: var(--ve-color-primary); font-weight: 700; }
.ve-price-card__cta { margin-top: auto; text-align: center; justify-content: center; }
.ve-price-card__cta--ghost { background: transparent; color: var(--ve-color-ink); border: 1px solid var(--ve-color-line); }
.ve-price-card__cta--ghost:hover { border-color: var(--ve-color-primary); color: var(--ve-color-primary); }
/* Packages tab on the product page */
.ve-packages-tab .ve-pricing { margin-top: var(--ve-space-2); }

/* Blog cards */
.ve-archive__grid { grid-template-columns: repeat(var(--ve-home-cols, 3), minmax(0, 1fr)); }
@media (max-width: 900px) { .ve-archive__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ve-archive__grid { grid-template-columns: 1fr; } }
.ve-card { display: flex; flex-direction: column; background: var(--ve-color-surface); border: 1px solid var(--ve-color-line); border-radius: var(--ve-radius); overflow: hidden; box-shadow: var(--ve-shadow-sm); transition: transform 0.2s var(--ve-ease), box-shadow 0.2s var(--ve-ease); }
.ve-card:hover { transform: translateY(-4px); box-shadow: var(--ve-shadow); }
.ve-card__media { display: block; }
.ve-card__media img { width: 100%; aspect-ratio: var(--ve-card-ratio, 16 / 9); object-fit: cover; }

/* Archive list layout (wide horizontal rows) */
.ve-archive__list { display: flex; flex-direction: column; gap: var(--ve-space-6); }
.ve-archive__list .ve-card { flex-direction: row; align-items: stretch; }
.ve-archive__list .ve-card__media { flex: 0 0 38%; max-width: 340px; }
.ve-archive__list .ve-card__media img { height: 100%; }
.ve-archive__list .ve-card__body { justify-content: center; }
@media (max-width: 640px) { .ve-archive__list .ve-card { flex-direction: column; } .ve-archive__list .ve-card__media { flex-basis: auto; max-width: none; } }
.ve-card__body { padding: var(--ve-space-6); display: flex; flex-direction: column; gap: var(--ve-space-2); flex: 1; }
.ve-card__cat { align-self: flex-start; font-size: var(--ve-text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ve-color-primary); text-decoration: none; }
.ve-card__title { font-size: var(--ve-text-lg); }
.ve-card__title a { color: var(--ve-color-ink); text-decoration: none; }
.ve-card__title a:hover { color: var(--ve-color-primary); }
.ve-card__excerpt { color: var(--ve-color-body); flex: 1; }
.ve-card__meta { font-size: var(--ve-text-sm); }

/* ==========================================================================
   13. TWO-COLUMN LAYOUT + WIDGETS (archive/blog sidebar)
   ========================================================================== */
.ve-layout { display: block; }
.ve-layout--sidebar { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--ve-space-12); align-items: start; }
.ve-layout--sidebar.ve-layout--left { grid-template-columns: 300px minmax(0, 1fr); }
.ve-layout--sidebar.ve-layout--left .ve-layout__aside { order: -1; }
@media (max-width: 900px) { .ve-layout--sidebar, .ve-layout--sidebar.ve-layout--left { grid-template-columns: 1fr; } }
.ve-widget { margin-bottom: var(--ve-space-8); }
.ve-widget__title { font-size: var(--ve-text-lg); margin-bottom: var(--ve-space-3); }
.ve-widget ul { list-style: none; padding: 0; }
.ve-widget li { padding: var(--ve-space-2) 0; border-bottom: 1px solid var(--ve-color-line); }
.ve-widget a { text-decoration: none; color: var(--ve-color-body); }
.ve-widget a:hover { color: var(--ve-color-primary); }

.ve-archive__header { padding-block: var(--ve-space-8); }
.ve-crumbs { font-size: var(--ve-text-sm); color: var(--ve-color-muted); margin-bottom: var(--ve-space-3); }
.ve-crumbs a { color: var(--ve-color-muted); text-decoration: none; }
.ve-crumbs a:hover { color: var(--ve-color-primary); }

/* ==========================================================================
   14. FOOTER (redesigned)
   ========================================================================== */
.ve-footer { background: var(--ve-bg-footer, var(--ve-color-surface-alt)); border-top: 1px solid var(--ve-color-line); margin-top: var(--ve-space-16); padding-top: var(--ve-space-12); color: var(--ve-footer-color, var(--ve-color-muted)); font-size: var(--ve-footer-fs, var(--ve-text-sm)); }
.ve-footer a { color: var(--ve-footer-color, var(--ve-color-body)); text-decoration: none; }
.ve-footer a:hover { color: var(--ve-color-primary); }
/* Optional top footer bar (newsletter / Google Map / embed). */
.ve-footer__topbar { padding-block: var(--ve-space-8); border-bottom: 1px solid var(--ve-color-line); }
.ve-footer__topbar-inner iframe { width: 100%; border: 0; display: block; border-radius: var(--ve-radius); }
.ve-footer__topbar-inner > * { margin: 0 auto; }
/* Footer brand extras (branding paragraph + newsletter). */
.ve-footer__brand-text { color: var(--ve-footer-color, var(--ve-color-muted)); margin: var(--ve-space-3) 0; }
.ve-footer__brand-text > * + * { margin-top: var(--ve-space-2); }
.ve-footer__newsletter { margin: var(--ve-space-4) 0; max-width: 340px; }
.ve-footer__top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr); gap: var(--ve-space-12); padding-bottom: var(--ve-space-8); border-bottom: 1px solid var(--ve-color-line); padding-top: var(--ve-space-8); }
/* Footer with logo hidden → widgets span full width */
.ve-footer__top--nologo { grid-template-columns: 1fr; }
@media (max-width: 860px) { .ve-footer__top { grid-template-columns: 1fr; } }
.ve-footer__brand .ve-brand { display: inline-flex; align-items: center; gap: var(--ve-space-3); color: var(--ve-color-ink); }
.ve-footer .custom-logo { max-height: var(--ve-footer-logo-size, 40px); width: auto; }
/* Column count driven by the Customizer (1 = full width) */
.ve-footer__cols { display: grid; grid-template-columns: repeat(var(--ve-footer-cols, 4), minmax(0, 1fr)); gap: var(--ve-space-8); }
@media (max-width: 700px) { .ve-footer__cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .ve-footer__cols { grid-template-columns: 1fr; } }
.ve-footer__title { color: var(--ve-footer-title-color, var(--ve-footer-color, var(--ve-color-ink))); font-size: var(--ve-footer-title-size, var(--ve-text-base)); margin-bottom: var(--ve-space-3); }
.ve-footer__col ul, .ve-footer__menu { list-style: none; padding: 0; margin: 0; }
.ve-footer__col li, .ve-footer__menu li { padding: var(--ve-space-1) 0; }
/* Bottom "all rights reserved" band — full-width, own background */
.ve-footer__bottombar { background: var(--ve-bg-footer-bottom, transparent); margin-top: var(--ve-space-8); padding-block: var(--ve-space-4); }
.ve-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--ve-space-4); flex-wrap: wrap; }
.ve-footer__bottom, .ve-footer__bottom .ve-muted { color: var(--ve-footer-bottom-color, var(--ve-color-muted)); }
.ve-footer__bottom a:not(.ve-social__link) { color: var(--ve-footer-bottom-color, var(--ve-color-body)); }
.ve-footer__bottom-extra { display: flex; align-items: center; gap: var(--ve-space-6); flex-wrap: wrap; }
.ve-footer__bottom[data-align="left"] { justify-content: flex-start; }
.ve-footer__bottom[data-align="center"] { justify-content: center; text-align: center; }
.ve-footer__bottom[data-align="right"] { justify-content: flex-end; }
.ve-footer__bottom[data-align="center"] .ve-footer__menu--bottom { justify-content: center; width: 100%; }
.ve-footer__menu--bottom { display: flex; gap: var(--ve-space-4); flex-wrap: wrap; }

/* ==========================================================================
   15. AD SLOTS
   ========================================================================== */
.ve-ad { margin: var(--ve-space-8) auto; text-align: center; max-width: 100%; overflow: hidden; }
.ve-ad__label { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ve-color-muted); margin-bottom: var(--ve-space-2); }
.ve-ad--header { margin-block: var(--ve-space-4); }
.ve-ad ins, .ve-ad iframe, .ve-ad img { max-width: 100%; height: auto; }

/* ==========================================================================
   16. YOUTUBE FACADE
   ========================================================================== */
.ve-yt { margin-top: var(--ve-space-6); max-width: 360px; }
.ve-yt__facade { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--ve-radius); background-size: cover; background-position: center; cursor: pointer; overflow: hidden; }
.ve-yt__facade::before { content: ""; position: absolute; inset: 0; background: rgba(15,23,42,0.25); transition: background 0.2s var(--ve-ease); }
.ve-yt__facade:hover::before { background: rgba(15,23,42,0.1); }
.ve-yt__play { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; display: grid; place-items: center; background: #ff0000; color: #fff; border-radius: 50%; font-size: 1.5rem; padding-left: 4px; box-shadow: var(--ve-shadow); }
.ve-yt__sub { margin-top: var(--ve-space-3); }

/* ==========================================================================
   17. WOOCOMMERCE SHOP GRID POLISH
   ========================================================================== */
/* Breathing room below the header on shop/archive pages */
.ve-shop { padding-block: var(--ve-space-12) var(--ve-space-8); }
.ve-shop__header { margin-bottom: var(--ve-space-8); }
/* Fixed column count from the Customizer; override Woo's % widths + floats */
.woocommerce ul.products,
.woocommerce ul.products.columns-1,
.woocommerce ul.products.columns-2,
.woocommerce ul.products.columns-3,
.woocommerce ul.products.columns-4,
.woocommerce ul.products.columns-5,
.woocommerce ul.products.columns-6 {
	display: grid !important;
	grid-template-columns: repeat(var(--ve-shop-cols, 3), minmax(0, 1fr)) !important;
	gap: var(--ve-space-8) var(--ve-space-6); list-style: none; margin: 0; padding: 0;
}
/* Kill WooCommerce's clearfix pseudo-elements — in a grid they become phantom
   cells that leave the first column empty. */
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none !important; display: none !important; }
.woocommerce ul.products li.product,
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last {
	width: auto !important; margin: 0 !important; float: none !important; clear: none !important;
	display: flex; flex-direction: column;
	background: var(--ve-card-bg, transparent);
	border-radius: var(--ve-radius);
	padding: var(--ve-card-pad, 0);
}
.woocommerce ul.products li.product a img { border-radius: var(--ve-radius); margin-bottom: var(--ve-space-3); width: 100%; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: var(--ve-shop-title-size, var(--ve-text-lg)); font-weight: 700;
	padding: var(--ve-card-title-pad, 0);
	color: var(--ve-card-title-color, var(--ve-color-ink));
	text-align: var(--ve-card-title-align, left);
}
.woocommerce ul.products li.product .price {
	color: var(--ve-card-price-color, var(--ve-price-color, var(--ve-color-ink)));
	font-size: var(--ve-card-price-size, inherit);
	font-weight: var(--ve-card-price-weight, 700);
	font-style: var(--ve-card-price-style, normal);
	text-align: var(--ve-card-price-align, left);
	padding: var(--ve-card-price-pad, 0);
}
/* Shop-card add-to-cart button (specificity beats Woo's a.button) */
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product a.added_to_cart {
	align-self: var(--ve-card-atc-align, flex-start);
	margin-top: var(--ve-space-2);
	background: var(--ve-card-atc-bg, var(--ve-color-primary));
	color: var(--ve-card-atc-color, #fff);
	font-size: var(--ve-card-atc-size, var(--ve-text-sm));
	font-weight: var(--ve-card-atc-weight, 600);
	font-style: var(--ve-card-atc-style, normal);
	border: 0; border-radius: var(--ve-radius-sm); padding: 0.55rem 1.1rem;
}
.woocommerce ul.products li.product a.button:hover { filter: brightness(0.93); color: var(--ve-card-atc-color, #fff); }
/* Mobile columns. Selectors must include .columns-N so they match the base
   rule's specificity (WooCommerce always adds a .columns-N class); being later
   in the source, they then win. Without this the desktop count sticks on phones. */
@media (max-width: 700px) {
	.woocommerce ul.products,
	.woocommerce ul.products.columns-1,
	.woocommerce ul.products.columns-2,
	.woocommerce ul.products.columns-3,
	.woocommerce ul.products.columns-4,
	.woocommerce ul.products.columns-5,
	.woocommerce ul.products.columns-6 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: var(--ve-space-4) !important; }
}
@media (max-width: 360px) {
	.woocommerce ul.products,
	.woocommerce ul.products.columns-1,
	.woocommerce ul.products.columns-2,
	.woocommerce ul.products.columns-3,
	.woocommerce ul.products.columns-4,
	.woocommerce ul.products.columns-5,
	.woocommerce ul.products.columns-6 { grid-template-columns: 1fr !important; }
}
.woocommerce .woocommerce-result-count, .woocommerce .woocommerce-ordering { margin-bottom: var(--ve-space-6); }
/* Related / upsell products spacing */
.woocommerce .related.products, .woocommerce .upsells.products { margin-top: var(--ve-space-16); }
.woocommerce .related.products > h2, .woocommerce .upsells.products > h2 { font-size: var(--ve-text-xl); margin-bottom: var(--ve-space-6); }
.ve-page__header { padding-block: var(--ve-space-8); }
.ve-page__header h1 { font-size: var(--ve-text-2xl); }

/* Shop filter layout (filters sidebar + products) */
.ve-shop-layout.has-filters { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--ve-space-8); align-items: start; }
.ve-shop-filters { position: sticky; top: calc(var(--ve-header-h) + 1rem); }
.ve-filter-widget { margin-bottom: var(--ve-space-6); }
.ve-filter-widget__title { font-size: var(--ve-text-base); margin-bottom: var(--ve-space-3); color: var(--ve-color-ink); }
.ve-shop-filters ul { list-style: none; padding: 0; margin: 0; }
.ve-shop-filters li { padding: var(--ve-space-1) 0; }
.ve-shop-filters .price_slider_amount .button, .ve-shop-filters .button { background: var(--ve-color-primary); color: #fff; border: 0; border-radius: var(--ve-radius-sm); padding: 0.4rem 0.9rem; }
.ve-shop-toolbar { margin-bottom: var(--ve-space-4); }
.ve-sale-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 0.45rem 1rem; border: 1px solid var(--ve-color-line); border-radius: 999px; text-decoration: none; color: var(--ve-color-body); font-weight: 600; font-size: var(--ve-text-sm); }
.ve-sale-toggle.is-active { background: var(--ve-sale-color, var(--ve-color-accent)); color: #1f2937; border-color: transparent; }
.ve-filters-toggle { display: none; align-items: center; gap: 8px; padding: 0.6rem 1rem; border: 1px solid var(--ve-color-line); border-radius: var(--ve-radius-sm); background: transparent; cursor: pointer; margin-bottom: var(--ve-space-4); font-weight: 600; color: var(--ve-color-ink); }
@media (max-width: 900px) {
	.ve-shop-layout.has-filters { grid-template-columns: 1fr; }
	.ve-filters-toggle { display: inline-flex; }
	.ve-shop-filters { display: none; position: static; }
	.ve-shop-filters[data-open="true"] { display: block; }
}

/* Cart & Checkout primary buttons — colorable + sizable via Customizer */
.woocommerce #place_order,
.woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce a.button.checkout,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	background: var(--ve-cart-btn-bg, var(--ve-color-primary)) !important;
	color: var(--ve-cart-btn-color, #fff) !important;
	font-size: var(--ve-cart-btn-fs, var(--ve-text-lg)) !important;
	padding: var(--ve-cart-btn-pad, 0.9rem) calc(var(--ve-cart-btn-pad, 0.9rem) * 2) !important;
	border: 0 !important; border-radius: var(--ve-radius-sm) !important; font-weight: 700 !important;
	line-height: 1.2 !important;
}
.woocommerce #place_order:hover,
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover { filter: brightness(0.93); }