/*
Theme Name: FlameZone Astra Child
Theme URI: https://flamezone.xyz
Description: Child theme của Astra dành riêng cho website FlameZone (bán hộp quẹt/bật lửa). Mọi tùy biến CSS/PHP của dự án nằm trong theme này, không đụng vào Astra gốc. Xem knowledge/decisions/ADR-003-theme-strategy.md.
Author: FlameZone Technical Team
Template: astra
Version: 1.4.0
Text Domain: flamezone-astra-child
*/

/*
 * Sprint 3.1 — Global Design System.
 * Nguồn dữ liệu: docs/ui/global-design-system.md (trích xuất từ Astra Global Colors
 * + typography thật đang chạy trên site, không phải màu/font tự chọn mới).
 * Phạm vi: Global Style + Header + Footer. KHÔNG bao gồm Homepage/Product chi tiết (ngoài Sprint 3.1).
 */

/* ---------- 1. Design tokens ---------- */
:root {
	--fz-color-primary: var(--ast-global-color-0, #DF453E);
	--fz-color-primary-hover: var(--ast-global-color-1, #B62D25);
	--fz-color-heading: var(--ast-global-color-2, #161616);
	--fz-color-body: var(--ast-global-color-3, #4B4F58);
	--fz-color-bg: var(--ast-global-color-5, #FFFFFF);
	--fz-color-bg-alt: var(--ast-global-color-4, #F5F5F5);
	--fz-color-border: #E2E0D8;
	--fz-color-success: #2E7D32;
	--fz-color-danger: #B62D25;

	--fz-font-base: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--fz-radius: 0px;
	--fz-radius-badge: 2px;
	--fz-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	--fz-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.12);

	--fz-container-desktop: 1200px;
	--fz-bp-mobile: 544px;
	--fz-bp-tablet: 768px;
	--fz-bp-desktop: 1200px;
}

/* ---------- 2. Typography ---------- */
body, .fz-font-base {
	font-family: var(--fz-font-base);
	color: var(--fz-color-body);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--fz-font-base);
	color: var(--fz-color-heading);
}

h1 { font-size: 42px; font-weight: 700; }
h2 { font-size: 32px; font-weight: 700; }
h3 { font-size: 24px; font-weight: 600; }
h4 { font-size: 20px; font-weight: 600; }

@media (max-width: 1199px) {
	h1 { font-size: 34px; }
	h2 { font-size: 28px; }
	h3 { font-size: 22px; }
	h4 { font-size: 19px; }
}

@media (max-width: 767px) {
	h1 { font-size: 28px; }
	h2 { font-size: 24px; }
	h3 { font-size: 20px; }
	h4 { font-size: 18px; }
	body, .fz-font-base { font-size: 15px; }
}

a { color: var(--fz-color-primary); text-decoration: none; }
a:hover, a:focus { color: var(--fz-color-primary-hover); text-decoration: underline; }

/* ---------- 3. Buttons ---------- */
.fz-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.wp-block-button__link {
	font-family: var(--fz-font-base);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.2px;
	text-transform: uppercase;
	padding: 17px 38px;
	border-radius: var(--fz-radius);
	background: var(--fz-color-primary);
	color: #FFFFFF;
	border: none;
	transition: background-color 0.2s ease;
	cursor: pointer;
}
.fz-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.wp-block-button__link:hover {
	background: var(--fz-color-primary-hover);
	color: #FFFFFF;
}
.fz-btn--outline {
	background: transparent;
	border: 2px solid var(--fz-color-primary);
	color: var(--fz-color-primary);
}
.fz-btn--secondary {
	background: var(--fz-color-heading);
	color: #FFFFFF;
}

/* ---------- 4. Forms & Inputs ---------- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
select,
textarea,
.fz-input, .fz-select, .fz-textarea {
	background: var(--fz-color-bg-alt);
	border: 1px solid #D8D8D8;
	border-radius: var(--fz-radius);
	padding: 12px 16px;
	font-family: var(--fz-font-base);
	font-size: 15px;
	color: var(--fz-color-body);
}
input:focus, select:focus, textarea:focus {
	outline: none;
	border-color: var(--fz-color-primary);
}

/* ---------- 5. Badges ---------- */
.fz-badge {
	display: inline-block;
	padding: 4px 10px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	border-radius: var(--fz-radius-badge);
}
.fz-badge--new { background: var(--fz-color-heading); color: #fff; }
.fz-badge--sale,
.woocommerce span.onsale { background: var(--fz-color-primary); color: #fff; border-radius: var(--fz-radius-badge); }
.fz-badge--out-of-stock { background: #9E9E9E; color: #fff; }

/* ---------- 6. Container ---------- */
@media (min-width: 1200px) {
	.ast-container { max-width: var(--fz-container-desktop); }
}

/* ---------- 7. Header ---------- */
.ast-primary-header-bar,
#masthead {
	background: var(--fz-color-bg);
	border-bottom: 1px solid var(--fz-color-border);
}
.main-header-menu .menu-item > a {
	font-family: var(--fz-font-base);
	font-weight: 500;
	color: var(--fz-color-heading);
	text-transform: uppercase;
	font-size: 14px;
	letter-spacing: 0.3px;
}
.main-header-menu .menu-item > a:hover { color: var(--fz-color-primary); }
.ast-search-icon svg, .astra-cart-drawer-icon svg, .ast-header-account-icon svg {
	color: var(--fz-color-heading);
}

/* ---------- 8. Footer ---------- */
#colophon, .site-footer {
	background: var(--fz-color-heading);
	color: #D8D8D8;
}
#colophon a, .site-footer a { color: #FFFFFF; }
#colophon a:hover, .site-footer a:hover { color: var(--fz-color-primary); }
#colophon .widget-title, .site-footer .widget-title {
	color: #FFFFFF;
	font-family: var(--fz-font-base);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 15px;
	letter-spacing: 0.3px;
}
.ast-small-footer, .site-footer .footer-copyright-wrap {
	background: #0F0F0F;
	color: #9E9E9E;
	font-size: 13px;
}

/*
 * Sprint 3.3 — Product Detail Template.
 * Chỉ style phần tử MỚI (brand/actions-row/share/wishlist) — không ghi đè layout
 * gallery/summary 2 cột gốc của Astra+WooCommerce (đã responsive sẵn).
 * FAQ dùng chung `.fz-faq` (định nghĩa ở khối Sprint 3.4 bên dưới) — không định
 * nghĩa riêng ở đây nữa (Sprint 3.5.5: xoá bản `.woocommerce-tabs .fz-faq` cũ,
 * dead CSS từ thời FAQ còn là 1 tab WooCommerce — single-product.php override
 * không còn render WooCommerce Tabs UI từ Sprint 3.5).
 */
.fz-product-brand {
	margin: 4px 0 10px;
}
.fz-product-brand a {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	color: var(--fz-color-primary);
	border: 1px solid var(--fz-color-primary);
	padding: 3px 10px;
	border-radius: var(--fz-radius-badge);
	margin-right: 6px;
}
.fz-product-brand a:hover {
	background: var(--fz-color-primary);
	color: #fff;
	text-decoration: none;
}

.fz-buy-now {
	margin-left: 10px;
	background: transparent;
	border: 2px solid var(--fz-color-heading);
	color: var(--fz-color-heading);
}
.fz-buy-now:hover {
	background: var(--fz-color-heading);
	color: #fff;
}

.fz-product-actions-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--fz-color-border);
}
.fz-share {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
}
.fz-share__label {
	color: var(--fz-color-body);
}
.fz-share a {
	color: var(--fz-color-heading);
	text-decoration: underline;
}
.fz-wishlist {
	background: none;
	border: 1px solid var(--fz-color-border);
	padding: 8px 16px;
	font-size: 13px;
	color: var(--fz-color-body);
	cursor: not-allowed;
	border-radius: var(--fz-radius);
}

.fz-recently-viewed {
	margin-top: 40px;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding: 0 24px;
}

@media (max-width: 480px) {
	.fz-product-actions-row {
		flex-direction: column;
		align-items: flex-start;
	}
	.fz-buy-now {
		margin-left: 0;
		margin-top: 8px;
		display: block;
		width: 100%;
	}
}

/*
 * Sprint 3.4 — Category Template + shared utility classes
 * (một số class dưới đây trước đó chỉ tồn tại inline trong nội dung Homepage —
 * nay đưa vào style.css chung để Category Template và các trang sau tái sử dụng
 * được, không phải viết lại CSS mỗi lần).
 */

/* ---------- Shared section/utility ---------- */
.fz-section {
	max-width: 1200px;
	margin: 0 auto;
	padding: 40px 24px;
}
.fz-h2 {
	font-size: 28px;
	font-weight: 700;
	color: var(--fz-color-heading);
	margin: 0 0 20px;
}
.fz-eyebrow {
	color: var(--fz-color-primary);
	text-transform: uppercase;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1px;
	margin: 0 0 8px;
}
.fz-lead {
	font-size: 15px;
	color: var(--fz-color-body);
	margin: 0 0 24px;
	max-width: 640px;
}
.fz-grid-4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
.fz-grid-2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}
.fz-card {
	text-decoration: none;
	color: inherit;
	display: block;
}
.fz-ph {
	aspect-ratio: 1/1;
	background: linear-gradient(145deg, #1A1A1A, #3A1608);
}
.fz-related-cat__name {
	font-weight: 600;
	font-size: 14px;
	color: var(--fz-color-heading);
	margin: 10px 0 0;
}
.fz-placeholder-note {
	color: #9E9E9E;
	font-style: italic;
	font-size: 14px;
}
.fz-faq details {
	border-bottom: 1px solid var(--fz-color-border);
	padding: 14px 0;
}
.fz-faq summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--fz-color-heading);
	list-style: none;
	display: flex;
	justify-content: space-between;
}
.fz-faq summary::-webkit-details-marker { display: none; }
.fz-faq summary::after { content: '+'; font-size: 18px; color: var(--fz-color-primary); }
.fz-faq details[open] summary::after { content: '\2013'; }
.fz-faq p { color: var(--fz-color-body); font-size: 14px; margin: 10px 0 0; line-height: 1.6; }

