/* =========================================================
   Villae Vinifera WooCommerce
   Two-surface model:
   - Dark editorial canvas: shop archive, single product.
   - Light commerce surfaces (#ECEBED / accent-5): cart,
     checkout, account, order confirmation. These lean on
     WooCommerce base CSS; overrides stay minimal.

   Table of contents:
   1.  Tokens
   2.  Page shell
   3.  Light commerce pages
   4.  Buttons and fields
   5.  Notices
   6.  Breadcrumbs
   7.  Shop archive / product lists (dark)
   8.  Single product (dark)
   9.  Mini-cart drawer
   10. Customer account (light)
   11. Cart and checkout blocks (light)
   12. Classic cart/checkout fallbacks
   13. Order confirmation (light)
   14. Responsive
   ========================================================= */


/* =========================================================
   1. Tokens
   ========================================================= */

.woocommerce,
.woocommerce-page,
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout,
.wp-block-woocommerce-order-confirmation {
	/* Light surfaces */
	--vv-shop-canvas: var(--wp--preset--color--accent-5);
	--vv-shop-panel: #f7f6f8;
	--vv-shop-panel-muted: color-mix(in srgb, var(--wp--preset--color--accent-5) 60%, #ffffff);
	--vv-shop-text: var(--wp--preset--color--contrast);
	--vv-shop-muted: color-mix(in srgb, var(--wp--preset--color--contrast) 64%, transparent);
	--vv-shop-border: color-mix(in srgb, var(--wp--preset--color--contrast) 14%, transparent);
	--vv-shop-border-strong: color-mix(in srgb, var(--wp--preset--color--contrast) 24%, transparent);

	/* Dark canvas (shop/product) */
	--vv-shop-dark-panel: color-mix(in srgb, var(--wp--preset--color--contrast) 92%, var(--wp--preset--color--base));
	--vv-shop-dark-border: color-mix(in srgb, var(--wp--preset--color--base) 12%, transparent);

	--vv-shop-accent: var(--wp--preset--color--accent-1);
	--vv-shop-radius: var(--vv-radius-m, 12px);
}


/* =========================================================
   2. Page shell
   ========================================================= */

.woocommerce-page main,
.woocommerce main,
.wp-block-woocommerce-page-content-wrapper main {
	width: min(
		100% - 32px,
		calc(var(--wp--style--global--wide-size, 1340px) + 32px)
	);
	margin-inline: auto;
	padding-block: clamp(2.5rem, 6vw, 5rem);
}

.woocommerce main .wp-block-query-title {
	margin-block: 0 clamp(1.5rem, 3vw, 2.5rem);
	font-size: clamp(2.1rem, 5vw, 4rem);
	line-height: 1;
	letter-spacing: -0.015em;
}

.woocommerce a,
.woocommerce-page a {
	color: inherit;
	text-underline-offset: 0.16em;
}

.woocommerce a:hover,
.woocommerce-page a:hover {
	color: var(--vv-shop-accent);
}


/* =========================================================
   3. Light commerce pages
   Cart, checkout, account, and order pages get the light grey
   accent-5 canvas; header and footer keep their own dark
   backgrounds. WooCommerce base CSS does the heavy lifting.
   ========================================================= */

body.woocommerce-cart,
body.woocommerce-checkout,
body.woocommerce-account,
body.woocommerce-order-received,
body.woocommerce-order-pay {
	background: var(--wp--preset--color--accent-5);
}

body.woocommerce-cart main,
body.woocommerce-checkout main,
body.woocommerce-account main,
body.woocommerce-order-received main,
body.woocommerce-order-pay main {
	color: var(--wp--preset--color--contrast);
}

/* Headings and titles read dark on the light canvas */
body.woocommerce-cart main :is(h1, h2, h3, h4, h5, h6),
body.woocommerce-checkout main :is(h1, h2, h3, h4, h5, h6),
body.woocommerce-account main :is(h1, h2, h3, h4, h5, h6),
body.woocommerce-order-received main :is(h1, h2, h3, h4, h5, h6),
body.woocommerce-order-pay main :is(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--contrast);
}

