/**
 * Vastraa — WooCommerce: shop archive, product page, cart, checkout, account.
 */

/* ==========================================================================
   1. Shop archive
   ========================================================================== */

.vs-archivehead {
	padding-block: var(--vs-5) var(--vs-6);
}

.vs-archivehead__inner {
	display: grid;
	gap: var(--vs-5);
}

.vs-archivehead--media .vs-archivehead__inner {
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
	align-items: center;
}

.vs-archivehead__title {
	margin: 0;
	font-size: var(--vs-fs-h1);
}

.vs-archivehead__desc {
	margin-top: var(--vs-3);
	max-width: 62ch;
	color: var(--vs-ink-50);
	font-size: var(--vs-fs-sm);
	line-height: 1.75;
}

.vs-archivehead__img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.vs-subcats {
	margin-top: var(--vs-5);
}

.vs-subcats ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vs-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 900px) {
	.vs-archivehead--media .vs-archivehead__inner {
		grid-template-columns: 1fr;
	}

	.vs-subcats ul {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		padding-bottom: 4px;
	}

	.vs-subcats ul::-webkit-scrollbar {
		display: none;
	}
}

/*
 * Filters live in an off-canvas panel at every screen size, so the grid gets
 * the full page width.
 */
.vs-shoplayout {
	padding-bottom: var(--vs-section);
}

/* Toolbar */
.vs-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--vs-3);
	margin-bottom: var(--vs-5);
	padding-bottom: var(--vs-4);
	border-bottom: 1px solid var(--vs-line);
}

.vs-toolbar__count {
	margin: 0;
	color: var(--vs-ink-50);
	font-size: var(--vs-fs-sm);
}

.vs-toolbar__count strong {
	color: var(--vs-ink);
	font-weight: 500;
}

.vs-toolbar__controls {
	display: flex;
	align-items: center;
	gap: var(--vs-3);
}

.vs-toolbar__filter {
	position: relative;
}

/* Count of applied filters, so the hidden panel still advertises its state. */
.vs-toolbar__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: var(--vs-radius-pill);
	background: var(--vs-accent);
	color: var(--vs-accent-ink);
	font-size: 0.625rem;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.vs-density {
	display: inline-flex;
	border: 1px solid var(--vs-line);
	border-radius: var(--vs-radius);
	overflow: hidden;
}

.vs-density__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 36px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--vs-ink-35);
	font-family: inherit;
	font-size: var(--vs-fs-xs);
	cursor: pointer;
	transition: background-color 0.18s var(--vs-ease), color 0.18s var(--vs-ease);
}

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

.vs-density__btn + .vs-density__btn {
	border-left: 1px solid var(--vs-line);
}

.vs-density__btn.is-active {
	background: var(--vs-ink);
	color: var(--vs-paper);
}

.vs-sort {
	display: flex;
	align-items: center;
	gap: var(--vs-2);
}

.vs-sort__select {
	min-height: 38px;
	padding-block: 0;
	padding-left: var(--vs-3);
	border-color: var(--vs-line);
	font-size: var(--vs-fs-sm);
}

@media (max-width: 640px) {
	.vs-toolbar {
		gap: var(--vs-2);
	}

	.vs-toolbar__count {
		width: 100%;
		order: -1;
	}

	.vs-toolbar__controls {
		width: 100%;
		justify-content: space-between;
	}

	.vs-sort__select {
		max-width: 190px;
	}
}

/* Load more */
.vs-loadmore {
	margin-top: var(--vs-7);
	text-align: center;
}

.vs-loadmore__progress {
	margin-bottom: var(--vs-3);
	color: var(--vs-ink-35);
	font-size: var(--vs-fs-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.vs-loadmore__btn {
	min-width: 240px;
}

.vs-loadmore__fallback--hidden {
	display: none;
}

.woocommerce-no-products-found {
	padding-block: var(--vs-8);
	text-align: center;
}

/* ==========================================================================
   2. Product detail page
   ========================================================================== */

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

.vs-pdp__top {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: clamp(1.5rem, 1rem + 3vw, 4.5rem);
	align-items: start;
	padding-block: var(--vs-4) var(--vs-7);
}

.vs-pdp__summary {
	position: sticky;
	top: calc(var(--vs-header-h) + 24px);
	max-width: 560px;
}

@media (max-width: 900px) {
	.vs-pdp__top {
		grid-template-columns: 1fr;
	}

	.vs-pdp__summary {
		position: static;
		max-width: none;
	}
}

/* Gallery */
.vs-gallery {
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr);
	gap: var(--vs-3);
}

.vs-gallery:not(.has-thumbs) {
	grid-template-columns: 1fr;
}

.vs-gallery__rail {
	display: flex;
	flex-direction: column;
	gap: var(--vs-2);
	max-height: 720px;
	overflow-y: auto;
	scrollbar-width: none;
}

.vs-gallery__rail::-webkit-scrollbar {
	display: none;
}

.vs-gallery__thumb {
	flex: none;
	padding: 0;
	border: 1px solid var(--vs-line);
	background: var(--vs-sand);
	cursor: pointer;
	overflow: hidden;
	transition: border-color 0.2s var(--vs-ease);
}

.vs-gallery__thumb img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.vs-gallery__thumb.is-active,
.vs-gallery__thumb:hover {
	border-color: var(--vs-ink);
}

.vs-gallery__stage {
	position: relative;
	background: var(--vs-sand);
}

.vs-gallery__frame {
	position: relative;
	overflow: hidden;
}

.vs-gallery__frame a {
	display: block;
	cursor: zoom-in;
}

.vs-gallery__img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.vs-gallery__zoom {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--vs-line);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.94);
	color: var(--vs-ink);
	cursor: pointer;
	transition: background-color 0.2s var(--vs-ease), color 0.2s var(--vs-ease);
}

.vs-gallery__zoom:hover {
	background: var(--vs-ink);
	color: var(--vs-paper);
}

.vs-gallery__nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	transform: translateY(-50%);
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	color: var(--vs-ink);
	cursor: pointer;
}

.vs-gallery__nav--prev { left: 10px; }
.vs-gallery__nav--next { right: 10px; }

.vs-gallery .vs-card__badges {
	top: 14px;
	left: 14px;
}

@media (max-width: 900px) {
	.vs-gallery,
	.vs-gallery.has-thumbs {
		grid-template-columns: 1fr;
	}

	.vs-gallery__rail {
		order: 2;
		flex-direction: row;
		max-height: none;
		overflow-x: auto;
	}

	.vs-gallery__thumb {
		width: 62px;
	}

	.vs-gallery__nav {
		display: flex;
	}
}

/* Lightbox */
.vs-lightbox {
	position: fixed;
	inset: 0;
	z-index: 500;
	display: none;
	align-items: center;
	justify-content: center;
	padding: var(--vs-5);
	background: rgba(12, 9, 7, 0.94);
}

.vs-lightbox.is-open {
	display: flex;
}

.vs-lightbox__img {
	max-width: 100%;
	max-height: 92vh;
	object-fit: contain;
}

.vs-lightbox__close,
.vs-lightbox__nav {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s var(--vs-ease);
}

.vs-lightbox__close:hover,
.vs-lightbox__nav:hover {
	background: rgba(255, 255, 255, 0.24);
}

.vs-lightbox__close { top: 20px; right: 20px; }
.vs-lightbox__nav--prev { left: 20px; top: 50%; transform: translateY(-50%); }
.vs-lightbox__nav--next { right: 20px; top: 50%; transform: translateY(-50%); }

