/* ==========================================================================
   [DPS MODULAR ARCHITECTURE] - Native WooCommerce Category Archive Layout CSS
   File: assets/css/archive-product.css
   Mục đích: 
     - Thiết kế giao diện danh mục sản phẩm chuẩn Bách Hóa Xanh / Kamereo
     - Triệt tiêu Beige Banner khổng lồ và tiêu đề/breadcrumb lặp lại
     - Grid 5 cột Desktop (1240px) và 3 cột Mobile (390px)
     - Dải Subcategory Pills cuộn ngang mượt mà
   ========================================================================== */

/* 1. Triệt tiêu vĩnh viễn Beige Banner khổng lồ của Freshio trên mọi trang danh mục */
.archive.woocommerce .freshio-breadcrumb,
.tax-product_cat .freshio-breadcrumb,
.post-type-archive-product .freshio-breadcrumb,
body.tax-product_cat .freshio-breadcrumb,
body.post-type-archive-product .freshio-breadcrumb {
	display: none !important;
	height: 0 !important;
	overflow: hidden !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
}

/* 2. Triệt tiêu Sidebar cũ và toolbar cũ của Freshio */
.archive.woocommerce #secondary,
.tax-product_cat #secondary,
.post-type-archive-product #secondary,
.archive.woocommerce .freshio-sorting,
.tax-product_cat .freshio-sorting,
.archive.woocommerce .freshio-products-header,
.tax-product_cat .freshio-products-header {
	display: none !important;
}

