/*
 * 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 photos are now all actual 1:1 square crops (replaced 2026-07-24),
 * so the box itself should be a square that scales with the column width —
 * not a fixed height shorter than the column, which was shrinking the
 * (square) image down to fit that height and leaving empty space on both
 * sides. aspect-ratio:1/1 + width:100% makes the box exactly as tall as the
 * column is wide, so the square photo fills it edge-to-edge with no
 * cropping and no wasted space. object-fit:contain stays on as a safety net
 * for any product whose photo isn't perfectly square.
 *
 * 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 regardless of what this
 * rule set aspect-ratio to. Harmless now since we want 1:1 anyway, but
 * !important is still required for object-fit/object-position to win over
 * that rule and over WooCommerce's inline style="object-fit:cover" from its
 * "cropped" image sizing setting.
 */
.wc-block-components-product-image img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1 / 1 !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: 0.75rem;
}

/**
 * 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 treatment as the shop archive grid: the square product photos are
 * flat shots padded with blank white top/bottom to hit 1:1 without
 * cropping, so pull the category label up into that bottom white band
 * (z-index keeps the text readable above the image) and keep the title
 * close under it.
 */
.wp-block-woocommerce-related-products .wp-block-post-template > li.wp-block-post > .wp-block-post-terms {
	margin-top: -25% !important;
	z-index: 9;
}

.wp-block-woocommerce-related-products .wp-block-post-template > li.wp-block-post > .wp-block-post-title {
	margin-top: 24px !important;
	z-index: 9;
}

/**
 * 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.125rem !important;
	margin-bottom: 0 !important;
}

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

/**
 * The new square product photos are flat product shots padded with white
 * top/bottom to force a 1:1 square (needed to show the full, uncropped
 * product while still being square) — so every square box has a band of
 * blank white space above and below the actual photo. Rather than crop the
 * photos (which would cut off part of the product), pull the category
 * label up with a negative margin so it sits inside that bottom white
 * band instead of below it — it's blank space either way, so overlapping
 * text onto it costs nothing visually and closes the gap. Percentage
 * margin is relative to the column width, which equals the square box's
 * height, so this scales correctly at any column width.
 */
.products-block-post-template > li.wp-block-post > .wp-block-post-terms {
	margin-top: -25% !important;
	z-index: 9;
}

/**
 * Title sits below the category label, kept close to it.
 */
.products-block-post-template > li.wp-block-post > .wp-block-post-title {
	margin-top: 24px !important;
	z-index: 9;
}

/**
 * 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;
}

.main-products {
	padding-top: 0px !important;
}