/* Summary column */
.vs-pdp__eyebrow {
	display: block;
	margin-bottom: var(--vs-2);
	color: var(--vs-gold);
	font-size: var(--vs-fs-xs);
	font-weight: 500;
	letter-spacing: var(--vs-tracking-label);
	text-transform: uppercase;
}

.vs-pdp .product_title {
	margin-bottom: var(--vs-3);
	font-size: clamp(1.6rem, 1.3rem + 1.6vw, 2.5rem);
	line-height: 1.1;
}

.vs-pdp__rating {
	display: inline-flex;
	align-items: center;
	gap: var(--vs-2);
	margin-bottom: var(--vs-4);
	color: var(--vs-ink-50);
	font-size: var(--vs-fs-sm);
	text-decoration: none;
}

.vs-pdp__rating .vs-rating__value {
	color: var(--vs-ink);
	font-weight: 500;
}

.vs-pdp__rating .vs-rating__count {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.vs-pdp__price {
	margin-bottom: var(--vs-5);
	padding-bottom: var(--vs-5);
	border-bottom: 1px solid var(--vs-line);
}

.vs-price--single .vs-price__now,
.vs-price--single .woocommerce-Price-amount {
	font-size: 1.5rem;
	font-weight: 500;
}

.vs-price--single .vs-price__was {
	font-size: 1rem;
}

.vs-price--single .vs-price__off {
	font-size: var(--vs-fs-sm);
	font-weight: 500;
}

.vs-pdp__tax {
	display: block;
	margin-top: 4px;
	color: var(--vs-ink-35);
	font-size: var(--vs-fs-xs);
}

.vs-pdp__highlights {
	margin-bottom: var(--vs-5);
	color: var(--vs-ink-70);
	font-size: var(--vs-fs-sm);
	line-height: 1.75;
}

.vs-pdp__highlights ul {
	padding-left: 1.1em;
}

.vs-pdp__highlights li {
	margin-bottom: 4px;
}

/*
 * The buy block is shared with Quick View, which renders the same WooCommerce
 * add-to-cart form outside .vs-pdp — so every rule covers both containers.
 */
.vs-pdp form.cart,
.vs-qv form.cart {
	margin-bottom: var(--vs-4);
}

.vs-pdp form.cart:not(.variations_form),
.vs-qv form.cart:not(.variations_form) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--vs-3);
}

.vs-pdp .single_add_to_cart_button,
.vs-qv .single_add_to_cart_button {
	flex: 1 1 200px;
	min-height: 52px;
	padding-inline: var(--vs-6);
	border: 1px solid var(--vs-ink);
	border-radius: var(--vs-radius);
	background: var(--vs-ink);
	color: var(--vs-paper);
	font-family: inherit;
	font-size: var(--vs-fs-xs);
	font-weight: 500;
	letter-spacing: var(--vs-tracking-label);
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--vs-dur) var(--vs-ease), border-color var(--vs-dur) var(--vs-ease);
}

.vs-pdp .single_add_to_cart_button:hover,
.vs-qv .single_add_to_cart_button:hover {
	background: var(--vs-accent);
	border-color: var(--vs-accent);
}

.vs-pdp .single_add_to_cart_button.disabled,
.vs-pdp .single_add_to_cart_button[disabled],
.vs-qv .single_add_to_cart_button.disabled,
.vs-qv .single_add_to_cart_button[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
}

.vs-pdp__buynow {
	flex: 1 1 160px;
	min-height: 52px;
}

.vs-pdp .woocommerce-variation-add-to-cart,
.vs-qv .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--vs-3);
}

.vs-pdp__save {
	margin-bottom: var(--vs-5);
	padding-bottom: var(--vs-5);
	border-bottom: 1px solid var(--vs-line);
}

.vs-pdp .stock {
	margin: 0 0 var(--vs-3);
	font-size: var(--vs-fs-sm);
}

.vs-pdp .stock.in-stock { color: var(--vs-success); }
.vs-pdp .stock.low-stock { color: var(--vs-accent); font-weight: 500; }
.vs-pdp .stock.out-of-stock { color: var(--vs-ink-50); }

.vs-pdp__usp {
	display: grid;
	gap: var(--vs-2);
	margin: var(--vs-5) 0;
	padding: 0;
	list-style: none;
}

.vs-pdp__usp li {
	display: flex;
	align-items: center;
	gap: var(--vs-3);
	color: var(--vs-ink-70);
	font-size: var(--vs-fs-sm);
}

.vs-pdp__usp svg {
	color: var(--vs-gold);
}

.vs-pdp__meta {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-top: var(--vs-4);
	border-top: 1px solid var(--vs-line);
	color: var(--vs-ink-35);
	font-size: var(--vs-fs-xs);
}

.vs-pdp__meta a {
	color: var(--vs-ink-50);
	text-decoration: none;
	border-bottom: 1px solid var(--vs-line);
}

/* PIN code widget */
.vs-pincode {
	margin: var(--vs-5) 0;
	padding: var(--vs-4);
	border: 1px solid var(--vs-line);
	border-radius: var(--vs-radius);
	background: var(--vs-canvas);
}

.vs-pincode__head {
	display: flex;
	align-items: center;
	gap: var(--vs-2);
	margin-bottom: var(--vs-3);
	font-size: var(--vs-fs-sm);
	font-weight: 500;
}

.vs-pincode__head svg {
	color: var(--vs-accent);
}

.vs-pincode__form {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--vs-line-strong);
	border-radius: var(--vs-radius);
	background: var(--vs-paper);
	overflow: hidden;
}

.vs-pincode__input {
	flex: 1 1 auto;
	min-height: 44px;
	border: 0;
	border-radius: 0;
	font-size: var(--vs-fs-sm);
	letter-spacing: 0.08em;
}

.vs-pincode__input:focus {
	box-shadow: none;
}

.vs-pincode__submit {
	flex: none;
	padding-inline: var(--vs-4);
	border: 0;
	border-left: 1px solid var(--vs-line);
	background: transparent;
	color: var(--vs-accent);
	font-family: inherit;
	font-size: var(--vs-fs-xs);
	font-weight: 500;
	letter-spacing: var(--vs-tracking-label);
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s var(--vs-ease);
}

.vs-pincode__submit:hover {
	background: var(--vs-sand);
}

.vs-pincode__result {
	margin-top: var(--vs-3);
	font-size: var(--vs-fs-sm);
	line-height: 1.5;
}

.vs-pincode__result:empty {
	margin-top: 0;
}

.vs-pincode__result.is-success .vs-pincode__msg { color: var(--vs-success); }
.vs-pincode__result.is-error { color: var(--vs-danger); }
.vs-pincode__result.is-loading { color: var(--vs-ink-50); }

.vs-pincode__msg {
	display: block;
}

.vs-pincode__sub {
	display: block;
	margin-top: 2px;
	color: var(--vs-ink-50);
	font-size: var(--vs-fs-xs);
}

/* Sticky add to cart */
/* Sits directly on top of the bottom tab bar, never over it. */
.vs-stickybar {
	position: fixed;
	inset-inline: 0;
	bottom: var(--vs-safe-bottom);
	z-index: 180;
	background: var(--vs-paper);
	border-top: 1px solid var(--vs-line);
	box-shadow: 0 -6px 24px -18px rgba(23, 19, 16, 0.5);
	transform: translateY(calc(100% + var(--vs-safe-bottom)));
	transition: transform 0.34s var(--vs-ease);
}

.vs-stickybar.is-visible {
	transform: none;
}

.vs-stickybar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vs-4);
	padding-block: var(--vs-3);
}

