/*
Theme Name: VIVIRE
Theme URI: https://example.com/vivire
Author: VIVIRE Studio
Author URI: https://example.com
Description: A fast, minimal WooCommerce theme with a monochrome, editorial aesthetic — thin hairline borders, generous whitespace, and a clean serif/sans type pairing. Fully responsive, translation ready, and built to be easy to re-skin through a handful of CSS variables.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: vivire
Tags: e-commerce, custom-colors, custom-logo, custom-menu, editor-style, featured-images, full-width-template, threaded-comments, translation-ready, block-styles, wide-blocks

VIVIRE is distributed under the terms of the GNU GPL v2 or later.
*/

/* =========================================================================
   TABLE OF CONTENTS
   1.0  CSS Reset & Base
   2.0  Design Tokens (CSS Variables)
   3.0  Typography
   4.0  Layout & Containers
   5.0  Buttons & Form Elements
   6.0  Header & Navigation
   7.0  Announcement Bar
   8.0  Footer
   9.0  Home / Hero / Sections
   10.0 Accordion (FAQ, tabs, product info)
   11.0 WooCommerce — Shop / Archive Grid
   12.0 WooCommerce — Single Product
   13.0 WooCommerce — Cart & Checkout
   14.0 WooCommerce — My Account
   15.0 Widgets & Sidebar
   16.0 Utilities
   17.0 Responsive
   18.0 Blog, Pages & Comments
   19.0 WooCommerce Button Bridge & Shop Layout
   20.0 Header Scroll State & Inline Search Overlay
   ========================================================================= */

/* =========================================================================
   1.0 CSS RESET & BASE
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--vv-bg);
	color: var(--vv-text);
	font-family: var(--vv-font-body);
	font-size: 15px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select, button { font-family: inherit; font-size: inherit; color: inherit; }
figure { margin: 0; }
table { border-collapse: collapse; width: 100%; }
.skip-link {
	position: absolute; left: -9999px; top: auto;
	background: #000; color: #fff; padding: 12px 20px; z-index: 10000;
}
.skip-link:focus { left: 12px; top: 12px; }

/* =========================================================================
   2.0 DESIGN TOKENS
   Edit these to re-skin the whole theme.
   ========================================================================= */
:root{
	/* Palette */
	--vv-bg: #ffffff;
	--vv-bg-alt: #f7f7f5;
	--vv-surface: var(--vv-bg-alt);
	--vv-text: #111111;
	--vv-text-muted: rgba(17,17,17,0.6);
	--vv-text-faint: rgba(17,17,17,0.4);
	--vv-border: rgb(223,223,223);
	--vv-border-strong: rgba(17,17,17,0.7);
	--vv-accent: #111111;
	--vv-accent-contrast: #ffffff;
	--vv-error: #c0392b;
	--vv-success: #2e8b57;

	/* Dark surfaces (header/footer can opt in via .vv-dark) */
	--vv-dark-bg: #111111;
	--vv-dark-text: #f2f2f0;
	--vv-dark-border: rgba(255,255,255,0.14);

	/* Typography */
	--vv-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
	--vv-font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

	/* Layout */
	--vv-container: 1320px;
	--vv-container-narrow: 720px;
	--vv-gutter: 24px;
	--vv-edge: 32px; /* full-bleed section side padding (shop grid, etc.) */
	--vv-space-sm: 16px;
	--vv-space-md: 32px;
	--vv-space-lg: 56px;
	--vv-radius: 0px;
	--vv-radius-soft: 6px;
	--vv-header-height: 76px;

	/* Motion */
	--vv-ease: cubic-bezier(.4,0,.2,1);
	--vv-speed: 0.2s;
}

/* =========================================================================
   3.0 TYPOGRAPHY
   ========================================================================= */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--vv-font-display);
	font-weight: 400;
	line-height: 1.15;
	margin: 0 0 0.5em;
	color: var(--vv-text);
}
h1 { font-size: clamp(32px, 5vw, 56px); }
h2 { font-size: clamp(26px, 3.4vw, 38px); }
h3 { font-size: clamp(20px, 2.4vw, 26px); }
p { margin: 0 0 1em; }
.vv-eyebrow{
	display: block;
	font-family: var(--vv-font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--vv-text-muted);
	margin: 0 0 14px;
}
.vv-lede{ font-size: 16px; color: var(--vv-text-muted); max-width: 60ch; }

/* =========================================================================
   4.0 LAYOUT & CONTAINERS
   ========================================================================= */
.vv-container{
	max-width: var(--vv-container);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--vv-gutter);
	padding-right: var(--vv-gutter);
}
.vv-container--narrow{ max-width: var(--vv-container-narrow); }
.vv-section{ padding: 72px 0; }
.vv-section--tight{ padding: 40px 0; }
.vv-section--alt{ background: var(--vv-bg-alt); }
.vv-grid{ display: grid; gap: var(--vv-gutter); }
.vv-row{ display: flex; align-items: center; gap: var(--vv-gutter); }
.vv-row--between{ justify-content: space-between; }
main#vv-content{ display: block; min-height: 40vh; }

/* =========================================================================
   5.0 BUTTONS & FORM ELEMENTS
   ========================================================================= */
.vv-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 15px 32px;
	background: var(--vv-accent);
	color: var(--vv-accent-contrast);
	border: 1px solid var(--vv-accent);
	border-radius: var(--vv-radius);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	transition: background var(--vv-speed) var(--vv-ease), color var(--vv-speed) var(--vv-ease), opacity var(--vv-speed) var(--vv-ease);
	white-space: nowrap;
}
.vv-btn:hover{ background: #333; border-color: #333; }
.vv-btn[disabled], .vv-btn.disabled{ opacity: 0.45; cursor: default; pointer-events: none; }
.vv-btn--outline{
	background: transparent;
	color: var(--vv-text);
	border-color: var(--vv-border-strong);
}
.vv-btn--outline:hover{ background: var(--vv-text); color: var(--vv-accent-contrast); }
.vv-btn--pill{ border-radius: 999px; }
.vv-btn--block{ width: 100%; }
.vv-btn--sm{ padding: 10px 20px; font-size: 11px; }

.vv-field{ margin-bottom: 18px; }
.vv-field label{
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--vv-text-muted);
	margin-bottom: 8px;
}
input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="number"], input[type="search"], input[type="url"], textarea, select {
	width: 100%;
	padding: 13px 16px;
	background: var(--vv-bg);
	border: 1px solid var(--vv-border);
	border-radius: var(--vv-radius);
	color: var(--vv-text);
	transition: border-color var(--vv-speed) var(--vv-ease);
}
input:focus, textarea:focus, select:focus{
	outline: none;
	border-color: var(--vv-border-strong);
}
::placeholder{ color: var(--vv-text-faint); }
select{
	appearance: none;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23111' d='M5 7l5 6 5-6z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 40px;
}
.vv-qty{
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--vv-border);
}
.vv-qty button{
	background: transparent;
	border: 0;
	width: 40px;
	font-size: 16px;
	color: var(--vv-text);
}
.vv-qty input{
	width: 46px;
	border: 0;
	border-left: 1px solid var(--vv-border);
	border-right: 1px solid var(--vv-border);
	text-align: center;
	padding: 0;
}