/* All form fields on light pages: white, dark text (overrides the
   dark-canvas form styles from theme.css) */
body.woocommerce-cart main :is(input:not([type="button"], [type="submit"], [type="radio"], [type="checkbox"]), textarea, select),
body.woocommerce-checkout main :is(input:not([type="button"], [type="submit"], [type="radio"], [type="checkbox"]), textarea, select),
body.woocommerce-account main :is(input:not([type="button"], [type="submit"], [type="radio"], [type="checkbox"]), textarea, select),
body.woocommerce-order-received main :is(input:not([type="button"], [type="submit"], [type="radio"], [type="checkbox"]), textarea, select) {
	border-color: var(--vv-shop-border);
	background-color: #ffffff;
	color: var(--wp--preset--color--contrast);
}

body.woocommerce-cart main ::placeholder,
body.woocommerce-checkout main ::placeholder,
body.woocommerce-account main ::placeholder {
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 45%, transparent);
}

/* Links on light surfaces use burgundy (readable on #ECEBED) */
body.woocommerce-cart main a:hover,
body.woocommerce-checkout main a:hover,
body.woocommerce-account main a:hover,
body.woocommerce-order-received main a:hover {
	color: var(--wp--preset--color--accent-2);
}


/* =========================================================
   4. Buttons and fields
   ========================================================= */

.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page button.button,
.woocommerce-page a.button,
.woocommerce-page input.button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wc-block-components-checkout-place-order-button .wc-block-components-button__text {
	border-radius: var(--vv-radius-pill, 999px);
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
}

.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page button.button,
.woocommerce-page a.button,
.woocommerce-page input.button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	background: var(--vv-shop-accent);
	color: var(--wp--preset--color--contrast);
	transition:
		background-color 160ms ease,
		color 160ms ease,
		transform 160ms ease;
}

.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce-page button.button:hover,
.woocommerce-page a.button:hover,
.woocommerce-page input.button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
	background: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--base);
	transform: translateY(-1px);
}

/* Fields on light surfaces */
.woocommerce input.input-text,
.woocommerce textarea,
.woocommerce select,
.woocommerce-page input.input-text,
.woocommerce-page textarea,
.woocommerce-page select,
.wc-block-components-form .wc-block-components-text-input input,
.wc-block-components-form .wc-block-components-textarea,
.wc-block-components-form .wc-block-components-select .wc-block-components-select__select,
.wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input {
	border-color: var(--vv-shop-border);
	border-radius: var(--vv-radius-s, 6px);
	background-color: #ffffff;
	color: var(--vv-shop-text);
	box-shadow: none;
}

.woocommerce input.input-text:focus,
.woocommerce textarea:focus,
.woocommerce select:focus,
.woocommerce-page input.input-text:focus,
.woocommerce-page textarea:focus,
.woocommerce-page select:focus,
.wc-block-components-form .wc-block-components-text-input input:focus,
.wc-block-components-form .wc-block-components-textarea:focus,
.wc-block-components-form .wc-block-components-select .wc-block-components-select__select:focus,
.wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input:focus {
	border-color: var(--vv-shop-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--vv-shop-accent) 18%, transparent);
	outline: none;
}

.woocommerce form .form-row label,
.woocommerce-page form .form-row label,
.wc-block-components-form label,
.wc-block-components-checkbox label {
	font-size: 0.86rem;
	font-weight: 600;
}


/* =========================================================
   5. Notices
   ========================================================= */

.woocommerce-error,
.woocommerce-info,
.woocommerce-message,
.wc-block-components-notice-banner {
	border: 1px solid var(--vv-shop-border);
	border-left: 3px solid var(--vv-shop-accent);
	border-radius: var(--vv-radius-s, 6px);
	background-color: var(--vv-shop-panel);
	color: var(--vv-shop-text);
	box-shadow: none;
}

.woocommerce-error::before,
.woocommerce-info::before,
.woocommerce-message::before {
	color: var(--vv-shop-accent);
}


/* =========================================================
   6. Breadcrumbs
   ========================================================= */

