/*!
 * Varestone — main stylesheet ("Ivory Noir")
 *
 * Mobile-first. Breakpoints: 600px (tablet), 1024px (desktop), 1280px (wide).
 * Loads AFTER WooCommerce's general/layout/smallscreen CSS and overrides it;
 * nothing from WooCommerce or any payment gateway is hidden here.
 *
 * Specificity policy
 *   - Element defaults use :where() (zero specificity) so plugin/block CSS wins.
 *   - Theme components use single classes (.vs-*).
 *   - WooCommerce overrides are prefixed with body.vs-theme (".vs-theme") to match
 *     or exceed WooCommerce's own selectors. A few !important flags are used only to
 *     neutralise WooCommerce float/width grid rules and are commented in place.
 *   - display is never set on gateway / place-order / block checkout buttons.
 *
 * Contents
 *   01 Tokens
 *   02 Reset & base typography
 *   03 Accessibility (screen-reader text, skip link, focus)
 *   04 Layout primitives (container, sections, heads, eyebrow)
 *   05 Buttons & links
 *   06 Forms (base fields, search form)
 *   07 Chips, badges, icons
 *   08 Announcement bar
 *   09 Header (row, logo, icons, bag badge, desktop nav + dropdowns)
 *   10 Search overlay
 *   11 Mobile drawer
 *   12 Footer
 *   13 Front page sections (hero, trust, needs, index, new, story, rail, gifts, journal, newsletter)
 *   14 Pages, prose & WordPress content
 *   15 Posts: journal cards, article, post nav, pagination
 *   16 Comments
 *   17 Search results, empty state, 404
 *   18 WooCommerce: buttons (classic)
 *   19 WooCommerce: breadcrumb, archive header, toolbar, pagination
 *   20 WooCommerce: product grid & card
 *   21 WooCommerce: single product (layout, gallery, summary, form.cart, variations)
 *   22 WooCommerce: tabs, attributes, reviews, related/upsells
 *   23 WooCommerce: notices (classic)
 *   24 WooCommerce: tables, forms, select2, my account, order details
 *   25 WooCommerce Blocks: cart & checkout
 *   26 WooCommerce Blocks: notices & snackbar
 *   27 Third-party light touches (WPForms, store notice, Elementor pages)
 *   28 Reduced motion
 */

/* =============================================================================
   01 Tokens
   ========================================================================== */

:root {
	/* Palette */
	--vs-ivory: #F6F1E8;
	--vs-paper: #FBF8F2;
	--vs-tile: #ECE3D3;
	--vs-white: #FFFFFF;
	--vs-line: #E2D8C6;
	--vs-ink: #1E1B16;
	--vs-ink-2: #5E574C;
	--vs-gold: #A7844E;
	--vs-gold-text: #7D5F2F;
	--vs-gold-on-dark: #C9A86A;
	--vs-muted-on-dark: #CFC6B6;
	--vs-field-border: #8F826C;
	--vs-sale: #8C2F1E;

	/* Supporting shades (derived from the concepts) */
	--vs-frame: #D8C9AE;          /* inset frame on light tiles */
	--vs-frame-dark: #4A4234;     /* inset frame on ink panels */
	--vs-line-dark: #5A5246;      /* outlines on ink */
	--vs-ring-1: #2E2A23;         /* hero rings */
	--vs-ring-2: #39342B;
	--vs-ink-hover: #3A342B;
	--vs-gold-soft: #E2C998;      /* accent italic on ink */

	/* Type */
	--vs-font-display: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
	--vs-font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--vs-micro-size: 12px;
	--vs-micro-track: 0.18em;

	/* Layout */
	--vs-max: 1280px;
	--vs-gutter: clamp(16px, 4vw, 48px);
	--vs-section-y: clamp(64px, 8vw, 112px);
	--vs-header-h: 64px;          /* approximate sticky header height (offsets) */
	--vs-admin-bar: 0px;          /* WP admin bar offset for sticky elements */
	--vs-grid-gap: 12px;
	--vs-grid-row-gap: 32px;

	/* Motion */
	--vs-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--vs-dur: 260ms;

	/* Focus */
	--vs-focus: var(--vs-gold-text);

	/* Select chevron (ink) */
	--vs-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%231E1B16' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
}

@media (min-width: 600px) {
	:root {
		--vs-grid-gap: 24px;
		--vs-grid-row-gap: 40px;
	}
}

@media (min-width: 1024px) {
	:root {
		--vs-header-h: 140px;
		--vs-grid-row-gap: 48px;
	}
}

/* WP admin bar: fixed at >=783px (32px) and 601–782px (46px); scrolls away below 601px. */
@media (min-width: 601px) {
	.admin-bar {
		--vs-admin-bar: 46px;
	}
}

@media (min-width: 783px) {
	.admin-bar {
		--vs-admin-bar: 32px;
	}
}

/* =============================================================================
   02 Reset & base typography
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: calc(var(--vs-admin-bar) + var(--vs-header-h) + 16px);
}

body {
	margin: 0;
	background: var(--vs-ivory);
	color: var(--vs-ink);
	font-family: var(--vs-font-ui);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: clip; /* safety net only — layouts are built not to overflow at 360px */
}

body.vs-drawer-is-open {
	overflow: hidden;
}

:where(h1, h2, h3, h4, h5, h6) {
	margin: 0 0 0.5em;
	color: inherit;
	font-weight: 500;
	line-height: 1.15;
	text-wrap: balance;
}

:where(h1, h2, h3) {
	font-family: var(--vs-font-display);
	font-weight: 500;
	letter-spacing: -0.005em;
}

:where(h1) { font-size: clamp(40px, 5vw, 64px); line-height: 1.05; }
:where(h2) { font-size: clamp(30px, 3.4vw, 44px); }
:where(h3) { font-size: clamp(24px, 2.4vw, 30px); }

:where(h4, h5, h6) {
	font-family: var(--vs-font-ui);
	font-weight: 600;
	letter-spacing: 0;
}

:where(h4) { font-size: 18px; }
:where(h5) { font-size: 16px; }
:where(h6) { font-size: 14px; }

:where(p, ul, ol, dl, blockquote, figure, table, pre) {
	margin: 0 0 1em;
}

:where(img, svg, video, canvas, iframe, embed, object) {
	max-width: 100%;
}

:where(img, video) {
	height: auto;
}

:where(img) {
	border-style: none;
	vertical-align: middle;
}

:where(a) {
	color: var(--vs-ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color 0.2s ease, opacity 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

:where(a:hover) {
	color: var(--vs-gold-text);
}

:where(hr) {
	height: 0;
	margin: 2em 0;
	border: 0;
	border-top: 1px solid var(--vs-line);
}

:where(small) {
	font-size: 0.8125em;
}

:where(strong, b) {
	font-weight: 600;
}

:where(button) {
	font: inherit;
	color: inherit;
}

:where(table) {
	width: 100%;
	border-collapse: collapse;
}

:where(code, kbd, samp, pre) {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	font-size: 0.9em;
}

::selection {
	background: var(--vs-ink);
	color: var(--vs-ivory);
}

/* Overlays that JS toggles with [hidden]. */
.vs-drawer[hidden],
.vs-search[hidden],
.vs-drawer .sub-menu[hidden] {
	display: none;
}

/* =============================================================================
   03 Accessibility
   ========================================================================== */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	z-index: 100000;
	top: 8px;
	left: 8px;
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
	white-space: normal;
}

.vs-skip-link.screen-reader-text:focus {
	position: fixed !important;
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 0 24px;
	background: var(--vs-ink);
	color: var(--vs-ivory);
	font-size: var(--vs-micro-size);
	font-weight: 500;
	letter-spacing: var(--vs-micro-track);
	text-transform: uppercase;
	text-decoration: none;
	outline: 2px solid var(--vs-gold-on-dark);
	outline-offset: 2px;
}

:focus-visible {
	outline: 2px solid var(--vs-focus);
	outline-offset: 3px;
}

.vs-section--dark,
.vs-announcement,
.vs-hero,
.vs-story__panel,
.vs-theme .wc-block-components-notice-snackbar-list,
.vs-theme .woocommerce-store-notice,
.vs-theme p.demo_store {
	--vs-focus: var(--vs-gold-on-dark);
}

/* Skip-link target (#vs-content / main have tabindex=-1). */
.vs-content:focus,
.vs-main:focus {
	outline: none;
}

.vs-content {
	display: block;
	min-width: 0;
}

/* =============================================================================
   04 Layout primitives
   ========================================================================== */

.vs-container {
	width: 100%;
	max-width: var(--vs-max);
	margin-inline: auto;
	padding-inline: var(--vs-gutter);
}

.vs-container--narrow {
	max-width: calc(760px + 2 * var(--vs-gutter));
}

.vs-container--article {
	max-width: calc(720px + 2 * var(--vs-gutter));
}

.vs-main {
	display: block;
	min-width: 0;
}

.vs-section {
	padding-block: var(--vs-section-y);
}

.vs-section--paper {
	background: var(--vs-paper);
}

.vs-section--dark {
	background: var(--vs-ink);
	color: var(--vs-ivory);
}

.vs-section--dark :where(a) {
	color: var(--vs-ivory);
}

.vs-section--tight {
	padding-block: 40px 0;
}

.vs-section__head {
	margin-bottom: clamp(32px, 4vw, 48px);
}

.vs-section__head--split {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px 24px;
}

.vs-section__heading {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.vs-section__head--center {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	max-width: 760px;
	margin-inline: auto;
	text-align: center;
}

.vs-section__title {
	margin: 0;
	font-family: var(--vs-font-display);
	font-size: clamp(36px, 4vw, 56px);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -0.005em;
	text-wrap: balance;
}

.vs-section__text {
	max-width: 520px;
	margin: 0;
	color: var(--vs-ink-2);
	font-size: 16px;
	line-height: 1.7;
}

.vs-section--dark .vs-section__text {
	color: var(--vs-muted-on-dark);
}

.vs-eyebrow {
	margin: 0;
	color: var(--vs-gold-text);
	font-family: var(--vs-font-ui);
	font-size: var(--vs-micro-size);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.vs-eyebrow--on-dark,
.vs-section--dark .vs-eyebrow {
	color: var(--vs-gold-on-dark);
}

/* =============================================================================
   05 Buttons & links
   ========================================================================== */

.vs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	margin: 0;
	padding: 12px 32px;
	border: 1px solid transparent;
	border-radius: 0;
	background: transparent;
	color: var(--vs-ink);
	font-family: var(--vs-font-ui);
	font-size: var(--vs-micro-size);
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: var(--vs-micro-track);
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.vs-btn--primary {
	border-color: var(--vs-ink);
	background: var(--vs-ink);
	color: var(--vs-ivory);
}

.vs-btn--primary:hover {
	border-color: var(--vs-ink-hover);
	background: var(--vs-ink-hover);
	color: var(--vs-ivory);
}

.vs-btn--ghost {
	border-color: var(--vs-ink);
	background: transparent;
	color: var(--vs-ink);
}

.vs-btn--ghost:hover {
	background: var(--vs-ink);
	color: var(--vs-ivory);
}

.vs-btn--primary.vs-btn--on-dark {
	border-color: var(--vs-ivory);
	background: var(--vs-ivory);
	color: var(--vs-ink);
}

.vs-btn--primary.vs-btn--on-dark:hover {
	border-color: var(--vs-white);
	background: var(--vs-white);
	color: var(--vs-ink);
}

.vs-btn--ghost.vs-btn--on-dark {
	border-color: var(--vs-ivory);
	color: var(--vs-ivory);
}

.vs-btn--ghost.vs-btn--on-dark:hover {
	background: var(--vs-ivory);
	color: var(--vs-ink);
}

.vs-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	border-bottom: 1px solid currentColor;
	color: var(--vs-ink);
	font-size: var(--vs-micro-size);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: var(--vs-micro-track);
	text-decoration: none;
	text-transform: uppercase;
}

.vs-link-arrow:hover {
	color: var(--vs-gold-text);
}

.vs-link-arrow .vs-icon {
	transition: transform 0.2s var(--vs-ease);
}

.vs-link-arrow:hover .vs-icon {
	transform: translateX(3px);
}

.vs-section--dark .vs-link-arrow {
	color: var(--vs-ivory);
}

.vs-section--dark .vs-link-arrow:hover {
	color: var(--vs-gold-on-dark);
}

/* Core block buttons inside content (e.g. empty-cart block, posts). */
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 12px 32px;
	border: 1px solid var(--vs-ink);
	border-radius: 0;
	background: var(--vs-ink);
	color: var(--vs-ivory);
	font-family: var(--vs-font-ui);
	font-size: var(--vs-micro-size);
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: var(--vs-micro-track);
	text-decoration: none;
	text-transform: uppercase;
}

.wp-block-button__link:hover {
	background: var(--vs-ink-hover);
	color: var(--vs-ivory);
}

.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--vs-ink);
}

/* =============================================================================
   06 Forms
   ========================================================================== */

:where(
	input[type="text"],
	input[type="email"],
	input[type="password"],
	input[type="search"],
	input[type="tel"],
	input[type="number"],
	input[type="url"],
	input[type="date"],
	textarea,
	select
) {
	max-width: 100%;
	min-height: 52px;
	padding: 12px 16px;
	border: 1px solid var(--vs-field-border);
	border-radius: 0;
	background-color: var(--vs-white);
	color: var(--vs-ink);
	font-family: var(--vs-font-ui);
	font-size: 16px; /* >=16px avoids iOS zoom on focus */
	line-height: 1.4;
	box-shadow: none;
}

:where(textarea) {
	min-height: 140px;
	resize: vertical;
}

