/**
 * Product cards.
 *
 * Scoped to .e-loop-item.product — the class WooCommerce puts on a product card — so this
 * reaches product cards in any Elementor loop widget (grid or carousel) and never the
 * category tiles, which are loop items too but are not products.
 *
 * The idea is the one every good shop grid uses: the photograph is the product, so it
 * gets the space, and the two things a shopper might do to it — save it, buy it — sit
 * quietly on top of the picture until the pointer arrives. They are never hidden from a
 * touchscreen or a keyboard, which is where most "reveal on hover" designs fail.
 */

/* --------------------------------------------------------------- the card */

.e-loop-item.product {
	--cb-card-ink: #1f2328;
	--cb-card-muted: #6b7280;
	--cb-card-accent: #d63864;
	--cb-card-line: #ececef;

	border: 1px solid var( --cb-card-line );
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
	transition: box-shadow .2s ease, transform .2s ease;
}

.e-loop-item.product:hover {
	box-shadow: 0 8px 26px rgba( 20, 20, 20, .10 );
	transform: translateY( -2px );
}

/* ------------------------------------------------------------- the photo */

/*
 * What the icons are positioned against — and this is the part that is easy to get wrong.
 *
 * Elementor makes every widget `position: relative`, including the shortcode widget the
 * icons live in. That widget sits *after* the image and has no height of its own, so an
 * absolutely positioned child anchors to it and lands below the photograph rather than on
 * it. Making it static hands the job to the container that holds both the image and the
 * icons, which is the box the icons are meant to sit inside.
 */
.e-loop-item.product .e-con-inner > .e-con:first-child {
	position: relative;
}

.e-loop-item.product .elementor-widget-shortcode {
	position: static;
}

.e-loop-item.product .elementor-widget-image img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform .45s ease;
}

/* A slow, small push in. Enough to feel alive, not enough to make the garment move. */
.e-loop-item.product:hover .elementor-widget-image img {
	transform: scale( 1.035 );
}

/* ------------------------------------------------------------ the actions */

.cb-card-actions {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 8px;

	/* Hidden by moving and fading rather than by display:none, so the buttons keep their
	   place in the tab order and a screen reader still finds them. */
	opacity: 0;
	transform: translateX( 8px );
	transition: opacity .2s ease, transform .2s ease;
}

.e-loop-item.product:hover .cb-card-actions,
.cb-card-actions:focus-within {
	opacity: 1;
	transform: none;
}

/*
 * Touchscreens have no hover, so on anything without a fine pointer the icons are simply
 * always visible. A card whose only buy button appears on hover is a card that cannot be
 * used on a phone — which is most of a clothes shop's traffic.
 */
@media ( hover: none ), ( pointer: coarse ) {
	.cb-card-actions {
		opacity: 1;
		transform: none;
	}
}

/* Both buttons, one shape. */
.cb-card-actions .codebold-wishlist-btn,
.cb-card-actions .cb-card-cart {
	width: 38px;
	height: 38px;
	min-width: 0;
	min-height: 0;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: rgba( 255, 255, 255, .94 );
	color: var( --cb-card-ink );
	box-shadow: 0 2px 8px rgba( 20, 20, 20, .14 );
	cursor: pointer;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease, transform .15s ease;
}

.cb-card-actions .codebold-wishlist-btn:hover,
.cb-card-actions .cb-card-cart:hover,
.cb-card-actions .codebold-wishlist-btn:focus-visible,
.cb-card-actions .cb-card-cart:focus-visible {
	background: var( --cb-card-accent );
	color: #fff;
	transform: scale( 1.06 );
}

/* Saved: filled and coloured, and it stays visible when the pointer leaves — otherwise a
   shopper cannot tell what they have already saved without hovering every card. */
.cb-card-actions .codebold-wishlist-btn.is-saved {
	background: var( --cb-card-accent );
	color: #fff;
}

.e-loop-item.product .cb-card-actions .codebold-wishlist-btn.is-saved {
	opacity: 1;
}

.cb-card-actions .codebold-wishlist-btn svg,
.cb-card-actions .cb-card-cart svg {
	width: 19px;
	height: 19px;
	display: block;
}

/* The card version carries no wording — the tooltip and the label for assistive
   technology do that, and a word here would crowd the photograph. */
.cb-card-actions .codebold-wishlist-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
}

.cb-card-actions .codebold-wishlist-form {
	margin: 0;
	line-height: 0;
}

/* WooCommerce's "View cart" link, which it injects after an AJAX add. On a 38px circle it
   has nowhere to go, and the mini-cart in the header already reports the result. */
.cb-card-actions .added_to_cart {
	display: none;
}

/* ------------------------------------------------------------- the words */

.e-loop-item.product .elementor-widget-woocommerce-product-title a,
.e-loop-item.product .elementor-widget-woocommerce-product-title {
	color: var( --cb-card-ink );
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: .01em;
	text-decoration: none;
}

.e-loop-item.product .elementor-widget-woocommerce-product-short-description {
	color: var( --cb-card-muted );
	font-size: 13.5px;
	line-height: 1.45;
}

.e-loop-item.product .elementor-widget-woocommerce-product-price .price {
	color: var( --cb-card-ink );
	font-size: 16px;
	font-weight: 700;
}

/* A price that has been reduced: the old one steps back rather than shouting. */
.e-loop-item.product .price del {
	color: var( --cb-card-muted );
	font-weight: 500;
	opacity: .75;
	margin-right: 6px;
}

.e-loop-item.product .price ins {
	text-decoration: none;
	color: var( --cb-card-accent );
}