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

:root{
	--vv-purple-900:#3B0764; --vv-purple-700:#5B21B6; --vv-purple-600:#7C3AED;
	/* One purple gradient for every purple button/pill on the site — same ramp
	   as the My Account welcome banner. */
	--vv-grad-purple:linear-gradient(120deg,var(--vv-purple-900),var(--vv-purple-600));
	--vv-grad-purple-hover:linear-gradient(120deg,#2A0448,var(--vv-purple-700));
	--vv-sh-purple:0 4px 14px rgba(124,58,237,.28);
	/* Same treatment for the green primary buttons. */
	--vv-grad-green:linear-gradient(120deg,#065F46,var(--vv-green-500));
	--vv-grad-green-hover:linear-gradient(120deg,#064E3B,#059669);
	--vv-sh-green:0 4px 14px rgba(16,185,129,.3);
	--vv-green-500:#10B981;  --vv-green-300:#6EE7B7;
	--vv-ink:#18181B; --vv-muted:#6B7280; --vv-border:#E7E5E4;
	--vv-surface:#FFFFFF; --vv-bg:#FAFAF9;
	--vv-radius:12px; --vv-radius-sm:8px;
	--vv-shadow:0 1px 2px rgba(24,24,27,.06),0 8px 24px rgba(24,24,27,.06);
	--vv-shadow-lg:0 10px 40px rgba(59,7,100,.14);
	--vv-container:1200px;
	--vv-font:'Aldrich','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

*,*::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(--vv-purple-600);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{line-height:1.2;letter-spacing:-.01em;margin:0 0 .5em}

.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:600;font-size:1rem;line-height:1;padding:.85em 1.5em;border-radius:var(--vv-radius-sm);
	border:1.5px solid transparent;cursor:pointer;transition:transform .12s ease,box-shadow .2s ease,background .2s ease,border-color .2s;text-decoration:none}
.vvault-btn:hover{text-decoration:none;transform:translateY(-1px)}
.vvault-btn:active{transform:translateY(0)}
.vvault-btn--primary{background:var(--vv-grad-green);color:#fff;box-shadow:var(--vv-sh-green)}
.vvault-btn--primary:hover{background:var(--vv-grad-green-hover);color:#fff}
.vvault-btn--secondary{background:var(--vv-grad-purple);color:#fff;box-shadow:var(--vv-sh-purple)}
.vvault-btn--secondary:hover{background:var(--vv-grad-purple-hover);color:#fff}
.vvault-btn--ghost{background:transparent;color:var(--vv-purple-700);border-color:var(--vv-border)}
.vvault-btn--ghost:hover{border-color:var(--vv-purple-600);color:var(--vv-purple-700)}

/* ---------- Header ---------- */
.vvault-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--vv-border)}
.vvault-header__inner{display:flex;align-items:center;gap:24px;min-height:96px}
@media(max-width:600px){.vvault-header__inner{min-height:78px}}
.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:700;font-size:1.35rem;letter-spacing:.04em;text-decoration:none;display:inline-flex;gap:.35em}
.vvault-wordmark:hover{text-decoration:none}
.vvault-wordmark__vip{color:var(--vv-purple-700)}
.vvault-wordmark__vault{color:var(--vv-green-500)}
.vvault-menu{list-style:none;display:flex;justify-content:center;gap:6px;margin:0;padding:0}
.vvault-menu a{display:inline-block;padding:8px 16px;border-radius:8px;color:var(--vv-ink);font-weight:700;letter-spacing:.01em;white-space:nowrap}
/* Eight items plus a logo get tight between the hamburger breakpoint and a full
   desktop, so the links close up rather than wrapping mid-word. */
@media(max-width:1180px){.vvault-menu a{padding:8px 9px;font-size:.94rem}}
.vvault-menu a:hover{background:rgba(124,58,237,.07);color:var(--vv-purple-700);text-decoration:none}
.vvault-menu li{position:relative}
.vvault-menu .sub-menu{position:absolute;left:0;top:100%;min-width:236px;list-style:none;margin:0;padding:8px;
	background:#fff;border:1px solid var(--vv-border);border-radius:var(--vv-radius);box-shadow:var(--vv-shadow);
	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:9px 12px;font-size:.95rem;font-weight:600}
.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)}
.vvault-cart{position:relative;display:inline-flex;align-items:center;color:var(--vv-ink);padding:8px;border-radius:8px}
.vvault-cart:hover{background:rgba(124,58,237,.07);color:var(--vv-purple-700)}
.vvault-cart__count{position:absolute;top:0;right:0;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--vv-green-500);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{border-top:1px solid var(--vv-border);margin-top:64px;background:#fff;flex:0 0 auto}
.vvault-footer__inner{display:flex;align-items:center;justify-content:space-between;gap:16px 28px;padding-top:24px;padding-bottom:24px;flex-wrap:wrap}
.vvault-footer__mark{font-weight:700;color:var(--vv-purple-700);letter-spacing:.03em}
.vvault-footer__copy{color:var(--vv-muted);font-size:.9rem}

/* ---------- 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(--vv-purple-600);box-shadow:0 0 0 3px rgba(124,58,237,.16)}
.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:#dc2626}
.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(--vv-purple-600);box-shadow:0 0 0 3px rgba(124,58,237,.15)}
.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:rgba(124,58,237,.08)}
.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(--vv-purple-600)}
.vvault-article__body a:hover{color:var(--vv-purple-700)}
.vvault-page-figure{margin:0 0 28px;border-radius:18px;overflow:hidden;border:1px solid var(--vv-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(--vv-muted);font-size:.88rem;font-weight:500;text-decoration:none}
.vvault-footer__links a:hover{color:var(--vv-purple-700)}
.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-top:40px}
	.vvault-footer__inner{flex-direction:column;align-items:center;text-align:center;gap:18px;padding-top:28px;padding-bottom:28px}
	.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:rgba(124,58,237,.07);color:var(--vv-purple-700)}
.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:1rem}
	.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:.95rem}
}

/* ---------- 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}

/* ---------- Home: image + text split sections ---------- */
.vd-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,3.5vw,48px);
	align-items:center;margin:52px 0}
.vd-split__media{margin:0;border-radius:var(--vv-radius);overflow:hidden;border:1px solid var(--vv-border);
	background:var(--vv-bg-2);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}
.vd-split--reverse .vd-split__media{order:2}
@media(max-width:820px){
	.vd-split{grid-template-columns:1fr;gap:20px;margin:36px 0}
	.vd-split--reverse .vd-split__media{order:0}
}

/* ---------- Home hero banner + category banners ---------- */
.vd-hero-banner{margin:0 0 24px;border-radius:var(--vv-radius);overflow:hidden;border:1px solid var(--vv-border);background:var(--vv-purple-900)}
.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(--vv-purple-600);background:rgba(124,58,237,.06);color:var(--vv-purple-700)}
@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}