.vs-stickybar__product {
	display: flex;
	align-items: center;
	gap: var(--vs-3);
	min-width: 0;
}

.vs-stickybar__img {
	width: 44px;
	height: 56px;
	object-fit: cover;
	background: var(--vs-sand);
}

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

.vs-stickybar__title {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	max-width: 42vw;
	font-size: var(--vs-fs-sm);
}

.vs-stickybar__cta {
	flex: none;
	min-width: 170px;
}

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

@media (max-width: 480px) {
	.vs-stickybar__img,
	.vs-stickybar .vs-price__was,
	.vs-stickybar .vs-price__off {
		display: none;
	}

	.vs-stickybar__cta {
		min-width: 140px;
	}
}

/* Tabs */
.vs-tabs {
	padding-block: var(--vs-6);
	border-top: 1px solid var(--vs-line);
}

.vs-tabs__nav {
	display: flex;
	gap: var(--vs-6);
	margin-bottom: var(--vs-5);
	border-bottom: 1px solid var(--vs-line);
	overflow-x: auto;
	scrollbar-width: none;
}

.vs-tabs__nav::-webkit-scrollbar {
	display: none;
}

.vs-tabs__tab {
	position: relative;
	flex: none;
	padding: var(--vs-3) 0;
	border: 0;
	background: transparent;
	color: var(--vs-ink-50);
	font-family: inherit;
	font-size: var(--vs-fs-xs);
	font-weight: 500;
	letter-spacing: var(--vs-tracking-label);
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: color 0.2s var(--vs-ease);
}

.vs-tabs__tab::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 100%;
	height: 2px;
	background: var(--vs-ink);
	transform: scaleX(0);
	transition: transform 0.24s var(--vs-ease);
}

.vs-tabs__tab.is-active {
	color: var(--vs-ink);
}

.vs-tabs__tab.is-active::after {
	transform: scaleX(1);
}

.vs-tabs__panel {
	max-width: 78ch;
	font-size: 0.9375rem;
	line-height: 1.8;
	color: var(--vs-ink-70);
}

.vs-tabs__panel h2:first-child {
	display: none;
}

.vs-tabs__accordion {
	display: none;
}

.vs-tabs table.shop_attributes {
	max-width: 620px;
}

.vs-tabs table.shop_attributes th {
	width: 34%;
	color: var(--vs-ink);
	font-weight: 500;
}

.vs-tabs table.shop_attributes p {
	margin: 0;
}

@media (max-width: 782px) {
	.vs-tabs__nav {
		display: none;
	}

	.vs-tabs__panel {
		display: block !important;
		max-width: none;
		border-bottom: 1px solid var(--vs-line);
	}

	.vs-tabs__panel[hidden] {
		display: block;
	}

	.vs-tabs__accordion {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--vs-3);
		width: 100%;
		padding: var(--vs-4) 0;
		border: 0;
		background: transparent;
		color: var(--vs-ink);
		font-family: inherit;
		font-size: var(--vs-fs-xs);
		font-weight: 500;
		letter-spacing: var(--vs-tracking-label);
		text-transform: uppercase;
		cursor: pointer;
	}

	.vs-tabs__accordion svg {
		transition: transform 0.24s var(--vs-ease);
	}

	.vs-tabs__accordion[aria-expanded='true'] svg {
		transform: rotate(180deg);
	}

	.vs-tabs__body {
		display: none;
		padding-bottom: var(--vs-4);
	}

	.vs-tabs__panel.is-open .vs-tabs__body,
	.vs-tabs__panel.is-active .vs-tabs__body {
		display: block;
	}
}

/* Reviews */
.woocommerce-Reviews {
	max-width: none;
}

.woocommerce-Reviews .commentlist {
	margin: 0 0 var(--vs-6);
	padding: 0;
	list-style: none;
}

.woocommerce-Reviews .review {
	padding: var(--vs-5) 0;
	border-bottom: 1px solid var(--vs-line);
}

.woocommerce-Reviews .comment_container {
	display: flex;
	gap: var(--vs-4);
}

.woocommerce-Reviews .avatar {
	flex: none;
	width: 46px;
	height: 46px;
	border-radius: 50%;
}

.woocommerce-Reviews .meta {
	margin-bottom: var(--vs-2);
	color: var(--vs-ink-50);
	font-size: var(--vs-fs-xs);
}

.woocommerce-Reviews .woocommerce-review__author {
	color: var(--vs-ink);
	font-weight: 500;
	font-style: normal;
}

.woocommerce-Reviews .description {
	color: var(--vs-ink-70);
}

#review_form_wrapper {
	max-width: 640px;
	padding-top: var(--vs-5);
}

.comment-form-rating label {
	margin-bottom: var(--vs-2);
}

.comment-form .form-submit .submit,
.woocommerce-Reviews #submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 var(--vs-6);
	border: 0;
	border-radius: var(--vs-radius);
	background: var(--vs-ink);
	color: var(--vs-paper);
	font-family: inherit;
	font-size: var(--vs-fs-xs);
	font-weight: 500;
	letter-spacing: var(--vs-tracking-label);
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--vs-dur) var(--vs-ease);
}

.comment-form .form-submit .submit:hover {
	background: var(--vs-accent);
}

/* Related / upsells */
.related.products,
.upsells.products,
.cross-sells {
	padding-block: var(--vs-6);
	border-top: 1px solid var(--vs-line);
}

.related.products > h2,
.upsells.products > h2,
.cross-sells > h2 {
	margin-bottom: var(--vs-5);
	font-size: var(--vs-fs-h3);
}

.vs-pdp .related.products,
.vs-pdp .upsells.products {
	max-width: var(--vs-container);
	margin-inline: auto;
	padding-inline: var(--vs-gutter);
}

/* ==========================================================================
   3. Delivery note
   ========================================================================== */

/* Same box the free-shipping meter used to occupy, so the bag keeps its
   proportions — one line of copy rather than a progress bar. */
.vs-deliverynote {
	padding: var(--vs-4) var(--vs-5);
	border-bottom: 1px solid var(--vs-line);
	background: var(--vs-canvas);
}

.vs-cartpage .vs-deliverynote {
	margin-bottom: var(--vs-5);
	border: 1px solid var(--vs-line);
	border-radius: var(--vs-radius);
}

.vs-deliverynote__text {
	display: flex;
	align-items: center;
	gap: var(--vs-2);
	margin: 0;
	color: var(--vs-ink-70);
	font-size: var(--vs-fs-sm);
	line-height: 1.5;
}

.vs-deliverynote__text svg {
	flex: none;
	color: var(--vs-accent);
}

.vs-deliverynote__text strong {
	color: var(--vs-ink);
	font-weight: 500;
}

.vs-deliverynote__text .woocommerce-Price-amount {
	color: var(--vs-ink);
	font-weight: 500;
	white-space: nowrap;
}

/* ==========================================================================
   4. Mini cart
   ========================================================================== */

.vs-minicart__content {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}

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

.vs-minicart__item {
	position: relative;
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr) 28px;
	gap: var(--vs-3);
	padding: var(--vs-4) var(--vs-5);
	border-bottom: 1px solid var(--vs-line);
}

.vs-minicart__thumb img {
	width: 72px;
	height: 94px;
	object-fit: cover;
	background: var(--vs-sand);
}

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

.vs-minicart__name {
	font-size: var(--vs-fs-sm);
	line-height: 1.35;
	text-decoration: none;
}

.vs-minicart__variation {
	color: var(--vs-ink-50);
	font-size: var(--vs-fs-xs);
}

