/* VirtGold One Click 5.0: glass buttons and menus, floating header, rounded bars, card images and footer credit.
   Every rule is scoped to a body class set from VirtGold settings, so Classic choices restore the 4.x look. */

/* ---------- 1. Glass tokens ---------- */
body.vg-glass, body.vg-hdr-floating, body[class*="vg-hdrf-"], body.vg-tbf-glass {
  --g-hi:rgba(255,255,255,.62); --g-hi-soft:rgba(255,255,255,.22); --g-line:color-mix(in srgb, var(--vg-text) 11%, transparent);
  --g-tint:color-mix(in srgb, var(--vg-surface) 68%, transparent); --g-tint-2:color-mix(in srgb, var(--vg-surface) 46%, transparent); --g-panel:color-mix(in srgb, var(--vg-surface) 76%, transparent);
  --g-blur:blur(20px) saturate(1.8); --g-shadow:0 12px 34px -14px rgba(16,18,32,.28), 0 2px 8px -4px rgba(16,18,32,.08);
  --g-spring:cubic-bezier(.34,1.45,.55,1); --g-hdr-r:calc(var(--vg-radius) + 8px);
}
html[data-theme=dark] body.vg-glass, html[data-theme=dark] body.vg-hdr-floating, html[data-theme=dark] body[class*="vg-hdrf-"], html[data-theme=dark] body.vg-tbf-glass {
  --g-hi:rgba(255,255,255,.16); --g-hi-soft:rgba(255,255,255,.06); --g-line:rgba(255,255,255,.12);
  --g-tint:color-mix(in srgb, var(--vg-surface) 62%, transparent); --g-tint-2:color-mix(in srgb, var(--vg-surface) 40%, transparent); --g-panel:color-mix(in srgb, var(--vg-surface) 74%, transparent);
  --g-shadow:0 16px 40px -16px rgba(0,0,0,.7), 0 2px 8px -4px rgba(0,0,0,.4);
}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))) {
  body.vg-glass, body.vg-hdr-floating, body[class*="vg-hdrf-"] { --g-tint:color-mix(in srgb, var(--vg-surface) 94%, transparent); --g-panel:var(--vg-surface); }
}
@media (prefers-reduced-transparency:reduce) {
  body.vg-glass, body.vg-hdr-floating, body[class*="vg-hdrf-"] { --g-tint:var(--vg-surface); --g-tint-2:var(--vg-surface); --g-panel:var(--vg-surface); }
}

/* ---------- 2. Liquid glass recipe (5.1) ---------- */
/* One recipe for every button, capsule and header control. Light mode gets a darker hairline, a bright inner rim,
   a soft tint at the bottom and a color glow behind the page, so the glass reads clearly on white too. */
body.vg-glass {
  --lg-sheen:linear-gradient(180deg, rgba(255,255,255,.66) 0%, rgba(255,255,255,.2) 42%, rgba(255,255,255,0) 56%, rgba(255,255,255,.2) 100%);
  --lg-caustic:radial-gradient(72% 60% at 50% 120%, rgba(255,255,255,.5), rgba(255,255,255,0) 72%);
  --lg-rim:inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.45), inset 1px 0 0 rgba(255,255,255,.3), inset -1px 0 0 rgba(255,255,255,.3);
  --lg-rim-t:inset 0 1px 0 rgba(255,255,255,.8), inset 0 -1px 0 rgba(255,255,255,.32), inset 0 0 0 1px rgba(255,255,255,.14), inset 0 10px 14px -12px rgba(255,255,255,.9);
  --lg-frost:linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.55) 55%, rgba(255,255,255,.5) 100%);
  --lg-frost-edge:color-mix(in srgb, var(--vg-text) 14%, transparent);
  --lg-frost-drop:0 1px 2px rgba(16,18,32,.08), 0 10px 24px -14px rgba(16,18,32,.42);
  --lg-blur:blur(16px) saturate(1.9);
  --lg-fill:80%;
  --lg-pill:inset 0 1px 0 rgba(255,255,255,.75), inset 0 7px 9px -7px rgba(255,255,255,.85), inset 0 -5px 7px -5px rgba(255,255,255,.35), inset 0 0 0 1px rgba(255,255,255,.16), 0 4px 10px -6px rgba(16,18,32,.4);
}
html[data-theme=dark] body.vg-glass {
  --lg-sheen:linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.06) 42%, rgba(255,255,255,0) 56%, rgba(255,255,255,.07) 100%);
  --lg-caustic:radial-gradient(72% 60% at 50% 120%, rgba(255,255,255,.16), rgba(255,255,255,0) 72%);
  --lg-rim:inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(255,255,255,.08), inset 1px 0 0 rgba(255,255,255,.08), inset -1px 0 0 rgba(255,255,255,.08);
  --lg-frost:linear-gradient(180deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.05) 55%, color-mix(in srgb, var(--vg-primary) 10%, rgba(255,255,255,.03)) 100%);
  --lg-frost-edge:rgba(255,255,255,.15);
  --lg-frost-drop:0 1px 2px rgba(0,0,0,.3), 0 12px 26px -14px rgba(0,0,0,.8);
  --lg-pill:inset 0 1px 0 rgba(255,255,255,.55), inset 0 7px 9px -7px rgba(255,255,255,.5), inset 0 -5px 7px -5px rgba(255,255,255,.18), inset 0 0 0 1px rgba(255,255,255,.1), 0 4px 10px -6px rgba(0,0,0,.6);
}
body.vg-glass.vg-gs-subtle { --lg-fill:90%; --lg-sheen:linear-gradient(180deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,.1) 45%, rgba(255,255,255,0) 60%, rgba(255,255,255,.1) 100%); }
body.vg-glass.vg-gs-strong { --lg-fill:66%; --lg-blur:blur(22px) saturate(2.1); --lg-sheen:linear-gradient(180deg, rgba(255,255,255,.8) 0%, rgba(255,255,255,.28) 40%, rgba(255,255,255,.02) 54%, rgba(255,255,255,.28) 100%); }
html[data-theme=dark] body.vg-glass.vg-gs-strong { --lg-sheen:linear-gradient(180deg, rgba(255,255,255,.3) 0%, rgba(255,255,255,.08) 40%, rgba(255,255,255,0) 54%, rgba(255,255,255,.1) 100%); }

