/* =========================================================================
   VGDev "Lumora" design layer (v5.0.1)

   Loaded after vgdev.css. Presentation only: markup, scripts, SEO and
   WooCommerce behaviour are untouched.

   RULE FOLLOWED THROUGHOUT: never change a section's background without
   also owning the colour of every piece of text inside it. The sections
   that ship white text (.vg-h2--light / .vg-lead--light) are listed
   explicitly below and are either kept dark, or flipped to light WITH
   their text colours flipped in the same block.
   ========================================================================= */

/* ---------- 1. Tokens: Lumora structure, VGDev colours ---------- */
body.vgdev{
	--vg-black:#0a0a0a;
	--vg-muted:#8d8d8d;
	--vg-line:#e6e5e2;
	--vg-surface:#f1f0ee;
	--vg-surface-2:#e3e2df;

	--vg-r:2rem;
	--vg-r-sm:1.25rem;
	--vg-r-ctl:.875rem;
	--vg-pill:9999px;
	--vg-maxw:88rem;

	--vg-ease:cubic-bezier(.22,1,.36,1);

	font-family:"Onest","Averta","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
	-webkit-font-smoothing:antialiased;
}

body.vgdev .vg-container{max-width:var(--vg-maxw);}

/* ---------- 2. Typography ---------- */
body.vgdev h1,body.vgdev h2,body.vgdev h3,
body.vgdev .vg-h1,body.vgdev .vg-h2,body.vgdev .vg-h3{letter-spacing:-.02em;}
body.vgdev .vg-h2{font-weight:600;line-height:1.1;}

/* Eyebrow: Lumora dot opener. Colour inherits from its section so it is
   readable on both light and dark backgrounds. */
body.vgdev .vg-eyebrow{
	display:inline-flex;align-items:center;gap:.5rem;
	font-size:.875rem;font-weight:500;letter-spacing:0;text-transform:none;
}
body.vgdev .vg-eyebrow::before{
	content:"";width:.375rem;height:.375rem;border-radius:50%;
	background:var(--vg-accent);flex:none;
}