.wp-block-woocommerce-breadcrumbs {
	margin-bottom: clamp(1rem, 2vw, 1.75rem);
	color: var(--vv-text-faint, rgba(255, 255, 255, 0.5));
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.wp-block-woocommerce-breadcrumbs a {
	text-decoration: none;
}


/* =========================================================
   7. Shop archive / product lists (dark canvas)
   ========================================================= */

.woocommerce main .wp-block-term-description {
	max-width: 640px;
	color: var(--vv-text-muted, rgba(255, 255, 255, 0.72));
}

/* Toolbar row: result count + sorting */
.vv-shop-toolbar {
	padding-block: 0.85rem;
	border-top: 1px solid var(--vv-shop-dark-border);
	border-bottom: 1px solid var(--vv-shop-dark-border);
	margin-block: clamp(1.25rem, 2.5vw, 2rem);
}

.woocommerce-result-count,
.woocommerce-ordering,
.wc-block-catalog-sorting,
.wc-block-product-results-count {
	margin: 0;
	color: var(--vv-text-muted, rgba(255, 255, 255, 0.72));
	font-size: 0.9rem;
}

.wc-block-catalog-sorting select,
.woocommerce-ordering select {
	padding: 6px 12px;
	font-size: 0.9rem;
}

/* Product cards */
.wp-block-woocommerce-product-collection .wc-block-product-template__responsive {
	gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2vw, 1.75rem);
}

.wp-block-woocommerce-product-collection .wp-block-woocommerce-product-image,
.wp-block-woocommerce-product-collection .wc-block-components-product-image,
.wp-block-woocommerce-product-collection .wc-block-grid__product-image {
	position: relative;
	overflow: hidden;
	margin-bottom: 1.1rem;
	border-radius: var(--vv-shop-radius);
	background:
		radial-gradient(
			70% 60% at 50% 38%,
			color-mix(in srgb, var(--wp--preset--color--base) 10%, transparent) 0%,
			transparent 100%
		),
		var(--vv-shop-dark-panel);
}

.wp-block-woocommerce-product-collection .wp-block-woocommerce-product-image img {
	transition: transform 500ms var(--vv-ease, ease);
}

.wp-block-woocommerce-product-collection li:hover .wp-block-woocommerce-product-image img {
	transform: scale(1.04);
}

