/*
 * Ventureheap Builder - WooCommerce widgets.
 */

.vhb-products-heading { margin-bottom: 1.4rem; }

/* Product card ------------------------------------------------------------ */
.vhb-product-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--vhb-bg);
	border: 1px solid var(--vhb-border);
	border-radius: var(--vhb-radius);
	overflow: hidden;
	transition: transform var(--vhb-transition), box-shadow var(--vhb-transition);
}

.vhb-product-card:hover { transform: translateY(-3px); box-shadow: var(--vhb-shadow); }

.vhb-product-card__media { position: relative; overflow: hidden; background: var(--vhb-alt); }
.vhb-product-card__media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform .4s ease; }
.vhb-product-card:hover .vhb-product-card__media img { transform: scale(1.05); }

.vhb-product-card__actions {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: 8px;
	opacity: 0;
	transform: translateX(8px);
	transition: opacity var(--vhb-transition), transform var(--vhb-transition);
}

.vhb-product-card:hover .vhb-product-card__actions,
.vhb-product-card:focus-within .vhb-product-card__actions { opacity: 1; transform: none; }

.vhb-product-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	background: var(--vhb-bg);
	color: var(--vhb-secondary);
	border: 1px solid var(--vhb-border);
	border-radius: 50%;
	cursor: pointer;
	transition: background var(--vhb-transition), color var(--vhb-transition);
}

.vhb-product-action:hover { background: var(--vhb-primary); color: #fff; border-color: var(--vhb-primary); }

.vhb-product-card__body { display: flex; flex-direction: column; gap: .35rem; padding: 16px; flex: 1; }
.vhb-product-card__cat { font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; color: var(--vhb-muted); text-decoration: none; }
.vhb-product-card__title { margin: 0; font-size: 1rem; line-height: 1.4; font-weight: 600; }
.vhb-product-card__title a { color: var(--vhb-secondary); text-decoration: none; }
.vhb-product-card__title a:hover { color: var(--vhb-primary); }
.vhb-product-card__price { font-weight: 700; color: var(--vhb-secondary); }
.vhb-product-card__price del { color: var(--vhb-muted); font-weight: 400; margin-right: .4rem; }
.vhb-product-card__price ins { text-decoration: none; }
.vhb-product-card__cart { margin-top: auto; padding-top: .6rem; }

.vhb-product-card__cart .button,
.vhb-product-card__cart .added_to_cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: .6rem 1rem;
	font-size: .9rem;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	background: var(--vhb-primary);
	color: #fff;
	border: 0;
	border-radius: var(--vhb-radius-btn);
	cursor: pointer;
}

.vhb-product-card__cart .button:hover { filter: brightness(.92); color: #fff; }
.vhb-product-card__cart .added_to_cart { margin-top: 6px; background: var(--vhb-secondary); }

/* Category tiles ---------------------------------------------------------- */
.vhb-cat-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	background: var(--vhb-bg);
	border: 1px solid var(--vhb-border);
	border-radius: var(--vhb-radius);
	overflow: hidden;
	transition: transform var(--vhb-transition), box-shadow var(--vhb-transition);
}

.vhb-cat-card:hover { transform: translateY(-3px); box-shadow: var(--vhb-shadow); }
.vhb-cat-card__media { display: block; background: var(--vhb-alt); }
.vhb-cat-card__media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.vhb-cat-card__body { padding: 14px 16px; text-align: center; }
.vhb-cat-card__name { display: block; font-weight: 700; color: var(--vhb-secondary); }
.vhb-cat-card__count { display: block; font-size: .84rem; color: var(--vhb-muted); }

/* Single product parts ---------------------------------------------------- */
.vhb-product-detail__top { display: grid; gap: 32px; grid-template-columns: 1fr; margin-bottom: 40px; }
.vhb-product-detail__top.is-single-column { grid-template-columns: 1fr; }
.vhb-product-detail .summary > *:last-child { margin-bottom: 0; }

