/* Trang chủ — USP band nền đỏ + icon SVG.
   Đo lại trực tiếp trên site thật (2026-08-03): mỗi item xếp DỌC — icon trên, chữ dưới,
   căn giữa (flex-direction:column;align-items:center) — KHÔNG phải icon trái/chữ phải
   như bản trước. Icon 46x46, heading+sub cùng font-size 16px trắng, gap icon-chữ ~12px,
   section padding 36px 25px, container max-width 1400px, tổng cao khối ~105px/item. */

.bjj-usp-row {
	align-items: flex-start;
}
.bjj-usp-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
}
.bjj-usp-icon {
	width: 46px;
	height: 46px;
	flex-shrink: 0;
	color: var(--wp--preset--color--base);
}
.bjj-usp-title {
	font-family: var(--wp--preset--font-family--montserrat);
	margin: 0 0 4px;
	font-weight: 800;
	font-size: 16px;
	text-transform: uppercase;
}
.bjj-usp-sub {
	font-family: var(--wp--preset--font-family--open-sans);
	margin: 0;
	font-size: 16px;
	font-weight: 400;
}

/* Card sản phẩm trong khối Featured Collection (Mới về/Còn hàng, Beginner BJJ Gis) —
   đo trực tiếp `.productitem` trong section "New/Restocked" trên bjjfightgear.com:
   border 1px xám nhạt, padding 16px đều 4 phía (ảnh KHÔNG chạm viền card), ảnh vuông 1:1
   (KHÔNG phải 3:4 như trang /shop/ archive chung — 2 nơi khác nhau, chỉ scope ở đây vì
   home.css chỉ load ở is_front_page()). KHÔNG có padding-bottom — viền card ôm sát nội
   dung (ảnh/tên/giá/tồn kho), nút "Thêm vào giỏ hàng" mọc ra ngoài viền dưới khi hover
   (xem `.wc-block-components-product-button` ở shop-archive.css), không còn khoảng trắng
   rỗng cố định như bản trước. */
main .wp-block-woocommerce-product-collection li.wc-block-product {
	box-sizing: border-box; /* nếu không, padding+border cộng thêm vào bề rộng làm tràn hàng,
		5 card không còn vừa 1 hàng nữa mà bị rớt xuống dòng 2 */
	border: 1px solid rgba(128, 128, 128, 0.16);
	padding-top: 16px;
	padding-left: 16px;
	padding-right: 16px;
}
main .wp-block-woocommerce-product-collection .wc-block-components-product-image img {
	aspect-ratio: 1 / 1 !important;
}
/* li đã có padding trái/phải 16px riêng — bỏ margin ngang 8px của title/giá/nút (vốn để bù
   trừ cho trường hợp KHÔNG có card padding ở trang /shop/) để không bị inset 2 lần (16+8=24px). */
main .wp-block-woocommerce-product-collection .wp-block-post-title.wp-block-post-title,
main .wp-block-woocommerce-product-collection .wc-block-components-product-price,
main .wp-block-woocommerce-product-collection .wc-block-components-product-stock-indicator,
main .wp-block-woocommerce-product-collection .stock {
	margin-left: 0 !important;
	margin-right: 0 !important;
}
/* Wrapper nút ở trang chủ — 2 việc:
   1) li.wc-block-product ở trang chủ CÓ border 1px thật (khác /shop/ chỉ có box-shadow) — vì
      containing block của phần tử absolute là PADDING box (không tính border), left:0/right:0
      mặc định (đặt ở shop-archive.css) sẽ bị hụt vào trong 1px mỗi bên so với mép ngoài border
      của card → nhìn "thắt bé hơn" đúng như đo được (card 258px nhưng flap chỉ 256px). Bù lại
      bằng left/right:-1px để mép ngoài của 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.
   2) Ảnh sản phẩm ở trang chủ cách viền card 17px (1px border + 16px padding của li) — nút bên
      trong flap phải cách đều flap đúng 17px này để thẳng hàng với ảnh, nên set lại padding
      16px (cộng với border 1px của flap = đủ 17px, không dùng padding:0 full-bleed như mặc
      định /shop/ vì trang chủ card có padding thật, /shop/ thì ảnh vốn đã sát mép — 2 nơi khác
      gutter nên phải tách riêng, không dùng chung 1 giá trị). */
