/* =====================================================================
   VIP Vault — WooCommerce design system. Author: Ehtisham.
   Extends the theme tokens (main.css) across the entire store.
   Loaded only on WooCommerce pages.
   ===================================================================== */

:root{
	/* Mirrors main.css's token set + --vv-* aliases (woocommerce.css loads after
	   main.css, so its own :root would otherwise win and reintroduce the old
	   purple/green palette for every Woo page). */
	--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;

	--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-600:var(--success); --vv-green-500:var(--success); --vv-green-300:var(--success); --vv-green-50:#EAF5EE;
	--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-danger:var(--danger); --vv-danger-50:#FDECEC; --vv-amber:var(--orange); --vv-amber-50:#FFF3EC;
	--vv-r:var(--r-md); --vv-r-sm:var(--r-sm); --vv-r-lg:var(--r-lg); --vv-r-pill:var(--r-pill);
	--vv-sh-sm:var(--shadow-card); --vv-sh:var(--shadow-card);
	--vv-sh-md:var(--shadow-card); --vv-sh-lg:var(--shadow-card);
	--vv-ring:0 0 0 3px var(--accent-tint);
	--vv-grad-purple:var(--accent); --vv-grad-purple-hover:var(--accent-hover); --vv-sh-purple:none;
	--vv-grad-green:var(--text); --vv-grad-green-hover:var(--text-strong);
	--vv-font:var(--font);
}

/* ---------------- Global layout ---------------- */
.woocommerce .vvault-woo,.woocommerce-page .vvault-woo{padding-top:clamp(20px,3vw,36px);padding-bottom:56px}
.woocommerce .clear{clear:both}
.woocommerce a{color:var(--vv-purple-600);transition:color .15s}
.woocommerce a:hover{color:var(--vv-purple-700)}
.woocommerce img{border-radius:var(--vv-r-sm)}
.woocommerce *{box-sizing:border-box}

/* Kill legacy Woo skin spacing that fights the theme */
.woocommerce .col2-set,.woocommerce-page .col2-set{width:100%}
/* Woo core clearfixes these containers with ::before/::after {display:table}.
   Wherever we lay one out with CSS grid OR flex those pseudo-elements become
   real items — they eat the first cell and push every child one place along
   (broke the order-received summary, the billing/shipping address columns, and
   the address-card title row, where the phantom item made space-between shove
   the heading to the right). The address-title selector must match core's own
   `.woocommerce-account .addresses .title::before` at (0,3,0) or it loses. */
.woocommerce .col2-set::before,.woocommerce .col2-set::after,
.woocommerce-page .col2-set::before,.woocommerce-page .col2-set::after,
.woocommerce .woocommerce-columns::before,.woocommerce .woocommerce-columns::after,
.woocommerce .u-columns::before,.woocommerce .u-columns::after,
.woocommerce-account .addresses .title::before,.woocommerce-account .addresses .title::after,
.woocommerce ul.order_details::before,.woocommerce ul.order_details::after{content:none;display:none}
.woocommerce .woocommerce-message,.woocommerce .woocommerce-info,.woocommerce .woocommerce-error{margin-bottom:24px}

/* ---------------- Page header / hero ---------------- */
.vvault-page-head{margin:0 0 28px}
.vvault-page-head__title,.woocommerce-products-header__title{font-size:clamp(1.9rem,3.4vw,2.6rem);font-weight:700;letter-spacing:-.02em;margin:0 0 6px;color:var(--vv-ink)}
.vvault-page-head__sub{color:var(--vv-muted);font-size:1rem;margin:0}
.woocommerce-products-header{margin-bottom:8px}

/* ---------------- Breadcrumbs ---------------- */
.woocommerce .woocommerce-breadcrumb,.vvault-breadcrumb{font-size:.85rem;color:var(--vv-muted);margin:0 0 18px;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.woocommerce .woocommerce-breadcrumb a{color:var(--vv-muted);font-weight:500}
.woocommerce .woocommerce-breadcrumb a:hover{color:var(--vv-purple-600)}
.woocommerce .woocommerce-breadcrumb{}
.woocommerce .woocommerce-breadcrumb .breadcrumb-sep,.woocommerce .woocommerce-breadcrumb>*+*::before{}

/* ---------------- Shop toolbar (count + sorting) ---------------- */
.vvault-shop-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
	padding:14px 0 18px;margin-bottom:24px;border-bottom:1px solid var(--vv-border)}
.woocommerce .woocommerce-result-count{color:var(--vv-muted);font-size:.9rem;margin:0;float:none}
.woocommerce .woocommerce-ordering{margin:0;float:none}
.woocommerce .woocommerce-ordering select,.vvault-select{
	appearance:none;-webkit-appearance:none;background:var(--vv-surface) url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20width%3D'12'%20height%3D'8'%20viewBox%3D'0%200%2012%208'%3E%3Cpath%20fill%3D'%236B7280'%20d%3D'M1%201l5%205%205-5'%20stroke%3D'%236B7280'%20stroke-width%3D'1.5'%20fill%3D'none'/%3E%3C/svg%3E") no-repeat right 14px center;
	border:1px solid var(--vv-border-2);border-radius:var(--vv-r-sm);padding:10px 40px 10px 14px;font-size:.9rem;font-weight:500;color:var(--vv-ink);cursor:pointer;transition:border-color .15s,box-shadow .15s}
.woocommerce .woocommerce-ordering select:hover{border-color:var(--vv-purple-600)}
.woocommerce .woocommerce-ordering select:focus{outline:none;border-color:var(--vv-purple-600);box-shadow:var(--vv-ring)}

/* ---------------- Product grid + cards ---------------- */
.woocommerce ul.products::before,.woocommerce ul.products::after,
.woocommerce-page ul.products::before,.woocommerce-page ul.products::after{content:none !important;display:none !important}
/* Four across on desktop — auto-fill kept adding a fifth column on wide screens
   and made the cards look thin. Steps down to three, then two, then one. */
.woocommerce ul.products,.woocommerce-page ul.products{display:grid !important;
	grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,26px);margin:0 !important;padding:0;list-style:none}
