/* Product archive/category + homepage featured collections — CẢ HAI đều dùng
   WooCommerce Product Collection/Product Template block (không phải markup "ul.products" cổ điển),
   nên style nhắm đúng class thật: .wc-block-components-product-*, .wp-block-post-title.
   Số liệu đo trực tiếp từ bjjfightgear.com (getComputedStyle): ảnh/card bo góc 0 (vuông),
   box-shadow nhẹ, title 16px/weight 400, giá 22px đỏ, badge sale vuông góc,
   nút Add to cart xanh #1db121 radius 3px. */

/* Trust banner (parts/trust-banner.html) — dùng ở đầu trang archive/category, y hệt bố cục
   .bjj-usp-row của trang chủ (home.css) nhưng class riêng vì home.css chỉ load ở
   is_front_page(), còn shop-archive.css load ở mọi trang WooCommerce. */
.bjj-trust-banner {
	align-items: flex-start;
}
.bjj-trust-banner__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
}
.bjj-trust-banner__icon {
	width: 46px;
	height: 46px;
	flex-shrink: 0;
	color: var(--wp--preset--color--base);
}
.bjj-trust-banner__title {
	font-family: var(--wp--preset--font-family--montserrat);
	margin: 0 0 4px;
	font-weight: 800;
	font-size: 16px;
	text-transform: uppercase;
}
.bjj-trust-banner__sub {
	font-family: var(--wp--preset--font-family--open-sans);
	margin: 0;
	font-size: 16px;
	font-weight: 400;
}

.wc-block-product-template {
	gap: var(--wp--preset--spacing--30, 24px) !important;
}

li.wc-block-product {
	/* Đo lại trực tiếp .productitem trên bjjfightgear.com (2026-08-04, cả /collections/... lẫn
	   trang chủ đều CÙNG 1 thiết kế, không phải "2 nơi khác nhau" như ghi chú cũ trước đây):
	   border 1px xám nhạt thật (không chỉ box-shadow), padding 16px đều trái/phải/trên, ảnh
	   vuông 1:1 nằm lọt trong padding — ảnh KHÔNG chạm viền card. */
	box-sizing: border-box; /* không thì padding+border cộng thêm vào bề rộng làm tràn hàng */
	border: 1px solid rgba(128, 128, 128, 0.16);
	box-shadow: 0 1px 4px rgba(128, 128, 128, 0.11);
	padding: 16px 16px 0; /* không có padding-bottom — viền dưới ôm sát nút, xem flap bên dưới */
	display: flex;
	flex-direction: column;
	position: relative; /* containing block cho nút position:absolute bên dưới */
	overflow: visible; /* nút "Thêm vào giỏ hàng" mọc ra ngoài viền dưới khi hover — vì nó
		position:absolute nên KHÔNG cộng vào chiều cao ô lưới, layout phía dưới (nút "Xem tất
		cả") không bị đẩy xuống dù card "nở" ra. Đo trực tiếp cơ chế tương tự trên
		bjjfightgear.com (`.productitem` overflow:visible + `.productitem--actions` absolute). */
}

/* Ảnh — vuông góc 1:1, không zoom (không xác nhận hover-zoom trên site thật) */
.wc-block-components-product-image {
	position: relative; /* containing block cho ảnh hover thứ 2 */
}
.wc-block-components-product-image img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 0;
}

/* Ảnh thứ 2 khi hover — ảnh gallery đầu tiên của sản phẩm, chèn qua
   bjj_gear_product_card_hover_image() trong functions.php, chồng lên ảnh chính bằng crossfade
   opacity. Giống hiệu ứng "hover to swap image" đo trực tiếp trên bjjfightgear.com
   (`.productitem--image-alternate`, transition opacity 0.2s). */
.bjj-product-hover-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 0.2s ease;
}
li.wc-block-product:hover .bjj-product-hover-image {
	opacity: 1;
}

