/*
Theme Name:   VOKIUM Child
Theme URI:    http://186.244.215.95:8086/
Description:  VOKIUM visual system for Storefront. Flips the whole storefront from
              its light default to a dark tech ground: deep violet-black canvas,
              electric-violet accent, cyan support, Space Grotesk + Inter
              (self-hosted), glass product cards and capsule navigation.
Author:       VOKIUM Studio
Author URI:   http://186.244.215.95:8086/
Template:     storefront
Version:      1.1.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  vokium-child
Tags:         dark, e-commerce, glassmorphism, custom-colors, custom-fonts
*/

/* =========================================================================
   00. DESIGN TOKENS
   ====================================================================== */
:root {
	/* --- mandated brand tokens --- */
	--bg: #0D0B1A;
	--accent: #7B5CFF;
	--cyan: #3FE0D0;
	--ink: #ECEAF8;
	--font-head: "Space Grotesk", sans-serif;
	--font-body: "Inter", sans-serif;

	/* --- derived surfaces --- */
	--bg-2: #120F24;
	--bg-3: #17142F;
	--bg-4: #1D1940;

	--glass: rgba(123, 92, 255, .06);
	--glass-2: rgba(123, 92, 255, .10);
	--glass-3: rgba(123, 92, 255, .16);

	--line: rgba(123, 92, 255, .25);
	--line-soft: rgba(123, 92, 255, .14);
	--line-hard: rgba(123, 92, 255, .38);

	/* --- derived ink --- */
	--ink-dim: #BDB7DA;
	--ink-mute: #8E88B0;
	--ink-faint: #6B6690;
	--accent-2: #9C86FF;
	--accent-3: #6A4AE8;

	/* --- state --- */
	--ok: #3FE0D0;
	--warn: #FFC46B;
	--err: #FF6B8A;
	--ok-bg: rgba(63, 224, 208, .10);
	--warn-bg: rgba(255, 196, 107, .10);
	--err-bg: rgba(255, 107, 138, .10);

	/* --- form --- */
	--field: rgba(13, 11, 26, .72);
	--field-2: rgba(23, 20, 47, .85);

	/* --- geometry --- */
	--radius-sm: 10px;
	--radius: 16px;
	--radius-lg: 22px;
	--pill: 999px;
	--blur: blur(12px);
	--glow: 0 0 20px rgba(123, 92, 255, .5);
	--glow-soft: 0 0 34px rgba(123, 92, 255, .28);
	--glow-cyan: 0 0 20px rgba(63, 224, 208, .42);
	--wrap: 1180px;

	/* make native widgets (scrollbars, selects, spinners) dark too */
	color-scheme: dark;
}

/* =========================================================================
   01. BASE — body, type, links
   ====================================================================== */
html {
	background-color: var(--bg);
	scroll-behavior: smooth;
}

body,
body.storefront,
.vokium-dark {
	font-family: var(--font-body) !important;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.7;
	color: var(--ink-dim) !important;
	background-color: var(--bg) !important;
	background-image:
		radial-gradient(1000px 620px at 12% -6%, rgba(123, 92, 255, .17), transparent 62%),
		radial-gradient(760px 520px at 92% 4%, rgba(63, 224, 208, .09), transparent 60%),
		radial-gradient(900px 700px at 50% 108%, rgba(123, 92, 255, .12), transparent 64%);
	background-attachment: fixed;
	background-repeat: no-repeat;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6,
.wc-block-grid__product-title,
.site-title,
.woocommerce-loop-product__title,
.woocommerce-Tabs-panel h2,
.related.products > h2,
.cross-sells > h2 {
	font-family: var(--font-head) !important;
	font-weight: 700;
	letter-spacing: -.015em;
	color: var(--ink) !important;
}

h1 { font-size: 2.35rem; line-height: 1.15; }
h2 { font-size: 1.85rem; line-height: 1.2; }
h3 { font-size: 1.35rem; line-height: 1.3; }
h4 { font-size: 1.1rem; }
h5, h6 { font-size: 1rem; }

p, li, dd, dt, blockquote, figcaption {
	color: var(--ink-dim);
}

a {
	color: var(--accent-2) !important;
	text-decoration-color: rgba(123, 92, 255, .4);
	text-underline-offset: 3px;
	transition: color .18s ease, text-decoration-color .18s ease;
}

a:hover,
a:focus {
	color: var(--cyan) !important;
	text-decoration-color: rgba(63, 224, 208, .55);
}

strong, b { color: var(--ink); font-weight: 600; }
small { color: var(--ink-mute); }
hr { background-color: var(--line) !important; height: 1px; }

blockquote {
	border-left: 3px solid var(--accent);
	background: var(--glass);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	padding: 1em 1.4em;
}

pre {
	background: rgba(0, 0, 0, .42) !important;
	color: var(--ink);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius-sm);
}

code, kbd, tt, var {
	background-color: rgba(123, 92, 255, .14) !important;
	color: var(--cyan) !important;
	border-radius: 5px;
	padding: .12em .4em !important;
}

pre code { background: none !important; color: inherit !important; padding: 0 !important; }

mark, ins {
	background: rgba(123, 92, 255, .2) !important;
	color: var(--ink) !important;
}