/* =========================================================================
   6.0 HEADER & NAVIGATION
   ========================================================================= */
.vv-header{
	position: sticky;
	top: 0;
	z-index: 500;
	background: var(--vv-bg);
	border-bottom: 1px solid var(--vv-border);
}
.vv-header__inner{
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--vv-header-height);
	gap: 20px;
}
.vv-header__logo{ font-family: var(--vv-font-display); font-size: 22px; letter-spacing: 0.02em; }
.vv-header__logo img{ max-height: 34px; width: auto; }
.vv-nav{ display: flex; align-items: center; gap: 28px; }
.vv-nav a{
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	position: relative;
	padding: 6px 0;
}
.vv-nav a::after{
	content: "";
	position: absolute;
	left: 0; right: 100%;
	bottom: 0;
	height: 1px;
	background: currentColor;
	transition: right var(--vv-speed) var(--vv-ease);
}
.vv-nav a:hover::after, .vv-nav .current-menu-item > a::after{ right: 0; }
.vv-header__icons{ display: flex; align-items: center; gap: 18px; }
.vv-header__icons a, .vv-header__icons button{
	background: none; border: 0; padding: 0;
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
	position: relative;
}
.vv-cart-count{
	position: absolute; top: -8px; right: -12px;
	background: var(--vv-accent); color: var(--vv-accent-contrast);
	font-size: 10px; line-height: 1; border-radius: 999px;
	min-width: 16px; height: 16px; display: flex; align-items: center; justify-content: center;
	padding: 2px;
}
.vv-menu-toggle{ display: none; background: none; border: 0; padding: 4px; }
.vv-menu-toggle span{
	display: block; width: 22px; height: 1px; background: var(--vv-text);
	margin: 5px 0; transition: transform var(--vv-speed) var(--vv-ease), opacity var(--vv-speed) var(--vv-ease);
}

/* Account popover (shared with WooCommerce login/account menu) */
.vv-account-popover{
	position: absolute; z-index: 600; display: none;
	min-width: 190px; background: var(--vv-bg);
	border: 1px solid var(--vv-border); box-shadow: 0 4px 16px rgba(0,0,0,0.08); padding: 6px;
}
.vv-account-popover.is-open{ display: block; }
.vv-account-popover a{
	display: block; padding: 10px 14px; font-size: 13px;
	font-weight: 400; text-transform: none; letter-spacing: normal;
	border-radius: var(--vv-radius-soft);
}
.vv-account-popover a:hover{ background: var(--vv-bg-alt); }

/* =========================================================================
   7.0 ANNOUNCEMENT BAR
   ========================================================================= */
.vv-announce{
	background: var(--vv-text);
	color: var(--vv-bg);
	text-align: center;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 10px var(--vv-gutter);
}

/* =========================================================================
   8.0 FOOTER
   ========================================================================= */
.vv-footer{
	background: var(--vv-text);
	color: var(--vv-dark-text);
	padding: 8px 0 28px;
}
.vv-footer a{ color: inherit; }

/* Footer accordion — reuses the .vv-accordion__item/__trigger/__panel
   structure (and vvAccordion() JS) from section 10.0, scoped here to
   swap in the dark-on-dark footer palette instead of the light theme's. */
.vv-footer__accordion{ border-top: 1px solid var(--vv-dark-border); }
.vv-footer__accordion .vv-accordion__item{ border-bottom: 1px solid var(--vv-dark-border); }
.vv-footer__accordion .vv-accordion__trigger{
	color: var(--vv-dark-text);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	padding: 20px 4px;
}
.vv-footer__accordion .vv-accordion__panel{ color: rgba(255,255,255,0.6); padding: 0 4px 24px; }
.vv-footer__accordion .vv-accordion__panel ul li{ margin-bottom: 10px; font-size: 13px; }
.vv-footer__accordion .vv-accordion__panel a{ color: inherit; }
.vv-footer__accordion .vv-accordion__panel a:hover{ color: var(--vv-dark-text); }

.vv-footer__bottom{
	display: flex; justify-content: space-between; align-items: center;
	padding-top: 24px; font-size: 12px; color: rgba(255,255,255,0.5); flex-wrap: wrap; gap: 12px;
}
.vv-footer__social{ display: flex; gap: 16px; }

/* =========================================================================
   9.0 HOME / HERO / SECTIONS
   ========================================================================= */
.vv-hero{
	position: relative;
	min-height: 78vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: var(--vv-text);
	color: var(--vv-dark-text);
	overflow: hidden;
}
.vv-hero__media{ position: absolute; inset: 0; z-index: 0; opacity: 0.55; }
.vv-hero__media img{ width: 100%; height: 100%; object-fit: cover; }
.vv-hero__content{ position: relative; z-index: 1; padding: 0 var(--vv-gutter); }
.vv-hero h1{ color: inherit; margin-bottom: 20px; }
.vv-hero .vv-eyebrow{ color: rgba(255,255,255,0.7); }
.vv-hero .vv-btn{ margin-top: 12px; }

.vv-section__head{ text-align: center; max-width: 640px; margin: 0 auto 40px; }

