/**
 * AUDIMAC Product Detail — CSS riêng, chỉ enqueue trên trang Product.
 * ----------------------------------------------------------------------
 * File: assets/css/product-detail.css
 * Phụ thuộc: tokens/base/layout/components.css đã load trước.
 *
 * QUAN TRỌNG: không sửa file theme cha — toàn bộ selector dưới đây target
 * đúng class native của theme (c-product__*) chỉ để RESTYLE hiển thị
 * (không đổi HTML/markup của parent theme), kết hợp với nội dung được
 * chèn thêm qua PHP (audm_hero_buffer_end() trong inc/product-detail.php).
 */

/* ============================================================
   1. Ẩn phần tử "ecommerce retail" không phù hợp B2B
   ============================================================ */
.c-product-features {
	display: none;
}
.c-product__wishlist {
	display: none;
}

/* ============================================================
   1c. Ẩn footer "Advert Bar" (post 1688, gán qua Customizer
   footer_page) trên trang Product (2026-09-24)
   ----------------------------------------------------------------------
   Toàn bộ nội dung <footer class="c-footer"> ở site này CHỈ có đúng 1
   khối quảng cáo link /lien-he (không có nav/copyright nào khác trong
   đó) — không khớp mockup Product Master đã duyệt (mockup không có CTA
   thứ 3 ở cuối trang, chỉ có audm-product-cta + audm-sticky-cta). Chỉ
   ẩn trên trang Product (`body.single-product`) — các trang khác (Trang
   chủ, Category, Blog...) vẫn hiển thị bình thường, không đụng gì tới
   Customizer/Elementor content gốc.
   ============================================================ */
body.single-product .c-footer {
	display: none !important;
}

/* ============================================================
   2. Hero — restyle cột thông tin (giữ nguyên gallery native)
   ============================================================ */
.c-product__title.c-product__title {
	font-family: var( --audm-font-family );
	font-weight: var( --audm-font-weight-bold );
	color: var( --audm-color-dark );
	line-height: var( --audm-line-height-tight );
	font-size: var( --audm-font-size-3xl );
	margin: var( --audm-space-2 ) 0 var( --audm-space-3 );
}

.audm-product-hero__eyebrow {
	display: inline-block;
	font-size: var( --audm-font-size-sm );
	font-weight: var( --audm-font-weight-semibold );
	letter-spacing: 0.04em;
	color: var( --audm-color-primary );
	margin-top: var( --audm-space-4 );
}

.c-product__short-description {
	font-size: var( --audm-font-size-md );
	color: var( --audm-color-gray );
	line-height: var( --audm-line-height-relaxed );
}

/* ============================================================
   2-cột Hero: Mô tả | Checklist (Final Polish 2026-09-24)
   ----------------------------------------------------------------------
   Trước đây mô tả + checklist xếp dọc thành 1 cột dài — theo yêu cầu
   trực tiếp (kèm ảnh DevTools), bọc lại thành 2 cột ngang: mô tả thật
   bên trái, checklist ✓ bên phải. CTA vẫn nằm full-width NGAY SAU khối
   này (không đưa vào 2 cột) — xem audm_hero_buffer_end().
   ============================================================ */
.audm-product-hero__two-col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var( --audm-space-6 );
	margin: var( --audm-space-5 ) 0;
	padding: var( --audm-space-5 ) 0;
	border-top: 1px solid var( --audm-color-border );
	border-bottom: 1px solid var( --audm-color-border );
}
.audm-product-hero__two-col-desc .c-product__short-description {
	margin: 0;
}
.audm-product-hero__two-col-checklist {
	padding-left: var( --audm-space-6 );
	border-left: 1px solid var( --audm-color-border );
}

.audm-product-hero__checklist {
	list-style: none;
	margin: 0;
	display: grid;
	gap: var( --audm-space-3 );
}
.audm-product-hero__checklist li {
	display: flex;
	align-items: flex-start;
	gap: var( --audm-space-2 );
	font-size: var( --audm-font-size-sm );
	color: var( --audm-color-dark );
	font-weight: var( --audm-font-weight-medium );
}
.audm-product-hero__check {
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	color: var( --audm-color-primary );
}

.audm-product-hero__cta {
	margin-top: var( --audm-space-5 );
}