::selection { background: var(--accent); color: #fff; }
::-moz-selection { background: var(--accent); color: #fff; }

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: #0A0814; }
::-webkit-scrollbar-thumb {
	background: rgba(123, 92, 255, .42);
	border-radius: var(--pill);
	border: 3px solid #0A0814;
}
::-webkit-scrollbar-thumb:hover { background: rgba(123, 92, 255, .7); }

.screen-reader-text:focus {
	background-color: var(--bg-3) !important;
	color: var(--ink) !important;
	box-shadow: 0 0 0 2px var(--accent);
}

/* width of the page shell */
.col-full { max-width: var(--wrap); }

/* =========================================================================
   02. HEADER — dark shell + capsule navigation
   ====================================================================== */

/* brand strip above the masthead (added in functions.php) */
.vk-topbar {
	background: linear-gradient(90deg, rgba(123, 92, 255, .18), rgba(63, 224, 208, .10) 55%, rgba(123, 92, 255, .16));
	border-bottom: 1px solid var(--line-soft);
	font-size: .78rem;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.vk-topbar .col-full {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1.5em;
	padding: .55em 0;
	flex-wrap: wrap;
}

.vk-topbar__tag { color: var(--ink-dim); }
.vk-topbar__meta { color: var(--cyan); white-space: nowrap; }

.site-header,
#masthead {
	background-color: rgba(13, 11, 26, .88) !important;
	color: var(--ink-dim) !important;
	backdrop-filter: var(--blur);
	-webkit-backdrop-filter: var(--blur);
	border-bottom: 1px solid var(--line) !important;
	box-shadow: 0 10px 40px rgba(0, 0, 0, .45);
	padding-top: 1.1em;
	padding-bottom: .5em;
}

.site-header .col-full { padding-left: 0; padding-right: 0; }

.site-branding,
.site-title a,
.site-branding h1 a,
.site-branding .site-title a {
	font-family: var(--font-head) !important;
	color: var(--ink) !important;
	letter-spacing: .3em;
	text-transform: uppercase;
	font-weight: 700;
	text-shadow: 0 0 26px rgba(123, 92, 255, .55);
}

.site-title a:hover { color: var(--cyan) !important; }

p.site-description,
.site-description {
	color: var(--ink-mute) !important;
}

/* --- header search --- */
.site-search .widget_product_search form::before,
.site-search .widget_product_search form::after { color: var(--ink-mute); }

.site-search input[type="search"],
.site-search input[type="text"],
.widget_product_search input[type="search"],
.woocommerce-product-search .search-field {
	background-color: var(--field-2) !important;
	color: var(--ink) !important;
	border: 1px solid var(--line) !important;
	border-radius: var(--pill) !important;
	padding-left: 2.9em !important;
}

.site-search input::placeholder { color: var(--ink-faint) !important; }

.site-search button,
.widget_product_search button,
.woocommerce-product-search button {
	background-color: var(--accent) !important;
	border-color: var(--accent) !important;
	color: #fff !important;
	border-radius: var(--pill) !important;
}

.site-search button:hover,
.woocommerce-product-search button:hover {
	background-color: var(--accent-2) !important;
	box-shadow: var(--glow);
}

/* --- primary navigation: capsule bar --- */
.storefront-primary-navigation,
.main-navigation {
	background-color: transparent !important;
	border-bottom: 0 !important;
}

/* Primary menu list = flex row of capsules.
   Scoping matters here: Storefront's handheld list is
   `.main-navigation div.menu > ul:not(.nav-menu)` and is collapsed with
   `max-height:0; overflow:hidden` — which does NOT clip padding, because
   padding sits outside the content box. Putting padding/gap on that list
   leaked a ~11px strip of stray pills under the nav. */
.main-navigation ul.nav-menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4em;
	margin: 0 !important;
	padding: 0 0 .7em;
	list-style: none;
}

.main-navigation ul.nav-menu > li {
	float: none !important;
	position: relative;
}

/* handheld list: stay truly zero-height while collapsed */
.main-navigation div.menu > ul:not(.nav-menu) {
	display: block;
	margin: 0 !important;
	padding: 0 !important;
	background-color: transparent !important;
}

/* …and become full-width capsules once the mobile toggle opens it */
.main-navigation.toggled div.menu > ul:not(.nav-menu),
.main-navigation.toggled .handheld-navigation ul {
	display: flex !important;
	flex-direction: column;
	align-items: stretch;
	gap: .4em;
	padding: .7em 0 !important;
}

.main-navigation.toggled div.menu > ul:not(.nav-menu) > li,
.main-navigation.toggled .handheld-navigation ul > li {
	float: none !important;
	display: block;
}

.main-navigation.toggled div.menu > ul:not(.nav-menu) > li > a,
.main-navigation.toggled .handheld-navigation ul > li > a {
	display: block;
	text-align: left;
}

.main-navigation ul li a,
.main-navigation ul.nav-menu > li > a {
	display: inline-block;
	font-family: var(--font-head) !important;
	font-weight: 500;
	font-size: .93rem;
	letter-spacing: .02em;
	color: var(--ink-dim) !important;
	background-color: rgba(123, 92, 255, .07);
	border: 1px solid var(--line-soft);
	border-radius: var(--pill) !important;
	padding: .58em 1.25em !important;
	line-height: 1.35;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease,
		box-shadow .2s ease, transform .2s ease;
}

/* NOTE: the capsule rules stay scoped to .main-navigation on purpose — the
   header cart is also a <ul class="menu">, and an unscoped `ul.menu li a`
   painted the cart link as a nav capsule (caught by the computed-style audit). */

.main-navigation ul li a:hover,
.main-navigation ul li:hover > a,
.main-navigation ul li.focus > a,
.main-navigation ul.nav-menu > li.current-menu-item > a,
.main-navigation ul.nav-menu > li.current_page_item > a,
.main-navigation ul.nav-menu > li.current_page_parent > a,
.main-navigation ul.nav-menu > li.current_page_ancestor > a {
	background-color: var(--accent) !important;
	border-color: var(--accent) !important;
	color: #fff !important;
	box-shadow: var(--glow);
	transform: translateY(-1px);
}

/* sub-menus stay dark */
.main-navigation ul ul,
.secondary-navigation ul ul,
.secondary-navigation ul.menu ul {
	background-color: rgba(18, 15, 36, .97) !important;
	border: 1px solid var(--line) !important;
	border-radius: var(--radius-sm);
	box-shadow: 0 18px 44px rgba(0, 0, 0, .6);
	backdrop-filter: var(--blur);
	-webkit-backdrop-filter: var(--blur);
}

.main-navigation ul ul li a,
.main-navigation ul.nav-menu ul a {
	background-color: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var(--ink-dim) !important;
	transform: none !important;
	padding: .6em 1em !important;
}

.main-navigation ul ul li a:hover,
.main-navigation ul.nav-menu ul li:hover > a,
.main-navigation ul.nav-menu ul li.focus > a {
	background-color: rgba(123, 92, 255, .22) !important;
	color: var(--ink) !important;
}

/* mobile menu toggle */
button.menu-toggle,
button.menu-toggle:hover {
	background-color: var(--glass-2) !important;
	border-color: var(--line) !important;
	color: var(--ink) !important;
	border-radius: var(--pill) !important;
}

button.menu-toggle::before,
button.menu-toggle::after,
button.menu-toggle span::before { background-color: var(--ink) !important; }

.handheld-navigation .dropdown-toggle {
	background: transparent !important;
	color: var(--ink) !important;
}

/* the handheld drawer in this markup is `.main-navigation div.menu > ul`
   (no .handheld-navigation wrapper), so target the real structure */
.main-navigation.toggled div.menu > ul:not(.nav-menu) > li > a {
	background-color: rgba(123, 92, 255, .10) !important;
	margin-bottom: .35em;
}

.handheld-navigation,
.handheld-navigation .menu > ul {
	background-color: rgba(18, 15, 36, .98) !important;
}

/* secondary navigation */
.secondary-navigation .menu ul a,
.secondary-navigation a {
	background: rgba(123, 92, 255, .12) !important;
	color: var(--ink-dim) !important;
	border-radius: var(--pill);
}

/* header cart — its own filled pill, so it reads as a CTA next to the nav */
.site-header-cart .cart-contents {
	background-color: var(--accent) !important;
	border: 1px solid var(--accent) !important;
	border-radius: var(--pill) !important;
	color: #fff !important;
	font-family: var(--font-head) !important;
	font-weight: 500;
	padding: .55em 1.15em !important;
	line-height: 1.35;
	text-decoration: none;
	display: inline-block;
	transition: background-color .2s ease, box-shadow .25s ease, transform .2s ease;
}

.site-header-cart .cart-contents:hover,
.site-header-cart .cart-contents:focus {
	background-color: var(--accent-2) !important;
	color: #fff !important;
	box-shadow: var(--glow) !important;
	transform: translateY(-1px);
}

.site-header-cart .cart-contents span,
.site-header-cart .cart-contents .amount { color: #fff !important; }

/* count sits on a dark chip: cyan-on-violet was only 2.65:1 */
.site-header-cart .cart-contents .count {
	display: inline-block;
	color: var(--cyan) !important;
	background-color: rgba(13, 11, 26, .62);
	border-radius: var(--pill);
	padding: .05em .6em;
	margin-left: .5em;
	font-size: .8em;
	opacity: 1 !important;
}

.site-header-cart .widget_shopping_cart,
.site-header-cart .widget_shopping_cart_content {
	background-color: rgba(18, 15, 36, .98) !important;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .65);
	backdrop-filter: var(--blur);
	-webkit-backdrop-filter: var(--blur);
}

/* =========================================================================
   03. BUTTONS — electric violet, glowing hover
   ====================================================================== */
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.widget a.button,
.added_to_cart,
.wc-block-grid__products .wc-block-grid__product .wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-Button,
.wp-block-button__link {
	font-family: var(--font-head) !important;
	font-weight: 500 !important;
	letter-spacing: .02em;
	background-color: var(--accent) !important;
	border: 1px solid var(--accent) !important;
	color: #fff !important;
	border-radius: var(--pill) !important;
	text-shadow: none !important;
	box-shadow: none;
	transition: background-color .2s ease, box-shadow .25s ease, transform .2s ease,
		border-color .2s ease, color .2s ease;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.button:hover,
.widget a.button:hover,
.added_to_cart:hover,
.wc-block-grid__products .wc-block-grid__product .wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce-Button:hover,
.wp-block-button__link:hover,
.wp-block-button__link:focus {
	background-color: var(--accent-2) !important;
	border-color: var(--accent-2) !important;
	color: #fff !important;
	box-shadow: 0 0 20px rgba(123, 92, 255, .5) !important;
	transform: translateY(-1px);
}

/* alt / secondary actions */
button.alt,
input[type="button"].alt,
input[type="reset"].alt,
input[type="submit"].alt,
.button.alt,
.widget-area .widget a.button.alt,
.wc-block-grid__products .wc-block-grid__product .wp-block-button__link.alt,
.added_to_cart.alt,
.added_to_cart.cta {
	background-color: transparent !important;
	border: 1px solid var(--line-hard) !important;
	color: var(--cyan) !important;
}

button.alt:hover,
input[type="submit"].alt:hover,
input[type="button"].alt:hover,
.button.alt:hover,
.widget-area .widget a.button.alt:hover,
.added_to_cart.alt:hover {
	background-color: rgba(63, 224, 208, .14) !important;
	border-color: var(--cyan) !important;
	color: var(--cyan) !important;
	box-shadow: 0 0 20px rgba(63, 224, 208, .38) !important;
}

.woocommerce a.button.loading,
.woocommerce button.button.loading { color: #fff !important; opacity: .75; }

/* =========================================================================
   04. FORMS — inputs, textareas, selects (incl. variation dropdowns)
   ====================================================================== */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="time"],
textarea,
.input-text,
select,
.woocommerce-input-wrapper input,
.woocommerce-input-wrapper textarea,
#order_review input,
#order_review textarea,
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
	background-color: var(--field) !important;
	color: var(--ink) !important;
	border: 1px solid var(--line) !important;
	border-radius: var(--radius-sm) !important;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35) !important;
	font-family: var(--font-body) !important;
	transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
textarea:focus,
.input-text:focus,
select:focus,
.woocommerce-input-wrapper input:focus {
	background-color: var(--field-2) !important;
	border-color: var(--accent) !important;
	box-shadow: 0 0 0 3px rgba(123, 92, 255, .22), var(--glow) !important;
	outline: none !important;
	color: var(--ink) !important;
}

input::placeholder,
textarea::placeholder { color: var(--ink-faint) !important; opacity: 1; }

select,
select.vk-select,
table.variations select,
.woocommerce-ordering select,
.storefront-sorting select {
	background-color: var(--bg-3) !important;
	color: var(--ink) !important;
	border: 1px solid var(--line) !important;
	border-radius: var(--radius-sm) !important;
	padding: .65em 2.4em .65em .9em !important;
	background-image:
		linear-gradient(45deg, transparent 50%, var(--cyan) 50%),
		linear-gradient(135deg, var(--cyan) 50%, transparent 50%);
	background-position:
		calc(100% - 1.15em) calc(50% + 2px),
		calc(100% - .8em) calc(50% + 2px);
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	-webkit-appearance: none;
	appearance: none;
}

select option,
select optgroup {
	background-color: #14112A !important;
	color: var(--ink) !important;
}

label,
.form-row label,
.woocommerce-form-row label,
.woocommerce-checkout label {
	color: var(--ink-dim) !important;
}

fieldset,
fieldset legend { background-color: transparent !important; color: var(--ink) !important; }

input[type="checkbox"],
input[type="radio"] { accent-color: var(--accent); }

.woocommerce-form__label-for-checkbox,
.woocommerce-terms-and-conditions-wrapper { color: var(--ink-dim); }

.required { color: var(--cyan) !important; }

.woocommerce-invalid input,
.woocommerce-invalid select { border-color: var(--err) !important; }

.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-ResetPassword,
.woocommerce-EditAccountForm,
form.woocommerce-form {
	background-color: var(--glass) !important;
	border: 1px solid var(--line) !important;
	border-radius: var(--radius) !important;
	padding: 1.5em !important;
}

/* =========================================================================
   05. TABLES — shop tables, cart, totals, WooCommerce default tables
   ====================================================================== */
table,
table:not(.has-background),
.shop_table,
.woocommerce-table,
table.woocommerce-checkout-review-order-table,
table.shop_table_responsive {
	background-color: transparent !important;
	color: var(--ink-dim) !important;
	border-color: var(--line-soft) !important;
}

table:not(.has-background) th,
table th,
thead th,
.shop_table th,
.woocommerce-table th {
	background-color: rgba(123, 92, 255, .16) !important;
	color: var(--ink) !important;
	font-family: var(--font-head) !important;
	border-color: var(--line-soft) !important;
}

table:not(.has-background) tbody td,
tbody td,
.shop_table td,
.woocommerce-table td {
	background-color: rgba(123, 92, 255, .04) !important;
	color: var(--ink-dim) !important;
	border-color: var(--line-soft) !important;
}

table:not(.has-background) tbody tr:nth-child(2n) td,
tbody tr:nth-child(2n) td {
	background-color: rgba(123, 92, 255, .08) !important;
}

table tfoot td,
table tfoot th { background-color: rgba(123, 92, 255, .12) !important; color: var(--ink) !important; }

.cart_totals,
.woocommerce-checkout-review-order,
#order_review {
	background-color: var(--glass) !important;
	border: 1px solid var(--line) !important;
	border-radius: var(--radius) !important;
	padding: 1.4em !important;
}