.vv-cats{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--vv-gutter);
}
.vv-cat-card{ position: relative; aspect-ratio: 3/4; overflow: hidden; display: block; }
.vv-cat-card img{ width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--vv-ease); }
.vv-cat-card:hover img{ transform: scale(1.04); }
.vv-cat-card__label{
	position: absolute; left: 0; right: 0; bottom: 0;
	padding: 20px; background: linear-gradient(to top, rgba(0,0,0,0.55), transparent);
	color: #fff; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}

.vv-split{
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 56px;
}
.vv-split img{ width: 100%; }

/* =========================================================================
   10.0 ACCORDION (FAQ, product tabs)
   ========================================================================= */
.vv-accordion{ border-top: 1px solid var(--vv-border); }
.vv-accordion__item{ border-bottom: 1px solid var(--vv-border); }
.vv-accordion__trigger{
	width: 100%; display: flex; align-items: center; justify-content: space-between;
	background: none; border: 0; padding: 18px 4px; text-align: left;
	font-size: 14px; font-weight: 500;
}
.vv-accordion__icon{ font-size: 18px; line-height: 1; transition: transform var(--vv-speed) var(--vv-ease); }
.vv-accordion__item.is-open .vv-accordion__icon{ transform: rotate(45deg); }
.vv-accordion__panel{ display: none; padding: 0 4px 20px; font-size: 13px; line-height: 1.7; color: var(--vv-text-muted); }
.vv-accordion__item.is-open .vv-accordion__panel{ display: block; }

/* =========================================================================
   11.0 WOOCOMMERCE — SHOP / ARCHIVE GRID
   Edge-to-edge, hairline-divided grid (structural reference: full-bleed
   catalog grids with 1px cell dividers instead of gapped shadow cards) —
   built with Saint Steven's own products, images and copy throughout.
   ========================================================================= */
.vv-shop-full{ max-width: 100%; padding: 0 var(--vv-edge, 32px); }

.vv-shop-header{
	display: flex; align-items: center; justify-content: space-between;
	padding: 20px 0; border-bottom: 1px solid var(--vv-border); gap: 16px; flex-wrap: wrap;
}
.vv-shop-header h1{
	margin: 0; font-family: var(--vv-font-body); font-size: 12px; font-weight: 600;
	letter-spacing: 0.08em; text-transform: uppercase; color: var(--vv-text);
}
.vv-shop-header__right .woocommerce-ordering select{
	border: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
	background-position: right center;
}

.woocommerce ul.products{
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}
.woocommerce ul.products li.product{
	width: 100% !important; margin: 0 !important; float: none !important; list-style: none;
}
.vv-product-card{
	display: block;
	border-right: 1px solid var(--vv-border);
	border-bottom: 1px solid var(--vv-border);
}
.woocommerce ul.products li.product:nth-child(4n)  .vv-product-card{ border-right: 0; }
.vv-product-card__media{
	position: relative; aspect-ratio: 1/1; overflow: hidden; background: var(--vv-bg-alt);
}
.vv-product-card__media img{
	width: 100%; height: 100%; object-fit: cover; transition: opacity 0.35s var(--vv-ease);
}
.vv-product-card__media img.vv-hover-img{ position: absolute; inset: 0; opacity: 0; }
.vv-product-card:hover .vv-hover-img{ opacity: 1; }
.vv-product-card__badge{
	position: absolute; top: 12px; left: 12px; background: var(--vv-text); color: var(--vv-bg);
	font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 9px;
}
.vv-product-card__quick{
	position: absolute; left: 10px; right: 10px; bottom: 10px;
	opacity: 0; transform: translateY(6px);
	transition: opacity var(--vv-speed) var(--vv-ease), transform var(--vv-speed) var(--vv-ease);
}
.vv-product-card:hover .vv-product-card__quick{ opacity: 1; transform: translateY(0); }
.vv-product-card__info{ padding: 8px 10px 12px; }
.vv-product-card__title{
	font-family: var(--vv-font-body); font-size: 12px; font-weight: 400; margin: 2px 0 0; color: var(--vv-text);
}
.vv-product-card .price{ font-size: 12px; color: var(--vv-text); display: block; }
.vv-product-card .price ins{ text-decoration: none; color: var(--vv-text); }
.vv-product-card .price del{ opacity: 0.5; margin-right: 6px; }
.vv-product-card__rating{ display: none; }

nav.woocommerce-pagination{ margin-top: 56px; text-align: center; }
nav.woocommerce-pagination ul{ display: inline-flex; gap: 4px; border: 0; }
nav.woocommerce-pagination ul li{ border: 0 !important; }
nav.woocommerce-pagination ul li a, nav.woocommerce-pagination ul li span{
	display: flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; border: 1px solid var(--vv-border); font-size: 12px;
}
nav.woocommerce-pagination ul li .current{ background: var(--vv-text); color: var(--vv-bg); border-color: var(--vv-text); }

.woocommerce-widget-layered-nav ul, .woocommerce-widget-layered-nav-list{ margin: 0; }
.woocommerce-widget-layered-nav ul li, .woocommerce-widget-layered-nav-list li{
	padding: 8px 0; border-bottom: 1px solid var(--vv-border); font-size: 13px;
}

/* Sale/outofstock flashes */
.onsale{
	position: absolute; top: 12px; right: 12px; left: auto;
	background: var(--vv-text); color: var(--vv-bg);
	font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
	padding: 5px 9px; border-radius: 0;
}
.stock.out-of-stock{ color: var(--vv-error); font-size: 12px; }

/* ==========================================================================
   12.0  WOOCOMMERCE — SINGLE PRODUCT
   ========================================================================== */
.single-product #vv-content{ padding-top: 0; padding-bottom: 96px; }

.vv-product{
	display: grid; grid-template-columns: minmax(300px, 0.6fr) 1fr; gap: 56px; align-items: flex-start;
	padding-top: 48px;
}
/* Everything hooked onto `woocommerce_after_single_product_summary`
   (the accordion tabs, related/upsell products) is a direct child of this
   grid alongside `.vv-product__gallery` and `.vv-product__summary`. Without
   an explicit column span, CSS grid auto-places a 3rd+ child into column 1
   of a new row — the same narrow track as the sticky gallery — so it
   renders underneath/overlapping the still-pinned gallery image instead of
   spanning full width below both columns. */
.vv-product > *{ grid-column: 1 / -1; }
.vv-product > .vv-product__gallery{ grid-column: 1; }
.vv-product > .vv-product__summary{ grid-column: 2; }

/* Gallery — full-bleed to the right edge, image-forward like the reference
   product pages we studied for this proportion (narrow info rail, large
   near-square photography, no boxed container). */
.vv-product__gallery{ position: sticky; top: 100px; margin-right: calc(-1 * var(--vv-edge, 32px)); }
.woocommerce-product-gallery{ position: relative; }
.woocommerce-product-gallery__wrapper{
	display: grid; grid-template-columns: 1fr; gap: 8px; margin: 0; padding: 0; list-style: none;
}
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image{
	aspect-ratio: 1 / 1; overflow: hidden; background: var(--vv-surface);
}
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image img{
	width: 100%; height: 100%; object-fit: cover; display: block;
}
.woocommerce-product-gallery .flex-control-thumbs{
	display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 8px 0 0; padding: 0; list-style: none;
}
.woocommerce-product-gallery .flex-control-thumbs li img{
	width: 100%; aspect-ratio: 1; object-fit: cover; cursor: pointer; opacity: 0.5;
	border: 0; transition: opacity var(--vv-speed) ease;
}
.woocommerce-product-gallery .flex-control-thumbs li img.flex-active,
.woocommerce-product-gallery .flex-control-thumbs li img:hover{ opacity: 1; }
a.woocommerce-main-image{ display: block; }

/* Summary panel */
.vv-product__summary{ padding-top: 8px; max-width: 420px; }
.vv-product__summary .vv-eyebrow{ margin-bottom: 10px; }
.product_title.entry-title{
	font-family: var(--vv-font-display); font-size: clamp(26px, 3vw, 36px);
	font-weight: 500; margin: 0 0 14px; line-height: 1.2;
}
.vv-product__summary .price{
	font-size: 20px; color: var(--vv-text); display: block; margin: 0 0 20px;
}
.vv-product__summary .price ins{ text-decoration: none; }
.vv-product__summary .price del{ opacity: 0.45; margin-right: 10px; font-size: 16px; }
.woocommerce-product-details__short-description{
	font-size: 14px; line-height: 1.75; color: var(--vv-text-muted); margin: 0 0 28px; padding-bottom: 28px;
	border-bottom: 1px solid var(--vv-border);
}

/* Variations */
table.variations{ width: 100%; margin: 0 0 20px; border: 0; }
table.variations tr{ display: block; margin: 0 0 16px; }
table.variations td, table.variations th{ display: block; border: 0; padding: 0; text-align: left; }
table.variations label{
	display: block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--vv-text-muted); margin: 0 0 8px;
}
.vv-swatches{ display: flex; flex-wrap: wrap; gap: 8px; }
.vv-swatch{
	min-width: 44px; height: 44px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--vv-border); font-size: 13px; cursor: pointer; background: var(--vv-bg);
	transition: border-color var(--vv-speed) ease;
}
.vv-swatch.is-selected, .vv-swatch:hover{ border-color: var(--vv-text); }
.vv-swatch.is-disabled{ opacity: 0.3; text-decoration: line-through; cursor: not-allowed; }
.reset_variations{
	display: inline-block; margin-top: 10px; font-size: 12px; color: var(--vv-text-muted);
	text-decoration: underline;
}
.woocommerce-variation-price .price{ font-size: 18px; margin: 16px 0; }
.woocommerce-variation-availability{ margin-bottom: 16px; }

