/*
 * AverionHair Product Card - block and widget surfaces.
 *
 * The Product Collection and Products blocks build each item out of inner blocks (image, title,
 * price, button). There is no template to override and no element of ours to add, so these grids
 * can only be restyled into the card rather than replaced by it. Everything here reuses the same
 * --avh-pc-* properties as the real card, so the two stay in step.
 *
 * The one thing CSS cannot add is the wishlist heart: it needs a button and a product ID. Block
 * grids therefore get the look, and the shop loop gets the whole card.
 */

/* --- Product Collection / Products block ---------------------------------------------------- */

.wc-block-product-template .wc-block-product,
.wp-block-woocommerce-product-collection .wc-block-product {
	position: relative;
	border: 0;
	background: none;
	font-family: var(--avh-pc-font-body);
	text-align: left;
}

/* The image, as the card's well. */
.wc-block-product-template .wc-block-product .wc-block-components-product-image,
.wc-block-product-template .wc-block-product .wp-block-woocommerce-product-image {
	position: relative;
	overflow: hidden;
	margin: 0 0 1rem;
	aspect-ratio: var(--avh-pc-ratio);
	border-radius: var(--avh-pc-radius);
	background: var(--avh-pc-surface);
	box-shadow: var(--avh-pc-shadow-soft);
	transition: box-shadow 300ms var(--avh-pc-ease);
}

.wc-block-product-template .wc-block-product:hover .wc-block-components-product-image,
.wc-block-product-template .wc-block-product:hover .wp-block-woocommerce-product-image {
	box-shadow: var(--avh-pc-shadow-lifted);
}

.wc-block-product-template .wc-block-product .wc-block-components-product-image a,
.wc-block-product-template .wc-block-product .wp-block-woocommerce-product-image a {
	display: block;
	width: 100%;
	height: 100%;
}

.wc-block-product-template .wc-block-product .wc-block-components-product-image img,
.wc-block-product-template .wc-block-product .wp-block-woocommerce-product-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 700ms var(--avh-pc-ease);
}

.wc-block-product-template .wc-block-product:hover .wc-block-components-product-image img,
.wc-block-product-template .wc-block-product:hover .wp-block-woocommerce-product-image img {
	transform: scale(var(--avh-pc-zoom));
}

/* The hover pill, drawn rather than inserted - there is no element of ours to use here. */
.wc-block-product-template .wc-block-product .wc-block-components-product-image::after,
.wc-block-product-template .wc-block-product .wp-block-woocommerce-product-image::after {
	content: var(--avh-pc-cta, "View product");
	position: absolute;
	right: 0.75rem;
	bottom: 0.75rem;
	left: 0.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-block: 0.7rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--avh-pc-ink) 85%, transparent);
	color: #fff;
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	line-height: 1;
	text-transform: uppercase;
	opacity: 0;
	transform: translateY(0.5rem);
	pointer-events: none;
	backdrop-filter: blur(4px);
	transition: opacity 300ms var(--avh-pc-ease), transform 300ms var(--avh-pc-ease);
}

.wc-block-product-template .wc-block-product:hover .wc-block-components-product-image::after,
.wc-block-product-template .wc-block-product:hover .wp-block-woocommerce-product-image::after {
	opacity: 1;
	transform: translateY(0);
}

/* Title. */
.wc-block-product-template .wc-block-product .wp-block-post-title,
.wc-block-product-template .wc-block-product .wc-block-components-product-title {
	margin: 0 0 0.25rem;
	font-family: var(--avh-pc-font-heading);
	font-size: 1.25rem;
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.3;
}

.wc-block-product-template .wc-block-product .wp-block-post-title a,
.wc-block-product-template .wc-block-product .wc-block-components-product-title a {
	color: var(--avh-pc-ink);
	text-decoration: none;
	transition: color 200ms var(--avh-pc-ease);
}

.wc-block-product-template .wc-block-product:hover .wp-block-post-title a,
.wc-block-product-template .wc-block-product:hover .wc-block-components-product-title a {
	color: var(--avh-pc-accent);
}