.cart_totals h2,
.woocommerce-checkout-review-order h3 { color: var(--ink) !important; }

/* =========================================================================
   06. MESSAGES, NOTICES, BREADCRUMB, PAGINATION
   ====================================================================== */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments,
.wc-block-components-notice-banner,
.woocommerce-notices-wrapper .woocommerce-message {
	color: var(--ink) !important;
	background-color: var(--ok-bg) !important;
	border: 1px solid rgba(63, 224, 208, .38) !important;
	border-left: .5em solid var(--cyan) !important;
	border-radius: var(--radius-sm) !important;
	box-shadow: 0 12px 34px rgba(0, 0, 0, .4);
	text-shadow: none;
}

.woocommerce-info,
.woocommerce-noreviews,
p.no-comments {
	background-color: rgba(123, 92, 255, .12) !important;
	border-color: var(--line-hard) !important;
	border-left-color: var(--accent) !important;
}

.woocommerce-error {
	background-color: var(--err-bg) !important;
	border-color: rgba(255, 107, 138, .42) !important;
	border-left-color: var(--err) !important;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { color: currentColor !important; }

.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button,
.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a {
	background: transparent !important;
	color: var(--ink) !important;
	border: 0 !important;
	box-shadow: none !important;
	text-decoration: underline;
}

.woocommerce-info.woocommerce-no-products-found {
	background-color: transparent !important;
	border: 0 !important;
	color: var(--ink-mute) !important;
}

.demo_store,
.woocommerce-store-notice {
	background-color: var(--bg-4) !important;
	color: var(--ink) !important;
	border-bottom: 1px solid var(--line);
}

.demo_store a,
.woocommerce-store-notice a { color: var(--cyan) !important; }

.demo_store a.woocommerce-store-notice__dismiss-link {
	background: rgba(123, 92, 255, .3) !important;
	color: var(--ink) !important;
}

/* breadcrumb */
.storefront-breadcrumb {
	background-color: rgba(123, 92, 255, .06) !important;
	border-top: 1px solid var(--line-soft);
	border-bottom: 1px solid var(--line-soft);
}

.woocommerce-breadcrumb,
.woocommerce-breadcrumb a,
.storefront-breadcrumb a {
	color: var(--ink-mute) !important;
}

.woocommerce-breadcrumb a:hover { color: var(--cyan) !important; }
.woocommerce-breadcrumb .breadcrumb-separator { color: var(--ink-faint) !important; }

/* pagination */
.pagination .page-numbers li .page-numbers,
.woocommerce-pagination .page-numbers li .page-numbers,
.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span {
	background-color: rgba(123, 92, 255, .09) !important;
	color: var(--ink-dim) !important;
	border: 1px solid var(--line-soft) !important;
	border-radius: var(--radius-sm) !important;
	margin: 0 .18em;
	transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.pagination .page-numbers li a.page-numbers:hover,
.woocommerce-pagination .page-numbers li a.page-numbers:hover,
.woocommerce-pagination ul li a:hover {
	background-color: rgba(123, 92, 255, .26) !important;
	color: var(--ink) !important;
	box-shadow: var(--glow-soft);
}

.pagination .page-numbers li .page-numbers.current,
.woocommerce-pagination .page-numbers li .page-numbers.current,
.woocommerce-pagination ul li span.current {
	background-color: var(--accent) !important;
	border-color: var(--accent) !important;
	color: #fff !important;
	box-shadow: 0 0 18px rgba(123, 92, 255, .45);
}

.pagination .page-numbers li .page-numbers.dots,
.woocommerce-pagination .page-numbers li .page-numbers.dots {
	background-color: transparent !important;
	border-color: transparent !important;
	color: var(--ink-faint) !important;
}

.woocommerce-pagination ul,
.pagination .page-numbers { border: 0 !important; }

/* =========================================================================
   07. SHOP LOOP — glass product cards
   ====================================================================== */
.woocommerce ul.products li.product,
ul.products li.product,
.wc-block-grid__products .wc-block-grid__product {
	background-color: rgba(123, 92, 255, .06) !important;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(123, 92, 255, .25) !important;
	border-radius: var(--radius-lg) !important;
	padding: 1.1em 1.1em 1.3em !important;
	box-shadow: 0 16px 40px rgba(0, 0, 0, .38);
	transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease,
		background-color .28s ease;
	overflow: hidden;
	position: relative;
}

.woocommerce ul.products li.product::after,
.wc-block-grid__products .wc-block-grid__product::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	background: linear-gradient(150deg, rgba(123, 92, 255, .18), transparent 42%, rgba(63, 224, 208, .10));
	opacity: 0;
	transition: opacity .28s ease;
}

.woocommerce ul.products li.product:hover,
ul.products li.product:hover,
.wc-block-grid__products .wc-block-grid__product:hover {
	transform: translateY(-6px);
	border-color: var(--accent) !important;
	background-color: rgba(123, 92, 255, .12) !important;
	box-shadow: 0 22px 60px rgba(0, 0, 0, .55), var(--glow);
}

.woocommerce ul.products li.product:hover::after { opacity: 1; }

.woocommerce ul.products li.product a img,
ul.products li.product img,
.wc-block-grid__product-image img {
	border-radius: var(--radius) !important;
	background-color: rgba(0, 0, 0, .45);
	box-shadow: 0 8px 26px rgba(0, 0, 0, .45);
	transition: transform .35s ease, filter .35s ease;
	position: relative;
	z-index: 1;
}

.woocommerce ul.products li.product:hover a img {
	transform: scale(1.025);
	filter: saturate(1.12) brightness(1.06);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3,
.wc-block-grid__product-title {
	color: var(--ink) !important;
	font-family: var(--font-head) !important;
	font-weight: 500 !important;
	font-size: 1.05rem !important;
	line-height: 1.35;
	position: relative;
	z-index: 1;
}

.woocommerce ul.products li.product .price,
ul.products li.product .price,
.price,
.wc-block-grid__product-price {
	color: var(--cyan) !important;
	font-family: var(--font-head) !important;
	font-weight: 700 !important;
	font-size: 1.12rem !important;
	position: relative;
	z-index: 1;
}

.price ins,
.woocommerce ul.products li.product .price ins {
	background: transparent !important;
	color: var(--cyan) !important;
	text-decoration: none;
}

.price del,
.woocommerce ul.products li.product .price del {
	color: var(--ink-faint) !important;
	opacity: .85;
	font-weight: 400;
}

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
	margin-top: .7em;
	position: relative;
	z-index: 1;
}

/* sale badge */
.woocommerce span.onsale,
span.onsale {
	background-color: var(--accent) !important;
	color: #fff !important;
	border-radius: var(--pill) !important;
	font-family: var(--font-head) !important;
	font-weight: 500 !important;
	letter-spacing: .04em;
	box-shadow: var(--glow);
	min-height: 2.6em;
	min-width: 2.6em;
	line-height: 2.6em;
	padding: 0 .9em;
}

.woocommerce ul.products li.product .onsale { top: .6em !important; right: .6em !important; }

/* star ratings */
.star-rating::before { color: var(--ink-faint) !important; }
.star-rating span::before { color: var(--cyan) !important; }

.woocommerce-product-rating .woocommerce-review-link,
.woocommerce-review-link { color: var(--ink-mute) !important; }

/* sorting / result count */
.woocommerce-result-count,
.storefront-sorting,
.woocommerce-ordering { color: var(--ink-mute) !important; }

/* shop page header band */
.woocommerce-products-header,
.woocommerce-products-header__title { color: var(--ink) !important; }

.page-title,
.entry-title,
.product_title {
	color: var(--ink) !important;
	font-family: var(--font-head) !important;
}

/* =========================================================================
   08. SINGLE PRODUCT — gallery, tabs, meta
   ====================================================================== */
.single-product div.product .woocommerce-product-gallery,
.single-product .woocommerce-product-gallery {
	background-color: var(--glass) !important;
	border: 1px solid var(--line) !important;
	border-radius: var(--radius-lg) !important;
	padding: .9em !important;
	backdrop-filter: var(--blur);
	-webkit-backdrop-filter: var(--blur);
}

.woocommerce-product-gallery__image img,
.woocommerce-product-gallery img {
	border-radius: var(--radius) !important;
	background-color: rgba(0, 0, 0, .45);
}

.single-product div.product .woocommerce-product-gallery .zoomImg {
	background-color: transparent !important;
}

.woocommerce-product-gallery .flex-control-thumbs li img {
	border-radius: var(--radius-sm) !important;
	opacity: .55;
	transition: opacity .2s ease, box-shadow .2s ease;
}

.woocommerce-product-gallery .flex-control-thumbs li img.flex-active,
.woocommerce-product-gallery .flex-control-thumbs li img:hover {
	opacity: 1;
	box-shadow: 0 0 0 2px var(--accent);
}

.flex-control-nav a,
.woocommerce-product-gallery .flex-control-nav li a { box-shadow: none; }

.single-product div.product .summary,
.single-product div.product .entry-summary { color: var(--ink-dim); }

.single-product div.product .price,
.single-product div.product p.price {
	color: var(--cyan) !important;
	font-family: var(--font-head) !important;
	font-size: 1.75rem !important;
	font-weight: 700 !important;
}

.product_meta,
.product_meta a,
.sku_wrapper,
.posted_in,
.tagged_as {
	color: var(--ink-mute) !important;
	border-color: var(--line-soft) !important;
}

.product_meta > span { border-top-color: var(--line-soft) !important; }

.woocommerce-product-details__short-description { color: var(--ink-dim); }

/* quantity */
.quantity .qty,
.woocommerce .quantity input.qty {
	background-color: var(--field-2) !important;
	color: var(--ink) !important;
	border: 1px solid var(--line) !important;
	border-radius: var(--radius-sm) !important;
}

/* --- variations form (variant selector) --- */
table.variations,
.single-product div.product table.variations {
	background-color: rgba(123, 92, 255, .07) !important;
	border: 1px solid var(--line) !important;
	border-radius: var(--radius) !important;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}

table.variations th,
table.variations td,
.single-product div.product table.variations th,
.single-product div.product table.variations td {
	background-color: transparent !important;
	color: var(--ink-dim) !important;
	border: 0 !important;
	border-bottom: 1px solid var(--line-soft) !important;
	padding: .9em 1.1em !important;
	vertical-align: middle;
}

table.variations tr:last-child th,
table.variations tr:last-child td { border-bottom: 0 !important; }

table.variations th.label label,
table.variations .label label {
	color: var(--ink) !important;
	font-family: var(--font-head) !important;
	font-weight: 500 !important;
	letter-spacing: .02em;
	text-transform: uppercase;
	font-size: .82rem;
}

table.variations select {
	width: 100%;
	max-width: 26em;
}

table.variations .reset_variations,
a.reset_variations {
	color: var(--ink-mute) !important;
	font-size: .85rem;
	text-decoration: underline;
}

table.variations .reset_variations:hover { color: var(--err) !important; }

.woocommerce-variation,
.single_variation_wrap,
.woocommerce-variation-add-to-cart {
	color: var(--ink-dim) !important;
}

.woocommerce-variation-price .price,
.woocommerce-variation-price .amount {
	color: var(--cyan) !important;
	font-family: var(--font-head) !important;
	font-weight: 700 !important;
}

.woocommerce-variation-availability,
.woocommerce-variation-availability .stock { color: var(--ink-mute) !important; }
.woocommerce-variation-availability .in-stock { color: var(--cyan) !important; }
.woocommerce-variation-availability .out-of-stock { color: var(--err) !important; }

.woocommerce-variation-description { color: var(--ink-dim) !important; }

.woocommerce div.product .stock,
.stock.in-stock { color: var(--cyan) !important; }
.stock.out-of-stock { color: var(--err) !important; }

/* tabs */
.woocommerce-tabs,
.wc-tabs-wrapper { border-color: var(--line-soft) !important; }

.woocommerce-tabs ul.tabs,
.woocommerce div.product .woocommerce-tabs ul.tabs {
	background-color: transparent !important;
	border-bottom: 1px solid var(--line) !important;
	padding-left: 0;
}

.woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background-color: rgba(123, 92, 255, .09) !important;
	border: 1px solid var(--line-soft) !important;
	border-bottom: 0 !important;
	border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
	margin-right: .3em;
}

