/* =====================================================================
   COMPONENT: PRODUCT CARD — dùng chung, tải CÓ ĐIỀU KIỆN
   Tải ở: trang chủ, trang WooCommerce (shop/danh mục/sản phẩm), tìm kiếm,
   và bất kỳ trang nào có shortcode [ux_products] (xem functions.php)
   Markup: woocommerce/content-product.php (override trong child theme)
   ===================================================================== */
.product-small.col > .col-inner { height: 100%; }
.product-small.box { display: flex; flex-direction: column; height: 100%; background: var(--gv-white); border: 1px solid var(--gv-border); border-radius: 12px; overflow: hidden; }
.product-small .box-image { padding: 10px 10px 0; border-radius: 8px; }
.product-small .box-image img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: var(--gv-white); }
.product-small .box-text { flex: 1; display: flex; flex-direction: column; text-align: left; padding: 8px 12px 14px; }
.product-small .title-wrapper .name a, .product-small .title-wrapper .product-title a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 38px; color: var(--gv-text); font-size: 14px; font-weight: 500; line-height: 1.35; }
.product-small .category, .product-small .product-cat { display: none; }
.badge-container .on-sale, .badge-container .badge { display: none; }
.product-small.box:hover { border-color: var(--gv-accent); box-shadow: 0 2px 6px rgb(0 0 0 / 8%); }
/* Khối thông số có icon */
.gv-specs { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 8px 0; padding: 8px 10px; background: var(--gv-bg); border-radius: 8px; font-size: 12px; line-height: 1.4; color: var(--gv-text-2); list-style: none; }
.gv-specs li { display: inline-flex; align-items: center; gap: 4px; margin: 0; padding: 0; }
.gv-spec-val { font-weight: 500; color: var(--gv-text-2); }

/* Giá: giá gốc gạch + nhãn %, giá bán đỏ đậm */
.product-small .price-wrapper { margin-top: auto; }
.product-small .price-wrapper .price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; }
.product-small .price del { order: 1; opacity: 1; color: var(--gv-muted); font-size: 13px; }
.product-small .price del .amount { color: var(--gv-muted); font-weight: 400; }
.gv-pct { order: 2; background: var(--gv-price-soft); color: var(--gv-price); border-radius: 4px; padding: 0 6px; font-size: 12px; font-weight: 600; }
.product-small .price ins { order: 3; flex-basis: 100%; text-decoration: none; }
.product-small .price ins, .product-small .price ins * { text-decoration: none; }
.product-small .price ins .amount, .product-small .price > .amount { color: var(--gv-price); font-size: 18px; font-weight: 700; }

@media (max-width: 849px) {
	.product-small .box-text { padding: 6px 8px 10px; }
	.product-small .title-wrapper .name a, .product-small .title-wrapper .product-title a { font-size: 13px; }
	.gv-specs { gap: 3px 8px; padding: 6px 8px; font-size: 11px; }
	.product-small .price ins .amount, .product-small .price > .amount { font-size: 15px; }
}

/* Thẻ trong slider Flickity (sản phẩm tương tự, upsell…): ô của Flickity là absolute nên không tự cao bằng nhau.
   assets/js/equalize-cards.js đặt min-height bằng thẻ cao nhất; ở đây cho .col-inner/.box dãn đầy để giá luôn nằm sát đáy. */
.row.slider .product-small.col > .col-inner { display: flex; flex-direction: column; }
.row.slider .product-small.col > .col-inner > .product-small.box { flex: 1 1 auto; height: auto; }

/* Slider sản phẩm chưa bật Flickity (ít sản phẩm hơn số cột, vd "sản phẩm tương tự"): các ô là inline-block cao thấp theo nội dung → dùng flex để bằng nhau */
.row.slider:not(.flickity-enabled) { display: flex; flex-wrap: nowrap; align-items: stretch; overflow: hidden; }
.row.slider:not(.flickity-enabled) > .product-small.col { flex: 0 0 auto; display: block; }