.vs-minicart__price {
	margin-top: auto;
	font-size: var(--vs-fs-sm);
	font-variant-numeric: tabular-nums;
}

.vs-minicart__remove {
	align-self: flex-start;
	width: 26px;
	height: 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: var(--vs-ink-35);
	font-size: 1.15rem;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.18s var(--vs-ease), color 0.18s var(--vs-ease);
}

.vs-minicart__remove:hover {
	background: var(--vs-sand);
	color: var(--vs-danger);
}

.vs-minicart__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 4px;
	font-size: 1rem;
}

.vs-minicart__note {
	margin: 0 0 var(--vs-4);
	color: var(--vs-ink-35);
	font-size: var(--vs-fs-xs);
}

.vs-minicart__actions {
	display: grid;
	gap: var(--vs-2);
}

.vs-empty--drawer {
	padding-block: var(--vs-7);
}

/* ==========================================================================
   5. Cart page
   ========================================================================== */

/*
 * The shortcode prints its notices wrapper outside the theme's container, so
 * it needs the page gutter of its own on these two full-width pages.
 */
.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper,
.woocommerce-checkout .woocommerce > .woocommerce-notices-wrapper {
	padding: var(--vs-5) var(--vs-gutter) 0;
}

.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper:empty,
.woocommerce-checkout .woocommerce > .woocommerce-notices-wrapper:empty {
	padding: 0;
}

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

/*
 * The empty-cart heading keeps WooCommerce's `.cart-empty .woocommerce-info`
 * classes for plugin compatibility, but should not look like a notice.
 */
.vs-empty__title.woocommerce-info {
	display: block;
	margin: 0 0 var(--vs-2);
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--vs-font-display);
	font-size: var(--vs-fs-h3);
}

.vs-cartpage--empty {
	padding-bottom: 0;
}

.vs-cartpage--empty .return-to-shop {
	margin: 0;
}

.vs-cartpage .vs-pagehead {
	padding-bottom: var(--vs-5);
}

.vs-cartpage__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) clamp(340px, 26%, 460px);
	gap: clamp(1.5rem, 1rem + 2vw, 3.5rem);
	align-items: start;
}

.vs-cartrow {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr) auto auto 34px;
	align-items: center;
	gap: var(--vs-4);
	padding: var(--vs-4) 0;
	border-bottom: 1px solid var(--vs-line);
}

.vs-cartrow:first-child {
	border-top: 1px solid var(--vs-line);
}

.vs-cartrow__thumb img {
	width: 96px;
	height: 126px;
	object-fit: cover;
	background: var(--vs-sand);
}

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

.vs-cartrow__name {
	font-size: 0.9375rem;
	text-decoration: none;
}

.vs-cartrow__variation,
.vs-cartrow__unit {
	color: var(--vs-ink-50);
	font-size: var(--vs-fs-xs);
}

/* --- Size selector on a bag line -------------------------------------- */

/*
 * Reads as the line of text it replaces until it is interacted with, so the
 * bag keeps its typographic rhythm rather than growing a form control.
 */
.vs-cartvar__select {
	width: auto;
	min-height: 0;
	max-width: 100%;
	margin: 0;
	padding: 2px 22px 2px 6px;
	border: 1px solid transparent;
	border-radius: var(--vs-radius);
	background-color: transparent;
	background-position: right 4px center;
	background-size: 13px;
	color: var(--vs-ink-50);
	font-family: inherit;
	font-size: var(--vs-fs-xs);
	line-height: 1.5;
	cursor: pointer;
}

.vs-cartvar__select:hover,
.vs-cartvar__select:focus-visible {
	border-color: var(--vs-line);
	background-color: var(--vs-canvas);
	color: var(--vs-ink);
}

.vs-cartvar__select:disabled {
	opacity: 0.5;
	cursor: progress;
}

/* Touch targets: no hover to hint with, so the control is always visible. */
@media (hover: none) {
	.vs-cartvar__select {
		border-color: var(--vs-line);
		padding-block: 5px;
	}
}

.vs-cartrow__subtotal {
	font-size: 1rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.vs-cartrow__remove .remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	color: var(--vs-ink-35);
	transition: background-color 0.18s var(--vs-ease), color 0.18s var(--vs-ease);
}

.vs-cartrow__remove .remove:hover {
	background: var(--vs-danger-wash);
	color: var(--vs-danger);
}

.vs-cartrow .variation,
.vs-cartrow dl.variation {
	margin: 0;
	color: var(--vs-ink-50);
	font-size: var(--vs-fs-xs);
}

.vs-cartrow dl.variation dt,
.vs-cartrow dl.variation dd {
	display: inline;
	margin: 0;
}

.vs-cartactions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--vs-3);
	padding-top: var(--vs-5);
}

.vs-coupon {
	display: flex;
	gap: var(--vs-2);
}

.vs-coupon__input {
	min-height: 38px;
	width: 190px;
	font-size: var(--vs-fs-sm);
}

.vs-cartpage__continue {
	display: inline-flex;
	align-items: center;
	gap: var(--vs-2);
	margin-top: var(--vs-5);
	font-size: var(--vs-fs-xs);
	letter-spacing: var(--vs-tracking-label);
	text-transform: uppercase;
	text-decoration: none;
}

.vs-cartpage__eta {
	display: flex;
	align-items: center;
	gap: var(--vs-2);
	margin-top: var(--vs-4);
	color: var(--vs-ink-50);
	font-size: var(--vs-fs-xs);
}

.vs-cartpage__eta svg {
	color: var(--vs-gold);
}

@media (max-width: 1024px) {
	.vs-cartpage__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 700px) {
	/*
	 * The third column holds the remove button on the first row and the line
	 * total on the second, so it is sized to content — a fixed 34px (enough
	 * for the icon alone) clipped the price.
	 */
	.vs-cartrow {
		grid-template-columns: 80px minmax(0, 1fr) auto;
		grid-template-areas:
			'thumb info remove'
			'thumb qty subtotal';
		align-items: start;
		column-gap: var(--vs-3);
		row-gap: var(--vs-3);
	}

	.vs-cartrow__thumb { grid-area: thumb; }
	.vs-cartrow__info { grid-area: info; }
	.vs-cartrow__qty { grid-area: qty; }
	.vs-cartrow__subtotal { grid-area: subtotal; text-align: right; align-self: center; }
	.vs-cartrow__remove { grid-area: remove; justify-self: end; }

	.vs-cartrow__thumb img {
		width: 80px;
		height: 106px;
	}

	.vs-cartactions {
		flex-direction: column;
		align-items: stretch;
	}

	.vs-coupon {
		width: 100%;
	}

	.vs-coupon__input {
		flex: 1 1 auto;
		width: auto;
	}
}

/* Summary card */
.vs-summary {
	padding: var(--vs-5);
	border: 1px solid var(--vs-line);
	border-radius: var(--vs-radius);
	background: var(--vs-canvas);
}

.vs-summary__title {
	margin-bottom: var(--vs-4);
	padding-bottom: var(--vs-3);
	border-bottom: 1px solid var(--vs-line);
	font-family: var(--vs-font-sans);
	font-size: var(--vs-fs-xs);
	font-weight: 500;
	letter-spacing: var(--vs-tracking-label);
	text-transform: uppercase;
}

.vs-summary__rows {
	display: flex;
	flex-direction: column;
	gap: var(--vs-3);
}

.vs-summary__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--vs-4);
	font-size: var(--vs-fs-sm);
	font-variant-numeric: tabular-nums;
}