.woocommerce-tabs ul.tabs li a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	color: var(--ink-dim) !important;
	font-family: var(--font-head) !important;
	font-weight: 500 !important;
	text-shadow: none !important;
}

.woocommerce-tabs ul.tabs li.active,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background-color: rgba(123, 92, 255, .24) !important;
	border-color: var(--accent) !important;
}

.woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--ink) !important; }

.woocommerce-tabs ul.tabs li::after,
.woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none !important; }

.woocommerce-Tabs-panel,
.wc-tab {
	background-color: var(--glass) !important;
	border: 1px solid var(--line) !important;
	border-top: 0 !important;
	border-radius: 0 0 var(--radius) var(--radius) !important;
	color: var(--ink-dim) !important;
	padding: 1.6em !important;
}

/* reviews + comment form */
#reviews #comments,
.woocommerce-Reviews { color: var(--ink-dim); }

.woocommerce-Reviews .comment_container,
#comments .comment-list .comment-content .comment-text,
.comment-text {
	background-color: rgba(123, 92, 255, .08) !important;
	border: 1px solid var(--line-soft) !important;
	border-radius: var(--radius) !important;
	color: var(--ink-dim) !important;
}

#respond {
	background-color: var(--glass) !important;
	border: 1px solid var(--line-soft) !important;
	border-radius: var(--radius) !important;
}

#respond .comment-form-rating a,
.stars a { color: var(--ink-faint) !important; }

/* related / upsells */
.related.products,
.upsells.products,
.cross-sells { border-top-color: var(--line) !important; }

.related.products > h2,
.upsells.products > h2,
.cross-sells > h2 {
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: 1.1rem !important;
}

/* sticky add to cart */
.storefront-sticky-add-to-cart {
	background-color: rgba(18, 15, 36, .96) !important;
	border-top: 1px solid var(--line) !important;
	backdrop-filter: var(--blur);
	-webkit-backdrop-filter: var(--blur);
}

.storefront-sticky-add-to-cart__content,
.storefront-sticky-add-to-cart__content-price { color: var(--ink) !important; }

/* =========================================================================
   09. PDP CONTENT BLOCKS — spec table, sections, returns, usage
   ====================================================================== */

/* lede paragraph under "Description" */
.pdp-sections {
	color: var(--ink-dim) !important;
}

.pdp-sections .pdp-lede {
	color: var(--ink) !important;
	font-size: 1.1rem;
	line-height: 1.75;
	border-left: 3px solid var(--accent);
	padding-left: 1.1em;
	margin-bottom: 1.6em;
}

/* section headings: cyan */
.pdp-sections h3 {
	color: var(--cyan) !important;
	font-family: var(--font-head) !important;
	font-weight: 500 !important;
	letter-spacing: .06em;
	text-transform: uppercase;
	font-size: 1rem !important;
	margin-top: 2.1em;
	margin-bottom: .9em;
	padding-bottom: .5em;
	border-bottom: 1px solid var(--line-soft);
}

.pdp-sections h3:first-child { margin-top: 0; }

/* body copy: pale violet-grey */
.pdp-sections p,
.pdp-sections ul,
.pdp-sections ol,
.pdp-sections li,
.pdp-bullets li,
.pdp-usage li,
.pdp-care li {
	color: #B9B3D6 !important;
}

.pdp-bullets,
.pdp-usage,
.pdp-care {
	padding-left: 1.2em;
	margin-left: 0;
}

.pdp-bullets li,
.pdp-usage li,
.pdp-care li {
	margin-bottom: .5em;
	line-height: 1.7;
}

.pdp-bullets { list-style: none; padding-left: 0; }

.pdp-bullets li {
	position: relative;
	padding-left: 1.5em;
}

.pdp-bullets li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .62em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--cyan);
	box-shadow: 0 0 10px rgba(63, 224, 208, .8);
}

.pdp-usage { list-style: none; padding-left: 0; counter-reset: vk-step; }

.pdp-usage li {
	position: relative;
	padding-left: 2.7em;
	counter-increment: vk-step;
	margin-bottom: .8em;
}

.pdp-usage li::before {
	content: counter(vk-step);
	position: absolute;
	left: 0;
	top: .1em;
	width: 1.85em;
	height: 1.85em;
	line-height: 1.85em;
	text-align: center;
	border-radius: 50%;
	background: rgba(123, 92, 255, .22);
	border: 1px solid var(--line-hard);
	color: var(--cyan);
	font-family: var(--font-head) !important;
	font-weight: 700;
	font-size: .82em;
}