.vhb-price .price { font-size: 1.6rem; font-weight: 700; color: var(--vhb-secondary); }
.vhb-price del { font-size: .75em; font-weight: 400; color: var(--vhb-muted); margin-right: .4rem; }
.vhb-price ins { text-decoration: none; }

.vhb-add-to-cart form.cart { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; margin: 0; }
.vhb-add-to-cart--stacked form.cart { flex-direction: column; align-items: stretch; }
.vhb-add-to-cart form.cart.variations_form { display: block; }
.vhb-add-to-cart .quantity input { width: 84px; text-align: center; padding: .7rem .4rem; border: 1px solid var(--vhb-border); border-radius: var(--vhb-radius-btn); }

.vhb-add-to-cart .single_add_to_cart_button {
	padding: .85rem 1.8rem;
	font-weight: 600;
	background: var(--vhb-primary);
	color: #fff;
	border: 0;
	border-radius: var(--vhb-radius-btn);
	cursor: pointer;
}

.vhb-product-rating { display: flex; align-items: center; gap: 10px; }
.vhb-product-rating__count { font-size: .88rem; color: var(--vhb-muted); }

.vhb-product-tabs .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	border-bottom: 1px solid var(--vhb-border);
}

.vhb-product-tabs .woocommerce-tabs ul.tabs::before,
.vhb-product-tabs .woocommerce-tabs ul.tabs li::before,
.vhb-product-tabs .woocommerce-tabs ul.tabs li::after { display: none; }

.vhb-product-tabs .woocommerce-tabs ul.tabs li { margin: 0; padding: 0; background: none; border: 0; border-radius: 0; }
.vhb-product-tabs .woocommerce-tabs ul.tabs li a { display: block; padding: .7rem 1.1rem; font-weight: 600; color: var(--vhb-muted); text-decoration: none; border-bottom: 2px solid transparent; }
.vhb-product-tabs .woocommerce-tabs ul.tabs li.active a { color: var(--vhb-primary); border-bottom-color: var(--vhb-primary); }

/* Mini cart --------------------------------------------------------------- */
.vhb-mini-cart { position: relative; display: inline-block; }

.vhb-mini-cart__button {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: .5rem;
	font-size: 22px;
	line-height: 1;
	background: none;
	border: 0;
	color: var(--vhb-secondary);
	text-decoration: none;
	cursor: pointer;
}

.vhb-mini-cart__button svg { width: 1em; height: 1em; fill: currentColor; }

.vhb-mini-cart__count {
	position: absolute;
	top: 0;
	right: 0;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	font-size: .68rem;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	color: #fff;
	background: var(--vhb-primary);
	border-radius: 9px;
}

.vhb-mini-cart__total { font-size: .9rem; font-weight: 600; }

.vhb-mini-cart__panel {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	z-index: 90;
	width: min(92vw, 340px);
	padding: 18px;
	background: var(--vhb-bg);
	border: 1px solid var(--vhb-border);
	border-radius: var(--vhb-radius);
	box-shadow: var(--vhb-shadow);
	text-align: left;
}

.vhb-mini-cart__panel[hidden] { display: none; }
.vhb-mini-cart__panel ul.cart_list { list-style: none; margin: 0 0 1rem; padding: 0; }
.vhb-mini-cart__panel ul.cart_list li { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--vhb-border); }
.vhb-mini-cart__panel ul.cart_list img { width: 52px; height: auto; border-radius: 6px; order: -1; }
.vhb-mini-cart__panel .buttons { display: flex; gap: 8px; }
.vhb-mini-cart__panel .buttons a {
	flex: 1;
	padding: .55rem .8rem;
	font-size: .88rem;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	border-radius: var(--vhb-radius-btn);
	background: var(--vhb-alt);
	color: var(--vhb-secondary);
}
.vhb-mini-cart__panel .buttons .checkout { background: var(--vhb-primary); color: #fff; }

/* Cart and checkout ------------------------------------------------------- */
.vhb-cart table.shop_table, .vhb-checkout table.shop_table { width: 100%; border-collapse: collapse; }
.vhb-cart .shop_table th, .vhb-cart .shop_table td,
.vhb-checkout .shop_table th, .vhb-checkout .shop_table td { padding: .8rem; border: 1px solid var(--vhb-border); }
.vhb-checkout #payment { background: var(--vhb-alt); border-radius: var(--vhb-radius); padding: 20px; }

@media (min-width: 782px) {
	.vhb-product-detail__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; }
	.vhb-product-detail__top.is-single-column { grid-template-columns: 1fr; }
}