/* Color glow behind the page: glass needs something to show through. Light mode only by default, very soft. */
body.vg-glass-glow::after { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(48vw 40vw at 6% 8%, color-mix(in srgb, var(--vg-primary) 16%, transparent), transparent 70%), radial-gradient(42vw 38vw at 96% 30%, color-mix(in srgb, var(--vg-accent) 13%, transparent), transparent 70%), radial-gradient(50vw 40vw at 30% 96%, color-mix(in srgb, var(--vg-primary) 11%, transparent), transparent 70%), radial-gradient(40vw 36vw at 88% 92%, color-mix(in srgb, var(--vg-accent) 10%, transparent), transparent 70%); }
html[data-theme=dark] body.vg-glass-glow::after { opacity:.7; }
html[data-theme=dark] body.vg-glow-light::after { display:none; }

/* Primary actions: Buy Now, Add To Cart, Checkout, Place Order, Cart in the header, card buttons. Tinted glass. */
html body.vg-glass :is(.vg-btn--primary, .vg-btn--buy),
html body.vg-glass .woocommerce :is(a, button, input).button.alt, html body.vg-glass .woocommerce #respond input#submit.alt, html body.vg-glass .woocommerce #place_order, html body.vg-glass .woocommerce .checkout-button.button, html body.vg-glass .woocommerce .single_add_to_cart_button.button, html body.vg-glass .wc-block-components-checkout-place-order-button, html body.vg-glass .wc-block-cart__submit-button, html body.vg-glass .woocommerce .woocommerce-form-login__submit, html body.vg-glass .woocommerce .woocommerce-form-register__submit, html body.vg-glass .woocommerce .vg-btn--primary.button {
  --vg-btn-bg:var(--lg-sheen), var(--lg-caustic), color-mix(in srgb, var(--vg-primary) var(--lg-fill), transparent);
  --vg-btn-bd:color-mix(in srgb, var(--vg-primary) 62%, #fff);
  -webkit-backdrop-filter:var(--lg-blur); backdrop-filter:var(--lg-blur);
  box-shadow:var(--lg-rim-t), 0 12px 28px -14px color-mix(in srgb, var(--vg-primary) 95%, #000), 0 3px 8px -4px color-mix(in srgb, var(--vg-primary) 50%, transparent);
}
html body.vg-glass .woocommerce :is(a, button, input).button.alt:hover, html body.vg-glass .woocommerce :is(#place_order, .checkout-button.button, .single_add_to_cart_button.button):hover, html body.vg-glass :is(.vg-btn--primary, .vg-btn--buy):hover { --vg-btn-bg:var(--lg-sheen), var(--lg-caustic), color-mix(in srgb, var(--vg-primary) calc(var(--lg-fill) + 8%), transparent); }
html body.vg-glass .vg-co-sticky__btn { background:var(--lg-sheen), var(--lg-caustic), color-mix(in srgb, var(--vg-primary) var(--lg-fill), transparent); border-color:color-mix(in srgb, var(--vg-primary) 62%, #fff); box-shadow:var(--lg-rim-t), 0 12px 28px -14px color-mix(in srgb, var(--vg-primary) 95%, #000); }
html body.vg-glass.vg-btn-gradient :is(.vg-btn--primary, .vg-btn--buy), html body.vg-glass.vg-btn-gradient .woocommerce :is(#place_order, .checkout-button.button, .button.alt) { --vg-btn-bg:var(--lg-sheen), linear-gradient(135deg, color-mix(in srgb, var(--vg-primary) var(--lg-fill), transparent), color-mix(in srgb, color-mix(in srgb, var(--vg-primary) 62%, var(--vg-accent)) var(--lg-fill), transparent)); background:var(--vg-btn-bg) !important; }
html body.vg-glass.vg-btn-outline .vg-btn--primary { --vg-btn-bg:var(--lg-frost); --vg-btn-fg:var(--vg-text); --vg-btn-bd:var(--vg-primary); }
html body.vg-glass.vg-btn-outline .vg-btn--primary:hover { --vg-btn-bg:var(--lg-sheen), var(--vg-primary); --vg-btn-fg:var(--vg-on-primary); }
/* Dark glass: Add To Cart next to Buy Now, dark buttons, the active chip. */
html body.vg-glass .vg-btn--dark, html body.vg-glass .vg-single-wrap div.product form.cart:has([data-buy-now]) .single_add_to_cart_button.button {
  --vg-btn-bg:linear-gradient(180deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,.05) 46%, rgba(255,255,255,0) 60%, rgba(255,255,255,.07) 100%), color-mix(in srgb, var(--vg-text) 86%, transparent); --vg-btn-bd:color-mix(in srgb, var(--vg-text) 80%, #fff); --vg-btn-fg:var(--vg-bg);
  -webkit-backdrop-filter:var(--lg-blur); backdrop-filter:var(--lg-blur);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(255,255,255,.1), inset 0 0 0 1px rgba(255,255,255,.06), 0 12px 26px -14px rgba(0,0,0,.6);
}
html[data-theme=dark] body.vg-glass .vg-btn--dark, html[data-theme=dark] body.vg-glass .vg-single-wrap div.product form.cart:has([data-buy-now]) .single_add_to_cart_button.button { --vg-btn-bd:#fff; box-shadow:inset 0 1px 0 #fff, inset 0 -2px 6px -2px rgba(0,0,0,.12), 0 12px 26px -14px rgba(0,0,0,.7); }

/* Clear glass: secondary buttons, default WooCommerce buttons, Sign In, header icons, quantity, wishlist, share, currency. */
html body.vg-glass .vg-btn--secondary,
html body.vg-glass .woocommerce :is(a.button, button.button, input.button):not(.alt):not(.single_add_to_cart_button):not(.checkout-button):not(.vg-btn--primary), html body.vg-glass .woocommerce-page .vg-main .button:not(.alt):not(.vg-btn--primary):not(.single_add_to_cart_button) {
  --vg-btn-bg:var(--lg-frost); --vg-btn-bd:var(--lg-frost-edge); box-shadow:var(--lg-rim), var(--lg-frost-drop);
}
html body.vg-glass .vg-btn--secondary:hover, html body.vg-glass .woocommerce :is(a.button, button.button):not(.alt):not(.single_add_to_cart_button):not(.checkout-button):hover { --vg-btn-bd:color-mix(in srgb, var(--vg-primary) 45%, var(--lg-frost-edge)); --vg-btn-bg:var(--lg-sheen), color-mix(in srgb, var(--vg-primary) 12%, var(--vg-surface)); }
html body.vg-glass :is(.vg-btn--secondary, .vg-btn--ghost):not(.vg-card__btn) { -webkit-backdrop-filter:var(--lg-blur); backdrop-filter:var(--lg-blur); }
html body.vg-glass .vg-btn--ghost:hover { --vg-btn-bg:var(--lg-frost); --vg-btn-bd:var(--lg-frost-edge); box-shadow:var(--lg-rim), var(--lg-frost-drop); }
html body.vg-glass .vg-card__btn.is-added { --vg-btn-bg:var(--lg-sheen), var(--vg-success); --vg-btn-bd:var(--vg-success); }

/* Header controls */
html body.vg-glass .vg-act--primary {
  background:var(--lg-sheen), var(--lg-caustic), color-mix(in srgb, var(--vg-primary) var(--lg-fill), transparent); border-color:color-mix(in srgb, var(--vg-primary) 62%, #fff);
  box-shadow:var(--lg-rim-t), 0 10px 24px -12px color-mix(in srgb, var(--vg-primary) 95%, #000);
}
html body.vg-glass :is(.vg-act--secondary, .vg-act--ghost, .vg-act--icon, .vg-drawer__search) {
  background:var(--lg-frost); border-color:var(--lg-frost-edge); box-shadow:var(--lg-rim), 0 6px 16px -10px rgba(16,18,32,.4);
}
html[data-theme=dark] body.vg-glass :is(.vg-act--secondary, .vg-act--ghost, .vg-act--icon, .vg-drawer__search) { box-shadow:var(--lg-rim), 0 6px 16px -10px rgba(0,0,0,.7); }
html body.vg-glass :is(.vg-act--secondary, .vg-act--ghost, .vg-act--icon):hover { background:var(--lg-sheen), color-mix(in srgb, var(--vg-primary) 14%, var(--vg-header-bg)); border-color:color-mix(in srgb, var(--vg-primary) 40%, var(--lg-frost-edge)); }
html body.vg-glass .vg-act--icon { border-radius:999px; }
html body.vg-glass :is(.vg-nav__link, .vg-nav--wp .menu-item > a) { border:1px solid transparent; transition:background .25s, border-color .25s, box-shadow .25s, color .2s; }
html body.vg-glass :is(.vg-nav__link:hover, .vg-nav__item:focus-within > .vg-nav__link, .vg-nav__item.is-current > .vg-nav__link, .vg-nav--wp .menu-item > a:hover, .vg-nav--wp .current-menu-item > a) {
  background:var(--lg-frost); border-color:var(--lg-frost-edge); box-shadow:var(--lg-rim), 0 6px 16px -10px rgba(16,18,32,.4);
}

@media (max-width:640px) {
  html body.vg-glass .vg-act { border-radius:999px; background:var(--lg-frost) !important; border-color:var(--lg-frost-edge) !important; box-shadow:var(--lg-rim), 0 4px 12px -8px rgba(16,18,32,.4) !important; }
  html body.vg-glass .vg-act--primary.vg-cart { background:var(--lg-sheen), var(--lg-caustic), color-mix(in srgb, var(--vg-primary) var(--lg-fill), transparent) !important; border-color:color-mix(in srgb, var(--vg-primary) 62%, #fff) !important; color:var(--vg-on-primary) !important; box-shadow:var(--lg-rim-t), 0 8px 18px -10px color-mix(in srgb, var(--vg-primary) 95%, #000) !important; }
  html body.vg-glass .vg-actions { gap:6px; }
}

/* Capsules and choices: chips, labels, steps, swatches, payment icons, tabs, quantity. */
html body.vg-glass-pills :is(.vg-chip, .vg-pill-label, .vg-instant-badge, .vgpx-step, .vg-swatch, .vg-single__pay .vg-pay-icons > *, .vg-qty, .vgtk-cu__btn, .vgx-share__btn, .vg-tabs__list, .vg-auth__tabs, .vg-header__secure, .vg-topbar__clock, .vg-policy-hero__eyebrow, .woocommerce-product-gallery__trigger),
html body.vg-glass-pills .vg-single-wrap div.product .woocommerce-tabs ul.tabs, html body.vg-glass-pills .quantity input.qty {
  background:var(--lg-frost); border-color:var(--lg-frost-edge); box-shadow:var(--lg-rim), var(--lg-frost-drop);
}
html body.vg-glass-pills :is(.vg-chip, .vg-pill-label, .vg-instant-badge, .vgtk-cu__btn, .woocommerce-product-gallery__trigger, .vgtk-heart, .vg-topbar__clock) { -webkit-backdrop-filter:var(--lg-blur); backdrop-filter:var(--lg-blur); }
html body.vg-glass-pills .vg-swatch.is-selected, html body.vg-glass-pills .vgpx-step.is-active { background:var(--lg-sheen), color-mix(in srgb, var(--vg-primary) 12%, var(--vg-surface)); box-shadow:var(--lg-rim), 0 0 0 3px color-mix(in srgb, var(--vg-primary) 16%, transparent), var(--lg-frost-drop); }
html body.vg-glass-pills .vg-chip:hover { border-color:color-mix(in srgb, var(--vg-primary) 45%, var(--lg-frost-edge)); }
html body.vg-glass-pills .vg-chip.is-active { background:var(--lg-sheen), color-mix(in srgb, var(--vg-text) 86%, transparent); border-color:color-mix(in srgb, var(--vg-text) 70%, #fff); color:var(--vg-bg); box-shadow:var(--lg-rim-t), 0 8px 20px -12px rgba(0,0,0,.55); }
html body.vg-glass-pills .vg-single-wrap div.product .woocommerce-tabs ul.tabs li.active, html body.vg-glass-pills .vg-tabs__tab.is-active { background:var(--lg-sheen), var(--vg-surface); box-shadow:var(--lg-rim), 0 4px 12px -8px rgba(16,18,32,.4); }
/* Active frosted tabs sit on the surface, so their text must use the surface text color. */
html body.vg-glass-pills .vg-tabs__tab.is-active,
html body.vg-glass-pills .vg-single-wrap div.product .woocommerce-tabs ul.tabs li.active a { color:var(--vg-text); }
/* Colored capsules keep their color and get a glass shine: badges, sale tags, savings, menu badges, slider badges. */
html body.vg-glass-pills .vgtk-heart { box-shadow:inset 0 1px 0 rgba(255,255,255,.7), inset 0 0 0 1px rgba(255,255,255,.18), 0 6px 14px -8px rgba(16,18,32,.45); }
html body.vg-glass-pills :is(.vg-nav__badge, .vg-badge, span.onsale, .vg-savings, .vg-swatch__off, .vg-tag, .vg-cart__count, .vghs__badge, .vgfs-bar__btn, .vg-goal__track) { box-shadow:var(--lg-pill); }
html body.vg-glass-pills :is(.vg-savings, .vg-tag, .vg-swatch__off:not(.vg-sw-off-corner *)) { border:1px solid color-mix(in srgb, currentColor 22%, transparent); }

/* ---------- 3. Liquid layer: pointer light, hover sweep, springy press ---------- */
html body.vg-liquid :is(.vg-btn, .vg-act, .vgr-launch, .vgt-sw__btn, .vg-glassify),
html body.vg-liquid .woocommerce :is(a, button, input).button.alt, html body.vg-liquid .woocommerce :is(#place_order, .single_add_to_cart_button.button, .checkout-button.button) { position:relative; isolation:isolate; }
html body.vg-liquid :is(.vg-btn, .vg-act:not(.vg-act--icon), .vgr-launch, .vgt-sw__btn, .vg-glassify)::before,
html body.vg-liquid .woocommerce :is(a, button).button.alt::before, html body.vg-liquid .woocommerce :is(#place_order, .single_add_to_cart_button.button, .checkout-button.button)::before {
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none;
  background:radial-gradient(110px circle at var(--mx, 50%) var(--my, -10%), rgba(255,255,255,.5), rgba(255,255,255,0) 70%), linear-gradient(112deg, transparent 38%, rgba(255,255,255,.42) 50%, transparent 62%);
  background-size:100% 100%, 260% 100%; background-position:0 0, 135% 0; background-repeat:no-repeat;
  opacity:0; transition:opacity .4s, background-position 0s .4s;
}
html body.vg-liquid :is(.vg-btn, .vg-act:not(.vg-act--icon), .vgr-launch, .vgt-sw__btn, .vg-glassify):hover::before,
html body.vg-liquid .woocommerce :is(a, button).button.alt:hover::before, html body.vg-liquid .woocommerce :is(#place_order, .single_add_to_cart_button.button, .checkout-button.button):hover::before { opacity:1; background-position:0 0, -35% 0; transition:opacity .25s, background-position 1s cubic-bezier(.2,.7,.2,1); }
html body.vg-liquid :is(.vg-btn--secondary, .vg-btn--ghost, .vg-act--secondary, .vg-act--ghost, .vgt-sw__btn)::before { background:radial-gradient(110px circle at var(--mx, 50%) var(--my, -10%), color-mix(in srgb, var(--vg-primary) 16%, rgba(255,255,255,.55)), rgba(255,255,255,0) 70%), linear-gradient(112deg, transparent 38%, rgba(255,255,255,.55) 50%, transparent 62%); background-size:100% 100%, 260% 100%; background-repeat:no-repeat; }
html[data-theme=dark] body.vg-liquid :is(.vg-btn--secondary, .vg-btn--ghost, .vg-act--secondary, .vg-act--ghost, .vgt-sw__btn)::before { background:radial-gradient(110px circle at var(--mx, 50%) var(--my, -10%), rgba(255,255,255,.14), rgba(255,255,255,0) 70%), linear-gradient(112deg, transparent 38%, rgba(255,255,255,.12) 50%, transparent 62%); background-size:100% 100%, 260% 100%; background-repeat:no-repeat; }
html body.vg-liquid :is(.vg-btn, .vg-act, .vgr-launch, .vgt-sw__btn) { transition:transform .45s var(--g-spring), box-shadow .25s, background .25s, border-color .25s, color .2s, filter .2s; }
html body.vg-liquid :is(.vg-btn, .vg-act, .vgr-launch, .vgt-sw__btn):active { transform:scale(.965); transition-duration:.12s; }

/* ---------- 4. Menus and panels ---------- */
html body.vg-glass :is(.vg-nav__panel, .vg-nav--wp .sub-menu, .vgt-sw__menu, .vgtk-cu-pop) {
  background:var(--g-panel); -webkit-backdrop-filter:var(--g-blur); backdrop-filter:var(--g-blur);
  border:1px solid var(--g-line); box-shadow:inset 0 1px 0 var(--g-hi), var(--g-shadow);
}
html body.vg-glass .vg-nav__sublink:hover, html body.vg-glass .vg-nav--wp .sub-menu a:hover { background:color-mix(in srgb, var(--vg-text) 6%, transparent); box-shadow:inset 0 1px 0 var(--g-hi-soft); }
html body.vg-glass .vg-search__panel { background:color-mix(in srgb, var(--vg-surface) 84%, transparent); -webkit-backdrop-filter:var(--g-blur); backdrop-filter:var(--g-blur); border-color:var(--g-line); box-shadow:inset 0 1px 0 var(--g-hi), var(--vg-shadow-lg); }
html body.vg-glass :is(.vg-drawer__panel, .vg-sidecart__panel) { background:color-mix(in srgb, var(--vg-surface) 88%, transparent); -webkit-backdrop-filter:var(--g-blur); backdrop-filter:var(--g-blur); box-shadow:inset 1px 0 0 var(--g-hi), var(--vg-shadow-lg); }
@media (max-width:640px) { html body.vg-glass .vg-search__panel { background:color-mix(in srgb, var(--vg-surface) 92%, transparent); } }

/* ---------- 5. Floating buttons (Daily Spin, language, cookie settings, extra selectors) ---------- */
html body.vg-glass .vgr-launch {
  background:var(--lg-sheen), var(--lg-caustic), color-mix(in srgb, var(--vg-primary) var(--lg-fill), transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.8); backdrop-filter:blur(14px) saturate(1.8);
  border:1px solid color-mix(in srgb, var(--vg-primary) 55%, #fff);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.6), inset 0 -1px 1px rgba(255,255,255,.18), 0 14px 32px -12px color-mix(in srgb, var(--vg-primary) 80%, #000);
}
html body.vg-glass :is(.vgt-sw__btn, .vg-cc-fab), html body.vg-glass .vg-glassify {
  background:var(--lg-frost) !important; -webkit-backdrop-filter:var(--lg-blur) !important; backdrop-filter:var(--lg-blur) !important;
  border:1px solid var(--lg-frost-edge) !important; box-shadow:var(--lg-rim), var(--lg-frost-drop) !important;
}

/* ---------- 6. Header: shape and finish ---------- */
/* Glass lives on a pseudo layer so dropdowns inside the header can still blur the page behind them. */
html body:is(.vg-hdrf-glass, .vg-hdrf-liquid, .vg-hdrf-gradient, .vg-hdrf-solid):not(.vg-hdr-floating) .vg-header { background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; isolation:isolate; }
html body:is(.vg-hdrf-glass, .vg-hdrf-liquid, .vg-hdrf-gradient, .vg-hdrf-solid):not(.vg-hdr-floating) .vg-header::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:var(--vg-header-bg); }
html body:is(.vg-hdrf-glass, .vg-hdrf-liquid):not(.vg-hdr-floating) .vg-header::before { background:color-mix(in srgb, var(--vg-header-bg) 72%, transparent); -webkit-backdrop-filter:var(--g-blur); backdrop-filter:var(--g-blur); }
html body.vg-hdrf-liquid:not(.vg-hdr-floating) .vg-header::before { background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0)), color-mix(in srgb, var(--vg-header-bg) 70%, transparent); box-shadow:inset 0 -1px 0 var(--g-hi-soft); }
html body.vg-hdrf-gradient:not(.vg-hdr-floating) .vg-header::before { background:linear-gradient(100deg, color-mix(in srgb, var(--vg-header-bg) 90%, var(--vg-primary)), var(--vg-header-bg) 45%, color-mix(in srgb, var(--vg-header-bg) 90%, var(--vg-accent))); }

/* Floating rounded header */
html body.vg-hdr-floating .vg-header { background:transparent; border-bottom:0; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; padding-top:10px; pointer-events:none; }
html body.vg-hdr-floating .vg-header > * { pointer-events:auto; }
html body.vg-hdr-floating .vg-header__inner { position:relative; z-index:0; width:min(calc(100% - 24px), calc(var(--vg-container) + 36px)); max-width:none; padding-inline:20px 10px; border-radius:var(--g-hdr-r); }
html body.vg-hdr-floating .vg-header__inner::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:inherit; background:var(--vg-header-bg); border:1px solid var(--g-line); box-shadow:var(--g-shadow); transition:box-shadow .3s, background-color .3s; }
html body.vg-hdr-floating .vg-header.is-scrolled { box-shadow:none; }
html body.vg-hdr-floating .vg-header.is-scrolled .vg-header__inner::before { box-shadow:0 18px 44px -18px rgba(16,18,32,.4), 0 2px 10px -4px rgba(16,18,32,.12); }
html[data-theme=dark] body.vg-hdr-floating .vg-header.is-scrolled .vg-header__inner::before { box-shadow:0 18px 44px -16px rgba(0,0,0,.8); }
html body.vg-hdr-floating:is(.vg-hdrf-glass, .vg-hdrf-liquid) .vg-header__inner::before, html body.vg-hdr-floating.vg-hdrf-classic.vg-header-blur .vg-header__inner::before { background:color-mix(in srgb, var(--vg-header-bg) 70%, transparent); -webkit-backdrop-filter:var(--g-blur); backdrop-filter:var(--g-blur); box-shadow:inset 0 1px 0 var(--g-hi), var(--g-shadow); }
html body.vg-hdr-floating.vg-hdrf-liquid .vg-header__inner::before { background:radial-gradient(260px circle at var(--mx, 18%) var(--my, -40%), rgba(255,255,255,.22), rgba(255,255,255,0) 70%), linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0) 60%), color-mix(in srgb, var(--vg-header-bg) 66%, transparent); border-color:transparent; }
html[data-theme=dark] body.vg-hdr-floating.vg-hdrf-liquid .vg-header__inner::before { background:radial-gradient(260px circle at var(--mx, 18%) var(--my, -40%), rgba(255,255,255,.08), rgba(255,255,255,0) 70%), linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 60%), color-mix(in srgb, var(--vg-header-bg) 66%, transparent); }
/* Liquid rim: a light gradient edge that is brighter at the top left and bottom right, like curved glass. */
html body.vg-hdr-floating.vg-hdrf-liquid .vg-header__inner::after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:inherit; padding:1px; background:linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,255,255,.18) 30%, color-mix(in srgb, var(--vg-text) 10%, transparent) 55%, rgba(255,255,255,.7)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
html[data-theme=dark] body.vg-hdr-floating.vg-hdrf-liquid .vg-header__inner::after { background:linear-gradient(135deg, rgba(255,255,255,.34), rgba(255,255,255,.06) 30%, rgba(255,255,255,.03) 55%, rgba(255,255,255,.22)); }
html body.vg-hdr-floating.vg-hdrf-gradient .vg-header__inner::before { background:linear-gradient(100deg, color-mix(in srgb, var(--vg-header-bg) 88%, var(--vg-primary)), var(--vg-header-bg) 48%, color-mix(in srgb, var(--vg-header-bg) 88%, var(--vg-accent))); box-shadow:inset 0 1px 0 var(--g-hi), var(--g-shadow); }
html body.vg-hdr-floating.vg-header-stacked .vg-header__inner { padding-inline:20px; }
html body.vg-hdr-floating.vg-header-stacked .vg-header__nav { border-top-color:var(--g-line); }
@media (max-width:900px) {
  html body.vg-hdr-floating .vg-header { padding-top:8px; }
  html body.vg-hdr-floating .vg-header__inner { width:calc(100% - 16px); padding-inline:14px 6px; border-radius:min(var(--g-hdr-r), 20px); }
}

/* ---------- 7. Top bars: rounded shape and finish ---------- */
html body.vg-tb-rounded :is(.vg-topbar, .vgfs-bar) { width:min(calc(100% - 24px), calc(var(--vg-container) + 36px)); margin:10px auto 0; border-radius:calc(var(--vg-radius) + 6px); overflow:hidden; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), 0 8px 24px -16px rgba(16,18,32,.45); }
html body.vg-tb-rounded .vg-topbar.is-hidden { display:none; }
@media (max-width:900px) { html body.vg-tb-rounded :is(.vg-topbar, .vgfs-bar) { width:calc(100% - 16px); margin-top:8px; border-radius:min(calc(var(--vg-radius) + 6px), 16px); } }
html body.vg-tbf-glass .vg-topbar { background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0)), color-mix(in srgb, var(--vg-topbar-bg) 80%, transparent); -webkit-backdrop-filter:blur(14px) saturate(1.6); backdrop-filter:blur(14px) saturate(1.6); box-shadow:inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(255,255,255,.06); }
html body.vg-tbf-gradient .vg-topbar { background:linear-gradient(100deg, var(--vg-topbar-bg) 0%, color-mix(in srgb, var(--vg-topbar-bg) 78%, var(--vg-primary)) 50%, color-mix(in srgb, var(--vg-topbar-bg) 84%, var(--vg-accent)) 100%); }

/* ---------- 8. Product card image ---------- */
/* Edge To Edge: one frame only (the card). The image fills the top and follows the card corners. */
html body:is(.vg-media-bleed, .vg-media-inset) .vg-card .vg-card__media { border-bottom:0; box-shadow:none; }
html body:is(.vg-media-bleed, .vg-media-inset) .vg-card .vg-card__media::after { display:none; }
html body:is(.vg-media-bleed, .vg-media-inset) .vg-card .vg-card__img { display:block; aspect-ratio:auto; }
html body:is(.vg-media-bleed, .vg-media-inset) ul.products li.vg-card.product .vg-card__img img, html body:is(.vg-media-bleed, .vg-media-inset) .vg-card .vg-card__img img { width:100%; height:100%; max-width:none; max-height:none; padding:0; object-fit:cover; }
/* Images that are not square (wide logos) are never cropped: they span the full width without padding. Logo mode keeps its stage size. */
html body:is(.vg-media-bleed, .vg-media-inset) ul.products li.vg-card--odd.product .vg-card__img img, html body:is(.vg-media-bleed, .vg-media-inset) .vg-card--odd .vg-card__img img { object-fit:contain; }
html body:is(.vg-media-bleed, .vg-media-inset) .vg-card.vgpx-img-logo .vg-card__img { display:flex; align-items:center; justify-content:center; }
html body:is(.vg-media-bleed, .vg-media-inset) ul.products li.vgpx-img-logo.product .vg-card__img img, html body:is(.vg-media-bleed, .vg-media-inset) .vg-card.vgpx-img-logo .vg-card__img img { width:var(--vgpx-logo); height:var(--vgpx-logo); max-width:var(--vgpx-logo); max-height:var(--vgpx-logo); object-fit:contain; }
/* VirtGold catalog artwork (vg- and vgc- files) has its own thin frame near the edge. It is trimmed on screen only, so the artwork itself (badge, logo, title, label) fills the image area. Files are never changed. */
html body:is(.vg-media-bleed, .vg-media-inset) ul.products li.vg-card--art.product .vg-card__img img, html body:is(.vg-media-bleed, .vg-media-inset) .vg-card--art .vg-card__img img { width:104.4%; height:104.4%; margin:-2.2%; }
html body:is(.vg-media-bleed, .vg-media-inset) .vg-card--art .vg-card__media { border-radius:max(var(--vg-radius), 4.4%); }
/* Keep the artwork's own top labels visible: sale badges and the wishlist heart sit just below them. */
html body:is(.vg-media-bleed, .vg-media-inset) .vg-card--art .vg-card__badges { top:0; margin-top:12%; }
html body:is(.vg-media-bleed, .vg-media-inset) .vg-card--art .vgtk-heart { top:0; margin-top:12%; }
html body.vg-media-bleed:is(.vg-frame-elevated, .vg-frame-outline, .vg-frame-soft) .vg-card:not(.vg-card--art) .vg-card__media { border-radius:calc(var(--vg-radius) - 1px) calc(var(--vg-radius) - 1px) 0 0; }
html body.vg-media-bleed.vg-catalog-list .vg-shop .vg-card .vg-card__media { border-radius:0; }
/* Rounded Inside The Card: the image sits inside the card padding with matching inner corners. */
html body.vg-media-inset:not(.vg-frame-none) .vg-card .vg-card__media { margin:var(--vg-card-pad) var(--vg-card-pad) 0; border-radius:max(6px, calc(var(--vg-radius) - var(--vg-card-pad) / 2), 4.4%); }
html body.vg-media-inset:not(.vg-frame-none) .vg-card .vg-card__body { padding-top:calc(var(--vg-card-pad) * .85); }
@media (max-width:640px) { html body.vg-media-inset:not(.vg-frame-none) .vg-card .vg-card__media { margin:calc(var(--vg-card-pad) * .75) calc(var(--vg-card-pad) * .75) 0; } }

/* Product page: on VirtGold artwork the sale badge sits just below the artwork's own top labels (percent margins follow the gallery width). */
html .vg-single-wrap .vg-product-top--art > span.onsale, html .vg-single-wrap .vg-product-top--art > .vg-badge { position:relative; top:auto; left:auto; grid-column:1; grid-row:1; align-self:start; justify-self:start; margin:12.4% 0 0 7%; }
html body .vg-single-wrap .vg-product-top--art div.images.woocommerce-product-gallery, html body .vg-single-wrap .vg-product-top--art div.images { grid-row:1; }
html body.vg-single-stacked .vg-single-wrap .vg-product-top--art div.summary { grid-row:2; }
@media (max-width:900px) { html body .vg-single-wrap .vg-product-top--art div.summary { grid-row:2; } }

/* ---------- 9. Footer designer credit ---------- */
.vg-footer__credit { display:flex; justify-content:center; padding-block:0 26px; margin-top:-6px; }
.vg-credit { display:inline-flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 10px; color:var(--vg-muted); font-family:var(--vg-font-ui); font-size:12.5px; font-weight:600; line-height:1.2; letter-spacing:.01em; text-decoration:none; }
.vg-credit__brand { display:inline-flex; align-items:center; gap:6px; }
.vg-credit__brand b { font-family:var(--vg-font-heading); font-size:14px; font-weight:800; letter-spacing:-.01em; color:var(--vg-footer-text, var(--vg-text)); }
.vg-credit--plain:is(a):hover .vg-credit__brand b { text-decoration:underline; text-underline-offset:3px; }
.vg-credit--chip { position:relative; isolation:isolate; padding:8px 16px 8px 18px; border-radius:999px; background:linear-gradient(180deg, color-mix(in srgb, var(--vg-surface) 82%, transparent), color-mix(in srgb, var(--vg-surface) 48%, transparent)); border:1px solid color-mix(in srgb, var(--vg-text) 10%, transparent); box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 10px 26px -18px rgba(16,18,32,.45); transition:transform .45s cubic-bezier(.34,1.45,.55,1), box-shadow .3s, border-color .3s; }
html[data-theme=dark] .vg-credit--chip { box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 10px 26px -18px rgba(0,0,0,.8); }
.vg-credit--chip::before { content:""; position:absolute; inset:-1px; z-index:-1; border-radius:inherit; padding:1px; background:linear-gradient(110deg, #ffd56b, #f5a524 30%, #a78bfa 60%, #ffd56b); background-size:220% 100%; -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .35s; animation:vg-credit-ring 4s linear infinite; animation-play-state:paused; }
.vg-credit--chip .vg-credit__label { padding-inline-end:10px; border-inline-end:1px solid color-mix(in srgb, var(--vg-text) 12%, transparent); }
.vg-credit--chip .vg-credit__brand b { background:linear-gradient(100deg, var(--vg-footer-text, var(--vg-text)) 0 40%, #f5a524 48%, #ffd56b 52%, var(--vg-footer-text, var(--vg-text)) 60% 100%); background-size:260% 100%; background-position:100% 0; -webkit-background-clip:text; background-clip:text; color:transparent; animation:vg-credit-shine 7s ease-in-out 1.5s infinite; }
.vg-credit__mark { flex-shrink:0; filter:drop-shadow(0 2px 6px rgba(245,165,36,.45)); transition:transform .5s cubic-bezier(.34,1.45,.55,1); }
a.vg-credit--chip:hover { transform:translateY(-2px); border-color:transparent; box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 0 0 4px rgba(245,165,36,.1), 0 14px 32px -14px rgba(245,165,36,.55); }
a.vg-credit--chip:hover::before { opacity:1; animation-play-state:running; }
a.vg-credit--chip:hover .vg-credit__mark { transform:rotate(-8deg) scale(1.12); }
a.vg-credit:focus-visible { outline:2px solid var(--vg-primary); outline-offset:3px; }
@keyframes vg-credit-shine { 0%, 62% { background-position:100% 0; } 100% { background-position:0 0; } }
@keyframes vg-credit-ring { to { background-position:-220% 0; } }
@media (max-width:640px) { .vg-footer__credit { padding-bottom:96px; } .vg-credit { font-size:12px; } .vg-credit--chip { padding:8px 14px; } }

/* ---------- 10. Motion preferences ---------- */
@media (prefers-reduced-motion:reduce) {
  html body.vg-liquid :is(.vg-btn, .vg-act, .vgr-launch, .vgt-sw__btn, .vg-glassify)::before { transition:none; background-position:0 0, 135% 0 !important; }
  html body.vg-liquid :is(.vg-btn, .vg-act, .vgr-launch, .vgt-sw__btn):active { transform:none; }
  .vg-credit--chip .vg-credit__brand b, .vg-credit--chip::before { animation:none; }
  .vg-credit--chip .vg-credit__brand b { background-position:100% 0; }
}