.pdp-care { list-style: none; padding-left: 0; }
.pdp-care li { position: relative; padding-left: 1.5em; }
.pdp-care li::before {
	content: "";
	position: absolute;
	left: .1em;
	top: .6em;
	width: 8px;
	height: 2px;
	background: var(--accent-2);
}

/* --- the specification table --- */
table.pdp-spec,
table.pdp-spec:not(.has-background) {
	width: 100%;
	background-color: rgba(123, 92, 255, .05) !important;
	border: 1px solid var(--line) !important;
	border-radius: var(--radius) !important;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	margin: 0 0 2em;
	color: var(--ink-dim) !important;
}

table.pdp-spec th {
	background-color: rgba(123, 92, 255, .16) !important;
	color: var(--ink) !important;
	font-family: var(--font-head) !important;
	font-weight: 500 !important;
	font-size: .8rem !important;
	letter-spacing: .07em;
	text-transform: uppercase;
	text-align: left;
	vertical-align: top;
	width: 34%;
	padding: 1em 1.2em !important;
	border: 0 !important;
	border-top: 1px solid rgba(123, 92, 255, .25) !important;
}

/* NOTE: `tbody` is in these selectors on purpose — Storefront's customizer
   ships `table:not(.has-background) tbody td` (specificity 0,1,3) which
   otherwise outranks the spec-mandated PDP colours. */
table.pdp-spec tbody td {
	background-color: rgba(123, 92, 255, .03) !important;
	color: #B9B3D6 !important;
	padding: 1em 1.2em !important;
	vertical-align: top;
	border: 0 !important;
	border-top: 1px solid rgba(123, 92, 255, .25) !important;
}

table.pdp-spec tbody tr:first-child th,
table.pdp-spec tbody tr:first-child td { border-top: 0 !important; }

table.pdp-spec tbody tr:hover th { background-color: rgba(123, 92, 255, .24) !important; }
table.pdp-spec tbody tr:hover td { background-color: rgba(123, 92, 255, .08) !important; }

table.pdp-spec strong { color: var(--ink) !important; }

/* --- returns / warnings callouts --- */
.pdp-returns-window,
.pdp-returns-ok,
.pdp-returns-no,
.pdp-returns-ex,
.pdp-warnings {
	border-radius: var(--radius) !important;
	padding: 1em 1.25em !important;
	margin: 1.1em 0 !important;
	border: 1px solid var(--line) !important;
	background-color: var(--glass) !important;
	color: var(--ink-dim) !important;
	list-style: none;
	padding-left: 1.25em !important;
}

.pdp-returns-window {
	border-left: .4em solid var(--accent) !important;
	background-color: rgba(123, 92, 255, .12) !important;
	color: var(--ink) !important;
}

.pdp-returns-ok {
	border-left: .4em solid var(--cyan) !important;
	background-color: var(--ok-bg) !important;
}

.pdp-returns-no {
	border-left: .4em solid var(--err) !important;
	background-color: var(--err-bg) !important;
}

.pdp-returns-ex {
	border-left: .4em solid var(--warn) !important;
	background-color: var(--warn-bg) !important;
}

.pdp-warnings {
	border-left: .4em solid var(--warn) !important;
	background-color: var(--warn-bg) !important;
	color: var(--ink) !important;
}

.pdp-warnings li,
.pdp-returns-window li,
.pdp-returns-ok li,
.pdp-returns-no li,
.pdp-returns-ex li { color: inherit !important; }

.pdp-returns-ok::marker,
.pdp-warnings li::marker { color: var(--cyan); }

/* generic PDP links inside description */
.pdp-sections a { color: var(--accent-2) !important; }
.pdp-sections a:hover { color: var(--cyan) !important; }

/* =========================================================================
   10. SIDEBAR / WIDGETS
   ====================================================================== */
.widget-area .widget,
.footer-widgets .widget,
.widget {
	background-color: rgba(123, 92, 255, .06) !important;
	border: 1px solid var(--line) !important;
	border-radius: var(--radius) !important;
	padding: 1.3em !important;
	backdrop-filter: var(--blur);
	-webkit-backdrop-filter: var(--blur);
	margin-bottom: 1.6em;
}

.widget .widget-title,
.widget .widgettitle,
.widget h1,
.widget h2,
.widget h3 {
	color: var(--ink) !important;
	font-family: var(--font-head) !important;
	font-weight: 500 !important;
	font-size: 1rem !important;
	letter-spacing: .1em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--line) !important;
	border-bottom-color: var(--line) !important;
	padding-bottom: .6em;
	margin-bottom: .9em;
}

.widget-area .widget a,
.widget a {
	color: var(--ink-dim) !important;
}

.widget-area .widget a:hover,
.widget a:hover { color: var(--cyan) !important; }

.widget ul,
.widget ol { list-style: none; margin-left: 0; }
.widget ul li { border-bottom: 1px solid var(--line-soft); padding: .45em 0; }
.widget ul li:last-child { border-bottom: 0; }

.widget select { width: 100%; }

/* price filter slider */
.widget_price_filter .price_slider_wrapper .ui-widget-content {
	background: rgba(123, 92, 255, .2) !important;
	border: 0 !important;
}

.widget_price_filter .ui-slider .ui-slider-range { background: var(--accent) !important; }

.widget_price_filter .ui-slider .ui-slider-handle {
	background: var(--cyan) !important;
	border: 0 !important;
	box-shadow: var(--glow-cyan);
}

.widget_price_filter .price_slider_amount .button { float: none; }

/* product search widget (sidebar / mobile) */
.widget_product_search input[type="search"],
.widget_product_search input[type="text"] {
	background-color: var(--field) !important;
	color: var(--ink) !important;
	border: 1px solid var(--line) !important;
	border-radius: var(--radius-sm) !important;
}

/* =========================================================================
   11. FOOTER
   ====================================================================== */
.site-footer,
.site-footer.storefront {
	background-color: rgba(9, 8, 18, .96) !important;
	color: var(--ink-mute) !important;
	border-top: 1px solid var(--line) !important;
	box-shadow: 0 -18px 50px rgba(0, 0, 0, .45);
}

.site-footer a:not(.button):not(.components-button),
.site-footer .storefront-handheld-footer-bar a:not(.button):not(.components-button) {
	color: var(--ink-dim) !important;
}

.site-footer a:not(.button):not(.components-button):hover { color: var(--cyan) !important; }

.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer h6,
.site-footer .widget .widget-title,
.site-footer .widget .widgettitle {
	color: var(--ink) !important;
}

.site-info,
.site-info a,
.storefront-credit { color: var(--ink-mute) !important; }

.vk-credit__brand {
	display: block;
	font-family: var(--font-head) !important;
	font-weight: 500;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--ink) !important;
	margin-bottom: .35em;
}

.vk-credit__note {
	display: block;
	color: var(--ink-faint) !important;
	font-size: .9rem;
	max-width: 42em;
}

.storefront-handheld-footer-bar,
.storefront-handheld-footer-bar ul li > a,
.storefront-handheld-footer-bar ul li.search .site-search {
	background-color: rgba(18, 15, 36, .98) !important;
	color: var(--ink-dim) !important;
	border-color: var(--line) !important;
}

.storefront-handheld-footer-bar ul li > a { color: var(--ink-dim) !important; }
.storefront-handheld-footer-bar .count { color: var(--cyan) !important; }

/* =========================================================================
   12. CART / CHECKOUT / MY ACCOUNT
   ====================================================================== */
#payment,
.woocommerce-checkout #payment {
	background-color: var(--glass) !important;
	border: 1px solid var(--line) !important;
	border-radius: var(--radius) !important;
	color: var(--ink-dim) !important;
}

#payment .payment_methods,
#payment ul.payment_methods {
	background-color: transparent !important;
	border-bottom: 1px solid var(--line-soft) !important;
}

#payment .payment_methods li,
#payment .payment_methods li label { color: var(--ink-dim) !important; }

#payment .payment_methods li .payment_box {
	background-color: rgba(123, 92, 255, .12) !important;
	color: var(--ink-dim) !important;
	border-radius: var(--radius-sm);
}

#payment .payment_methods li .payment_box::before { border-bottom-color: rgba(123, 92, 255, .12) !important; }

#payment .woocommerce-terms-and-conditions {
	background-color: rgba(123, 92, 255, .08) !important;
	color: var(--ink-dim) !important;
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5) !important;
	border-radius: var(--radius-sm);
}

.woocommerce-checkout-review-order-table .order-total .amount,
.order-total .amount,
.cart-subtotal .amount,
.cart_totals .amount,
.woocommerce-Price-amount { color: var(--cyan) !important; }

.woocommerce-checkout h3,
#order_review_heading { color: var(--ink) !important; }

ul.order_details,
ul.order_details li {
	background-color: var(--glass) !important;
	color: var(--ink-dim) !important;
	border-color: var(--line-soft) !important;
}

.woocommerce-MyAccount-navigation ul li a,
.hentry .entry-content .woocommerce-MyAccount-navigation ul li a {
	color: var(--ink-dim) !important;
	border-color: var(--line-soft) !important;
}

.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li a:hover { color: var(--cyan) !important; }

.woocommerce-MyAccount-content,
.woocommerce-Address { color: var(--ink-dim) !important; }

.woocommerce-address-fields,
address { color: var(--ink-dim); }

.woocommerce-cart table.cart img { border-radius: var(--radius-sm); }
table.cart td.actions { background-color: transparent !important; border-top-color: var(--line) !important; }

.cart-empty,
.return-to-shop { color: var(--ink-dim) !important; }

