/*
 * 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 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; }

/* -------------------------------------------------------- Cart & checkout */
.woocommerce table.shop_table {
	border-radius: var(--vh-radius);
	border-collapse: collapse;
	border: 1px solid var(--vh-color-border);
}

.woocommerce table.shop_table th { background: var(--vh-color-alt); }
.woocommerce table.cart img { width: 64px; border-radius: 8px; }

.woocommerce .cart-collaterals .cart_totals { width: 100%; float: none; }
.woocommerce-cart .wc-proceed-to-checkout .button { width: 100%; }

.woocommerce form .form-row { padding: 0; margin: 0 0 1rem; }
.woocommerce form .form-row label { display: block; }
.woocommerce-checkout #payment { background: var(--vh-color-alt); border-radius: var(--vh-radius); }
.woocommerce-checkout #payment ul.payment_methods { border-bottom-color: var(--vh-color-border); }
.woocommerce #payment #place_order { width: 100%; }

.woocommerce-error, .woocommerce-info, .woocommerce-message {
	border-top-color: var(--vh-color-primary);
	background: var(--vh-color-alt);
	border-radius: var(--vh-radius-button);
}

.woocommerce-error::before, .woocommerce-info::before, .woocommerce-message::before { color: var(--vh-color-primary); }

/* ------------------------------------------------------------- My account */
.woocommerce-account .woocommerce-MyAccount-navigation { width: 100%; float: none; margin-bottom: 24px; }
.vh-account-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.vh-account-nav a {
	display: block;
	padding: .65rem .9rem;
	border-radius: var(--vh-radius-button);
	color: var(--vh-color-secondary);
	font-weight: 500;
}
.vh-account-nav a:hover { background: var(--vh-color-alt); text-decoration: none; }
.vh-account-nav .is-active a { background: var(--vh-color-primary); color: #fff; }
.woocommerce-account .woocommerce-MyAccount-content { width: 100%; float: none; }

/* ---------------------------------------------------------------- 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; }
	.woocommerce .cart-collaterals .cart_totals { width: 48%; float: right; }
	.woocommerce-cart .wc-proceed-to-checkout .button { width: auto; }
	.woocommerce-account .woocommerce-MyAccount-navigation { width: 24%; float: left; }
	.woocommerce-account .woocommerce-MyAccount-content { width: 72%; float: right; }
}

@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; }

	/* Cart and order tables scroll rather than stretching the page. */
	.woocommerce table.shop_table,
	.woocommerce-cart table.cart,
	.woocommerce table.woocommerce-orders-table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		white-space: nowrap;
	}

	.woocommerce table.cart img { width: 48px; }

	/* 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; }