/* Custom chevron only on selects the theme owns (plugin/block selects keep their own arrows). */
.vs-prose select:not([multiple]),
.vs-comment-form select:not([multiple]),
.vs-theme form .form-row select:not([multiple]) {
	padding-right: 44px;
	background-image: var(--vs-chevron);
	background-position: right 16px center;
	background-repeat: no-repeat;
	background-size: 12px 8px;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

:where(
	input[type="text"],
	input[type="email"],
	input[type="password"],
	input[type="search"],
	input[type="tel"],
	input[type="number"],
	input[type="url"],
	input[type="date"],
	textarea,
	select
):focus {
	border-color: var(--vs-ink);
	outline: 2px solid var(--vs-focus);
	outline-offset: 1px;
}

:where(input::placeholder, textarea::placeholder) {
	color: var(--vs-ink-2);
	opacity: 1;
}

:where(input[type="checkbox"], input[type="radio"]) {
	width: 18px;
	height: 18px;
	margin: 0 8px 0 0;
	accent-color: var(--vs-ink);
	vertical-align: -3px;
	cursor: pointer;
}

:where(fieldset) {
	min-width: 0;
	margin: 0 0 24px;
	padding: 0;
	border: 0;
}

:where(legend) {
	padding: 0;
	margin-bottom: 12px;
	font-family: var(--vs-font-display);
	font-size: 24px;
	font-weight: 500;
}

/* ---- Search form (searchform.php) ---------------------------------------- */

.vs-searchform {
	width: 100%;
	margin: 0;
}

.vs-searchform__row {
	position: relative;
	display: flex;
	align-items: stretch;
	width: 100%;
	border: 1px solid var(--vs-field-border);
	background: var(--vs-white);
}

.vs-searchform__row:focus-within {
	border-color: var(--vs-ink);
	outline: 2px solid var(--vs-focus);
	outline-offset: 2px;
}

.vs-searchform__icon {
	position: absolute;
	top: 50%;
	left: 16px;
	width: 18px;
	height: 18px;
	color: var(--vs-ink-2);
	transform: translateY(-50%);
	pointer-events: none;
}

.vs-searchform .vs-searchform__input {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	min-height: 52px;
	padding: 12px 12px 12px 44px;
	border: 0;
	background: transparent;
	-webkit-appearance: none;
	appearance: none;
}

.vs-searchform .vs-searchform__input:focus {
	outline: none; /* the row shows the focus ring */
}

.vs-searchform__input::-webkit-search-decoration {
	-webkit-appearance: none;
}

.vs-searchform__submit.vs-btn {
	flex: 0 0 auto;
	min-height: 52px;
	margin: -1px -1px -1px 0;
	padding-inline: 24px;
}

.vs-searchform--drawer .vs-searchform__submit.vs-btn {
	padding-inline: 16px;
}

/* =============================================================================
   07 Chips, badges, icons
   ========================================================================== */

.vs-icon {
	display: inline-block;
	flex-shrink: 0;
	vertical-align: middle;
}

.vs-monogram {
	display: block;
	flex-shrink: 0;
}

.vs-chips {
	min-width: 0;
}

.vs-chips__label {
	margin-bottom: 16px;
}

.vs-chips__list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vs-chips__item {
	flex: 0 0 auto;
	margin: 0;
}

.vs-chip {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 0 22px;
	border: 1px solid var(--vs-line);
	border-radius: 999px;
	background: var(--vs-paper);
	color: var(--vs-ink);
	font-size: 15px;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.vs-chip:hover {
	border-color: var(--vs-ink);
	color: var(--vs-ink);
}

.vs-chip.is-current,
.vs-chip[aria-current="page"] {
	border-color: var(--vs-ink);
	background: var(--vs-ink);
	color: var(--vs-ivory);
}

.vs-chip--small {
	min-height: 28px;
	padding: 0 12px;
	background: var(--vs-tile);
	border-color: transparent;
	font-size: 13px;
	position: relative;
}

/* Small chips are inline links in cards: 44px hit area without changing the look. */
.vs-chip--small::after {
	content: "";
	position: absolute;
	inset: -8px -4px;
}

/* Mobile: chip rows scroll horizontally edge to edge (no page overflow). */
@media (max-width: 599px) {
	.vs-chips--needs .vs-chips__list,
	.vs-chips--archive .vs-chips__list {
		flex-wrap: nowrap;
		margin-inline: calc(-1 * var(--vs-gutter));
		padding: 6px var(--vs-gutter) 10px; /* room for the focus ring */
		scroll-padding-inline: var(--vs-gutter);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
		scrollbar-width: thin;
		-webkit-overflow-scrolling: touch;
	}

	.vs-chips--needs .vs-chips__item,
	.vs-chips--archive .vs-chips__item {
		scroll-snap-align: start;
	}
}

.vs-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 12px;
	border-radius: 999px;
	font-family: var(--vs-font-ui);
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.vs-badge--sale {
	background: var(--vs-sale);
	color: var(--vs-white);
}

/* =============================================================================
   08 Announcement bar
   ========================================================================== */

.vs-announcement {
	background: var(--vs-ink);
	color: var(--vs-ivory);
}

.vs-announcement__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding-block: 8px;
}

.vs-announcement__text {
	margin: 0;
	font-size: 12px;
	line-height: 1.5;
	letter-spacing: 0.08em;
	text-align: center;
}

.vs-announcement__text a {
	color: var(--vs-ivory);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.vs-announcement__text a:hover {
	color: var(--vs-gold-on-dark);
}

/* =============================================================================
   09 Header
   ========================================================================== */

.vs-header {
	position: sticky;
	top: var(--vs-admin-bar);
	z-index: 100;
	border-bottom: 1px solid var(--vs-line);
	background: var(--vs-ivory);
	transition: box-shadow var(--vs-dur) ease;
}

.vs-header.is-scrolled {
	box-shadow: 0 10px 24px -20px rgba(30, 27, 22, 0.45);
}

.vs-header__inner {
	position: relative;
}

.vs-header__row {
	display: grid;
	grid-template-columns: minmax(44px, 1fr) minmax(0, auto) minmax(44px, 1fr);
	align-items: center;
	gap: 8px;
	min-height: 64px;
}

.vs-header__start,
.vs-header__end {
	display: flex;
	align-items: center;
	min-width: 0;
}

.vs-header__start {
	justify-content: flex-start;
	margin-left: -10px; /* optical alignment of the 44px icon box */
}

.vs-header__end {
	justify-content: flex-end;
	gap: 2px;
	margin-right: -10px;
}

.vs-header__brand {
	display: flex;
	justify-content: center;
	min-width: 0;
}

.vs-header__icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--vs-ink);
	text-decoration: none;
	cursor: pointer;
	transition: color 0.2s ease;
}

.vs-header__icon:hover {
	color: var(--vs-gold-text);
}

.vs-header__icon .vs-icon {
	width: 20px;
	height: 20px;
}

/* Mobile/desktop visibility of header controls. */
.vs-header__search-toggle,
.vs-header__account,
.vs-nav {
	display: none;
}

/* ---- Logo ---------------------------------------------------------------- */

.vs-logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--vs-ink);
	text-decoration: none;
}

.vs-logo:hover {
	color: var(--vs-ink);
}

.vs-logo__mark {
	width: 28px;
	height: 28px;
}

.vs-logo__word {
	padding-left: 0.3em; /* balances trailing letter-spacing so the word stays centred */
	font-family: var(--vs-font-display);
	font-size: 18px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	white-space: nowrap;
}

.vs-logo--custom {
	display: flex;
	align-items: center;
}

.vs-logo--custom .custom-logo-link {
	display: block;
	line-height: 0;
}

.vs-logo--custom img.custom-logo {
	/* Definite height: the width/height attributes then reserve the box before load (no CLS). */
	width: auto;
	max-width: min(220px, 52vw);
	height: 40px;
	max-height: none;
	object-fit: contain;
}

@media (max-width: 374px) {
	.vs-logo__word {
		padding-left: 0.2em;
		font-size: 15px;
		letter-spacing: 0.2em;
	}

	.vs-logo__mark {
		width: 24px;
		height: 24px;
	}
}

/* ---- Bag ----------------------------------------------------------------- */

.vs-bag__count {
	position: absolute;
	top: 5px;
	right: 2px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--vs-ink);
	color: var(--vs-ivory);
	font-family: var(--vs-font-ui);
	font-size: 11px;
	font-weight: 500;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}

.vs-bag__count[data-count="0"] {
	display: none;
}

/* ---- Desktop header (>=1024px) ------------------------------------------- */

@media (min-width: 1024px) {
	.vs-header__inner {
		padding-top: 18px;
	}

	.vs-header__row {
		gap: 16px;
		min-height: 0;
	}

	.vs-header__menu-toggle {
		display: none;
	}

	.vs-header__search-toggle,
	.vs-header__account {
		display: inline-flex;
	}

	.vs-logo--header {
		flex-direction: column;
		gap: 6px;
	}

	.vs-logo--header .vs-logo__mark {
		width: 34px;
		height: 34px;
	}

	.vs-logo--header .vs-logo__word {
		padding-left: 0.38em;
		font-size: 22px;
		letter-spacing: 0.38em;
	}

	.vs-logo--header.vs-logo--custom img.custom-logo {
		max-width: 320px;
		height: 64px;
	}

	.vs-nav {
		display: block;
		margin-top: 10px;
	}
}

/* ---- Desktop nav + dropdowns --------------------------------------------- */

.vs-nav__menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 36px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vs-nav__menu .menu-item {
	position: relative;
	margin: 0;
}

.vs-nav__menu > .menu-item > a {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 48px;
	color: var(--vs-ink);
	font-size: var(--vs-micro-size);
	font-weight: 500;
	letter-spacing: var(--vs-micro-track);
	text-decoration: none;
	text-transform: uppercase;
}

.vs-nav__menu > .menu-item > a::before {
	content: "";
	position: absolute;
	right: 0;
	bottom: 10px;
	left: 0;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s var(--vs-ease);
}

.vs-nav__menu > .menu-item > a:hover::before,
.vs-nav__menu > .current-menu-item > a::before,
.vs-nav__menu > .current-menu-ancestor > a::before,
.vs-nav__menu > .current-menu-parent > a::before {
	transform: scaleX(1);
}

.vs-nav__menu > .menu-item > a:hover {
	color: var(--vs-ink);
}

/* Chevron for parents. */
.vs-nav__menu .menu-item-has-children > a::after {
	content: "";
	width: 6px;
	height: 6px;
	margin-top: -3px;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: rotate(45deg);
}

.vs-nav__menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	z-index: 20;
	min-width: 240px;
	margin: 0;
	padding: 10px 0;
	border: 1px solid var(--vs-line);
	background: var(--vs-ivory);
	box-shadow: 0 18px 40px -24px rgba(30, 27, 22, 0.35);
	list-style: none;
	text-align: left;
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 6px);
	transition: opacity 0.2s ease, transform 0.2s var(--vs-ease), visibility 0s linear 0.2s;
}

.vs-nav__menu .sub-menu .sub-menu {
	top: -11px;
	left: 100%;
	transform: translate(6px, 0);
}

.vs-nav__menu .menu-item:hover > .sub-menu,
.vs-nav__menu .menu-item:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
	transition-delay: 0s;
}

.vs-nav__menu .sub-menu .menu-item:hover > .sub-menu,
.vs-nav__menu .sub-menu .menu-item:focus-within > .sub-menu {
	transform: translate(0, 0);
}

/* Esc dismissed a focus-opened dropdown. */
.vs-nav__menu .menu-item.is-dismissed > .sub-menu,
.vs-nav__menu .menu-item.is-dismissed .sub-menu {
	opacity: 0;
	visibility: hidden;
}

.vs-nav__menu .sub-menu a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 44px;
	padding: 8px 22px;
	color: var(--vs-ink);
	font-size: 14px;
	line-height: 1.35;
	text-decoration: none;
}

.vs-nav__menu .sub-menu a:hover,
.vs-nav__menu .sub-menu .current-menu-item > a {
	background: var(--vs-paper);
	color: var(--vs-gold-text);
}

.vs-nav__menu .sub-menu .menu-item-has-children > a::after {
	transform: rotate(-45deg);
	margin-top: 0;
}

/* Keep the last top-level dropdowns inside the viewport. */
.vs-nav__menu > .menu-item:last-child > .sub-menu .sub-menu,
.vs-nav__menu > .menu-item:nth-last-child(2) > .sub-menu .sub-menu {
	right: 100%;
	left: auto;
	transform: translate(-6px, 0);
}

/* =============================================================================
   10 Search overlay
   ========================================================================== */

.vs-search {
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	z-index: 90;
	border-top: 1px solid var(--vs-line);
	border-bottom: 1px solid var(--vs-line);
	background: var(--vs-ivory);
	box-shadow: 0 24px 40px -28px rgba(30, 27, 22, 0.4);
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity var(--vs-dur) ease, transform var(--vs-dur) var(--vs-ease);
}

.vs-search.is-open {
	opacity: 1;
	transform: none;
}

.vs-search__inner {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-block: 24px;
}

.vs-search__inner .vs-searchform {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 760px;
	margin-inline: auto;
}

.vs-search__close {
	flex: 0 0 auto;
}

/* =============================================================================
   11 Mobile drawer
   ========================================================================== */

.vs-drawer {
	position: fixed;
	inset: 0;
	z-index: 1000;
}

.vs-drawer__overlay {
	position: absolute;
	inset: 0;
	background: rgba(30, 27, 22, 0.5);
	opacity: 0;
	transition: opacity var(--vs-dur) ease;
	cursor: pointer;
}

.vs-drawer__panel {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	width: min(420px, 88vw);
	max-width: 100%;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--vs-ivory);
	box-shadow: 24px 0 48px -32px rgba(30, 27, 22, 0.5);
	transform: translateX(-100%);
	transition: transform var(--vs-dur) var(--vs-ease);
}

.vs-drawer__panel:focus {
	outline: none;
}

.vs-drawer.is-open .vs-drawer__overlay {
	opacity: 1;
}

.vs-drawer.is-open .vs-drawer__panel {
	transform: none;
}

.admin-bar .vs-drawer {
	top: var(--vs-admin-bar);
}

.vs-drawer__head {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 64px;
	padding: 0 10px 0 20px;
	border-bottom: 1px solid var(--vs-line);
	background: var(--vs-ivory);
}

.vs-drawer__title {
	color: var(--vs-ink-2);
	font-size: var(--vs-micro-size);
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.vs-drawer__search {
	padding: 20px;
}

.vs-drawer__nav {
	flex: 1 0 auto;
	padding: 0 20px 24px;
}

.vs-drawer__menu,
.vs-drawer__menu .sub-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vs-drawer__menu .menu-item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	margin: 0;
}

.vs-drawer__menu > .menu-item {
	border-bottom: 1px solid var(--vs-line);
}

.vs-drawer__menu .menu-item > a {
	display: flex;
	align-items: center;
	min-height: 56px;
	padding: 8px 0;
	color: var(--vs-ink);
	font-family: var(--vs-font-display);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
}

.vs-drawer__menu .sub-menu {
	grid-column: 1 / -1;
	padding: 0 0 12px 16px;
}

.vs-drawer__menu .sub-menu .menu-item > a {
	min-height: 44px;
	color: var(--vs-ink-2);
	font-family: var(--vs-font-ui);
	font-size: 15px;
}

.vs-drawer__menu .current-menu-item > a,
.vs-drawer__menu .menu-item > a:hover {
	color: var(--vs-gold-text);
}

.vs-drawer__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-right: -12px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--vs-ink);
	cursor: pointer;
}

.vs-drawer__toggle .vs-icon {
	transition: transform 0.2s var(--vs-ease);
}

.vs-drawer__toggle[aria-expanded="true"] .vs-icon {
	transform: rotate(180deg);
}

.vs-drawer__foot {
	display: flex;
	flex-direction: column;
	padding: 12px 20px 24px;
	border-top: 1px solid var(--vs-line);
}

.vs-drawer__link {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 48px;
	color: var(--vs-ink);
	font-size: var(--vs-micro-size);
	font-weight: 500;
	letter-spacing: var(--vs-micro-track);
	text-decoration: none;
	text-transform: uppercase;
}

.vs-drawer__link:hover {
	color: var(--vs-gold-text);
}

@media (min-width: 1024px) {
	.vs-drawer {
		display: none;
	}
}

/* Touch tablets in landscape (>=1024px, no hover): hover dropdowns are unreachable,
   so keep the hamburger + drawer (with expandable sub-menus). [hidden] still wins. */
@media (min-width: 1024px) and (hover: none) {
	.vs-nav {
		display: none;
	}

	.vs-header__menu-toggle {
		display: inline-flex;
	}

	.vs-drawer {
		display: block;
	}
}

/* Phones: the WP admin bar (z-index 99999) scrolls with the page; keep the modal drawer above it. */
@media (max-width: 600px) {
	.admin-bar .vs-drawer {
		z-index: 100000;
	}
}

/* =============================================================================
   12 Footer
   ========================================================================== */

.vs-footer {
	border-top: 1px solid var(--vs-line);
	background: var(--vs-ivory);
	color: var(--vs-ink);
}

.vs-footer__inner {
	display: flex;
	flex-direction: column;
	gap: 48px;
	padding-block: 64px 32px;
}

.vs-footer__top {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 48px;
}

.vs-footer__brand {
	display: flex;
	flex: 1 1 260px;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	max-width: 340px;
}

.vs-logo--footer .vs-logo__mark {
	width: 30px;
	height: 30px;
}

.vs-logo--footer .vs-logo__word {
	padding-left: 0;
	font-size: 20px;
	letter-spacing: 0.34em;
}

.vs-footer__text {
	margin: 0;
	color: var(--vs-ink-2);
	font-size: 14px;
	line-height: 1.7;
}

.vs-footer__email {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--vs-ink);
	font-size: 14px;
}

.vs-footer__menus {
	display: grid;
	flex: 2 1 480px;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 32px;
	min-width: 0;
	max-width: 640px;
}

.vs-footer__col {
	min-width: 0;
}

.vs-footer__heading {
	margin: 0 0 8px;
	color: var(--vs-gold-text);
	font-family: var(--vs-font-ui);
	font-size: var(--vs-micro-size);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: var(--vs-micro-track);
	text-transform: uppercase;
}

.vs-footer__menu,
.vs-footer__legal-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vs-footer__menu li {
	margin: 0;
}

.vs-footer__menu a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-block: 6px;
	color: var(--vs-ink);
	font-size: 14px;
	line-height: 1.4;
	text-decoration: none;
}

.vs-footer__menu a:hover {
	color: var(--vs-gold-text);
	text-decoration: underline;
}

.vs-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 24px;
	padding-top: 24px;
	border-top: 1px solid var(--vs-line);
	color: var(--vs-ink-2);
	font-size: 13px;
	line-height: 1.6;
}

.vs-footer__copy,
.vs-footer__payments {
	margin: 0;
}

.vs-footer__copy a {
	color: var(--vs-ink-2);
}

.vs-footer__payments {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.vs-footer__payments .vs-icon {
	color: var(--vs-gold-text);
}

.vs-footer__legal-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 0 20px;
}

.vs-footer__legal-menu li {
	margin: 0;
}

.vs-footer__legal-menu a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--vs-ink-2);
	text-decoration: none;
}

.vs-footer__legal-menu a:hover {
	color: var(--vs-ink);
	text-decoration: underline;
}

@media (min-width: 1024px) {
	.vs-footer__bottom .vs-footer__legal {
		margin-left: auto;
	}
}

/* =============================================================================
   13 Front page sections
   ========================================================================== */

/* ---- Hero ---------------------------------------------------------------- */

.vs-hero {
	background: var(--vs-ink);
	color: var(--vs-ivory);
}