main .wp-block-woocommerce-product-collection .wc-block-components-product-button {
	left: -1px !important;
	right: -1px !important;
	padding-left: 16px !important;
	padding-right: 16px !important;
	border: 1px solid rgba(128, 128, 128, 0.16);
	border-top: none;
}

/* "Xem tất cả" — đo trực tiếp nút "Shop collection" tương ứng trên bjjfightgear.com:
   height ~42px, padding 12px 18px, font-size 14px (mặc định core button 16px/36px padding
   to hơn hẳn bản gốc). Chỉ 2 nút wp:button trong toàn theme dùng style mặc định này (2 khối
   Featured Collection ở trang chủ) nên scope thoải mái, không ảnh hưởng nút nào khác. */
main .wp-block-buttons .wp-block-button__link {
	padding: 12px 18px !important;
	font-size: 14px !important;
}

/* Top Brands — đo trực tiếp `.logolist--item` trên bjjfightgear.com: logo 160x160 vuông
   (file gốc đã crop vuông sẵn từ Shopify CDN nên object-fit:cover không cắt xấu), gap 40px
   cả 2 chiều, KHÔNG filter grayscale (logo gốc vốn đã đen trắng/đơn sắc, không cần CSS xử lý
   thêm), hover scale(1.1) 0.15s — khác hẳn `.bjj-hover-scale` dùng chung (scale 1.05) nên viết
   riêng thay vì tái dùng class đó. LUÔN cố định 6 CỘT/hàng (grid, không phải flex-wrap tự do)
   — đo trực tiếp bản gốc xếp đúng 6/hàng dù container còn đủ chỗ cho item thứ 7; dùng
   flex-wrap trước đó bị sai vì 1400px container thừa chỗ cho 7 logo/hàng thay vì 6. */
.bjj-brand-list {
	display: grid;
	grid-template-columns: repeat(6, 160px);
	justify-content: center;
	gap: 40px;
	margin-top: 28px;
}
.bjj-brand-item a {
	display: block;
}
.bjj-brand-item img {
	display: block;
	width: 160px;
	height: 160px;
	object-fit: cover;
	transition: transform 0.15s cubic-bezier(0, 0, 0.2, 1);
}
.bjj-brand-item img:hover {
	transform: scale(1.1);
}

/* ==== Hero slideshow — 2 slide thật (bjj_hero_slider shortcode), tự chuyển 6s + nút prev/next
   + dot indicator, giống cấu trúc carousel trên bjjfightgear.com. ==== */