/* Tiêu đề — 16px, weight 400 (KHÔNG bold). Đo lại trực tiếp bjjfightgear.com (2026-08-04):
	KHÔNG reserve 2 dòng cố định (`min-height`/`line-clamp` cũ làm card cao hơn hẳn bản gốc
	~21px mỗi card) — bản gốc để title tự nhiên 1 hay 2 dòng tuỳ độ dài, chấp nhận các card
	trong cùng 1 hàng cao thấp không đều nhau (`overflow:visible`, `min-height:0` đo được trên
	site thật). margin-top 4px/không có margin-bottom (brand/tình trạng theo ngay sau, margin 0).
	Selector CỐ Ý scope trong `li.wc-block-product` (không để trần `.wp-block-post-title` như
	trước) — class này là class CORE dùng chung cho MỌI block post-title, kể cả tiêu đề trang
	single bài viết blog (templates/single.html, class .bjj-article-title). Để trần + !important
	từng đè luôn cả tiêu đề blog thành 16px/400 dù trang đó style khác hẳn — bug phát hiện
	2026-08-13 khi làm trang single blog. */
li.wc-block-product .wp-block-post-title.wp-block-post-title {
	font-family: var(--wp--preset--font-family--open-sans);
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 21px;
	text-transform: none;
	margin: 4px 0 0; /* li đã có padding trái/phải 16px riêng — không cộng thêm margin ngang,
		tránh inset 2 lần */
}

/* Giá — 22px đỏ (giá hiện tại), giá gốc gạch ngang xám nhạt hơn */
.wc-block-components-product-price {
	margin: 0 0 4px;
}
.wc-block-components-product-price .woocommerce-Price-amount {
	color: var(--wp--preset--color--accent-1);
	font-size: 22px;
	font-weight: 400;
}
.wc-block-components-product-price del .woocommerce-Price-amount {
	color: var(--wp--preset--color--accent-3);
	font-size: 13px;
	font-weight: 400;
}
.wc-block-components-product-price ins {
	text-decoration: none;
}

/* Badge sale — đỏ, vuông góc */
.wc-block-components-product-sale-badge {
	border-radius: 0 !important;
	background: var(--wp--preset--color--accent-1) !important;
	color: var(--wp--preset--color--base) !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	padding: 4px 5px !important;
}

/* Nút Add to cart — xanh #1db121, radius 3px. ĐÃ SỬA LẠI LẦN 4: lần 3 để wrapper nút trôi nổi
   tách rời hẳn khỏi card (chỉ có nút xanh, không nền/viền) — nhìn tách biệt, không giống
   "một phần của card" như bản gốc. Sửa lại: wrapper `.wc-block-components-product-button`
   trải full-width (left/right:0, không inset), tô cùng nền trắng + box-shadow giống hệt
   li.wc-block-product, không có border-top — để khi "nở" ra trông như chính card đang giãn
   thêm 1 vùng footer chứa nút, liền mạch với phần trên (ảnh/tên/giá), KHÔNG phải 1 nút rời
   lửng lơ bên dưới. Vẫn absolute + scaleY(0)→scaleY(1) gốc mép trên (=mép dưới card) nên
   không cộng vào chiều cao ô lưới — nút "Xem tất cả" không bị đẩy xuống (xem overflow:visible
   ở li.wc-block-product phía trên). */