.vs-summary__row > span:first-child,
.vs-summary__label {
	flex: 0 1 auto;
	color: var(--vs-ink-50);
	font-weight: 400;
	text-align: left;
}

.vs-summary__row > span:last-child {
	text-align: right;
}

.vs-summary__row--discount > span:last-child {
	color: var(--vs-success);
}

.vs-summary__row--total {
	margin-top: var(--vs-2);
	padding-top: var(--vs-4);
	border-top: 1px solid var(--vs-line);
	font-size: 1.125rem;
	font-weight: 500;
}

.vs-summary__row--total > span:first-child {
	color: var(--vs-ink);
}

/* WooCommerce appends the tax breakup inside the total; give it its own line. */
.vs-summary__row--total .includes_tax,
.order-total .includes_tax {
	display: block;
	margin-top: 2px;
	color: var(--vs-ink-35);
	font-size: var(--vs-fs-xs);
	font-weight: 400;
	letter-spacing: 0;
}

.vs-summary__row--total .includes_tax .woocommerce-Price-amount {
	font-size: inherit;
	font-weight: inherit;
}

/* --- Shipping options ------------------------------------------------- */

.vs-summary__row--shipping {
	flex-direction: column;
	align-items: stretch;
	gap: var(--vs-2);
}

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

ul#shipping_method {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

ul#shipping_method li {
	display: flex;
	align-items: center;
	gap: var(--vs-2);
	min-width: 0;
	font-size: var(--vs-fs-sm);
}

ul#shipping_method input[type='radio'] {
	width: 17px;
	height: 17px;
	min-height: 0;
	margin: 0;
	padding: 0;
	flex: none;
	border-radius: 50%;
	border: 1px solid var(--vs-line-strong);
	accent-color: var(--vs-accent);
}

ul#shipping_method label {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--vs-3);
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-size: var(--vs-fs-sm);
	font-weight: 400;
	cursor: pointer;
}

.vs-ship__name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vs-ship__cost {
	flex: none;
	font-variant-numeric: tabular-nums;
}

.vs-ship__free {
	color: var(--vs-success);
	font-weight: 500;
	letter-spacing: 0.06em;
}

.woocommerce-shipping-destination {
	margin: var(--vs-3) 0 0;
	color: var(--vs-ink-35);
	font-size: var(--vs-fs-xs);
	line-height: 1.5;
}

.woocommerce-shipping-destination strong {
	color: var(--vs-ink-50);
	font-weight: 500;
}

/* --- Shipping calculator ---------------------------------------------- */

.woocommerce-shipping-calculator {
	margin-top: var(--vs-2);
}

.shipping-calculator-button {
	display: inline-block;
	color: var(--vs-ink-70);
	font-size: var(--vs-fs-xs);
	letter-spacing: 0.04em;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.shipping-calculator-button:hover {
	color: var(--vs-accent);
}

.shipping-calculator-form {
	margin-top: var(--vs-3);
	padding-top: var(--vs-3);
	border-top: 1px dashed var(--vs-line);
}

.shipping-calculator-form .form-row {
	margin-bottom: var(--vs-2);
}

.shipping-calculator-form label {
	margin-bottom: 4px;
	color: var(--vs-ink-50);
	font-size: var(--vs-fs-xs);
	font-weight: 400;
}

.shipping-calculator-form input,
.shipping-calculator-form select,
.shipping-calculator-form .select2-container--default .select2-selection--single {
	min-height: 40px;
	font-size: var(--vs-fs-sm);
}

.shipping-calculator-form .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 38px;
	padding-left: var(--vs-3);
}

.shipping-calculator-form .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 40px;
	margin-top: var(--vs-1);
	padding-inline: var(--vs-4);
	border: 1px solid var(--vs-ink);
	border-radius: var(--vs-radius);
	background: transparent;
	color: var(--vs-ink);
	font-family: inherit;
	font-size: var(--vs-fs-xs);
	font-weight: 500;
	letter-spacing: var(--vs-tracking-label);
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--vs-dur) var(--vs-ease), color var(--vs-dur) var(--vs-ease);
}

.shipping-calculator-form .button:hover {
	background: var(--vs-ink);
	color: var(--vs-paper);
}

.wc-proceed-to-checkout {
	margin-top: var(--vs-5);
}

.vs-paysupport {
	margin-top: var(--vs-4);
	padding-top: var(--vs-4);
	border-top: 1px solid var(--vs-line);
}

.vs-paysupport__list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: var(--vs-2) 0 0;
	padding: 0;
	list-style: none;
}

.vs-paysupport__list li {
	padding: 4px 9px;
	border: 1px solid var(--vs-line);
	border-radius: var(--vs-radius);
	background: var(--vs-paper);
	color: var(--vs-ink-50);
	font-size: 0.6875rem;
	letter-spacing: 0.04em;
}

/* ==========================================================================
   6. Checkout
   ========================================================================== */

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

.vs-checkout__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) clamp(360px, 28%, 480px);
	gap: clamp(1.5rem, 1rem + 2.5vw, 4rem);
	align-items: start;
}

.vs-checkout__block + .vs-checkout__block,
.vs-checkout__customer + .vs-checkout__block {
	margin-top: var(--vs-6);
	padding-top: var(--vs-6);
	border-top: 1px solid var(--vs-line);
}

.vs-checkout__legend,
.vs-checkout h3 {
	margin-bottom: var(--vs-4);
	font-family: var(--vs-font-sans);
	font-size: var(--vs-fs-xs);
	font-weight: 500;
	letter-spacing: var(--vs-tracking-label);
	text-transform: uppercase;
}

.vs-checkout__aside {
	position: sticky;
	top: calc(var(--vs-header-h) + 20px);
}

.vs-checkout__summary {
	padding: var(--vs-5);
	border: 1px solid var(--vs-line);
	border-radius: var(--vs-radius);
	background: var(--vs-canvas);
}

/* Form rows */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--vs-3) var(--vs-4);
}

.form-row {
	margin: 0;
	padding: 0;
}

.form-row-wide,
.form-row.notes,
.woocommerce-additional-fields__field-wrapper .form-row {
	grid-column: 1 / -1;
}

.form-row label {
	font-size: var(--vs-fs-xs);
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--vs-ink-70);
}

.form-row .optional {
	color: var(--vs-ink-35);
	font-weight: 400;
}

.woocommerce-invalid input,
.woocommerce-invalid select {
	border-color: var(--vs-danger);
}

.woocommerce-validated input,
.woocommerce-validated select {
	border-color: var(--vs-success);
}

.vs-checkout .select2-container--default .select2-selection--single {
	height: 48px;
	border: 1px solid var(--vs-line-strong);
	border-radius: var(--vs-radius);
	background: var(--vs-paper);
}

.vs-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 46px;
	padding-left: var(--vs-4);
	color: var(--vs-ink);
}

.vs-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 46px;
	right: 8px;
}

.woocommerce-form__label-for-checkbox,
.woocommerce-form-login__rememberme,
.form-row label.checkbox {
	display: flex;
	align-items: center;
	gap: var(--vs-2);
	margin: 0;
	font-size: var(--vs-fs-sm);
	font-weight: 400;
	line-height: 1.45;
	cursor: pointer;
}

.woocommerce-form__label-for-checkbox input,
.form-row label.checkbox input[type='checkbox'] {
	width: 18px;
	height: 18px;
	min-height: 0;
	margin: 0;
	padding: 0;
	flex: none;
	accent-color: var(--vs-accent);
	cursor: pointer;
}