.bjj-hero-slider {
	position: relative;
	/* Kỹ thuật "break out" full-bleed chuẩn — không dựa vào class .alignfull của core vì
	   div này nằm trong shortcode, lồng qua nhiều cấp wrapper nên core không tự bù trừ
	   padding của .has-global-padding, gây hở khoảng trắng bên phải (width 100% chỉ bằng
	   100% vùng nội dung đã trừ padding, không phải toàn viewport). */
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	min-height: 520px;
	overflow: hidden;
	background: var(--wp--preset--color--contrast);
}
.bjj-hero-slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-size: cover;
	background-position: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.6s ease;
	z-index: 1;
}
.bjj-hero-slide.is-active {
	opacity: 1;
	visibility: visible;
	z-index: 2;
}
.bjj-hero-slide__overlay {
	position: absolute;
	inset: 0;
	background: var(--wp--preset--color--contrast);
	opacity: 0.4;
}
.bjj-hero-slide__content {
	position: relative;
	z-index: 1;
	max-width: 700px;
	margin: 0 auto;
	padding: var(--wp--preset--spacing--40, 32px);
	text-align: center;
	color: var(--wp--preset--color--base);
}
.bjj-hero-eyebrow {
	color: var(--wp--preset--color--accent-1);
	text-transform: uppercase;
	letter-spacing: 0.15em;
	font-size: 0.85rem;
	margin: 0 0 12px;
}
.bjj-hero-heading {
	font-family: var(--wp--preset--font-family--montserrat);
	color: var(--wp--preset--color--base);
	font-size: clamp(2rem, 5vw, 3.5rem);
	margin: 0;
	line-height: 1.15;
}
.bjj-hero-text {
	margin: 20px 0 0;
	color: var(--wp--preset--color--base);
}
.bjj-hero-buttons {
	display: flex;
	gap: 12px;
	justify-content: center;
	margin-top: 24px;
}
.bjj-hero-btn {
	display: inline-block;
	flex: 1 1 0;
	max-width: 240px;
	text-align: center;
	padding: 14px 28px;
	border-radius: 4px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	text-decoration: none;
	transition: background-color 0.2s ease, opacity 0.2s ease;
}
.bjj-hero-btn--primary {
	background: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--base);
}
.bjj-hero-btn--primary:hover {
	background: color-mix(in srgb, var(--wp--preset--color--accent-2) 85%, black);
}
.bjj-hero-btn--outline {
	background: transparent;
	color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--base);
}
.bjj-hero-btn--outline:hover {
	background: rgba(255, 255, 255, 0.1);
}

.bjj-hero-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.2);
	color: var(--wp--preset--color--base);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.bjj-hero-arrow:hover {
	background: rgba(255, 255, 255, 0.35);
}
.bjj-hero-arrow--prev {
	left: 24px;
}
.bjj-hero-arrow--next {
	right: 24px;
}

.bjj-hero-dots {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
	display: flex;
	gap: 8px;
}
.bjj-hero-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 1px solid var(--wp--preset--color--base);
	background: transparent;
	padding: 0;
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.bjj-hero-dot.is-active {
	background: var(--wp--preset--color--base);
}

/* Heading 2 khối Featured Collection — số đo trực tiếp bjjfightgear.com:
   18px/weight 800/uppercase/Montserrat/margin-bottom 28px (khác hẳn size h2 mặc định của theme). */
.bjj-section-heading {
	font-size: 18px !important;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	margin-bottom: 28px;
	text-align: center;
}

/* "Khách hàng đánh giá" — chỉ hiện khi có review thật (xem functions.php
   bjj_gear_reviews_summary_shortcode), số liệu đo trực tiếp bjjfightgear.com. */
.bjj-reviews-summary {
	text-align: center;
	padding: var(--wp--preset--spacing--50, 40px) 0;
}
.bjj-reviews-summary__label {
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 800;
	font-size: 24px;
	margin: 0;
	color: var(--wp--preset--color--contrast);
}
.bjj-reviews-summary__score {
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 800;
	font-size: 62px;
	color: var(--wp--preset--color--accent-2);
	margin: 8px 0 0;
	line-height: 1;
}
.bjj-reviews-summary__count {
	margin: 4px 0 0;
	font-size: 16px;
	color: var(--wp--preset--color--contrast);
}

/* 3 thẻ review nổi bật — số đo trực tiếp bjjfightgear.com: không viền/không bóng,
   title 16px/700, body 16px/400, tên khách 16px/700, tên sản phẩm 16px/400 in nghiêng,
   tất cả màu xám #4d4d4d, padding ngang 10px mỗi thẻ. */
.bjj-review-cards {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 25px 50px;
}
.bjj-review-card {
	flex: 1 1 300px;
	padding: 0 10px;
	color: var(--wp--preset--color--accent-4);
}
.bjj-review-card__stars {
	color: var(--wp--preset--color--accent-3);
	letter-spacing: 2px;
	margin-bottom: 8px;
}
.bjj-review-card__star {
	opacity: 0.25;
}
.bjj-review-card__star.is-filled {
	opacity: 1;
}
.bjj-review-card__title {
	font-weight: 700;
	font-size: 16px;
	margin: 0;
}
.bjj-review-card__body {
	font-size: 16px;
	font-weight: 400;
	margin: 16px 0;
}
.bjj-review-card__author {
	font-weight: 700;
	font-size: 16px;
	margin: 0;
}
.bjj-review-card__product {
	font-size: 16px;
	font-style: italic;
	margin: 0;
}
.bjj-review-card__product a {
	color: inherit;
	text-decoration: none;
}
.bjj-review-card__product a:hover {
	text-decoration: underline;
}