.wc-block-components-product-button {
	/* Ép display:block (thay vì display:flex mặc định của core) để width:100% của nút bên
	   dưới lấp đầy đúng theo block layout, không bị co theo nội dung qua align-items:center
	   của flex. Containing block của phần tử absolute là PADDING box (không tính border) —
	   left:0/right:0 sẽ hụt vào trong 1px mỗi bên so với mép ngoài border của card, nên bù lại
	   bằng -1px để mép ngoài flap (tính cả border riêng của flap) trùng khớp chính xác mép
	   ngoài border của card — "nở" ra trông như card đang giãn thêm 1 vùng footer liền mạch,
	   không phải 1 nút rời lửng lơ. padding-left/right 16px để nút thẳng hàng với ảnh/tên/giá
	   phía trên (card giờ có padding 16px thật, không còn full-bleed sát mép như trước). */
	display: block !important;
	position: absolute !important;
	left: -1px !important;
	right: -1px !important;
	top: 100% !important;
	margin: 0 !important;
	padding: 12px 16px !important;
	background: var(--wp--preset--color--base);
	border: 1px solid rgba(128, 128, 128, 0.16);
	border-top: none;
	box-shadow: 0 1px 4px rgba(128, 128, 128, 0.11);
	transform: scaleY(0);
	transform-origin: top;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: transform 0.25s ease, opacity 0.2s ease, visibility 0.25s ease;
	z-index: 5;
}
li.wc-block-product:hover .wc-block-components-product-button,
li.wc-block-product:focus-within .wc-block-components-product-button {
	transform: scaleY(1);
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}
.wc-block-components-product-button__button {
	/* Core set display:inline-flex trên nút — cũng ép về block cùng lý do như trên, để
	   width:100% !important bên dưới thực sự lấp đầy đúng bề rộng card. */
	display: block !important;
	position: static !important;
	width: 100% !important;
	height: auto !important;
	margin: 0 !important;
	border-radius: 3px !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: 0.26px !important;
	padding: 10px 4px !important;
	background: var(--wp--preset--color--accent-2) !important;
	color: var(--wp--preset--color--base) !important;
	transition: background-color 0.2s ease;
}
.wc-block-components-product-button__button:hover {
	background: color-mix(in srgb, var(--wp--preset--color--accent-2) 85%, black) !important;
}

/* Stock indicator block (trang chủ) — xanh khi còn hàng */
.wc-block-components-product-stock-indicator {
	margin: 0 0 4px;
	font-size: 14px;
	color: var(--wp--preset--color--accent-2);
}

/* Đánh giá sao (woocommerce/product-rating) — mặc định font-size 22px kế thừa từ context làm
   cả hàng cao gần 36px, đo trực tiếp bjjfightgear.com chỉ ~15px (icon sao nhỏ, 1 dòng gọn).
   Chỉ hiện khi sản phẩm có review thật (block tự ẩn nếu 0 review — xem ProductRating.php).
   margin-bottom 10px (thay vì 0) — card không có padding-bottom (viền dưới ôm sát nút "Thêm vào
   giỏ hàng" khi hover, xem shop-archive.css đầu file), nên khi CÓ rating, hàng sao trở thành
   phần tử cuối và cần khoảng đệm riêng, không thì dính sát viền dưới card (bug thật đã gặp:
   "Ground Force Rank Rashguard Long Sleeve" — sao chạm đáy card, nhìn bí bách). */