/* The GSTIN fields reveal under their toggle, so keep them tight to it. */
.vs-gst-toggle {
	margin-top: var(--vs-2);
}

/* "Consent (optional)" reads as noise on a tick box — the state is the answer. */
.form-row label.checkbox .optional,
.woocommerce-form__label-for-checkbox .optional {
	display: none;
}

#ship-to-different-address {
	margin-bottom: var(--vs-3);
	font-size: var(--vs-fs-xs);
	letter-spacing: var(--vs-tracking-label);
	text-transform: uppercase;
}

#ship-to-different-address label {
	display: flex;
	align-items: center;
	gap: var(--vs-2);
	margin: 0;
	cursor: pointer;
}

.vs-gst-field {
	display: none;
}

/* Login / coupon toggles above the form */
.woocommerce-form-login-toggle,
.woocommerce-form-coupon-toggle {
	margin-bottom: var(--vs-4);
}

/*
 * Only the collapsible login/coupon panels at checkout get the boxed
 * treatment. On My Account the form already sits inside a card, and boxing it
 * again produced a frame inside a frame.
 */
.woocommerce-checkout .woocommerce-form-login,
.woocommerce-checkout .woocommerce-form-coupon {
	margin-bottom: var(--vs-5);
	padding: var(--vs-5);
	border: 1px solid var(--vs-line);
	border-radius: var(--vs-radius);
	background: var(--vs-canvas);
}

.woocommerce-form-coupon .form-row,
.woocommerce-form-login .form-row {
	margin-bottom: var(--vs-3);
}

/*
 * Generic WooCommerce buttons. Anything already carrying `.vs-btn` is opted
 * out — this rule sits later in the cascade and would otherwise repaint theme
 * buttons (the accent sign-in button included) back to ink.
 */
.woocommerce-form-coupon .button:not(.vs-btn),
.woocommerce-Button:not(.vs-btn),
.woocommerce-button:not(.vs-btn) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0 var(--vs-5);
	border: 1px solid var(--vs-ink);
	border-radius: var(--vs-radius);
	background: var(--vs-ink);
	color: var(--vs-paper);
	font-family: inherit;
	font-size: var(--vs-fs-xs);
	font-weight: 500;
	letter-spacing: var(--vs-tracking-label);
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--vs-dur) var(--vs-ease), border-color var(--vs-dur) var(--vs-ease);
}

.woocommerce-Button:not(.vs-btn):hover,
.woocommerce-button:not(.vs-btn):hover {
	background: var(--vs-accent);
	border-color: var(--vs-accent);
	color: var(--vs-accent-ink);
}

/* Order review */
.vs-review__items {
	margin: 0 0 var(--vs-5);
	padding: 0 0 var(--vs-4);
	border-bottom: 1px solid var(--vs-line);
	list-style: none;
	max-height: 340px;
	overflow-y: auto;
}

.vs-review__item {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--vs-3);
	padding: var(--vs-2) 0;
}

.vs-review__thumb {
	position: relative;
	display: block;
}

.vs-review__thumb img {
	width: 56px;
	height: 72px;
	object-fit: cover;
	background: var(--vs-sand);
}

.vs-review__qty {
	position: absolute;
	top: -7px;
	right: -7px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: var(--vs-radius-pill);
	background: var(--vs-ink);
	color: var(--vs-paper);
	font-size: 0.625rem;
	line-height: 1;
}

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

.vs-review__name {
	font-size: var(--vs-fs-sm);
	line-height: 1.35;
}

.vs-review__variation {
	color: var(--vs-ink-50);
	font-size: var(--vs-fs-xs);
}

.vs-review__price {
	font-size: var(--vs-fs-sm);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Payment */
.woocommerce-checkout-payment {
	border: 1px solid var(--vs-line);
	border-radius: var(--vs-radius);
	overflow: hidden;
}

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

/*
 * The radio and its label are siblings inside the <li>. Making the <li> the
 * flex row keeps them on one line — a block-level label would otherwise drop
 * below the radio — and lets the payment box span the full width beneath.
 */
.wc_payment_method {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	border-bottom: 1px solid var(--vs-line);
	transition: background-color 0.18s var(--vs-ease);
}

.wc_payment_method:last-of-type {
	border-bottom: 0;
}

.wc_payment_method:hover {
	background: var(--vs-canvas);
}

.wc_payment_method > input[type='radio'] {
	width: 18px;
	height: 18px;
	min-height: 0;
	margin: 0 0 0 var(--vs-5);
	padding: 0;
	flex: none;
	accent-color: var(--vs-accent);
	cursor: pointer;
}

.wc_payment_method > label {
	display: flex;
	align-items: center;
	gap: var(--vs-3);
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: var(--vs-4) var(--vs-5) var(--vs-4) var(--vs-3);
	font-size: var(--vs-fs-sm);
	font-weight: 500;
	cursor: pointer;
}

/* WooCommerce hides the radio when only one gateway is available. */
.wc_payment_method > input[type='radio'][style*='none'] + label,
.wc_payment_method > input[type='radio'][hidden] + label {
	padding-left: var(--vs-5);
}

.wc_payment_method label img {
	max-height: 24px;
	width: auto;
	margin-left: auto;
}

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

.payment_box {
	flex: 1 0 100%;
}

.vs-gateway__methods {
	display: block;
	margin-top: 2px;
	color: var(--vs-ink-35);
	font-size: var(--vs-fs-xs);
	font-weight: 400;
	letter-spacing: 0.02em;
}

.payment_box {
	margin: 0;
	padding: 0 var(--vs-5) var(--vs-4) calc(var(--vs-5) + 18px + var(--vs-3));
	background: var(--vs-canvas);
	color: var(--vs-ink-50);
	font-size: var(--vs-fs-sm);
}

.payment_box p:last-child {
	margin-bottom: 0;
}

.woocommerce-terms-and-conditions-wrapper {
	margin-top: var(--vs-4);
	font-size: var(--vs-fs-sm);
}

#place_order,
.woocommerce-checkout .button.alt {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 56px;
	margin-top: var(--vs-4);
	padding-inline: var(--vs-6);
	border: 0;
	border-radius: var(--vs-radius);
	background: var(--vs-accent);
	color: var(--vs-accent-ink);
	font-family: inherit;
	font-size: var(--vs-fs-xs);
	font-weight: 500;
	letter-spacing: var(--vs-tracking-label);
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--vs-dur) var(--vs-ease);
}

#place_order:hover {
	background: var(--vs-accent-deep);
}

.vs-checkout__trust {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--vs-4);
	margin: var(--vs-4) 0 0;
	padding: 0;
	list-style: none;
	color: var(--vs-ink-35);
	font-size: var(--vs-fs-xs);
}

.vs-checkout__trust li {
	display: flex;
	align-items: center;
	gap: 5px;
}

.vs-checkout__mobilesummary {
	margin-bottom: var(--vs-4);
}

.vs-checkout__summarytoggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: var(--vs-4);
	border: 1px solid var(--vs-line);
	border-radius: var(--vs-radius);
	background: var(--vs-canvas);
	color: var(--vs-ink);
	font-family: inherit;
	font-size: var(--vs-fs-sm);
	cursor: pointer;
}

.vs-checkout__summarytoggle > span:first-child {
	display: flex;
	align-items: center;
	gap: var(--vs-2);
}

.vs-checkout__summarytotal {
	font-weight: 500;
}

@media (max-width: 1024px) {
	.vs-checkout__grid {
		grid-template-columns: 1fr;
	}

	.vs-checkout__aside {
		position: static;
		order: -1;
	}
}