.woocommerce-password-strength { color: var(--ink) !important; }
.woocommerce-password-strength.short,
.woocommerce-password-strength.bad { background-color: var(--err-bg) !important; color: var(--err) !important; }
.woocommerce-password-strength.good { background-color: var(--warn-bg) !important; color: var(--warn) !important; }
.woocommerce-password-strength.strong { background-color: var(--ok-bg) !important; color: var(--ok) !important; }

/* =========================================================================
   13. GUTENBERG / BLOCK EDITOR OUTPUT
   ====================================================================== */
:root {
	--wp--preset--color--white: #ECEAF8;
	--wp--preset--color--black: #0D0B1A;
	--wp--preset--color--cyan-bluish-gray: #3FE0D0;
	--wp--preset--color--vivid-purple: #7B5CFF;
	--wp--preset--color--luminous-vivid-amber: #FFC46B;
	--wp--preset--color--pale-pink: #FF6B8A;
}

.wp-block-button__link,
.wp-block-button__link:not(.has-text-color) {
	background-color: var(--accent) !important;
	color: #fff !important;
}

.wp-block-button__link:not(.has-background) { background-color: var(--accent) !important; }
.wp-block-button__link.is-style-outline,
.wp-block-button__link.is-style-outline:not(.has-text-color) {
	background-color: transparent !important;
	color: var(--cyan) !important;
	border-color: var(--line-hard) !important;
}

.has-background,
.wp-block-group.has-background,
.wp-block-columns.has-background { color: var(--ink); }

.has-white-background-color,
.has-cyan-bluish-gray-background-color { color: var(--bg) !important; }

.wp-block-quote,
.wp-block-pullquote { border-color: var(--accent); color: var(--ink-dim); }

.wp-block-separator,
hr.wp-block-separator { background-color: var(--line) !important; border-color: var(--line) !important; }

.wp-block-table table,
.wp-block-table th,
.wp-block-table td { border-color: var(--line-soft) !important; color: var(--ink-dim); }

.wp-block-code,
.wp-block-preformatted { background: rgba(0, 0, 0, .42) !important; color: var(--ink); }

.wp-block-search__input,
.wp-block-search input[type="search"] {
	background-color: var(--field) !important;
	color: var(--ink) !important;
	border: 1px solid var(--line) !important;
}

.wp-block-search__button { background-color: var(--accent) !important; color: #fff !important; }

.wc-block-grid__product,
.wp-block-woocommerce-product-category { color: var(--ink-dim); }

/* =========================================================================
   14. MISC — product categories, homepage sections, lightbox
   ====================================================================== */
.storefront-product-section {
	border-top-color: var(--line) !important;
}

.storefront-product-section .section-title,
.storefront-product-categories ul li h2 { color: var(--ink) !important; }

.storefront-product-categories ul li a { color: var(--ink-dim) !important; }

.hentry,
.type-page,
.entry-content,
.entry-summary,
.page-content { color: var(--ink-dim) !important; }

.entry-header .entry-title { color: var(--ink) !important; }
.entry-meta,
.entry-meta a,
.posted-on a,
.byline a { color: var(--ink-mute) !important; }

/* Photoswipe lightbox already dark; keep chrome consistent */
.pswp__button { background-color: transparent !important; }
.pswp__bg { background: #08060F !important; }

/* storefront "beta" site-title wrapper */
.site-branding .beta.site-title { color: var(--ink) !important; }

/* =========================================================================
   15. RESPONSIVE
   ====================================================================== */
@media (max-width: 1024px) {
	.col-full { max-width: 100%; padding-left: 1.2em; padding-right: 1.2em; }
	.vk-topbar .col-full { justify-content: center; text-align: center; }
}

@media (max-width: 767px) {
	body { font-size: 15px; }
	h1 { font-size: 1.85rem; }
	h2 { font-size: 1.5rem; }

	.site-header,
	#masthead { padding-top: .8em; }

	.site-branding,
	.site-title a { letter-spacing: .2em; }

	.vk-topbar__tag { display: none; }
	.vk-topbar .col-full { padding: .5em 0; }

	/* do NOT add padding to ul.nav-menu here: on mobile it is collapsed with
	   max-height:0, so any padding would leak a sliver under the header */
	.main-navigation.toggled div.menu > ul:not(.nav-menu),
	.main-navigation.toggled .handheld-navigation ul { gap: .35em; }

	.main-navigation ul li a,
	.main-navigation ul.nav-menu > li > a {
		font-size: .85rem;
		padding: .5em 1em !important;
	}

	.woocommerce ul.products li.product {
		padding: .9em .9em 1.1em !important;
		border-radius: var(--radius) !important;
	}

	table.pdp-spec th,
	table.pdp-spec td { padding: .8em !important; }
	table.pdp-spec th { width: 42%; font-size: .72rem !important; }

	.pdp-lede { font-size: 1rem; }
	.woocommerce-Tabs-panel, .wc-tab { padding: 1.1em !important; }
}

@media (max-width: 480px) {
	.main-navigation ul li a { padding: .45em .85em !important; font-size: .8rem; }
}

/* =========================================================================
   16. MOTION / A11Y
   ====================================================================== */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--cyan) !important;
	outline-offset: 2px;
}

/* =========================================================================
   17. NEUTRALISE STOREFRONT'S CUSTOMIZER INLINE PALETTE
   Storefront prints three inline colour blocks into <head>
   (storefront-style, storefront-gutenberg-blocks, storefront-woocommerce-style)
   carrying its light palette. Everything in this section exists only to
   overwrite those greys/whites. Found by computed-style audit of the live
   page, not by guesswork.
   ====================================================================== */

/* header cart link (was #333333) */
a.cart-contents,
.site-header-cart .cart-contents,
.site-header-cart .widget_shopping_cart a { color: var(--ink) !important; }

a.cart-contents:hover,
.site-header-cart .widget_shopping_cart a:hover { color: var(--cyan) !important; }

/* cart table separators (were #ffffff) */
table.cart td.product-remove,
table.cart td.actions { border-top-color: var(--line) !important; }

/* handheld footer cart badge */
.storefront-handheld-footer-bar ul li.cart .count {
	background-color: var(--accent) !important;
	color: #fff !important;
	border-color: var(--accent) !important;
}

/* tabs / breadcrumb / rating greys */
.woocommerce-tabs ul.tabs li.active a { color: var(--ink) !important; }
.woocommerce-breadcrumb a,
a.woocommerce-review-link,
.product_meta > span,
.product_meta a,
.posted_in,
.tagged_as { color: var(--ink-mute) !important; }
.woocommerce-breadcrumb a:hover,
a.woocommerce-review-link:hover { color: var(--cyan) !important; }

.wc-block-grid__product-onsale,
.onsale { border-color: var(--accent) !important; color: #fff !important; }

.star-rating span::before { color: var(--cyan) !important; }

/* quantity stepper (+ / - were #7f54b3 on a light chip) */
.quantity .plus,
.quantity .minus {
	color: var(--cyan) !important;
	background-color: rgba(123, 92, 255, .18) !important;
	border: 1px solid var(--line) !important;
	border-radius: var(--pill) !important;
}

.quantity .plus:hover,
.quantity .minus:hover {
	background-color: var(--accent) !important;
	border-color: var(--accent) !important;
	color: #fff !important;
	box-shadow: var(--glow);
}

/* review form stars */
p.stars a::before,
p.stars a:hover ~ a::before,
p.stars.selected a.active ~ a::before { color: var(--ink-faint) !important; }

p.stars.selected a.active::before,
p.stars:hover a::before,
p.stars.selected a:not(.active)::before { color: var(--cyan) !important; }

/* order received / thankyou (#f8f8f8 + notched edges) */
.order_details,
ul.order_details li {
	background-color: var(--glass) !important;
	color: var(--ink-dim) !important;
}

ul.order_details li { border-bottom: 1px dotted var(--line) !important; }

.order_details::before,
.order_details::after {
	background-image: none !important;
	background-color: transparent !important;
	border: 0 !important;
}

/* checkout: review box was #ffffff, payment rows were #f5f5f5 / #fafafa */
#order_review { background-color: var(--glass) !important; color: var(--ink-dim) !important; }

#payment .place-order { background-color: transparent !important; }

#payment .payment_methods > li:not(.woocommerce-notice) {
	background-color: rgba(123, 92, 255, .10) !important;
	border-radius: var(--radius-sm);
}

#payment .payment_methods > li:not(.woocommerce-notice):hover {
	background-color: rgba(123, 92, 255, .16) !important;
}

#payment .payment_methods > li .payment_box {
	background-color: rgba(123, 92, 255, .12) !important;
}

/* gallery zoom trigger — was an #eeeeee chip (audit caught this one) */
.woocommerce-product-gallery__trigger,
.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
	background-color: rgba(18, 15, 36, .88) !important;
	border: 1px solid var(--line) !important;
	color: var(--cyan) !important;
	border-radius: var(--pill) !important;
	backdrop-filter: var(--blur);
	-webkit-backdrop-filter: var(--blur);
}

.woocommerce-product-gallery__trigger:hover,
.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger:hover {
	background-color: var(--accent) !important;
	border-color: var(--accent) !important;
	color: #fff !important;
	box-shadow: var(--glow) !important;
}

/* added-to-cart + loading states were #eeeeee / #d5d5d5 */
.added_to_cart,
.site-header-cart .widget_shopping_cart a.button {
	background-color: var(--accent) !important;
	border-color: var(--accent) !important;
	color: #fff !important;
}