/* Đảm bảo content full-width 100% không bị co ép bởi sidebar 25% */
.archive.woocommerce #primary,
.tax-product_cat #primary,
.post-type-archive-product #primary {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.archive.woocommerce .site-content,
.tax-product_cat .site-content {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

.archive.woocommerce .site-content > .col-full,
.tax-product_cat .site-content > .col-full {
	padding: 0 !important;
	max-width: 100% !important;
}

/* 3. Bố Cục Trang Danh Mục Chuẩn Bách Hóa Xanh */
.ksf-archive-page-wrap {
	background: #f8fafc;
	min-height: 80vh;
	padding: 16px 0 44px 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.ksf-archive-container {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 16px;
	box-sizing: border-box;
}

/* Breadcrumb thanh mảnh hiện đại */
.ksf-archive-breadcrumb-bar {
	margin-bottom: 12px;
}

.ksf-archive-breadcrumb-bar .woocommerce-breadcrumb {
	font-size: 13px !important;
	line-height: 1.4 !important;
	color: #64748b !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
}

.ksf-archive-breadcrumb-bar .woocommerce-breadcrumb a {
	color: #008848 !important;
	text-decoration: none !important;
	font-weight: 500 !important;
}

.ksf-archive-breadcrumb-bar .woocommerce-breadcrumb a:hover {
	text-decoration: underline !important;
}

.ksf-archive-breadcrumb-bar .ksf-bc-sep {
	color: #cbd5e1;
	margin: 0 4px;
}

/* 4. Header Danh Mục (Icon + Tiêu Đề H1 + Badge Số Lượng + Sắp Xếp) */
.ksf-archive-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	background: #ffffff;
	border-radius: 12px;
	padding: 14px 18px;
	border: 1px solid #e2e8f0;
	margin-bottom: 14px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.ksf-archive-title-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.ksf-archive-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: #f0fdf4;
	color: #008848;
	border: 1px solid #bbf7d0;
}

.ksf-archive-title {
	font-size: 20px !important;
	font-weight: 800 !important;
	color: #0f172a !important;
	margin: 0 !important;
	line-height: 1.25 !important;
	text-transform: capitalize !important;
}

.ksf-archive-badge-count {
	display: inline-flex;
	align-items: center;
	font-size: 12px;
	font-weight: 700;
	color: #008848;
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	padding: 3px 10px;
	border-radius: 20px;
}

/* Ô Chọn Sắp Xếp */
.ksf-archive-sorting-wrap .woocommerce-ordering {
	margin: 0 !important;
	float: none !important;
}

.ksf-archive-sorting-wrap select.orderby {
	height: 36px !important;
	border-radius: 8px !important;
	border: 1px solid #cbd5e1 !important;
	background-color: #ffffff !important;
	font-size: 13px !important;
	padding: 0 12px !important;
	color: #334155 !important;
	font-weight: 600 !important;
	outline: none !important;
	cursor: pointer !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

.ksf-archive-sorting-wrap select.orderby:focus {
	border-color: #008848 !important;
}

/* Mô tả danh mục nếu có */
.ksf-archive-desc {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	padding: 12px 16px;
	margin-bottom: 14px;
	font-size: 13.5px;
	line-height: 1.5;
	color: #475569;
}

/* 5. Subcategory Pills Ribbon (Cuộn ngang 1 chạm) */
.ksf-archive-pills-bar {
	margin-bottom: 14px;
}

.ksf-archive-pills-scroll {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding-bottom: 4px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.ksf-archive-pills-scroll::-webkit-scrollbar {
	display: none;
}

.ksf-archive-pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 7px 14px;
	border-radius: 20px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	color: #334155;
	font-size: 12.5px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: all 0.15s ease;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.ksf-archive-pill:hover {
	border-color: #008848;
	color: #008848;
	background: #f0fdf4;
}

.ksf-archive-pill.is-active {
	background: #008848;
	border-color: #008848;
	color: #ffffff;
}

.ksf-archive-pill.is-active .ksf-pill-count {
	color: #e2e8f0;
}

.ksf-archive-pill .ksf-pill-count {
	font-size: 11px;
	color: #94a3b8;
	font-weight: 500;
}

/* 6. Lưới Sản Phẩm Kệ Hàng Chuẩn Bách Hóa Xanh (5 Cột Desktop, 3 Cột Mobile) */
.ksf-archive-shelf {
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 0 24px 0 !important;
	box-shadow: none !important;
	border-radius: 0 !important;
}

.ksf-archive-shelf ul.products {
	display: grid !important;
	grid-template-columns: repeat(5, 1fr) !important;
	gap: 12px !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

/* Card Sản Phẩm kế thừa trọn vẹn từ shelf.css */
.ksf-archive-shelf ul.products li.product {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	box-sizing: border-box !important;
	display: flex !important;
}

/* 7. Phân Trang Hiện Đại */
.ksf-archive-pagination-wrap {
	display: flex;
	justify-content: center;
	margin-top: 24px;
	padding-top: 16px;
}

.ksf-archive-pagination-wrap .woocommerce-pagination ul {
	display: inline-flex !important;
	gap: 6px !important;
	border: none !important;
	background: transparent !important;
	padding: 0 !important;
	margin: 0 !important;
	list-style: none !important;
}

.ksf-archive-pagination-wrap .woocommerce-pagination ul li {
	border: none !important;
	margin: 0 !important;
}

.ksf-archive-pagination-wrap .woocommerce-pagination ul li a,
.ksf-archive-pagination-wrap .woocommerce-pagination ul li span {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 36px !important;
	height: 36px !important;
	padding: 0 10px !important;
	border-radius: 8px !important;
	border: 1px solid #e2e8f0 !important;
	background: #ffffff !important;
	color: #334155 !important;
	font-size: 13.5px !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	box-sizing: border-box !important;
	transition: all 0.15s ease !important;
}

.ksf-archive-pagination-wrap .woocommerce-pagination ul li span.current {
	background: #008848 !important;
	color: #ffffff !important;
	border-color: #008848 !important;
}

.ksf-archive-pagination-wrap .woocommerce-pagination ul li a:hover {
	background: #f0fdf4 !important;
	border-color: #008848 !important;
	color: #008848 !important;
}

/* 8. Empty State nếu danh mục trống */
.ksf-archive-empty {
	background: #ffffff;
	border-radius: 12px;
	padding: 50px 20px;
	text-align: center;
	border: 1px solid #e2e8f0;
}

.ksf-empty-icon {
	color: #94a3b8;
	margin-bottom: 12px;
}

.ksf-archive-empty h3 {
	font-size: 18px;
	font-weight: 700;
	color: #1e293b;
	margin: 0 0 8px 0;
}

.ksf-archive-empty p {
	font-size: 14px;
	color: #64748b;
	margin: 0 0 18px 0;
}

.ksf-empty-home-btn {
	display: inline-flex;
	align-items: center;
	padding: 10px 24px;
	background: #008848;
	color: #ffffff !important;
	font-size: 13.5px;
	font-weight: 700;
	border-radius: 8px;
	text-decoration: none;
	transition: background 0.15s ease;
}

.ksf-empty-home-btn:hover {
	background: #00703c;
}

/* === Responsive Tablet (<= 1024px) === */
@media (max-width: 1024px) {
	.ksf-archive-shelf ul.products {
		grid-template-columns: repeat(4, 1fr) !important;
		gap: 10px !important;
	}
}

/* === Responsive Mobile (<= 768px) === */
@media (max-width: 768px) {
	.ksf-archive-page-wrap {
		padding: 10px 0 32px 0;
	}

	.ksf-archive-container {
		padding: 0 10px;
	}

	.ksf-archive-header {
		padding: 10px 12px;
		margin-bottom: 10px;
	}

	.ksf-archive-title {
		font-size: 16px !important;
	}

	.ksf-archive-icon {
		width: 32px;
		height: 32px;
	}

	.ksf-archive-badge-count {
		font-size: 11px;
		padding: 2px 7px;
	}

	.ksf-archive-sorting-wrap {
		width: 100%;
	}

	.ksf-archive-sorting-wrap select.orderby {
		width: 100% !important;
		height: 34px !important;
		font-size: 12.5px !important;
	}

	/* Grid 3 Cột Chuẩn Bách Hóa Xanh Trên Mobile */
	.ksf-archive-shelf ul.products {
		grid-template-columns: repeat(3, 1fr) !important;
		gap: 6px !important;
	}
}