/* ============================================================
   1e. TẮT cơ chế chia 2 cột con bên trong cột Info (BUG gốc gây
   "trống bên phải" — phát hiện qua screenshot thật 2026-09-24)
   ----------------------------------------------------------------------
   Theme (layout-3) tự chia `.c-product__summary` (cột phải của Hero,
   TRONG .c-product__col-2) thành 2 cột con `.c-product__col-inner-1`/
   `-2` (50%/50%, có cả đường kẻ dọc `::after`) — đây KHÔNG phải
   "Gallery trái/Info phải" như brief yêu cầu, mà là chia đôi NGAY BÊN
   TRONG cột Info. Toàn bộ nội dung (eyebrow/H1/mô tả/checklist/CTA) đổ
   hết vào col-inner-1 (trái), còn col-inner-2 (phải) chỉ có Share + SKU
   (đã ẩn) → trống rõng, đúng như ảnh chụp user gửi.
   FIX 2 (2026-09-24): bản vá lần 1 dùng cùng độ đặc hiệu selector với
   rule gốc — không đủ, vì file gốc `wp-content/uploads/moderno/min.css`
   (handle `ideapark-core-css`) nạp SAU `product-detail.css` trong
   <head> (đã xác nhận qua thứ tự link thật), nên rule gốc thắng dù
   viết sau trong code. Bắt buộc dùng !important cho các thuộc tính cốt
   lõi (display/width) — đây là override 1 rule cụ thể của theme cha,
   không sửa file theme cha, không lạm dụng !important ở nơi khác.
   ============================================================ */
.c-product--layout-3 .c-product__summary {
	display: block !important;
}
.c-product--layout-3 .c-product__summary::after {
	display: none !important;
}
.c-product--layout-3 .c-product__col-inner-1,
.c-product--layout-3 .c-product__col-inner-2 {
	width: 100% !important;
	flex: none !important;
	/* FIX 3 (2026-09-24): bản vá lần 2 lỡ set padding-left/right:0, làm
	   nội dung dính sát mép trái (đúng lỗi user chụp ảnh phản hồi) — theme
	   gốc dùng biến responsive --tab-col-outisde-padding/--tab-col-inisde-
	   padding (95px desktop → 30px → 20px theo breakpoint). Khôi phục
	   đúng 2 biến đó thay vì fix cứng 1 giá trị, giữ đúng responsive gốc. */
	padding-left: var( --tab-col-outisde-padding ) !important;
	padding-right: var( --tab-col-outisde-padding ) !important;
}
.c-product--layout-3 .c-product__col-inner-2 {
	margin-top: var( --audm-space-4 ) !important;
}

/* ============================================================
   1d. Ẩn SKU/Category kiểu WooCommerce mặc định khỏi Hero
   ----------------------------------------------------------------------
   Category thật đã hiển thị qua eyebrow (audm-product-hero__eyebrow) phía
   trên H1; Model thật (nếu có) hiển thị lại trong bảng "Thông số kỹ
   thuật" (Section 05, field đầu tiên) — không mất dữ liệu, chỉ đổi nơi
   trình bày cho đúng kiểu metadata thiết kế thay vì visual ecommerce.
   ============================================================ */
.product_meta {
	display: none;
}

/* Gallery — bo góc nhẹ cho đồng nhất Design System, không đổi lightbox/zoom */
.c-product__gallery,
.c-product__slider-item img {
	border-radius: var( --audm-radius-md );
}

/* ============================================================
   1f. Product Highlights — bản compact lấp khoảng trống dưới gallery
   (Final Polish 2026-09-24 — xem audm_hero_buffer_end() $compact)
   ============================================================ */
.audm-product-highlight-fill {
	margin-top: var( --audm-space-5 );
	padding-top: var( --audm-space-5 );
	border-top: 1px solid var( --audm-color-border );
	display: grid;
	gap: var( --audm-space-3 );
}
.audm-product-highlight-fill__item {
	display: flex;
	align-items: flex-start;
	gap: var( --audm-space-3 );
}
.audm-product-highlight-fill__icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: var( --audm-radius-md );
	background: var( --audm-color-primary-light );
	color: var( --audm-color-primary );
}
.audm-product-highlight-fill__icon svg {
	width: 16px;
	height: 16px;
}
.audm-product-highlight-fill__text {
	font-size: var( --audm-font-size-sm );
	color: var( --audm-color-gray );
	line-height: var( --audm-line-height-base );
}
.audm-product-highlight-fill__text strong {
	display: block;
	color: var( --audm-color-dark );
	font-weight: var( --audm-font-weight-semibold );
	letter-spacing: 0.02em;
}

/* ============================================================
   2b. Section 03 — "Product Highlights" (không còn dùng ở Product Detail
   — đã chuyển vào audm-product-highlight-fill trong Hero — giữ CSS lại
   vì hàm audm_product_section_highlight_cards() vẫn còn chế độ không
   compact, có thể tái dùng nơi khác sau này)
   ============================================================ */