@media(max-width:1080px){
	.woocommerce ul.products,.woocommerce-page ul.products{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:820px){
	.woocommerce ul.products,.woocommerce-page ul.products{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.woocommerce ul.products li.product,.woocommerce-page ul.products li.product{
	position:relative;margin:0 !important;width:auto !important;float:none !important;padding:0;
	background:var(--vv-surface);border:1px solid var(--vv-border);border-radius:var(--vv-r-lg);
	display:flex;flex-direction:column;overflow:hidden;transition:transform .18s ease,box-shadow .2s ease,border-color .2s}
.woocommerce ul.products li.product:hover{transform:translateY(-4px);box-shadow:var(--vv-sh-md);border-color:var(--vv-border-2)}
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link{display:flex;flex-direction:column;flex:1;text-decoration:none;color:inherit}
/* Product shots are wider than they are tall, so cover was slicing the legs off
   the shorts. Contain plus a little breathing room shows the whole garment. */
.woocommerce ul.products li.product .vvault-card__media{position:relative;overflow:hidden;background:var(--vv-surface);aspect-ratio:1/1;padding:14px}
.woocommerce ul.products li.product .vvault-card__media img,.woocommerce ul.products li.product a img{
	margin:0 !important;border-radius:0;width:100%;height:100%;object-fit:contain;transition:transform .5s ease;display:block}
.woocommerce ul.products li.product:hover .vvault-card__media img{transform:scale(1.06)}
.woocommerce ul.products li.product .vvault-card__body{padding:16px 16px 18px;display:flex;flex-direction:column;flex:1;gap:4px}
.woocommerce ul.products li.product .vvault-card__cat{font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--vv-purple-600);margin:0 0 2px}
.woocommerce ul.products li.product .woocommerce-loop-product__title{padding:0 !important;margin:0 0 6px;font-size:16px;font-weight:500;line-height:1.35;color:var(--vv-ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.woocommerce ul.products li.product .price{margin:0 0 14px;color:var(--vv-ink);font-weight:500;font-size:16px;font-family:var(--font-ui);display:flex;align-items:baseline;gap:8px}
.woocommerce ul.products li.product .price del{color:var(--muted-2);font-weight:400;font-size:.9rem;opacity:1;text-decoration:line-through}
.woocommerce ul.products li.product .price ins{color:var(--vv-ink);text-decoration:none;font-weight:500}
.woocommerce ul.products li.product .price .from{color:var(--vv-muted);font-weight:500;font-size:.8rem}
.woocommerce ul.products li.product .vvault-card__foot{margin-top:auto;padding:0 16px 16px}
/* Add to cart / select options button inside card — accent (used sparingly for
   the key per-product CTA), full width, 44px tall. */
.woocommerce ul.products li.product .button,.woocommerce ul.products li.product .added_to_cart{
	display:block;width:100%;text-align:center;margin:0 !important;min-height:44px;
	background:var(--accent);color:#fff;box-shadow:none}
.woocommerce ul.products li.product .button:hover{background:var(--accent-hover);color:#fff}

/* Badges */
.woocommerce span.onsale,.woocommerce ul.products li.product .onsale{
	position:absolute;top:12px;left:12px;right:auto;bottom:auto;width:auto;max-width:max-content;min-height:0;min-width:0;height:auto;line-height:1;margin:0;padding:6px 10px;
	display:inline-block;background:var(--orange);color:#fff;font-size:12px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;border-radius:var(--r-xs);box-shadow:none;z-index:2}
.vvault-badge-stock{position:absolute;top:12px;right:12px;padding:5px 10px;border-radius:var(--r-xs);font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;z-index:2}
.vvault-badge-stock--out{background:var(--vv-ink);color:#fff}
.vvault-badge-stock--low{background:var(--vv-amber-50);color:var(--vv-amber)}
.woocommerce ul.products li.product.outofstock .vvault-card__media img{opacity:.55;filter:grayscale(.2)}

/* Star ratings */
.woocommerce .star-rating{font-size:.9em;color:var(--vv-amber);margin:2px 0 8px}
.woocommerce .star-rating::before{color:var(--vv-border-2)}
.woocommerce ul.products li.product .star-rating{margin:0 0 8px}

/* Image fallback */
.vvault-card__media--empty{display:flex;align-items:center;justify-content:center;color:var(--vv-border-2)}
.vvault-card__media--empty svg{width:44px;height:44px}

/* ---------------- Buttons (global Woo) ---------------- */
/* Default Woo button = primary (dark). Specific contexts (card add-to-cart,
   place order) override to accent / explicit dark further down. */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #respond input#submit,
.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt,
.woocommerce .button,.woocommerce-page .button{
	display:inline-flex;align-items:center;justify-content:center;gap:.5em;
	font-family:var(--font);font-size:15px;font-weight:500;line-height:1.2;text-decoration:none;
	padding:0 22px;border-radius:var(--r-sm);border:1.5px solid transparent;cursor:pointer;
	background:var(--text);color:#fff;transition:background .2s ease,border-color .2s;
	box-shadow:none;text-shadow:none;letter-spacing:0;min-height:44px}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover,.woocommerce .button:hover{
	background:var(--text-strong);color:#fff;box-shadow:none}
.woocommerce a.button:active,.woocommerce button.button:active,.woocommerce .button:active{transform:none}
/* Accent — "select options" on a variable product, view-cart, and any other
   secondary interactive CTA. Used sparingly, flat, no glow. */
.woocommerce a.button.wc-forward:not(.checkout-button):not(.wc-block-cart__submit-button),
.woocommerce .button.wp-element-button.product_type_variable,
.woocommerce ul.products li.product .button.product_type_variable,
.woocommerce ul.products li.product .add_to_cart_button.product_type_variable{background:var(--accent);box-shadow:none}
.woocommerce a.button.wc-forward:not(.checkout-button):not(.wc-block-cart__submit-button):hover,
.woocommerce .button.wp-element-button.product_type_variable:hover,
.woocommerce ul.products li.product .button.product_type_variable:hover,
.woocommerce ul.products li.product .add_to_cart_button.product_type_variable:hover{background:var(--accent-hover);box-shadow:none}
/* Ghost / secondary buttons */
.woocommerce a.button.wc-backward,.woocommerce .button.vvault-ghost,.woocommerce-cart .wc-proceed-to-checkout a.button:not(.checkout-button){
	background:var(--surface);color:var(--text);border-color:var(--border-color-2);box-shadow:none}
.woocommerce a.button.wc-backward:hover,.woocommerce .button.vvault-ghost:hover{
	background:var(--chip);color:var(--text);border-color:var(--border-color-2)}
.woocommerce .button:disabled,.woocommerce .button.disabled,.woocommerce button:disabled{opacity:.5;cursor:not-allowed;transform:none !important;box-shadow:none}
.woocommerce .button.loading{opacity:.7;pointer-events:none}
.woocommerce .added_to_cart{background:transparent !important;color:var(--text) !important;box-shadow:none !important;border:1.5px solid var(--border-color-2) !important;margin-top:8px !important}

/* ---------------- Forms (all inputs) ---------------- */
.woocommerce form .form-row,.woocommerce-page form .form-row{padding:0;margin:0 0 18px}
.woocommerce form .form-row label,.woocommerce-page form .form-row label,
.woocommerce .woocommerce-form-row label,.woocommerce-checkout label{display:block;font-size:.85rem;font-weight:600;color:var(--vv-ink-2);margin:0 0 7px}
.woocommerce .required{color:var(--vv-danger);border:0}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,
.woocommerce input[type=text],.woocommerce input[type=email],.woocommerce input[type=password],
.woocommerce input[type=tel],.woocommerce input[type=number],.woocommerce input[type=search],
.woocommerce textarea,.woocommerce-page input.input-text,.select2-container .select2-selection--single,
.woocommerce .select2-container .select2-selection--single{
	width:100%;background:var(--vv-surface);border:1.5px solid var(--vv-border-2);border-radius:10px;
	padding:12px 14px;font-family:var(--vv-font);font-size:.95rem;color:var(--vv-ink);line-height:1.4;
	transition:border-color .15s,box-shadow .15s;min-height:44px}
.woocommerce textarea{min-height:110px;resize:vertical}
.woocommerce form .form-row input.input-text:hover,.woocommerce input:hover:not([type=checkbox]):not([type=radio]),.woocommerce textarea:hover{border-color:var(--accent)}
.woocommerce form .form-row input.input-text:focus,.woocommerce input:focus:not([type=checkbox]):not([type=radio]),.woocommerce textarea:focus,
.woocommerce .select2-container--focus .select2-selection--single{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint)}
.woocommerce form .form-row.woocommerce-invalid input.input-text,.woocommerce form .form-row.woocommerce-invalid .select2-selection{border-color:var(--vv-danger)}
.woocommerce form .form-row.woocommerce-invalid input.input-text:focus{box-shadow:0 0 0 3px rgba(220,38,38,.15)}
.woocommerce form .form-row.woocommerce-validated input.input-text{border-color:var(--vv-green-500)}
.woocommerce ::placeholder{color:#A1A1AA}
/* Native select */
.woocommerce select,.woocommerce-page select{
	width:100%;appearance:none;-webkit-appearance:none;background:var(--vv-surface) url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20width%3D'12'%20height%3D'8'%20viewBox%3D'0%200%2012%208'%3E%3Cpath%20d%3D'M1%201l5%205%205-5'%20stroke%3D'%236B7280'%20stroke-width%3D'1.5'%20fill%3D'none'/%3E%3C/svg%3E") no-repeat right 14px center;
	border:1.5px solid var(--vv-border-2);border-radius:10px;padding:12px 40px 12px 14px;font-size:.95rem;color:var(--vv-ink);min-height:44px;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.woocommerce select:hover{border-color:var(--accent)}
.woocommerce select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint)}
/* Select2 (country/state) */
.woocommerce .select2-container .select2-selection--single{display:flex;align-items:center;height:46px !important}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered{line-height:normal;padding:0;color:var(--vv-ink)}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow{height:44px;right:10px}
.select2-dropdown{border-color:var(--vv-border-2);border-radius:var(--vv-r-sm);box-shadow:var(--vv-sh-md);overflow:hidden}
.select2-container--default .select2-results__option--highlighted[aria-selected]{background:var(--vv-purple-600)}
/* Checkboxes + radios */
.woocommerce input[type=checkbox],.woocommerce input[type=radio]{width:19px;height:19px;accent-color:var(--vv-purple-600);margin-right:8px;vertical-align:middle;cursor:pointer}
.woocommerce .woocommerce-form__label-for-checkbox{display:flex;align-items:flex-start;gap:4px;font-weight:500;color:var(--vv-ink-2);cursor:pointer}
.woocommerce-form-login__rememberme,.woocommerce-form-register__rememberme{margin:8px 0 16px !important}

/* ---------------- Quantity stepper ---------------- */
.woocommerce .quantity,.woocommerce-page .quantity{display:inline-flex;align-items:stretch;border:1.5px solid var(--vv-border-2);border-radius:var(--vv-r-sm);overflow:hidden;background:var(--vv-surface);height:46px}
.woocommerce .quantity .qty{width:56px;border:0 !important;text-align:center;font-weight:600;min-height:auto !important;padding:0 !important;box-shadow:none !important;-moz-appearance:textfield}
.woocommerce .quantity .qty::-webkit-outer-spin-button,.woocommerce .quantity .qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.woocommerce .quantity .qty:focus{box-shadow:none !important;border:0 !important}
.vvault-qty-btn{width:40px;border:0;background:var(--vv-bg-2);color:var(--vv-ink);font-size:1.2rem;font-weight:400;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s;line-height:1;user-select:none}
.vvault-qty-btn:hover{background:var(--chip);color:var(--accent)}

/* ---------------- Single product ---------------- */
.single-product .vvault-woo div.product{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,48px);align-items:start}
.single-product .vvault-woo div.product{position:relative}
.single-product .vvault-woo div.product>span.onsale{position:absolute !important;top:14px;left:14px;right:auto !important;bottom:auto !important;margin:0 !important;z-index:3}
.single-product .vvault-woo div.product .woocommerce-product-gallery{margin-top:0 !important}
.single-product .vvault-woo div.product .woocommerce-product-gallery{margin:0 !important;padding:0 !important;position:relative;align-self:start;width:100% !important;max-width:none !important;float:none !important}
.single-product .vvault-woo div.product>span.onsale{margin-top:0}
.single-product .vvault-woo div.product .woocommerce-product-gallery__wrapper,
.single-product .vvault-woo div.product .woocommerce-product-gallery__image,
.single-product .vvault-woo div.product .flex-viewport,
.single-product .vvault-woo div.product .woocommerce-product-gallery ul.slides,
.single-product .vvault-woo div.product .woocommerce-product-gallery ul.slides li{margin-top:0 !important;padding-top:0 !important}
.single-product .vvault-woo div.product .woocommerce-product-gallery__wrapper,
.single-product .vvault-woo div.product .woocommerce-product-gallery__image,
.single-product .vvault-woo div.product .woocommerce-product-gallery .wp-post-image,
.single-product .vvault-woo div.product .woocommerce-product-gallery__wrapper img{width:100% !important;height:auto !important;max-width:100% !important;display:block}
.single-product .vvault-woo div.product .woocommerce-product-gallery__wrapper{border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--vv-border);background:var(--vv-bg-2)}
.single-product .vvault-woo div.product .woocommerce-product-gallery img{border-radius:0}
.single-product .woocommerce-product-gallery__trigger{top:14px;right:14px;background:var(--vv-surface);border-radius:50%;box-shadow:var(--vv-sh);width:42px;height:42px;display:flex;align-items:center;justify-content:center}
.single-product .flex-control-thumbs{display:flex;gap:10px;margin:14px 0 0;padding:0;flex-wrap:wrap}
.single-product .flex-control-thumbs li{width:72px;margin:0;list-style:none}
.single-product .flex-control-thumbs img{border:2px solid var(--vv-border);border-radius:var(--vv-r-sm);opacity:.7;transition:opacity .15s,border-color .15s;cursor:pointer}
.single-product .flex-control-thumbs img.flex-active,.single-product .flex-control-thumbs img:hover{opacity:1;border-color:var(--accent)}
.single-product div.product .summary,
.single-product .vvault-woo div.product .summary,
.single-product .vvault-woo div.product .entry-summary{margin:0;width:100% !important;max-width:none !important;float:none !important}
.single-product div.product .product_title{font-size:clamp(2.1rem,3.6vw,2.5rem);font-weight:500;letter-spacing:-.02em;line-height:1.1;margin:0 0 12px;color:var(--text-strong)}
.single-product div.product .vvault-prod-cat{font-size:.72rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--vv-purple-600);margin:0 0 8px}
.single-product div.product .woocommerce-product-rating{margin:0 0 16px;display:flex;align-items:center;gap:10px}
.single-product div.product .woocommerce-product-rating .woocommerce-review-link{color:var(--vv-muted);font-size:.85rem}
.single-product div.product p.price,.single-product div.product span.price{font-family:var(--font-ui);font-size:1.6rem;font-weight:500;color:var(--text-strong);margin:0 0 20px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;letter-spacing:-.01em}
.single-product div.product p.price del,.single-product div.product span.price del{font-size:1.15rem;font-weight:400;color:var(--muted-2);text-decoration:line-through}
.single-product div.product p.price ins{text-decoration:none;color:var(--text-strong)}
.single-product div.product .woocommerce-product-details__short-description{color:var(--muted);font-size:.98rem;line-height:1.7;margin:0 0 24px;padding:0 0 24px;border-bottom:1px solid var(--vv-border)}
.single-product div.product .woocommerce-product-details__short-description ul{padding-left:20px}
.single-product div.product .woocommerce-product-details__short-description li{margin:4px 0}
/* Premium add-to-cart component */
.single-product div.product form.cart{margin:0 0 24px;padding:22px;background:var(--vv-bg);border:1px solid var(--vv-border);border-radius:var(--vv-r-lg)}
.single-product div.product form.cart .variations{margin:0 0 16px}
.single-product div.product form.cart .single_variation_wrap{margin:0}
.single-product div.product form.cart .woocommerce-variation.single_variation:empty{display:none !important;margin:0}
.single-product div.product form.cart .woocommerce-variation-add-to-cart{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:0}
.single-product div.product form.cart.variations_form>.quantity,
.single-product div.product form.cart:not(.variations_form){display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.single-product div.product form.cart .quantity{height:52px}
.single-product div.product form.cart .vvault-qty-btn{width:46px}
.single-product div.product form.cart .single_add_to_cart_button{flex:1;min-width:180px;min-height:52px;font-size:1rem;padding:.9em 1.6em}
.single-product div.product .product_meta{font-size:.85rem;color:var(--vv-muted);margin:0;display:flex;flex-direction:column;gap:6px}
.single-product div.product .product_meta>span{display:flex;gap:8px;flex-wrap:wrap}
.single-product div.product .product_meta .sku-wrapper,.single-product div.product .product_meta .posted_in,.single-product div.product .product_meta .tagged_as{color:var(--vv-muted)}
.single-product div.product .product_meta a{color:var(--vv-purple-600)}
/* Trust row */
.vvault-trust{display:flex;flex-wrap:nowrap;justify-content:space-between;gap:14px;margin:20px 0 0;padding:18px 0 0;border-top:1px solid var(--vv-border)}
@media(max-width:600px){.vvault-trust{flex-wrap:wrap;justify-content:flex-start;gap:12px 20px}.vvault-trust__item{font-size:.8rem}}
.vvault-trust__item{display:flex;align-items:center;gap:7px;font-size:.72rem;color:var(--vv-ink-2);font-weight:500;white-space:nowrap}
.vvault-trust__item svg{width:17px;height:17px;color:var(--vv-green-600);flex:none}

/* Variations */
.single-product .variations{width:100%;margin:0 0 16px;border:0}
.single-product .variations tr{display:flex;flex-direction:column;margin-bottom:14px}
.single-product .variations th.label{text-align:left;padding:0 0 7px;font-size:.85rem;font-weight:600;color:var(--vv-ink-2);width:auto;vertical-align:middle}
.single-product .variations td.value{padding:0}
.single-product .variations select{width:100%;max-width:none}
/* A single-attribute product does not need a Clear link, and WooCommerce leaves
   it in the flow (often blank) which reads as an empty gap under the select. */
.single-product .reset_variations{display:none !important}
.single-product .reset_variations:hover{color:var(--vv-danger)}
/* Woo hides the Clear link with visibility:hidden, which still reserves a whole
   line + its margin under the select. Take it out of the flow instead. */
.single-product .reset_variations[style*="hidden"]{display:none}
.single-product .woocommerce-variation-price .price{font-size:1.5rem !important;margin:0 0 14px !important}
.single-product .woocommerce-variation-availability .stock{margin:0 0 12px}
/* After a flavour is picked Woo injects description/price/availability divs.
   When every variation shares one price all three come back empty, so the
   block was only contributing margin — collapse it unless it has content. */
.single-product .woocommerce-variation.single_variation{margin:0}
.single-product .woocommerce-variation.single_variation:has(.price,.stock,p){margin:0 0 14px}
.single-product .woocommerce-variation-description:empty,
.single-product .woocommerce-variation-price:empty,
.single-product .woocommerce-variation-availability:empty{display:none}
.single-product .variations tr:last-child{margin-bottom:0}

/* Stock labels */
.woocommerce div.product .stock,.woocommerce .stock{font-size:.85rem;font-weight:600}
.woocommerce .stock.in-stock,.woocommerce .stock.available-on-backorder{color:var(--success)}
.woocommerce .stock.out-of-stock{color:var(--danger);display:inline-block;background:#FDECEC;border-radius:var(--r-xs);padding:4px 10px}
.woocommerce p.stock:before{}

/* Product tabs */
.woocommerce div.product .woocommerce-tabs{grid-column:1 / -1;margin-top:clamp(28px,4vw,48px)}
/* Pill tabs: background swap instead of an underline. */
.woocommerce div.product .woocommerce-tabs ul.tabs{padding:0;margin:0 0 24px;display:flex;gap:8px;flex-wrap:wrap;border-bottom:0}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,.woocommerce div.product .woocommerce-tabs ul.tabs::after{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li{background:transparent;border:0;border-radius:0;margin:0;padding:0;position:relative}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,.woocommerce div.product .woocommerce-tabs ul.tabs li::after{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{display:block;padding:10px 18px;font-weight:500;font-size:.92rem;color:var(--muted);background:var(--chip);border-radius:var(--r-pill);border-bottom:0;margin-bottom:0;transition:background .15s,color .15s}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover{color:var(--text)}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{background:var(--text);color:#fff}
.woocommerce div.product .woocommerce-tabs .panel{padding:0;margin:0;color:var(--vv-ink-2);line-height:1.75}
.woocommerce div.product .woocommerce-tabs .panel h2{font-size:1.3rem;font-weight:700;margin:0 0 16px;color:var(--vv-ink)}
.woocommerce table.shop_attributes{border:1px solid var(--vv-border);border-radius:var(--vv-r);overflow:hidden;border-collapse:separate;border-spacing:0}
.woocommerce table.shop_attributes th,.woocommerce table.shop_attributes td{border:0;border-bottom:1px solid var(--vv-border);padding:12px 16px}
.woocommerce table.shop_attributes tr:last-child th,.woocommerce table.shop_attributes tr:last-child td{border-bottom:0}
.woocommerce table.shop_attributes th{background:var(--vv-bg-2);font-weight:600;color:var(--vv-ink-2);width:30%}

/* Related / upsells */
.woocommerce .related,.woocommerce .upsells,.woocommerce .cross-sells{grid-column:1 / -1;margin-top:clamp(36px,5vw,64px)}
.woocommerce .related>h2,.woocommerce .upsells>h2,.woocommerce .cross-sells>h2{font-size:1.5rem;font-weight:700;letter-spacing:-.01em;margin:0 0 24px;color:var(--vv-ink)}

/* ---------------- Notices ---------------- */
.woocommerce .woocommerce-message,.woocommerce .woocommerce-info,.woocommerce .woocommerce-error,
.woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-noreviews{
	border:1px solid var(--vv-border);border-top:0;border-radius:10px;background:var(--vv-surface);
	padding:16px 18px 16px 52px;position:relative;font-size:.92rem;color:var(--vv-ink-2);line-height:1.5;box-shadow:var(--vv-sh-sm);list-style:none}
.woocommerce .woocommerce-message::before,.woocommerce .woocommerce-info::before,.woocommerce .woocommerce-error::before,
.woocommerce-message::before,.woocommerce-info::before,.woocommerce-error::before{
	position:absolute;left:16px;top:16px;font-family:inherit;font-size:1rem;line-height:1;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;content:""}
.woocommerce .woocommerce-message{background:#EAF5EE;border-color:#EAF5EE;color:var(--success)}
.woocommerce .woocommerce-message::before{content:"\2713";background:var(--success)}
.woocommerce .woocommerce-info{background:var(--accent-tint);border-color:var(--accent-tint);color:var(--text)}
.woocommerce .woocommerce-info::before{content:"i";background:var(--accent);font-style:normal}
.woocommerce .woocommerce-error{background:#FDECEC;border-color:#FDECEC;color:var(--danger)}
.woocommerce .woocommerce-error::before{content:"!";background:var(--danger)}
.woocommerce .woocommerce-message .button,.woocommerce .woocommerce-info .button{float:right;margin:-4px 0 0 12px;padding:.5em 1em;min-height:36px;font-size:.85rem}
.woocommerce-error li,.woocommerce-message,.woocommerce-info{margin-left:0}
.woocommerce ul.woocommerce-error{padding-left:52px}

/* ---------------- Cart (classic) ---------------- */
.woocommerce-cart .vvault-woo{padding-top:24px}
.woocommerce-cart table.shop_table{border:1px solid var(--vv-border);border-radius:var(--vv-r-lg);border-collapse:separate;border-spacing:0;overflow:hidden;background:var(--vv-surface);margin-bottom:28px}
.woocommerce-cart table.shop_table thead th{background:var(--vv-bg-2);color:var(--vv-ink-2);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:14px 18px;border:0}
.woocommerce-cart table.shop_table td{padding:18px;border:0;border-top:1px solid var(--vv-border);vertical-align:middle}
.woocommerce-cart table.shop_table .product-thumbnail img{width:72px;height:72px;object-fit:contain;background:var(--vv-surface);border-radius:var(--vv-r-sm);border:1px solid var(--vv-border)}
.woocommerce-cart table.shop_table .product-name a{font-weight:600;color:var(--vv-ink)}
.woocommerce-cart table.shop_table .product-name a:hover{color:var(--vv-purple-700)}
.woocommerce-cart table.shop_table .variation{font-size:.8rem;color:var(--vv-muted);margin:4px 0 0}
.woocommerce-cart table.shop_table td.product-price,.woocommerce-cart table.shop_table td.product-subtotal{font-weight:600;color:var(--vv-ink)}
.woocommerce-cart table.shop_table td.product-remove{width:40px}
.woocommerce-cart table.shop_table a.remove{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--vv-bg-2);color:var(--vv-muted) !important;font-size:20px;line-height:1;transition:background .15s,color .15s}
.woocommerce-cart table.shop_table a.remove:hover{background:var(--vv-danger);color:#fff !important}
.woocommerce-cart .actions{padding:18px !important;background:var(--vv-bg);border-radius:0 0 var(--vv-r-lg) var(--vv-r-lg)}
.woocommerce-cart .coupon{display:flex;gap:10px;align-items:center}
.woocommerce-cart .coupon .input-text{max-width:260px;margin:0 !important}
.woocommerce-cart .actions .button[name=update_cart]{background:transparent;color:var(--vv-purple-700);border-color:var(--vv-border-2);box-shadow:none;float:right}
.woocommerce-cart .actions .button[name=update_cart]:hover{background:var(--vv-purple-50)}
/* Cart totals */
/* Cart/checkout/account are shortcode pages rendered inside the 840px prose
   article. Let them use the full container width so the table isn't narrow. */
.woocommerce-cart .vvault-content .vvault-article,
.woocommerce-checkout .vvault-content .vvault-article,
.woocommerce-account .vvault-content .vvault-article{max-width:none}

/* No big empty wrapper box — just the totals card, right-aligned */
.woocommerce-cart .cart-collaterals{width:100%;display:flex;justify-content:flex-end;border:0 !important;padding:0 !important;background:transparent !important;box-shadow:none !important}
.woocommerce-cart .cart-collaterals .cart_totals{width:100%;max-width:420px;float:none;background:var(--vv-surface);border:1px solid var(--vv-border);border-radius:var(--vv-r-lg);padding:24px;box-shadow:var(--vv-sh)}
.woocommerce-cart .cart_totals h2{font-size:1.15rem;font-weight:700;margin:0 0 16px;color:var(--vv-ink)}
.woocommerce-cart .cart_totals table{border:0 !important;border-radius:0 !important;overflow:visible !important;margin:0}
/* No rounded highlight on the Total row (kill the clipped bottom corners). */
.woocommerce-cart .cart_totals .order-total,
.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td{background:transparent !important;border-radius:0 !important}
.woocommerce-cart .cart_totals table th,.woocommerce-cart .cart_totals table td{border:0;border-top:1px solid var(--vv-border);padding:12px 0;font-size:.95rem}
.woocommerce-cart .cart_totals table tr:first-child th,.woocommerce-cart .cart_totals table tr:first-child td{border-top:0}
.woocommerce-cart .cart_totals .order-total th,.woocommerce-cart .cart_totals .order-total td{font-size:1.15rem;font-weight:800;color:var(--vv-ink);padding-top:16px}
.woocommerce-cart .cart_totals .order-total .amount{color:var(--vv-purple-700)}
.woocommerce-cart .wc-proceed-to-checkout{padding:16px 0 0}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button{width:100%;font-size:1.05rem;min-height:52px}
/* Empty cart */
.woocommerce .cart-empty,.woocommerce-cart .cart-empty{text-align:center;font-size:1.15rem;color:var(--vv-ink);margin:0 0 8px}
.vvault-empty{text-align:center;padding:clamp(40px,7vw,80px) 20px;max-width:460px;margin:0 auto}
.vvault-empty__icon{width:72px;height:72px;margin:0 auto 20px;color:var(--vv-border-2)}
.vvault-empty__title{font-size:1.4rem;font-weight:700;margin:0 0 8px;color:var(--vv-ink)}
.vvault-empty__text{color:var(--vv-muted);margin:0 0 24px}
.woocommerce-cart .return-to-shop{text-align:center;margin-top:8px}
.woocommerce-cart .return-to-shop .button{min-width:220px}

/* ---------------- Checkout (classic, two-column) ---------------- */
.woocommerce-checkout .vvault-woo{padding-top:24px}
.vvault-checkout-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(24px,3vw,44px);align-items:start}
.woocommerce-checkout form.checkout{display:contents}
.woocommerce-checkout #customer_details{min-width:0}
.woocommerce-checkout .col2-set .col-1,.woocommerce-checkout .col2-set .col-2{width:100%;float:none;margin-bottom:24px}
.woocommerce-checkout h3,.woocommerce-checkout #order_review_heading{font-size:1.15rem;font-weight:700;color:var(--vv-ink);margin:0 0 18px;padding-bottom:12px;border-bottom:1px solid var(--vv-border)}
.woocommerce-checkout .woocommerce-billing-fields,.woocommerce-checkout .woocommerce-shipping-fields,.woocommerce-checkout .woocommerce-additional-fields{
	background:var(--vv-surface);border:1px solid var(--vv-border);border-radius:var(--vv-r-lg);padding:24px;margin-bottom:20px;box-shadow:var(--vv-sh-sm)}
.woocommerce-checkout .form-row-first,.woocommerce-checkout .form-row-last{width:calc(50% - 8px)}
.woocommerce-checkout .form-row-first{float:left;margin-right:16px}
.woocommerce-checkout .form-row-last{float:right;margin-right:0}
@media(max-width:520px){.woocommerce-checkout .form-row-first,.woocommerce-checkout .form-row-last{width:100%;float:none;margin-right:0}}
/* Order review sidebar (sticky) */
.vvault-checkout-review{position:sticky;top:88px}
.woocommerce-checkout #order_review{background:var(--vv-surface);border:1px solid var(--vv-border);border-radius:var(--vv-r-lg);padding:24px;box-shadow:var(--vv-sh)}
.woocommerce-checkout table.woocommerce-checkout-review-order-table{border:0;margin:0}
.woocommerce-checkout .woocommerce-checkout-review-order-table th,.woocommerce-checkout .woocommerce-checkout-review-order-table td{border:0;border-top:1px solid var(--vv-border);padding:12px 0;font-size:.92rem}
.woocommerce-checkout .woocommerce-checkout-review-order-table thead th{border-top:0;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--vv-muted);padding-bottom:12px}
.woocommerce-checkout .woocommerce-checkout-review-order-table .cart-subtotal th,.woocommerce-checkout .woocommerce-checkout-review-order-table .cart-subtotal td{font-weight:600}
.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total th,.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total td{font-size:1.15rem;font-weight:800;color:var(--vv-ink);padding-top:16px}
.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total .amount{color:var(--vv-purple-700)}
.woocommerce-checkout .woocommerce-checkout-review-order-table .product-name{color:var(--vv-ink-2);font-weight:500}
.woocommerce-checkout .woocommerce-checkout-review-order-table .product-total{font-weight:600;color:var(--vv-ink)}
/* Payment box */
.woocommerce-checkout #payment,.woocommerce #payment{background:var(--vv-bg);border-radius:var(--vv-r);padding:6px 4px;margin-top:18px}
.woocommerce-checkout #payment ul.payment_methods{border:0;padding:8px;margin:0}
.woocommerce-checkout #payment ul.payment_methods li{margin:0 0 6px;padding:14px 16px;background:var(--vv-surface);border:1.5px solid var(--vv-border);border-radius:var(--vv-r-sm);transition:border-color .15s,box-shadow .15s}
.woocommerce-checkout #payment ul.payment_methods li:hover{border-color:var(--accent)}
.woocommerce-checkout #payment ul.payment_methods li label{display:inline;font-weight:600;color:var(--vv-ink);margin:0}
.woocommerce-checkout #payment div.payment_box{background:var(--accent-tint);border-radius:var(--vv-r-sm);margin-top:12px;padding:14px;font-size:.88rem;color:var(--vv-ink-2)}
.woocommerce-checkout #payment div.payment_box::before{border-bottom-color:var(--accent-tint)}
.woocommerce-checkout #payment .place-order{padding:16px 8px 8px;margin:0}
/* Place order: primary (dark), full width, 52px — no glow. */
.woocommerce-checkout #payment #place_order{width:100%;font-size:1.05rem;min-height:52px;background:var(--text);box-shadow:none}
.woocommerce-checkout #payment #place_order:hover{background:var(--text-strong)}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper{margin:8px 8px 16px;font-size:.85rem;color:var(--vv-muted)}
.woocommerce-checkout-payment .woocommerce-privacy-policy-text{font-size:.82rem;color:var(--vv-muted);padding:8px}
/* Login/coupon prompts */
.woocommerce form.login,.woocommerce form.checkout_coupon,.woocommerce .checkout_coupon{border:1px solid var(--vv-border) !important;border-radius:var(--vv-r-lg);padding:22px;background:var(--vv-surface);margin-bottom:20px;box-shadow:var(--vv-sh-sm)}
.woocommerce-info.showlogin,.woocommerce-info.showcoupon{}

/* ---------------- Order received / thank you ---------------- */
.woocommerce-order .vvault-thankyou{max-width:760px;margin:0 auto}
.vvault-thankyou__hero{text-align:center;padding:8px 0 32px}
.vvault-thankyou__check{width:76px;height:76px;margin:0 auto 20px;border-radius:50%;background:var(--vv-green-50);display:flex;align-items:center;justify-content:center;color:var(--vv-green-600)}
.vvault-thankyou__check svg{width:40px;height:40px}
.vvault-thankyou__title{font-size:clamp(1.6rem,3.5vw,2.2rem);font-weight:800;letter-spacing:-.02em;margin:0 0 8px;color:var(--vv-ink)}
.vvault-thankyou__sub{color:var(--vv-muted);font-size:1.05rem;margin:0}
/* Desktop: one row of content-sized cells. Equal columns forced the email to
   break mid-word and the gateway title onto four lines; here each cell takes
   only the width it needs and the last one absorbs the slack. */
.woocommerce-order .woocommerce-order-overview,.woocommerce ul.order_details{display:flex;flex-wrap:nowrap;align-items:stretch;gap:0;list-style:none;margin:0 0 28px;padding:18px 4px;background:var(--vv-surface);border:1px solid var(--vv-border);border-radius:var(--vv-r-lg);box-shadow:var(--vv-sh-sm)}
/* Clearfix pseudo-elements are killed in the layout-reset block near the top. */
.woocommerce ul.order_details li{border:0;border-right:1px solid var(--vv-border);padding:2px 14px;font-size:1rem;font-weight:700;color:var(--vv-ink);text-transform:none;
	flex:0 0 auto;white-space:nowrap;overflow-wrap:break-word}
.woocommerce ul.order_details li:first-child{padding-left:6px}
/* Last cell takes whatever room is left and is the only one allowed to wrap. */
.woocommerce ul.order_details li:last-child{border-right:0;flex:1 1 0;min-width:0;white-space:normal;padding-right:6px}
.woocommerce ul.order_details li strong{display:block;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--vv-muted);margin-top:4px}
.woocommerce .woocommerce-order-details,.woocommerce .woocommerce-customer-details{background:var(--vv-surface);border:1px solid var(--vv-border);border-radius:var(--vv-r-lg);padding:24px;margin-bottom:20px;box-shadow:var(--vv-sh-sm)}
.woocommerce .woocommerce-order-details__title,.woocommerce .woocommerce-column__title{font-size:1.15rem;font-weight:700;margin:0 0 16px;color:var(--vv-ink)}
.woocommerce .woocommerce-order-details table.shop_table{border:0}
/* Amounts column right-aligned (standard for numeric/currency columns). */
.woocommerce .woocommerce-order-details table.shop_table th.product-total,
.woocommerce .woocommerce-order-details table.shop_table td.product-total,
.woocommerce .woocommerce-order-details table.shop_table tfoot td{text-align:right}
.woocommerce .woocommerce-order-details table.shop_table tfoot th{text-align:left;font-weight:600}
.woocommerce .woocommerce-order-details table.shop_table td.product-total,
.woocommerce .woocommerce-order-details table.shop_table tfoot td{color:var(--vv-ink);font-weight:600}
.woocommerce address{font-style:normal;line-height:1.7;color:var(--vv-ink-2);border:0;padding:0;font-size:.95rem}
.woocommerce-order .woocommerce-customer-details .woocommerce-columns{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:600px){.woocommerce-order .woocommerce-customer-details .woocommerce-columns{grid-template-columns:1fr}}

/* ---------------- My Account ---------------- */
.woocommerce-account .vvault-woo .woocommerce{display:grid;grid-template-columns:240px minmax(0,1fr);gap:32px;align-items:start}
.woocommerce-account.woocommerce-checkout .vvault-woo .woocommerce,
.woocommerce-account:not(.logged-in) .vvault-woo .woocommerce{display:block}
.woocommerce-account .woocommerce-MyAccount-navigation{background:var(--vv-surface);border:1px solid var(--vv-border);border-radius:var(--vv-r-lg);padding:10px;box-shadow:var(--vv-sh-sm)}
.woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0}
.woocommerce-account .woocommerce-MyAccount-navigation li{margin:0;border:0}
.woocommerce-account .woocommerce-MyAccount-navigation li a{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:var(--vv-r-sm);color:var(--vv-ink-2);font-weight:500;font-size:.92rem;transition:background .12s,color .12s}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{background:var(--vv-bg-2);color:var(--text)}
/* My Account nav: active item is flat dark (not the old purple gradient pill). */
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{background:var(--text);color:#fff;box-shadow:none}
.woocommerce-account .woocommerce-MyAccount-content{background:var(--vv-surface);border:1px solid var(--vv-border);border-radius:var(--vv-r-lg);padding:clamp(20px,3vw,32px);box-shadow:var(--vv-sh-sm);min-width:0}
.woocommerce-account .woocommerce-MyAccount-content p:first-child{margin-top:0}
.woocommerce-account .woocommerce-MyAccount-content h2,.woocommerce-account .woocommerce-MyAccount-content h3{font-weight:700;color:var(--vv-ink)}
/* Account tables (orders/downloads) */
.woocommerce-account table.shop_table,.woocommerce table.woocommerce-orders-table,.woocommerce table.my_account_orders{border:1px solid var(--vv-border);border-radius:var(--vv-r);border-collapse:separate;border-spacing:0;overflow:hidden}
.woocommerce-account table.shop_table thead th{background:var(--vv-bg-2);font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--vv-muted);padding:12px 14px;border:0}
.woocommerce-account table.shop_table td{border:0;border-top:1px solid var(--vv-border);padding:14px;vertical-align:middle;font-size:.9rem}
/* The status badge lives on an inner span (see the functions.php action) — the
   <td> stays a real table cell so the row aligns. Square, compact.
   Class is vvault-obadge, NOT vvault-status: main.css already owns
   `.vvault-status` as the full-screen 404/empty-state block (min-height:60vh),
   and that min-height leaked onto the badge and blew the table row up to 60vh. */
.woocommerce-account .woocommerce-orders-table__cell-order-status{display:table-cell;vertical-align:middle;padding:14px;background:none}
.woocommerce .vvault-obadge,.woocommerce mark.order-status,.woocommerce .order-status{
	display:inline-block;vertical-align:middle;padding:3px 9px;border-radius:0;
	font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;line-height:1.5;
	background:var(--vv-bg-2);color:var(--vv-ink-2)}
.woocommerce .vvault-obadge--completed,.woocommerce .order-status.status-completed{background:#EAF5EE;color:var(--success)}
.woocommerce .vvault-obadge--processing,.woocommerce .order-status.status-processing{background:var(--accent-tint);color:var(--accent-hover)}
.woocommerce .vvault-obadge--on-hold,.woocommerce .order-status.status-on-hold{background:var(--vv-amber-50);color:var(--vv-amber)}
.woocommerce .vvault-obadge--cancelled,.woocommerce .vvault-obadge--failed,
.woocommerce .order-status.status-cancelled,.woocommerce .order-status.status-failed{background:#FDECEC;color:var(--danger)}
/* Address cards */
.woocommerce-account .woocommerce-Addresses{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:8px}
/* Woo core floats .col-1/.col-2 at width:48%; inside our grid that halved each
   card again. Let them fill their own column. NOTE the three-class selector:
   core's `.woocommerce .col2-set .col-1` is (0,3,0), so a two-class
   `.woocommerce-account .woocommerce-Address` loses and the cards shrink back
   to 48% (which also squashed the title row until it overlapped the Edit link). */
.woocommerce-account .woocommerce-Addresses .woocommerce-Address{width:100%;float:none;min-width:0;background:var(--vv-bg);border:1px solid var(--vv-border);border-radius:var(--vv-r);padding:20px}
.woocommerce-account .woocommerce-Address-title{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px;margin-bottom:12px}
.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3{margin:0;font-size:1.05rem;min-width:0}
.woocommerce-account .woocommerce-Address-title a{flex:0 0 auto;font-size:.82rem;font-weight:600;white-space:nowrap}
@media(max-width:600px){.woocommerce-account .woocommerce-Addresses{grid-template-columns:1fr}}
/* Dashboard intro */
.vvault-acct-hello{background:var(--vv-grad-purple);color:#fff;border-radius:var(--vv-r-lg);padding:26px 28px;margin-bottom:24px}
/* Scoped past `.woocommerce-MyAccount-content h2 {color: ink}` above, which
   otherwise outranks this and paints the heading dark on the purple banner. */
.vvault-acct-hello h2,
.woocommerce-account .woocommerce-MyAccount-content .vvault-acct-hello h2{color:#fff;margin:0 0 4px;font-size:1.35rem}
.vvault-acct-hello p{color:rgba(255,255,255,.8);margin:0;font-size:.95rem}
.vvault-acct-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:8px}
.vvault-acct-card{display:flex;flex-direction:column;gap:6px;padding:18px;background:var(--vv-bg);border:1px solid var(--vv-border);border-radius:var(--vv-r);text-decoration:none;color:var(--vv-ink);transition:transform .12s,box-shadow .15s,border-color .15s}
.vvault-acct-card:hover{transform:translateY(-2px);box-shadow:var(--vv-sh);border-color:var(--vv-purple-600);color:var(--vv-ink)}
.vvault-acct-card svg{width:26px;height:26px;color:var(--vv-purple-600)}
.vvault-acct-card strong{font-size:.98rem}
.vvault-acct-card span{font-size:.82rem;color:var(--vv-muted)}
/* Login/register two-up */
.woocommerce-account:not(.logged-in) .u-columns.col2-set,.woocommerce .customer-login-form{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:840px;margin:0 auto}
.woocommerce-account:not(.logged-in) .u-column1,.woocommerce-account:not(.logged-in) .u-column2{width:100% !important;float:none !important;margin:0 !important;background:var(--vv-surface);border:1px solid var(--vv-border);border-radius:var(--vv-r-lg);padding:28px;box-shadow:var(--vv-sh-sm)}
.woocommerce-account:not(.logged-in) .u-column1 h2,.woocommerce-account:not(.logged-in) .u-column2 h2{font-size:1.25rem;margin:0 0 18px}
@media(max-width:640px){.woocommerce-account:not(.logged-in) .u-columns.col2-set,.woocommerce .customer-login-form{grid-template-columns:1fr}}

/* ---------------- Pagination ---------------- */
.woocommerce nav.woocommerce-pagination{margin-top:36px;text-align:center}
.woocommerce nav.woocommerce-pagination ul{border:0;display:inline-flex;gap:6px}
.woocommerce nav.woocommerce-pagination ul li{border:0;margin:0}
.woocommerce nav.woocommerce-pagination ul li a,.woocommerce nav.woocommerce-pagination ul li span{
	min-width:42px;height:42px;display:flex;align-items:center;justify-content:center;padding:0 12px;border:1px solid var(--vv-border);border-radius:var(--vv-r-sm);font-weight:600;font-size:.9rem;color:var(--vv-ink-2);background:var(--vv-surface);transition:all .15s}
.woocommerce nav.woocommerce-pagination ul li a:hover{border-color:var(--vv-purple-600);color:var(--vv-purple-700);background:var(--vv-purple-50)}
.woocommerce nav.woocommerce-pagination ul li span.current{background:var(--vv-grad-purple);border-color:var(--vv-purple-600);color:#fff}

/* ---------------- Reviews ---------------- */
.woocommerce #reviews #comments ol.commentlist{margin:0;padding:0}
.woocommerce #reviews #comments ol.commentlist li{margin:0 0 20px;padding:20px;background:var(--vv-bg);border:1px solid var(--vv-border);border-radius:var(--vv-r);list-style:none}
.woocommerce #reviews #comments ol.commentlist li .comment_container{display:flex;gap:14px}
.woocommerce #reviews #comments ol.commentlist li img.avatar{position:static;width:46px;height:46px;border-radius:50%;border:0;padding:0;float:none}
.woocommerce #reviews #comments ol.commentlist li .comment-text{margin:0;border:0;padding:0}
.woocommerce #reviews .comment-form-rating .stars a{color:var(--vv-amber)}
.woocommerce #review_form #respond{background:var(--vv-surface);border:1px solid var(--vv-border);border-radius:var(--vv-r-lg);padding:24px}
.woocommerce p.stars a{color:var(--vv-amber)}

/* ---------------- Widgets (price filter etc) ---------------- */
.woocommerce .widget_price_filter .ui-slider .ui-slider-range{background:var(--vv-purple-600)}
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle{background:var(--vv-purple-700);border-radius:50%}

/* ---------------- Header cart integration ---------------- */
.vvault-header .vvault-cart{position:relative}
.vvault-header .vvault-cart__count{position:absolute;top:-2px;right:-2px;min-width:19px;height:19px;padding:0 5px;border-radius:var(--vv-r-pill);background:var(--accent);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1;box-shadow:0 0 0 2px var(--vv-surface)}
.vvault-header .vvault-cart__count.is-empty{display:none}

/* ---------------- Toast ---------------- */
.vvault-toast{font-family:var(--vv-font)}

/* ---------------- Responsive ---------------- */
@media(max-width:1024px){
	.single-product .vvault-woo div.product{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px}
}
@media(max-width:900px){
	.vvault-checkout-grid{grid-template-columns:1fr}
	.vvault-checkout-review{position:static}
	.woocommerce-account .vvault-woo .woocommerce{grid-template-columns:1fr}
	.woocommerce-account .woocommerce-MyAccount-navigation{margin-bottom:20px}
	.woocommerce-account .woocommerce-MyAccount-navigation ul{display:flex;flex-wrap:wrap;gap:4px}
}
@media(max-width:781px){
	.single-product .vvault-woo div.product{grid-template-columns:1fr;gap:24px}
	.single-product div.product form.cart{position:sticky;bottom:0;z-index:20;border-radius:var(--vv-r-lg) var(--vv-r-lg) 0 0;margin:0 -16px -56px;box-shadow:0 -6px 24px rgba(0,0,0,.08)}
}
/* Cart: stacked cards. Uses WooCommerce's own responsive breakpoint (768px) so
   there is never a "mixed" zone where Woo's default mobile table shows through. */
@media(max-width:768px){
	.woocommerce-cart table.shop_table thead{display:none}
	.woocommerce-cart table.shop_table,
	.woocommerce-cart table.shop_table tbody,
	.woocommerce-cart table.shop_table tr,
	.woocommerce-cart table.shop_table td{display:block;width:100%}
	/* Product rows: image pinned top-left (fills the gutter), details beside it. */
	.woocommerce-cart table.shop_table tr.cart_item{display:block;position:relative;border-top:1px solid var(--vv-border);padding:16px 42px 16px 104px;min-height:104px}
	.woocommerce-cart table.shop_table tr.cart_item:first-child{border-top:0}
	.woocommerce-cart table.shop_table tr.cart_item td{display:block;width:auto !important;border:0 !important;padding:3px 0 !important;text-align:left !important}
	.woocommerce-cart table.shop_table td.product-thumbnail{position:absolute !important;left:16px;top:16px;width:76px !important;height:76px;margin:0;padding:0 !important}
	.woocommerce-cart table.shop_table td.product-thumbnail a{display:block !important;width:76px;height:76px}
	.woocommerce-cart table.shop_table td.product-thumbnail img{display:block !important;width:76px !important;height:76px !important;max-width:none !important;object-fit:contain;background:var(--vv-surface);border-radius:8px}
	.woocommerce-cart table.shop_table td.product-name{font-weight:600}
	.woocommerce-cart table.shop_table td.product-remove{position:absolute;right:10px;top:14px;width:auto !important;padding:0 !important}
	.woocommerce-cart table.shop_table td.product-price::before,
	.woocommerce-cart table.shop_table td.product-subtotal::before,
	.woocommerce-cart table.shop_table td.product-quantity::before{content:attr(data-title) ": ";font-weight:600;color:var(--vv-muted);font-size:.8rem}
	/* Kill WooCommerce's stray ":" label on cells that have no data-title. */
	.woocommerce-cart table.shop_table td.product-thumbnail::before,
	.woocommerce-cart table.shop_table td.product-name::before,
	.woocommerce-cart table.shop_table td.product-remove::before{content:"" !important;display:none !important}
	/* Aligned column: label on the left, value on the right edge of the card. */
	.woocommerce-cart table.shop_table td.product-price,
	.woocommerce-cart table.shop_table td.product-subtotal,
	.woocommerce-cart table.shop_table td.product-quantity{display:flex !important;justify-content:space-between;align-items:center;gap:8px}
	.woocommerce-cart td.product-quantity .quantity{height:38px;width:auto}
	.woocommerce-cart td.product-quantity .quantity .qty{width:40px}
	.woocommerce-cart td.product-quantity .vvault-qty-btn{width:32px;font-size:1.05rem}
	/* Coupon / update row: full width, no thumbnail gutter, buttons stacked. */
	.woocommerce-cart table.shop_table td.actions{padding:14px !important;text-align:left}
	/* Coupon field + Apply button stay side-by-side on one row. */
	.woocommerce-cart .coupon{display:flex;flex-wrap:nowrap;gap:8px;align-items:stretch}
	.woocommerce-cart .coupon .input-text{flex:1 1 auto;min-width:0;width:auto;max-width:none;margin:0 !important}
	.woocommerce-cart .coupon .button{flex:0 0 auto;width:auto;white-space:nowrap}
	.woocommerce-cart .actions .button[name=update_cart]{float:none;width:100%;margin-top:10px}
	.woocommerce-cart .cart-collaterals,
	.woocommerce-cart .cart-collaterals .cart_totals{max-width:100%;width:100%}
}
@media(max-width:640px){
	.woocommerce ul.products,.woocommerce-page ul.products{grid-template-columns:repeat(2,1fr);gap:12px}
	.woocommerce ul.products li.product .vvault-card__body{padding:12px}
	.woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:.9rem}
}
@media(max-width:400px){
	.woocommerce ul.products,.woocommerce-page ul.products{grid-template-columns:1fr}
}

/* Prevent horizontal overflow anywhere in Woo */
.woocommerce .vvault-woo,.woocommerce-page .vvault-woo{overflow-x:clip}
.woocommerce table.shop_table_responsive,.woocommerce .woocommerce-table--order-details{max-width:100%}

/* Breadcrumb separator + spacing */
.vvault-breadcrumb .vv-bc-sep{color:var(--vv-border-2);margin:0 2px}
.woocommerce .woocommerce-breadcrumb{padding-top:2px}

/* No sidebar on the store — hide any stray widget area */
.woocommerce #sidebar,.woocommerce .shop-sidebar,.woocommerce-page #sidebar{display:none !important}

/* Hide the Sale badge on out-of-stock products (Out of stock badge takes priority) */
.woocommerce .outofstock .onsale,.woocommerce li.product.outofstock .onsale,.single-product .product.outofstock span.onsale{display:none !important}

/* Checkout: "Ship to a different address?" moved inside the billing card
   (right under Email address). The vacated second column is dropped. */
.vv-shipping-inline.woocommerce-checkout #customer_details .col-2{display:none}
.woocommerce-checkout .woocommerce-billing-fields .woocommerce-shipping-fields{
	clear:both;background:none;border:0;border-radius:0;padding:0;margin:26px 0 0;box-shadow:none}
.woocommerce-checkout .woocommerce-billing-fields #ship-to-different-address{
	margin:0;padding:0;border-bottom:0;font-size:.95rem}
.woocommerce-checkout .woocommerce-billing-fields #ship-to-different-address label{
	display:flex;align-items:center;gap:10px;margin:0;font-size:.92rem;font-weight:600;color:var(--vv-ink-2);cursor:pointer}
.woocommerce-checkout .woocommerce-billing-fields #ship-to-different-address input[type=checkbox]{
	flex:0 0 auto;width:18px;height:18px;margin:0;accent-color:var(--vv-purple-600);cursor:pointer}
.woocommerce-checkout .woocommerce-billing-fields .shipping_address{
	margin-top:18px;padding-top:18px;border-top:1px solid var(--vv-border)}
/* Breathing room under the toggle, before the Order notes card. */
.woocommerce-checkout .woocommerce-billing-fields .woocommerce-additional-fields{margin:26px 0 0}

/* Checkout: only one country is sellable (Australia), so Woo renders it as a
   single-option select that reads as plain text. Tuck it up on the "Billing
   details" heading row instead of eating a full field row. Normal row on
   narrow screens, and on any real multi-country select. */
@media(min-width:641px){
	.woocommerce-checkout .woocommerce-billing-fields{position:relative}
	.woocommerce-checkout .woocommerce-billing-fields > h3{padding-right:270px}
	.woocommerce-checkout .woocommerce-billing-fields #billing_country_field:has(.country_to_state--single){
		position:absolute;top:20px;right:24px;width:auto;max-width:52%;margin:0;padding:0;
		display:flex;align-items:center;gap:8px;min-height:1.7rem}
	.woocommerce-checkout .woocommerce-billing-fields #billing_country_field:has(.country_to_state--single) label{
		display:inline;margin:0;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
		color:var(--vv-muted);white-space:nowrap}
	.woocommerce-checkout .woocommerce-billing-fields #billing_country_field:has(.country_to_state--single) label .required{display:none}
	.woocommerce-checkout .woocommerce-billing-fields #billing_country_field .woocommerce-input-wrapper{display:inline-flex;align-items:center}
	.woocommerce-checkout .woocommerce-billing-fields #billing_country_field select.country_to_state--single{
		width:auto;min-width:0;min-height:0;height:auto;margin:0;padding:0;border:0;background:none;box-shadow:none;
		appearance:none;-webkit-appearance:none;font-size:.92rem;font-weight:600;color:var(--vv-ink);
		line-height:1.3;pointer-events:none;white-space:nowrap}
}

/* Order received, desktop: label on top, value under it. The markup is
   value-then-<strong>label</strong>, so column-reverse flips them visually
   without touching the HTML. Mobile keeps its own label-left/value-right rows. */
@media(min-width:901px){
	.woocommerce ul.order_details li{display:flex;flex-direction:column-reverse;justify-content:flex-end;align-items:flex-start}
	.woocommerce ul.order_details li strong{margin:0 0 4px}
}

/* Order received: stack the summary as label-left / value-right rows on phones
   and tablets — five columns never fit, and long emails / gateway titles wrap
   badly in a grid. Markup is value-then-<strong>label</strong>, so row-reverse
   puts the label first. */
@media(max-width:900px){
	/* Must stay a flex container: as a plain block the core `float:left` on the
	   li's kicks back in and the card collapses. */
	.woocommerce ul.order_details{display:flex;flex-direction:column;flex-wrap:nowrap;padding:4px 18px}
	.woocommerce ul.order_details li,
	.woocommerce ul.order_details li:first-child,
	.woocommerce ul.order_details li:last-child{display:flex;flex-direction:row-reverse;align-items:baseline;
		justify-content:space-between;gap:16px;text-align:right;white-space:normal;float:none;flex:0 0 auto;width:auto;
		border-right:0;border-bottom:1px solid var(--vv-border);padding:13px 0}
	.woocommerce ul.order_details li:last-child{border-bottom:0}
	.woocommerce ul.order_details li strong{flex:0 0 auto;margin:0;text-align:left}
}

/* Account details: the submit sits straight under the password fieldset border. */
.woocommerce-account .woocommerce-EditAccountForm button[name="save_account_details"]{margin-top:26px}

/* ---------------- Product gallery robustness ---------------- */
/* WooCommerce prints the gallery with inline opacity:0 and relies on its
   flexslider init to clear it. When that init does not fire — a single-image
   gallery on iOS Safari here — the image never paints while still taking up its
   space, and tapping the blank area still opens the lightbox. Forcing opacity
   costs nothing: the slider and zoom keep working when the script does run. */
.woocommerce div.product .woocommerce-product-gallery,
.single-product .vvault-woo div.product .woocommerce-product-gallery{opacity:1 !important}
/* Never let the gallery push the page wider than the viewport. */
.single-product .vvault-woo div.product .woocommerce-product-gallery,
.single-product .vvault-woo div.product .woocommerce-product-gallery .flex-viewport,
.single-product .vvault-woo div.product .woocommerce-product-gallery ul.slides,
.single-product .vvault-woo div.product .woocommerce-product-gallery ul.slides li{max-width:100% !important;min-width:0}

/* PhotoSwipe hides its controls in the idle state, which on a touch screen
   leaves no visible way out of the lightbox. Keep the bar and the close button
   on screen, and make the button read as a button. */
.pswp__ui--idle .pswp__top-bar,
.pswp__ui--hidden .pswp__top-bar{opacity:1 !important;visibility:visible !important}
.pswp__top-bar{background:rgba(0,0,0,.45) !important}
.pswp__button--close{opacity:1 !important;background-color:rgba(255,255,255,.16);border-radius:50%;margin:6px 8px}
.pswp__button--close:hover{background-color:rgba(255,255,255,.28)}

/* ---------- Keep site chrome out of WooCommerce's link colour ----------
   WooCommerce puts its class on <body>, so the `.woocommerce a` rule above
   also repaints the header nav and footer links purple — the header then
   looks different on shop pages than on ordinary pages. Same specificity as
   .vvault-menu a, and loaded later, so it wins; these put it back. */
.woocommerce .vvault-menu a,
.woocommerce-page .vvault-menu a{color:var(--vv-ink)}
.woocommerce .vvault-menu a:hover,
.woocommerce-page .vvault-menu a:hover{color:var(--vv-purple-700)}
.woocommerce .vvault-footer__links a,
.woocommerce-page .vvault-footer__links a{color:var(--vv-muted)}
.woocommerce .vvault-footer__links a:hover,
.woocommerce-page .vvault-footer__links a:hover{color:var(--vv-purple-700)}