/* Single product parts: title, short description, meta ---------------------- */
.vhb-product-title {
	margin: 0 0 .35rem;
	font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
	line-height: 1.2;
	color: var(--vhb-secondary);
}

.vhb-product-title a { color: inherit; text-decoration: none; }
.vhb-product-title a:hover { color: var(--vhb-primary); }

.vhb-product-excerpt { color: var(--vhb-muted); }
.vhb-product-excerpt p:last-child { margin-bottom: 0; }

.vhb-product-meta {
	font-size: .88rem;
	color: var(--vhb-muted);
}

.vhb-product-meta--inline {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
}

.vhb-product-meta--stacked { display: grid; gap: 5px; }

.vhb-product-meta__item { display: inline-flex; gap: 6px; }
.vhb-product-meta__label { font-weight: 600; color: var(--vhb-secondary); }
.vhb-product-meta__value a { color: inherit; text-decoration: none; }
.vhb-product-meta__value a:hover { color: var(--vhb-primary); text-decoration: underline; }

/* A tidier column split on the product page. The gallery does not need to be
   half the viewport on a wide screen, and the summary reads better narrower. */
@media (min-width: 1200px) {
	.vhb-product-detail__top { gap: 56px; }
}

.vhb-product-detail__gallery img,
.vhb-product-images img { border-radius: var(--vhb-radius); }

/* ==========================================================================
   Product gallery
   WooCommerce ships its own gallery styles, but a theme that replaces the
   product page cannot rely on them being present or winning the cascade. The
   thumbnail strip in particular is a bare <ol>, so without this it renders as
   a numbered list under the main image.
   ========================================================================== */

.woocommerce div.product div.images,
.vhb-product-images .woocommerce-product-gallery,
.vhb-product-detail .woocommerce-product-gallery {
	position: relative;
	margin: 0;
	opacity: 1 !important;
}

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

.woocommerce-product-gallery__image,
.woocommerce-product-gallery__image--placeholder {
	margin: 0;
	list-style: none;
}

.woocommerce-product-gallery__image a,
.woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: auto;
}

.woocommerce-product-gallery__image img {
	border-radius: var(--vhb-radius);
	object-fit: cover;
}

/* Without the slider script every image would stack full height, which is
   what makes the gallery look enormous. Cap it and let the slider take over
   once it initialises. */
.woocommerce-product-gallery:not(.flexslider) .woocommerce-product-gallery__wrapper > *:not(:first-child) {
	display: none;
}

/* Zoom trigger ------------------------------------------------------------- */
.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(--vhb-secondary);
	background: var(--vhb-bg);
	border-radius: 50%;
	box-shadow: var(--vhb-shadow);
	transition: background var(--vhb-transition), color var(--vhb-transition);
}

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

/* Thumbnail strip ---------------------------------------------------------- */
.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(--vhb-border);
	border-radius: var(--vhb-radius-btn);
	opacity: .6;
	cursor: pointer;
	transition: opacity var(--vhb-transition), border-color var(--vhb-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(--vhb-primary);
}

/* Flexslider plumbing the gallery needs when WooCommerce's own layout CSS is
   not in charge of the page. */
.woocommerce-product-gallery .flex-viewport { border-radius: var(--vhb-radius); overflow: hidden; }
.woocommerce-product-gallery .flex-direction-nav { display: none; }

@media (max-width: 600px) {
	.flex-control-nav.flex-control-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
	.woocommerce-product-gallery__trigger { width: 36px; height: 36px; top: 8px; right: 8px; }
}