/*
 * This is needed because WooCommerce still forces two different styles
 * for the on sales badge, one for the archive and one for the single product.
 */
.woocommerce span.onsale,
.wc-block-grid .wc-block-grid__product-onsale,
.wc-block-grid__product-image .wc-block-grid__product-onsale {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--contrast);
	border-radius: 100%;
	border: none;
	height: 3.7rem;
	width: 3.7rem;
	font-size: 1rem;
	text-transform: capitalize;
	text-align: center;
	line-height: 3.236;
}

/**
* This is needed to overrride the color of the WooCommerce "in stock" message
*/
.woocommerce div.product .stock {
	color:var(--wp--preset--color--primary);
}

/**
 * Product thumbnails render as "aspect-ratio-auto", keeping each image's
 * original proportions. Source images have very different ratios (some
 * near-square, some very flat, e.g. 300x54). Tried letting each image size
 * itself naturally (height:auto) so flat photos wouldn't leave a big empty
 * gap before the title — but in this theme's nested flex/grid layout,
 * height:auto on this <img> doesn't resolve from its intrinsic ratio at
 * all; it balloons to fill available space and only max-height reins it
 * back in, which in practice made every image render at exactly max-height
 * anyway. So: use a fixed height with object-fit: contain so nothing gets
 * cropped, tuned to balance "title close to image" against "thumbnail not
 * too short" (280px -> 160px -> 220px based on feedback).
 *
 * The shop archive additionally has a pre-existing rule in style.css,
 * `.main-products .wc-block-components-product-image img`, forcing
 * aspect-ratio:1/1 + a gray background — that selector is more specific
 * than the one below, so it was silently winning and squaring off every
 * thumbnail regardless of this rule. !important here is required to beat
 * that rule (and to beat WooCommerce's own inline
 * style="object-fit:cover" from its "cropped" image sizing setting).
 */
.wc-block-components-product-image img {
	width: 100% !important;
	height: 220px !important;
	aspect-ratio: auto !important;
	object-fit: contain !important;
	object-position: center center !important;
	background-color: transparent !important;
}

.wp-block-post-template.is-layout-grid > li.wp-block-post {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

/**
 * Add breathing room between the "Related products" heading and the
 * product grid below it; they otherwise sit right on top of each other.
 */
.wp-block-woocommerce-related-products .wp-block-heading {
	margin-bottom: 2rem;
}

/**
 * Inside each related-product card, the image/category/title stack picks up
 * the theme's large default block gap (32px) between every child, leaving
 * the title floating far below its image. Tighten that to a small, even gap.
 */
.wp-block-woocommerce-related-products .wp-block-post-template > li.wp-block-post > * {
	margin-top: 0.5rem !important;
	margin-bottom: 0 !important;
}

.wp-block-woocommerce-related-products .wp-block-post-template > li.wp-block-post > *:first-child {
	margin-top: 0 !important;
}

/**
 * The block editor sets the product title to centered text; align it left
 * to match the category label above it.
 */
.wp-block-woocommerce-related-products .wp-block-post-title {
	text-align: left;
}

/**
 * Same gap-tightening as the related-products cards above, applied to the
 * shop/category archive grid (danh-muc-san-pham), which uses its own
 * "products-block-post-template" wrapper instead of wc-related-products.
 */
.products-block-post-template > li.wp-block-post > * {
	margin-top: 0.5rem !important;
	margin-bottom: 0 !important;
}

.products-block-post-template > li.wp-block-post > *:first-child {
	margin-top: 0 !important;
}

/**
 * Give each row of product cards on the shop archive some breathing room
 * from the next row, so separate products read as distinct rows instead of
 * running straight into each other.
 */
.products-block-post-template.wp-block-post-template {
	row-gap: 2.5rem;
}