.vs-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	gap: clamp(32px, 5vw, 72px);
	padding-block: clamp(48px, 6vw, 88px);
}

.vs-hero__content {
	display: flex;
	flex-direction: column;
	gap: 28px;
	min-width: 0;
}

.vs-hero__title {
	margin: 0;
	font-family: var(--vs-font-display);
	font-size: clamp(48px, 6.4vw, 96px);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.01em;
	text-wrap: balance;
	overflow-wrap: break-word;
}

.vs-hero__highlight {
	color: var(--vs-gold-on-dark);
	font-style: italic;
	font-weight: 500;
}

.vs-hero__text {
	max-width: 460px;
	margin: 0;
	color: var(--vs-muted-on-dark);
	font-size: 17px;
	line-height: 1.7;
}

.vs-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	padding-top: 8px;
}

@media (max-width: 599px) {
	.vs-hero__actions .vs-btn {
		flex: 1 1 auto;
	}
}

.vs-hero__visual {
	--vs-hero-h: clamp(340px, 100vw, 600px);
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	height: var(--vs-hero-h);
	overflow: hidden;
}

.vs-hero__ring {
	position: absolute;
	top: 50%;
	left: 50%;
	aspect-ratio: 1 / 1;
	border: 1px solid var(--vs-ring-1);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.vs-hero__ring--outer {
	width: calc(var(--vs-hero-h) * 0.93);
}

.vs-hero__ring--inner {
	width: calc(var(--vs-hero-h) * 0.7);
	border-color: var(--vs-ring-2);
}

.vs-hero__watch {
	position: relative;
	display: block;
	width: auto;
	max-width: 100%;
	height: 88%;
}

.vs-hero__visual--image {
	display: block;
	height: auto;
}

.vs-hero__media {
	position: relative;
	height: var(--vs-hero-h);
	overflow: hidden;
	background: var(--vs-tile);
}

.vs-hero__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vs-hero__frame {
	position: absolute;
	inset: 16px;
	border: 1px solid var(--vs-frame);
	pointer-events: none;
}

@media (min-width: 1024px) {
	.vs-hero__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.vs-hero__visual {
		--vs-hero-h: 600px;
	}
}

/* ---- Trust bar ----------------------------------------------------------- */

.vs-trustbar {
	border-bottom: 1px solid var(--vs-line);
}

.vs-trust {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vs-trust--bar {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0 24px;
}

.vs-trust__item {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
	margin: 0;
}

.vs-trust--bar .vs-trust__item {
	padding-block: 18px;
}

.vs-trust--bar .vs-trust__item + .vs-trust__item {
	border-top: 1px solid var(--vs-line);
}

.vs-trust__icon {
	flex: 0 0 auto;
	color: var(--vs-gold-text);
}

.vs-trust__body {
	min-width: 0;
}

.vs-trust__title {
	margin: 0;
	color: var(--vs-ink);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.45;
}

.vs-trust__text {
	margin: 0;
	color: var(--vs-ink-2);
	font-size: 13px;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.vs-trust__link {
	color: var(--vs-ink-2);
	text-decoration: underline;
	text-decoration-color: var(--vs-field-border);
	text-underline-offset: 0.2em;
}

.vs-trust__link:hover {
	color: var(--vs-ink);
	text-decoration-color: currentColor;
}

@media (min-width: 600px) {
	.vs-trust--bar {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.vs-trust--bar .vs-trust__item {
		padding-block: 24px;
	}

	.vs-trust--bar .vs-trust__item + .vs-trust__item {
		border-top: 0;
	}

	.vs-trust--bar .vs-trust__item:nth-child(n + 3) {
		border-top: 1px solid var(--vs-line);
	}
}

@media (min-width: 1024px) {
	.vs-trust--bar {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.vs-trust--bar .vs-trust__item:nth-child(n + 3) {
		border-top: 0;
	}
}

/* ---- Shop-by-need chips -------------------------------------------------- */

.vs-needs {
	overflow: hidden; /* contains the edge-to-edge scroller on mobile */
}

/* ---- Category index ------------------------------------------------------ */

.vs-index__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 48px 64px;
}

.vs-index__intro {
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-width: 0;
}

.vs-index__intro .vs-section__text {
	max-width: 380px;
}

.vs-index__feature {
	display: block;
	margin-top: 12px;
	color: var(--vs-ink);
	text-decoration: none;
}

.vs-index__feature-media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--vs-white); /* product-style photos are contained on white */
}

.vs-index__feature-media::after {
	content: "";
	position: absolute;
	inset: 14px;
	border: 1px solid var(--vs-frame);
	pointer-events: none;
}

.vs-index__feature-img {
	display: block;
	width: 100%;
	height: 100%;
	padding: 8%;
	object-fit: contain;
	transition: transform 0.8s var(--vs-ease);
}

.vs-index__feature:hover .vs-index__feature-img {
	transform: scale(1.03);
}

.vs-index__feature-caption {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-top: 16px;
}

.vs-index__feature-name {
	font-family: var(--vs-font-display);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.2;
}

.vs-index__nav {
	min-width: 0;
}

.vs-index__list {
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--vs-ink);
	list-style: none;
}

.vs-index__item {
	margin: 0;
	border-bottom: 1px solid var(--vs-line);
}

.vs-index__link {
	display: flex;
	align-items: center;
	gap: clamp(14px, 3vw, 32px);
	min-height: 64px;
	padding-block: 22px;
	color: var(--vs-ink);
	text-decoration: none;
}

.vs-index__num {
	flex: 0 0 28px;
	color: var(--vs-ink-2);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

.vs-index__name {
	flex: 1 1 auto;
	min-width: 0;
	font-family: var(--vs-font-display);
	font-size: clamp(28px, 3.2vw, 44px);
	font-weight: 500;
	line-height: 1.1;
	overflow-wrap: break-word;
	transition: transform 0.3s var(--vs-ease), color 0.2s ease;
}

.vs-index__count {
	flex: 0 0 auto;
	color: var(--vs-ink-2);
	font-size: 14px;
	white-space: nowrap;
}

.vs-index__arrow {
	flex: 0 0 auto;
	transition: transform 0.3s var(--vs-ease);
}

.vs-index__link:hover .vs-index__name {
	color: var(--vs-gold-text);
	transform: translateX(6px);
}

.vs-index__link:hover .vs-index__arrow {
	transform: translateX(4px);
}

@media (max-width: 599px) {
	.vs-index__count {
		font-size: 13px;
	}

	.vs-index__arrow {
		display: none;
	}
}

@media (min-width: 1024px) {
	.vs-index__inner {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		align-items: start;
	}
}

/* ---- Product sections (new arrivals, rail) ------------------------------- */

.vs-products {
	min-width: 0;
}

/* ---- Story split --------------------------------------------------------- */

.vs-story__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	gap: clamp(32px, 6vw, 96px);
}

.vs-story__panel {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	height: clamp(320px, 90vw, 560px);
	overflow: hidden;
	background: var(--vs-ink);
}

.vs-story__mark {
	position: relative;
	width: clamp(120px, 30vw, 180px);
	height: auto;
	aspect-ratio: 1 / 1;
}

.vs-story__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vs-story__frame {
	position: absolute;
	inset: 18px;
	border: 1px solid var(--vs-frame-dark);
	pointer-events: none;
}

.vs-story__panel--image .vs-story__frame {
	border-color: var(--vs-frame);
}

.vs-story__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	min-width: 0;
}

.vs-story__title {
	font-size: clamp(40px, 4.6vw, 64px);
	line-height: 1.02;
}

.vs-story__text {
	max-width: 520px;
	font-size: 17px;
	line-height: 1.75;
}

.vs-story__steps {
	width: 100%;
	margin-top: 8px;
}

.vs-steps__heading {
	margin: 0 0 12px;
	font-family: var(--vs-font-ui);
	font-size: var(--vs-micro-size);
	text-wrap: initial;
}

.vs-steps {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vs-steps__item {
	display: flex;
	gap: 20px;
	margin: 0;
	padding-block: 18px;
	border-top: 1px solid var(--vs-line);
}

.vs-steps__item:last-child {
	border-bottom: 1px solid var(--vs-line);
}

.vs-steps__num {
	flex: 0 0 32px;
	color: var(--vs-gold-text);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.6;
	font-variant-numeric: tabular-nums;
}

.vs-steps__body {
	min-width: 0;
}

.vs-steps__title {
	margin: 0 0 4px;
	font-family: var(--vs-font-ui);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
}

.vs-steps__text {
	margin: 0;
	color: var(--vs-ink-2);
	font-size: 15px;
	line-height: 1.65;
}

@media (min-width: 1024px) {
	.vs-story__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.vs-story__panel {
		height: 560px;
	}
}

/* ---- Gift band ----------------------------------------------------------- */

.vs-gifts {
	padding-block: clamp(64px, 7vw, 104px);
}

.vs-gifts__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	text-align: center;
}

.vs-gifts .vs-section__head {
	margin-bottom: 0;
}

.vs-gifts .vs-section__title {
	font-size: clamp(36px, 4.4vw, 60px);
}

.vs-gifts__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	width: 100%;
	max-width: 960px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vs-gifts__item {
	display: flex;
	margin: 0;
}

.vs-gift-tile {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 120px;
	padding: 32px 24px;
	border: 1px solid var(--vs-line-dark);
	color: var(--vs-ivory);
	text-decoration: none;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.vs-gift-tile:hover {
	border-color: var(--vs-ivory);
	background: rgba(246, 241, 232, 0.04);
	color: var(--vs-ivory);
}

.vs-gift-tile--accent {
	border-color: var(--vs-gold-on-dark);
}

.vs-gift-tile__title {
	font-family: var(--vs-font-display);
	font-size: 30px;
	font-weight: 500;
	line-height: 1.15;
}

.vs-gift-tile--accent .vs-gift-tile__title {
	color: var(--vs-gold-soft);
	font-style: italic;
}

.vs-gift-tile__cta {
	color: var(--vs-muted-on-dark);
	font-size: var(--vs-micro-size);
	font-weight: 500;
	letter-spacing: var(--vs-micro-track);
	text-transform: uppercase;
}

@media (min-width: 600px) {
	.vs-gifts__grid {
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	}
}

/* ---- Journal (home) ------------------------------------------------------ */

.vs-post-grid--home .vs-post-card {
	background: var(--vs-paper);
}

/* ---- Newsletter ---------------------------------------------------------- */

.vs-newsletter__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	max-width: calc(640px + 2 * var(--vs-gutter));
	text-align: center;
}

.vs-newsletter__inner .vs-section__text {
	margin-inline: auto;
}

.vs-newsletter__form {
	width: 100%;
	margin-top: 16px;
	text-align: left;
}

/* =============================================================================
   14 Pages, prose & WordPress content
   ========================================================================== */

.vs-page-main {
	padding-block: clamp(40px, 6vw, 80px) var(--vs-section-y);
}

.vs-page__header {
	margin-bottom: clamp(24px, 4vw, 48px);
}

.vs-page__title {
	margin: 0;
	font-family: var(--vs-font-display);
	font-size: clamp(40px, 5vw, 64px);
	font-weight: 500;
	line-height: 1.05;
	overflow-wrap: break-word;
}

.vs-page__header--store {
	margin-bottom: clamp(20px, 3vw, 32px);
	padding-bottom: clamp(16px, 2vw, 24px);
	border-bottom: 1px solid var(--vs-line);
}

.vs-page__header--store .vs-page__title {
	font-size: clamp(36px, 4vw, 52px);
}

.vs-page__content {
	min-width: 0;
}

.vs-page-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 32px;
}

/* ---- Prose --------------------------------------------------------------- */

.vs-prose {
	color: var(--vs-ink);
	font-size: 17px;
	line-height: 1.75;
	overflow-wrap: break-word;
}

.vs-prose > * {
	margin-block: 0;
}

.vs-prose > * + * {
	margin-block-start: 1.25em;
}

.vs-prose :where(h2) {
	margin-block-start: 1.8em;
	font-size: clamp(30px, 3vw, 40px);
	line-height: 1.12;
}

.vs-prose :where(h3) {
	margin-block-start: 1.6em;
	font-size: clamp(24px, 2.4vw, 30px);
}

.vs-prose :where(h4, h5, h6) {
	margin-block-start: 1.6em;
}

.vs-prose :where(h2, h3, h4, h5, h6) + * {
	margin-block-start: 0.6em;
}

.vs-prose :where(a) {
	color: var(--vs-ink);
	text-decoration: underline;
	text-decoration-color: var(--vs-gold);
}

.vs-prose :where(a:hover) {
	color: var(--vs-gold-text);
}

.vs-prose :where(ul, ol) {
	padding-left: 1.4em;
}

.vs-prose :where(li + li) {
	margin-top: 0.4em;
}

.vs-prose :where(li)::marker {
	color: var(--vs-gold-text);
}

.vs-prose :where(blockquote) {
	margin-inline: 0;
	padding: 4px 0 4px 24px;
	border-left: 1px solid var(--vs-gold);
	font-family: var(--vs-font-display);
	font-size: clamp(22px, 2.4vw, 28px);
	font-style: italic;
	line-height: 1.35;
}

.vs-prose :where(blockquote cite) {
	display: block;
	margin-top: 12px;
	color: var(--vs-ink-2);
	font-family: var(--vs-font-ui);
	font-size: 13px;
	font-style: normal;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.vs-prose :where(table) {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	font-size: 15px;
}

.vs-prose :where(th, td) {
	padding: 10px 12px;
	border-bottom: 1px solid var(--vs-line);
	text-align: left;
	vertical-align: top;
}

.vs-prose :where(th) {
	font-size: var(--vs-micro-size);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.vs-prose :where(pre) {
	padding: 16px 20px;
	overflow-x: auto;
	border: 1px solid var(--vs-line);
	background: var(--vs-paper);
}

.vs-prose :where(:not(pre) > code) {
	padding: 0.1em 0.35em;
	background: var(--vs-tile);
}

.vs-prose :where(figure) {
	margin-inline: 0;
}

.vs-prose :where(img) {
	display: block;
	height: auto;
}

:where(figcaption, .wp-caption-text, .wp-element-caption) {
	margin-top: 10px;
	color: var(--vs-ink-2);
	font-size: 13px;
	line-height: 1.5;
}

.alignleft {
	float: left;
	margin: 0.4em 1.5em 1em 0;
}

.alignright {
	float: right;
	margin: 0.4em 0 1em 1.5em;
}

.aligncenter {
	display: block;
	margin-inline: auto;
	text-align: center;
}

@media (max-width: 599px) {
	.alignleft,
	.alignright {
		float: none;
		margin-inline: 0;
	}
}

.wp-caption {
	max-width: 100%;
}

.vs-prose > .alignwide {
	width: min(1184px, calc(100vw - 2 * var(--vs-gutter)));
	max-width: none;
	margin-inline: calc(50% - min(592px, (100vw - 2 * var(--vs-gutter)) / 2));
}

.vs-prose > .alignfull {
	width: 100vw;
	max-width: none;
	margin-inline: calc(50% - 50vw);
}

.wp-block-embed__wrapper {
	position: relative;
}

.wp-has-aspect-ratio .wp-block-embed__wrapper iframe {
	width: 100%;
	height: 100%;
}

.gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 12px;
}

.gallery-item {
	margin: 0;
}

.sticky,
.bypostauthor {
	/* reserved WordPress classes */
	outline: 0;
}

/* =============================================================================
   15 Posts: journal cards, article, post nav, pagination
   ========================================================================== */

.vs-blog,
.vs-search-results {
	padding-bottom: var(--vs-section-y);
}

.vs-page-head {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding-block: clamp(40px, 6vw, 80px) clamp(28px, 4vw, 48px);
}

.vs-page-head__title {
	margin: 0;
	font-family: var(--vs-font-display);
	font-size: clamp(36px, 4vw, 56px);
	font-weight: 500;
	line-height: 1.05;
	overflow-wrap: break-word;
}

.vs-page-head__text {
	max-width: 640px;
	color: var(--vs-ink-2);
}

.vs-page-head__text > :last-child {
	margin-bottom: 0;
}

.vs-page-head__search {
	width: 100%;
	max-width: 560px;
	margin-top: 8px;
}

.vs-post-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
}

@media (min-width: 600px) {
	.vs-post-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.vs-post-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.vs-post-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	border: 1px solid var(--vs-line);
	background: var(--vs-paper);
}

.vs-post-card__media {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--vs-tile);
}

.vs-post-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.8s var(--vs-ease);
}

.vs-post-card:hover .vs-post-card__img {
	transform: scale(1.03);
}

.vs-post-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	padding: clamp(20px, 3vw, 28px);
}

