/* Vault Direct theme — main stylesheet. Author: Ehtisham. Lean, no frameworks. */

/* Self-hosted General Sans (Fontshare, free weights 400/500). Inter (headings
   fallback / UI text) comes from Google Fonts via functions.php. */
@font-face{
	font-family:"General Sans";src:url("../fonts/GeneralSans-Regular.woff2") format("woff2");
	font-weight:400;font-style:normal;font-display:swap}
@font-face{
	font-family:"General Sans";src:url("../fonts/GeneralSans-Medium.woff2") format("woff2");
	font-weight:500;font-style:normal;font-display:swap}

:root{
	/* ---- PubQ-inspired design tokens ---- */
	--bg:#F3F2F1; --surface:#FFFFFF; --surface-alt:#FAFAF9; --footer:#E6E6E6;
	--text:#2B2D2D; --text-strong:#1A1A1A; --muted:#666666; --muted-2:#8C8C8C;
	--accent:#7660FF; --accent-2:#6366F1; --accent-tint:#ECEDFD; --accent-hover:#6450E0;
	--orange:#FF6B35; --success:#1F7A3A; --danger:#A03333; --chip:#F4F4F5;
	--border:1px solid rgba(0,0,0,.06); --border-color:rgba(0,0,0,.06); --border-color-2:rgba(0,0,0,.12);
	--r-xl:24px; --r-lg:16px; --r-md:12px; --r-sm:8px; --r-xs:6px; --r-pill:999px;
	--shadow-card:0 1px 2px rgba(0,0,0,.04),0 6px 18px rgba(0,0,0,.06);
	--font:"General Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
	--font-ui:"Inter",system-ui,sans-serif;
	--section-y:64px; --container:1200px; --gutter:24px;

	/* ---- legacy --vv-* aliases: keeps every existing selector on-token
	   without touching each one individually. Anything the brief calls out
	   specifically (gradients, exact radii, font-weights) is still fixed
	   explicitly further down. ---- */
	--vv-ink:var(--text); --vv-ink-2:var(--text); --vv-muted:var(--muted);
	--vv-border:var(--border-color); --vv-border-2:var(--border-color-2);
	--vv-surface:var(--surface); --vv-bg:var(--bg); --vv-bg-2:var(--chip);
	--vv-radius:var(--r-md); --vv-radius-sm:var(--r-sm);
	--vv-r:var(--r-md); --vv-r-sm:var(--r-sm); --vv-r-lg:var(--r-xl); --vv-r-pill:var(--r-pill);
	--vv-shadow:var(--shadow-card); --vv-shadow-lg:var(--shadow-card);
	--vv-sh-sm:var(--shadow-card); --vv-sh:var(--shadow-card); --vv-sh-md:var(--shadow-card); --vv-sh-lg:var(--shadow-card);
	--vv-purple-900:var(--text-strong); --vv-purple-700:var(--accent-hover); --vv-purple-600:var(--accent); --vv-purple-50:var(--accent-tint);
	--vv-green-500:var(--success); --vv-green-600:var(--success); --vv-green-300:var(--success); --vv-green-50:#EAF5EE;
	--vv-danger:var(--danger); --vv-danger-50:#FDECEC; --vv-amber:var(--orange); --vv-amber-50:#FFF3EC;
	--vv-ring:0 0 0 3px var(--accent-tint);
	--vv-grad-purple:var(--accent); --vv-grad-purple-hover:var(--accent-hover); --vv-sh-purple:var(--shadow-card);
	--vv-grad-green:var(--text); --vv-grad-green-hover:var(--text-strong); --vv-sh-green:none;
	--vv-container:var(--container);
	--vv-font:var(--font);
}
@media (max-width:767px){ :root{ --section-y:40px; --gutter:16px; } }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* Sticky footer: the page column always fills the viewport, so a short page
   never leaves dead space under the footer. */
body{margin:0;font-family:var(--vv-font);color:var(--vv-ink);background:var(--vv-bg);line-height:1.6;-webkit-font-smoothing:antialiased;
	min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
body.admin-bar{min-height:calc(100vh - 32px);min-height:calc(100dvh - 32px)}
@media(max-width:782px){body.admin-bar{min-height:calc(100vh - 46px);min-height:calc(100dvh - 46px)}}
img{max-width:100%;height:auto}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-weight:500;line-height:1.1;letter-spacing:-.02em;margin:0 0 .5em;color:var(--text-strong)}
h1{font-size:48px}
h2{font-size:38px}
h3{font-size:24px}
p{color:var(--text);line-height:1.45}
@media(max-width:640px){h1{font-size:36px}h2{font-size:28px}}

