/* Trang danh sách sản phẩm theo template EGA (category.html): danh mục, thương hiệu, khuyến mãi, tìm kiếm.
   Chỉ bổ sung các class tùy biến (arbitrary value) mà global.css của theme không có sẵn. */

/* Banner đầu trang */
.collection_banner img { display: block; width: 100%; height: auto; }

/* Bố cục 2 cột: bộ lọc 3fr | sản phẩm 9fr (từ 1270px) */
.collection-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.4rem; }
@media (min-width: 1270px) {
    .collection-layout { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); }
}

/* Ngăn kéo bộ lọc (dưới 1270px là lớp phủ, xem custom.css) */
.collection-filter .facet-inner { max-width: 32rem; }
.collection-filter .facet-header button { width: 3.6rem; height: 3.6rem; }
.collection-filter .filter-count,
.collection-toolbar .filter-count { min-width: 2rem; height: 2rem; padding: 0 .4rem; font-size: 1.1rem; }
.collection-toolbar .filter-count { background: var(--color-sale, #EE1926); }
.collection-filter .facet-actions { display: flex; flex-direction: column; gap: 1rem; padding: 1.6rem 0; }
.collection-filter .facet-actions .link { text-align: center; text-decoration: underline; }
.collection-filter .filter-item--check-box label small { color: var(--color-neutral-200); font-size: 1.2rem; }
.collection-filter .filter-item-toggle { display: flex; align-items: center; gap: .6rem; cursor: pointer; color: var(--color-secondary); font-weight: 600; }

/* Cây danh mục trong cột lọc */
.collection-filter .nav-category ul { list-style: none; margin: 0; padding: 0; }
.collection-filter .nav-category li { position: relative; }
.collection-filter .nav-category a { display: block; padding: .6rem 3rem .6rem 0; font-size: 1.4rem; color: var(--color-foreground); }
.collection-filter .nav-category a:hover,
.collection-filter .nav-category a[aria-current="page"] { color: var(--color-secondary); font-weight: 600; }
.collection-filter .nav-category [data-category-expand] { position: absolute; right: 0; top: .4rem; width: 2.4rem; height: 2.4rem; display: flex; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; }
.collection-filter .nav-category [data-category-expand][aria-expanded="true"] .icon { transform: rotate(180deg); }
.collection-filter .nav-category .nav-children { padding-left: 1.2rem; }
.collection-filter .nav-category .nav-children[hidden] { display: none; }

/* Thanh tiêu đề + sắp xếp + bộ lọc đang chọn */
.collection-toolbar .heading { margin-bottom: 0; }
.collection-toolbar .form-select { min-width: 16rem; }
.filter-items { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; }
.filter-items:empty { display: none; }
.filter-items .filter-chip { display: inline-flex; align-items: center; gap: .6rem; padding: .4rem 1.2rem; border: 1px solid var(--color-neutral-50); border-radius: var(--rounded-full); background: var(--color-background); font-size: 1.3rem; color: var(--color-foreground); }
.filter-items .filter-chip:hover { border-color: var(--color-secondary); color: var(--color-secondary); }
.filter-items .filter-chip .icon { font-size: 1rem; }
.filter-items .filter-clear { font-size: 1.3rem; color: var(--color-secondary); text-decoration: underline; }

/* Không có sản phẩm */
.collection-empty { padding: 3rem 2rem; text-align: center; background: var(--color-background); border: 1px dashed var(--color-neutral-100); border-radius: var(--rounded-lg); }
.collection-empty a { color: var(--color-secondary); font-weight: 600; text-decoration: underline; }

/* Mô tả danh mục / thương hiệu */
.collection-description .content { overflow: hidden; }
.collection-description .content img { max-width: 100%; height: auto; }
.collection-description .btn-showmore { margin: 1.2rem auto 0; }

/* Phân trang (nav.pages ul.pagination) */
.pages .pagination { flex-wrap: wrap; justify-content: center; }
.pages .page-link { width: 3.6rem; height: 3.6rem; display: flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: var(--rounded); background: var(--color-background); transition: transform .2s; }
.pages .page-link:hover { background: var(--color-neutral-50); }
.pages .page-link:active { transform: scale(.95); }
.pages .page-item.active .page-link { color: var(--color-secondary); border-color: var(--color-secondary); }
.pages .page-item.disabled .page-link { pointer-events: none; }

/* Danh mục con: thẻ "bộ sưu tập" (section-collection-list) */
.section-collection-list .coll-card { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; background: #f0eeea; }
.section-collection-list .coll-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.section-collection-list .coll-card:hover img { transform: scale(1.05); }
.section-collection-list .coll-card .coll-label { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.4rem 1.6rem 1.6rem; background: linear-gradient(to top, rgba(0, 0, 0, .55) 0%, transparent 100%); color: #fff; font-size: 1.4rem; font-weight: 600; line-height: 1.3; text-decoration: underline; text-underline-offset: 3px; }
.section-collection-list .coll-card .coll-badge { position: absolute; top: 1.2rem; right: 1.2rem; width: 5.2rem; height: 5.2rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #F26522; color: #1a1a1a; font-size: 1.1rem; font-weight: 700; line-height: 1.2; text-align: center; }
.section-collection-list .collection-slider-nav { display: flex; gap: .8rem; flex: none; }
.section-collection-list .collection-slider-nav button { width: 3.6rem; height: 3.6rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--color-neutral-100); background: var(--color-background); cursor: pointer; transition: all .2s ease; }
.section-collection-list .collection-slider-nav button:hover { background: var(--color-foreground); border-color: var(--color-foreground); color: #fff; }
.section-collection-list .collection-slider-nav button:disabled { opacity: .4; cursor: default; }
.section-collection-list .embla__container { display: flex; flex-wrap: nowrap; }
.section-collection-list .embla__slide { flex: 0 0 64%; min-width: 0; }
@media (min-width: 768px) {
    .section-collection-list .embla__slide { flex-basis: 22%; }
}
@media (min-width: 1024px) {
    .section-collection-list .embla__slide { flex-basis: calc(100% / var(--coll-columns, 6)); }
}