@media (max-width: 1024px) {
	.fz-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.fz-grid-4, .fz-grid-2 { grid-template-columns: 1fr; }
}

/* ---------- Category Banner ---------- */
.fz-category-banner {
	width: 100%;
	aspect-ratio: 16/4;
	background-size: cover;
	background-position: center;
	background-color: #1A1A1A;
}
.fz-category-banner[data-placeholder="1"] {
	background-image: linear-gradient(120deg, #1A1A1A 0%, #3A1608 100%);
}
@media (max-width: 767px) {
	.fz-category-banner { aspect-ratio: 16/7; }
}

/* ---------- Filters ---------- */
.fz-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	max-width: 1200px;
	margin: 0 auto 24px;
	padding: 20px 24px;
	background: var(--fz-color-bg-alt);
}
.fz-filters__group {
	min-width: 180px;
}
.fz-filters__label {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	color: var(--fz-color-heading);
	margin: 0 0 10px;
}
.fz-filters__group .price_slider_wrapper,
.fz-filters__group .woocommerce-widget-layered-nav-list {
	font-size: 13px;
}
.fz-filters__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.fz-filters__list a {
	display: inline-block;
	font-size: 12px;
	padding: 4px 10px;
	border: 1px solid var(--fz-color-border);
	color: var(--fz-color-body);
	border-radius: var(--fz-radius-badge);
	text-decoration: none;
}
.fz-filters__list a.is-active,
.fz-filters__list a:hover {
	background: var(--fz-color-primary);
	border-color: var(--fz-color-primary);
	color: #fff;
}

