/**
 * WooCommerce.
 *
 * Loaded after main.css and after WooCommerce's own `woocommerce-general`
 * sheet (declared as a dependency in Vionex\Assets), so these rules win on
 * cascade order without a single !important — except on the block-based
 * cart and checkout, where Woo resolves button colours from inline presets
 * and there is nothing else to override them with.
 */

/* ── Shop layout ───────────────────────────────────────────────────── */

.vx-woo { padding-block: var(--s-7); }
.woocommerce-notices-wrapper:empty { display: none; }

.woocommerce-products-header { display: none; }

.woocommerce-result-count,
.woocommerce-ordering {
	font-family: var(--vx-font-mono);
	font-size: var(--t-xs);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--vx-muted);
}
.woocommerce-ordering select {
	padding: 0.35rem 0.5rem;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--vx-rule);
	color: var(--vx-text);
	font-family: var(--vx-font-body);
	font-size: var(--t-sm);
	text-transform: none;
	letter-spacing: 0;
}

ul.products {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--s-6) var(--s-5);
	margin: var(--s-6) 0 0;
	padding: 0;
	list-style: none;
}
ul.products::before, ul.products::after { display: none; }
ul.products li.product { width: auto !important; margin: 0 !important; float: none !important; clear: none !important; }

.woocommerce-pagination { margin-top: var(--s-8); }
.woocommerce-pagination ul { display: flex; justify-content: center; gap: 0.35rem; border: 0 !important; }
.woocommerce-pagination li { border: 0 !important; }
.woocommerce-pagination a, .woocommerce-pagination span {
	display: grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	border: 1px solid transparent;
	border-radius: var(--vx-radius);
	font-family: var(--vx-font-mono);
	font-size: var(--t-sm);
	color: var(--vx-muted);
}
.woocommerce-pagination .current { color: var(--vx-text); border-color: var(--vx-text); }

/* ── Single product ────────────────────────────────────────────────── */

.single-product div.product {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--s-8);
	align-items: start;
}
.single-product div.product .woocommerce-product-gallery { width: auto !important; float: none !important; }
.single-product div.product .summary { width: auto !important; float: none !important; margin: 0 !important; }
.single-product div.product .woocommerce-tabs,
.single-product div.product .related,
.single-product div.product .up-sells { grid-column: 1 / -1; }

.woocommerce-product-gallery__image img { border-radius: var(--vx-radius); }
.flex-control-thumbs { display: flex; gap: 0.5rem; margin-top: 0.75rem; padding: 0; list-style: none; }
.flex-control-thumbs li { width: 84px; }
.flex-control-thumbs img { border-radius: var(--vx-radius); opacity: 0.6; cursor: pointer; }
.flex-control-thumbs img.flex-active { opacity: 1; }

.product_title { font-size: var(--t-3xl); }
.single-product .summary .price {
	display: block;
	margin-top: var(--s-4);
	font-family: var(--vx-font-display);
	font-size: var(--t-2xl);
	color: var(--vx-text);
}
.single-product .summary .price del { opacity: 0.45; margin-right: 0.5rem; }
.single-product .summary .price ins { text-decoration: none; }
.woocommerce-product-details__short-description { margin-top: var(--s-4); color: var(--vx-muted); }
.product_meta {
	margin-top: var(--s-6);
	padding-top: var(--s-5);
	border-top: 1px solid var(--vx-rule);
	font-family: var(--vx-font-mono);
	font-size: var(--t-xs);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--vx-muted);
}
.product_meta a { color: var(--vx-text); }

.quantity input.qty {
	width: 76px;
	padding: 0.62rem 0.5rem;
	text-align: center;
	background: var(--vx-surface);
	border: 1px solid var(--vx-rule);
	border-radius: var(--vx-radius);
}

/* ── Buttons ───────────────────────────────────────────────────────── */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wc-block-components-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.78rem 1.4rem;
	background: var(--vx-text);
	color: var(--vx-bg);
	border: 1px solid transparent;
	border-radius: var(--vx-radius);
	font-family: var(--vx-font-body);
	font-size: var(--t-md);
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	text-transform: none;
	transition: background 180ms, color 180ms, border-color 180ms;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover { background: var(--vx-accent); color: var(--vx-on-accent); }

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt { background: var(--vx-accent); color: var(--vx-on-accent); }
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover { background: var(--vx-text); color: var(--vx-bg); }

/*
 * The block cart/checkout resolve their own colours from inline presets
 * that land after every stylesheet, and can end up accent-on-accent (a 1:1
 * contrast ratio). This is the one place the override has to be forced.
 */