.wc-block-components-product-rating {
	/* Container ngoài kế thừa font-size 22px mặc định → line-height 30.8px kéo cả hàng cao lên
	   dù icon sao bên trong chỉ 15px — ép lại font-size ở đây để line-height co theo đúng. */
	font-size: 15px;
	line-height: 1;
	margin: 4px 0 10px;
}
.wc-block-components-product-rating__container {
	font-size: 15px;
	line-height: 1;
}
.wc-block-components-product-rating__stars {
	/* CSS gốc của block set height:1.618em (golden ratio, chừa khoảng đệm quanh icon sao) —
	   ép lại về đúng 15px cho khớp kích thước icon thật đo trên bjjfightgear.com. */
	font-size: 15px !important;
	line-height: 1 !important;
	height: 15px !important;
	/* Màu sao — đo trực tiếp bjjfightgear.com (#icon-star { color: #d4982a }): sao CHƯA đạt chỉ
	   hiện viền mỏng màu cam-vàng (không phải xám/đen như mặc định WooCommerce — mặc định block
	   này chỉ dùng color:inherit nên ăn theo màu chữ thường của theme, ra màu đen/xám, sai hẳn).
	   Kỹ thuật: lớp nền (::before, đại diện 5 sao rỗng) set color:transparent + text-stroke để
	   CHỈ hiện viền; lớp phủ (span::before, bị cắt theo % rating qua width) mới tô đặc màu — y
	   hệt cơ chế bản gốc dùng rect fill="currentColor" scaleX theo % chồng lên path viền sao. */
	color: transparent;
	-webkit-text-stroke: 1px #d4982a;
}
.wc-block-components-product-rating__stars::before {
	/* !important bắt buộc — CSS gốc của WooCommerce block (all-products.css/product-rating.css)
	   dùng đúng selector này (cùng specificity) nhưng load SAU shop-archive.css trong <head>, nên
	   thắng cascade nếu không ép !important (đã bắt được lỗi thật: opacity/color đặt ở trên
	   không có tác dụng, sao vẫn hiện màu đen mặc định của WooCommerce, kiểm tra lại bằng
	   getComputedStyle mới phát hiện ra). Bỏ opacity:.5 mặc định (mô phỏng "mờ" cho phần rỗng) —
	   không cần nữa vì giờ phần rỗng đã là viền trong suốt thật. */
	color: transparent !important;
	-webkit-text-stroke: 1px #d4982a !important;
	opacity: 1 !important;
}
.wc-block-components-product-rating__stars span::before {
	color: #d4982a !important;
	-webkit-text-stroke: 0 !important;
}

/* Stock status text — xanh khi còn hàng, xám khi hết hàng. Chèn qua
   `bjj_gear_product_card_brand_and_stock()` ngay sau tiêu đề trên card archive/trang chủ/related
   (dùng chung 1 hàm cho mọi nơi vì tất cả đều là block Product Collection, không còn loop classic). */
.stock {
	margin: 0 0 4px;
	font-size: 14px;
	color: var(--wp--preset--color--accent-2);
}
.stock.out-of-stock {
	color: var(--wp--preset--color--accent-3);
}

/* Fallback: nếu có nơi nào vẫn còn render markup classic ul.products (vd. shortcode cũ) */
.woocommerce ul.products li.product {
	box-shadow: 0 1px 4px rgba(128, 128, 128, 0.11);
}
.woocommerce ul.products li.product img {
	border-radius: 0;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 16px;
	font-weight: 400;
}
.woocommerce ul.products li.product .price {
	color: var(--wp--preset--color--accent-1);
	font-size: 22px;
}
.woocommerce ul.products li.product .button.add_to_cart_button {
	border-radius: 3px;
	font-size: 13px;
	font-weight: 700;
}

/* Breadcrumb — đo trực tiếp bjjfightgear.com: "Trang chủ" màu đỏ accent-1, dấu phân cách và
   tên trang hiện tại màu xám accent-3 (#949494) — mặc định trước đó tất cả đều màu đen/contrast
   giống nhau, không phân biệt link "Trang chủ" với phần còn lại. */
.wc-block-breadcrumbs {
	color: var(--wp--preset--color--accent-3);
}
.wc-block-breadcrumbs a:first-child {
	color: var(--wp--preset--color--accent-1);
}

/* Tiêu đề category (query-title) + mô tả category (term-description) — đo trực tiếp
   bjjfightgear.com: tiêu đề Montserrat 31px/800/UPPERCASE (mặc định block đang lấy theo cỡ H1
   chung của theme, 48px/không hoa — sai), mô tả Open Sans 16px/weight 400 (mặc định block lấy
   18px/300 — sai, mảnh và to hơn bản gốc). Cả 2 còn bị margin trái/phải 150px lạ (kế thừa từ
   default style block), reset về margin thường. */
