/* CHXN component: product card — badge, price, pill add-to-cart, 1:1 image.
   Targets this theme's own woocommerce/content-product.php markup PLUS
   WooCommerce core's own default class names for hooked content
   (".woocommerce-loop-product__title", ".price", ".star-rating",
   ".onsale") — not Flatsome's equivalents (".product-small",
   ".title-wrapper", ".price-wrapper"), since those no longer exist. */

.chxn-product-card {
	/* WooCommerce core's own default frontend stylesheet sets an explicit
	   width/float on "li.product" (meant for its own non-grid, float-based
	   layout) — grid items stretch to fill their cell by default, but only
	   when nothing else constrains their width first. */
	width: 100% !important;
	float: none !important;
	list-style: none;
	border: 1px solid var(--chxn-line);
	border-radius: var(--chxn-radius-card);
	overflow: hidden;
	background: var(--chxn-card);
	box-sizing: border-box;
	transition: transform .16s, box-shadow .16s;
	/* a grid/flex row's default "align-items:stretch" makes every card in
	   the same row match the TALLEST sibling's height (a longer title, a
	   price range instead of a single price, a region badge some products
	   don't have, ...) — without this flex column + the ".chxn-product-
	   card-extra{margin-top:auto}" below, that leftover height just sat as
	   dead space under the "Thêm vào giỏ" button instead of being
	   absorbed higher up, where it reads as normal breathing room. */
	display: flex;
	flex-direction: column;
}
.chxn-product-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--chxn-shadow-card-hover);
}
.chxn-product-card-link {
	display: block;
	color: inherit;
}

.chxn-product-card-media {
	position: relative;
}
.chxn-product-card-media img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
}
/* related products ("Sản phẩm tương tự") and recently-viewed ("Sản phẩm
   đã xem") — these photos are mostly branded marketing shots (logo
   badge, product name banner, info icons near the edges), so cropping to
   fill a square like the rest of the site's cards cut into that.
   "contain" keeps the same square box (card heights in the row still
   line up) but scales the whole photo down to fit inside it instead of
   cropping any of it away. */
.related.products .chxn-product-card-media img,
.chxn-seen-grid .chxn-product-card-media img {
	object-fit: contain;
	background: var(--chxn-bg);
}
.chxn-badge-sale,
.onsale {
	position: absolute;
	top: 10px;
	left: 10px;
	background: var(--chxn-red);
	color: #fff;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 700;
	padding: 3px 8px;
}

.chxn-product-card-body {
	padding: 0 13px;
}
@media (max-width: 850px) {
	.chxn-product-card-body {
		padding: 0 9px;
	}
}
/* clamps every title to exactly 2 lines (instead of the old "min-height:
   38px", which only set a FLOOR — a long product name could still grow
   past it, e.g. one title measured 124px tall vs. 59px for a normal one)
   so every card in a row is the same height regardless of title length;
   without this, flex/grid's default row-stretch made the shorter cards'
   whole "chxn-product-card-extra" block get pushed down by that one
   long-titled sibling, reading as a big dead gap above the badge/button. */
.chxn-product-card-body .woocommerce-loop-product__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	/* a hard "height:38px" clipped the bottom of Vietnamese diacritics
	   (the dot under "ệ", "ộ"...) on real 2-line titles, since line-clamp
	   already does its own truncation — "min-height" only sets the floor
	   for shorter titles and lets 2-line titles render at their natural,
	   uncut height. */
	min-height: 38px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--chxn-ink);
	line-height: 1.35;
	margin: 0;
}
/* WooCommerce core's own default ("padding:.5em 0;margin:0") on this exact
   selector stacks on top of the body's own padding above, adding an extra,
   redundant gap between the image and the title text. */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	padding: 0;
}
/* WooCommerce core's own default ("margin-top:1em") on the add-to-cart
   button stacks on top of ".chxn-product-card-cta{margin-top:7px}" below,
   doubling the gap above the button. */
.woocommerce ul.products li.product .button {
	margin-top: 0.5em;
}

/* rating + sold-count row (real WooCommerce rating, curated sold count) —
   printed by business-logic.php's own "woocommerce_after_shop_loop_item_
   title" hook, priority 5, ahead of the native price. */