/* On small screens the summary collapses behind the toggle above the form. */
.vs-checkout__summary[hidden] {
	display: none;
}

.vs-checkout__summarytoggle svg:last-child {
	transition: transform 0.24s var(--vs-ease);
}

.vs-checkout__summarytoggle[aria-expanded='true'] {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

@media (max-width: 600px) {
	.woocommerce-billing-fields__field-wrapper,
	.woocommerce-shipping-fields__field-wrapper {
		grid-template-columns: 1fr;
	}

	.form-row-first,
	.form-row-last {
		grid-column: 1 / -1;
	}
}

/* Thank-you page */
.woocommerce-order {
	max-width: 820px;
	margin-inline: auto;
	padding-block: var(--vs-6) var(--vs-section);
}

.woocommerce-thankyou-order-received {
	margin-bottom: var(--vs-5);
	font-family: var(--vs-font-display);
	font-size: var(--vs-fs-h2);
	line-height: 1.15;
}

.woocommerce-order-overview {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--vs-4);
	margin: 0 0 var(--vs-6);
	padding: var(--vs-5);
	border: 1px solid var(--vs-line);
	border-radius: var(--vs-radius);
	background: var(--vs-canvas);
	list-style: none;
}

.woocommerce-order-overview li {
	display: flex;
	flex-direction: column;
	gap: 3px;
	color: var(--vs-ink-50);
	font-size: var(--vs-fs-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.woocommerce-order-overview li strong {
	color: var(--vs-ink);
	font-size: var(--vs-fs-sm);
	letter-spacing: 0;
	text-transform: none;
}

.woocommerce-table--order-details,
.woocommerce-table--order-downloads {
	margin-bottom: var(--vs-6);
	border: 1px solid var(--vs-line);
}

.woocommerce-table--order-details th,
.woocommerce-table--order-details td {
	padding: var(--vs-3) var(--vs-4);
}

.woocommerce-customer-details .woocommerce-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--vs-5);
}

address {
	font-style: normal;
	line-height: 1.7;
}

/* ==========================================================================
   7. My Account
   ========================================================================== */

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

/*
 * The sidebar layout is applied only when signed in. WordPress adds a
 * `logged-in` body class but never a `logged-out` one, so keying off the
 * signed-in state is the only reliable test — otherwise the grid reserves an
 * empty 260px column beside the login form for visitors.
 */
.woocommerce-account .woocommerce {
	display: block;
}

.woocommerce-account.logged-in .woocommerce {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: clamp(1.5rem, 1rem + 2vw, 3.5rem);
	align-items: start;
}

/* --- Signed out: sign in / create account ------------------------------ */

.vs-auth {
	max-width: 460px;
	margin-inline: auto;
	padding-bottom: var(--vs-section);
}

.vs-auth__card {
	padding: clamp(1.75rem, 1.2rem + 2vw, 3rem);
	border: 1px solid var(--vs-line);
	border-radius: var(--vs-radius-lg);
	background: var(--vs-paper);
	box-shadow: var(--vs-shadow);
	text-align: center;
}

.vs-auth__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--vs-2);
	color: var(--vs-gold);
	font-size: var(--vs-fs-xs);
	font-weight: 500;
	letter-spacing: var(--vs-tracking-label);
	text-transform: uppercase;
}

.vs-auth__eyebrow::before,
.vs-auth__eyebrow::after {
	content: '';
	width: 18px;
	height: 1px;
	background: currentColor;
}

.vs-auth__title {
	margin: var(--vs-3) 0 var(--vs-2);
	font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.35rem);
	line-height: 1.1;
}

.vs-auth__sub {
	margin: 0 auto var(--vs-6);
	max-width: 34ch;
	color: var(--vs-ink-50);
	font-size: var(--vs-fs-sm);
	line-height: 1.6;
}

/* Fields are left-aligned inside the centred card. */
.vs-auth__form {
	text-align: left;
}

.vs-auth__form .form-row,
.vs-auth__form .woocommerce-form-row {
	margin-bottom: var(--vs-4);
	padding: 0;
}

.vs-auth__form label {
	margin-bottom: 6px;
	color: var(--vs-ink-70);
	font-size: var(--vs-fs-xs);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.vs-auth__form input[type='text'],
.vs-auth__form input[type='email'],
.vs-auth__form input[type='password'] {
	min-height: 52px;
}

.vs-auth__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vs-3);
	margin-bottom: var(--vs-2);
}

.vs-auth__row .woocommerce-form-login__rememberme {
	margin: 0;
	color: var(--vs-ink-50);
	font-size: var(--vs-fs-xs);
	letter-spacing: 0;
	text-transform: none;
}

.vs-auth__forgot {
	color: var(--vs-ink-50);
	font-size: var(--vs-fs-xs);
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}

.vs-auth__forgot:hover {
	color: var(--vs-accent);
}

/* The submit gets clear air above it. */
.vs-auth__submit {
	margin: var(--vs-5) 0 0;
}

.vs-auth__note {
	margin: 0 0 var(--vs-2);
	color: var(--vs-ink-50);
	font-size: var(--vs-fs-xs);
	line-height: 1.6;
}

.vs-auth__alt {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: var(--vs-5);
	padding-top: var(--vs-5);
	border-top: 1px solid var(--vs-line);
	color: var(--vs-ink-50);
	font-size: var(--vs-fs-sm);
}

.vs-auth__alt a {
	color: var(--vs-accent);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.vs-auth__perks {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--vs-3) var(--vs-4);
	margin: var(--vs-6) 0 0;
	padding: 0;
	list-style: none;
}

.vs-auth__perks li {
	display: flex;
	align-items: center;
	gap: var(--vs-2);
	color: var(--vs-ink-70);
	font-size: var(--vs-fs-xs);
	letter-spacing: 0.04em;
}

.vs-auth__perks svg {
	color: var(--vs-gold);
}

.vs-auth__secure {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: var(--vs-5) 0 0;
	color: var(--vs-ink-35);
	font-size: var(--vs-fs-xs);
}

/* Lost password shares the card treatment. */
.woocommerce-ResetPassword.lost_reset_password {
	max-width: 460px;
	margin-inline: auto;
	padding: clamp(1.75rem, 1.2rem + 2vw, 3rem);
	border: 1px solid var(--vs-line);
	border-radius: var(--vs-radius-lg);
	background: var(--vs-paper);
	box-shadow: var(--vs-shadow);
}

.woocommerce-ResetPassword .form-row-first,
.woocommerce-ResetPassword .form-row {
	grid-column: 1 / -1;
}

.woocommerce-ResetPassword .woocommerce-Button,
.woocommerce-ResetPassword .button {
	width: 100%;
	margin-top: var(--vs-4);
}

@media (max-width: 420px) {
	.vs-auth__perks {
		grid-template-columns: 1fr;
	}
}

/*
 * WooCommerce's JS wraps password fields at runtime and injects a show/hide
 * button. Its styling lives in the stylesheet the theme replaces, so the
 * button needs dressing here or it renders as a bare grey pill.
 */
.password-input {
	position: relative;
	display: block;
}

.password-input input {
	padding-right: 46px;
}

.show-password-input {
	position: absolute;
	top: 50%;
	right: 8px;
	width: 32px;
	height: 32px;
	padding: 0;
	transform: translateY(-50%);
	border: 0;
	border-radius: 50%;
	background: transparent no-repeat center;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='%23756c65' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-6.5 10-6.5S22 12 22 12s-3.6 6.5-10 6.5S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3C/svg%3E");
	cursor: pointer;
	transition: background-color 0.18s var(--vs-ease);
}

