/*
 * Blocksy Product Hover Cards
 * The hover card is added only to WooCommerce product-loop items.
 */

body.bchc-expanded-product-cards {
	--bchc-card-extra-width: 38px;
	--bchc-image-fit: contain;
	--bchc-card-radius: 2px;
	--bchc-card-shadow: 0 12px 34px rgba(20, 24, 32, 0.16);
	--bchc-card-border: rgba(20, 24, 32, 0.07);
	--bchc-card-bg: #fff;
	--bchc-card-text: #2a2a2a;
	--bchc-card-muted: #929292;
	--bchc-card-line: #e8e8e8;
	--bchc-card-button-bg: #050505;
	--bchc-card-button-text: #fff;
}

/* Hide only the requested elements inside product items handled by this plugin. */
body.bchc-expanded-product-cards .bchc-product-item .price,
body.bchc-expanded-product-cards .bchc-product-item .star-rating,
body.bchc-expanded-product-cards .bchc-product-item .woocommerce-product-rating,
body.bchc-expanded-product-cards .bchc-product-item .wc-block-grid__product-price,
body.bchc-expanded-product-cards .bchc-product-item .wc-block-grid__product-rating,
body.bchc-expanded-product-cards .bchc-product-item .wc-block-grid__product-add-to-cart,
body.bchc-expanded-product-cards .bchc-product-item .wp-block-woocommerce-product-price,
body.bchc-expanded-product-cards .bchc-product-item .wp-block-woocommerce-product-rating,
body.bchc-expanded-product-cards .bchc-product-item .wc-block-components-product-button,
body.bchc-expanded-product-cards .bchc-product-item a.add_to_cart_button,
body.bchc-expanded-product-cards .bchc-product-item a.ajax_add_to_cart,
body.bchc-expanded-product-cards .bchc-product-item a.product_type_simple:not(.bchc-read-more),
body.bchc-expanded-product-cards .bchc-product-item a.product_type_variable:not(.bchc-read-more),
body.bchc-expanded-product-cards .bchc-product-item a.product_type_grouped:not(.bchc-read-more),
body.bchc-expanded-product-cards .bchc-product-item a.product_type_external:not(.bchc-read-more),
body.bchc-expanded-product-cards .bchc-product-item button.add_to_cart_button {
	display: none !important;
}

/* Product grids must allow the floating card to extend outside each normal item. */
body.bchc-expanded-product-cards ul.products,
body.bchc-expanded-product-cards .wc-block-grid__products,
body.bchc-expanded-product-cards .wp-block-woocommerce-product-template,
body.bchc-expanded-product-cards [data-products],
body.bchc-expanded-product-cards .ct-products-container,
body.bchc-expanded-product-cards .related,
body.bchc-expanded-product-cards .upsells,
body.bchc-expanded-product-cards .cross-sells {
	overflow: visible !important;
}

body.bchc-expanded-product-cards .bchc-product-item {
	position: relative !important;
	overflow: visible !important;
	isolation: isolate;
}

body.bchc-expanded-product-cards .bchc-product-item:hover,
body.bchc-expanded-product-cards .bchc-product-item:focus-within,
body.bchc-expanded-product-cards .bchc-product-item.bchc-card-active {
	z-index: 80 !important;
}

.bchc-hover-card {
	display: none;
}

