/*
 * Archetype "bold-industrial" — showroom, tương phản cao, góc vuông.
 * Tham chiếu tinh thần: Woodmart demo motorcycle. Hợp cả ngành catalog-only
 * (ô tô, xe máy): nhấn vào ảnh lớn và thông số, không nhấn vào nút mua.
 *
 * Chỉ restyle markup có sẵn, chỉ dùng token --bk-*.
 */

body.wic-skin-arch-bold-industrial {
	--bk-radius: 0;
	--bk-radius-lg: 0;
	--bk-btn-radius: 0;
}

/* --- Header tối, đặc ----------------------------------------------------- */

body.wic-skin-arch-bold-industrial .site-header {
	background: var(--bk-cocoa);
	border-bottom-color: transparent;
}

body.wic-skin-arch-bold-industrial .site-branding__text,
body.wic-skin-arch-bold-industrial .site-branding__name,
body.wic-skin-arch-bold-industrial .site-header__icon-btn,
body.wic-skin-arch-bold-industrial .site-header__toggle { color: var(--bk-cream); }

body.wic-skin-arch-bold-industrial .site-branding__name {
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

body.wic-skin-arch-bold-industrial .site-header__icon-btn:hover { color: var(--bk-gold); }

/* Trên mobile menu là panel trượt nền sáng — giữ nguyên. Chỉ đổi khi menu
   nằm ngang bên trong header tối. */
@media (min-width: 992px) {
	body.wic-skin-arch-bold-industrial .site-nav__list a {
		color: var(--bk-cream);
		font-size: 0.875rem;
		font-weight: 600;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}

	body.wic-skin-arch-bold-industrial .site-nav__list a:hover,
	body.wic-skin-arch-bold-industrial .site-nav__list .current-menu-item > a { color: var(--bk-gold); }

	body.wic-skin-arch-bold-industrial .site-nav__phone { color: var(--bk-cream); }
}

/* --- Hero: nhãn là khối màu nhấn, tiêu đề in hoa ------------------------- */

body.wic-skin-arch-bold-industrial .hero {
	min-height: clamp(460px, 72vh, 760px);
	background: var(--bk-cocoa);
}

body.wic-skin-arch-bold-industrial .hero--cover.hero--has-image .hero__media::after {
	background: linear-gradient(90deg, rgb(0 0 0 / 82%) 0%, rgb(0 0 0 / 55%) 50%, rgb(0 0 0 / 20%) 100%);
}

/* Biến thể poster tắt ::after và dùng .hero__scrim riêng — đè lại cho khớp độ
   tương phản cao của archetype này, nếu không poster ăn gradient nhạt mặc định
   và chữ in hoa cỡ lớn mất nền. */
body.wic-skin-arch-bold-industrial .hero--poster .hero__scrim {
	background: linear-gradient(to top, rgb(0 0 0 / 92%) 0%, rgb(0 0 0 / 62%) 42%, rgb(0 0 0 / 10%) 82%);
}

body.wic-skin-arch-bold-industrial .hero__inner,
body.wic-skin-arch-bold-industrial .hero__title,
body.wic-skin-arch-bold-industrial .hero__text { color: var(--bk-cream); }

body.wic-skin-arch-bold-industrial .hero__eyebrow {
	display: inline-block;
	padding: 0.25rem 0.7rem;
	background: var(--bk-gold);
	color: var(--bk-cream);
	font-size: 0.75rem;
	letter-spacing: 0.18em;
}

body.wic-skin-arch-bold-industrial .hero__title {
	font-size: clamp(2.25rem, 7vw, 4.25rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	text-transform: uppercase;
}

/* --- Tiêu đề khối: gạch dọc dày ----------------------------------------- */

body.wic-skin-arch-bold-industrial .section__title {
	padding-left: 0.85rem;
	border-left: 5px solid var(--bk-gold);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* --- Danh mục: khung vuông viền đậm ------------------------------------- */

body.wic-skin-arch-bold-industrial .category-card a {
	border-width: 2px;
	border-color: var(--bk-line);
}

body.wic-skin-arch-bold-industrial .category-card a:hover {
	border-color: var(--bk-gold);
	transform: none;
}

body.wic-skin-arch-bold-industrial .category-card__media { border-radius: 0; }

body.wic-skin-arch-bold-industrial .category-card__name {
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* --- Card sản phẩm: lưới dày, giá lớn ----------------------------------- */

@media (min-width: 1100px) {
	body.wic-skin-arch-bold-industrial .woocommerce ul.products { grid-template-columns: repeat(4, 1fr); gap: 1rem; }
}

body.wic-skin-arch-bold-industrial .woocommerce ul.products li.product {
	border-width: 2px;
	border-color: var(--bk-line);
	text-align: left;
}

body.wic-skin-arch-bold-industrial .woocommerce ul.products li.product:hover {
	border-color: var(--bk-cocoa);
	transform: none;
}

body.wic-skin-arch-bold-industrial .woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-weight: 700;
	text-transform: uppercase;
}

body.wic-skin-arch-bold-industrial .woocommerce ul.products li.product .price {
	color: var(--bk-berry);
	font-size: 1.125rem;
	font-weight: 700;
}

body.wic-skin-arch-bold-industrial .product-badge {
	font-weight: 700;
	letter-spacing: 0.1em;
}

/* --- Giới thiệu + CTA --------------------------------------------------- */

body.wic-skin-arch-bold-industrial .cta { border-top: 5px solid var(--bk-gold); }

body.wic-skin-arch-bold-industrial .cta__title {
	font-weight: 700;
	text-transform: uppercase;
}