.vs-post-card__title {
	margin: 0;
	font-family: var(--vs-font-display);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.25;
	overflow-wrap: break-word;
}

.vs-post-card__title a {
	color: var(--vs-ink);
	text-decoration: none;
}

.vs-post-card__title a:hover {
	color: var(--vs-gold-text);
}

.vs-post-card__excerpt {
	margin: 0;
	color: var(--vs-ink-2);
	font-size: 15px;
	line-height: 1.65;
}

.vs-post-card__more {
	margin-top: auto;
}

/* ---- Article ------------------------------------------------------------- */

.vs-single {
	padding-block: clamp(40px, 6vw, 80px) var(--vs-section-y);
}

.vs-article__header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 32px;
}

.vs-article__title {
	margin: 0;
	font-family: var(--vs-font-display);
	font-size: clamp(36px, 5vw, 60px);
	font-weight: 500;
	line-height: 1.05;
	overflow-wrap: break-word;
}

.vs-post-meta {
	margin: 0;
	color: var(--vs-ink-2);
	font-size: var(--vs-micro-size);
	font-weight: 500;
	letter-spacing: var(--vs-micro-track);
	text-transform: uppercase;
}

.vs-article__media {
	margin: 0 0 40px;
	background: var(--vs-tile);
}

.vs-article__img {
	display: block;
	width: 100%;
	height: auto;
}

.vs-article__footer {
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid var(--vs-line);
}

.vs-article__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vs-article__tags a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--vs-line);
	border-radius: 999px;
	background: var(--vs-paper);
	color: var(--vs-ink);
	font-size: 13px;
	text-decoration: none;
}

.vs-article__tags a:hover {
	border-color: var(--vs-ink);
}

/* ---- Post navigation ----------------------------------------------------- */

.vs-post-nav {
	margin-top: 56px;
	border-top: 1px solid var(--vs-line);
	border-bottom: 1px solid var(--vs-line);
}

.vs-post-nav .nav-links {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.vs-post-nav .nav-previous,
.vs-post-nav .nav-next {
	min-width: 0;
}

.vs-post-nav .nav-next {
	border-top: 1px solid var(--vs-line);
	text-align: right;
}

.vs-post-nav a {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-block: 24px;
	color: var(--vs-ink);
	text-decoration: none;
}

.vs-post-nav__label {
	color: var(--vs-gold-text);
	font-size: var(--vs-micro-size);
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.vs-post-nav__title {
	font-family: var(--vs-font-display);
	font-size: 22px;
	font-weight: 500;
	line-height: 1.25;
}

.vs-post-nav a:hover .vs-post-nav__title {
	color: var(--vs-gold-text);
}

@media (min-width: 600px) {
	.vs-post-nav .nav-links {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}

	.vs-post-nav .nav-next {
		grid-column: 2;
		border-top: 0;
	}
}

/* ---- Pagination (posts) -------------------------------------------------- */

.vs-pagination {
	margin-top: clamp(40px, 5vw, 64px);
}

.vs-pagination .nav-links,
.vs-page-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.vs-pagination .page-numbers,
.vs-page-links > a,
.vs-page-links > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	border: 1px solid var(--vs-line);
	color: var(--vs-ink);
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
}

.vs-pagination a.page-numbers:hover,
.vs-page-links > a:hover {
	border-color: var(--vs-ink);
	color: var(--vs-ink);
}

.vs-pagination .page-numbers.current,
.vs-page-links > span.current {
	border-color: var(--vs-ink);
	background: var(--vs-ink);
	color: var(--vs-ivory);
}

.vs-pagination .page-numbers.dots {
	border-color: transparent;
}

/* =============================================================================
   16 Comments
   ========================================================================== */

.vs-comments {
	margin-top: 64px;
	padding-top: 48px;
	border-top: 1px solid var(--vs-line);
}

.vs-comments__title,
.vs-comments .comment-reply-title {
	margin: 0 0 24px;
	font-family: var(--vs-font-display);
	font-size: clamp(28px, 3vw, 36px);
	font-weight: 500;
	line-height: 1.15;
}

.vs-comments .comment-reply-title small {
	margin-left: 12px;
	font-family: var(--vs-font-ui);
	font-size: 13px;
}

.vs-comments__list,
.vs-comments__list .children {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vs-comments__list {
	margin-bottom: 40px;
}

.vs-comments__list .children {
	padding-left: clamp(16px, 4vw, 48px);
}

.vs-comments__list .comment-body {
	padding-block: 24px;
	border-bottom: 1px solid var(--vs-line);
}

.vs-comments__list .comment-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 16px;
	margin-bottom: 12px;
}

.vs-comments__list .comment-author {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 15px;
}

.vs-comments__list .comment-author .avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
}

.vs-comments__list .comment-author .fn {
	font-style: normal;
	font-weight: 600;
}

.vs-comments__list .says {
	display: none;
}

.vs-comments__list .comment-metadata {
	color: var(--vs-ink-2);
	font-size: 13px;
}

.vs-comments__list .comment-metadata a {
	color: var(--vs-ink-2);
	text-decoration: none;
}

.vs-comments__list .comment-content {
	font-size: 16px;
	line-height: 1.7;
}

.vs-comments__list .comment-content > :last-child {
	margin-bottom: 0;
}

.vs-comments__list .comment-awaiting-moderation {
	color: var(--vs-gold-text);
	font-size: 13px;
}

.vs-comments__list .reply {
	margin-top: 8px;
}

.vs-comments__list .comment-reply-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--vs-ink);
	font-size: var(--vs-micro-size);
	font-weight: 500;
	letter-spacing: var(--vs-micro-track);
	text-transform: uppercase;
}

.vs-comments__nav .nav-links {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 32px;
}

.vs-comments__closed {
	color: var(--vs-ink-2);
}

.vs-comment-form {
	margin-top: 8px;
}

.vs-comment-form .comment-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.vs-comment-form .comment-form > p {
	margin: 0;
}

.vs-comment-form .comment-notes,
.vs-comment-form .logged-in-as {
	color: var(--vs-ink-2);
	font-size: 14px;
}

.vs-comment-form label {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 500;
}

.vs-comment-form input[type="text"],
.vs-comment-form input[type="email"],
.vs-comment-form input[type="url"],
.vs-comment-form textarea {
	width: 100%;
}

.vs-comment-form .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 4px;
}

.vs-comment-form .comment-form-cookies-consent label {
	display: inline;
	margin: 0;
	color: var(--vs-ink-2);
	font-weight: 400;
}

.vs-comment-form .comment-form-cookies-consent input {
	margin-top: 3px;
}

.vs-comment-form .required {
	color: var(--vs-sale);
}

/* =============================================================================
   17 Search results, empty state, 404
   ========================================================================== */

.vs-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	max-width: 560px;
	margin: 0 auto;
	padding-block: 32px;
	text-align: center;
}

.vs-empty__text {
	margin: 0;
	color: var(--vs-ink-2);
	font-size: 17px;
}

.vs-empty__search {
	width: 100%;
	text-align: left;
}

.vs-chips--empty .vs-chips__list {
	justify-content: center;
}

.vs-theme .woocommerce-no-products-found + .vs-empty--shop {
	padding-top: 8px;
}

.vs-404 {
	padding-block: var(--vs-section-y);
}

.vs-404__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	text-align: center;
}

.vs-404__title {
	margin: 0;
	font-family: var(--vs-font-display);
	font-size: clamp(48px, 7vw, 96px);
	font-weight: 500;
	line-height: 1;
}

.vs-404__text {
	max-width: 520px;
	margin: 0;
	color: var(--vs-ink-2);
	font-size: 17px;
	line-height: 1.7;
}

.vs-404__search {
	width: 100%;
	max-width: 560px;
	margin-top: 8px;
	text-align: left;
}

.vs-404__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 8px;
}

/* =============================================================================
   18 WooCommerce: buttons (classic)
   WooCommerce selectors here reach (0,3,1) for .alt and up to (0,6,1) for
   disabled/hover combos; the lists below match them (later stylesheet wins).
   ========================================================================== */

.vs-theme a.button,
.vs-theme button.button,
.vs-theme input.button,
.vs-theme #respond input#submit,
.vs-theme a.button.alt,
.vs-theme button.button.alt,
.vs-theme input.button.alt,
.vs-theme #respond input#submit.alt {
	position: relative;
	min-height: 52px;
	margin: 0;
	padding: 12px 28px;
	border: 1px solid var(--vs-ink);
	border-radius: 0;
	background: var(--vs-ink);
	background-image: none;
	box-shadow: none;
	color: var(--vs-ivory);
	font-family: var(--vs-font-ui);
	font-size: var(--vs-micro-size);
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: var(--vs-micro-track);
	text-align: center;
	text-decoration: none;
	text-shadow: none;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

/* display is set separately and never on #place_order (gateways toggle it). */
.vs-theme :is(a, button).button:where(:not(#place_order)) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.vs-theme a.button:hover,
.vs-theme button.button:hover,
.vs-theme input.button:hover,
.vs-theme #respond input#submit:hover,
.vs-theme a.button.alt:hover,
.vs-theme button.button.alt:hover,
.vs-theme input.button.alt:hover,
.vs-theme #respond input#submit.alt:hover {
	border-color: var(--vs-ink-hover);
	background: var(--vs-ink-hover);
	color: var(--vs-ivory);
}

/* Disabled (e.g. variable product before options are chosen). */
.vs-theme :is(a, button, input).button:is(.disabled, :disabled[disabled]),
.vs-theme :is(a, button, input).button:is(.disabled, :disabled[disabled]):hover,
.vs-theme :is(a, button, input).button.alt:is(.disabled, :disabled[disabled]),
.vs-theme :is(a, button, input).button.alt:is(.disabled, :disabled[disabled]):hover,
.vs-theme #respond input#submit:is(.disabled, :disabled[disabled]) {
	border-color: var(--vs-ink);
	background: var(--vs-ink);
	color: var(--vs-ivory);
	opacity: 0.45;
	cursor: not-allowed;
}

/* AJAX states (.loading / .added) — CSS-drawn indicators replace the icon font. */
.vs-theme a.button.loading,
.vs-theme button.button.loading {
	padding-right: 28px;
	opacity: 0.7;
	pointer-events: none;
}

.vs-theme a.button.loading::after,
.vs-theme button.button.loading::after {
	content: "";
	position: static;
	top: auto;
	right: auto;
	display: inline-block;
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	margin-left: 2px;
	border: 1.5px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	font-family: inherit;
	vertical-align: middle;
	animation: vs-spin 0.8s linear infinite;
}

.vs-theme a.button.added::after,
.vs-theme button.button.added::after {
	content: "";
	display: inline-block;
	flex: 0 0 auto;
	width: 10px;
	height: 5px;
	margin: -3px 0 0 2px;
	border-bottom: 1.5px solid currentColor;
	border-left: 1.5px solid currentColor;
	font-family: inherit;
	vertical-align: middle;
	transform: rotate(-45deg);
}

@keyframes vs-spin {
	to {
		transform: rotate(360deg);
	}
}

/* "View cart" link WooCommerce inserts after an AJAX add. */
.vs-theme a.added_to_cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0;
	color: var(--vs-ink);
	font-size: var(--vs-micro-size);
	font-weight: 500;
	letter-spacing: var(--vs-micro-track);
	text-decoration: underline;
	text-transform: uppercase;
	text-underline-offset: 0.3em;
}

.vs-theme a.added_to_cart:hover {
	color: var(--vs-gold-text);
}

/* =============================================================================
   19 WooCommerce: breadcrumb, archive header, toolbar, pagination
   ========================================================================== */

.vs-shop__inner {
	padding-bottom: var(--vs-section-y);
}

.vs-theme .woocommerce-breadcrumb,
.vs-theme .vs-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 10px;
	margin: 0;
	padding-block: 8px 0; /* links carry their own 44px height */
	color: var(--vs-ink-2);
	font-size: 13px;
	line-height: 1.6;
}

.vs-theme .woocommerce-breadcrumb a,
.vs-theme .vs-breadcrumb a {
	display: inline-flex;
	align-items: center;
	min-height: 44px; /* touch target */
	color: var(--vs-ink-2);
	text-decoration: underline;
	text-decoration-color: var(--vs-field-border);
	text-underline-offset: 0.2em;
}

.vs-theme .woocommerce-breadcrumb a:hover,
.vs-theme .vs-breadcrumb a:hover {
	color: var(--vs-ink);
	text-decoration: underline;
	text-decoration-color: currentColor;
}

.vs-breadcrumb__sep {
	color: var(--vs-field-border);
}

/* Archive header */
.vs-theme .woocommerce-products-header {
	padding-block: clamp(20px, 3vw, 32px) clamp(24px, 3vw, 36px);
}

.vs-theme .woocommerce-products-header__title.page-title,
.vs-theme .woocommerce-products-header__title {
	margin: 0;
	font-family: var(--vs-font-display);
	font-size: clamp(36px, 4vw, 56px);
	font-weight: 500;
	line-height: 1.05;
	overflow-wrap: break-word;
}

.vs-theme .woocommerce-products-header .term-description,
.vs-theme .woocommerce-products-header .page-description {
	max-width: 640px;
	margin-top: 14px;
	color: var(--vs-ink-2);
	font-size: 16px;
	line-height: 1.7;
}

.vs-theme .woocommerce-products-header .term-description > :last-child,
.vs-theme .woocommerce-products-header .page-description > :last-child {
	margin-bottom: 0;
}

.vs-chips--archive {
	margin-top: 24px;
}

.vs-theme .woocommerce-products-header .vs-page-head__search {
	margin-top: 20px;
}

/* Toolbar: result count + ordering */
.vs-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	margin-bottom: clamp(24px, 3vw, 36px);
	padding-block: 12px;
	border-top: 1px solid var(--vs-line);
	border-bottom: 1px solid var(--vs-line);
}

.vs-theme .vs-toolbar .woocommerce-result-count,
.vs-theme .woocommerce-result-count {
	float: none;
	margin: 0;
	color: var(--vs-ink-2);
	font-size: 13px;
}

.vs-theme .vs-toolbar .woocommerce-ordering,
.vs-theme .woocommerce-ordering {
	float: none;
	margin: 0;
}

.vs-theme .woocommerce-ordering select.orderby,
.vs-theme .woocommerce-ordering select {
	min-height: 44px;
	padding: 8px 40px 8px 14px;
	border: 1px solid var(--vs-field-border);
	border-radius: 0;
	background-color: transparent;
	background-image: var(--vs-chevron);
	background-position: right 14px center;
	background-repeat: no-repeat;
	background-size: 12px 8px;
	color: var(--vs-ink);
	font-size: 14px;
	vertical-align: middle;
	-webkit-appearance: none;
	appearance: none;
}

@media (max-width: 599px) {
	.vs-theme .vs-toolbar .woocommerce-ordering {
		flex: 1 1 100%;
	}

	.vs-theme .woocommerce-ordering select.orderby {
		width: 100%;
	}
}

/* Product pagination */
.vs-theme nav.woocommerce-pagination {
	margin-top: clamp(40px, 5vw, 64px);
	text-align: center;
}

.vs-theme nav.woocommerce-pagination ul {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
	white-space: normal;
}

.vs-theme nav.woocommerce-pagination ul li {
	float: none;
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: visible;
}

.vs-theme nav.woocommerce-pagination ul li a,
.vs-theme nav.woocommerce-pagination ul li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	margin: 0;
	padding: 0 12px;
	border: 1px solid var(--vs-line);
	background: transparent;
	color: var(--vs-ink);
	font-size: 14px;
	font-weight: 400;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
}

.vs-theme nav.woocommerce-pagination ul li a:hover,
.vs-theme nav.woocommerce-pagination ul li a:focus {
	border-color: var(--vs-ink);
	background: transparent;
	color: var(--vs-ink);
}

.vs-theme nav.woocommerce-pagination ul li span.current {
	border-color: var(--vs-ink);
	background: var(--vs-ink);
	color: var(--vs-ivory);
}

.vs-theme nav.woocommerce-pagination ul li span.dots {
	border-color: transparent;
}

/* =============================================================================
   20 WooCommerce: product grid & card
   ========================================================================== */

.vs-theme ul.products.vs-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--vs-grid-row-gap) var(--vs-grid-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	clear: both;
}

/* WooCommerce clearfix pseudo-elements would become grid items. */
.vs-theme ul.products.vs-grid::before,
.vs-theme ul.products.vs-grid::after {
	content: none;
	display: none;
}