.wc-block-components-button:not(.is-link) {
	background-color: var(--vx-text) !important;
	color: var(--vx-bg) !important;
	border-radius: var(--vx-radius) !important;
}
.wc-block-components-button:not(.is-link):hover {
	background-color: var(--vx-accent) !important;
	color: var(--vx-on-accent) !important;
}

/* ── Notices ───────────────────────────────────────────────────────── */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-4);
	padding: var(--s-4) var(--s-5);
	margin-bottom: var(--s-5);
	background: var(--vx-shade);
	border: 0;
	border-left: 2px solid var(--vx-accent);
	border-radius: 0;
	color: var(--vx-text);
	font-size: var(--t-md);
	list-style: none;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none; }
.woocommerce-message .button { margin-left: auto; }

/* ── Cart, checkout, account ───────────────────────────────────────── */

.woocommerce table.shop_table {
	border: 0;
	border-collapse: collapse;
	border-radius: 0;
}
.woocommerce table.shop_table th {
	padding: 0.75rem 0.5rem;
	border-bottom: 1px solid var(--vx-text);
	font-family: var(--vx-font-mono);
	font-size: var(--t-xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--vx-muted);
	text-align: left;
}
.woocommerce table.shop_table td {
	padding: var(--s-4) 0.5rem;
	border-top: 0;
	border-bottom: 1px solid var(--vx-rule-soft);
}
.woocommerce table.shop_table img { width: 68px; border-radius: var(--vx-radius); }

.woocommerce .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-review-order {
	padding: var(--s-5);
	border: 1px solid var(--vx-rule);
	border-radius: var(--vx-radius);
	background: var(--vx-surface);
}

.woocommerce form .form-row { padding: 0; margin-bottom: var(--s-4); }
.woocommerce form .form-row label {
	display: block;
	margin-bottom: 0.4rem;
	font-family: var(--vx-font-mono);
	font-size: var(--t-xs);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--vx-muted);
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container .select2-selection--single {
	width: 100%;
	height: auto;
	padding: 0.7rem 0.9rem;
	background: var(--vx-surface);
	border: 1px solid var(--vx-rule);
	border-radius: var(--vx-radius);
	font-size: var(--t-md);
	color: var(--vx-text);
}
.select2-container .select2-selection--single .select2-selection__rendered { line-height: 1.4; padding: 0; color: var(--vx-text); }

.woocommerce-MyAccount-navigation ul { display: grid; gap: 0.35rem; list-style: none; padding: 0; }
.woocommerce-MyAccount-navigation a {
	display: block;
	padding: 0.55rem 0;
	border-bottom: 1px solid var(--vx-rule-soft);
	color: var(--vx-muted);
	text-decoration: none;
}
.woocommerce-MyAccount-navigation .is-active a { color: var(--vx-text); }

/* ── Tabs & reviews ────────────────────────────────────────────────── */

.woocommerce-tabs { margin-top: var(--s-8); }
.woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-5);
	margin: 0 0 var(--s-6);
	padding: 0 0 var(--s-3);
	border-bottom: 1px solid var(--vx-rule);
	list-style: none;
}
.woocommerce-tabs ul.tabs::before, .woocommerce-tabs ul.tabs::after { display: none; }
.woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}
.woocommerce-tabs ul.tabs li::before, .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce-tabs ul.tabs li a {
	padding: 0;
	font-family: var(--vx-font-mono);
	font-size: var(--t-xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--vx-muted);
}
.woocommerce-tabs ul.tabs li.active a { color: var(--vx-text); }

.woocommerce .star-rating { color: var(--vx-accent); }
#reviews .comment-text { border: 0; padding: 0; margin-left: 72px; }
#reviews .commentlist li { list-style: none; padding-block: var(--s-5); border-top: 1px solid var(--vx-rule-soft); }
#reviews .commentlist img.avatar { width: 56px; border: 0; border-radius: 50%; padding: 0; }

/* Nextend Social Login and similar drop-in buttons on the account form. */
.nsl-container { margin-top: var(--s-5); }
.nsl-container .nsl-button { border-radius: var(--vx-radius) !important; }

/* ── Responsive ────────────────────────────────────────────────────── */

@media (max-width: 940px) {
	ul.products { grid-template-columns: repeat(2, 1fr); }
	.single-product div.product { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
}

@media (max-width: 640px) {
	ul.products { grid-template-columns: minmax(0, 1fr); }
	.woocommerce table.shop_table img { width: 52px; }
}