/* Sale badge */
.wc-block-components-product-sale-badge {
	border: 0;
	border-radius: var(--vv-radius-pill, 999px);
	background: var(--vv-shop-accent);
	color: var(--wp--preset--color--contrast);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Card title: editorial serif */
.wp-block-woocommerce-product-collection .wp-block-post-title {
	font-family: var(--wp--preset--font-family--literata);
	font-weight: 500;
	letter-spacing: 0;
}

.wp-block-woocommerce-product-collection .wp-block-post-title a {
	color: var(--wp--preset--color--base);
	text-decoration: none;
	transition: color 160ms ease;
}

.wp-block-woocommerce-product-collection .wp-block-post-title a:hover {
	color: var(--wp--preset--color--accent-3);
}

/* Card price */
.wp-block-woocommerce-product-collection .wc-block-components-product-price {
	color: var(--wp--preset--color--accent-3);
	font-weight: 600;
	letter-spacing: 0.02em;
}

.wp-block-woocommerce-product-collection .wc-block-components-product-price del {
	color: var(--vv-text-faint, rgba(255, 255, 255, 0.5));
	font-weight: 400;
}

/* Card add-to-cart: quiet outline pill that fills on hover */
.wp-block-woocommerce-product-collection .wp-block-button.wc-block-components-product-button .wp-block-button__link,
.wp-block-woocommerce-product-collection .wc-block-components-product-button .wp-block-button__link {
	padding: 0.55rem 1.5rem;
	border: 1px solid var(--vv-line-strong, rgba(255, 255, 255, 0.22));
	border-radius: var(--vv-radius-pill, 999px);
	background: transparent;
	color: var(--wp--preset--color--base);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	transition:
		background-color 160ms ease,
		border-color 160ms ease,
		color 160ms ease;
}

.wp-block-woocommerce-product-collection .wc-block-components-product-button .wp-block-button__link:hover {
	border-color: var(--vv-shop-accent);
	background: var(--vv-shop-accent);
	color: var(--wp--preset--color--contrast);
}

/* Pagination */
.woocommerce main .wp-block-query-pagination {
	margin-top: clamp(2rem, 4vw, 3rem);
	font-size: 0.95rem;
}

.woocommerce main .wp-block-query-pagination a,
.woocommerce main .wp-block-query-pagination .page-numbers {
	color: var(--vv-text-muted, rgba(255, 255, 255, 0.72));
	text-decoration: none;
}

.woocommerce main .wp-block-query-pagination a:hover,
.woocommerce main .wp-block-query-pagination .page-numbers.current {
	color: var(--vv-shop-accent);
}


/* =========================================================
   8. Single product (dark canvas)
   ========================================================= */

.vv-product {
	gap: clamp(2rem, 5vw, 4.5rem);
}

/* Gallery */
.vv-product__gallery .wp-block-woocommerce-product-image-gallery,
.single-product .wp-block-woocommerce-product-image-gallery {
	overflow: hidden;
	border-radius: var(--vv-shop-radius);
	background:
		radial-gradient(
			70% 60% at 50% 38%,
			color-mix(in srgb, var(--wp--preset--color--base) 10%, transparent) 0%,
			transparent 100%
		),
		var(--vv-shop-dark-panel);
}

.single-product .woocommerce-product-gallery img {
	border-radius: var(--vv-shop-radius);
}

/* Summary column */
.vv-product__summary .wp-block-post-title,
.single-product main .wp-block-post-title {
	margin-top: 0;
	font-size: clamp(2rem, 3.5vw, 3.25rem);
	line-height: 1.05;
}

.single-product main .wp-block-woocommerce-product-price {
	color: var(--wp--preset--color--accent-3);
	font-weight: 600;
}

.single-product main .wc-block-components-product-rating {
	color: var(--wp--preset--color--accent-3);
}

.single-product main .wp-block-post-excerpt__excerpt {
	max-width: 540px;
	color: var(--vv-text-muted, rgba(255, 255, 255, 0.72));
	line-height: 1.65;
}

/* Add-to-cart form */
.single-product .wp-block-woocommerce-add-to-cart-form form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.85rem;
	margin-block: 1.5rem;
}

.single-product .wp-block-woocommerce-add-to-cart-form .quantity .qty {
	width: 5.2rem;
	min-height: 48px;
	text-align: center;
	background-color: color-mix(in srgb, var(--wp--preset--color--base) 5%, transparent);
	border-color: var(--vv-line-strong, rgba(255, 255, 255, 0.22));
	color: var(--wp--preset--color--base);
}

.single-product .wp-block-woocommerce-add-to-cart-form .single_add_to_cart_button {
	min-height: 48px;
	padding-inline: 2.2rem;
}

/* Variations table */
.single-product table.variations {
	margin-bottom: 1rem;
}

.single-product table.variations th.label {
	padding-right: 1rem;
	color: var(--vv-text-muted, rgba(255, 255, 255, 0.72));
	font-weight: 600;
}

/* Product meta: quiet small caps under a hairline */
.single-product .wp-block-woocommerce-product-meta {
	margin-top: 1.75rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--vv-shop-dark-border);
	color: var(--vv-text-faint, rgba(255, 255, 255, 0.5));
	font-size: 0.8rem;
	letter-spacing: 0.04em;
}

.single-product .wp-block-woocommerce-product-meta a {
	color: var(--vv-text-muted, rgba(255, 255, 255, 0.72));
	text-decoration: none;
}

.single-product .wp-block-woocommerce-product-meta a:hover {
	color: var(--vv-shop-accent);
}

/* Product details accordion/tabs */
.single-product .wp-block-woocommerce-product-details {
	margin-top: clamp(2.5rem, 5vw, 4rem);
}

.single-product .wp-block-woocommerce-product-details .wc-block-accordion-item,
.single-product .wp-block-woocommerce-product-details .wc-tabs-wrapper {
	border-color: var(--vv-shop-dark-border);
}