.show-password-input:hover {
	background-color: var(--vs-sand);
}

.show-password-input.display-password {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='%238c2f39' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-6.5 10-6.5S22 12 22 12s-3.6 6.5-10 6.5S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3Cline x1='4' y1='20' x2='20' y2='4'/%3E%3C/svg%3E");
}

#customer_login .lost_password {
	margin: var(--vs-3) 0 0;
	font-size: var(--vs-fs-xs);
}

#customer_login .woocommerce-privacy-policy-text {
	color: var(--vs-ink-50);
	font-size: var(--vs-fs-xs);
	line-height: 1.6;
}

@media (max-width: 782px) {
	#customer_login:has(.u-column2) {
		grid-template-columns: 1fr;
		max-width: 460px;
	}
}

.vs-account__nav {
	padding: var(--vs-4);
	border: 1px solid var(--vs-line);
	border-radius: var(--vs-radius);
	background: var(--vs-canvas);
}

.vs-account__user {
	display: flex;
	align-items: center;
	gap: var(--vs-3);
	padding-bottom: var(--vs-4);
	margin-bottom: var(--vs-3);
	border-bottom: 1px solid var(--vs-line);
}

.vs-account__avatarimg {
	border-radius: 50%;
}

.vs-account__who strong {
	display: block;
	font-size: var(--vs-fs-sm);
	font-weight: 500;
}

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

.vs-account__menu a {
	display: flex;
	align-items: center;
	gap: var(--vs-3);
	padding: var(--vs-3);
	border-radius: var(--vs-radius);
	color: var(--vs-ink-70);
	font-size: var(--vs-fs-sm);
	text-decoration: none;
	transition: background-color 0.18s var(--vs-ease), color 0.18s var(--vs-ease);
}

.vs-account__menu a:hover {
	background: var(--vs-sand);
	color: var(--vs-ink);
}

.vs-account__menu .is-active > a,
.vs-account__menu .woocommerce-MyAccount-navigation-link--active > a {
	background: var(--vs-ink);
	color: var(--vs-paper);
}

.vs-account__menu svg {
	flex: none;
	opacity: 0.75;
}

.woocommerce-MyAccount-content {
	min-width: 0;
}

.vs-dash__hello {
	margin-bottom: var(--vs-5);
	color: var(--vs-ink-70);
}

.vs-dash__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--vs-3);
	margin: 0 0 var(--vs-6);
	padding: 0;
	list-style: none;
}

.vs-dash__stats li {
	padding: var(--vs-4);
	border: 1px solid var(--vs-line);
	border-radius: var(--vs-radius);
	background: var(--vs-canvas);
}

.vs-dash__num {
	display: block;
	font-family: var(--vs-font-display);
	font-size: 1.85rem;
	line-height: 1.1;
}

.vs-dash__label {
	display: block;
	margin-top: 2px;
	color: var(--vs-ink-50);
	font-size: var(--vs-fs-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.vs-dash__links {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: var(--vs-3);
}

.vs-dash__link {
	display: flex;
	align-items: center;
	gap: var(--vs-3);
	padding: var(--vs-4);
	border: 1px solid var(--vs-line);
	border-radius: var(--vs-radius);
	text-decoration: none;
	transition: border-color 0.2s var(--vs-ease), transform 0.2s var(--vs-ease);
}

.vs-dash__link:hover {
	border-color: var(--vs-ink);
	transform: translateY(-2px);
	color: inherit;
}

.vs-dash__link svg {
	flex: none;
	color: var(--vs-accent);
}

.vs-dash__link strong {
	display: block;
	font-size: var(--vs-fs-sm);
	font-weight: 500;
}

.vs-dash__link small {
	color: var(--vs-ink-50);
	font-size: var(--vs-fs-xs);
}

.woocommerce-orders-table,
.woocommerce-MyAccount-content table.shop_table {
	border: 1px solid var(--vs-line);
}

.woocommerce-orders-table th {
	background: var(--vs-canvas);
	font-size: var(--vs-fs-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.woocommerce-orders-table .button {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	padding: 0 var(--vs-3);
	border: 1px solid var(--vs-line-strong);
	border-radius: var(--vs-radius);
	color: var(--vs-ink);
	font-size: var(--vs-fs-xs);
	text-decoration: none;
}

.woocommerce-orders-table .button:hover {
	border-color: var(--vs-ink);
	background: var(--vs-ink);
	color: var(--vs-paper);
}

.vs-returns__intro {
	margin-bottom: var(--vs-6);
	padding: var(--vs-5);
	border: 1px solid var(--vs-line);
	border-radius: var(--vs-radius);
	background: var(--vs-canvas);
}

.vs-returns__intro h3 {
	margin-bottom: var(--vs-3);
	font-size: 1.15rem;
}

.vs-returns__steps {
	margin: 0 0 var(--vs-3);
	padding-left: 1.2em;
	font-size: var(--vs-fs-sm);
	line-height: 1.7;
}

.vs-returns__form {
	max-width: 520px;
}

@media (max-width: 900px) {
	/* Must match the specificity of the signed-in grid rule above, or the
	   260px sidebar column survives and squeezes the content off-screen. */
	.woocommerce-account.logged-in .woocommerce {
		grid-template-columns: minmax(0, 1fr);
	}

	.vs-account__menu {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
		gap: 4px;
	}
}

/* --- Order tracking ---------------------------------------------------- */

.vs-track .vs-auth__form .form-row {
	margin-bottom: var(--vs-4);
}

/* The result view, once an order has been found. */
.vs-track__result {
	max-width: 720px;
	margin-inline: auto;
	padding-bottom: var(--vs-section);
}

.vs-track__result h2 {
	margin: 0 0 var(--vs-4);
	font-size: clamp(1.35rem, 1.15rem + 0.7vw, 1.7rem);
}

.order-info {
	display: flex;
	align-items: flex-start;
	gap: var(--vs-3);
	margin: 0 0 var(--vs-6);
	padding: var(--vs-5);
	border: 1px solid var(--vs-line);
	border-left: 3px solid var(--vs-accent);
	border-radius: var(--vs-radius);
	background: var(--vs-canvas);
	font-size: var(--vs-fs-sm);
	line-height: 1.7;
}

.order-info mark {
	padding: 2px 7px;
	border-radius: var(--vs-radius);
	background: var(--vs-paper);
	color: var(--vs-ink);
	font-weight: 500;
}

.order-info mark.order-status {
	background: var(--vs-ink);
	color: var(--vs-paper);
	font-size: var(--vs-fs-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.commentlist.notes {
	margin: 0 0 var(--vs-7);
	padding: 0;
	list-style: none;
}

.commentlist.notes .note {
	position: relative;
	padding: 0 0 var(--vs-5) var(--vs-5);
	border-left: 1px solid var(--vs-line);
}

.commentlist.notes .note::before {
	content: '';
	position: absolute;
	top: 6px;
	left: -5px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--vs-gold);
}

.commentlist.notes .note:last-child {
	border-left-color: transparent;
	padding-bottom: 0;
}

.commentlist.notes .meta {
	margin-bottom: 4px;
	color: var(--vs-ink-35);
	font-size: var(--vs-fs-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.commentlist.notes .description {
	color: var(--vs-ink-70);
	font-size: var(--vs-fs-sm);
}

/* ==========================================================================
   8. Wishlist page
   ========================================================================== */

.vs-wishlist-page .vs-grid {
	margin-bottom: var(--vs-6);
}