.audm-product-highlight-cards__grid {
	grid-template-columns: repeat( auto-fit, minmax( 180px, 1fr ) );
}
.audm-product-highlight-card {
	display: flex;
	flex-direction: column;
	gap: var( --audm-space-2 );
	padding: var( --audm-space-5 );
	background: var( --audm-color-bg-alt );
	border-radius: var( --audm-radius-lg );
}
.audm-product-highlight-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var( --audm-radius-md );
	background: var( --audm-color-primary-light );
	color: var( --audm-color-primary );
}
.audm-product-highlight-card__icon svg {
	width: 18px;
	height: 18px;
}
.audm-product-highlight-card__title {
	font-size: var( --audm-font-size-sm );
	font-weight: var( --audm-font-weight-bold );
	letter-spacing: 0.03em;
	color: var( --audm-color-dark );
}
.audm-product-highlight-card__desc {
	font-size: var( --audm-font-size-sm );
	color: var( --audm-color-gray );
}

/* ============================================================
   3. Section 04 — "Cấu tạo chi tiết" (card/grid tĩnh, không accordion)
   ============================================================ */
.audm-product-explorer__subheading {
	color: var( --audm-color-gray-light );
	margin: var( --audm-space-2 ) 0 var( --audm-space-5 );
}
.audm-product-explorer__list {
	margin-top: 0;
}

.audm-product-explorer__item {
	display: flex;
	flex-direction: column;
	background: var( --audm-color-white );
	border: 1px solid var( --audm-color-border );
	border-radius: var( --audm-radius-lg );
	overflow: hidden;
}

.audm-product-explorer__media {
	background: var( --audm-color-bg-alt );
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.audm-product-explorer__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: var( --audm-space-5 );
}

.audm-product-explorer__head {
	display: flex;
	align-items: center;
	gap: var( --audm-space-3 );
	padding: var( --audm-space-4 ) var( --audm-space-5 ) 0;
}

.audm-product-explorer__number {
	flex: none;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var( --audm-radius-full );
	background: var( --audm-color-primary );
	color: var( --audm-color-white );
	font-size: var( --audm-font-size-xs );
	font-weight: var( --audm-font-weight-bold );
}

.audm-product-explorer__name {
	font-weight: var( --audm-font-weight-semibold );
	color: var( --audm-color-dark );
	letter-spacing: 0.02em;
}

.audm-product-explorer__desc {
	margin: var( --audm-space-3 ) 0 0;
	padding: 0 var( --audm-space-5 ) var( --audm-space-5 );
	color: var( --audm-color-gray );
	line-height: var( --audm-line-height-relaxed );
}

/* ============================================================
   3b. Section 07 — "Bản vẽ kích thước"
   ============================================================ */
.audm-product-dimension__media {
	margin: var( --audm-space-4 ) 0 var( --audm-space-5 );
	border-radius: var( --audm-radius-lg );
	overflow: hidden;
	background: var( --audm-color-bg-alt );
}

/* ============================================================
   4. Section 08 — "Ứng dụng"
   ----------------------------------------------------------------------
   FINAL VISUAL POLISH (2026-09-24): nâng từ badge nhỏ lên card, cùng
   ngôn ngữ visual với Section 03 Product Highlights. KHÔNG dùng ảnh vì
   chưa có ảnh thật cho từng loại công trình (product_application taxonomy
   0 dữ liệu, đã xác nhận trực tiếp trong DB) — card typography sạch thay
   vì bịa ảnh placeholder.
   ============================================================ */
.audm-product-applications__desc {
	color: var( --audm-color-gray-light );
	margin: var( --audm-space-2 ) 0 var( --audm-space-4 );
}
.audm-product-application-cards__grid {
	grid-template-columns: repeat( auto-fit, minmax( 150px, 1fr ) );
}
.audm-product-application-card {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 72px;
	padding: var( --audm-space-4 );
	background: var( --audm-color-bg-alt );
	border-radius: var( --audm-radius-lg );
	border-top: 2px solid var( --audm-color-primary );
}
.audm-product-application-card__label {
	font-size: var( --audm-font-size-sm );
	font-weight: var( --audm-font-weight-semibold );
	color: var( --audm-color-dark );
}

/* ============================================================
   5. Responsive
   ============================================================ */
@media ( max-width: 1024px ) {
	.audm-product-highlight-cards__grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 768px ) {
	.audm-product-hero__two-col {
		grid-template-columns: 1fr;
		gap: var( --audm-space-4 );
	}
	.audm-product-hero__two-col-checklist {
		padding-left: 0;
		padding-top: var( --audm-space-4 );
		border-left: none;
		border-top: 1px solid var( --audm-color-border );
	}
}

@media ( max-width: 480px ) {
	.audm-product-hero__cta {
		flex-direction: column;
		align-items: stretch;
	}
	.audm-product-hero__cta .audm-btn {
		width: 100%;
		text-align: center;
	}
}