/* Khoảng cách banner tin cậy → breadcrumb — đo được 55px, mục tiêu bjjfightgear.com 68px
   (thiếu 13px). Gap này đến từ margin-top mặc định của <main> (kế thừa theme, dùng chung mọi
   trang — KHÔNG đụng trực tiếp vì sẽ lệch trang khác). Dùng :has() để chỉ tăng margin-top của
   <main> khi nó đứng ngay sau banner tin cậy (chỉ xảy ra ở template archive-product này) —
   scoped, không ảnh hưởng trang chủ/single-product. */
.wp-block-template-part:has(.bjj-trust-banner) + main {
	margin-top: 32px;
}
.wp-block-query-title {
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 31px;
	font-weight: 800;
	line-height: 1.3;
	text-transform: uppercase;
	/* margin-top 28px — đo trực tiếp: khoảng cách breadcrumb → tiêu đề trên bjjfightgear.com là
	   28px. Margin trên/dưới của 2 block liền kề COLLAPSE vào nhau (lấy giá trị lớn hơn, không
	   cộng dồn) nên phải set đúng bằng tổng khoảng cách mong muốn, không phải phần chênh lệch. */
	margin: 28px 0 12px;
}
.wp-block-term-description {
	font-family: var(--wp--preset--font-family--open-sans);
	font-size: 16px;
	font-weight: 400;
	line-height: 26px;
	/* margin-top 16px (collapse với margin-bottom 12px của tiêu đề → thắng, ra đúng 16px) —
	   margin-bottom 48px — đo trực tiếp: khoảng cách từ cuối đoạn mô tả tới heading "Filters"
	   sidebar trên bjjfightgear.com là 48px. */
	margin-top: 16px;
	margin-bottom: 48px;
	/* KHÔNG đụng max-width/margin-left/margin-right của chính block (nó là alignwide, core tự
	   auto-margin canh giữa toàn bộ khối 1400px — ép max-width nhỏ hơn ở block sẽ bị canh GIỮA
	   trong vùng 1400px đó thay vì bám lề trái, lệch hẳn so với tiêu đề). Thay vào đó bóp vùng
	   chứa CHỮ lại bằng padding-right — block vẫn full alignwide, mép trái vẫn thẳng hàng tiêu
	   đề y hệt bản gốc (đo trực tiếp: mép trái đoạn mô tả === mép trái H1), chỉ chữ bị "ăn" bớt
	   theo padding nên tự xuống dòng sớm, ra đúng 1006px bề rộng text đo được. */
	padding-right: 394px;
}
@media (max-width: 1024px) {
	.wp-block-term-description {
		padding-right: 0;
	}
}

/* === Trang archive/category (templates/archive-product.html) — layout 2 cột, đo trực tiếp
   bjjfightgear.com `.productgrid--outer`: sidebar 185px cố định + nội dung, gap 25px. === */
.bjj-shop-layout {
	display: grid;
	grid-template-columns: 185px 1fr;
	gap: 32px 25px;
	align-items: start;
}
@media (max-width: 782px) {
	.bjj-shop-layout {
		grid-template-columns: 1fr;
	}
}

.bjj-shop-sidebar__title {
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 16px;
	font-weight: 800;
	text-transform: uppercase;
	margin: 0 0 16px;
}

/* Product Filters block (woocommerce/product-filters) — mỗi nhóm filter (Tình trạng/Kích
   thước/Màu sắc/Thương hiệu/Danh mục) là 1 khối core/details — bấm vào tiêu đề để thu gọn/mở
   rộng (accordion), giống hành vi thật trên bjjfightgear.com (mỗi nhóm filter bấm collapse
   được). <details>/<summary> chuẩn HTML nên không cần JS. */