/* ---------- 3. Pill buttons ---------- */
body.vgdev .vg-btn{
	display:inline-flex;align-items:center;gap:.75rem;
	border-radius:var(--vg-pill);
	font-size:.875rem;font-weight:500;letter-spacing:0;
	padding:.875rem 1.75rem;
	transition:transform .3s var(--vg-ease),box-shadow .3s var(--vg-ease),background .25s,color .25s,border-color .25s;
}
body.vgdev .vg-btn:hover{transform:scale(1.04);}
body.vgdev .vg-btn--primary{background:var(--vg-black);color:#fff;border:0;}
body.vgdev .vg-btn--primary:hover{background:var(--vg-black);color:#fff;box-shadow:0 14px 34px rgba(10,10,10,.26);}

/* Buying actions keep the brand gradient so the money path stays obvious */
body.vgdev .single_add_to_cart_button,
body.vgdev .vg-plugpop__btn,
body.vgdev .vg-minicart__btn--primary{
	background:var(--vg-grad)!important;color:#fff!important;border:0!important;
	border-radius:var(--vg-pill)!important;
}

/* ---------- 4. Light sections: rounder, calmer ---------- */
body.vgdev .vg-portfolio,
body.vgdev .vg-snippets{background:#fff;}
body.vgdev .vg-plugins{background:var(--vg-surface);}

/* ---------- 5. DARK SECTIONS: left dark on purpose ----------
   .vg-about, .vg-features and .vg-cta all contain .vg-h2--light and
   .vg-lead--light (white text). They stay dark. In the Lumora language
   these read as the black ink panels, so this is on-style, not a
   compromise. Only the radius and spacing are modernised. */
body.vgdev .vg-about,
body.vgdev .vg-features,
body.vgdev .vg-cta{color:#fff;}
body.vgdev .vg-about .vg-eyebrow,
body.vgdev .vg-features .vg-eyebrow,
body.vgdev .vg-cta .vg-eyebrow{color:rgba(255,255,255,.7);}
body.vgdev .vg-about .vg-eyebrow::before,
body.vgdev .vg-features .vg-eyebrow::before,
body.vgdev .vg-cta .vg-eyebrow::before{background:rgba(255,255,255,.6);}

/* ---------- 6. Hero: light surface, ink editor ---------- */
body.vgdev .vg-hero2{
	background:linear-gradient(180deg,#f3f2f0 0%,#e7e6e3 100%);
	color:#111;
	border-radius:0 0 var(--vg-r) var(--vg-r);
}
body.vgdev .vg-hero2__grid{
	background-image:linear-gradient(rgba(17,17,17,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(17,17,17,.05) 1px,transparent 1px);
}
body.vgdev .vg-hero2__orb--a{background:radial-gradient(circle,rgba(233,77,53,.26),transparent 65%);}
body.vgdev .vg-hero2__orb--b{background:radial-gradient(circle,rgba(17,17,17,.08),transparent 65%);}
body.vgdev .vg-hero2__scan{display:none;}
body.vgdev .vg-hero2__spot{background:radial-gradient(circle,rgba(233,77,53,.15),transparent 62%);}

body.vgdev .vg-hero2__badge{
	background:#fff;border:1px solid var(--vg-line);
	color:rgba(17,17,17,.72);text-transform:none;letter-spacing:0;
	font-size:.8rem;font-weight:500;padding:.5rem 1rem;
}
body.vgdev .vg-hero2__title{color:#111;font-weight:600;}
body.vgdev .vg-hero2__sub{color:rgba(17,17,17,.62);}
body.vgdev .vg-hero2__mini{border-top:1px solid rgba(17,17,17,.12);}
body.vgdev .vg-hero2__mini dd{color:rgba(17,17,17,.5);text-transform:none;letter-spacing:0;font-size:.8rem;}
body.vgdev .vg-hero2__mini dt{font-weight:600;}

/* The editor is the ink card of the hero */
body.vgdev .vg-hero2__ide{
	border-radius:var(--vg-r-sm);
	background:#0d0d10;
	border:0;
	box-shadow:0 34px 90px rgba(10,10,10,.30);
}
body.vgdev .vg-hero2__chrome{background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.07);}
body.vgdev .vg-hero2__status{background:rgba(255,255,255,.03);}
body.vgdev .vg-hero2__preview{border-radius:var(--vg-r-sm);border:1px solid rgba(255,255,255,.14);}

/* Ticker as a hairline band on the light hero */
body.vgdev .vg-hero2__ticker{
	border-top:1px solid rgba(17,17,17,.1);
	border-bottom:0;background:transparent;
}
body.vgdev .vg-hero2__track span{color:rgba(17,17,17,.55);font-size:.75rem;font-weight:500;letter-spacing:.025em;}
body.vgdev .vg-hero2__track span::before{background:var(--vg-accent);}

/* ---------- 7. "We build better" band ---------- */
.vg-band{background:#fff;}
.vg-band__list{
	display:flex;flex-direction:column;gap:.75rem;
	max-width:var(--vg-maxw);margin-inline:auto;
	padding:2.5rem 1.25rem;list-style:none;
}
.vg-band__list li{flex:1;}
.vg-band__tile{
	display:grid;place-items:center;height:5.5rem;
	border-radius:var(--vg-pill);
	font-size:1.5rem;font-weight:500;letter-spacing:-.01em;
	transition:transform .35s var(--vg-ease);
}
.vg-band__tile:hover{transform:scale(1.03);}
.vg-band__tile--light{background:var(--vg-surface);color:#111;}
.vg-band__tile--accent{background:var(--vg-grad);color:#fff;}
.vg-band__tile--dark{background:var(--vg-black);color:#fff;}
.vg-band__tile--ghost{background:rgba(241,240,238,.6);color:rgba(17,17,17,.4);}
@media (min-width:640px){
	.vg-band__list{flex-direction:row;gap:1rem;padding-inline:2rem;}
	.vg-band__tile{height:8.5rem;font-size:2rem;}
}

/* ---------- 8. Footer: ink slab with rounded top ---------- */
body.vgdev .vg-footer{
	position:relative;overflow:hidden;
	border-radius:var(--vg-r) var(--vg-r) 0 0;
}
body.vgdev .vg-footer > *{position:relative;z-index:1;}
/* Watermark sits behind everything and never competes with real text */
body.vgdev .vg-footer__mark{
	position:absolute;left:0;right:0;bottom:-2rem;z-index:0;
	text-align:center;pointer-events:none;user-select:none;
	font-weight:700;line-height:1;font-size:clamp(5rem,15vw,12rem);
	letter-spacing:-.04em;color:rgba(255,255,255,.04);
}
@media (max-width:768px){body.vgdev .vg-footer__mark{display:none;}}

body.vgdev .vg-foot-col h3{
	font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.025em;
	color:rgba(255,255,255,.45);
}
body.vgdev .vg-foot-col a{font-size:.875rem;}

/* ---------- 9. Prefooter ---------- */
body.vgdev .vg-prefooter{background:var(--vg-surface);border-top:1px solid var(--vg-line);}
body.vgdev .vg-prefooter__col{border-radius:var(--vg-r-sm);}

/* ---------- 10. Header & nav overlay ---------- */
body.vgdev .vg-menu-btn{
	display:none;align-items:center;gap:.5rem;
	border:1px solid var(--vg-line);background:rgba(255,255,255,.5);
	backdrop-filter:blur(4px);border-radius:var(--vg-r-ctl);
	padding:.5rem 1rem;font-size:.72rem;font-weight:500;
	text-transform:uppercase;letter-spacing:.05em;color:#111;
	cursor:pointer;transition:background .2s,transform .3s var(--vg-ease);
}
body.vgdev .vg-menu-btn:hover{background:#fff;transform:scale(1.05);}
body.vgdev .vg-header.is-stuck .vg-menu-btn{
	background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2);color:#fff;
}
@media (min-width:1024px){body.vgdev .vg-menu-btn{display:inline-flex;}}

.vg-navmenu{
	position:fixed;inset:0;z-index:1300;display:flex;flex-direction:column;
	background:var(--vg-black);color:#fff;
	opacity:0;visibility:hidden;transition:opacity .35s var(--vg-ease),visibility .35s;
}
.vg-navmenu.is-open{opacity:1;visibility:visible;}
body.vg-nav-lock{overflow:hidden;}
.vg-navmenu__top{
	display:flex;align-items:center;justify-content:space-between;
	max-width:var(--vg-maxw);width:100%;margin-inline:auto;padding:1.25rem;
}
@media (min-width:640px){.vg-navmenu__top{padding:1.5rem 2rem;}}
.vg-navmenu__brand img{height:26px;width:auto;filter:brightness(0) invert(1);}
.vg-navmenu__close{
	display:inline-flex;align-items:center;gap:.5rem;
	border:1px solid rgba(255,255,255,.18);border-radius:var(--vg-r-ctl);
	padding:.5rem 1rem;font-size:.72rem;font-weight:500;
	text-transform:uppercase;letter-spacing:.05em;
	color:rgba(255,255,255,.75);background:none;cursor:pointer;transition:.25s;
}
.vg-navmenu__close:hover{border-color:rgba(255,255,255,.45);color:#fff;}
.vg-navmenu__nav{
	flex:1;display:flex;flex-direction:column;justify-content:center;
	max-width:var(--vg-maxw);width:100%;margin-inline:auto;padding:2rem 1.25rem;
	overflow-y:auto;
}
@media (min-width:640px){.vg-navmenu__nav{padding-inline:2rem;}}
.vg-navmenu__nav ul{list-style:none;margin:0;padding:0;display:grid;gap:.1rem;}
.vg-navmenu__nav a{
	display:flex;align-items:baseline;gap:1rem;padding-block:.4rem;
	font-size:1.75rem;font-weight:600;letter-spacing:-.02em;
	color:rgba(255,255,255,.72);text-decoration:none;
	transform:translateY(1rem);opacity:0;
	transition:transform .5s ease-out,opacity .5s ease-out,color .3s;
}
.vg-navmenu.is-open .vg-navmenu__nav a{transform:none;opacity:1;}
.vg-navmenu__nav li:nth-child(1) a{transition-delay:.08s}
.vg-navmenu__nav li:nth-child(2) a{transition-delay:.125s}
.vg-navmenu__nav li:nth-child(3) a{transition-delay:.17s}
.vg-navmenu__nav li:nth-child(4) a{transition-delay:.215s}
.vg-navmenu__nav li:nth-child(5) a{transition-delay:.26s}
.vg-navmenu__nav li:nth-child(6) a{transition-delay:.305s}
.vg-navmenu__nav li:nth-child(7) a{transition-delay:.35s}
.vg-navmenu__nav a:hover{color:#fff;}
.vg-navmenu__i{font-size:.9rem;font-weight:400;color:rgba(255,255,255,.3);transition:color .3s;}
.vg-navmenu__nav a:hover .vg-navmenu__i{color:var(--vg-accent);}
@media (min-width:640px){.vg-navmenu__nav a{font-size:2.75rem;}}
@media (min-width:1024px){.vg-navmenu__nav a{font-size:3.25rem;}}
.vg-navmenu__bot{
	display:flex;flex-direction:column;gap:.75rem;
	max-width:var(--vg-maxw);width:100%;margin-inline:auto;
	border-top:1px solid rgba(255,255,255,.1);padding:1.5rem 1.25rem;
	font-size:.72rem;text-transform:uppercase;letter-spacing:.025em;
	color:rgba(255,255,255,.45);
}
@media (min-width:640px){
	.vg-navmenu__bot{flex-direction:row;justify-content:space-between;padding-inline:2rem;}
}
.vg-navmenu__bot a{color:rgba(255,255,255,.75);text-decoration:none;}
.vg-navmenu__bot a:hover{color:#fff;text-decoration:underline;}

/* ---------- 11. Shop archive ----------
   The hero markup forces .vg-h2--light (white). Flipping it to a light
   surface therefore REQUIRES flipping those text colours in the same
   block, which is exactly what happens here. */
body.vgdev .vg-shop-hero{background:var(--vg-surface);color:#111;}
body.vgdev .vg-shop-hero::before,
body.vgdev .vg-shop-hero::after{display:none;}
body.vgdev .vg-shop-hero .vg-hero__glow{display:none;}
body.vgdev .vg-shop-hero .vg-h2,
body.vgdev .vg-shop-hero .vg-h2--light,
body.vgdev .vg-shop-hero h1{color:#111;}
body.vgdev .vg-shop-hero .vg-lead,
body.vgdev .vg-shop-hero .vg-lead--light{color:rgba(17,17,17,.62);}
body.vgdev .vg-shop-hero .vg-breadcrumb{color:rgba(17,17,17,.5);}
body.vgdev .vg-shop-hero .vg-breadcrumb a{color:rgba(17,17,17,.7);}
body.vgdev .vg-shop-hero .vg-breadcrumb a:hover{color:var(--vg-accent);}

body.vgdev .vg-filter{
	border-radius:var(--vg-pill);font-weight:500;font-size:.875rem;
}
body.vgdev .vg-filter.is-active{background:var(--vg-black);color:#fff;border-color:transparent;}
body.vgdev ul.products li.product{border-radius:var(--vg-r-sm);}

/* ---------- 12. Single product ---------- */
body.vgdev .vgdev-single .product_title{font-weight:600;}
body.vgdev .vg-chip{border-radius:var(--vg-pill);font-weight:500;}

/* ---------- 13. Blog / article cards ---------- */
body.vgdev .vg-snip{border-radius:var(--vg-r-sm);}

/* ---------- 14. Popups inherit the new radii ---------- */
body.vgdev .vg-minicart__panel,
body.vgdev .vg-search-modal__panel,
body.vgdev .vg-plugpop{border-radius:var(--vg-r-sm);}
@media (max-width:900px){
	body.vgdev .vg-minicart__panel{border-radius:0;}
}

/* ---------- 15. Focus ring ---------- */
body.vgdev a:focus-visible,body.vgdev button:focus-visible{
	outline:2px solid var(--vg-accent);outline-offset:2px;
}

/* Fail-safe: the overlay ships with [hidden]; keep that authoritative */
.vg-navmenu[hidden]{display:none!important;}

/* =========================================================
   Value messaging: bundle bar, lifetime maths, trust strip
   Every block states both its background and its text colour.
   ========================================================= */

/* ---- Bundle discount bar ---- */
.vg-bundlebar{
	display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;
	margin:0 0 26px;padding:18px 22px;
	border:1px solid var(--vg-line);border-radius:var(--vg-r-sm);
	background:#fff;color:#111;
}
.vg-bundlebar__lead{display:flex;align-items:center;gap:12px;}
.vg-bundlebar__lead strong{font-size:1rem;font-weight:700;color:#111;}
.vg-bundlebar__badge{
	display:inline-flex;align-items:center;
	padding:6px 12px;border-radius:var(--vg-pill);
	background:var(--vg-grad);color:#fff;
	font-size:.78rem;font-weight:800;letter-spacing:.02em;white-space:nowrap;
}
.vg-bundlebar__tiers{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0;}
.vg-bundlebar__tiers li{
	display:inline-flex;align-items:baseline;gap:7px;
	padding:7px 13px;border-radius:var(--vg-pill);
	border:1px solid var(--vg-line);background:var(--vg-surface);color:rgba(17,17,17,.75);
	font-size:.85rem;
}
.vg-bundlebar__tiers li.is-reached{
	background:var(--vg-black);border-color:transparent;color:#fff;
}
.vg-bundlebar__n{font-weight:800;}
.vg-bundlebar__p{font-weight:700;color:var(--vg-accent);}
.vg-bundlebar__tiers li.is-reached .vg-bundlebar__p{color:#fff;}
.vg-bundlebar__status{flex:1 1 100%;margin:0;font-size:.92rem;color:rgba(17,17,17,.8);}
.vg-bundlebar__status strong{color:var(--vg-accent);font-weight:800;}
.vg-bundlebar__note{flex:1 1 100%;margin:0;font-size:.8rem;color:rgba(17,17,17,.5);}

/* Inside the product summary it sits tighter */
.vg-product__summary .vg-bundlebar{margin:18px 0 0;padding:16px 18px;}

@media (max-width:600px){
	.vg-bundlebar{padding:16px;gap:12px 14px;}
	.vg-bundlebar__tiers li{padding:6px 11px;font-size:.8rem;}
}

/* ---- Lifetime vs subscription ---- */
.vg-value{
	margin:20px 0 0;padding:20px 22px;
	border:1px solid var(--vg-line);border-radius:var(--vg-r-sm);
	background:var(--vg-surface);color:#111;
}
.vg-value__head{
	margin:0 0 14px;font-size:.74rem;font-weight:800;
	letter-spacing:.1em;text-transform:uppercase;color:var(--vg-accent);
}
.vg-value__rows{display:grid;gap:10px;}
.vg-value__row{
	display:grid;grid-template-columns:1fr auto;gap:2px 14px;
	padding:14px 16px;border-radius:12px;background:#fff;border:1px solid var(--vg-line);
}
.vg-value__row.is-alt{background:transparent;border-style:dashed;opacity:.9;}
.vg-value__label{font-weight:700;font-size:.95rem;color:#111;}
.vg-value__val{font-weight:800;font-size:1.05rem;color:#111;text-align:right;white-space:nowrap;}
.vg-value__val small{font-weight:600;font-size:.78rem;color:rgba(17,17,17,.55);}
.vg-value__val .woocommerce-Price-amount{color:inherit;}
.vg-value__sub{grid-column:1 / -1;font-size:.82rem;color:rgba(17,17,17,.58);}
.vg-value__row.is-ours .vg-value__val{color:var(--vg-accent);}
.vg-value__save{
	margin:12px 0 0;padding:11px 14px;border-radius:12px;
	background:rgba(233,77,53,.09);border:1px solid rgba(233,77,53,.25);
	font-weight:700;font-size:.92rem;color:#111;
}
.vg-value__points{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:7px;}
.vg-value__points li{
	position:relative;padding-left:22px;font-size:.88rem;color:rgba(17,17,17,.72);
}
.vg-value__points li::before{
	content:"";position:absolute;left:0;top:.48em;
	width:8px;height:8px;border-radius:50%;background:var(--vg-accent);
}

/* ---- Trust strip ---- */
.vg-trust{background:var(--vg-surface);border-top:1px solid var(--vg-line);padding:clamp(44px,6vw,76px) 0;color:#111;}
.vg-trust__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;}
.vg-trust__item{
	padding:22px;border-radius:var(--vg-r-sm);
	background:#fff;border:1px solid var(--vg-line);
}
.vg-trust__item strong{display:block;margin-bottom:8px;font-size:1rem;font-weight:700;color:#111;}
.vg-trust__item span{display:block;font-size:.9rem;line-height:1.6;color:rgba(17,17,17,.62);}
.vg-trust__meta{margin:20px 0 0;font-size:.88rem;color:rgba(17,17,17,.55);}

/* =========================================================
   Product-first homepage: hero plugin panel + category catalogue
   ========================================================= */

/* ---- Hero plugin panel ---- */
.vg-hplist{
	display:flex;flex-direction:column;
	border-radius:var(--vg-r-sm);
	background:#fff;border:1px solid var(--vg-line);
	box-shadow:0 30px 70px rgba(17,17,17,.12);
	overflow:hidden;color:#111;
}
.vg-hplist__head{
	display:flex;align-items:center;justify-content:space-between;gap:12px;
	padding:16px 18px 12px;
}
.vg-hplist__title{font-size:1rem;font-weight:800;color:#111;}
.vg-hplist__badge{
	display:inline-flex;align-items:center;gap:7px;
	padding:5px 11px;border-radius:var(--vg-pill);
	background:rgba(233,77,53,.1);border:1px solid rgba(233,77,53,.28);
	color:var(--vg-accent);font-size:.72rem;font-weight:800;white-space:nowrap;
}
.vg-hplist__badge::before{
	content:"";width:7px;height:7px;border-radius:50%;background:var(--vg-accent);
}
.vg-hplist__sub{
	margin:0;padding:0 18px 14px;
	font-size:.84rem;color:rgba(17,17,17,.55);
	border-bottom:1px solid var(--vg-line);
}
.vg-hplist__items{
	list-style:none;margin:0;padding:6px;
	max-height:340px;overflow-y:auto;
}
.vg-hplist__items a{
	display:flex;align-items:center;gap:12px;
	padding:10px 12px;border-radius:12px;
	text-decoration:none;transition:background .18s;
}
.vg-hplist__items a:hover{background:var(--vg-surface);}
.vg-hplist__ico{
	flex:none;display:flex;align-items:center;justify-content:center;
	width:40px;height:40px;border-radius:10px;
	background:var(--vg-surface);overflow:hidden;
}
.vg-hplist__ico img{width:100%;height:100%;object-fit:contain;}
.vg-hplist__ph{font-size:.62rem;font-weight:800;color:rgba(17,17,17,.45);}
.vg-hplist__name{
	flex:1;min-width:0;font-size:.9rem;font-weight:600;color:#111;line-height:1.3;
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.vg-hplist__items a:hover .vg-hplist__name{color:var(--vg-accent);}
.vg-hplist__price{flex:none;font-size:.85rem;font-weight:800;color:#111;white-space:nowrap;}
.vg-hplist__price .woocommerce-Price-amount{color:inherit;}
.vg-hplist__price del{display:none;}
.vg-hplist__all{
	display:block;padding:14px 18px;
	border-top:1px solid var(--vg-line);background:var(--vg-surface);
	font-size:.86rem;font-weight:700;color:var(--vg-accent);text-decoration:none;
	transition:background .2s;
}
.vg-hplist__all:hover{background:var(--vg-surface-2);color:var(--vg-accent);}

@media (max-width:980px){
	.vg-hplist{margin-top:8px;}
	.vg-hplist__items{max-height:none;}
}

/* ---- Category catalogue ---- */
.vg-catalog{background:#fff;color:#111;padding:clamp(52px,7vw,96px) 0;}
.vg-catalog__head{margin-bottom:38px;max-width:760px;}
.vg-catalog__group{margin-top:42px;}
.vg-catalog__group:first-of-type{margin-top:0;}
.vg-catalog__bar{
	display:flex;align-items:baseline;justify-content:space-between;gap:16px;
	padding-bottom:12px;margin-bottom:20px;
	border-bottom:1px solid var(--vg-line);
}
.vg-catalog__cat{margin:0;font-size:1.3rem;font-weight:700;letter-spacing:-.02em;color:#111;}
.vg-catalog__cat a{color:inherit;text-decoration:none;}
.vg-catalog__cat a:hover{color:var(--vg-accent);}
.vg-catalog__count{
	flex:none;font-size:.72rem;font-weight:700;letter-spacing:.08em;
	text-transform:uppercase;color:rgba(17,17,17,.45);
}
.vg-catalog__grid{
	display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;
}
.vg-catalog__cta{margin-top:44px;text-align:center;}

.vg-pcard{
	display:flex;flex-direction:column;
	padding:20px;border-radius:var(--vg-r-sm);
	background:var(--vg-surface);border:1px solid transparent;color:#111;
	transition:transform .25s var(--vg-ease),box-shadow .25s var(--vg-ease),border-color .25s,background .25s;
}
.vg-pcard:hover{
	transform:translateY(-4px);background:#fff;
	border-color:var(--vg-line);box-shadow:0 20px 44px rgba(17,17,17,.10);
}
.vg-pcard__top{display:flex;align-items:center;gap:12px;text-decoration:none;margin-bottom:12px;}
.vg-pcard__ico{
	flex:none;display:flex;align-items:center;justify-content:center;
	width:42px;height:42px;border-radius:10px;background:#fff;overflow:hidden;
	border:1px solid var(--vg-line);
}
.vg-pcard__ico img{width:100%;height:100%;object-fit:contain;}
.vg-pcard__name{
	margin:0;font-size:.98rem;font-weight:700;line-height:1.3;color:#111;letter-spacing:-.01em;
}
.vg-pcard__top:hover .vg-pcard__name{color:var(--vg-accent);}
.vg-pcard__blurb{
	margin:0 0 16px;font-size:.86rem;line-height:1.6;color:rgba(17,17,17,.6);
	flex:1;
}
.vg-pcard__foot{
	display:flex;align-items:center;justify-content:space-between;gap:12px;
	padding-top:13px;border-top:1px solid rgba(17,17,17,.1);
}
.vg-pcard__price{font-size:.95rem;font-weight:800;color:#111;}
.vg-pcard__price .woocommerce-Price-amount{color:inherit;}
.vg-pcard__link{
	font-size:.84rem;font-weight:700;color:var(--vg-accent);text-decoration:none;
	white-space:nowrap;transition:gap .2s;
}
.vg-pcard__link span{display:inline-block;transition:transform .2s var(--vg-ease);}
.vg-pcard:hover .vg-pcard__link span{transform:translateX(4px);}

.vg-bundlebar-wrap{margin-top:-10px;margin-bottom:10px;}

@media (max-width:600px){
	.vg-catalog__grid{grid-template-columns:1fr;}
	.vg-catalog__cat{font-size:1.15rem;}
	.vg-pcard{padding:18px;}
}

/* Hero: clean keyword-led H1, rotator demoted to a decorative line */
body.vgdev .vg-hero2__title{font-size:clamp(2rem,4.2vw,3.3rem);line-height:1.04;}
.vg-hero2__rotline{
	display:flex;align-items:baseline;gap:.5ch;flex-wrap:wrap;
	margin:0 0 20px;font-size:1.05rem;font-weight:600;color:rgba(17,17,17,.6);
}
.vg-hero2__rotlead{flex:none;}
body.vgdev .vg-hero2__rotator{
	position:relative;display:inline-block;height:1.5em;min-height:0;
	min-width:11ch;overflow:hidden;vertical-align:bottom;
}
body.vgdev .vg-hero2__rot{
	position:absolute;left:0;top:0;white-space:nowrap;font-size:1em;
	background:var(--vg-grad);-webkit-background-clip:text;background-clip:text;
	-webkit-text-fill-color:transparent;font-weight:800;
}

/* =========================================================
   Single product: gallery, spacing, related
   ========================================================= */

/* ---- Consistent rhythm between the stacked product sections ---- */
body.vgdev .vg-single-tabs,
body.vgdev .vg-feat-showcase,
body.vgdev .vg-single-desc,
body.vgdev .vg-single-faq,
body.vgdev .vg-single-cta,
body.vgdev .vg-single-reviews,
body.vgdev .vg-single-related{
	margin-top:clamp(42px,5vw,64px);
	padding-top:clamp(30px,4vw,44px);
	border-top:1px solid var(--vg-line);
}
body.vgdev .vg-single-tabs{margin-top:clamp(28px,3.5vw,44px);}

body.vgdev .vg-single-faq,
body.vgdev .vg-single-cta{padding-bottom:0;}
body.vgdev .vg-single-related{padding-bottom:clamp(56px,7vw,88px);}

body.vgdev .vg-single-related .vg-h2,
body.vgdev .vg-single-reviews .vg-h2,
body.vgdev .vg-feat-showcase__title{margin-bottom:26px;}

/* Related heading now comes from the template only */
body.vgdev .vg-single-related .related > h2,
body.vgdev .vg-single-related .up-sells > h2{display:none;}
body.vgdev .vg-single-related .related,
body.vgdev .vg-single-related .up-sells{margin:0;padding:0;}

/* =========================================================
   Product gallery (rewritten)

   Selectors are deliberately long: WooCommerce's own stylesheet targets
   ".woocommerce div.product div.images .flex-control-thumbs li" and sets
   width:25% + float, which shrank every thumbnail to a quarter of its
   cell. These rules out-rank it instead of fighting it with !important
   everywhere.
   ========================================================= */

/* Frame: no tinted box around the whole gallery, the image itself is the card */
body.vgdev .vg-product .vg-product__gallery{
	background:none;border:0;padding:0;box-shadow:none;border-radius:0;overflow:visible;
}
body.vgdev .vg-product .vg-product__gallery::before{display:none;}
body.vgdev .vg-product .vg-product__gallery:hover{transform:none;box-shadow:none;}
@media (min-width:901px){
	body.vgdev .vg-product .vg-product__gallery{position:sticky;top:100px;align-self:start;}
}

/* Main image card (slider active) */
body.vgdev .vg-product .vg-product__gallery .woocommerce-product-gallery .flex-viewport{
	background:#fff;border:1px solid var(--vg-line);border-radius:20px;overflow:hidden;
}
body.vgdev .vg-product .vg-product__gallery .woocommerce-product-gallery .flex-viewport .woocommerce-product-gallery__image img{
	width:100%;height:auto;border:0;border-radius:0;background:#fff;
}

/* Thumbnails: a clean row of even squares, full colour */
body.vgdev .vg-product .vg-product__gallery .woocommerce-product-gallery .flex-control-thumbs{
	display:flex;flex-wrap:wrap;gap:10px;
	margin:12px 0 0;padding:0;list-style:none;overflow:visible;
}
body.vgdev .vg-product .vg-product__gallery .woocommerce-product-gallery .flex-control-thumbs li{
	float:none;width:76px;height:76px;flex:0 0 76px;margin:0;padding:0;
}
body.vgdev .vg-product .vg-product__gallery .woocommerce-product-gallery .flex-control-thumbs li img{
	display:block;width:100%;height:100%;object-fit:cover;object-position:center top;
	padding:0;margin:0;background:#fff;
	border:2px solid var(--vg-line);border-radius:12px;
	opacity:1;cursor:pointer;
	transition:border-color .2s,transform .2s var(--vg-ease);
}
body.vgdev .vg-product .vg-product__gallery .woocommerce-product-gallery .flex-control-thumbs li img:hover{
	border-color:rgba(17,17,17,.35);transform:translateY(-2px);
}
body.vgdev .vg-product .vg-product__gallery .woocommerce-product-gallery .flex-control-thumbs li img.flex-active{
	border-color:var(--vg-accent);opacity:1;
}

/* Zoom trigger: tidy round button */
body.vgdev .vg-product .vg-product__gallery .woocommerce-product-gallery__trigger{
	top:14px;right:14px;z-index:5;width:40px;height:40px;
	border-radius:50%;background:#fff;border:1px solid var(--vg-line);
	box-shadow:0 6px 18px rgba(17,17,17,.10);
}

/* Before the gallery script runs (delayed JS): show the first image as the
   card and the rest as the same 76px squares, so it never looks like a raw
   stack. FlexSlider later moves everything into .flex-viewport, where the
   rules above take over and these no longer match. */
body.vgdev .vg-product .vg-product__gallery .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper{
	display:flex;flex-wrap:wrap;gap:10px;margin:0;
}
body.vgdev .vg-product .vg-product__gallery .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image{
	flex:0 0 76px;height:76px;margin:0;overflow:hidden;
	border:2px solid var(--vg-line);border-radius:12px;background:#fff;
}
body.vgdev .vg-product .vg-product__gallery .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:first-child{
	flex:0 0 100%;height:auto;border:1px solid var(--vg-line);border-radius:20px;
}
body.vgdev .vg-product .vg-product__gallery .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image img{
	width:100%;height:100%;object-fit:cover;object-position:center top;border:0;border-radius:0;
}
body.vgdev .vg-product .vg-product__gallery .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:first-child img{
	height:auto;object-fit:contain;
}

@media (max-width:600px){
	body.vgdev .vg-product .vg-product__gallery .woocommerce-product-gallery .flex-control-thumbs{gap:8px;}
	body.vgdev .vg-product .vg-product__gallery .woocommerce-product-gallery .flex-control-thumbs li{width:62px;height:62px;flex-basis:62px;}
	body.vgdev .vg-product .vg-product__gallery .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image{flex-basis:62px;height:62px;}
	body.vgdev .vg-product .vg-product__gallery .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:first-child{flex-basis:100%;height:auto;}
}