/* Related products */
.single-product .wp-block-woocommerce-related-products h2,
.single-product .related.products > h2 {
	margin-top: clamp(2.5rem, 5vw, 4rem);
	font-size: clamp(1.5rem, 2.5vw, 2.1rem);
}


/* =========================================================
   9. Mini-cart drawer
   ========================================================= */

.wc-block-mini-cart__drawer .wc-block-mini-cart__title {
	font-family: var(--wp--preset--font-family--literata);
	font-weight: 500;
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-cart.wc-block-components-button,
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-checkout.wc-block-components-button,
.wc-block-mini-cart__drawer .wc-block-mini-cart__shopping-button a {
	border-radius: var(--vv-radius-pill, 999px);
	font-weight: 600;
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-checkout.wc-block-components-button {
	background: var(--wp--preset--color--accent-1);
	border-color: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--contrast);
}


/* =========================================================
   10. Customer account (light canvas)
   Minimal layer over WooCommerce base CSS: layout grid,
   white cards on the accent-5 canvas, brand buttons.
   ========================================================= */

.woocommerce-account main .wp-block-post-title {
	color: var(--wp--preset--color--contrast);
}

.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
	display: grid;
	grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
	gap: clamp(1.25rem, 3vw, 2rem);
	align-items: start;
	width: min(100%, 1180px);
	margin-inline: auto;
}

.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation)::before,
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation)::after {
	display: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: auto;
	border: 1px solid var(--vv-shop-border);
	border-radius: var(--vv-shop-radius);
	background: var(--vv-shop-panel);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0.5rem;
	list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	margin: 0;
	line-height: 1.2;
}

.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: block;
	padding: 0.65rem 0.85rem;
	border-radius: var(--vv-radius-s, 6px);
	color: var(--vv-shop-muted);
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.25;
	text-decoration: none;
	transition:
		background-color 160ms ease,
		color 160ms ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation a:hover {
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 6%, transparent);
	color: var(--vv-shop-text);
}

.woocommerce-account .woocommerce-MyAccount-navigation .is-active a {
	background: color-mix(in srgb, var(--vv-shop-accent) 18%, transparent);
	color: var(--vv-shop-text);
}

.woocommerce-account .woocommerce-MyAccount-content {
	min-width: 0;
	padding: clamp(1.25rem, 3vw, 2rem);
	color: var(--vv-shop-text);
}

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

/* Address cards: lean on Woo base, just soften the boxes */
.woocommerce-account .woocommerce-Address,
.woocommerce-account .woocommerce-customer-details address {
	border: 1px solid var(--vv-shop-border);
	border-radius: var(--vv-radius-s, 6px);
	background: #ffffff;
	padding: 1.1rem 1.25rem;
}

.woocommerce-account .woocommerce-Address-title a.edit {
	color: var(--wp--preset--color--accent-2);
	font-size: 0.85rem;
	font-weight: 600;
}

/* Login/register and account forms: simple white cards */
.woocommerce-account form.login,
.woocommerce-account form.register {
	border: 1px solid var(--vv-shop-border);
	border-radius: var(--vv-shop-radius);
	background: #ffffff;
}

/* Order tables: Woo base table, light borders */
.woocommerce-account table.shop_table {
	border-color: var(--vv-shop-border);
	border-radius: var(--vv-shop-radius);
	background: #ffffff;
	overflow: hidden;
}

.woocommerce-account table.shop_table th,
.woocommerce-account table.shop_table td {
	border-color: var(--vv-shop-border);
}

.woocommerce-account table.shop_table th {
	color: var(--vv-shop-muted);
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
}


/* =========================================================
   11. Cart and checkout blocks (light canvas)
   Keep close to WooCommerce defaults; panels are white cards
   on the accent-5 canvas.
   ========================================================= */

.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
	color: var(--vv-shop-text);
}

.wc-block-cart__main,
.wc-block-checkout__main,
.wc-block-cart__sidebar,
.wc-block-checkout__sidebar {
	border: 1px solid var(--vv-shop-border);
	border-radius: var(--vv-shop-radius);
	background: var(--vv-shop-panel);
}

.wc-block-cart__main,
.wc-block-checkout__main {
	padding: clamp(1rem, 2.5vw, 1.5rem);
}