.vvault-container{max-width:var(--vv-container);margin:0 auto;padding:0 clamp(16px,4vw,32px)}
.vvault-skip{position:absolute;left:-9999px}
.vvault-skip:focus{left:16px;top:16px;z-index:100;background:#fff;padding:10px 16px;border-radius:8px;box-shadow:var(--vv-shadow)}

/* ---------- Buttons ---------- */
.vvault-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
	font-weight:500;font-size:15px;line-height:1;height:48px;padding:0 22px;border-radius:var(--r-sm);
	border:1.5px solid transparent;cursor:pointer;transition:background .2s ease,border-color .2s,color .2s;text-decoration:none}
.vvault-btn:hover{text-decoration:none}
.vvault-btn--primary{background:var(--text);color:#fff;box-shadow:none}
.vvault-btn--primary:hover{background:var(--text-strong);color:#fff}
.vvault-btn--secondary{background:var(--surface);color:var(--text);border-color:var(--border-color);box-shadow:none}
.vvault-btn--secondary:hover{background:var(--chip);color:var(--text)}
.vvault-btn--accent{background:var(--accent);color:#fff;box-shadow:none}
.vvault-btn--accent:hover{background:var(--accent-hover);color:#fff}
.vvault-btn--ghost{background:transparent;color:var(--text);border-color:var(--border-color)}
.vvault-btn--ghost:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- Header ---------- */
.vvault-header{position:sticky;top:0;z-index:50;background:var(--surface);border-bottom:var(--border);transition:box-shadow .2s ease,border-color .2s ease}
.vvault-header__inner{display:flex;align-items:center;gap:24px;min-height:72px}
@media(max-width:600px){.vvault-header__inner{min-height:64px}}
.vvault-header__brand{flex:0 0 auto}
.vvault-header__nav{flex:1 1 auto}
.vvault-header__actions{flex:0 0 auto;display:flex;align-items:center;gap:12px;margin-left:auto}
.vvault-wordmark{font-weight:500;font-size:1.35rem;letter-spacing:.01em;text-decoration:none;display:inline-flex;gap:.35em}
.vvault-wordmark:hover{text-decoration:none}
.vvault-wordmark__vip{color:var(--accent)}
.vvault-wordmark__vault{color:var(--text-strong)}
.vvault-menu{list-style:none;display:flex;justify-content:center;gap:6px;margin:0;padding:0}
.vvault-menu a{display:inline-block;padding:10px 18px;border-radius:8px;color:var(--text);font-weight:500;font-size:16px;letter-spacing:0;white-space:nowrap}
/* Menu is kept short (5 top-level items) on purpose — plenty of room even on
   tighter desktop widths, so links don't need to shrink before the hamburger
   breakpoint takes over. */
.vvault-menu a:hover{background:var(--chip);color:var(--accent);text-decoration:none}
.vvault-menu li{position:relative}
.vvault-menu .sub-menu{position:absolute;left:0;top:100%;min-width:260px;list-style:none;margin:0;padding:8px;
	background:var(--surface);border:var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-card);
	opacity:0;visibility:hidden;transform:translateY(-4px);z-index:60;
	transition:opacity .14s ease,transform .14s ease,visibility .14s}
.vvault-menu li:hover>.sub-menu,.vvault-menu li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.vvault-menu .sub-menu a{display:block;padding:11px 14px;font-size:1rem;font-weight:500}
.vvault-menu .menu-item-has-children>a::after{content:"";display:inline-block;margin-left:.42em;
	border:4px solid transparent;border-top-color:currentColor;transform:translateY(2px)}

/* Pinned (scrolled) header: same size/shape as the normal header — just picks
   up a shadow so it reads as "stuck", no shrinking pill effect (JS toggles
   .is-pinned on .vvault-header — see main.js). Only applies when the header is
   visible (not the transparent-over-hero variant, which stays display:none). */
.vvault-header.is-pinned{box-shadow:var(--shadow-card)}
.vvault-cart{position:relative;display:inline-flex;align-items:center;color:var(--text);padding:8px;border-radius:8px}
.vvault-cart:hover{background:var(--chip);color:var(--accent)}
.vvault-cart__count{position:absolute;top:0;right:0;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--accent);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1}
.vvault-cart__count.is-empty{display:none}

/* ---------- Footer ---------- */
.vvault-footer{margin:40px 8px 8px;flex:0 0 auto;background:var(--footer);border-radius:var(--r-xl)}
.vvault-footer__inner{display:flex;align-items:center;justify-content:space-between;gap:16px 28px;padding:40px 32px;flex-wrap:wrap}
.vvault-footer__mark{font-weight:500;color:var(--text);letter-spacing:0}
.vvault-footer__copy{color:var(--muted-2);font-size:14px}

/* ---------- Main / content ---------- */
.vvault-main{min-height:0;flex:1 0 auto}
.vvault-content{padding-top:40px}
.vvault-article__title{font-size:clamp(1.75rem,3vw,2.5rem)}

/* ---------- Landing (hero with background image + overlay) ---------- */
:root{
	/* Swap this URL to use a custom photo later (drop the file in assets/img/). */
	--vv-landing-image:none;
}
.vvault-landing{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;
	padding:40px 20px;overflow:hidden;isolation:isolate}
/* Layer 1 — the background image */
.vvault-landing__bg{position:absolute;inset:0;z-index:-2;
	background-image:var(--vv-landing-image);background-size:cover;background-position:center;background-repeat:no-repeat}
/* Layer 2 — readability + mood overlay on top of the image */
.vvault-landing__overlay{position:absolute;inset:0;z-index:-1;
	background:
		radial-gradient(ellipse 90% 70% at 50% 42%,rgba(11,6,22,0) 0%,rgba(11,6,22,.35) 70%,rgba(11,6,22,.7) 100%),
		linear-gradient(180deg,rgba(26,5,51,.55) 0%,rgba(11,6,22,.35) 45%,rgba(11,6,22,.72) 100%)}
.vvault-landing__card{position:relative;max-width:480px;width:100%;text-align:center;
	background:rgba(255,255,255,.98);border:1px solid rgba(255,255,255,.6);border-radius:22px;
	box-shadow:0 30px 80px rgba(0,0,0,.45),0 2px 8px rgba(0,0,0,.2);
	padding:clamp(32px,5vw,56px);backdrop-filter:blur(2px)}
.vvault-landing__brand{margin-bottom:24px}
.vvault-landing__brand .vvault-wordmark{font-size:1.9rem}
.vvault-landing__eyebrow{text-transform:uppercase;letter-spacing:.22em;font-size:.72rem;font-weight:700;color:var(--vv-purple-600);margin:0 0 12px}
.vvault-landing__title{font-size:clamp(1.9rem,4vw,2.5rem);margin:0 0 14px;letter-spacing:-.02em;color:var(--vv-ink)}
.vvault-landing__lead{color:var(--vv-muted);font-size:1.05rem;line-height:1.6;margin:0 0 28px}
.vvault-landing__actions{margin-bottom:20px}
.vvault-landing__actions .vvault-btn{width:100%;padding:1.05em 1.5em;font-size:1.05rem;box-shadow:0 8px 24px rgba(16,185,129,.35)}
.vvault-landing__note{color:var(--vv-muted);font-size:.85rem;margin:0}

/* Wide split login card (welcome | form) */
.vvault-landing__card--split{max-width:1060px;width:100%;padding:0;overflow:hidden;text-align:left;
	display:grid;grid-template-columns:1.1fr 1fr}
.vvault-landing__card--split .vvault-landing__intro{padding:clamp(32px,4vw,52px);
	background:linear-gradient(160deg,#2B0A4E 0%,#3B0764 55%,#1A0533 100%);color:#fff;display:flex;flex-direction:column;justify-content:center}
.vvault-landing__card--split .vvault-landing__brand{margin-bottom:22px}
.vvault-landing__card--split .vvault-landing__brand .vvault-wordmark__vip{color:#fff}
.vvault-landing__card--split .vvault-landing__brand .vvault-wordmark__vault{color:var(--vv-green-300)}
.vvault-landing__card--split .vvault-landing__eyebrow{color:var(--vv-green-300);margin-bottom:14px}
.vvault-landing__card--split .vvault-landing__title{color:#fff;font-size:clamp(1.5rem,2.4vw,2rem);margin-bottom:16px;white-space:nowrap}
.vvault-landing__card--split .vvault-landing__lead{color:rgba(255,255,255,.78);font-size:1rem;margin-bottom:22px}
.vvault-landing__card--split .vvault-landing__note{color:rgba(255,255,255,.55);font-size:.85rem;margin:0;text-align:left}
.vvault-landing__formcol{padding:clamp(32px,4vw,52px);display:flex;flex-direction:column;justify-content:center;background:#fff}
.vvault-landing__formtitle{font-size:1.3rem;font-weight:700;color:var(--vv-ink);margin:0 0 22px}

/* Inline login form on the landing card */
.vvault-landing__card--login{max-width:440px;text-align:left}
.vvault-landing__card--login .vvault-landing__brand,.vvault-landing__card--login .vvault-landing__eyebrow,.vvault-landing__card--login .vvault-landing__title,.vvault-landing__card--login .vvault-landing__lead{text-align:center}
.vvault-landing__card--login .vvault-landing__title{margin-bottom:8px}
.vvault-landing__card--login .vvault-landing__lead{margin-bottom:24px;font-size:.98rem}
.vvault-login-form form.login p{margin:0 0 16px}
.vvault-login-form label{display:block;font-size:.85rem;font-weight:600;color:var(--vv-ink-2,#3F3F46);margin:0 0 7px}
.vvault-login-form input.input,.vvault-login-form input[type=text],.vvault-login-form input[type=password]{
	width:100%;background:#fff;border:1.5px solid var(--vv-border,#E7E5E4);border-radius:10px;padding:12px 14px;
	font-family:var(--vv-font);font-size:.98rem;color:var(--vv-ink);transition:border-color .15s,box-shadow .15s;min-height:48px}
.vvault-login-form input.input:focus,.vvault-login-form input[type=text]:focus,.vvault-login-form input[type=password]:focus{
	outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint)}
.vvault-login-form .login-remember{display:flex;align-items:center;margin-bottom:20px !important}
.vvault-login-form .login-remember label{display:flex;align-items:center;gap:8px;font-weight:500;color:var(--vv-muted);margin:0;cursor:pointer}
.vvault-login-form .login-remember input{width:18px;height:18px;accent-color:var(--vv-purple-600);margin:0}
.vvault-login-form .login-submit{margin:0 !important}
.vvault-login-form input[type=submit],.vvault-login-form .button-primary{
	width:100%;background:var(--vv-grad-green);color:#fff;border:0;border-radius:10px;padding:14px 20px;
	font-family:var(--vv-font);font-size:1.02rem;font-weight:600;cursor:pointer;min-height:52px;
	box-shadow:0 8px 24px rgba(16,185,129,.32);transition:background .2s,transform .12s}
.vvault-login-form input[type=submit]:hover,.vvault-login-form .button-primary:hover{background:var(--vv-grad-green-hover);transform:translateY(-1px)}
.vvault-login-error{background:#FEF2F2;border:1px solid #FECACA;color:#991B1B;border-radius:10px;padding:12px 14px;font-size:.9rem;margin:0 0 18px;text-align:center}
.vvault-landing__links{text-align:center;margin:16px 0 4px}
.vvault-landing__links a{font-size:.88rem;color:var(--vv-purple-600);font-weight:500;text-decoration:none}
.vvault-landing__links a:hover{text-decoration:underline}
.vvault-landing__card--login .vvault-landing__note{text-align:center;margin-top:12px}
@media(max-width:760px){
	.vvault-landing__card--split{grid-template-columns:1fr;max-width:460px}
	.vvault-landing__card--split .vvault-landing__title{white-space:normal}
	.vvault-landing__card--split .vvault-landing__intro{text-align:center;padding:32px 28px 26px}
	.vvault-landing__card--split .vvault-landing__note{text-align:center}
	.vvault-landing__formcol{padding:28px}
}


/* Transparent, glassy header only over the hero */
body.vvault-has-hero .vvault-header{display:none}
body.vvault-has-hero .vvault-header .vvault-wordmark__vip{color:#fff}
body.vvault-has-hero .vvault-header .vvault-wordmark__vault{color:var(--vv-green-300)}
body.vvault-has-hero .vvault-header .vvault-btn--ghost{color:#fff;border-color:rgba(255,255,255,.5)}
body.vvault-has-hero .vvault-header .vvault-btn--ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
body.vvault-has-hero .vvault-footer{background:transparent;border-top-color:rgba(255,255,255,.12)}
body.vvault-has-hero .vvault-footer__mark{color:#fff}
body.vvault-has-hero .vvault-footer__copy{color:rgba(255,255,255,.55)}
body.vvault-has-hero{background:#0B0616}

/* ---------- Status (404 / errors) ---------- */
.vvault-status{min-height:60vh;display:flex;align-items:center;justify-content:center;padding:48px 20px;text-align:center}
.vvault-status__card{max-width:480px}
.vvault-status__code{font-size:4rem;font-weight:700;margin:0;background:linear-gradient(135deg,var(--vv-purple-600),var(--vv-green-500));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.vvault-status__lead{color:var(--vv-muted);margin:0 0 24px}

/* ---------- WooCommerce theming ---------- */
.woocommerce-page .vvault-content,.woocommerce .vvault-content{padding-top:32px}
.woocommerce ul.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:24px;margin:0!important;padding:0;list-style:none}
.woocommerce ul.products li.product{margin:0!important;width:auto!important;float:none!important;background:var(--vv-surface);border:1px solid var(--vv-border);border-radius:var(--vv-radius);padding:16px;text-align:left;transition:box-shadow .2s,transform .12s;display:flex;flex-direction:column}
.woocommerce ul.products li.product:hover{box-shadow:var(--vv-shadow);transform:translateY(-2px)}
.woocommerce ul.products li.product img{border-radius:var(--vv-radius-sm);margin-bottom:12px}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:1rem;font-weight:600;padding:0;margin:0 0 6px}
.woocommerce ul.products li.product .price{color:var(--vv-ink);font-weight:700;margin-bottom:12px}
.woocommerce ul.products li.product .price del{color:var(--vv-muted);font-weight:400}
.woocommerce ul.products li.product .price ins{color:var(--vv-green-500);text-decoration:none}
.woocommerce ul.products li.product .button,
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #respond input#submit{
	background:var(--vv-grad-green);color:#fff;border-radius:var(--vv-radius-sm);font-weight:600;padding:.7em 1.2em;border:0;margin-top:auto;transition:background .2s}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce ul.products li.product .button:hover,.woocommerce #respond input#submit:hover{background:var(--vv-grad-green-hover)}
.woocommerce .button.alt,.woocommerce button.button.alt,.woocommerce #place_order{background:var(--vv-grad-green)}
.woocommerce .button.alt:hover,.woocommerce #place_order:hover{background:var(--vv-grad-green-hover)}
.woocommerce div.product .product_title{font-size:clamp(1.5rem,3vw,2rem)}
.woocommerce div.product p.price,.woocommerce div.product span.price{color:var(--vv-purple-700);font-size:1.6rem;font-weight:700}
.woocommerce span.onsale{background:var(--vv-purple-600);border-radius:999px}
.woocommerce .woocommerce-message,.woocommerce .woocommerce-info{border-top-color:var(--vv-green-500)}
.woocommerce .woocommerce-error{border-top-color:var(--danger)}
.woocommerce-message::before,.woocommerce-info::before{color:var(--vv-green-500)}
.woocommerce nav.woocommerce-pagination ul li a,.woocommerce nav.woocommerce-pagination ul li span.current{border-radius:8px}
.woocommerce nav.woocommerce-pagination ul li span.current{background:var(--vv-grad-purple);color:#fff;border-color:var(--vv-purple-600)}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce .select2-container .select2-selection{border:1px solid var(--vv-border);border-radius:var(--vv-radius-sm);padding:.7em .9em}
.woocommerce form .form-row input.input-text:focus,.woocommerce form .form-row textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint)}
.woocommerce table.shop_table{border-radius:var(--vv-radius);overflow:hidden}
.woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none;padding:0;margin:0}
.woocommerce-account .woocommerce-MyAccount-navigation li{border-radius:8px;margin-bottom:4px}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active{background:var(--text)}
.woocommerce-account .woocommerce-MyAccount-navigation li a{display:block;padding:10px 14px;color:var(--vv-ink);font-weight:500}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{color:var(--vv-purple-700)}

/* Sticky add-to-cart on mobile single product */
@media(max-width:600px){
	.single-product .vvault-content div.product form.cart{position:sticky;bottom:0;background:#fff;padding:12px;margin:0 -16px -16px;border-top:1px solid var(--vv-border);z-index:10}
}

/* Focus visibility for accessibility */
a:focus-visible,button:focus-visible,input:focus-visible,.vvault-btn:focus-visible{outline:2px solid var(--vv-purple-600);outline-offset:2px}

/* Skeleton loader utility */
.vvault-skeleton{background:linear-gradient(90deg,#eee 25%,#f5f5f5 37%,#eee 63%);background-size:400% 100%;animation:vv-shimmer 1.4s ease infinite;border-radius:8px}
@keyframes vv-shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* WooCommerce content wrapper (replaces the default sidebar layout) */
.vvault-woo{padding-top:32px;padding-bottom:16px}
.woocommerce-products-header,.woocommerce .vvault-woo>h1,.woocommerce-page .vvault-woo>h1{margin-bottom:20px}
.woocommerce-products-header__title,.woocommerce-products-header{margin:0 0 20px}
.woocommerce .woocommerce-result-count{color:var(--vv-muted);font-size:.9rem}
.woocommerce .woocommerce-ordering{margin-bottom:16px}
/* Single product two-column with breathing room */
.single-product .vvault-woo div.product{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start}
.single-product .vvault-woo div.product .woocommerce-product-gallery{margin:0}
.single-product .vvault-woo div.product .summary{margin:0}
.single-product .vvault-woo div.product .woocommerce-tabs{grid-column:1 / -1}
.single-product .vvault-woo div.product .related.products{grid-column:1 / -1}
@media(max-width:781px){.single-product .vvault-woo div.product{grid-template-columns:1fr;gap:24px}}
/* Cart + checkout spacing */
.woocommerce-cart .vvault-woo,.woocommerce-checkout .vvault-woo{padding-top:24px}
.woocommerce .cart-collaterals,.woocommerce-checkout #order_review{border:1px solid var(--vv-border);border-radius:var(--vv-radius);padding:20px;background:var(--vv-surface)}

/* ---------- Logo (context-aware: colour on light, dark-optimised on dark) ---------- */
/* Brand logo. The markup keeps the site name in a screen-reader span, so the
   image is a background and the text stays available to assistive tech. */
/* Horizontal lockup: mascot on the left, wordmark on the right. */
.vvault-logo{display:block;width:236px;height:72px;text-decoration:none;
	background:url("../img/logo-mark.png") left center/contain no-repeat}
.vvault-logo .screen-reader-text,.vvault-footer__logo .screen-reader-text{
	position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.vvault-header__brand{display:flex;align-items:center}
.vvault-header .vvault-logo{width:268px;height:80px}
@media(max-width:600px){.vvault-header .vvault-logo{width:184px;height:56px}}
/* Footer keeps its text mark */

/* Lost-password success message on the landing */
.vvault-login-success{background:#ECFDF5;border:1px solid #A7F3D0;color:#065F46;border-radius:10px;padding:14px 16px;font-size:.92rem;line-height:1.5;margin:0 0 18px}

/* ---------- Content pages (About, Contact, policies) ---------- */
.vvault-content .vvault-article{max-width:840px}
/* The storefront home page carries product grids, so it uses the full container
   rather than the reading width the policy pages want. */
.home .vvault-content .vvault-article,
.page-template-default.home .vvault-article{max-width:none}
.vvault-article__body .vvault-lead,.vvault-lead{font-size:1.15rem;line-height:1.7;color:var(--vv-ink-2,#3F3F46);margin:0 0 26px}
.vvault-article__body h2{font-size:1.4rem;font-weight:700;letter-spacing:-.01em;margin:34px 0 12px;color:var(--vv-ink)}
.vvault-article__body p{line-height:1.75;color:var(--vv-ink-2,#3F3F46);margin:0 0 16px}
.vvault-article__body ul,.vvault-article__body ol{padding-left:22px;margin:0 0 18px}
.vvault-article__body li{line-height:1.7;color:var(--vv-ink-2,#3F3F46);margin:7px 0}
.vvault-article__body a{color:var(--accent)}
.vvault-article__body a:hover{color:var(--accent-hover)}
.vvault-page-figure{margin:0 0 28px;border-radius:var(--r-xl);overflow:hidden;border:var(--border)}
.vvault-page-figure img{width:100%;height:auto;display:block;max-height:360px;object-fit:cover}
.vvault-article__body .vvault-btn{margin-top:8px}
/* Footer links */
.vvault-footer__links{display:flex;flex-wrap:wrap;gap:6px 20px;justify-content:center;flex:1}
.vvault-footer__links a{color:var(--muted);font-size:15px;font-weight:500;text-decoration:none}
.vvault-footer__links a:hover{color:var(--text)}
.vvault-footer__logo{display:block;width:236px;height:72px;text-decoration:none;flex:0 0 auto;
	background:url("../img/logo-mark.png") left center/contain no-repeat}

/* Mobile footer: clean centered stack — logo, links, copyright. */
@media(max-width:640px){
	.vvault-footer{margin:24px 8px 8px}
	.vvault-footer__inner{flex-direction:column;align-items:center;text-align:center;gap:18px;padding:28px 24px}
	.vvault-footer__logo{background-position:center;margin:0 auto}
	.vvault-footer__links{flex:0 0 auto;width:100%;gap:12px 18px;justify-content:center}
	.vvault-footer__links a{font-size:.92rem}
	.vvault-footer__copy{width:100%}
}

/* Product-style figure on content pages: show the whole image, centered */
.vvault-page-figure--product{max-width:560px;margin:0 auto 28px;background:var(--vv-bg-2,#F4F4F5)}
.vvault-page-figure--product img{max-height:none;object-fit:contain}

/* Button links inside content keep white text (not the purple link colour).
   Ghost/secondary buttons are excluded — they sit on a light background and
   would otherwise render white-on-white (e.g. "View my orders" on the
   order-received page, which is a shortcode page inside .vvault-article__body). */
.vvault-article__body a.vvault-btn:not(.vvault-btn--ghost):not(.wc-backward),
.vvault-article__body a.button:not(.wc-backward):not(.vvault-ghost):not(.added_to_cart),
.vvault-article__body a.vvault-btn--primary{color:#fff !important}
.vvault-article__body a.vvault-btn:not(.vvault-btn--ghost):not(.wc-backward):hover,
.vvault-article__body a.button:not(.wc-backward):not(.vvault-ghost):not(.added_to_cart):hover{color:#fff !important}

/* ---- Mobile / tablet navigation (hamburger) ------------------------------ */
.vvault-navtoggle{display:none;align-items:center;justify-content:center;width:42px;height:42px;padding:0;
	border:0;background:none;color:var(--vv-ink);border-radius:8px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.vvault-navtoggle:hover{background:var(--chip);color:var(--accent)}
.vvault-navtoggle__bars{position:relative;display:block;width:22px;height:16px}
.vvault-navtoggle__bars span{position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:currentColor;
	transition:transform .22s ease,opacity .16s ease}
.vvault-navtoggle__bars span:nth-child(1){top:0}
.vvault-navtoggle__bars span:nth-child(2){top:7px}
.vvault-navtoggle__bars span:nth-child(3){top:14px}
.vvault-navtoggle[aria-expanded="true"] .vvault-navtoggle__bars span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.vvault-navtoggle[aria-expanded="true"] .vvault-navtoggle__bars span:nth-child(2){opacity:0}
.vvault-navtoggle[aria-expanded="true"] .vvault-navtoggle__bars span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:820px){
	.vvault-navtoggle{display:inline-flex}
	.vvault-header__inner{gap:10px}
	.vvault-header__nav{position:absolute;left:0;right:0;top:100%;display:none;background:#fff;
		border-bottom:1px solid var(--vv-border);box-shadow:0 14px 30px rgba(0,0,0,.10);padding:6px 0 10px}
	.vvault-header__nav.is-open{display:block}
	.vvault-menu{flex-direction:column;justify-content:flex-start;gap:0;padding:0 16px}
	.vvault-menu li + li{border-top:1px solid var(--vv-border)}
	.vvault-menu a{display:block;padding:14px 10px;border-radius:8px;font-size:1.05rem}
	.vvault-menu .sub-menu{position:static;opacity:1;visibility:visible;transform:none;
		background:none;border:0;box-shadow:none;list-style:none;margin:0;padding:0 0 0 14px}
	.vvault-menu .sub-menu a{padding:12px 10px;font-size:1rem}
}

/* ---------- Home hero (public storefront) ---------- */
.vd-hero{background:var(--vv-grad-purple);color:#fff;border-radius:var(--vv-radius);
	padding:clamp(28px,5vw,64px) clamp(20px,4vw,56px);margin:0 0 36px;position:relative;overflow:hidden}
.vd-hero__eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
	color:var(--vv-green-300);margin:0 0 14px}
.vvault-article__body .vd-hero h1,.vd-hero h1{font-size:clamp(2rem,5vw,3.2rem);line-height:1.05;
	font-weight:700;letter-spacing:-.02em;margin:0 0 16px;color:#fff}
.vvault-article__body .vd-hero p,.vd-hero p{font-size:clamp(1rem,1.6vw,1.2rem);line-height:1.6;
	color:rgba(255,255,255,.88);margin:0 0 26px;max-width:46ch}
.vd-hero__actions{display:flex;flex-wrap:wrap;gap:12px}
.vvault-article__body .vd-hero a.vvault-btn{margin-top:0;color:#fff}
.vd-hero .vvault-btn--ghost{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5);color:#fff}
.vd-hero .vvault-btn--ghost:hover{background:rgba(255,255,255,.2);border-color:#fff;color:#fff}
/* Hero with product art: the safes are a transparent PNG pinned to the right,
   layered over the gradient, so the headline always sits on clean colour and
   the type stays real text (never baked into the image). Under 900px the art
   drops to a faint watermark so the copy keeps full width. */
.vd-hero--art{padding-right:clamp(20px,4vw,56px)}
.vd-hero--art::after{content:"";position:absolute;right:0;bottom:0;top:12%;width:52%;
	background:url("../img/hero-art.png") right bottom/contain no-repeat;pointer-events:none}
.vd-hero--art .vd-hero__inner{position:relative;z-index:1;max-width:52%}
@media(max-width:900px){
	.vd-hero--art::after{top:auto;height:62%;width:100%;opacity:.18}
	.vd-hero--art .vd-hero__inner{max-width:none}
}

/* Section headings on the home page get a little more air than article H2s. */
.vvault-article__body .vd-section{margin-top:48px}

/* Closing CTA on the home page: a centred h2.vd-section + the paragraph right
   after it (the page content itself isn't wrapped in a div we can edit), styled
   together as one rounded accent-tint card by matching their backgrounds,
   padding and radii so the seam between the two elements disappears. */
.vvault-article__body h2.vd-section{
	background:var(--accent-tint);text-align:center;margin:var(--section-y) auto 0;max-width:720px;
	padding:40px 40px 14px;border-radius:var(--r-xl) var(--r-xl) 0 0;color:var(--text-strong)}
.vvault-article__body h2.vd-section + p{
	background:var(--accent-tint);text-align:center;margin:0 auto var(--section-y);max-width:720px;
	padding:0 40px 40px;border-radius:0 0 var(--r-xl) var(--r-xl);color:var(--muted);line-height:1.6}
.vvault-article__body h2.vd-section + p a{color:var(--accent);font-weight:500}

/* ---------- Home: image + text split sections ---------- */
.vd-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;
	align-items:center;margin:var(--section-y) 0;background:var(--surface);border-radius:var(--r-xl);padding:24px}
.vd-split__media{margin:0;border-radius:var(--r-xl);overflow:hidden;border:var(--border);
	background:var(--chip);aspect-ratio:4/3}
.vd-split__media img{width:100%;height:100%;object-fit:cover;display:block}
.vvault-article__body .vd-split__body h2{margin-top:0}
.vvault-article__body .vd-split__body p{color:var(--muted)}
.vd-split--reverse .vd-split__media{order:2}
/* Alternate section backgrounds so consecutive cards read as distinct blocks. */
.vd-split:nth-of-type(even){background:var(--bg)}
@media(max-width:820px){
	.vd-split{grid-template-columns:1fr;gap:24px;margin:36px 0;padding:20px}
	.vd-split--reverse .vd-split__media{order:0}
}

/* ---------- Home hero banner + category banners ---------- */
.vd-hero-banner{margin:0 0 24px;border-radius:var(--r-xl);overflow:hidden;border:var(--border);background:var(--text-strong)}
.vd-hero-banner img{display:block;width:100%;height:auto}
.vd-hero-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:20px 32px;flex-wrap:wrap;margin:0 0 44px}
.vd-hero-intro__text{flex:1 1 420px;min-width:0}
.vvault-article__body .vd-hero-intro h1{font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.15;letter-spacing:-.02em;margin:0 0 10px;color:var(--vv-ink)}
.vvault-article__body .vd-hero-intro p{margin:0;color:var(--vv-ink-2);font-size:1.02rem;line-height:1.6;max-width:62ch}
.vd-hero-intro__actions{display:flex;gap:12px;flex-wrap:wrap;flex:0 0 auto}
.vvault-article__body .vd-hero-intro__actions a.vvault-btn{margin-top:0}
@media(max-width:640px){.vd-hero-intro{margin-bottom:32px}}

.vd-cat-banner{margin:0 0 28px;border-radius:var(--vv-radius);overflow:hidden;border:1px solid var(--vv-border)}
.vd-cat-banner img{display:block;width:100%;height:auto}

/* ---------- Home section headers with a link on the right ---------- */
.vd-sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;margin:52px 0 0}
.vvault-article__body .vd-sec-head h2{margin:0}
/* Outline rather than filled: a solid purple button here would compete with the
   Select options buttons sitting a few pixels below it. */
.vvault-article__body a.vd-seclink{display:inline-flex;align-items:center;gap:.4em;
	padding:.5em 1em;border:1.5px solid var(--vv-border-2,#D6D3D1);border-radius:var(--vv-radius-sm);
	color:var(--vv-purple-700);font-weight:600;font-size:.92rem;text-decoration:none;white-space:nowrap;
	transition:border-color .15s,background .15s,color .15s}
.vvault-article__body a.vd-seclink:hover{border-color:var(--accent);background:var(--chip);color:var(--accent)}
@media(max-width:520px){.vd-sec-head{gap:8px}.vvault-article__body a.vd-seclink{font-size:.86rem;padding:.45em .8em}}

/* Category banners embedded on the home page. */
.vd-home-banner{display:block;margin:18px 0 22px;border-radius:var(--vv-radius);overflow:hidden;
	border:1px solid var(--vv-border);line-height:0;transition:transform .18s ease,box-shadow .2s ease}
.vd-home-banner:hover{transform:translateY(-2px);box-shadow:var(--vv-shadow)}
.vd-home-banner img{width:100%;height:auto;display:block}

/* ---------- Home: category tiles + USP strip (storefront-only components) ---------- */
.vd-cats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:18px 0 8px}
@media(max-width:900px){.vd-cats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.vd-cats{grid-template-columns:1fr}}
.vd-cat{display:flex;flex-direction:column;border:1px solid var(--vv-border);border-radius:var(--vv-radius);
	overflow:hidden;background:var(--vv-surface);text-decoration:none;
	transition:transform .16s ease,box-shadow .2s ease,border-color .2s ease}
.vd-cat:hover{transform:translateY(-2px);box-shadow:var(--vv-shadow);border-color:var(--vv-purple-600);text-decoration:none}
.vd-cat__media{aspect-ratio:5/2;background:var(--vv-purple-900);line-height:0}
.vd-cat__media img{width:100%;height:100%;object-fit:cover;display:block}
.vd-cat__body{padding:16px 18px 20px}
.vd-cat__t{display:block;margin:0 0 6px;font-size:1.05rem;font-weight:700;line-height:1.3;color:var(--vv-ink)}
.vd-cat__d{display:block;margin:0;font-size:.92rem;line-height:1.6;color:var(--vv-muted)}

.vd-usps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:26px 0 6px;padding:0;list-style:none}
@media(max-width:820px){.vd-usps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:460px){.vd-usps{grid-template-columns:1fr}}
.vvault-article__body .vd-usps li,.vd-usps li{margin:0;display:block;border:1px solid var(--vv-border);
	border-radius:var(--vv-radius-sm);padding:14px 16px;background:var(--vv-surface)}
.vd-usps strong{display:block;font-size:.95rem;color:var(--vv-ink);margin-bottom:3px}
.vd-usps span{display:block;color:var(--vv-muted);font-size:.86rem;line-height:1.5}

/* Definition-style rows used by the ratings + buying guides. */
.vd-deflist{display:grid;gap:14px;margin:18px 0 22px;padding:0;list-style:none}
.vvault-article__body .vd-deflist li,.vd-deflist li{margin:0;border:1px solid var(--vv-border);
	border-left:3px solid var(--vv-purple-600);border-radius:var(--vv-radius-sm);padding:14px 18px;background:var(--vv-surface)}
.vd-deflist strong{display:block;color:var(--vv-ink);margin-bottom:4px}