/* Add to cart row */
.vv-product__summary form.cart{
	display: flex; align-items: stretch; gap: 12px; margin: 0 0 28px; flex-wrap: wrap;
}
.vv-product__summary form.cart .vv-qty{ flex: 0 0 auto; }
.vv-product__summary form.cart .single_add_to_cart_button{
	flex: 1 1 auto; min-width: 200px;
}
.vv-product__meta{ font-size: 12px; color: var(--vv-text-muted); line-height: 2; }
.vv-product__meta a{ color: var(--vv-text); text-decoration: underline; }

/* Tabs */
.woocommerce-tabs{ margin-top: 72px; border-top: 1px solid var(--vv-border); }
.woocommerce-tabs ul.tabs{
	display: flex; gap: 32px; list-style: none; margin: 0; padding: 24px 0 0; border: 0;
}
.woocommerce-tabs ul.tabs li{
	margin: 0; padding: 0; border: 0; background: none;
}
.woocommerce-tabs ul.tabs li a{
	font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--vv-text-muted);
	padding: 0 0 14px; display: inline-block; border-bottom: 2px solid transparent;
}
.woocommerce-tabs ul.tabs li.active a{ color: var(--vv-text); border-bottom-color: var(--vv-text); }
.woocommerce-tabs .panel{ padding: 32px 0 0; max-width: 640px; font-size: 14px; line-height: 1.8; color: var(--vv-text-muted); }
.woocommerce-tabs .panel h2{ font-size: 18px; margin: 0 0 16px; }
table.woocommerce-product-attributes{ width: 100%; border-collapse: collapse; }
table.woocommerce-product-attributes tr{ border-bottom: 1px solid var(--vv-border); }
table.woocommerce-product-attributes th, table.woocommerce-product-attributes td{
	padding: 12px 0; text-align: left; font-size: 13px; font-weight: 400;
}
table.woocommerce-product-attributes th{ width: 200px; color: var(--vv-text-muted); }

/* Reviews */
#reviews .commentlist{ list-style: none; margin: 0; padding: 0; }
#reviews .comment{ padding: 20px 0; border-bottom: 1px solid var(--vv-border); }
#reviews .comment_container{ display: flex; gap: 16px; }
#reviews .comment-text{ flex: 1; }
#reviews .star-rating{ margin-bottom: 6px; }
#reviews .meta{ font-size: 12px; color: var(--vv-text-muted); margin-bottom: 6px; }
#review_form #respond{ margin-top: 32px; }
#review_form .comment-form-rating label{ display: block; font-size: 12px; margin-bottom: 6px; }

/* Related / Upsells */
.related.products, .upsells.products{ margin-top: 96px; }
.related.products > h2, .upsells.products > h2{
	font-family: var(--vv-font-display); font-size: 24px; font-weight: 500; margin: 0 0 32px; text-align: center;
}

/* ==========================================================================
   13.0  WOOCOMMERCE — CART & CHECKOUT
   ========================================================================== */
.woocommerce-cart #vv-content, .woocommerce-checkout #vv-content{ padding: 48px 0 96px; }
.vv-page-title{
	font-family: var(--vv-font-display); font-size: clamp(26px, 3vw, 34px); font-weight: 500;
	margin: 0 0 36px; text-align: center;
}

table.shop_table{ width: 100%; border-collapse: collapse; margin: 0 0 32px; border: 0; }
table.shop_table thead th{
	text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--vv-text-muted); padding: 0 0 16px; border-bottom: 1px solid var(--vv-border); font-weight: 500;
}
table.shop_table tbody td{ padding: 20px 0; border-bottom: 1px solid var(--vv-border); font-size: 13px; vertical-align: middle; }
table.shop_table .product-thumbnail img{ width: 84px; height: 100px; object-fit: cover; border: 1px solid var(--vv-border); }
table.shop_table .product-name a{ color: var(--vv-text); font-weight: 500; }
table.shop_table .product-name .variation{ font-size: 12px; color: var(--vv-text-muted); margin-top: 4px; }
table.shop_table .product-remove a{
	display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
	color: var(--vv-text-muted); border: 1px solid var(--vv-border); border-radius: 50%; font-size: 14px;
}
table.shop_table td.actions{ padding-top: 24px; }
.coupon{ display: flex; gap: 10px; align-items: center; }
.coupon .input-text{ max-width: 220px; }

.cart-collaterals{ display: flex; justify-content: flex-end; }
.cart_totals{ width: 100%; max-width: 400px; border: 1px solid var(--vv-border); padding: 28px; }
.cart_totals h2{ font-size: 16px; font-weight: 500; margin: 0 0 20px; }
.cart_totals table{ width: 100%; border-collapse: collapse; }
.cart_totals table th, .cart_totals table td{
	padding: 12px 0; border-bottom: 1px solid var(--vv-border); font-size: 13px; text-align: left; font-weight: 400;
}
.cart_totals table tr:last-child th, .cart_totals table tr:last-child td{ border-bottom: 0; font-weight: 600; font-size: 15px; }
.wc-proceed-to-checkout{ margin-top: 20px; }
.wc-proceed-to-checkout a{ width: 100%; }