.wc-block-cart__sidebar,
.wc-block-checkout__sidebar {
	align-self: start;
	overflow: clip;
}

.wc-block-cart-items,
.wc-block-cart-items__row,
.wc-block-components-order-summary-item,
.wc-block-components-panel,
.wc-block-components-order-summary,
.wc-block-components-totals-wrapper {
	border-color: var(--vv-shop-border);
}

.wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image > img {
	border-radius: var(--vv-radius-s, 6px);
	background: var(--vv-shop-panel-muted);
}

.wc-block-cart-item__product .wc-block-components-product-name,
.wc-block-components-order-summary-item__description .wc-block-components-product-name {
	color: var(--vv-shop-text);
	font-weight: 700;
	line-height: 1.25;
	text-decoration: none;
}

.wc-block-cart-item__prices,
.wc-block-components-product-metadata,
.wc-block-components-order-summary-item__individual-prices,
.wc-block-components-totals-item__description,
.wc-block-components-checkout-return-to-cart-button,
.wc-block-cart__continue-shopping a {
	color: var(--vv-shop-muted);
}

.wc-block-components-totals-footer-item {
	border-top-color: var(--vv-shop-border-strong);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-components-checkout-step__title,
.wc-block-cart__totals-title {
	color: var(--vv-shop-text);
	font-weight: 700;
}


/* =========================================================
   12. Classic cart/checkout fallbacks
   ========================================================= */

.woocommerce-cart-form,
.cart_totals,
.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review,
.woocommerce-checkout #payment {
	border: 1px solid var(--vv-shop-border);
	border-radius: var(--vv-shop-radius);
	background: var(--vv-shop-panel);
	padding: clamp(1rem, 2.5vw, 1.5rem);
	color: var(--vv-shop-text);
}

.woocommerce table.shop_table {
	border-color: var(--vv-shop-border);
	border-radius: var(--vv-shop-radius);
	overflow: hidden;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	border-color: var(--vv-shop-border);
}

.woocommerce table.shop_table th {
	color: var(--vv-shop-muted);
	font-size: 0.78rem;
	text-transform: uppercase;
}

.woocommerce-checkout #payment {
	background: var(--vv-shop-panel);
}

.woocommerce-checkout #payment div.payment_box {
	border-radius: var(--vv-radius-s, 6px);
	background: var(--vv-shop-panel-muted);
	color: var(--vv-shop-text);
}


/* =========================================================
   13. Order confirmation (light canvas)
   ========================================================= */

.wp-block-woocommerce-order-confirmation-status,
.wc-block-order-confirmation-summary,
.wc-block-order-confirmation-totals-wrapper,
.wc-block-order-confirmation-downloads-wrapper,
.wc-block-order-confirmation-shipping-wrapper,
.wc-block-order-confirmation-billing-wrapper,
.wc-block-order-confirmation-additional-fields-wrapper,
.woocommerce-order {
	border: 1px solid var(--vv-shop-border);
	border-radius: var(--vv-shop-radius);
	background: var(--vv-shop-panel);
	padding: clamp(1rem, 2.5vw, 1.5rem);
	color: var(--vv-shop-text);
}

.wc-block-order-confirmation-address-wrapper {
	gap: 1rem;
}


/* =========================================================
   14. Responsive
   ========================================================= */

@media (max-width: 900px) {
	.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
		grid-template-columns: 1fr;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation ul {
		display: flex;
		overflow-x: auto;
		scrollbar-width: thin;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation li {
		flex: 0 0 auto;
	}
}

@media (max-width: 600px) {
	.woocommerce-page main,
	.woocommerce main,
	.wp-block-woocommerce-page-content-wrapper main {
		width: min(100% - 24px, var(--wp--style--global--wide-size, 1340px));
		padding-block: 2rem;
	}

	.single-product .wp-block-woocommerce-add-to-cart-form form.cart {
		align-items: stretch;
		flex-direction: column;
	}

	.single-product .wp-block-woocommerce-add-to-cart-form .single_add_to_cart_button {
		width: 100%;
	}
}