/* Blog card — đo trực tiếp `.article-list-item` (và `li` cha của nó) trong section
   "Blog posts" trên bjjfightgear.com (getComputedStyle từng phần tử). ĐÍNH CHÍNH lần trước:
   card CÓ viền + box-shadow (đo được ở thẻ `li`, không phải ở `article` bên trong nên lần đầu
   soát nhầm là "không viền") — y hệt border/box-shadow của product card
   (`li.wc-block-product`), border-radius 0 (vuông góc), không padding ở `li` (ảnh tràn sát
   viền, không có gutter). Căn giữa toàn bộ theo chiều DỌC (ảnh trên cùng full-width, content
   bên dưới, không phải bố cục ngang ảnh-trái/chữ-phải). Ảnh KHÔNG padding/margin — chiều cao
   CỐ ĐỊNH 250px (không phải aspect-ratio khóa tỷ lệ — đo được width 434.66px/height 250px
   đúng bằng fixed height, tỷ lệ thực tế đổi theo bề rộng card chứ không giữ cố định), zoom nhẹ
   scale(1.05) 0.5s khi hover. Content padding ĐỀU 4 phía 20px (không chỉ riêng top). Tiêu đề
   18px/weight 800/uppercase/màu #1d1d1d (đúng bằng --wp--preset--color--contrast của theme),
   margin-bottom 16px là khoảng cách duy nhất tới "Đọc thêm" — không hiện ngày tháng trên card
   (chỉ hiện trên trang bài viết — khác hẳn ảnh/tên/giá của product card). */
.bjj-blog-cards {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-top: 28px;
}
.bjj-blog-card {
	flex: 1 1 300px;
	box-sizing: border-box;
	text-align: center;
	border: 1px solid rgba(128, 128, 128, 0.16);
	box-shadow: 0 1px 4px rgba(128, 128, 128, 0.11);
	border-radius: 0;
}
.bjj-blog-card__image-link {
	display: block;
	overflow: hidden; /* để clip ảnh khi zoom scale(1.05) khỏi tràn ra ngoài card */
	position: relative;
	margin: 0;
	padding: 0;
}
.bjj-blog-card__image-link img {
	display: block;
	width: 100%;
	height: 250px;
	margin: 0;
	object-fit: cover;
	transition: transform 0.5s cubic-bezier(0, 0, 0.2, 1);
}
.bjj-blog-card__image-link:hover img {
	transform: scale(1.05);
}
.bjj-blog-card__content {
	padding: 20px;
}
.bjj-blog-card__title {
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 18px;
	font-weight: 800;
	text-transform: uppercase;
	line-height: 1.3;
	margin: 0 0 16px;
}
.bjj-blog-card__title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.bjj-blog-card__title a:hover {
	text-decoration: underline;
}

/* Link mũi tên đỏ dùng chung cho "Đọc thêm" (trong blog card) và "Xem thêm" (cuối section
   blog) — đo trực tiếp bjjfightgear.com: màu accent-1, 16px, weight 400 (KHÔNG uppercase/bold
   như nút "Xem tất cả" của 2 khối Featured Collection phía trên — 2 khối đó dùng nút nền xanh
   đầy, còn "Blog posts" trên site gốc chỉ dùng link chữ đỏ có mũi tên, khác kiểu). */
.bjj-red-link {
	color: var(--wp--preset--color--accent-1);
	font-size: 16px;
	font-weight: 400;
	text-decoration: none;
}
.bjj-red-link:hover {
	text-decoration: underline;
}
.bjj-red-link::after {
	content: "\203A";
	display: inline-block;
	margin-left: 4px;
	font-weight: 700;
}