/* Checkout */
.woocommerce-checkout .vv-checkout-grid{
	display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: flex-start;
}
.woocommerce-billing-fields h3, #order_review_heading{
	font-size: 16px; font-weight: 500; margin: 0 0 24px; padding-bottom: 12px; border-bottom: 1px solid var(--vv-border);
}
.woocommerce-checkout .form-row{ margin: 0 0 16px; }
.woocommerce-checkout .form-row label{
	display: block; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
	color: var(--vv-text-muted); margin: 0 0 6px;
}
.woocommerce-checkout .form-row-first, .woocommerce-checkout .form-row-last{ width: 48%; display: inline-block; }
.woocommerce-checkout .form-row-last{ float: right; }
#order_review{ border: 1px solid var(--vv-border); padding: 28px; }
#order_review table.shop_table td, #order_review table.shop_table th{ padding: 14px 0; }
.woocommerce-checkout-payment{ margin-top: 20px; background: var(--vv-surface) !important; border: 1px solid var(--vv-border); }
.woocommerce-checkout-payment ul.payment_methods{ padding: 20px !important; }
.woocommerce-checkout-payment .payment_box{ background: var(--vv-bg) !important; font-size: 13px; }
#place_order{ width: 100%; margin-top: 16px; }

.woocommerce-info, .woocommerce-message, .woocommerce-error, .woocommerce-noreviews{
	border-top-color: var(--vv-text) !important;
	background: var(--vv-surface); font-size: 13px; padding: 16px 20px !important; list-style: none;
}
.woocommerce-message::before, .woocommerce-info::before{ display: none !important; }
.woocommerce-error{ border-top-color: var(--vv-error) !important; }

/* Cart drawer — slide-in panel from the right (structural reference: a
   fixed-width white drawer rather than a dropdown or full page reload),
   populated with WooCommerce's own mini-cart template so add/update/remove
   stay wired to WooCommerce's existing AJAX + fragment refresh. */
.vv-cart-drawer-backdrop{
	position: fixed; inset: 0; background: rgba(17,17,17,0.4); z-index: 950;
	opacity: 0; visibility: hidden; transition: opacity var(--vv-speed) var(--vv-ease);
}
.vv-cart-drawer-backdrop.is-open{ opacity: 1; visibility: visible; }
body.vv-cart-drawer-open{ overflow: hidden; }
.vv-cart-drawer{
	position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 90vw;
	background: var(--vv-bg); z-index: 960; display: flex; flex-direction: column;
	transform: translateX(100%); transition: transform var(--vv-speed) var(--vv-ease);
	box-shadow: -8px 0 24px rgba(0,0,0,0.08);
}
.vv-cart-drawer.is-open{ transform: translateX(0); }
.vv-cart-drawer__header{
	display: flex; align-items: center; justify-content: space-between;
	padding: 20px 24px; border-bottom: 1px solid var(--vv-border); flex: 0 0 auto;
}
.vv-cart-drawer__title{
	font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
	display: flex; align-items: center; gap: 8px;
}
.vv-cart-drawer__title .vv-cart-count{ position: static; }
.vv-cart-drawer__close{
	background: none; border: 0; font-size: 22px; line-height: 1; color: var(--vv-text); cursor: pointer;
}
.vv-cart-drawer__body{ flex: 1 1 auto; overflow-y: auto; padding: 20px 24px; }

.vv-cart-drawer .woocommerce-mini-cart-items{ list-style: none; margin: 0; padding: 0; }
.vv-cart-drawer .woocommerce-mini-cart-item{
	position: relative; padding: 18px 0; border-bottom: 1px solid var(--vv-border);
}
.vv-cart-drawer .woocommerce-mini-cart-item:first-child{ padding-top: 0; }
.vv-cart-drawer .mini_cart_item > a:not(.remove){
	display: flex; align-items: flex-start; gap: 14px; padding-right: 24px;
}
.vv-cart-drawer .mini_cart_item > a:not(.remove) img{ width: 64px; height: 76px; object-fit: cover; flex: 0 0 auto; }
.vv-cart-drawer .mini_cart_item > a:not(.remove){ font-size: 13px; font-weight: 500; color: var(--vv-text); line-height: 1.4; }
.vv-cart-drawer .woocommerce-mini-cart-item a.remove{
	position: absolute; top: 18px; right: 0; color: var(--vv-text-muted); font-size: 16px; line-height: 1;
}
.vv-cart-drawer .mini_cart_item .quantity{
	font-size: 12px; color: var(--vv-text-muted); display: block; margin: 6px 0 0 78px;
}
.vv-cart-drawer .mini_cart_item .variation{ font-size: 12px; color: var(--vv-text-muted); margin: 4px 0 0 78px; }
.vv-cart-drawer .mini_cart_item .variation p{ margin: 0; }
.vv-cart-drawer .total{ margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--vv-border); display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; }
.vv-cart-drawer .woocommerce-mini-cart__buttons{ display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.vv-cart-drawer .woocommerce-mini-cart__buttons a{ width: 100%; text-align: center; }
.vv-cart-drawer .woocommerce-mini-cart__empty-message{ font-size: 13px; color: var(--vv-text-muted); text-align: center; padding: 40px 0; list-style: none; }

/* ==========================================================================
   14.0  WOOCOMMERCE — MY ACCOUNT
   Reduced-chrome dashboard: a slim left sidebar nav beside the content,
   which renders as clean bordered cards — matching the minimal account
   dashboard structure we studied (a thin nav rail + card content), with
   Saint Steven's own account content throughout.
   ========================================================================== */
.woocommerce-account #vv-content.vv-container--narrow{ max-width: var(--vv-container); padding: 48px 0 96px; }
/* WooCommerce's `[woocommerce_my_account]` shortcode always wraps its own
   output in a `<div class="woocommerce">` (WC_Shortcodes::shortcode_wrapper),
   so the nav + content are grandchildren of `.vv-page__content`, not direct
   children — the grid has to live one level deeper, on that wrapper, or it
   only ever sees a single child and collapses to the first column's width. */
.woocommerce-account .vv-page__content .woocommerce{
	display: grid; grid-template-columns: 180px 1fr; gap: 56px; align-items: start;
}
.woocommerce-MyAccount-navigation{ float: none; width: auto; margin-bottom: 0; }
.woocommerce-MyAccount-navigation ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; border-bottom: 0; }
.woocommerce-MyAccount-navigation-link{ padding: 0; }
.woocommerce-MyAccount-navigation-link a{
	display: block; padding: 8px 0; font-size: 13px; color: var(--vv-text-muted);
}
.woocommerce-MyAccount-navigation-link.is-active a, .woocommerce-MyAccount-navigation-link a:hover{ color: var(--vv-text); font-weight: 600; }
.woocommerce-MyAccount-navigation-link--customer-logout{ margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--vv-border); }
.woocommerce-MyAccount-content{ float: none; width: auto; max-width: none; }
.woocommerce-MyAccount-content > p:first-child{
	background: var(--vv-bg); border: 1px solid var(--vv-border); border-radius: var(--vv-radius-soft);
	padding: 24px; margin: 0 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
}

