/* ==========================================================================
   BrickCo - shop.css (Cửa hàng, danh mục sản phẩm, tìm kiếm sản phẩm)
   ========================================================================== */

.shop-main { max-width:var(--max-w); min-height:calc(100vh - 4rem); margin:0 auto; padding:1rem 0.5rem 2rem; }
.shop-main > .woocommerce-notices-wrapper { margin-bottom:0.75rem; }

/* ===== Mobile: hàng danh mục cuộn ngang ===== */
.shop-chips { margin-bottom:0.75rem; }
.shop-chips-row { display:flex; gap:0.5rem; padding-bottom:0.125rem; overflow-x:auto; scrollbar-width:none; }
.shop-chips-row::-webkit-scrollbar { display:none; }
.shop-chips-row.is-sub { margin-top:0.5rem; }
.shop-chip { display:flex; flex-shrink:0; align-items:center; gap:0.25rem; padding:0.375rem 0.875rem; border:1px solid var(--gray-200); border-radius:9999px; background:var(--white); color:var(--gray-700); font-size:0.8125rem; font-weight:500; white-space:nowrap; transition:background .15s, border-color .15s, color .15s; }
.shop-chip svg { color:var(--gray-500); }
.shop-chip.is-active { border-color:var(--orange-500); background:var(--orange-500); color:var(--white); }
.shop-chip.is-active svg { color:var(--white); }
.shop-chip.is-sub { padding:0.25rem 0.75rem; border-color:var(--orange-200); background:transparent; color:var(--orange-700); font-size:0.75rem; }
.shop-chip.is-sub.is-active { background:var(--orange-100); }

/* ===== Bố cục ===== */
.shop-layout { display:block; }

/* ===== Thanh danh mục (tablet trở lên) ===== */
.shop-sidebar { display:none; }
.shop-sidebar-head { display:flex; align-items:center; gap:0.5rem; padding:1rem; background:var(--white); color:var(--orange-500); }
.shop-sidebar-head h2 { font-size:1rem; font-weight:700; color:var(--gray-900); }
.shop-sidebar-body { display:flex; flex-direction:column; gap:0.75rem; padding:0.75rem; }
.shop-cat-count { font-weight:400; color:var(--gray-400); }

.shop-cat-all { display:flex; align-items:center; justify-content:space-between; padding:1rem; border-radius:var(--radius-2xl); background:var(--white); color:var(--gray-900); font-size:0.875rem; font-weight:600; transition:background .15s, color .15s; }
.shop-cat-all:hover { background:var(--orange-50); }
.shop-cat-all.is-active { background:var(--orange-50); color:var(--orange-600); }
.shop-cat-all svg { flex-shrink:0; color:var(--gray-400); }

.shop-cat { overflow:hidden; border-radius:var(--radius-2xl); background:var(--white); }
.shop-cat-parent { display:flex; align-items:center; justify-content:space-between; gap:0.5rem; padding:1rem; color:var(--gray-900); transition:background .15s, color .15s; }
.shop-cat-parent:not(:last-child) { border-bottom:1px solid var(--gray-100); }
.shop-cat-parent:hover { background:var(--orange-50); }
.shop-cat-parent.is-active { background:var(--orange-50); color:var(--orange-600); }
.shop-cat-parent > svg { flex-shrink:0; color:var(--gray-400); }
.shop-cat-name { display:flex; align-items:center; gap:0.5rem; min-width:0; font-size:0.875rem; font-weight:600; }
.shop-cat-name svg { flex-shrink:0; }

.shop-cat-child { display:flex; align-items:center; gap:0.75rem; padding:0.75rem 1rem; transition:background .15s; }
.shop-cat-child + .shop-cat-child { border-top:1px solid var(--gray-100); }
.shop-cat-child:hover,
.shop-cat-child.is-active { background:var(--orange-50); }
.shop-cat-child > svg { flex-shrink:0; color:var(--gray-300); }
.shop-cat-img { flex-shrink:0; width:2.75rem; height:2.75rem; border:1px solid var(--gray-100); border-radius:0.5rem; object-fit:cover; }
.shop-cat-img.is-empty { display:block; background:var(--gray-50); }
.shop-cat-child-name { flex:1; min-width:0; font-size:0.875rem; line-height:1.25rem; color:var(--gray-800); }
.shop-cat-child.is-active .shop-cat-child-name { color:var(--orange-600); font-weight:600; }
.shop-cat-child .shop-cat-count { font-size:0.75rem; }

/* ===== Khối sản phẩm ===== */
.shop-content { flex:1; min-width:0; padding:0.75rem; border-radius:var(--radius-2xl); background:var(--white); box-shadow:var(--shadow-sm); }
.shop-head { display:flex; align-items:center; justify-content:space-between; gap:0.75rem; margin-bottom:1rem; }
.shop-head-title { display:flex; align-items:center; gap:0.5rem; min-width:0; }
.shop-head-icon { display:flex; flex-shrink:0; align-items:center; justify-content:center; width:2.25rem; height:2.25rem; border-radius:0.625rem; background:var(--orange-50); color:var(--orange-500); }
.shop-title { font-size:1.125rem; font-weight:700; line-height:1.3; color:var(--gray-900); overflow-wrap:anywhere; }
.shop-count { font-size:0.75rem; color:var(--gray-500); }
.shop-page-badge { flex-shrink:0; padding:0.25rem 0.75rem; border-radius:9999px; background:var(--orange-50); color:var(--orange-600); font-size:0.75rem; font-weight:500; white-space:nowrap; }

.shop-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0.5rem; }

/* Phân trang */
.shop-pagination { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:0.25rem; margin-top:1.5rem; }
.shop-pagination .page-numbers { display:flex; align-items:center; justify-content:center; min-width:2.25rem; height:2.25rem; padding:0 0.5rem; border:1px solid var(--gray-200); border-radius:0.5rem; background:var(--white); color:var(--gray-700); font-size:0.875rem; font-weight:600; transition:border-color .15s, color .15s; }
.shop-pagination a.page-numbers:hover { border-color:var(--orange-500); color:var(--orange-600); }
.shop-pagination .page-numbers.current { border-color:var(--orange-500); background:var(--orange-500); color:var(--white); }
.shop-pagination .page-numbers.dots { border-color:transparent; background:none; }

/* Không có sản phẩm */
.shop-empty { display:flex; flex-direction:column; align-items:center; gap:0.75rem; padding:3rem 1rem; text-align:center; color:var(--gray-400); }
.shop-empty p { font-size:0.875rem; }
.shop-empty-btn { padding:0.5rem 1.25rem; border-radius:0.5rem; background:var(--orange-500); color:var(--white); font-size:0.875rem; font-weight:600; }
.shop-empty-btn:hover { background:var(--orange-600); color:var(--white); }

/* ===== Responsive: sm (640px+) ===== */
@media (min-width:640px) {
	.shop-main { padding:1rem 1rem 2rem; background:var(--gray-100); }
	.shop-chips { display:none; }
	.shop-layout { display:flex; align-items:flex-start; gap:1.25rem; }
	.shop-sidebar { display:block; flex-shrink:0; width:16rem; overflow:hidden; border-radius:var(--radius-2xl); background:var(--gray-100); box-shadow:var(--shadow-sm); }
	.shop-content { padding:1.25rem; }
	.shop-title { font-size:1.25rem; }
	.shop-count,
	.shop-page-badge { font-size:0.875rem; }
	.shop-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:0.75rem; }
}