.chxn-card-meta {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 7px 0 0;
	font-size: 11.5px;
	color: var(--chxn-ink-2);
}
.chxn-card-rating {
	color: var(--chxn-amber);
	font-weight: 700;
}
.chxn-card-sold::before {
	content: "·";
	margin-right: 7px;
	color: var(--chxn-ink-2);
}
.chxn-card-rating:only-child ~ .chxn-card-sold::before,
.chxn-card-meta > .chxn-card-sold:first-child::before {
	content: none;
	margin-right: 0;
}

/* price: [new, bold red] [old, small gray strikethrough] — no "Giá:"
   prefix, no unit suffix (devvn's prefix/suffix spans hidden here; they're
   still shown on the single product page, where the unit matters more). */
.chxn-product-card-body .price {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	margin: 8px 0 0;
	font-weight: 800;
	font-size: 17px;
	color: var(--chxn-red);
}
.chxn-product-card-body .price ins,
.chxn-product-card-body .price ins .amount {
	order: 1;
	color: var(--chxn-red);
	text-decoration: none;
	font-weight: 800;
}
.chxn-product-card-body .price del {
	order: 2;
	color: var(--chxn-ink-2);
	font-weight: 400;
	font-size: 12px;
}
.chxn-product-card-body .price del .amount {
	color: var(--chxn-ink-2);
	font-weight: 400;
	font-size: 12px;
}
/* variable products with no active sale render a plain price RANGE with
   no <ins>/<del> — just two amount spans as direct children of ".price". */
.chxn-product-card-body .price > .amount {
	color: var(--chxn-red);
	font-weight: 800;
}
.chxn-product-card-body .devvn_woocommerce_price_prefix,
.chxn-product-card-body .devvn_woocommerce_price_suffix {
	display: none;
}

.chxn-card-region span {
	font-size: 11px;
	background: var(--chxn-green-l);
	color: var(--chxn-green-d);
	font-weight: 600;
	padding: 2px 8px;
	border-radius: var(--chxn-radius-pill);
}

.chxn-product-card-extra {
	padding: 0 13px 13px;
	/* pushes this block (region badge + CTA button) to the bottom of the
	   card — any extra height from row-stretch lands as a gap ABOVE this
	   block (between the price and the button) instead of dead space
	   below the button. */
	margin-top: auto;
}
@media (max-width: 850px) {
	.chxn-product-card-extra {
		padding: 0 9px 9px;
	}
}
.chxn-product-card-cta {
	margin-top: 7px;
}
.chxn-product-card-cta .button {
	display: block;
	width: 100%;
	box-sizing: border-box;
	background: var(--chxn-green-l) !important;
	color: var(--chxn-green-d) !important;
	border: 0 !important;
	border-radius: var(--chxn-radius-input) !important;
	padding: 9px !important;
	font-weight: 700;
	font-size: 12.5px;
	text-align: center;
}
.chxn-product-card-cta .button:hover {
	background: var(--chxn-green) !important;
	color: #ffffff !important;
}

/* the shop/archive/related-products grid itself (row of cards).
   ".chxn-product-grid" is this theme's own wrapper class (used once
   archive-product.php exists); "ul.products" is WooCommerce core's own
   default wrapper (from loop/loop-start.php) — styled the same way so
   the grid isn't broken/default-browser-styled in the meantime. */
.chxn-product-grid,
ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}
/* WooCommerce core's own float-era clearfix — ".woocommerce ul.products::
   before,::after{content:\" \";display:table}" — wraps every shortcode-
   rendered grid ([products]/[sale_products]/[best_selling_products], used
   on the homepage's Flash Sale/Bestsellers sections and recently-viewed)
   in a ".woocommerce" div, and that generated "::before" becomes an actual
   grid item (an in-flow child with a non-"none" display value) sitting in
   column 1 of row 1 — every real product then auto-places one slot later
   than it should, visibly shifting the whole first row rightward. Grid
   layouts don't need a float clearfix at all, so this is just switched
   off rather than worked around. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none;
	display: none;
}
@media (max-width: 1100px) {
	.chxn-product-grid,
	ul.products {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (max-width: 850px) {
	.chxn-product-grid,
	ul.products {
		grid-template-columns: repeat(2, 1fr);
		/* narrower gap frees up real width for each of the 2 cards — the
		   20px desktop gap plus each card's own side padding plus the
		   page container's own side padding were stacking into a big
		   enough chunk of a ~370-400px phone screen to force titles and
		   the "Thêm vào giỏ" button into extra wrapped lines. */
		gap: 10px;
	}
}