.button.loading,
.button.loading:hover {
	background-color: var(--accent) !important;
	border-color: var(--accent) !important;
	color: #fff !important;
}

.button.loading::after { color: #fff !important; }

/* mini cart panel was #f0f0f0 / #f5f5f5 */
.site-header-cart .widget_shopping_cart {
	background-color: rgba(18, 15, 36, .98) !important;
	color: var(--ink-dim) !important;
}

.site-header-cart .widget_shopping_cart .buttons,
.site-header-cart .widget_shopping_cart .product_list_widget,
.site-header .product_list_widget li {
	background-color: transparent !important;
	color: var(--ink-dim) !important;
}

/* prev/next product pagination — was a 500px white slab (audit caught this one) */
.storefront-product-pagination a,
.storefront-product-pagination a[rel="next"],
.storefront-product-pagination a[rel="prev"] {
	background-color: rgba(18, 15, 36, .95) !important;
	color: var(--ink-dim) !important;
	border: 1px solid var(--line) !important;
	box-shadow: 0 0 24px rgba(0, 0, 0, .55) !important;
	backdrop-filter: var(--blur);
	-webkit-backdrop-filter: var(--blur);
}

.storefront-product-pagination a[rel="next"] { border-radius: var(--radius) 0 0 var(--radius); }
.storefront-product-pagination a[rel="prev"] { border-radius: 0 var(--radius) var(--radius) 0; }

.storefront-product-pagination a:hover {
	color: var(--ink) !important;
	border-color: var(--accent) !important;
	box-shadow: var(--glow) !important;
}

.storefront-product-pagination__title { color: var(--cyan) !important; }

/* sticky add to cart was #ffffff */
.storefront-sticky-add-to-cart {
	background-color: rgba(18, 15, 36, .97) !important;
	color: var(--ink-dim) !important;
}

.storefront-sticky-add-to-cart a:not(.button) { color: var(--cyan) !important; }

/* =========================================================================
   18. WOOCOMMERCE CART / CHECKOUT BLOCKS (defensive)
   The Cart and Checkout pages on this server are block-based
   (.wp-block-woocommerce-cart / -checkout). Their React bundle lives under
   wp-includes/js/dist/vendor/, which this nginx host answers with 444, so the
   blocks currently never hydrate and render empty. These rules are cheap
   insurance so the block UI is dark the moment that is unblocked.
   ====================================================================== */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout,
.wc-block-cart,
.wc-block-checkout {
	color: var(--ink-dim) !important;
}

.wc-block-components-sidebar,
.wc-block-components-order-summary,
.wc-block-components-totals-wrapper,
.wc-block-components-order-summary-item,
.wc-block-cart-items,
.wc-block-cart-item__wrap,
.wc-block-components-panel,
.wc-block-components-radio-control,
.wc-block-checkout__payment-method,
.wc-block-components-address-form,
.wc-block-components-text-input,
.wc-block-components-select {
	background-color: transparent !important;
	color: var(--ink-dim) !important;
	border-color: var(--line-soft) !important;
}

.wc-block-components-sidebar-layout .wc-block-components-sidebar,
.wc-block-checkout__sidebar,
.wc-block-components-order-summary {
	background-color: var(--glass) !important;
	border: 1px solid var(--line) !important;
	border-radius: var(--radius) !important;
	padding: 1.2em !important;
}

.wc-block-components-title,
.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value,
.wc-block-cart-item__product .wc-block-components-product-name {
	color: var(--ink) !important;
}

.wc-block-components-totals-item__value,
.wc-block-components-product-price,
.wc-block-components-product-price__value {
	color: var(--cyan) !important;
}

.wc-block-cart-items__header,
.wc-block-cart-items th,
.wc-block-components-totals-footer-item {
	border-color: var(--line-soft) !important;
	color: var(--ink-mute) !important;
}

.wc-block-components-text-input input,
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-select select,
.wc-blocks-components-select__select,
.wc-block-components-textarea {
	background-color: var(--field) !important;
	color: var(--ink) !important;
	border: 1px solid var(--line) !important;
	border-radius: var(--radius-sm) !important;
}

.wc-block-components-text-input label,
.wc-block-components-select label,
.wc-block-components-checkbox__label {
	color: var(--ink-mute) !important;
}

.wc-block-components-button,
.wc-block-components-button:not(.is-link),
.wc-block-cart__submit-button {
	background-color: var(--accent) !important;
	border: 1px solid var(--accent) !important;
	color: #fff !important;
	border-radius: var(--pill) !important;
}

.wc-block-components-button:hover {
	background-color: var(--accent-2) !important;
	box-shadow: var(--glow) !important;
}

.wc-block-components-radio-control__option,
.wc-block-components-radio-control__option-checked {
	background-color: rgba(123, 92, 255, .10) !important;
	border: 1px solid var(--line-soft) !important;
	border-radius: var(--radius-sm) !important;
}

.wc-block-components-radio-control__option--checked,
.wc-block-components-radio-control__option.checked {
	background-color: rgba(123, 92, 255, .20) !important;
	border-color: var(--accent) !important;
}

.wc-block-components-notice-banner {
	background-color: var(--glass) !important;
	color: var(--ink-dim) !important;
	border-color: var(--line) !important;
}

.wc-block-components-notice-banner.is-success {
	background-color: var(--ok-bg) !important;
	border-color: var(--cyan) !important;
}

.wc-block-components-notice-banner.is-error {
	background-color: var(--err-bg) !important;
	border-color: var(--err) !important;
}

.wc-block-components-order-summary-item__description,
.wc-block-components-product-details { color: var(--ink-mute) !important; }

.wc-block-cart__empty-cart__title,
.wc-block-checkout__no-payment-methods-notice { color: var(--ink) !important; }

/* end of VOKIUM visual system */

/* =========================================================================
   Fleet standards links (2026-10-10): policy row inside the colophon.
   Rendered by inc/standards.php on storefront_footer (priority 15), i.e.
   above the brand line. Colours come from the .site-footer rules in
   section 11; only rhythm and type are set here.
   ====================================================================== */

.vk-footer-legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 22px;
	padding: 22px 0 16px;
	margin-bottom: 14px;
	border-bottom: 1px solid var(--line-soft);
}

.vk-footer-legal a {
	font-family: var(--font-head);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	text-decoration: none;
}

.vk-footer-legal a:hover,
.vk-footer-legal a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 767px) {
	.vk-footer-legal {
		gap: 6px 16px;
		padding: 18px 0 14px;
	}

	.vk-footer-legal a { font-size: 11px; letter-spacing: .1em; }
}

/* =========================================================================
   19. FRONT PAGE — content pass (2026-10-10)
   The front page template (front-page.php) gets its own grid: hero, the four
   disciplines, two product bands rendered through the Woo loop, the licence
   ladder, the process row, the FAQ and the closing call to action. Tokens and
   card styles are reused; nothing below overrides the shop loop.
   ====================================================================== */

body.vokium-front .site-content {
	padding-top: 0;
	padding-bottom: 0;
}

.vkf-eyebrow {
	font-family: var(--font-head);
	font-size: .72rem;
	font-weight: 500;
	letter-spacing: .42em;
	text-transform: uppercase;
	color: var(--cyan);
	margin: 0 0 1.05rem;
}

.vkf-section { padding: clamp(3.2rem, 6.8vw, 5.4rem) 0; }

.vkf-section + .vkf-section { border-top: 1px solid var(--line-soft); }

.vkf-head { margin-bottom: clamp(1.6rem, 3.4vw, 2.4rem); }

.vkf-head h2 {
	margin: 0 0 .7rem;
	font-size: clamp(1.65rem, 3.2vw, 2.35rem);
}

.vkf-head p {
	margin: 0;
	color: var(--ink-mute);
	max-width: 64ch;
}

.vkf-head .vkf-eyebrow { color: var(--cyan); margin-bottom: .9rem; }

/* --- hero ------------------------------------------------------------- */

.vkf-hero {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(540px, 74vh, 780px);
	background-color: #0B0917;
	background-image:
		linear-gradient(180deg, rgba(13, 11, 26, .10) 0%, rgba(13, 11, 26, .10) 62%, rgba(13, 11, 26, .92) 100%),
		linear-gradient(90deg, rgba(13, 11, 26, .97) 0%, rgba(13, 11, 26, .90) 30%, rgba(13, 11, 26, .55) 55%, rgba(13, 11, 26, .12) 76%, rgba(13, 11, 26, .35) 100%),
		url('assets/img/vkf-hero-characters.webp');
	background-size: cover;
	background-position: center right;
	background-repeat: no-repeat;
	border-bottom: 1px solid var(--line-soft);
}

.vkf-hero__inner {
	width: 100%;
	max-width: var(--wrap);
	margin: 0 auto;
	padding: clamp(4.2rem, 9vw, 6.4rem) 1.41575em clamp(3.4rem, 7vw, 4.8rem);
}

.vkf-hero__title {
	font-size: clamp(2.5rem, 6.2vw, 4.5rem);
	line-height: 1.05;
	letter-spacing: -.02em;
	color: var(--ink);
	margin: 0 0 1.35rem;
}

.vkf-hero__sub {
	max-width: 54ch;
	margin: 0 0 2.1rem;
	color: var(--ink-dim);
	font-size: clamp(1rem, 1.4vw, 1.12rem);
	line-height: 1.75;
}

.vkf-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .9rem;
	margin: 0 0 2.4rem;
}

.vkf-hero__actions .button { padding: 1em 2.2em; }