@media (min-width: 600px) {
	.vs-theme ul.products.vs-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.vs-theme ul.products.vs-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.vs-theme ul.products.vs-grid.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vs-theme ul.products.vs-grid.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
	.vs-theme ul.products.vs-grid.columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.vs-theme ul.products.vs-grid.columns-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/*
 * Grid items: WooCommerce sets float/width/margin per column count and per
 * nth-child (up to (0,5,2) incl. [class*=columns-] and :nth-child). !important
 * here only neutralises those float-grid rules inside our CSS grid.
 */
.vs-theme ul.products.vs-grid > li.product,
.vs-theme ul.products.vs-grid > li.product-category {
	float: none !important;
	clear: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0;
	min-width: 0;
	list-style: none;
	text-align: left;
}

.vs-theme ul.products li.product.vs-card {
	position: relative;
	display: flex;
	flex-direction: column;
}

.vs-theme ul.products li.product .woocommerce-loop-product__link,
.vs-theme ul.products li.product .woocommerce-LoopProduct-link {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 14px;
	color: var(--vs-ink);
	text-decoration: none;
}

/* Media tile: white, square, contained image. */
.vs-card__media {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--vs-white);
}

.vs-theme ul.products li.product .vs-card__img,
.vs-theme ul.products li.product a img.vs-card__img {
	position: absolute;
	inset: 6%;
	display: block;
	width: 88%;
	max-width: none;
	height: 88%;
	margin: 0;
	object-fit: contain;
	background: var(--vs-white);
	box-shadow: none;
	transition: opacity 0.45s ease;
}

/* Hover image: not rendered (so not downloaded) on touch / small screens. */
.vs-theme ul.products li.product .vs-card__img--alt {
	display: none;
	opacity: 0;
}

@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
	.vs-theme ul.products li.product .vs-card__img--alt {
		display: block;
	}

	.vs-theme ul.products li.product.vs-card:hover .vs-card__img--alt {
		opacity: 1;
	}
}

/* Sale badge (pill, top-left of the tile). */
.vs-theme ul.products li.product .onsale,
.vs-theme ul.products li.product span.onsale.vs-badge {
	position: absolute;
	top: 10px;
	right: auto;
	left: 10px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 6px 11px;
	border-radius: 999px;
	background: var(--vs-sale);
	color: var(--vs-white);
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.vs-card__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.vs-theme ul.products li.product .vs-card__title,
.vs-theme ul.products li.product .woocommerce-loop-product__title {
	display: -webkit-box;
	min-height: calc(2em * 1.4);
	margin: 0;
	padding: 0;
	overflow: hidden;
	color: var(--vs-ink);
	font-family: var(--vs-font-ui);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0;
	overflow-wrap: anywhere;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	text-wrap: pretty;
}

.vs-theme ul.products li.product .woocommerce-loop-product__link:hover .vs-card__title {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

@media (max-width: 599px) {
	.vs-theme ul.products li.product .vs-card__title {
		font-size: 14px;
	}
}

.vs-theme ul.products li.product .star-rating {
	float: none;
	margin: 0;
	font-size: 11px;
}

.vs-theme ul.products li.product .price {
	display: block;
	margin: 0;
	color: var(--vs-ink);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
	font-variant-numeric: tabular-nums;
}

.vs-theme ul.products li.product .price del {
	display: inline;
	margin-right: 8px;
	color: var(--vs-ink-2);
	font-size: 14px;
	opacity: 1;
}

.vs-theme ul.products li.product .price ins {
	display: inline;
	background: none;
	color: var(--vs-ink);
	font-weight: 500;
	text-decoration: none;
}

/* Actions: full-width outline button. */
.vs-card__actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 4px;
	margin-top: 14px;
}

.vs-theme ul.products li.product .vs-card__cta,
.vs-theme ul.products li.product .vs-card__actions .button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 44px;
	margin: 0;
	padding: 8px 12px;
	border: 1px solid var(--vs-ink);
	background: transparent;
	color: var(--vs-ink);
	font-size: 11px;
	letter-spacing: 0.16em;
	transition: background-color 0.2s ease, color 0.2s ease, opacity 0.25s ease, transform 0.25s var(--vs-ease);
}

.vs-theme ul.products li.product .vs-card__cta:hover,
.vs-theme ul.products li.product .vs-card__actions .button:hover {
	border-color: var(--vs-ink);
	background: var(--vs-ink);
	color: var(--vs-ivory);
}

.vs-theme ul.products li.product .vs-card__actions .added_to_cart {
	align-self: center;
	margin: 0;
	padding: 0;
}

@media (min-width: 600px) {
	.vs-theme ul.products li.product .vs-card__cta,
	.vs-theme ul.products li.product .vs-card__actions .button {
		font-size: var(--vs-micro-size);
		letter-spacing: var(--vs-micro-track);
	}
}

/* Desktop with a real pointer: reveal on hover / keyboard focus. Touch devices always show it. */
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
	.vs-theme ul.products li.product.vs-card .vs-card__cta {
		opacity: 0;
		transform: translateY(4px);
		pointer-events: none; /* no invisible tap target on hybrid touch devices */
	}

	.vs-theme ul.products li.product.vs-card:hover .vs-card__cta,
	.vs-theme ul.products li.product.vs-card:focus-within .vs-card__cta,
	.vs-theme ul.products li.product.vs-card .vs-card__cta:focus-visible,
	.vs-theme ul.products li.product.vs-card .vs-card__cta.loading,
	.vs-theme ul.products li.product.vs-card .vs-card__cta.added {
		opacity: 1;
		transform: none;
		pointer-events: auto;
	}
}

/* Category tiles (if the shop is set to show categories in the loop). */
.vs-theme ul.products li.product-category a {
	display: flex;
	flex-direction: column;
	gap: 12px;
	color: var(--vs-ink);
	text-decoration: none;
}

.vs-theme ul.products li.product-category a img {
	width: 100%;
	height: auto;
	margin: 0;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	padding: 6%;
	background: var(--vs-white);
}

.vs-theme ul.products li.product-category .woocommerce-loop-category__title {
	margin: 0;
	padding: 0;
	font-family: var(--vs-font-display);
	font-size: 22px;
	font-weight: 500;
}

.vs-theme ul.products li.product-category .count {
	background: none;
	color: var(--vs-ink-2);
	font-family: var(--vs-font-ui);
	font-size: 13px;
}

/* Star rating (shared): gold filled stars on a light track. */
.vs-theme .star-rating {
	color: var(--vs-gold-text);
}

.vs-theme .star-rating::before {
	color: var(--vs-field-border); /* empty-star track, 3:1+ */
}

/* =============================================================================
   21 WooCommerce: single product
   ========================================================================== */

.vs-theme div.product {
	position: relative;
	margin-top: clamp(16px, 2vw, 24px);
}

.vs-product__top {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 32px clamp(32px, 4vw, 64px);
	align-items: start;
}

.vs-product__top > * {
	grid-column: 1 / -1;
	min-width: 0;
}

@media (min-width: 1024px) {
	.vs-product__top {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	}

	.vs-product__top > .woocommerce-product-gallery,
	.vs-product__top > .images {
		grid-column: 1;
	}

	.vs-product__top > .summary {
		grid-column: 2;
	}
}

/* Sticky summary only where the viewport is tall enough; it is bounded by .vs-product__top. */
@media (min-width: 1024px) and (min-height: 760px) {
	.vs-product__top > .summary {
		position: sticky;
		top: calc(var(--vs-admin-bar) + var(--vs-header-h) + 24px);
	}
}

/* Neutralise WooCommerce's 48% floats (layout / smallscreen CSS). */
.vs-theme div.product div.images,
.vs-theme div.product div.summary,
.vs-theme div.product .woocommerce-product-gallery {
	float: none;
	width: auto;
	margin: 0;
}

/* Sale badge on the gallery. */
.vs-theme div.product .vs-product__top > span.onsale,
.vs-theme div.product > span.onsale {
	position: absolute;
	top: 14px;
	right: auto;
	left: 14px;
	z-index: 10;
	display: inline-flex;
	align-items: center;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 7px 13px;
	border-radius: 999px;
	background: var(--vs-sale);
	color: var(--vs-white);
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* ---- Gallery ------------------------------------------------------------- */

.vs-theme div.product div.images .woocommerce-product-gallery__wrapper {
	margin: 0;
	background: var(--vs-white);
}

.vs-theme div.product div.images .woocommerce-product-gallery__image {
	background: var(--vs-white);
}

.vs-theme div.product div.images .woocommerce-product-gallery__image > a {
	display: block;
}

/* Main images: square white tile, contained (zoomImg is a sibling and untouched). */
.vs-theme div.product div.images .woocommerce-product-gallery__image > a > img,
.vs-theme div.product div.images .woocommerce-product-gallery__image > img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	padding: 4%;
	object-fit: contain;
	background: var(--vs-white);
}

/* Zoom / lightbox trigger: square 44px button, icon drawn by WooCommerce pseudo-elements. */
.vs-theme div.product div.images .woocommerce-product-gallery__trigger {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 9;
	width: 44px;
	height: 44px;
	border: 1px solid var(--vs-line);
	border-radius: 0;
	background: var(--vs-white);
	box-sizing: border-box;
	text-indent: -9999px;
	overflow: hidden;
}

.vs-theme div.product div.images .woocommerce-product-gallery__trigger::before {
	top: 13px;
	left: 13px;
	width: 11px;
	height: 11px;
	border: 1.5px solid var(--vs-ink);
	box-sizing: content-box;
}

.vs-theme div.product div.images .woocommerce-product-gallery__trigger::after {
	top: 24px;
	left: 27px;
	width: 1.5px;
	height: 8px;
	border-radius: 0;
	background: var(--vs-ink);
}

.vs-theme div.product div.images .woocommerce-product-gallery__trigger:focus-visible {
	outline: 2px solid var(--vs-focus);
	outline-offset: 2px;
}

/* Thumbnails: row of small square white tiles. */
.vs-theme div.product div.images .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
	gap: 8px;
	margin: 8px 0 0;
	padding: 0;
	overflow: visible;
	list-style: none;
}

.vs-theme div.product div.images .flex-control-thumbs::before,
.vs-theme div.product div.images .flex-control-thumbs::after {
	content: none;
	display: none;
}

/* WooCommerce sizes thumbs by column class at (0,5,3): neutralise inside the grid. */
.vs-theme div.product div.images .flex-control-thumbs li {
	float: none !important;
	clear: none !important;
	width: auto !important;
	margin: 0;
	list-style: none;
}

.vs-theme div.product div.images .flex-control-thumbs li img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	padding: 6%;
	border: 1px solid var(--vs-line);
	background: var(--vs-white);
	object-fit: contain;
	opacity: 0.6;
	cursor: pointer;
	transition: opacity 0.2s ease, border-color 0.2s ease;
}

.vs-theme div.product div.images .flex-control-thumbs li img:hover,
.vs-theme div.product div.images .flex-control-thumbs li img.flex-active {
	opacity: 1;
}

.vs-theme div.product div.images .flex-control-thumbs li img.flex-active {
	border-color: var(--vs-ink);
}

@media (min-width: 1024px) {
	.vs-theme div.product div.images .flex-control-thumbs {
		grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
		gap: 10px;
		margin-top: 10px;
	}
}

/* Gallery without slider (secondary images inline). */
.vs-theme div.product div.images .woocommerce-product-gallery__image:nth-child(n + 2) {
	vertical-align: top;
}

/* ---- Summary ------------------------------------------------------------- */

.vs-theme div.product .summary {
	min-width: 0;
}

.vs-theme div.product .product_title {
	margin: 0 0 14px;
	padding: 0;
	font-family: var(--vs-font-display);
	font-size: clamp(30px, 3vw, 44px);
	font-weight: 500;
	line-height: 1.12;
	letter-spacing: -0.005em;
	overflow-wrap: break-word;
	text-wrap: pretty;
}

.vs-theme div.product .woocommerce-product-rating {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	margin: 0 0 16px;
	line-height: 1;
}

.vs-theme div.product .woocommerce-product-rating .star-rating {
	float: none;
	margin: 0;
	font-size: 14px;
}

.vs-theme div.product .woocommerce-review-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--vs-ink-2);
	font-size: 13px;
}

.vs-theme div.product .summary p.price,
.vs-theme div.product .summary span.price,
.vs-theme div.product p.price,
.vs-theme div.product span.price {
	margin: 0 0 20px;
	color: var(--vs-ink);
	font-family: var(--vs-font-ui);
	font-size: 22px;
	font-weight: 400;
	line-height: 1.3;
	font-variant-numeric: tabular-nums;
}

.vs-theme div.product p.price del,
.vs-theme div.product span.price del {
	display: inline;
	margin-right: 10px;
	color: var(--vs-ink-2);
	font-size: 0.8em;
	opacity: 1;
}

.vs-theme div.product p.price ins,
.vs-theme div.product span.price ins {
	display: inline;
	background: none;
	color: var(--vs-ink);
	font-weight: 500;
	text-decoration: none;
}

.vs-theme div.product .woocommerce-product-details__short-description {
	margin: 0 0 24px;
	color: var(--vs-ink-2);
	font-size: 15px;
	line-height: 1.7;
	overflow-wrap: break-word;
}

.vs-theme div.product .woocommerce-product-details__short-description > :last-child {
	margin-bottom: 0;
}

.vs-theme div.product .woocommerce-product-details__short-description :where(ul, ol) {
	padding-left: 1.2em;
}

.vs-theme div.product .stock {
	margin: 0 0 12px;
	color: var(--vs-ink-2);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.04em;
}

.vs-theme div.product .stock.out-of-stock {
	color: var(--vs-sale);
}

/* ---- form.cart: quantity + add to cart ------------------------------------ */

.vs-theme div.product form.cart {
	margin: 0 0 24px;
}

.vs-theme div.product form.cart::before,
.vs-theme div.product form.cart::after,
.vs-theme div.product form.cart .woocommerce-variation-add-to-cart::before,
.vs-theme div.product form.cart .woocommerce-variation-add-to-cart::after {
	content: none;
	display: none;
}

/*
 * Simple / grouped / external forms and the variation add-to-cart row share one grid:
 * quantity (auto) + button (fills the rest). Anything plugins or gateways print inside
 * the form spans the full width; "dense" keeps quantity and button on one row while
 * leaving every element in the DOM and visible.
 */
.vs-theme div.product form.cart:not(.variations_form),
.vs-theme div.product form.cart .woocommerce-variation-add-to-cart {
	display: grid;
	grid-auto-flow: row dense;
	grid-template-columns: auto minmax(0, 1fr);
	row-gap: 12px;
	column-gap: 0;
	align-items: stretch;
}

.vs-theme div.product form.cart:not(.variations_form) > *,
.vs-theme div.product form.cart .woocommerce-variation-add-to-cart > * {
	grid-column: 1 / -1;
	min-width: 0;
}

.vs-theme div.product form.cart:not(.variations_form) > .quantity,
.vs-theme div.product form.cart .woocommerce-variation-add-to-cart > .quantity {
	grid-column: 1;
	margin-right: 12px;
}

.vs-theme div.product form.cart:not(.variations_form) > .single_add_to_cart_button,
.vs-theme div.product form.cart .woocommerce-variation-add-to-cart > .single_add_to_cart_button {
	grid-column: 2;
}

.vs-theme div.product form.cart div.quantity {
	float: none;
	display: flex;
	margin: 0 12px 0 0;
}

/* Sold individually / single stock: WooCommerce prints a hidden qty input. */
.vs-theme div.product form.cart div.quantity:has(input[type="hidden"]) {
	display: none;
}

.vs-theme .quantity .qty {
	width: 84px;
	min-height: 56px;
	padding: 8px;
	border: 1px solid var(--vs-field-border);
	border-radius: 0;
	background: var(--vs-white);
	color: var(--vs-ink);
	font-size: 16px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.vs-theme .quantity .qty:focus {
	border-color: var(--vs-ink);
	outline: 2px solid var(--vs-focus);
	outline-offset: 1px;
}

.vs-theme div.product form.cart .single_add_to_cart_button,
.vs-theme div.product form.cart .button {
	float: none;
	min-height: 56px;
	padding-inline: 24px;
	vertical-align: middle;
}

.vs-theme div.product form.cart .single_add_to_cart_button {
	width: 100%;
	border-color: var(--vs-ink);
	background: var(--vs-ink);
	color: var(--vs-ivory);
	font-size: var(--vs-micro-size);
}

.vs-theme div.product form.cart .single_add_to_cart_button:hover {
	border-color: var(--vs-ink-hover);
	background: var(--vs-ink-hover);
	color: var(--vs-ivory);
}

.vs-theme div.product form.cart .single_add_to_cart_button.button:is(.disabled, :disabled[disabled]),
.vs-theme div.product form.cart .single_add_to_cart_button.button:is(.disabled, :disabled[disabled]):hover {
	border-color: var(--vs-ink);
	background: var(--vs-ink);
	color: var(--vs-ivory);
	opacity: 0.45;
}

/* Grouped products table */
.vs-theme div.product form.cart .group_table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
}