@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
	body.bchc-expanded-product-cards .bchc-hover-card {
		position: absolute;
		display: block;
		top: 0;
		left: 50%;
		z-index: 100;
		width: calc(100% + var(--bchc-card-extra-width));
		min-width: 100%;
		margin: 0;
		color: var(--bchc-card-text);
		background: var(--bchc-card-bg);
		border: 1px solid var(--bchc-card-border);
		border-radius: var(--bchc-card-radius);
		box-shadow: var(--bchc-card-shadow);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translate3d(calc(-50% + var(--bchc-edge-shift, 0px)), 10px, 0) scale(0.985);
		transform-origin: center top;
		transition:
			opacity 180ms ease,
			transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
			visibility 180ms ease;
		box-sizing: border-box;
	}

	body.bchc-expanded-product-cards .bchc-product-item:hover > .bchc-hover-card,
	body.bchc-expanded-product-cards .bchc-product-item:focus-within > .bchc-hover-card,
	body.bchc-expanded-product-cards .bchc-product-item.bchc-card-active > .bchc-hover-card {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translate3d(calc(-50% + var(--bchc-edge-shift, 0px)), -10px, 0) scale(1);
	}

	.bchc-hover-card,
	.bchc-hover-card * {
		box-sizing: border-box;
	}

	.bchc-hover-media {
		display: block;
		width: 100%;
		aspect-ratio: 1 / 1;
		background: #fff;
		overflow: hidden;
		text-decoration: none;
	}

	.bchc-hover-image {
		display: block;
		width: 100% !important;
		height: 100% !important;
		margin: 0 !important;
		object-fit: var(--bchc-image-fit);
		object-position: center;
		transition: transform 420ms ease;
	}

	.bchc-hover-card:hover .bchc-hover-image {
		transform: scale(1.025);
	}

	.bchc-hover-content {
		position: relative;
		padding: 0 18px 15px;
		text-align: center;
	}

	.bchc-heading-row {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 14px;
		padding: 15px 0 12px;
		text-align: left;
	}

	.bchc-separator {
		height: 1px;
		margin: 0 0 13px;
		background: var(--bchc-card-line);
	}

	.bchc-title {
		flex: 1 1 auto;
		min-width: 0;
		margin: 0 !important;
		font: inherit;
		font-size: clamp(16px, 1.1vw, 19px);
		font-weight: 700;
		line-height: 1.35;
		letter-spacing: 0;
		text-align: left;
		overflow-wrap: anywhere;
	}

	.bchc-title a {
		color: var(--bchc-card-text) !important;
		text-decoration: none !important;
	}

	.bchc-category {
		flex: 0 1 44%;
		max-width: 44%;
		margin: 2px 0 0;
		color: var(--bchc-card-muted);
		font-size: 14px;
		line-height: 1.4;
		text-align: right;
		overflow-wrap: anywhere;
	}

	.bchc-sku {
		margin: 0 0 13px;
		color: var(--bchc-card-muted);
		font-size: 14px;
		line-height: 1.45;
	}

	.bchc-sku strong {
		color: var(--bchc-card-text);
		font-weight: 700;
	}

	.bchc-description {
		margin: 0 auto 15px;
		color: #797979;
		font-size: 14px;
		line-height: 1.55;
		text-align: left;
	}

	.bchc-description p {
		margin: 0;
		text-align: center;
	}

	.bchc-description ul {
		margin: 0;
		padding: 0 0 0 20px;
	}

	.bchc-description li {
		margin: 0 0 8px;
		padding-left: 4px;
	}

	.bchc-description li:last-child {
		margin-bottom: 0;
	}

	.bchc-actions {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 12px;
	}

	.bchc-read-more {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 100%;
		min-height: 46px;
		padding: 11px 18px;
		color: var(--bchc-card-button-text) !important;
		background: var(--bchc-card-button-bg) !important;
		border: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		font-size: 14px;
		font-weight: 700;
		line-height: 1.15;
		text-align: center;
		text-decoration: none !important;
		white-space: nowrap;
		transition: opacity 160ms ease, transform 160ms ease;
	}

	.bchc-read-more:hover,
	.bchc-read-more:focus-visible {
		opacity: 0.82;
		transform: translateY(-1px);
	}

	body.bchc-expanded-product-cards .bchc-product-item:hover > .bchc-hover-card a,
	body.bchc-expanded-product-cards .bchc-product-item:focus-within > .bchc-hover-card a,
	body.bchc-expanded-product-cards .bchc-product-item.bchc-card-active > .bchc-hover-card a {
		pointer-events: auto;
	}
}

/* On touch devices the original product card stays simple: image and title only. */
@media (hover: none), (pointer: coarse), (max-width: 767px) {
	body.bchc-expanded-product-cards .bchc-hover-card {
		display: none !important;
	}
}