/* Price. */
.wc-block-product-template .wc-block-product .wc-block-components-product-price {
	color: color-mix(in srgb, var(--avh-pc-ink) 80%, transparent);
	font-size: 0.875rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

.wc-block-product-template .wc-block-product .wc-block-components-product-price del {
	margin-right: 0.4em;
	opacity: 0.45;
}

.wc-block-product-template .wc-block-product .wc-block-components-product-price ins {
	background: none;
	font-weight: 600;
	text-decoration: none;
}

/* Button. */
.wc-block-product-template .wc-block-product .wc-block-components-product-button .wp-block-button__link {
	width: 100%;
	padding: 0.7rem 1rem;
	border: 1px solid var(--avh-pc-ink);
	border-radius: 999px;
	background: transparent;
	color: var(--avh-pc-ink);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	transition: background-color 200ms var(--avh-pc-ease), color 200ms var(--avh-pc-ease);
}

.wc-block-product-template .wc-block-product .wc-block-components-product-button .wp-block-button__link:hover {
	background: var(--avh-pc-ink);
	color: var(--avh-pc-chip);
}

/* --- Widgets and product lists -------------------------------------------------------------- */

/*
 * The compact card has to survive a theme's own widget layout, which it cannot see and did not
 * agree to. WooCommerce's stock widget markup puts TWO children in the <li> - a thumbnail and
 * then the text - and themes style around that shape: Blocksy makes the <li> a grid with a
 * thumbnail-sized first column and a 1fr second one. Our card is a single <a>, so it landed
 * wholly inside that first column, the text had roughly one character of width, and the theme's
 * own word-break then set every title one letter per line.
 *
 * So the card claims its width explicitly rather than inheriting whatever is left: it spans every
 * column of a grid parent, refuses to shrink in a flex one, and turns character-level breaking
 * back off. Each of these is inert when the parent is an ordinary block.
 */
.avh-pc-mini-item {
	display: block;
	width: 100%;
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
	/* Harmless outside a grid; the whole fix inside one. */
	grid-column: 1 / -1;
}

ul.product_list_widget li.avh-pc-mini-item,
.avh-pc-mini-item {
	box-sizing: border-box;
}

.avh-pc-mini-item .avh-pc-mini,
.avh-pc-mini {
	display: flex;
	gap: 0.85rem;
	align-items: center;
	box-sizing: border-box;
	width: 100%;
	/* A flex or grid parent must not be allowed to shrink this to its minimum content width. */
	flex: 1 1 100%;
	grid-column: 1 / -1;
	color: inherit;
	text-decoration: none;
	font-family: var(--avh-pc-font-body);
	/*
	 * Themes set word-break: break-all on widget columns to stop long product names overflowing a
	 * narrow sidebar. Inherited into a column that has collapsed, it is what turns "Raw Hair
	 * Bundle" into a vertical stack of letters. Break at words, and only when a word is genuinely
	 * too long for the column.
	 */
	word-break: normal;
	overflow-wrap: break-word;
}

.avh-pc-mini__media {
	position: relative;
	display: block;
	overflow: hidden;
	flex: 0 0 4rem;
	width: 4rem;
	aspect-ratio: 1 / 1;
	/* Two thirds of the card's radius: the same shape language at a quarter of the size. */
	border-radius: calc(var(--avh-pc-radius) * 0.5);
	background: var(--avh-pc-surface);
}

.avh-pc-mini__media img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	transition: transform 500ms var(--avh-pc-ease);
}

.avh-pc-mini:hover .avh-pc-mini__media img {
	transform: scale(var(--avh-pc-zoom));
}

.avh-pc-mini__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0.15rem;
	/* min-width: 0 lets it shrink below its content; flex: 1 1 auto makes it take the rest. Both
	   are needed - the first alone is what let it collapse to nothing. */
	min-width: 0;
	word-break: normal;
	overflow-wrap: break-word;
}

.avh-pc-mini__title {
	font-family: var(--avh-pc-font-heading);
	font-size: 0.95rem;
	line-height: 1.3;
	color: var(--avh-pc-ink);
	transition: color 200ms var(--avh-pc-ease);
}

.avh-pc-mini:hover .avh-pc-mini__title {
	color: var(--avh-pc-accent);
}

.avh-pc-mini__price {
	color: color-mix(in srgb, var(--avh-pc-ink) 75%, transparent);
	font-size: 0.8rem;
	font-variant-numeric: tabular-nums;
}

.avh-pc-mini__price del {
	margin-right: 0.35em;
	opacity: 0.45;
}

.avh-pc-mini__price ins {
	background: none;
	font-weight: 600;
	text-decoration: none;
}

/* WooCommerce's widget list wrapper adds its own bullets and spacing. */
ul.product_list_widget li {
	padding: 0;
}

ul.product_list_widget li::before {
	content: none;
}

/*
 * And the wrapper itself: a theme that laid the list out as a grid or a flex row was doing so for
 * WooCommerce's two-child markup. Ours is one element per row, stacked.
 */
ul.product_list_widget:has(> .avh-pc-mini-item) {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * The same declarations again at a specificity the theme is unlikely to reach. Repeating a class
 * is a blunt trick, but it is an honest one: it raises specificity without !important, so a site
 * that genuinely wants a different widget layout can still override it with one more class of its
 * own. Only the properties that decide whether the card is legible at all are escalated - colour,
 * spacing and type are all still the theme's to lose.
 */
ul.product_list_widget li.avh-pc-mini-item.avh-pc-mini-item {
	display: block;
	width: 100%;
	float: none;
	grid-column: 1 / -1;
}

.avh-pc-mini-item .avh-pc-mini.avh-pc-mini {
	display: flex;
	width: 100%;
	flex: 1 1 100%;
	grid-column: 1 / -1;
	word-break: normal;
	overflow-wrap: break-word;
}

.avh-pc-mini .avh-pc-mini__body.avh-pc-mini__body {
	flex: 1 1 auto;
	min-width: 0;
	word-break: normal;
	overflow-wrap: break-word;
}

/* The thumbnail must not be stretched by a theme that sizes widget images itself. */
.avh-pc-mini .avh-pc-mini__media.avh-pc-mini__media {
	flex: 0 0 4rem;
	width: 4rem;
	float: none;
}

.avh-pc-mini .avh-pc-mini__media img {
	width: 100%;
	height: 100%;
	max-width: none;
	float: none;
}

@media (prefers-reduced-motion: reduce) {
	.wc-block-product-template .wc-block-product .wc-block-components-product-image img,
	.wc-block-product-template .wc-block-product .wp-block-woocommerce-product-image img,
	.avh-pc-mini__media img {
		transition: none;
		transform: none;
	}
	.wc-block-product-template .wc-block-product .wc-block-components-product-image::after,
	.wc-block-product-template .wc-block-product .wp-block-woocommerce-product-image::after {
		transition: none;
		transform: none;
	}
}

@media (hover: none) {
	.wc-block-product-template .wc-block-product .wc-block-components-product-image::after,
	.wc-block-product-template .wc-block-product .wp-block-woocommerce-product-image::after {
		opacity: 1;
		transform: none;
	}
}