.woocommerce-MyAccount-content .woocommerce-form-row,
.vv-account-card{
	background: var(--vv-bg); border: 1px solid var(--vv-border); border-radius: var(--vv-radius-soft);
	padding: 16px 18px 14px; margin: 0 0 14px;
}
.woocommerce-MyAccount-content .woocommerce-form-row label{
	display: block; font-size: 11px; color: var(--vv-text-muted); margin: 0 0 4px; text-transform: none; letter-spacing: 0;
}
.woocommerce-MyAccount-content .woocommerce-form-row .input-text{
	border: 0; padding: 0; background: transparent; font-size: 15px; width: 100%;
}
.woocommerce-MyAccount-content fieldset{ border: 0; padding: 0; margin: 28px 0 0; }
.woocommerce-MyAccount-content fieldset legend{ font-size: 16px; font-weight: 600; padding: 0 0 14px; }

.woocommerce-orders-table{ width: 100%; border-collapse: collapse; }
.woocommerce-orders-table thead th{
	text-align: left; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
	color: var(--vv-text-muted); padding: 0 0 14px; border-bottom: 1px solid var(--vv-border);
}
.woocommerce-orders-table tbody td{ padding: 16px 0; border-bottom: 1px solid var(--vv-border); font-size: 13px; }
.woocommerce-orders-table .button{
	padding: 8px 16px; font-size: 11px; border: 1px solid var(--vv-border); border-radius: 999px; background: transparent; color: var(--vv-text);
}
.woocommerce-orders-table .button:hover{ background: var(--vv-text); color: var(--vv-bg); border-color: var(--vv-text); }
mark.order-status{ background: none; padding: 0; font-size: 13px; color: var(--vv-text-muted); }

.woocommerce-Addresses{ display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.woocommerce-Address{ border: 1px solid var(--vv-border); padding: 24px; border-radius: var(--vv-radius-soft); }
.woocommerce-Address-title{ display: flex; justify-content: space-between; align-items: center; margin: 0 0 12px; }
.woocommerce-Address-title h3{ font-size: 14px; margin: 0; }
.woocommerce-Address address{ font-style: normal; font-size: 13px; line-height: 1.8; color: var(--vv-text-muted); }

.woocommerce-account .woocommerce-Button,
.woocommerce-account button[type="submit"]{
	background: var(--vv-text); color: var(--vv-bg); border: 0; border-radius: 999px;
	padding: 14px 30px; font-size: 13px; font-weight: 500; letter-spacing: 0.02em; cursor: pointer;
}
.woocommerce-account .woocommerce-Button:hover{ opacity: 0.85; }

/* ==========================================================================
   15.0  WIDGETS & SIDEBAR
   ========================================================================== */
.vv-sidebar{ display: flex; flex-direction: column; gap: 40px; }
.widget{ margin: 0; }
.widget-title, .widget > h2{
	font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600;
	margin: 0 0 18px; padding-bottom: 12px; border-bottom: 1px solid var(--vv-border);
}
.widget ul{ list-style: none; margin: 0; padding: 0; }
.widget ul li{ padding: 8px 0; font-size: 13px; color: var(--vv-text-muted); }
.widget ul li a{ color: inherit; }
.widget ul li a:hover{ color: var(--vv-text); }
.widget_search .search-form{ display: flex; border: 1px solid var(--vv-border); }
.widget_search .search-field{ border: 0; flex: 1; padding: 10px 12px; }
.widget_search .search-submit{ border: 0; background: none; padding: 0 14px; cursor: pointer; }
.widget_product_search .search-field{ border-radius: 0; }
.widget_price_filter .price_slider{ margin-bottom: 20px; }
.widget_price_filter .price_slider_amount{ font-size: 12px; color: var(--vv-text-muted); }
.widget_price_filter .button{ float: right; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--vv-border); background: transparent; }
.widget_shopping_cart_content .cart_list li{ display: flex; gap: 12px; align-items: flex-start; border-bottom: 1px solid var(--vv-border); padding: 12px 0; }
.widget_shopping_cart_content .cart_list li img{ width: 50px; height: 60px; object-fit: cover; }
.widget_shopping_cart_content .total{ font-weight: 600; padding-top: 14px; border-top: 1px solid var(--vv-border); }
.tagcloud a{
	display: inline-block; margin: 0 6px 6px 0; padding: 6px 12px; border: 1px solid var(--vv-border);
	font-size: 12px !important; color: var(--vv-text-muted);
}
.widget_calendar table{ width: 100%; font-size: 12px; border-collapse: collapse; }
.widget_calendar caption{ font-size: 12px; padding-bottom: 8px; }
.widget_calendar td, .widget_calendar th{ text-align: center; padding: 6px 2px; }

/* ==========================================================================
   16.0  UTILITIES
   ========================================================================== */