.vs-theme div.product form.cart .group_table td {
	padding: 12px 8px;
	border-top: 1px solid var(--vs-line);
	vertical-align: middle;
}

.vs-theme div.product form.cart .group_table .quantity .qty {
	width: 72px;
	min-height: 48px;
}

.vs-theme div.product form.cart .group_table label {
	font-weight: 500;
}

/* ---- Variations ---------------------------------------------------------- */

.vs-theme div.product form.cart .variations {
	display: block;
	width: 100%;
	margin: 0 0 8px;
	border: 0;
}

.vs-theme div.product form.cart .variations tbody,
.vs-theme div.product form.cart .variations tr,
.vs-theme div.product form.cart .variations th,
.vs-theme div.product form.cart .variations td {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	line-height: 1.4;
	text-align: left;
}

.vs-theme div.product form.cart .variations tr {
	margin-bottom: 16px;
}

.vs-theme div.product form.cart .variations th.label,
.vs-theme div.product form.cart .variations td.label {
	padding: 0 0 8px;
}

.vs-theme div.product form.cart .variations label {
	color: var(--vs-ink);
	font-size: var(--vs-micro-size);
	font-weight: 500;
	letter-spacing: var(--vs-micro-track);
	text-align: left;
	text-transform: uppercase;
}

.vs-theme div.product form.cart .variations select {
	display: block;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	min-height: 52px;
	margin: 0;
	padding: 12px 44px 12px 16px;
	border: 1px solid var(--vs-field-border);
	border-radius: 0;
	background-color: var(--vs-white);
	background-image: var(--vs-chevron);
	background-position: right 16px center;
	background-repeat: no-repeat;
	background-size: 12px 8px;
	color: var(--vs-ink);
	font-size: 16px;
	-webkit-appearance: none;
	appearance: none;
}

.vs-theme div.product form.cart .variations select:focus {
	border-color: var(--vs-ink);
	outline: 2px solid var(--vs-focus);
	outline-offset: 1px;
}

.vs-theme div.product form.cart .reset_variations {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-top: 6px;
	color: var(--vs-ink-2);
	font-size: 13px;
	text-decoration: underline;
}

.vs-theme div.product form.cart .single_variation_wrap .woocommerce-variation {
	margin-bottom: 12px;
}

.vs-theme div.product form.cart .woocommerce-variation-description {
	color: var(--vs-ink-2);
	font-size: 14px;
}

.vs-theme div.product form.cart .woocommerce-variation-price .price {
	margin-bottom: 8px;
	font-size: 20px;
}

/* ---- Trust list & meta ---------------------------------------------------- */

.vs-product-trust {
	margin: 24px 0;
	padding-block: 18px;
	border-top: 1px solid var(--vs-line);
	border-bottom: 1px solid var(--vs-line);
}

.vs-trust--product {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.vs-trust--product .vs-trust__item {
	align-items: flex-start;
	gap: 12px;
}

.vs-trust--product .vs-trust__icon {
	margin-top: 1px;
}

.vs-theme div.product .product_meta {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	color: var(--vs-ink-2);
	font-size: 13px;
	line-height: 1.6;
}

.vs-theme div.product .product_meta > span {
	display: block;
}

.vs-theme div.product .product_meta a {
	color: var(--vs-ink-2);
	text-decoration: underline;
	text-decoration-color: var(--vs-field-border);
}

.vs-theme div.product .product_meta a:hover {
	color: var(--vs-ink);
	text-decoration-color: currentColor;
}

/* =============================================================================
   22 WooCommerce: tabs, attributes, reviews, related / upsells
   ========================================================================== */

.vs-theme div.product .woocommerce-tabs {
	margin-top: clamp(48px, 6vw, 88px);
}

.vs-theme div.product .woocommerce-tabs ul.tabs {
	display: flex;
	gap: 0 32px;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	border-bottom: 1px solid var(--vs-line);
	list-style: none;
	scrollbar-width: none;
}

.vs-theme div.product .woocommerce-tabs ul.tabs::-webkit-scrollbar {
	display: none;
}

.vs-theme div.product .woocommerce-tabs ul.tabs::before,
.vs-theme div.product .woocommerce-tabs ul.tabs::after {
	display: none;
	content: none;
}

.vs-theme div.product .woocommerce-tabs ul.tabs li {
	position: relative;
	display: block;
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--vs-ink-2);
}

.vs-theme div.product .woocommerce-tabs ul.tabs li::before,
.vs-theme div.product .woocommerce-tabs ul.tabs li::after {
	display: none;
	content: none;
	border: 0;
	box-shadow: none;
}

.vs-theme div.product .woocommerce-tabs ul.tabs li.active {
	z-index: auto;
	border: 0;
	background: transparent;
	color: var(--vs-ink);
}

.vs-theme div.product .woocommerce-tabs ul.tabs li a {
	display: inline-flex;
	align-items: center;
	min-height: 52px;
	padding: 0;
	border-bottom: 2px solid transparent;
	color: inherit;
	font-size: var(--vs-micro-size);
	font-weight: 500;
	letter-spacing: var(--vs-micro-track);
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

.vs-theme div.product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--vs-ink);
}

.vs-theme div.product .woocommerce-tabs ul.tabs li.active a {
	border-bottom-color: var(--vs-ink);
	color: var(--vs-ink);
}

/* Inset ring so the tab row (a scroll container on wider screens) never clips it. */
.vs-theme div.product .woocommerce-tabs ul.tabs li a:focus-visible {
	outline-offset: -2px;
}

/* Phones: wrap the tabs so every tab is visible (no hidden horizontal scroller). */
@media (max-width: 599px) {
	.vs-theme div.product .woocommerce-tabs ul.tabs {
		flex-wrap: wrap;
		gap: 0 24px;
		overflow: visible;
	}
}

.vs-theme div.product .woocommerce-tabs .panel,
.vs-theme div.product .woocommerce-tabs .woocommerce-Tabs-panel {
	max-width: 760px;
	margin: 0;
	padding: 32px 0 0;
	font-size: 16px;
	line-height: 1.75;
	overflow-wrap: break-word;
}

.vs-theme div.product .woocommerce-Tabs-panel > h2:first-child {
	margin: 0 0 16px;
	font-size: clamp(26px, 2.6vw, 32px);
}

.vs-theme div.product .woocommerce-Tabs-panel img {
	height: auto;
}

/* Supplier descriptions often contain wide tables: scroll inside, never the page. */
.vs-theme div.product .woocommerce-Tabs-panel--description table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	font-size: 14px;
}

/* Supplier HTML with fixed widths / inline image sizes: keep it inside the column. */
.vs-theme div.product :is(.woocommerce-Tabs-panel--description, .woocommerce-product-details__short-description) {
	overflow-x: auto;
}

.vs-theme div.product :is(.woocommerce-Tabs-panel--description, .woocommerce-product-details__short-description) :is(img, video) {
	max-width: 100% !important;
	height: auto !important;
}

.vs-theme div.product :is(.woocommerce-Tabs-panel--description, .woocommerce-product-details__short-description) :is(div, section, p, span, figure, center, table)[style*="width"] {
	max-width: 100% !important;
}

.vs-theme div.product .woocommerce-Tabs-panel--description :where(th, td) {
	padding: 8px 10px;
	border-bottom: 1px solid var(--vs-line);
	text-align: left;
	vertical-align: top;
}

.vs-theme div.product .woocommerce-Tabs-panel :where(ul, ol) {
	padding-left: 1.3em;
}

/* Additional information */
.vs-theme table.shop_attributes {
	width: 100%;
	margin: 0;
	border: 0;
	border-top: 1px solid var(--vs-line);
	border-collapse: collapse;
}

.vs-theme table.shop_attributes th,
.vs-theme table.shop_attributes td {
	padding: 12px 12px 12px 0;
	border-top: 0;
	border-bottom: 1px solid var(--vs-line);
	background: transparent;
	line-height: 1.5;
	vertical-align: top;
}

.vs-theme table.shop_attributes th {
	width: 38%;
	color: var(--vs-ink);
	font-size: var(--vs-micro-size);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-align: left;
	text-transform: uppercase;
}

.vs-theme table.shop_attributes td {
	color: var(--vs-ink-2);
	font-size: 15px;
	font-style: normal;
}

.vs-theme table.shop_attributes td p {
	margin: 0;
	padding: 0;
}

.vs-theme table.shop_attributes tr:nth-child(even) th,
.vs-theme table.shop_attributes tr:nth-child(even) td {
	background: transparent;
}

/* ---- Reviews ------------------------------------------------------------- */

.vs-theme #reviews h2,
.vs-theme #reviews .woocommerce-Reviews-title {
	margin: 0 0 20px;
	font-family: var(--vs-font-display);
	font-size: clamp(26px, 2.6vw, 32px);
	font-weight: 500;
}

.vs-theme #reviews #comments ol.commentlist {
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
}

.vs-theme #reviews #comments ol.commentlist li {
	position: relative;
	margin: 0;
	padding: 20px 0;
	border: 0;
	border-bottom: 1px solid var(--vs-line);
	background: none;
}

.vs-theme #reviews #comments ol.commentlist li .comment_container {
	position: relative;
}

.vs-theme #reviews #comments ol.commentlist li img.avatar {
	position: absolute;
	top: 0;
	left: 0;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--vs-tile);
}

.vs-theme #reviews #comments ol.commentlist li .comment-text {
	margin: 0 0 0 56px;
	padding: 0;
	border: 0;
	border-radius: 0;
}

.vs-theme #reviews #comments ol.commentlist li .comment-text .star-rating {
	float: none;
	margin: 0 0 8px;
	font-size: 12px;
}

.vs-theme #reviews #comments ol.commentlist li .comment-text p.meta {
	margin: 0 0 8px;
	color: var(--vs-ink-2);
	font-size: 13px;
}

.vs-theme #reviews #comments ol.commentlist li .comment-text p.meta strong {
	color: var(--vs-ink);
	font-weight: 600;
}

.vs-theme #reviews #comments ol.commentlist li .comment-text .description p {
	margin: 0 0 8px;
}

.vs-theme #reviews .woocommerce-noreviews {
	color: var(--vs-ink-2);
}

.vs-theme #review_form_wrapper {
	margin-top: 24px;
	padding: clamp(20px, 3vw, 32px);
	border: 1px solid var(--vs-line);
	background: var(--vs-paper);
}

.vs-theme #review_form #respond {
	position: static;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

.vs-theme #review_form #respond .comment-reply-title {
	display: block;
	margin: 0 0 16px;
	font-family: var(--vs-font-display);
	font-size: 26px;
	font-weight: 500;
	line-height: 1.2;
}

.vs-theme #review_form #respond p {
	margin: 0 0 16px;
}

.vs-theme #review_form #respond label {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 500;
}

.vs-theme #review_form #respond input[type="text"],
.vs-theme #review_form #respond input[type="email"],
.vs-theme #review_form #respond textarea {
	width: 100%;
}

.vs-theme #review_form #respond .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 4px;
}

.vs-theme #review_form #respond .comment-form-cookies-consent label {
	display: inline;
	margin: 0;
	color: var(--vs-ink-2);
	font-weight: 400;
}

.vs-theme #review_form #respond .required {
	color: var(--vs-sale);
}

.vs-theme #review_form #respond .form-submit input {
	left: auto;
}

/* Rating picker: bigger stars with ~44px targets. */
.vs-theme p.stars {
	margin: 0;
}

.vs-theme p.stars span {
	display: inline-flex;
	gap: 0;
}

.vs-theme p.stars a {
	width: 44px;
	height: 44px;
	color: var(--vs-gold-text);
	font-size: 24px;
}

.vs-theme p.stars a::before {
	top: 10px;
	left: 10px;
	width: 1em;
	height: 1em;
	line-height: 1;
}

/* ---- Related & upsells --------------------------------------------------- */

.vs-theme div.product .related.products,
.vs-theme div.product .up-sells.upsells.products,
.vs-theme .related.products,
.vs-theme .up-sells.products {
	margin-top: clamp(56px, 7vw, 96px);
	padding-top: clamp(40px, 5vw, 64px);
	border-top: 1px solid var(--vs-line);
}

.vs-theme .related.products > h2,
.vs-theme .up-sells.products > h2,
.vs-theme .cross-sells > h2 {
	margin: 0 0 clamp(24px, 3vw, 40px);
	font-family: var(--vs-font-display);
	font-size: clamp(30px, 3.2vw, 44px);
	font-weight: 500;
	line-height: 1.1;
}

/* =============================================================================
   23 WooCommerce: notices (classic)
   Paper background, full 1px border, WooCommerce's own left icon, ink text.
   ========================================================================== */

.vs-theme .woocommerce-message,
.vs-theme .woocommerce-info,
.vs-theme .woocommerce-error {
	position: relative;
	width: auto;
	margin: 0 0 24px;
	padding: 16px 20px 16px 52px;
	border: 1px solid var(--vs-line);
	border-top: 1px solid var(--vs-line);
	border-radius: 0;
	background: var(--vs-paper);
	color: var(--vs-ink);
	font-size: 15px;
	line-height: 1.6;
	list-style: none outside;
	overflow-wrap: break-word;
}

.vs-theme .woocommerce-message::before,
.vs-theme .woocommerce-info::before,
.vs-theme .woocommerce-error::before {
	top: 17px;
	left: 20px;
	font-size: 18px;
	line-height: 1.2;
}

.vs-theme .woocommerce-message::before {
	color: var(--vs-gold-text);
}

.vs-theme .woocommerce-info::before {
	color: var(--vs-ink);
}

.vs-theme .woocommerce-error {
	border-color: var(--vs-sale);
}

.vs-theme .woocommerce-error::before {
	color: var(--vs-sale);
}

.vs-theme .woocommerce-error li {
	margin: 0;
	padding: 0;
}

.vs-theme .woocommerce-error li + li {
	margin-top: 4px;
}

.vs-theme .woocommerce-message a:not(.button),
.vs-theme .woocommerce-info a:not(.button),
.vs-theme .woocommerce-error a:not(.button) {
	color: var(--vs-ink);
	text-decoration: underline;
}

.vs-theme .woocommerce-message .button,
.vs-theme .woocommerce-info .button,
.vs-theme .woocommerce-error .button {
	float: none;
	min-height: 44px;
	margin: 12px 0 0;
	padding: 8px 20px;
}

@media (min-width: 600px) {
	.vs-theme .woocommerce-message .button,
	.vs-theme .woocommerce-info .button,
	.vs-theme .woocommerce-error .button {
		float: right;
		margin: -6px 0 -6px 16px;
	}
}

.vs-theme .woocommerce-notices-wrapper:empty {
	display: none;
}

.vs-theme .woocommerce-notices-wrapper > :last-child {
	margin-bottom: 24px;
}

/* Homepage (non-AJAX add-to-cart fallback): notices above the hero. */
.vs-home__notices .woocommerce-notices-wrapper:not(:empty) {
	padding-top: 24px;
}

/* =============================================================================
   24 WooCommerce: tables, forms, select2, my account, order details
   ========================================================================== */

/* ---- shop_table (account orders, order details, thank-you page) ---------- */

.vs-theme table.shop_table {
	width: 100%;
	margin: 0 0 32px;
	border: 1px solid var(--vs-line);
	border-collapse: collapse;
	border-radius: 0;
	background: transparent;
	font-size: 15px;
}

.vs-theme table.shop_table th,
.vs-theme table.shop_table td {
	padding: 14px 16px;
	border-top: 1px solid var(--vs-line);
	line-height: 1.5;
	vertical-align: middle;
}

