/* ============================================================
   product-list.css — trang 5 & 6 file thiết kế PA1-R6
   Dùng chung cho:
     · san-pham-gach.html  (body.page-product)
     · bo-suu-tap.html     (body.page-collection)

   Chỉ chứa phần KHÔNG có trong common.css §15.
   Component lấy sẵn từ common.css: .page-banner · .breadcrumb · .pill ·
   .with-filter · .filter__* · .re-select-main--field · .count ·
   .grid-2/.grid-3 · .tile-card (kể cả img.is-scene) · .collection-card ·
   .pagination · .nav-btn.
   ============================================================ */

/* ===== 1 · BANNER ĐẦU TRANG (page-banner + swiper) =====
   .page-banner trong common.css giả định một ảnh tĩnh. Ở đây banner có
   nhiều slide nên phải bọc thêm .swiper: các quy tắc dưới chỉ lo phần
   khung của swiper, còn ảnh/chữ vẫn dùng nguyên class của common.css. */
.pl-banner__swiper { width: 100%; }
.pl-banner__swiper .swiper-slide { position: relative; }
/* effect:'fade' xếp chồng slide — slide ẩn không được ăn sự kiện chuột */
.pl-banner__swiper .swiper-slide:not(.swiper-slide-active) { pointer-events: none; }
/* Lớp phủ gradient (::after của .page-banner) nằm trên ảnh, dưới chữ */
.pl-banner .page-banner__body { z-index: 2; }

/* ===== 2 · CẶP TAB "Sản phẩm / Bộ sưu tập" =====
   Là link chuyển trang thật, không phải tab ẩn/hiện — nhưng dáng vẫn là
   .pill-group của common.css §6 (các nút rời, nút đang chọn là viên thuốc xanh). */
.pl-tabs-row .pill-group,
.container > .pill-group { margin-bottom: clamp(22px, 3vw, 34px); }

/* ===== 3 · THÂN TRANG ===== */
.pl-body { padding-bottom: var(--sp-section); }
/* .count dùng margin-bottom 14px của common.css — không ghi đè */
.pl-results { min-width: 0; }
.pl-grid { align-items: start; }

/* ===== 4 · SIDEBAR BỘ LỌC =====
   Danh sách dài nên cho sidebar bám theo khi cuộn (chỉ ở desktop, nơi
   .with-filter còn giữ 2 cột). */
@media (min-width: 1025px) {
  /* `top` cộng CẢ --header-top LẪN --header-h — header là position:fixed neo
     theo --header-top nên nó chiếm y = --header-top .. --header-top+--header-h,
     mốc sticky nào chỉ cộng --header-h là đã ăn mất --header-top của khe.
     Bản trước viết `--header-h + 24px` = 96px, mà đáy header ở 14+72 = 86px →
     khe thật chỉ còn 10px chứ không phải 24px như con số gợi ý. Trang Hệ thống
     phân phối dính đúng lỗi này ở mức nặng hơn (khe ra đúng 0, client gửi ảnh).
     14px cho khớp với .dist__fields — cùng một kiểu bộ lọc ghim, không có lý do
     để hai trang lệch nhau. */
  .pl-filter {
    position: sticky;
    top: calc(var(--header-top) + var(--header-h) + 14px);
  }
}

/* Ở khổ hẹp .with-filter dồn 1 cột: tách bộ lọc khỏi lưới cho dễ đọc.
   Chặn trên 720px, KHÔNG để hở tới 0: ở dải này bộ lọc còn bày thẳng ra nên nó
   là một khối cao vài trăm pixel, cần đường kẻ để không lẫn vào lưới sản phẩm. */
@media (min-width: 721px) and (max-width: 1024px) {
  .pl-filter { padding-bottom: 22px; border-bottom: 1px solid var(--c-line); }
}

/* Từ 720px trở xuống, main.js:initFilterToggle() gập bộ lọc lại sau nút "Bộ lọc"
   nên cả khối chỉ còn cao đúng MỘT hàng. Đường kẻ khi ấy không còn tách hai vùng
   nội dung nào nữa: nó nằm ngay dưới hàng "Bộ lọc · đặt lại · 36 sản phẩm" và
   đọc ra thành gạch chân của cái nút (phản hồi 30/07/2026 "bỏ line dưới bộ lọc").
   Chỉ giữ lại khe trắng — đã đủ tách hàng lọc khỏi lưới. */
@media (max-width: 720px) {
  .pl-filter { padding-bottom: 22px; }
}

/* Số cột ở mobile KHÔNG khai ở đây nữa: common.css §16/640 quyết định theo loại
   thẻ bên trong lưới (`:has(> .tile-card)` → 2 cột). Để ở đây thì `.pl-grid`
   cũng dùng chung với trang Bộ sưu tập, mà bộ sưu tập lại cần 1 cột. */