.vv-hide{ display: none !important; }
.vv-sr-only{
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.vv-mt-0{ margin-top: 0 !important; } .vv-mb-0{ margin-bottom: 0 !important; }
.vv-mt-sm{ margin-top: var(--vv-space-sm) !important; } .vv-mb-sm{ margin-bottom: var(--vv-space-sm) !important; }
.vv-mt-md{ margin-top: var(--vv-space-md) !important; } .vv-mb-md{ margin-bottom: var(--vv-space-md) !important; }
.vv-mt-lg{ margin-top: var(--vv-space-lg) !important; } .vv-mb-lg{ margin-bottom: var(--vv-space-lg) !important; }
.vv-text-center{ text-align: center !important; }
.vv-text-muted{ color: var(--vv-text-muted) !important; }
.vv-flex{ display: flex !important; } .vv-flex-center{ display: flex !important; align-items: center; justify-content: center; }
.vv-gap-sm{ gap: var(--vv-space-sm) !important; } .vv-gap-md{ gap: var(--vv-space-md) !important; }
.vv-divider{ border: 0; border-top: 1px solid var(--vv-border); margin: var(--vv-space-lg) 0; }
.vv-badge{
	display: inline-flex; align-items: center; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
	padding: 4px 9px; border: 1px solid var(--vv-border); border-radius: 999px; color: var(--vv-text-muted);
}
.vv-skeleton{
	background: linear-gradient(90deg, var(--vv-surface) 25%, var(--vv-border) 37%, var(--vv-surface) 63%);
	background-size: 400% 100%; animation: vv-shimmer 1.4s ease infinite;
}
@keyframes vv-shimmer{ 0%{ background-position: 100% 50%; } 100%{ background-position: 0 50%; } }

/* Loading / AJAX add-to-cart states */
a.added_to_cart{
	display: inline-block; margin-left: 10px; font-size: 12px; text-decoration: underline; color: var(--vv-text);
}
.woocommerce a.button.loading, .single_add_to_cart_button.loading{ opacity: 0.6; pointer-events: none; position: relative; }
.blockUI.blockOverlay{ opacity: 0.4 !important; }

/* ==========================================================================
   17.0  RESPONSIVE
   ========================================================================== */

/* ---- Desktop → small desktop / tablet landscape (<=1024px) ---- */
@media (max-width: 1024px){
	.vv-container{ padding: 0 24px; }
	.vv-shop-full{ --vv-edge: 24px; }
	.vv-cats{ grid-template-columns: repeat(2, 1fr); }
	.woocommerce ul.products{ grid-template-columns: repeat(3, 1fr) !important; }
	.woocommerce ul.products li.product:nth-child(4n) .vv-product-card{ border-right: 1px solid var(--vv-border); }
	.woocommerce ul.products li.product:nth-child(3n) .vv-product-card{ border-right: 0; }
	.vv-product{ grid-template-columns: 1fr; gap: 32px; padding-top: 32px; }
	.vv-product > .vv-product__gallery, .vv-product > .vv-product__summary{ grid-column: 1; }
	.vv-product__gallery{ position: static; margin-right: 0; }
	.vv-product__summary{ max-width: none; }
	.woocommerce-checkout .vv-checkout-grid{ grid-template-columns: 1fr; gap: 40px; }
	.vv-split{ grid-template-columns: 1fr; }
}

/* ---- Tablet portrait / large phones (<=768px) ---- */
@media (max-width: 768px){
	.vv-container{ padding: 0 20px; }
	.vv-section{ padding: var(--vv-space-lg) 0; }
	.vv-section--tight{ padding: var(--vv-space-md) 0; }

	/* Header + nav collapses to a hamburger drawer */
	.vv-menu-toggle{ display: flex; }
	.vv-nav{ display: none; }
	.vv-nav.is-open{
		display: flex; flex-direction: column; position: fixed; inset: var(--vv-header-height) 0 0 0;
		background: var(--vv-bg); padding: 32px 24px; gap: 4px; z-index: 90; overflow-y: auto;
	}
	.vv-nav.is-open a{ padding: 16px 0; border-bottom: 1px solid var(--vv-border); font-size: 15px; }
	.vv-header__logo{ font-size: 18px; }
	.vv-account-popover{ right: -8px; }

	.vv-hero{ height: 62vh; }
	.vv-shop-full{ --vv-edge: 20px; }
	.vv-cats{ grid-template-columns: 1fr; gap: 16px; }
	.woocommerce ul.products{ grid-template-columns: repeat(2, 1fr) !important; gap: 0 !important; }
	.woocommerce ul.products li.product:nth-child(3n) .vv-product-card{ border-right: 1px solid var(--vv-border); }
	.woocommerce ul.products li.product:nth-child(2n) .vv-product-card{ border-right: 0; }
	.vv-shop-header{ flex-direction: column; align-items: flex-start; gap: 12px; }

	.vv-footer__bottom{ flex-direction: column; gap: 12px; align-items: flex-start; }

	.woocommerce-Addresses{ grid-template-columns: 1fr; }
	.woocommerce-account .vv-page__content .woocommerce{ grid-template-columns: 1fr; gap: 24px; }
	.woocommerce-MyAccount-navigation ul{ flex-direction: row; gap: 18px; overflow-x: auto; flex-wrap: nowrap; border-bottom: 1px solid var(--vv-border); padding-bottom: 12px; }

	table.shop_table thead{ display: none; }
	table.shop_table tbody tr{ display: block; padding: 16px 0; border-bottom: 1px solid var(--vv-border); }
	table.shop_table tbody td{ display: flex; justify-content: space-between; align-items: center; border: 0; padding: 6px 0; }
	table.shop_table tbody td::before{
		content: attr(data-title); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--vv-text-muted); margin-right: 12px;
	}
	.cart_totals{ max-width: none; }
	.cart-collaterals{ justify-content: stretch; }

	.woocommerce-checkout .form-row-first, .woocommerce-checkout .form-row-last{ width: 100%; float: none; }

	.woocommerce-tabs ul.tabs{ gap: 20px; overflow-x: auto; flex-wrap: nowrap; }
}

/* ---- Phones (<=480px) ---- */
@media (max-width: 480px){
	.vv-container{ padding: 0 16px; }
	.vv-shop-full{ --vv-edge: 16px; }
	h1{ font-size: 28px; }
	.vv-hero{ height: 54vh; }
	.woocommerce ul.products{ grid-template-columns: 1fr 1fr !important; gap: 0 !important; }
	.vv-product-card__quick{ display: none; }
	.vv-btn{ padding: 12px 22px; font-size: 12px; }
	.vv-product__summary form.cart{ flex-direction: column; }
	.vv-product__summary form.cart .single_add_to_cart_button{ min-width: 0; width: 100%; }
	.woocommerce-tabs ul.tabs{ gap: 16px; }
}

/* ---- Fine pointers / hover-capable devices only ----
   (keeps hover-reveal quick-add + image swap from sticking on touch) */
@media (hover: none){
	.vv-product-card__quick{ opacity: 1; transform: none; position: static; margin-top: 10px; }
	.vv-hover-img{ display: none; }
}

/* ==========================================================================
   18.0  BLOG, PAGES & COMMENTS
   ========================================================================== */
.vv-grid--blog{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 28px; margin: 0 0 48px; }
.vv-post-card__media{ display: block; aspect-ratio: 4/3; overflow: hidden; margin-bottom: 16px; background: var(--vv-surface); }
.vv-post-card__media img{ width: 100%; height: 100%; object-fit: cover; }
.vv-post-card__title{ font-size: 19px; margin: 8px 0 10px; }
.vv-post-card__title a{ color: var(--vv-text); }
.vv-post-card__excerpt{ font-size: 14px; color: var(--vv-text-muted); line-height: 1.7; }
.vv-post-card__link{ display: inline-block; margin-top: 10px; font-size: 12px; text-decoration: underline; }

.vv-post-nav{ margin: 56px 0; padding-top: 24px; border-top: 1px solid var(--vv-border); font-size: 13px; }
.vv-post-nav a{ color: var(--vv-text); }

