/*
 * Ventureheap Theme - WooCommerce layer.
 * Loaded only on shop, cart, checkout and account views.
 */

.woocommerce .vh-primary { min-width: 0; }

/* ------------------------------------------------------------ Product loop */
.woocommerce ul.products {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--vh-gap);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* WooCommerce clears its float layout with ::before and ::after. In a grid
   those become empty cells, and the first product starts one cell late. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after { content: none; display: none; }

/* Its per-column widths and margins are for floats; inside the grid they
   would shrink each card inside its own cell. */
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product {
	width: auto;
	margin: 0;
	float: none;
	clear: none;
}

.woocommerce ul.products li.product {
	margin: 0;
	width: auto;
	float: none;
	background: var(--vh-color-bg);
	border: 1px solid var(--vh-color-border);
	border-radius: var(--vh-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow var(--vh-transition), transform var(--vh-transition);
}

.woocommerce ul.products li.product:hover { box-shadow: var(--vh-shadow); transform: translateY(-2px); }

.vh-product-media { position: relative; overflow: hidden; background: var(--vh-color-alt); }
.vh-product-media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform .35s ease; }
.woocommerce ul.products li.product:hover .vh-product-media img { transform: scale(1.04); }

.vh-product-body { padding: 16px; display: flex; flex-direction: column; gap: .35rem; flex: 1; }

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 1rem;
	font-weight: 600;
	margin: 0;
	padding: 0;
	line-height: 1.4;
}

.woocommerce ul.products li.product a { text-decoration: none; }
.woocommerce ul.products li.product .price {
	color: var(--vh-color-secondary);
	font-weight: 700;
	font-size: 1.02rem;
	margin: 0;
	display: block;
}

.woocommerce ul.products li.product .price del { color: var(--vh-color-muted); font-weight: 400; opacity: .8; margin-right: .4rem; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
	margin-top: auto;
	align-self: stretch;
	text-align: center;
	font-size: .9rem;
	padding: .6rem 1rem;
}

/* --------------------------------------------------------------- Badges */
.vh-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	display: inline-block;
	padding: .25rem .6rem;
	font-size: .74rem;
	font-weight: 700;
	line-height: 1.5;
	border-radius: 999px;
	color: #fff;
	background: var(--vh-color-primary);
}

.vh-badge-sale { background: var(--vh-color-accent); color: var(--vh-color-secondary); }
.vh-badge-oos { top: auto; bottom: 10px; left: 10px; background: var(--vh-color-secondary); }

.woocommerce span.onsale { display: none; }
.vh-product-media .vh-badge-sale { display: inline-block; }

/* ---------------------------------------------------------------- Rating */
.woocommerce .star-rating { font-size: .8rem; color: var(--vh-color-accent); margin: 0; }

/* ----------------------------------------------------- Shop loop toolbar */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering { margin-bottom: 1.2rem; }

.woocommerce .woocommerce-ordering select { width: auto; min-width: 200px; }

/* -------------------------------------------------------- Single product */
.vh-single-product-hero { padding-top: 24px; }

.vh-product-top { display: grid; gap: 32px; grid-template-columns: 1fr; margin-bottom: 48px; }

.woocommerce div.product div.images,
.woocommerce div.product div.summary { width: auto; float: none; margin: 0; }

.woocommerce div.product .woocommerce-product-gallery__wrapper img { border-radius: var(--vh-radius); }

.woocommerce div.product .product_title { margin-bottom: .5rem; }
.woocommerce div.product p.price, .woocommerce div.product span.price {
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--vh-color-secondary);
}
.woocommerce div.product p.price del { font-size: 1.1rem; color: var(--vh-color-muted); font-weight: 400; }

.woocommerce div.product form.cart { margin: 1.5rem 0; display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.woocommerce div.product form.cart.variations_form { display: block; }
.woocommerce div.product form.cart .quantity input { width: 80px; text-align: center; }
.woocommerce div.product form.cart .button { padding: .8rem 1.8rem; }

.woocommerce div.product .woocommerce-tabs { margin-top: 24px; }
.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0;
	margin: 0 0 20px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	border-bottom: 1px solid var(--vh-color-border);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: none;
	border: 0;
	border-radius: 0;
	margin: 0;
	padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: .7rem 1.1rem;
	font-weight: 600;
	color: var(--vh-color-muted);
	border-bottom: 2px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--vh-color-primary); border-bottom-color: var(--vh-color-primary); }