.vs-theme table.shop_table thead th {
	border-top: 0;
	background: var(--vs-paper);
	color: var(--vs-ink);
	font-size: var(--vs-micro-size);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.vs-theme table.shop_table tfoot th,
.vs-theme table.shop_table tfoot td {
	font-weight: 500;
}

.vs-theme table.shop_table .button {
	min-height: 44px;
	padding: 6px 16px;
	font-size: 11px;
}

.vs-theme table.shop_table td.woocommerce-orders-table__cell-order-actions .button + .button {
	margin-left: 6px;
}

.vs-theme table.shop_table_responsive tr td::before {
	color: var(--vs-ink-2);
	font-size: var(--vs-micro-size);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.vs-theme ul.order_details,
.vs-theme ul.woocommerce-order-overview {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 0 0 32px;
	padding: 0;
	border: 1px solid var(--vs-line);
	list-style: none;
}

.vs-theme ul.order_details::before,
.vs-theme ul.order_details::after {
	content: none;
}

.vs-theme ul.order_details li {
	float: none;
	flex: 1 1 160px;
	margin: 0;
	padding: 16px 20px;
	border: 0;
	border-right: 1px solid var(--vs-line);
	color: var(--vs-ink-2);
	font-size: var(--vs-micro-size);
	letter-spacing: 0.12em;
	line-height: 1.6;
	text-transform: uppercase;
}

.vs-theme ul.order_details li:last-child {
	border-right: 0;
}

@media (max-width: 599px) {
	.vs-theme ul.order_details li {
		flex-basis: 100%;
		border-right: 0;
	}

	.vs-theme ul.order_details li + li {
		border-top: 1px solid var(--vs-line);
	}
}

.vs-theme ul.order_details li strong {
	display: block;
	overflow-wrap: anywhere; /* long emails at 360px */
	margin-top: 4px;
	color: var(--vs-ink);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
}

.vs-theme .woocommerce-order-details__title,
.vs-theme .woocommerce-column__title,
.vs-theme .woocommerce-customer-details h2,
.vs-theme .woocommerce-order-downloads__title {
	margin: 0 0 16px;
	font-family: var(--vs-font-display);
	font-size: clamp(26px, 2.6vw, 32px);
	font-weight: 500;
}

.vs-theme .woocommerce-customer-details address,
.vs-theme .woocommerce-Address address {
	padding: 20px;
	overflow-wrap: anywhere;
	border: 1px solid var(--vs-line);
	border-radius: 0;
	background: var(--vs-paper);
	font-style: normal;
	line-height: 1.7;
}

.vs-theme .woocommerce-thankyou-order-received,
.vs-theme .woocommerce-notice--success {
	font-family: var(--vs-font-display);
	font-size: clamp(24px, 2.6vw, 30px);
	line-height: 1.3;
}

/* ---- Classic WooCommerce forms ------------------------------------------- */

.vs-theme form .form-row {
	margin: 0 0 16px;
	padding: 0;
}

.vs-theme form .form-row label {
	display: block;
	margin-bottom: 6px;
	color: var(--vs-ink);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
}

.vs-theme form .form-row label.checkbox,
.vs-theme form .form-row label.woocommerce-form__label-for-checkbox,
.vs-theme form .woocommerce-form__label-for-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 44px;
	font-weight: 400;
}

.vs-theme form .form-row .required {
	color: var(--vs-sale);
	text-decoration: none;
}

.vs-theme form .form-row input.input-text,
.vs-theme form .form-row textarea,
.vs-theme form .form-row select {
	width: 100%;
	min-height: 52px;
	margin: 0;
	padding: 12px 16px;
	border: 1px solid var(--vs-field-border);
	border-radius: 0;
	background-color: var(--vs-white);
	color: var(--vs-ink);
	font-size: 16px;
	line-height: 1.4;
}

.vs-theme form .form-row textarea {
	min-height: 140px;
}

.vs-theme form .form-row input.input-text:focus,
.vs-theme form .form-row textarea:focus,
.vs-theme form .form-row select:focus {
	border-color: var(--vs-ink);
	outline: 2px solid var(--vs-focus);
	outline-offset: 1px;
}

.vs-theme form .form-row.woocommerce-invalid input.input-text,
.vs-theme form .form-row.woocommerce-invalid select {
	border-color: var(--vs-sale);
}

.vs-theme form .form-row.woocommerce-invalid label {
	color: var(--vs-sale);
}

.vs-theme form .form-row .description,
.vs-theme form .form-row em {
	color: var(--vs-ink-2);
	font-size: 13px;
}

.vs-theme .password-input {
	display: block;
	position: relative;
}

.vs-theme .password-input .show-password-input {
	top: 50%;
	right: 12px;
	width: 44px;
	height: 44px;
	transform: translateY(-50%);
	color: var(--vs-ink-2);
}

/* ---- Select2 / SelectWoo (address country/state) ------------------------- */

.vs-theme .select2-container .select2-selection--single {
	height: 52px;
	border: 1px solid var(--vs-field-border);
	border-radius: 0;
	background: var(--vs-white);
}

.vs-theme .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding-left: 16px;
	padding-right: 40px;
	color: var(--vs-ink);
	line-height: 50px;
}

.vs-theme .select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 1px;
	right: 10px;
	height: 50px;
}

.vs-theme .select2-container--focus .select2-selection--single,
.vs-theme .select2-container--open .select2-selection--single {
	border-color: var(--vs-ink);
	outline: 2px solid var(--vs-focus);
	outline-offset: 1px;
}

.vs-theme .select2-dropdown {
	border-color: var(--vs-field-border);
	border-radius: 0;
}

.vs-theme .select2-container--default .select2-results__option--highlighted[aria-selected],
.vs-theme .select2-container--default .select2-results__option--highlighted[data-selected] {
	background: var(--vs-ink);
	color: var(--vs-ivory);
}

/* ---- My Account ---------------------------------------------------------- */

.vs-account .vs-page__content > .woocommerce {
	min-width: 0;
}

.vs-theme .woocommerce-MyAccount-navigation,
.vs-theme .woocommerce-MyAccount-content {
	float: none;
	width: auto;
	min-width: 0;
}

.vs-theme .woocommerce-MyAccount-navigation {
	margin-bottom: 32px;
}

.vs-theme .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--vs-ink);
	list-style: none;
}

.vs-theme .woocommerce-MyAccount-navigation ul li {
	margin: 0;
	border-bottom: 1px solid var(--vs-line);
}

.vs-theme .woocommerce-MyAccount-navigation ul li a {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 10px 12px;
	color: var(--vs-ink);
	font-size: 15px;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.vs-theme .woocommerce-MyAccount-navigation ul li a:hover {
	background: var(--vs-paper);
	color: var(--vs-gold-text);
}

.vs-theme .woocommerce-MyAccount-navigation ul li.is-active a {
	background: var(--vs-paper);
	color: var(--vs-ink);
	font-weight: 600;
}

.vs-theme .woocommerce-MyAccount-navigation-link--customer-logout a {
	color: var(--vs-ink-2);
}

.vs-theme .woocommerce-MyAccount-content > p:first-child {
	margin-top: 0;
}

.vs-theme .woocommerce-MyAccount-content :where(h2, h3) {
	font-size: clamp(26px, 2.6vw, 32px);
}

.vs-theme .woocommerce-MyAccount-content fieldset {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--vs-line);
}

@media (min-width: 1024px) {
	.vs-account .vs-page__content > .woocommerce:has(> .woocommerce-MyAccount-navigation) {
		display: grid;
		grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
		align-items: start;
		gap: 0 64px;
	}

	.vs-account .vs-page__content > .woocommerce:has(> .woocommerce-MyAccount-navigation)::before,
	.vs-account .vs-page__content > .woocommerce:has(> .woocommerce-MyAccount-navigation)::after {
		content: none;
	}

	.vs-account .vs-page__content > .woocommerce:has(> .woocommerce-MyAccount-navigation) > * {
		grid-column: 1 / -1;
	}

	.vs-account .vs-page__content > .woocommerce > .woocommerce-MyAccount-navigation {
		grid-column: 1;
		margin-bottom: 0;
	}

	.vs-account .vs-page__content > .woocommerce > .woocommerce-MyAccount-content {
		grid-column: 2;
	}
}

/* Addresses */
.vs-theme .woocommerce-Addresses {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
}

.vs-theme .woocommerce-Addresses::before,
.vs-theme .woocommerce-Addresses::after {
	content: none;
}

.vs-theme .woocommerce-Addresses .woocommerce-Address {
	float: none;
	width: auto;
	margin: 0;
}

.vs-theme .woocommerce-Address-title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 16px;
	margin-bottom: 12px;
}

.vs-theme .woocommerce-Address-title :where(h2, h3) {
	margin: 0;
	font-size: 26px;
}

.vs-theme .woocommerce-Address-title .edit {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	float: none;
	color: var(--vs-ink);
	font-size: var(--vs-micro-size);
	font-weight: 500;
	letter-spacing: var(--vs-micro-track);
	text-transform: uppercase;
}

@media (min-width: 600px) {
	.vs-theme .woocommerce-Addresses {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Login / register */
.vs-theme form.login,
.vs-theme form.register,
.vs-theme form.lost_reset_password,
.vs-theme form.woocommerce-form-login,
.vs-theme form.woocommerce-form-register {
	margin: 0 0 32px;
	padding: clamp(20px, 3vw, 32px);
	border: 1px solid var(--vs-line);
	border-radius: 0;
	background: var(--vs-paper);
	text-align: left;
}

.vs-theme .woocommerce-form-login__rememberme {
	margin-right: 16px;
}

.vs-theme .woocommerce-form-login .form-row:has(> button[type="submit"]),
.vs-theme .woocommerce-form-register .form-row:has(> button[type="submit"]) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
}

.vs-theme .woocommerce-LostPassword,
.vs-theme .lost_password {
	margin: 12px 0 0;
	font-size: 14px;
}

.vs-theme #customer_login.col2-set,
.vs-theme .u-columns.col2-set {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 32px;
	width: 100%;
}

.vs-theme #customer_login.col2-set::before,
.vs-theme #customer_login.col2-set::after,
.vs-theme .u-columns.col2-set::before,
.vs-theme .u-columns.col2-set::after {
	content: none;
	display: none;
}

.vs-theme #customer_login .col-1,
.vs-theme #customer_login .col-2,
.vs-theme #customer_login .u-column1,
.vs-theme #customer_login .u-column2 {
	float: none;
	width: auto;
	max-width: none;
	min-width: 0;
}

.vs-theme #customer_login h2 {
	margin: 0 0 16px;
	font-size: clamp(28px, 3vw, 36px);
}

.vs-theme #customer_login form.login,
.vs-theme #customer_login form.register {
	margin: 0;
}

@media (min-width: 1024px) {
	.vs-theme #customer_login.col2-set,
	.vs-theme .u-columns.col2-set {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 48px;
	}
}

/* Generic col2-set (addresses on order details etc.) */
.vs-theme .col2-set:not(#customer_login):not(.u-columns) {
	width: 100%;
}

@media (max-width: 767px) {
	.vs-theme .col2-set:not(#customer_login):not(.u-columns) .col-1,
	.vs-theme .col2-set:not(#customer_login):not(.u-columns) .col-2 {
		float: none;
		width: 100%;
	}

	.vs-theme .col2-set:not(#customer_login):not(.u-columns) .col-2 {
		margin-top: 24px;
	}
}

/* Payment methods / downloads tables in account */
.vs-theme .woocommerce-MyAccount-paymentMethods .button,
.vs-theme .woocommerce-MyAccount-downloads .button {
	min-height: 44px;
}

/* =============================================================================
   25 WooCommerce Blocks: cart & checkout
   Colours, type, borders and radii only. No display / visibility / order
   changes on anything a gateway renders (express buttons, Stripe Elements,
   PayPal buttons, place-order).
   ========================================================================== */

.vs-theme .wp-block-woocommerce-cart,
.vs-theme .wp-block-woocommerce-checkout,
.vs-theme .wc-block-cart,
.vs-theme .wc-block-checkout {
	color: var(--vs-ink);
	font-family: var(--vs-font-ui);
}

/* Intro text above the checkout block (plain paragraph content). */
.vs-checkout .vs-page__content > p,
.vs-cart .vs-page__content > p {
	max-width: 760px;
	margin: 0 0 24px;
	color: var(--vs-ink-2);
	font-size: 15px;
	line-height: 1.7;
}

.vs-checkout .vs-page__content > p a,
.vs-cart .vs-page__content > p a {
	color: var(--vs-ink);
}

/* Headings */
.vs-theme .wc-block-components-title,
.vs-theme .wc-block-components-title.wc-block-components-title,
.vs-theme .wc-block-components-checkout-step__title {
	color: var(--vs-ink);
	font-family: var(--vs-font-display);
	font-size: clamp(24px, 2.4vw, 28px);
	font-weight: 500;
	line-height: 1.2;
}

.vs-theme .wc-block-cart__totals-title,
.vs-theme .wc-block-components-checkout-order-summary__title-text,
.vs-theme .wc-block-cart .wc-block-cart__totals-title {
	color: var(--vs-ink);
	font-family: var(--vs-font-ui);
	font-size: var(--vs-micro-size);
	font-weight: 600;
	letter-spacing: var(--vs-micro-track);
	text-transform: uppercase;
}

.vs-theme .wc-block-components-checkout-step__description {
	color: var(--vs-ink-2);
	font-size: 14px;
}

.vs-theme .wc-block-components-checkout-step__heading-content,
.vs-theme .wc-block-components-checkout-step__heading-content a {
	color: var(--vs-ink);
	font-size: 14px;
}

.vs-theme .wc-block-components-checkout-step--with-step-number .wc-block-components-checkout-step__container::after,
.vs-theme .wc-block-components-checkout-step--with-step-number .wc-block-components-checkout-step__title::before {
	border-color: var(--vs-line);
}

/* Text inputs, textarea, selects, combobox */
.vs-theme .wc-block-components-text-input input[type="text"],
.vs-theme .wc-block-components-text-input input[type="email"],
.vs-theme .wc-block-components-text-input input[type="tel"],
.vs-theme .wc-block-components-text-input input[type="number"],
.vs-theme .wc-block-components-text-input input[type="password"],
.vs-theme .wc-block-components-text-input input[type="url"],
.vs-theme .wc-block-components-form .wc-block-components-text-input input[type="text"],
.vs-theme .wc-block-components-form .wc-block-components-text-input input[type="email"],
.vs-theme .wc-block-components-form .wc-block-components-text-input input[type="tel"],
.vs-theme .wc-block-components-form .wc-block-components-text-input input[type="number"],
.vs-theme .wc-block-components-form .wc-block-components-text-input input[type="password"],
.vs-theme .wc-block-components-form .wc-block-components-text-input input[type="url"],
.vs-theme .wc-block-components-textarea,
.vs-theme .wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input,
.vs-theme .wc-block-components-form .wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input,
.vs-theme .wc-blocks-components-select .wc-blocks-components-select__select {
	min-height: 52px;
	border: 1px solid var(--vs-field-border);
	border-radius: 0;
	background-color: var(--vs-white);
	color: var(--vs-ink);
	font-family: var(--vs-font-ui);
	box-shadow: none;
}

.vs-theme .wc-block-components-text-input input:focus,
.vs-theme .wc-block-components-form .wc-block-components-text-input input:focus,
.vs-theme .wc-block-components-textarea:focus,
.vs-theme .wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input:focus,
.vs-theme .wc-blocks-components-select .wc-blocks-components-select__select:focus {
	border-color: var(--vs-ink);
	outline: 2px solid var(--vs-focus);
	outline-offset: 1px;
	box-shadow: none;
}

.vs-theme .wc-blocks-components-select .wc-blocks-components-select__select {
	background-image: none; /* the block draws its own chevron */
}

.vs-theme .wc-blocks-components-select .wc-blocks-components-select__container {
	border-radius: 0;
	background: var(--vs-white);
}

.vs-theme .wc-block-components-text-input label,
.vs-theme .wc-block-components-combobox .wc-block-components-combobox-control label,
.vs-theme .wc-blocks-components-select .wc-blocks-components-select__label {
	color: var(--vs-ink-2);
	font-family: var(--vs-font-ui);
}

/* Error states keep a visible (sale-red) border. */
.vs-theme .wc-block-components-text-input.has-error input,
.vs-theme .wc-block-components-form .wc-block-components-text-input.has-error input,
.vs-theme .wc-block-components-combobox.has-error .wc-block-components-combobox-control input.components-combobox-control__input,
.vs-theme .wc-blocks-components-select.has-error .wc-blocks-components-select__select,
.vs-theme .has-error .wc-blocks-components-select__select {
	border-color: var(--vs-sale);
}

.vs-theme .wc-block-components-text-input.has-error label,
.vs-theme .wc-block-components-validation-error,
.vs-theme .wc-block-components-validation-error > p {
	color: var(--vs-sale);
}

/* Checkboxes (custom WooCommerce Blocks control) */
.vs-theme .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] {
	border: 1px solid var(--vs-field-border);
	border-radius: 0;
	background: var(--vs-white);
}

.vs-theme .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked {
	border-color: var(--vs-ink);
	background: var(--vs-ink);
}

.vs-theme .wc-block-components-checkbox .wc-block-components-checkbox__mark {
	fill: var(--vs-ivory);
}

.vs-theme .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:focus {
	outline: 2px solid var(--vs-focus);
	outline-offset: 2px;
}

.vs-theme .wc-block-components-checkbox label {
	font-weight: 400;
}

/* Radio options (shipping rates, payment method accordion) */
.vs-theme .wc-block-components-radio-control__input {
	border-color: var(--vs-field-border);
}