.vv-page__thumb{ margin: 0 0 32px; }
.vv-page__thumb img{ width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.vv-page__content{ font-size: 15px; line-height: 1.85; color: var(--vv-text-muted); }
.vv-page__content h2{ font-size: 22px; margin: 40px 0 16px; color: var(--vv-text); }
.vv-page__content p{ margin: 0 0 20px; }
.vv-page__content a{ color: var(--vv-text); text-decoration: underline; }
.vv-page__content img{ max-width: 100%; height: auto; }

.vv-pagination{ margin-top: 56px; text-align: center; }
.vv-pagination__list{ display: inline-flex; list-style: none; gap: 4px; margin: 0; padding: 0; }
.vv-pagination__list li{ margin: 0; }
.vv-pagination__list a, .vv-pagination__list span{
	display: flex; align-items: center; justify-content: center; width: 38px; height: 38px;
	border: 1px solid var(--vv-border); font-size: 12px;
}
.vv-pagination__list .current{ background: var(--vv-text); color: var(--vv-bg); }

.vv-search-form{ display: flex; border: 1px solid var(--vv-border); }
.vv-search-form input[type="search"]{ border: 0; flex: 1; }
.vv-search-form button{ border: 0; border-left: 1px solid var(--vv-border); border-radius: 0; }

.vv-comments{ margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--vv-border); }
.vv-comments__title{ font-size: 20px; margin: 0 0 24px; }
.vv-comments__list{ list-style: none; margin: 0; padding: 0; }
.vv-comments__list .comment{ padding: 20px 0; border-bottom: 1px solid var(--vv-border); }
.vv-comments__list .comment-author img{ border-radius: 50%; margin-right: 10px; vertical-align: middle; }
.vv-comments__list .comment-metadata{ font-size: 12px; color: var(--vv-text-muted); }
.comment-form label{ display: block; font-size: 12px; margin: 0 0 6px; color: var(--vv-text-muted); }
.comment-form p{ margin: 0 0 16px; }

@media (max-width: 1024px){
	.vv-grid--blog{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
	.vv-grid--blog{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   19.0  WOOCOMMERCE BUTTON BRIDGE & SHOP LAYOUT
   ========================================================================== */
/* Map every WooCommerce-generated button to the .vv-btn look so add-to-cart,
   checkout, coupon-apply, my-account and widget buttons all match without
   needing the class added by hand everywhere WooCommerce core prints one. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button{
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 15px 32px; background: var(--vv-accent); color: var(--vv-accent-contrast);
	border: 1px solid var(--vv-accent); border-radius: var(--vv-radius); font-size: 12px;
	font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
	transition: background var(--vv-speed) var(--vv-ease), color var(--vv-speed) var(--vv-ease), opacity var(--vv-speed) var(--vv-ease);
	white-space: nowrap; cursor: pointer;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover{
	background: #333; color: var(--vv-accent-contrast); border-color: #333;
}
.woocommerce a.button.disabled, .woocommerce button.button.disabled{ opacity: 0.45; pointer-events: none; }

/* Quick-add button inside the product card: full-width pill, smaller type */
.vv-product-card__quick .button,
.vv-product-card__quick-btn{
	width: 100%; border-radius: 999px !important; padding: 12px 16px !important; font-size: 11px !important;
	background: var(--vv-bg) !important; color: var(--vv-text) !important; border: 1px solid var(--vv-border-strong) !important;
	box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
.vv-product-card__quick .button:hover, .vv-product-card__quick-btn:hover{
	background: var(--vv-text) !important; color: var(--vv-bg) !important; border-color: var(--vv-text) !important;
}
.vv-product-card__quick .added_to_cart{ display: block; text-align: center; margin: 8px 0 0; font-size: 11px; }
.vv-product-card__quick .button.loading::after{ content: ''; }

/* Shop main + sidebar two-column layout */
.vv-shop-layout--with-sidebar{ display: grid; grid-template-columns: 1fr 260px; gap: 48px; align-items: flex-start; }
.vv-shop-layout__sidebar{ position: sticky; top: 100px; }
@media (max-width: 1024px){
	.vv-shop-layout--with-sidebar{ grid-template-columns: 1fr; }
	.vv-shop-layout__sidebar{ position: static; order: -1; }
}

/* ==========================================================================
   20.0  HEADER SCROLL STATE & INLINE SEARCH OVERLAY
   ========================================================================== */
.vv-header{ transition: box-shadow var(--vv-speed) ease; }
.vv-header.is-scrolled{ box-shadow: 0 1px 0 var(--vv-border); }

.vv-inline-search{
	position: fixed; inset: 0; background: rgba(17,17,17,0.4); z-index: 700;
	display: flex; align-items: flex-start; justify-content: center; padding-top: 14vh;
}
.vv-inline-search__card{
	position: relative; width: 100%; max-width: 520px; margin: 0 20px; background: var(--vv-bg);
	border: 1px solid var(--vv-border); box-shadow: 0 12px 32px rgba(0,0,0,0.12); padding: 8px 20px;
}
.vv-inline-search__close{
	position: absolute; top: 10px; right: 14px; background: none; border: 0; font-size: 20px;
	line-height: 1; color: var(--vv-text-muted); cursor: pointer;
}
.vv-inline-search .vv-search-form{
	display: flex; align-items: center; gap: 10px; width: 100%; border: 0; padding: 14px 0;
}
.vv-inline-search .vv-search-form svg{ flex: 0 0 auto; color: var(--vv-text-muted); }
.vv-inline-search .vv-search-form input{ flex: 1; font-size: 15px; padding: 4px 0; text-align: left; border: 0; }

body.vv-nav-open, body.vv-search-open{ overflow: hidden; }

/* ==========================================================================
   21.0  THIRD-PARTY PLUGIN PATCHES
   ========================================================================== */
/* "Variation Swatches for WooCommerce" renders text-label attributes (e.g.
   Size) using the same DOM as color/image swatches. When an attribute's
   swatch style is set to "Rounded", the plugin's own CSS forces
   border-radius:100% and a fixed 30x30 circle on every swatch type,
   including text buttons — multi-character labels like "MEDIUM" or
   "X-LARGE" then overflow the circle and overlap their neighbours.
   Force text/button-type swatches back to a pill shape regardless of the
   attribute's configured style, matching the theme's own .vv-swatch look. */
.woo-variation-swatches .variable-item.button-variable-item:not(.radio-variable-item){
	border-radius: 999px !important;
	width: auto !important;
	height: auto !important;
	min-width: 44px !important;
	padding: 6px 14px !important;
	white-space: nowrap !important;
}
.woo-variation-swatches .variable-item.button-variable-item:not(.radio-variable-item) .variable-item-span{
	border-radius: 999px !important;
	position: static !important;
	width: auto !important;
	height: auto !important;
	line-height: normal !important;
}