/* assets/css/woo.css — sinh bởi Forgekit (WOO-01/04), enqueue có điều kiện class_exists('WooCommerce') trong functions.php. */

.wp-block-woocommerce-product-sale-badge,
.wc-block-components-product-sale-badge {
  background-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--background);
}

.wp-block-woocommerce-product-button .wp-block-button__link,
.wc-block-components-product-button__button {
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--background);
}

/* ── WOO-04: biến thể badge sale (đặt trên .fk-badge-<biến thể>, khai ở product-image) ── */

.wp-block-woocommerce-product-image { position: relative; }

.fk-badge-corner .wp-block-woocommerce-product-sale-badge,
.fk-badge-corner .wc-block-components-product-sale-badge {
  border-radius: 2px;
}

.fk-badge-ribbon .wp-block-woocommerce-product-sale-badge,
.fk-badge-ribbon .wc-block-components-product-sale-badge {
  border-radius: 0;
  padding-left: 1rem;
  padding-right: 1rem;
}

.fk-badge-pill .wp-block-woocommerce-product-sale-badge,
.fk-badge-pill .wc-block-components-product-sale-badge {
  border-radius: 999px;
}

/* ── WOO-04: biến thể bố cục product card (đặt trên .fk-card-<biến thể>, khai ở product-collection) ── */

.fk-card-bordered.wp-block-woocommerce-product-collection .wp-block-woocommerce-product-template > * {
  border: 1px solid var(--wp--preset--color--border);
  box-shadow: none;
}

.fk-card-shadow.wp-block-woocommerce-product-collection .wp-block-woocommerce-product-template > * {
  border: none;
  box-shadow: 0 4px 16px 0 var(--wp--preset--color--border);
}

.fk-card-flat.wp-block-woocommerce-product-collection .wp-block-woocommerce-product-template > * {
  border: none;
  box-shadow: none;
  background-color: var(--wp--preset--color--surface);
}

/* ── WOO-04: tỉ lệ ảnh (đặt trên .fk-ratio-<w>-<h>, khai ở product-image) ── */

.fk-ratio-1-1 img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; height: auto; }
.fk-ratio-3-4 img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; height: auto; }
.fk-ratio-4-3 img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; height: auto; }

/* ── TDD §9.79: dải danh mục sản phẩm thành LƯỚI THẺ ─────────────────────────
   `woocommerce/product-categories` render ra <ul> dọc kèm ảnh — đúng dữ liệu
   nhưng nhìn như danh sách văn bản, không dùng được làm khối trang chủ. Luật
   dưới đây biến nó thành lưới thẻ có ảnh, KHÔNG đụng markup (pattern vẫn là
   khối lõi của Woo, khách sửa trong Site Editor vẫn hiểu).
   Mọi giá trị lấy từ preset theme.json nên đổi màu/bo góc ở Global Styles là
   dải này đổi theo — không chốt cứng màu nào. */

.fk-danh-muc .wc-block-product-categories-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--40, 1.5rem);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 782px) {
	.fk-danh-muc .wc-block-product-categories-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Thẻ sản phẩm cao bằng nhau, nút luôn nằm ĐÁY thẻ.
 * Đo thật trên trang chủ 1440px: tên sản phẩm 2 dòng đẩy giá + nút xuống 25px
 * so với ba thẻ bên cạnh, cả hàng nút so le. Lưới đã cho các <li> cùng chiều
 * cao rồi, thiếu đúng một bước: bản thân <li> phải là flex dọc thì margin-top
 * auto của nút mới có chỗ nở ra. */
.wc-block-product-template > li,
.wp-block-woocommerce-product-template > li {
	display: flex;
	flex-direction: column;
}
.wc-block-product-template > li > .wp-block-button,
.wc-block-product-template > li > .wc-block-components-product-button,
.wp-block-woocommerce-product-template > li > .wp-block-button,
.wp-block-woocommerce-product-template > li > .wc-block-components-product-button {
	margin-top: auto;
}

.fk-danh-muc .wc-block-product-categories-list-item { margin: 0; }
.fk-danh-muc .wc-block-product-categories-list-item > a {
	display: block;
	text-decoration: none;
	color: inherit;
}
.fk-danh-muc .wc-block-product-categories-list-item__image {
	display: block;
	overflow: hidden;
	border-radius: var(--wp--preset--spacing--20, 0.75rem);
	margin-bottom: 0.75rem;
}
.fk-danh-muc .wc-block-product-categories-list-item__image img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
	height: auto;
	display: block;
	transition: transform 240ms ease;
}
.fk-danh-muc .wc-block-product-categories-list-item > a:hover .wc-block-product-categories-list-item__image img,
.fk-danh-muc .wc-block-product-categories-list-item > a:focus-visible .wc-block-product-categories-list-item__image img {
	transform: scale(1.04);
}
.fk-danh-muc .wc-block-product-categories-list-item__name { font-weight: 600; }
.fk-danh-muc .wc-block-product-categories-list-item-count {
	color: var(--wp--preset--color--muted-foreground, currentColor);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
}
@media (prefers-reduced-motion: reduce) {
	.fk-danh-muc .wc-block-product-categories-list-item__image img { transition: none; }
	.fk-danh-muc .wc-block-product-categories-list-item > a:hover .wc-block-product-categories-list-item__image img { transform: none; }
}