.bjj-shop-sidebar .wp-block-woocommerce-product-filters {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.bjj-filter-group {
	border-bottom: 1px solid var(--wp--preset--color--accent-6);
	padding-bottom: 14px;
}
.bjj-filter-group summary {
	/* Đo lại trực tiếp bjjfightgear.com (`.collection-filters__filter-title`): Open Sans (KHÔNG
	   phải Montserrat), 15px, weight 700, KHÔNG uppercase — trước đó nhầm sang style của heading
	   "Filters" (Montserrat/uppercase), 2 cấp heading này khác font nhau trên bản gốc. */
	font-family: var(--wp--preset--font-family--open-sans);
	font-size: 15px;
	font-weight: 700;
	text-transform: none;
	margin: 0 0 10px;
	padding: 4px 0;
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.bjj-filter-group summary::-webkit-details-marker {
	display: none;
}
.bjj-filter-group summary::after {
	content: "";
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
	flex-shrink: 0;
}
.bjj-filter-group[open] summary::after {
	transform: rotate(-135deg);
}
.bjj-shop-sidebar .wc-block-product-filter-checkbox-list {
	/* Đo lại trực tiếp bjjfightgear.com (`.collection-filters__filter-list-item`): Open Sans
	   16px/weight 400 — CSS block gốc của WooCommerce mặc định set weight:300 (mảnh hơn), phải
	   ép lại 400 cho khớp. */
	font-family: var(--wp--preset--font-family--open-sans);
	font-size: 16px;
	font-weight: 400;
	/* Ô checkbox vuông của block này ĐỌC 2 custom property này để vẽ viền/dấu tick — mặc định
	   không set gì cả nên border trong suốt, gần như vô hình. Viền mảnh xám nhạt (accent-6,
	   #dddddd) khi CHƯA check — đo trực tiếp bjjfightgear.com: `svg { border: 1px solid
	   #dddddd }` lúc unchecked, mảnh hơn hẳn viền đen đậm ban đầu. Dấu tick trắng (chỉ hiện rõ
	   khi nền đã đổi đỏ lúc checked, xem rule :checked bên dưới). */
	--wc-product-filter-checkbox-list-option-element-border: var(--wp--preset--color--accent-6);
	--wc-product-filter-checkbox-list-option-element-selected: var(--wp--preset--color--base);
}
.bjj-shop-sidebar .wc-block-product-filter-checkbox-list__items {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.bjj-shop-sidebar .wc-block-product-filter-checkbox-list__label {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-weight: 400;
}
/* Checked — đo trực tiếp bjjfightgear.com: ô vuông tô ĐẶC màu đỏ accent-1 (không chỉ viền),
   dấu tick trắng, TEXT nhãn cũng đổi sang đỏ + đậm (700) luôn, không chỉ riêng ô vuông. */
.bjj-shop-sidebar input[type="checkbox"].wc-block-product-filter-checkbox-list__input:checked {
	background-color: var(--wp--preset--color--accent-1) !important;
	border-color: var(--wp--preset--color--accent-1) !important;
}
.bjj-shop-sidebar .wc-block-product-filter-checkbox-list__label:has(input:checked) {
	color: var(--wp--preset--color--accent-1);
	font-weight: 700;
}

.bjj-shop-toolbar {
	margin-bottom: 20px;
	/* wp:group con không có align:"wide" bên trong layout "constrained" của .bjj-shop-main →
	   core tự cho width mặc định hẹp (contentSize) + auto-margin canh GIỮA, khiến cả hàng
	   "Sắp xếp theo"/"View as" bị trôi vào giữa thay vì bám 2 mép trái/phải. Ép lại full width,
	   bỏ auto-margin. */
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
/* Dropdown sort — đo trực tiếp bjjfightgear.com: KHÔNG có khung/viền/nền gì cả, chỉ là text
   "Sort by" (đậm) + giá trị đang chọn (thường, xám) + mũi tên nhỏ, hoàn toàn phẳng. Trước đó
   để nguyên <select> mặc định của trình duyệt (viền xám, nền trắng, font Arial) — sai hẳn. */
/* Label "Sắp xếp theo" + <select> nằm cùng trong <form class="woocommerce-ordering"> (bên
   trong wrapper .wc-block-catalog-sorting) — phải flex/align-items ngay trên FORM (chỗ 2 phần
   tử này thực sự là con trực tiếp), không phải trên wrapper ngoài, thì mới thẳng hàng nhau. */
.wc-block-catalog-sorting form.woocommerce-ordering {
	display: flex;
	align-items: center;
	gap: 8px;
}
.wc-block-catalog-sorting form.woocommerce-ordering label {
	font-family: var(--wp--preset--font-family--open-sans);
	font-size: 15px;
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
	margin: 0;
}
.wc-block-catalog-sorting select {
	appearance: none;
	-webkit-appearance: none;
	border: none;
	background: transparent;
	box-shadow: none;
	border-radius: 0;
	font-family: var(--wp--preset--font-family--open-sans);
	font-size: 14px;
	font-weight: 400;
	color: var(--wp--preset--color--accent-4);
	padding: 0 20px 0 0;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='14' height='14'%3E%3Cpath fill='none' stroke='%234d4d4d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right center;
}
.wc-block-catalog-sorting select:focus {
	outline: none;
}

/* Tên thương hiệu + swatch màu trên card — xem bjj_gear_product_card_brand_and_swatches()
   trong functions.php. Sản phẩm không có biến thể màu → không có .bjj-product-swatches,
   không chiếm chỗ. */
.bjj-product-brand {
	margin: 0 0 4px;
	font-size: 14px;
	color: var(--wp--preset--color--accent-3);
}
.bjj-product-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 8px;
}
.bjj-product-swatch {
	width: 24px;
	height: 24px;
	border-radius: 2.5px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	display: inline-block;
}
.bjj-product-swatch[data-image] {
	cursor: pointer;
}
/* Hover swatch đổi ảnh chính (xem assets/js/shop-color-swatches.js) — phải tắt ảnh gallery
   thay thế khi hover cả card (.bjj-product-hover-image, xem phía trên) trong lúc này, không thì
   nó đè lên ảnh vừa đổi theo màu. */
li.wc-block-product.bjj-swatch-hovering .bjj-product-hover-image {
	opacity: 0 !important;
}

/* Mô tả ngắn (wp:post-excerpt) — chỉ hiện ở view-as List (xem khối .bjj-view-list bên dưới).
   Ở Grid không hiện, đúng bản gốc (card grid không có mô tả). */
.bjj-product-desc {
	display: none;
}

/* Pagination — link đỏ, trang hiện tại đen đậm, không khung/nút (đo trực tiếp
   bjjfightgear.com `.pagination--item`). */
.wp-block-query-pagination {
	margin-top: 32px;
}
.wp-block-query-pagination .page-numbers {
	font-size: 16px;
	font-weight: 400;
	color: var(--wp--preset--color--accent-1);
	text-decoration: none;
}
.wp-block-query-pagination .page-numbers.current {
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
}
.wp-block-query-pagination .wp-block-query-pagination-previous,
.wp-block-query-pagination .wp-block-query-pagination-next {
	font-size: 16px;
	color: var(--wp--preset--color--accent-1);
}

/* View as (grid/list) — xem assets/js/shop-view-toggle.js. */
.bjj-view-toggle {
	display: flex;
	gap: 6px;
}
.bjj-view-toggle__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid var(--wp--preset--color--accent-6);
	border-radius: 3px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--accent-3);
	cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease;
}
.bjj-view-toggle__btn.is-active {
	color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
}

/* Chế độ list — đo trực tiếp bjjfightgear.com (?grid_list=list-view): mỗi sản phẩm 1 hàng,
   3 "cột" thật (CSS Grid, không phải flex — flex không tự xếp được nhiều dòng nội dung ở giữa
   VÀ giá/nút neo phải cùng lúc mà không lồng thêm div). Vì Product Template render mọi block
   con (ảnh, giá, tiêu đề, brand/tình trạng chèn qua PHP, đánh giá, mô tả, nút) làm ANH EM
   ngang hàng trực tiếp trong <li>, CSS Grid định vị được từng phần tử vào đúng ô
   (grid-column/grid-row) không cần đổi thứ tự DOM — khắc phục đúng lỗi "hàng lối xô lệch" cũ
   (trước dùng flex, cột giá/nút trôi theo độ dài nội dung mỗi dòng, mỗi sản phẩm lệch 1 vị trí
   khác nhau vì không có khung cột cố định).
   Cột 1 (180px): ảnh + swatch màu — bám dọc suốt cả hàng.
   Cột 2 (giãn): tiêu đề → thương hiệu → tình trạng còn hàng → đánh giá sao → mô tả ngắn +
   "Xem chi tiết" — đúng thứ tự đo trên bản gốc.
   Cột 3 (180px, canh phải): giá → nút "Thêm vào giỏ hàng"/"Chọn". */
.wp-block-woocommerce-product-collection.bjj-view-list .wc-block-product-template {
	grid-template-columns: 1fr !important;
	gap: 16px !important;
}
.wp-block-woocommerce-product-collection.bjj-view-list li.wc-block-product {
	display: grid;
	grid-template-columns: 180px 1fr 180px;
	grid-template-rows: auto auto auto auto auto auto;
	column-gap: 24px;
	row-gap: 6px;
	align-items: start;
	padding: 20px;
}
.wp-block-woocommerce-product-collection.bjj-view-list .wc-block-components-product-image {
	grid-column: 1;
	grid-row: 1 / 7;
}
.wp-block-woocommerce-product-collection.bjj-view-list .wc-block-components-product-image img {
	aspect-ratio: 1 / 1;
}
.wp-block-woocommerce-product-collection.bjj-view-list .wp-block-post-title.wp-block-post-title {
	grid-column: 2;
	grid-row: 1;
	font-size: 20px !important;
	font-weight: 700 !important;
	line-height: 1.3;
	margin: 0;
}
.wp-block-woocommerce-product-collection.bjj-view-list .bjj-product-brand {
	grid-column: 2;
	grid-row: 2;
	margin: 0;
}
.wp-block-woocommerce-product-collection.bjj-view-list .stock {
	grid-column: 2;
	grid-row: 3;
	margin: 0;
}
.wp-block-woocommerce-product-collection.bjj-view-list .wc-block-components-product-rating {
	grid-column: 2;
	grid-row: 4;
	margin: 4px 0 0;
}
.wp-block-woocommerce-product-collection.bjj-view-list .bjj-product-swatches {
	grid-column: 2;
	grid-row: 5;
	margin: 4px 0 0;
}
.wp-block-woocommerce-product-collection.bjj-view-list .bjj-product-desc {
	display: block;
	grid-column: 2;
	grid-row: 6;
	margin-top: 8px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--wp--preset--color--contrast);
}
.wp-block-woocommerce-product-collection.bjj-view-list .wp-block-post-excerpt__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
}
.wp-block-woocommerce-product-collection.bjj-view-list .wp-block-post-excerpt__more-text {
	margin: 6px 0 0;
}
.wp-block-woocommerce-product-collection.bjj-view-list .wp-block-post-excerpt__more-link {
	color: var(--wp--preset--color--accent-1);
	text-decoration: none;
	font-weight: 400;
}
.wp-block-woocommerce-product-collection.bjj-view-list .wc-block-components-product-price {
	grid-column: 3;
	grid-row: 1;
	text-align: right !important;
	margin: 0;
}
.wp-block-woocommerce-product-collection.bjj-view-list .wc-block-components-product-button {
	grid-column: 3;
	grid-row: 2;
	justify-self: end;
	align-self: start;
	width: 160px;
	position: static !important;
	left: auto !important;
	right: auto !important;
	top: auto !important;
	padding: 0 !important;
	border: none !important;
	transform: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
	box-shadow: none;
	margin-top: 8px !important;
}