.vkf-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: .55rem .7rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.vkf-hero__meta li {
	font-family: var(--font-head);
	font-size: .74rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ink-dim);
	border: 1px solid var(--line-soft);
	border-radius: var(--pill);
	padding: .5em .95em;
	background: rgba(13, 11, 26, .55);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

/* --- category tiles --------------------------------------------------- */

.vkf-cats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.05rem;
}

.vkf-cat {
	position: relative;
	display: block;
	min-height: 320px;
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid var(--line);
	background: #0A0816;
	text-decoration: none;
	transition: border-color .28s ease, box-shadow .28s ease, transform .28s ease;
}

.vkf-cat img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .9;
	transition: transform .45s ease, opacity .3s ease;
}

.vkf-cat::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(13, 11, 26, .05) 0%, rgba(13, 11, 26, .22) 52%, rgba(13, 11, 26, .94) 100%);
}

.vkf-cat:hover,
.vkf-cat:focus-visible {
	border-color: var(--accent);
	box-shadow: var(--glow-soft);
	transform: translateY(-3px);
}

.vkf-cat:hover img { transform: scale(1.045); opacity: 1; }

.vkf-cat__body {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 2;
	padding: 1.45rem 1.6rem;
	display: grid;
	gap: .5rem;
}

.vkf-cat__top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .9rem;
}

.vkf-cat__name {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 1.45rem;
	color: var(--ink);
}

.vkf-cat__count {
	font-family: var(--font-head);
	font-size: .7rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--cyan);
	border: 1px solid rgba(63, 224, 208, .35);
	border-radius: var(--pill);
	padding: .45em .85em;
	white-space: nowrap;
}

.vkf-cat__blurb { color: var(--ink-dim); font-size: .94rem; }

.vkf-cat__cta {
	color: var(--accent-2);
	font-family: var(--font-head);
	font-size: .78rem;
	letter-spacing: .2em;
	text-transform: uppercase;
}

/* --- product bands ---------------------------------------------------- */

.vkf-products ul.products { margin: 0 0 1.4rem; }

.vkf-more { margin: 0; }

.vkf-more a {
	font-family: var(--font-head);
	font-size: .82rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--cyan) !important;
	text-decoration: none;
}

.vkf-more a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- licence band ------------------------------------------------------ */

.vkf-lic {
	display: grid;
	grid-template-columns: 1.04fr .96fr;
	gap: clamp(1.6rem, 4vw, 3.2rem);
	align-items: center;
	border: 1px solid var(--line-soft);
	border-radius: var(--radius-lg);
	padding: clamp(1.7rem, 4.2vw, 3.2rem);
	background:
		radial-gradient(520px 300px at 8% 0%, rgba(123, 92, 255, .16), transparent 70%),
		radial-gradient(420px 300px at 100% 100%, rgba(63, 224, 208, .08), transparent 70%),
		var(--bg-2);
}

.vkf-lic__copy h2 { margin: .2rem 0 1rem; }

.vkf-lic__copy > p { color: var(--ink-dim); }

.vkf-lic__actions { margin: 1.4rem 0 1.1rem; }

.vkf-lic__note { font-size: .9rem; color: var(--ink-mute); margin: 0; }

.vkf-lic__note a { color: var(--cyan) !important; }

.vkf-lic__ladder { display: grid; gap: .7rem; }

.vkf-lic-card {
	display: flex;
	gap: 1.1rem;
	align-items: baseline;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--glass);
	padding: 1rem 1.25rem;
}

.vkf-lic-card__tier {
	font-family: var(--font-head);
	font-size: .82rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--ink);
	min-width: 7.8em;
}

.vkf-lic-card p { margin: 0; font-size: .9rem; color: var(--ink-mute); }

.vkf-lic-card--hi {
	border-color: rgba(123, 92, 255, .55);
	background: rgba(123, 92, 255, .13);
	box-shadow: var(--glow-soft);
}

/* --- process row ------------------------------------------------------- */

.vkf-steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
}

.vkf-step {
	border: 1px solid var(--line-soft);
	border-radius: var(--radius);
	background: var(--glass);
	padding: 1.4rem 1.3rem 1.5rem;
}

.vkf-step__num {
	font-family: var(--font-head);
	font-size: .72rem;
	letter-spacing: .3em;
	color: var(--cyan);
}

.vkf-step h3 { margin: .65rem 0 .45rem; font-size: 1.05rem; }

.vkf-step p { margin: 0; font-size: .92rem; color: var(--ink-mute); }

.vkf-step a { color: var(--accent-2) !important; }

.vkf-step a:hover { color: var(--cyan) !important; }

/* --- FAQ --------------------------------------------------------------- */

.vkf-faq { max-width: 840px; }

.vkf-faq details { border-bottom: 1px solid var(--line-soft); }

.vkf-faq details:first-of-type { border-top: 1px solid var(--line-soft); }

.vkf-faq summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 1.15rem .15rem;
	cursor: pointer;
	font-family: var(--font-head);
	font-weight: 500;
	color: var(--ink) !important;
	list-style: none;
}

.vkf-faq summary::-webkit-details-marker { display: none; }

.vkf-faq summary::after {
	content: "+";
	font-family: var(--font-head);
	color: var(--cyan);
	font-size: 1.3rem;
	line-height: 1;
	transition: transform .2s ease;
}

.vkf-faq details[open] summary::after { transform: rotate(45deg); }

.vkf-faq p {
	margin: 0 0 1.2rem;
	padding: 0 .15rem;
	color: var(--ink-mute);
	max-width: 70ch;
}

/* --- closing CTA ------------------------------------------------------- */

.vkf-cta {
	text-align: center;
	border: 1px solid var(--line-soft);
	border-radius: var(--radius-lg);
	padding: clamp(2.6rem, 6.5vw, 4.6rem) clamp(1.2rem, 4vw, 3rem);
	background:
		radial-gradient(640px 320px at 50% 0%, rgba(123, 92, 255, .20), transparent 72%),
		radial-gradient(520px 260px at 50% 120%, rgba(63, 224, 208, .10), transparent 70%),
		var(--bg-2);
}

.vkf-cta h2 {
	font-size: clamp(1.7rem, 3.6vw, 2.6rem);
	margin: 0 0 .8rem;
}

.vkf-cta > p {
	color: var(--ink-dim);
	max-width: 56ch;
	margin: 0 auto 1.9rem;
}

.vkf-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .9rem;
	justify-content: center;
	margin-bottom: 1.6rem;
}

.vkf-cta__note { font-size: .9rem; color: var(--ink-mute); margin: 0; }

.vkf-cta__note a { color: var(--cyan) !important; }

/* =========================================================================
   20. FOOTER — content columns (2026-10-10)
   Brand block + Browse / Support / Company columns above the standards row
   (inc/footer-columns.php, storefront_footer priority 12). The legal strip
   below stays the fleet marker.
   ====================================================================== */

.vk-footer-grid {
	display: grid;
	grid-template-columns: 1.45fr 1fr 1fr 1fr;
	gap: 2.2rem 2rem;
	padding: 2.8rem 0 2rem;
	text-align: left;
}

.vk-footer-brand__mark {
	display: block;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 1.02rem;
	letter-spacing: .34em;
	text-transform: uppercase;
	color: var(--ink) !important;
	margin-bottom: .9rem;
}

.vk-footer-brand__blurb {
	margin: 0 0 .9rem;
	color: var(--ink-mute);
	font-size: .9rem;
	max-width: 36ch;
}

.vk-footer-brand__meta {
	margin: 0;
	color: var(--ink-faint);
	font-size: .82rem;
}

.vk-footer-col__head {
	margin: 0 0 .95rem;
	font-family: var(--font-head) !important;
	font-size: .7rem !important;
	font-weight: 500 !important;
	letter-spacing: .32em;
	text-transform: uppercase;
	color: var(--ink) !important;
}

.vk-footer-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .5rem;
}

.vk-footer-col li { margin: 0; }

.vk-footer-col a {
	color: var(--ink-dim) !important;
	text-decoration: none;
	font-size: .9rem;
}

.vk-footer-col a:hover,
.vk-footer-col a:focus-visible {
	color: var(--cyan) !important;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.vk-footer-col__mail { color: var(--cyan) !important; word-break: break-all; }

/* =========================================================================
   21. FRONT PAGE + FOOTER — responsive
   ====================================================================== */

@media (max-width: 1024px) {
	.vkf-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vkf-lic { grid-template-columns: 1fr; }
	.vk-footer-grid { grid-template-columns: 1fr 1fr; }
	.vk-footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
	.vkf-cats { grid-template-columns: 1fr; }
	.vkf-cat { min-height: 270px; }
	.vkf-steps { grid-template-columns: 1fr; }

	.vkf-hero {
		min-height: min(86vh, 640px);
		align-items: flex-end;
		background-image:
			linear-gradient(180deg, rgba(13, 11, 26, .38) 0%, rgba(13, 11, 26, .78) 58%, rgba(13, 11, 26, .97) 100%),
			url('assets/img/vkf-hero-characters.webp');
		background-position: center top;
	}

	.vkf-hero__inner { padding-top: 8.5rem; }

	.vkf-lic-card {
		flex-direction: column;
		gap: .35rem;
	}

	.vk-footer-grid { padding-top: 2.2rem; }
}

@media (max-width: 460px) {
	.vk-footer-grid {
		grid-template-columns: 1fr;
		gap: 1.7rem;
	}
}