.woocommerce .related, .woocommerce .upsells { margin-top: 48px; }
.woocommerce .related > h2, .woocommerce .upsells > h2 { margin-bottom: 1.2rem; }

/* ----------------------------------------------------------- Checkout steps */
.vh-checkout-steps {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 0;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.vh-checkout-steps__item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: .92rem;
	font-weight: 600;
	color: var(--vh-color-muted);
}

.vh-checkout-steps__item + .vh-checkout-steps__item::before {
	content: "";
	width: clamp(18px, 5vw, 56px);
	height: 2px;
	margin: 0 12px;
	background: var(--vh-color-border);
}

.vh-checkout-steps__item.is-done + .vh-checkout-steps__item::before { background: var(--vh-color-primary); }

.vh-checkout-steps__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	font-size: .85rem;
	border-radius: 50%;
	border: 2px solid var(--vh-color-border);
	background: var(--vh-color-bg);
}

.vh-checkout-steps__item.is-current { color: var(--vh-color-secondary); }
.vh-checkout-steps__item.is-current .vh-checkout-steps__num { border-color: var(--vh-color-primary); color: var(--vh-color-primary); }
.vh-checkout-steps__item.is-done .vh-checkout-steps__num { background: var(--vh-color-primary); border-color: var(--vh-color-primary); color: #fff; }
.vh-checkout-steps__item a { color: inherit; }

@media (max-width: 600px) {
	.vh-checkout-steps { flex-wrap: nowrap; }
	.vh-checkout-steps__item { font-size: .88rem; gap: 8px; white-space: nowrap; }
	.vh-checkout-steps__item + .vh-checkout-steps__item::before { width: 14px; margin: 0 6px; }
	.vh-checkout-steps__num { width: 26px; height: 26px; }

	/* Numbers only on a phone, except for the step the shopper is on. */
	.vh-checkout-steps__item:not(.is-current) > a,
	.vh-checkout-steps__item:not(.is-current) > span:not(.vh-checkout-steps__num) {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}
}

/* ------------------------------------------------------- Shared form look */
.woocommerce form .form-row { padding: 0; margin: 0 0 1rem; }
.woocommerce form .form-row label { display: block; margin-bottom: .35rem; font-size: .9rem; font-weight: 600; color: var(--vh-color-secondary); }
.woocommerce form .form-row .required { color: #dc2626; text-decoration: none; }

.woocommerce form .form-row .input-text,
.woocommerce form .form-row select,
.woocommerce-page form .form-row .input-text,
.woocommerce .select2-container .select2-selection--single,
.woocommerce-cart table.cart td.actions .coupon .input-text,
.woocommerce .quantity .qty {
	min-height: 46px;
	padding: .65rem .85rem;
	font: inherit;
	color: var(--vh-color-text);
	background: var(--vh-color-bg);
	border: 1px solid var(--vh-color-border);
	border-radius: var(--vh-radius-button);
	box-shadow: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.woocommerce .select2-container .select2-selection--single .select2-selection__rendered { padding: 0; line-height: 24px; }
.woocommerce .select2-container .select2-selection--single .select2-selection__arrow { top: 10px; right: 8px; }

.woocommerce form .form-row .input-text:focus,
.woocommerce form .form-row select:focus,
.woocommerce-cart table.cart td.actions .coupon .input-text:focus,
.woocommerce .quantity .qty:focus {
	outline: none;
	border-color: var(--vh-color-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--vh-color-primary) 18%, transparent);
}

.woocommerce form .form-row.woocommerce-invalid .input-text { border-color: #dc2626; }
.woocommerce .quantity .qty { width: 76px; text-align: center; padding-inline: .4rem; }

/* WooCommerce buttons take the theme button look. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: .65rem 1.3rem;
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	color: var(--vh-color-secondary);
	background: var(--vh-color-alt);
	border: 1px solid var(--vh-color-border);
	border-radius: var(--vh-radius-button);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover { background: var(--vh-color-border); color: var(--vh-color-secondary); }

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #payment #place_order,
.woocommerce .wc-proceed-to-checkout a.checkout-button {
	color: #fff;
	background: var(--vh-color-primary);
	border-color: var(--vh-color-primary);
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce #payment #place_order:hover,
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover { color: #fff; background: var(--vh-color-primary); filter: brightness(.92); }

.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled] { opacity: .55; padding: .65rem 1.3rem; }

/* --------------------------------------------------------------- Notices */
.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
	padding: 1rem 1.2rem 1rem 3.2rem;
	color: var(--vh-color-text);
	background: var(--vh-color-alt);
	border: 0;
	border-left: 4px solid var(--vh-color-primary);
	border-radius: var(--vh-radius-button);
}

.woocommerce-error::before,
.woocommerce-info::before,
.woocommerce-message::before { top: 1rem; left: 1.1rem; color: var(--vh-color-primary); }

.woocommerce-message { border-left-color: #16a34a; }
.woocommerce-message::before { color: #16a34a; }
.woocommerce-error { border-left-color: #dc2626; background: #fef2f2; }
.woocommerce-error::before { color: #dc2626; }
.woocommerce-error li { margin: 0; }
.woocommerce-message .button,
.woocommerce-info .button { float: right; min-height: 0; padding: .35rem .9rem; margin-left: 12px; }

/* ------------------------------------------------------------------ Cart */
.woocommerce table.shop_table {
	width: 100%;
	margin: 0 0 24px;
	border: 1px solid var(--vh-color-border);
	border-collapse: separate;
	border-spacing: 0;
	border-radius: var(--vh-radius);
	overflow: hidden;
	background: var(--vh-color-bg);
}

/* Page content makes every table a scrolling block and borders every cell.
   Both are wrong for WooCommerce's own tables. */
@media (min-width: 783px) {
	.vh-entry-content .woocommerce table.shop_table { display: table; }
}

/* On a phone the cart and checkout tables stay tables too; WooCommerce
   stacks their rows. */
@media (max-width: 782px) {
	.vh-entry-content .woocommerce table.cart,
	.vh-entry-content .woocommerce table.woocommerce-checkout-review-order-table,
	.vh-entry-content .woocommerce .cart_totals table.shop_table { display: table; }
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td { border-left: 0; border-right: 0; border-bottom: 0; }

.woocommerce table.shop_table th {
	padding: 14px 16px;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--vh-color-muted);
	background: var(--vh-color-alt);
	border: 0;
}

.woocommerce table.shop_table td { padding: 16px; border-top: 1px solid var(--vh-color-border); vertical-align: middle; }
.woocommerce table.shop_table td.product-name a { font-weight: 600; color: var(--vh-color-secondary); }
.woocommerce table.shop_table td.product-name a:hover { color: var(--vh-color-primary); }
.woocommerce table.shop_table td.product-subtotal { font-weight: 700; color: var(--vh-color-secondary); }
.woocommerce table.cart img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; }
.woocommerce table.cart .product-thumbnail { width: 96px; }

.woocommerce table.cart a.remove,
.woocommerce a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	font-size: 20px;
	line-height: 1;
	color: var(--vh-color-muted) !important;
	background: var(--vh-color-alt);
	border-radius: 50%;
}

.woocommerce table.cart a.remove:hover,
.woocommerce a.remove:hover { color: #fff !important; background: #dc2626; }

.woocommerce table.cart td.actions { background: var(--vh-color-alt); }
.woocommerce table.cart td.actions .coupon { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.woocommerce table.cart td.actions .coupon .input-text { width: 200px; margin: 0; }
.woocommerce table.cart td.actions > .button { float: right; }

.woocommerce .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review {
	padding: 24px;
	background: var(--vh-color-bg);
	border: 1px solid var(--vh-color-border);
	border-radius: var(--vh-radius);
	box-shadow: 0 18px 40px -30px rgba(15, 23, 42, .35);
}

.woocommerce .cart-collaterals .cart_totals { width: 100%; float: none; }
.woocommerce .cart-collaterals .cart_totals h2 { margin: 0 0 14px; font-size: 1.2rem; }
.woocommerce .cart_totals table.shop_table { border: 0; margin: 0; border-radius: 0; }
.woocommerce .cart_totals table.shop_table th { background: none; border-top: 1px solid var(--vh-color-border); padding: 12px 0; text-transform: none; letter-spacing: 0; font-size: .95rem; color: var(--vh-color-muted); font-weight: 500; }
.woocommerce .cart_totals table.shop_table td { padding: 12px 0; text-align: right; }
.woocommerce .cart_totals table.shop_table tr:first-child th,
.woocommerce .cart_totals table.shop_table tr:first-child td { border-top: 0; }
.woocommerce .cart_totals .woocommerce-shipping-destination { margin: 4px 0 0; font-size: .86rem; color: var(--vh-color-muted); }
.woocommerce ul#shipping_method { margin: 0; }
.woocommerce ul#shipping_method li { margin: 0 0 4px; }
.woocommerce .cart_totals .order-total th,
.woocommerce .cart_totals .order-total td { font-size: 1.15rem; font-weight: 800; color: var(--vh-color-secondary); }
.woocommerce .wc-proceed-to-checkout { padding: 16px 0 0; }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button { display: flex; width: 100%; margin: 0; padding: 1rem; font-size: 1.05rem; }

.woocommerce .cross-sells > h2 { margin: 0 0 16px; font-size: 1.3rem; }

.vh-cart-empty {
	max-width: 560px;
	margin: 0 auto;
	padding: 56px 24px;
	text-align: center;
	background: var(--vh-color-alt);
	border-radius: var(--vh-radius);
}

.vh-cart-empty .cart-empty.woocommerce-info { margin: 0 0 20px; padding: 0; background: none; border: 0; font-size: 1.2rem; font-weight: 600; color: var(--vh-color-secondary); }
.vh-cart-empty .cart-empty.woocommerce-info::before { display: none; }
.vh-cart-empty::before { content: ""; display: block; width: 56px; height: 56px; margin: 0 auto 16px; background: var(--vh-color-primary); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.4 11.2a2 2 0 0 0 2 1.6h7.7a2 2 0 0 0 2-1.5L21 8H6.2'/%3E%3Ccircle cx='10' cy='20' r='1.2'/%3E%3Ccircle cx='17' cy='20' r='1.2'/%3E%3C/svg%3E") center / contain no-repeat; }
.vh-cart-empty .return-to-shop { margin: 0; }

@media (min-width: 992px) {
	/* Items on the left, totals pinned on the right while scrolling. */
	.woocommerce-cart .woocommerce:has(> .woocommerce-cart-form) {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 380px;
		grid-template-areas: "notices notices" "items totals" "extra extra";
		gap: 0 32px;
		align-items: start;
	}

	.woocommerce-cart .woocommerce:has(> .woocommerce-cart-form)::before,
	.woocommerce-cart .woocommerce:has(> .woocommerce-cart-form)::after,
	.woocommerce-checkout form.checkout::before,
	.woocommerce-checkout form.checkout::after { content: none; display: none; }

	.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper { grid-area: notices; }
	.woocommerce-cart .woocommerce > .woocommerce-cart-form { grid-area: items; }
	.woocommerce-cart .woocommerce > .cart-collaterals { display: contents; }
	.woocommerce-cart .cart-collaterals .cart_totals { grid-area: totals; position: sticky; top: 100px; }
	.woocommerce-cart .cart-collaterals .cross-sells { grid-area: extra; width: 100%; float: none; margin-top: 32px; }
}

/* -------------------------------------------------------------- Checkout */
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 { width: 100%; float: none; }
.woocommerce-checkout .col2-set .col-2 { margin-top: 12px; }
.woocommerce-checkout h3 { margin: 0 0 16px; font-size: 1.2rem; }

.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields {
	padding: 24px;
	margin-bottom: 20px;
	background: var(--vh-color-bg);
	border: 1px solid var(--vh-color-border);
	border-radius: var(--vh-radius);
}

.woocommerce-checkout .woocommerce-shipping-fields:empty,
.woocommerce-checkout .woocommerce-additional-fields:empty { display: none; }

.woocommerce form .form-row-first,
.woocommerce form .form-row-last { width: calc(50% - 8px); }

.woocommerce-checkout #order_review_heading { margin: 0 0 16px; }
.woocommerce-checkout-review-order-table { border: 0 !important; margin-bottom: 16px !important; }
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td { padding: 12px 0 !important; background: none !important; }
.woocommerce-checkout-review-order-table tfoot th { text-transform: none; letter-spacing: 0; font-size: .95rem; font-weight: 500; color: var(--vh-color-muted); }
.woocommerce-checkout-review-order-table td.product-total,
.woocommerce-checkout-review-order-table tfoot td { text-align: right; }
.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td { font-size: 1.15rem; font-weight: 800; color: var(--vh-color-secondary); }

.woocommerce-checkout #payment { padding: 0; background: none; border-radius: 0; }
.woocommerce-checkout #payment ul.payment_methods { padding: 0 0 16px; border-bottom: 1px solid var(--vh-color-border); }
.woocommerce-checkout #payment ul.payment_methods li { padding: 10px 12px; margin: 0 0 8px; list-style: none; border: 1px solid var(--vh-color-border); border-radius: var(--vh-radius-button); }
.woocommerce-checkout #payment ul.payment_methods li label { font-weight: 600; }
.woocommerce-checkout #payment div.payment_box { margin: 10px 0 2px; padding: 12px; font-size: .9rem; color: var(--vh-color-text); background: var(--vh-color-alt); border-radius: 8px; }
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce-checkout #payment div.form-row { padding: 16px 0 0; }
.woocommerce #payment #place_order { width: 100%; float: none; min-height: 54px; font-size: 1.05rem; }
.woocommerce-terms-and-conditions-wrapper { font-size: .88rem; color: var(--vh-color-muted); }

@media (min-width: 992px) {
	/* Details on the left, the order and payment pinned on the right. */
	.woocommerce-checkout form.checkout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 420px;
		grid-template-areas: "details heading" "details review";
		grid-template-rows: auto 1fr;
		gap: 0 32px;
		align-items: start;
	}

	.woocommerce-checkout form.checkout > .woocommerce-NoticeGroup { grid-column: 1 / -1; }
	.woocommerce-checkout form.checkout > #customer_details { grid-area: details; }
	.woocommerce-checkout form.checkout > #order_review_heading { grid-area: heading; }
	.woocommerce-checkout form.checkout > #order_review { grid-area: review; position: sticky; top: 100px; }
}

@media (max-width: 600px) {
	.woocommerce form .form-row-first,
	.woocommerce form .form-row-last { width: 100%; }
	.woocommerce-checkout .woocommerce-billing-fields,
	.woocommerce-checkout #order_review,
	.woocommerce .cart-collaterals .cart_totals { padding: 18px; }
}

/* ------------------------------------------------------- Order received */
.woocommerce-order .woocommerce-thankyou-order-received {
	padding: 18px 20px;
	font-size: 1.1rem;
	font-weight: 600;
	color: #065f46;
	background: #ecfdf5;
	border-radius: var(--vh-radius);
}

.woocommerce ul.order_details {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 12px;
	margin: 20px 0 32px;
	padding: 0;
	list-style: none;
}

.woocommerce ul.order_details::before,
.woocommerce ul.order_details::after { display: none; }

.woocommerce ul.order_details li {
	float: none;
	margin: 0;
	padding: 16px;
	font-size: .78rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--vh-color-muted);
	background: var(--vh-color-alt);
	border: 0;
	border-radius: var(--vh-radius);
}

.woocommerce ul.order_details li strong { display: block; margin-top: 6px; font-size: 1.05rem; letter-spacing: 0; text-transform: none; color: var(--vh-color-secondary); }

/* ------------------------------------------------------------- My account */
.woocommerce-account .woocommerce-MyAccount-navigation { width: 100%; float: none; margin-bottom: 24px; }
.woocommerce-account .woocommerce-MyAccount-content { width: 100%; float: none; }

.vh-account-nav {
	padding: 10px;
	background: var(--vh-color-bg);
	border: 1px solid var(--vh-color-border);
	border-radius: var(--vh-radius);
}

.vh-account-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

.vh-account-nav a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: .7rem .85rem;
	font-weight: 500;
	color: var(--vh-color-secondary);
	border-radius: var(--vh-radius-button);
	text-decoration: none;
}

.vh-account-nav a::before {
	content: "";
	flex: 0 0 20px;
	height: 20px;
	background: currentColor;
	opacity: .7;
	mask: var(--vh-account-icon, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E")) center / contain no-repeat;
}

.vh-account-nav a:hover { background: var(--vh-color-alt); }
.vh-account-nav .is-active a { color: #fff; background: var(--vh-color-primary); }
.vh-account-nav .is-active a::before { opacity: 1; }

.woocommerce-MyAccount-navigation-link--dashboard { --vh-account-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--orders { --vh-account-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M6 3h12l2 4v13a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7z'/%3E%3Cpath d='M4 7h16M9 11a3 3 0 0 0 6 0'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--downloads { --vh-account-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 4v11m-5-5 5 5 5-5M5 20h14'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--edit-address { --vh-account-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M12 21s-7-6.2-7-11a7 7 0 0 1 14 0c0 4.8-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--payment-methods { --vh-account-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 10h18M7 15h4'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--edit-account { --vh-account-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--customer-logout { --vh-account-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M15 4h4a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-4M10 16l4-4-4-4M14 12H3'/%3E%3C/svg%3E"); }
.vh-account-nav .woocommerce-MyAccount-navigation-link--customer-logout { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--vh-color-border); }

.woocommerce-account .woocommerce-MyAccount-content {
	padding: 28px;
	background: var(--vh-color-bg);
	border: 1px solid var(--vh-color-border);
	border-radius: var(--vh-radius);
}

.woocommerce-account .woocommerce-MyAccount-content > p:first-child { font-size: 1.05rem; }
.woocommerce-account .woocommerce-Addresses .woocommerce-Address { padding: 18px; background: var(--vh-color-alt); border-radius: var(--vh-radius); }
.woocommerce-account .woocommerce-Addresses .woocommerce-Address-title h2 { font-size: 1.1rem; }

/* Signed out: log in and register as two cards. */
.woocommerce-account #customer_login { display: grid; gap: 24px; }
.woocommerce-account #customer_login::before,
.woocommerce-account #customer_login::after { display: none; }
.woocommerce-account #customer_login > .u-column1,
.woocommerce-account #customer_login > .u-column2 { width: auto; float: none; }

.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
	margin: 0 !important;
	padding: 28px !important;
	background: var(--vh-color-bg);
	border: 1px solid var(--vh-color-border) !important;
	border-radius: var(--vh-radius) !important;
}

.woocommerce-account .woocommerce-form-login .button,
.woocommerce-account .woocommerce-form-register .button { width: 100%; margin-top: 6px; color: #fff; background: var(--vh-color-primary); border-color: var(--vh-color-primary); }
.woocommerce-account .woocommerce-form-login__rememberme { display: block; margin: 0 0 10px; }
.woocommerce-account .lost_password { margin: 14px 0 0; font-size: .9rem; }

@media (max-width: 781px) {
	/* A row of chips that scrolls, so the content is not pushed below seven
	   full width links on a phone. */
	.vh-account-nav { padding: 0; background: none; border: 0; }
	.vh-account-nav ul { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
	.vh-account-nav ul::-webkit-scrollbar { display: none; }
	.vh-account-nav a { white-space: nowrap; padding: .5rem .85rem; border: 1px solid var(--vh-color-border); background: var(--vh-color-bg); }
	.vh-account-nav .woocommerce-MyAccount-navigation-link--customer-logout { margin: 0; padding: 0; border: 0; }
	.woocommerce-account .woocommerce-MyAccount-content { padding: 20px; }
}

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

	/* WooCommerce's clearfix pseudo elements would take the first grid cell. */
	.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation)::before,
	.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation)::after { content: none; display: none; }

	.woocommerce-account .woocommerce-MyAccount-navigation { width: auto; margin: 0; position: sticky; top: 100px; }
	.woocommerce-account .woocommerce-MyAccount-content { width: auto; }
	.woocommerce-account #customer_login { grid-template-columns: 1fr 1fr; }
}

/* ------------------------------------------------ Block cart and checkout */
.wc-block-cart .wc-block-components-button:not(.is-link),
.wc-block-checkout .wc-block-components-checkout-place-order-button,
.wc-block-components-totals-coupon__button {
	color: #fff;
	background: var(--vh-color-primary);
	border-radius: var(--vh-radius-button);
}

.wc-block-components-sidebar-layout .wc-block-components-sidebar { position: sticky; top: 100px; }
.wc-block-components-totals-wrapper,
.wc-block-components-order-summary { border-color: var(--vh-color-border); }
.wc-block-components-text-input input,
.wc-block-components-combobox .wc-block-components-combobox-control input { border-radius: var(--vh-radius-button) !important; }

/* ---------------------------------------------------------------- Widgets */
.woocommerce .widget_price_filter .ui-slider .ui-slider-range,
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle { background: var(--vh-color-primary); }

/* ------------------------------------------------------------ Breakpoints */
@media (min-width: 576px) {
	.woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 782px) {
	.woocommerce ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.vh-product-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
}

@media (min-width: 992px) {
	.woocommerce ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.woocommerce.vh-sidebar-right ul.products,
	body.vh-sidebar-right .woocommerce ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------ Mobile pass */
@media (max-width: 782px) {
	/* Two products per row is the right density on a phone; one is too sparse
	   and three is unreadable. */
	.woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

	.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: .92rem; }
	.woocommerce ul.products li.product .button { font-size: .82rem; padding: .55rem .7rem; }

	.vh-product-body { padding: 12px; }

	/* Order and download tables are shop_table_responsive too, so WooCommerce
	   stacks them; no sideways scrolling needed. */
	.woocommerce table.shop_table_responsive tr td::before { margin-right: 12px; }

	/* WooCommerce stacks each cart row on a phone; make each one a card. */
	.woocommerce table.shop_table_responsive tr { display: block; padding: 8px 0; border-top: 1px solid var(--vh-color-border); }
	.woocommerce table.shop_table_responsive tr:first-child { border-top: 0; }
	.woocommerce table.shop_table_responsive tr td { border-top: 0; padding: 6px 16px; }
	.woocommerce table.cart .product-thumbnail { display: block; width: auto; text-align: left; }
	/* WooCommerce labels every cell from data-title; these two have none. */
	.woocommerce table.cart td.product-thumbnail::before,
	.woocommerce table.cart td.product-remove::before { content: none; display: none; }
	.woocommerce table.shop_table_responsive tr:nth-child(2n) td { background-color: transparent; }
	.woocommerce .cart_totals table.shop_table_responsive tr { border-top: 0; padding: 0; }
	.woocommerce table.cart td.product-remove { position: relative; height: 0; padding: 0; }
	.woocommerce table.cart td.product-remove a.remove { position: absolute; top: 6px; right: 16px; z-index: 1; }
	.woocommerce table.cart img { width: 96px; height: 96px; }
	.woocommerce table.cart td.actions .coupon { flex-direction: column; align-items: stretch; }
	.woocommerce table.cart td.actions .coupon .input-text { width: 100%; }
	.woocommerce table.cart td.actions > .button { float: none; width: 100%; margin-top: 8px; }

	/* Quantity and add to cart sit on one row and fill the width. */
	.woocommerce div.product form.cart { gap: 8px; }
	.woocommerce div.product form.cart .button { flex: 1; justify-content: center; }

	.woocommerce div.product .woocommerce-tabs ul.tabs { gap: 2px; overflow-x: auto; flex-wrap: nowrap; }
	.woocommerce div.product .woocommerce-tabs ul.tabs li a { white-space: nowrap; padding: .6rem .8rem; }

	.woocommerce .woocommerce-ordering select { width: 100%; min-width: 0; }
	.woocommerce .woocommerce-result-count { font-size: .88rem; }

	.woocommerce-checkout #payment { padding: 14px; }
	.woocommerce form .form-row-first,
	.woocommerce form .form-row-last { width: 100%; float: none; }
}

@media (max-width: 400px) {
	/* Below this a two column grid crushes the price and button. */
	.woocommerce ul.products { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------ Product gallery
   The plugin styles the gallery too, but its CSS only loads on pages that use
   a Ventureheap widget. The theme's own product page needs the same treatment,
   otherwise the thumbnail strip renders as a numbered list. */

.woocommerce div.product div.images { position: relative; margin: 0; }

.woocommerce-product-gallery__wrapper {
	margin: 0;
	padding: 0;
	list-style: none;
	border-radius: var(--vh-radius);
	overflow: hidden;
}

.woocommerce-product-gallery__image { margin: 0; list-style: none; }
.woocommerce-product-gallery__image img { display: block; width: 100%; height: auto; border-radius: var(--vh-radius); }

.woocommerce-product-gallery__trigger {
	position: absolute;
	top: 12px;
	right: 12px;
	left: auto;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	font-size: 16px;
	line-height: 1;
	text-decoration: none;
	color: var(--vh-color-secondary);
	background: var(--vh-color-bg);
	border-radius: 50%;
	box-shadow: var(--vh-shadow);
}

.woocommerce-product-gallery__trigger:hover { background: var(--vh-color-primary); color: #fff; }

.woocommerce div.product div.images .flex-control-thumbs,
.flex-control-nav.flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.flex-control-thumbs li { margin: 0; padding: 0; list-style: none; width: auto; float: none; }

.flex-control-thumbs img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border: 1px solid var(--vh-color-border);
	border-radius: var(--vh-radius-button);
	opacity: .6;
	cursor: pointer;
	transition: opacity var(--vh-transition), border-color var(--vh-transition);
}

.flex-control-thumbs img:hover { opacity: 1; }
.flex-control-thumbs img.flex-active,
.flex-control-thumbs .flex-active img { opacity: 1; border-color: var(--vh-color-primary); }

.woocommerce-product-gallery .flex-viewport { border-radius: var(--vh-radius); overflow: hidden; }
.woocommerce-product-gallery .flex-direction-nav { display: none; }

/* Buy now, printed by the builder plugin beside Add to cart. */
.woocommerce div.product form.cart .vhb-buy-now {
	background: var(--vh-color-secondary, #0f172a);
	color: #fff;
	border: 0;
}

.woocommerce div.product form.cart .vhb-buy-now:hover { filter: brightness(1.12); }

/* ---------------------------------------------------- Full width shop */
.vh-shop-full .vh-woocommerce.vh-container,
.vh-shop-full .vh-single-product-hero.vh-container {
	max-width: min(1440px, 100%);
	padding-inline: clamp(16px, 3vw, 40px);
}

.vh-shop-full .vh-woocommerce.vh-content-wrap { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 1200px) {
	.vh-shop-full .woocommerce ul.products.columns-4,
	.vh-shop-full.woocommerce ul.products.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.vh-shop-full .woocommerce ul.products.columns-5,
	.vh-shop-full.woocommerce ul.products.columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ------------------------------------------ Shop toolbar and pagination */
.woocommerce .woocommerce-result-count { float: left; margin: 0 0 24px; line-height: 44px; color: var(--vh-color-muted); font-size: .92rem; }
.woocommerce .woocommerce-ordering { float: right; margin: 0 0 24px; }
.woocommerce .woocommerce-ordering + ul.products,
.woocommerce .woocommerce-ordering ~ ul.products { clear: both; }

.woocommerce .woocommerce-ordering select {
	min-height: 44px;
	padding: .55rem 2.4rem .55rem .9rem;
	font: inherit;
	font-size: .92rem;
	color: var(--vh-color-secondary);
	background: var(--vh-color-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2364748b' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right .9rem center;
	border: 1px solid var(--vh-color-border);
	border-radius: var(--vh-radius-button);
	appearance: none;
}

.woocommerce nav.woocommerce-pagination { margin-top: 36px; text-align: center; }
.woocommerce nav.woocommerce-pagination ul { display: inline-flex; flex-wrap: wrap; gap: 8px; border: 0; margin: 0; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; float: none; overflow: visible; }

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	font-weight: 600;
	color: var(--vh-color-secondary);
	background: var(--vh-color-bg);
	border: 1px solid var(--vh-color-border);
	border-radius: var(--vh-radius-button);
}

.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li a:focus { background: var(--vh-color-bg); color: var(--vh-color-primary); border-color: var(--vh-color-primary); }
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--vh-color-primary); color: #fff; border-color: var(--vh-color-primary); }

@media (max-width: 600px) {
	.woocommerce .woocommerce-result-count,
	.woocommerce .woocommerce-ordering { float: none; }
	.woocommerce .woocommerce-result-count { margin-bottom: 8px; line-height: 1.5; }
}