.vs-theme .wc-block-components-radio-control__input:checked {
	border-color: var(--vs-ink);
}

.vs-theme .wc-block-components-radio-control__input:checked::before {
	background: var(--vs-ink);
}

.vs-theme .wc-block-components-radio-control__input:focus {
	outline: 2px solid var(--vs-focus);
	outline-offset: 2px;
}

.vs-theme .wc-block-components-radio-control--highlight-checked::after,
.vs-theme .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.vs-theme .wc-block-components-radio-control--highlight-checked label.wc-block-components-radio-control__option--checked-option-highlighted {
	border-radius: 0;
	box-shadow: inset 0 0 0 1px var(--vs-ink);
}

.vs-theme .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option,
.vs-theme .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option {
	border-radius: 0;
}

.vs-theme .wc-block-components-radio-control__label,
.vs-theme .wc-block-components-radio-control__option-layout {
	color: var(--vs-ink);
}

.vs-theme .wc-block-components-radio-control__description,
.vs-theme .wc-block-components-radio-control__secondary-description {
	color: var(--vs-ink-2);
}

/* Primary buttons: proceed, place order, coupon apply etc. (no display changes). */
.vs-theme .wc-block-components-button:not(.is-link, .wc-block-components-notice-banner__dismiss),
.vs-theme .wc-block-cart__submit-button,
.vs-theme .wc-block-components-checkout-place-order-button {
	min-height: 56px;
	border: 1px solid var(--vs-ink);
	border-radius: 0;
	background-color: var(--vs-ink);
	color: var(--vs-ivory);
	font-family: var(--vs-font-ui);
	font-size: var(--vs-micro-size);
	font-weight: 500;
	letter-spacing: var(--vs-micro-track);
	text-decoration: none;
	text-transform: uppercase;
	box-shadow: none;
}

.vs-theme .wc-block-components-button:not(.is-link, .wc-block-components-notice-banner__dismiss):hover,
.vs-theme .wc-block-cart__submit-button:hover,
.vs-theme .wc-block-components-checkout-place-order-button:hover {
	border-color: var(--vs-ink-hover);
	background-color: var(--vs-ink-hover);
	color: var(--vs-ivory);
}

.vs-theme .wc-block-components-button:not(.is-link, .wc-block-components-notice-banner__dismiss):focus-visible,
.vs-theme .wc-block-cart__submit-button:focus-visible,
.vs-theme .wc-block-components-checkout-place-order-button:focus-visible {
	outline: 2px solid var(--vs-focus);
	outline-offset: 3px;
	box-shadow: none;
}

.vs-theme .wc-block-components-button:not(.is-link, .wc-block-components-notice-banner__dismiss):disabled,
.vs-theme .wc-block-components-button:not(.is-link, .wc-block-components-notice-banner__dismiss)[aria-disabled="true"] {
	opacity: 0.5;
}

.vs-theme .wc-block-components-button:not(.is-link, .wc-block-components-notice-banner__dismiss).outlined {
	background-color: transparent;
	color: var(--vs-ink);
}

.vs-theme .wc-block-components-button:not(.is-link, .wc-block-components-notice-banner__dismiss).outlined:hover {
	background-color: var(--vs-ink);
	color: var(--vs-ivory);
}

.vs-theme .wc-block-components-button:not(.is-link, .wc-block-components-notice-banner__dismiss) .wc-block-components-button__text {
	line-height: 1.25;
}

.vs-theme .wc-block-components-totals-coupon__button.wc-block-components-button:not(.is-link, .wc-block-components-notice-banner__dismiss) {
	min-height: 52px;
}

.vs-theme .wc-block-components-button.is-link,
.vs-theme .wc-block-components-checkout-return-to-cart-button {
	color: var(--vs-ink);
	font-size: 14px;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Cart items */
.vs-theme .wc-block-cart-items {
	border-color: var(--vs-line);
}

.vs-theme .wc-block-cart-items .wc-block-cart-items__header th,
.vs-theme .wc-block-cart-items__header {
	color: var(--vs-ink-2);
	font-size: var(--vs-micro-size);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.vs-theme .wc-block-cart-items td,
.vs-theme .wc-block-cart-items .wc-block-cart-items__row td,
.vs-theme .wc-block-cart .wc-block-cart-items td {
	border-color: var(--vs-line);
}

.vs-theme .wc-block-cart-items__row .wc-block-cart-item__image img,
.vs-theme .wc-block-cart-item__image img {
	aspect-ratio: 1 / 1;
	padding: 6%;
	border: 1px solid var(--vs-line);
	background: var(--vs-white);
	object-fit: contain;
}

.vs-theme .wc-block-components-product-name {
	color: var(--vs-ink);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.vs-theme a.wc-block-components-product-name:hover {
	color: var(--vs-gold-text);
	text-decoration: underline;
}

.vs-theme .wc-block-components-product-metadata,
.vs-theme .wc-block-components-product-details {
	color: var(--vs-ink-2);
	font-size: 13px;
}

.vs-theme .wc-block-components-product-price,
.vs-theme .wc-block-components-formatted-money-amount {
	color: var(--vs-ink);
	font-variant-numeric: tabular-nums;
}

.vs-theme .wc-block-components-product-price__regular {
	color: var(--vs-ink-2);
}

.vs-theme .wc-block-components-sale-badge,
.vs-theme .wc-block-components-product-badge {
	border-color: var(--vs-sale);
	border-radius: 999px;
	background: var(--vs-sale);
	color: var(--vs-white);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
}

.vs-theme .wc-block-cart-item__remove-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px; /* touch target */
	color: var(--vs-ink-2);
	font-size: 13px;
	text-decoration: underline;
}

.vs-theme .wc-block-cart-item__remove-link:hover {
	color: var(--vs-sale);
}

/* Quantity selector */
.vs-theme .wc-block-components-quantity-selector {
	border: 1px solid var(--vs-field-border);
	border-radius: 0;
	background: var(--vs-white);
	width: 132px; /* 3 x 44px: room for 44px +/- buttons */
	max-width: 100%;
}

.vs-theme .wc-block-components-quantity-selector::after {
	border-radius: 0;
	border-color: transparent;
}

.vs-theme .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
	min-height: 0;
	padding: 4px;
	border: 0;
	background: transparent;
	color: var(--vs-ink);
	font-variant-numeric: tabular-nums;
	box-shadow: none;
}

.vs-theme .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
	min-width: 44px;
	color: var(--vs-ink);
	opacity: 1;
}

.vs-theme .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:disabled {
	opacity: 0.35;
}

/* Totals & order summary panel (paper, hairline). */
.vs-theme .wp-block-woocommerce-cart-totals-block,
.vs-theme .wp-block-woocommerce-checkout-order-summary-block {
	padding: clamp(16px, 2vw, 24px);
	border: 1px solid var(--vs-line);
	border-radius: 0;
	background: var(--vs-paper);
}

.vs-theme .wc-block-components-totals-wrapper {
	border-color: var(--vs-line);
}

.vs-theme .wc-block-components-totals-wrapper::after {
	border-color: var(--vs-line);
}

.vs-theme .wc-block-components-totals-item__label {
	color: var(--vs-ink);
}

.vs-theme .wc-block-components-totals-item__description,
.vs-theme .wc-block-components-totals-shipping__via {
	color: var(--vs-ink-2);
	font-size: 13px;
}

.vs-theme .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.vs-theme .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: 18px;
	font-weight: 600;
}

.vs-theme .wc-block-components-panel__button,
.vs-theme .wc-block-components-totals-coupon .wc-block-components-panel__button {
	color: var(--vs-ink);
	font-size: 14px;
	font-weight: 500;
}

.vs-theme .wc-block-components-order-summary-item__image > img {
	border: 1px solid var(--vs-line);
	background: var(--vs-white);
	object-fit: contain;
}

.vs-theme .wc-block-components-order-summary-item__quantity {
	border-color: var(--vs-ink);
	background: var(--vs-ink);
	color: var(--vs-ivory);
	box-shadow: 0 0 0 2px var(--vs-paper);
}

.vs-theme .wc-block-components-order-summary-item__description .wc-block-components-product-name {
	font-size: 14px;
}

/* Sticky checkout sidebar must clear the sticky header. */
.vs-theme .wc-block-checkout__sidebar.is-sticky,
.vs-theme .is-large .wc-block-checkout__sidebar.is-sticky {
	top: calc(var(--vs-admin-bar) + var(--vs-header-h) + 16px);
}

/* Express payment area: borders/colours only (buttons are gateway iframes). */
.vs-theme .wc-block-components-express-payment--checkout .wc-block-components-express-payment__title-container::before,
.vs-theme .wc-block-components-express-payment--checkout .wc-block-components-express-payment__title-container::after,
.vs-theme .wc-block-components-express-payment--checkout .wc-block-components-express-payment__content {
	border-color: var(--vs-line);
}

.vs-theme .wc-block-components-express-payment__title,
.vs-theme .wc-block-components-express-payment__title-container .wc-block-components-title {
	color: var(--vs-ink-2);
	font-family: var(--vs-font-ui);
	font-size: var(--vs-micro-size);
	font-weight: 500;
	letter-spacing: var(--vs-micro-track);
	text-transform: uppercase;
}

.vs-theme .wc-block-components-express-payment-continue-rule {
	color: var(--vs-ink-2);
	font-size: var(--vs-micro-size);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.vs-theme .wc-block-components-express-payment-continue-rule::before,
.vs-theme .wc-block-components-express-payment-continue-rule::after {
	border-color: var(--vs-line);
}

/* Terms, policies, misc text */
.vs-theme .wc-block-checkout__terms,
.vs-theme .wc-block-components-checkout-policies {
	color: var(--vs-ink-2);
	font-size: 13px;
	line-height: 1.6;
}

.vs-theme .wc-block-checkout__terms a,
.vs-theme .wc-block-components-checkout-policies a {
	color: var(--vs-ink);
}

.vs-theme .wc-block-components-address-card {
	border-color: var(--vs-line);
	border-radius: 0;
	background: var(--vs-white);
}

.vs-theme .wc-block-components-address-card__edit {
	color: var(--vs-ink);
}

/* Empty cart block */
.vs-theme .wc-block-cart__empty-cart__title,
.vs-theme .wp-block-woocommerce-empty-cart-block h2 {
	font-family: var(--vs-font-display);
	font-size: clamp(30px, 3.4vw, 44px);
	font-weight: 500;
}

.vs-theme .wp-block-woocommerce-empty-cart-block .wp-block-separator {
	border-color: var(--vs-line);
}

.vs-theme .wc-block-grid__product-image img {
	aspect-ratio: 1 / 1;
	padding: 6%;
	background: var(--vs-white);
	object-fit: contain;
}

.vs-theme .wc-block-grid__product-title {
	color: var(--vs-ink);
	font-family: var(--vs-font-ui);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
}

.vs-theme .wc-block-grid__product-link {
	color: var(--vs-ink);
	text-decoration: none;
}

.vs-theme .wc-block-grid__product-onsale {
	border-color: var(--vs-sale);
	border-radius: 999px;
	background: var(--vs-sale);
	color: var(--vs-white);
}

/* Narrow screens: keep block content inside the gutter. */
@media (max-width: 599px) {
	.vs-theme .wp-block-woocommerce-cart-totals-block,
	.vs-theme .wp-block-woocommerce-checkout-order-summary-block {
		padding: 16px;
	}
}

/* =============================================================================
   26 WooCommerce Blocks: notices & snackbar
   ========================================================================== */

.vs-theme .wc-block-components-notice-banner {
	border: 1px solid var(--vs-line);
	border-radius: 0;
	background-color: var(--vs-paper);
	color: var(--vs-ink);
	font-size: 15px;
	line-height: 1.6;
}

.vs-theme .wc-block-components-notice-banner > svg {
	background-color: var(--vs-ink);
	fill: var(--vs-ivory);
}

.vs-theme .wc-block-components-notice-banner.is-success > svg {
	background-color: var(--vs-gold-text);
}

.vs-theme .wc-block-components-notice-banner.is-error {
	border-color: var(--vs-sale);
	background-color: var(--vs-paper);
}

.vs-theme .wc-block-components-notice-banner.is-error > svg {
	background-color: var(--vs-sale);
}

.vs-theme .wc-block-components-notice-banner.is-warning > svg {
	background-color: var(--vs-gold-text);
}

.vs-theme .wc-block-components-notice-banner.is-info,
.vs-theme .wc-block-components-notice-banner.is-success,
.vs-theme .wc-block-components-notice-banner.is-warning {
	border-color: var(--vs-line);
	background-color: var(--vs-paper);
}

.vs-theme .wc-block-components-notice-banner a,
.vs-theme .wc-block-components-notice-banner .wc-forward {
	color: var(--vs-ink);
	text-decoration: underline;
}

.vs-theme .wc-block-components-notice-banner .wc-block-components-button.is-link {
	color: var(--vs-ink);
}

.vs-theme .wc-block-components-notice-banner__dismiss {
	color: var(--vs-ink);
}

.vs-theme .wc-block-components-notice-banner__dismiss svg {
	fill: currentColor;
}

/* Snackbar (transient notices from the cart/checkout blocks). */
.vs-theme .wc-block-components-notice-snackbar-list .wc-block-components-notice-banner,
.vs-theme .wc-block-components-notice-snackbar {
	border-color: var(--vs-ink);
	border-radius: 0;
	background-color: var(--vs-ink);
	color: var(--vs-ivory);
	box-shadow: 0 16px 40px -20px rgba(30, 27, 22, 0.6);
}

.vs-theme .wc-block-components-notice-snackbar-list .wc-block-components-notice-banner > svg,
.vs-theme .wc-block-components-notice-snackbar > svg {
	background-color: var(--vs-ivory);
	fill: var(--vs-ink);
}

.vs-theme .wc-block-components-notice-snackbar-list .wc-block-components-notice-banner a,
.vs-theme .wc-block-components-notice-snackbar-list .wc-block-components-notice-banner__dismiss {
	color: var(--vs-ivory);
}

/* =============================================================================
   27 Third-party light touches
   ========================================================================== */

/* WPForms (newsletter): use its CSS variables where the modern markup is enabled. */
.vs-newsletter__form .wpforms-container {
	--wpforms-field-border-radius: 0px;
	--wpforms-field-border-color: var(--vs-field-border);
	--wpforms-field-size-input-height: 52px;
	--wpforms-button-border-radius: 0px;
	--wpforms-button-background-color: var(--vs-ink);
	--wpforms-button-text-color: var(--vs-ivory);
	--wpforms-label-color: var(--vs-ink);
	margin: 0;
}

/* WooCommerce store notice (demo / site-wide banner). */
.vs-theme p.demo_store,
.vs-theme .woocommerce-store-notice {
	background: var(--vs-ink);
	color: var(--vs-ivory);
	font-family: var(--vs-font-ui);
	font-size: 13px;
	letter-spacing: 0.04em;
}

.vs-theme .woocommerce-store-notice a,
.vs-theme p.demo_store a {
	color: var(--vs-ivory);
	text-decoration: underline;
}

/* Elementor-built pages (default template): let Elementor manage widths. */
.vs-page-main--elementor {
	padding-block: 0;
}

.vs-page-main--elementor > .vs-container {
	max-width: none;
	padding-inline: 0;
}

/* =============================================================================
   28 Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
		scroll-behavior: auto !important;
	}

	.vs-index__link:hover .vs-index__name,
	.vs-index__link:hover .vs-index__arrow,
	.vs-link-arrow:hover .vs-icon,
	.vs-index__feature:hover .vs-index__feature-img,
	.vs-post-card:hover .vs-post-card__img {
		transform: none;
	}
}

/* ==========================================================================
   Staging fixes (1.0.1): explicit heading colors on dark sections
   ========================================================================== */
.vs-hero__title,
.vs-section--dark :is(h1, h2, h3, h4) {
	color: var(--vs-ivory);
}

/* Category "About" block below the grid */
.vs-term-about {
	margin-top: clamp(48px, 6vw, 80px);
	border-top: 1px solid var(--vs-line);
	border-bottom: 1px solid var(--vs-line);
}
.vs-term-about__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 64px;
	cursor: pointer;
	list-style: none;
	font-family: var(--vs-font-display);
	font-size: clamp(22px, 2.2vw, 28px);
	font-weight: 500;
}
.vs-term-about__summary::-webkit-details-marker { display: none; }
.vs-term-about__summary::after {
	content: "+";
	font-family: var(--vs-font-ui);
	font-size: 22px;
	font-weight: 400;
	color: var(--vs-ink-2);
}
.vs-term-about[open] .vs-term-about__summary::after { content: "\2212"; }
.vs-term-about__body {
	max-width: 760px;
	padding-bottom: 32px;
	color: var(--vs-ink-2);
}