/* ---------- SEO Text ---------- */
.fz-category-seo-text__content {
	font-size: 14px;
	color: var(--fz-color-body);
	line-height: 1.7;
}

/*
 * Fix: woocommerce_before_main_content/woocommerce_after_main_content render
 * inside Astra's flex containers (`.ast-container`, `.ast-woocommerce-container`)
 * cùng hàng với các flex item khác (content column/sidebar column) — buộc các
 * section tuỳ biến chiếm trọn 1 hàng để không bị xếp cạnh nhau.
 */
.fz-category-banner,
.fz-filters,
.fz-category-seo-text,
.fz-faq,
.fz-related-categories {
	flex: 0 0 100% !important;
	max-width: 100% !important;
	width: 100% !important;
	align-self: flex-start !important;
}
/*
 * `.ast-container`/`.ast-woocommerce-container` mặc định là `flex-wrap: nowrap`
 * — flex-basis 100% ở trên chỉ khiến các section tuỳ biến bị đẩy sang phải
 * (tràn ngang) thay vì xuống dòng. Buộc `flex-wrap: wrap` NHƯNG chỉ trong phạm vi
 * trang shop/category archive (`.ast-woo-shop-archive`, class riêng của Astra
 * cho các trang này) để không ảnh hưởng single product/cart/checkout hay trang khác.
 */
body.ast-woo-shop-archive .ast-container,
body.ast-woo-shop-archive .ast-woocommerce-container {
	flex-wrap: wrap !important;
}

/*
 * Sprint 3.5 — Product Detail Template.
 * Áp dụng ngay từ đầu cùng 1 lớp sửa flex-container như Sprint 3.4 phát hiện
 * (Astra dùng flex nowrap cho `.ast-container`/`.ast-woocommerce-container`),
 * scope theo `body.single-product` để không ảnh hưởng category/shop archive.
 */
body.single-product .ast-container,
body.single-product .ast-woocommerce-container {
	flex-wrap: wrap !important;
}
.fz-product,
.fz-product__details,
.fz-product-cta,
body.single-product .related.products,
body.single-product .up-sells.products,
body.single-product .fz-recently-viewed {
	flex: 0 0 100% !important;
	max-width: 100% !important;
	width: 100% !important;
	align-self: flex-start !important;
}

.fz-product {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 32px 24px 0;
	align-items: start;
}
.fz-product__gallery img {
	width: 100%;
	height: auto;
	display: block;
}
.fz-product__summary {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.fz-product-hero__title {
	margin: 8px 0;
}
.fz-product-summary__price {
	font-size: 26px;
	font-weight: 700;
	color: var(--fz-color-primary);
}
.fz-product-summary__stock {
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
}
.fz-product-summary__excerpt {
	font-size: 14px;
	color: var(--fz-color-body);
	line-height: 1.6;
}
.fz-product-attributes {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 4px;
}
.fz-product-attributes__badge {
	font-size: 13px;
	padding: 5px 12px;
	background: var(--fz-color-bg-alt);
	border-radius: var(--fz-radius-badge);
	color: var(--fz-color-body);
}
.fz-product__details {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}
.fz-product-description__content,
.fz-product-specifications table {
	font-size: 14px;
	color: var(--fz-color-body);
	line-height: 1.7;
}

@media (max-width: 900px) {
	.fz-product {
		grid-template-columns: 1fr;
	}
}