/* ================= PRODUCT-AC PAGE STYLES (product-ac.html) ================= */
/* Biến dùng chung xem tại :root trong style.css. File này chỉ chứa style riêng cho product-ac.html. */
/* Bố cục sidebar + lưới giống hệt product-ma.css (dùng tiền tố .pac- thay vì .pma-) để nhất quán giữa 2 trang catalog. */

.pac-layout {
  width: 100%;
  max-width: 1680px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 56px 30px 120px;
  display: flex;
  align-items: flex-start;
  gap: 56px;
}

/* ---------- Sidebar: tabs + bộ lọc ---------- */
.pac-sidebar {
  flex: 0 0 240px;
  width: 240px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.pac-tabs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--font-manrope);
  font-size: 14px;
}

.pac-tab {
  color: var(--color-slate);
  text-decoration: none;
}

.pac-tab.active {
  color: var(--color-gray-100);
  font-weight: 600;
}

.pac-tab:hover {
  color: var(--color-terracotta);
}

.pac-filters {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pac-filters-label {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gray-100);
}

.pac-filter-group {
  margin: 0;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--Zeus-7);
}

.pac-filter-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
  font-family: var(--font-google-sans-code);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-gray-100);
  cursor: pointer;
  list-style: none;
}

.pac-filter-summary::-webkit-details-marker {
  display: none;
}

.pac-filter-summary::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: 8px;
  border-right: 1.5px solid var(--color-slate);
  border-bottom: 1.5px solid var(--color-slate);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.pac-filter-group[open] .pac-filter-summary::after {
  transform: rotate(-135deg);
}

.pac-filter-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 12px;
}

.pac-filter-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-manrope);
  font-size: 14px;
  color: var(--color-slate);
  cursor: pointer;
}

.pac-filter-option input[type="checkbox"],
.pac-filter-option input[type="radio"] {
  width: 15px;
  height: 15px;
  accent-color: var(--color-terracotta);
  cursor: pointer;
}

/* Ô tìm kiếm dùng chung wrapper .pac-filter-option với checkbox/radio - tránh
   bị ăn rule "width/height: 15px" của checkbox, co lại thành ô vuông bé tí
   (cùng bug đã sửa ở product-ma.css). */
.pac-filter-option input[type="search"] {
  width: 100%;
  height: auto;
  padding: 10px 12px;
  border: 1px solid rgba(30, 27, 22, 0.18);
  border-radius: 6px;
  cursor: text;
}

.pac-color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 12px;
}

.pac-color-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid rgba(30, 27, 22, 0.12);
  padding: 0;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.pac-color-dot:hover {
  transform: scale(1.15);
}

.pac-color-dot--1 { background-color: #7a1f22; }
.pac-color-dot--2 { background-color: #d9a520; }
.pac-color-dot--3 { background-color: #a15c33; }
.pac-color-dot--4 { background-color: #5f6b40; }
.pac-color-dot--5 { background-color: #4f6d8a; }
.pac-color-dot--6 { background-color: #a6a196; }
.pac-color-dot--7 { background-color: #6e4326; }
.pac-color-dot--8 { background-color: #2a2622; }

/* ---------- Content: lưới sản phẩm ---------- */
.pac-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* !important - cùng lý do đã ghi ở .pma-heading trong product-ma.css (rule
   `main:not(.home-test) h1` của static-typography.css đè mất font-size). */
.pac-heading {
  margin: 0;
  font-size: 20px !important;
  font-weight: 600 !important;
  font-family: var(--font-google-sans-code) !important;
  line-height: 1.3 !important;
  letter-spacing: normal !important;
  color: var(--color-gray-100);
}

/* Cố định đúng 3 sản phẩm/hàng, chia đều 1fr - cùng lý do đã ghi ở
   product-ma.css (cột cố định 260px + justify-content:start bị dồn hẳn về
   bên trái trên màn hình rộng - bug thật người dùng báo). */
.pac-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Mỗi ô sản phẩm: thẻ nền trắng chứa 2 khối hình tròn/elip mô phỏng bộ bát đĩa/tách gốm
   (placeholder tạm thời cho đến khi có ảnh chụp sản phẩm thật của Anh Ceramics).
   KHÔNG chặn max-width nữa - cùng lý do đã ghi ở product-ma.css (canh giữa
   trong cột rộng hơn khiến khoảng cách giữa các ảnh không đều). */
.pac-tile {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  background-color: #faf8f4;
  border: 1px solid var(--Zeus-7);
  border-radius: 6px;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.2s ease;
}

a.pac-tile:hover {
  transform: scale(0.97);
}

/* Bọc tile + nút "Thêm vào giỏ hàng" nhanh - nút là PHẦN TỬ ANH EM của <a>
   (không lồng bên trong) - mirror .pma-tile-wrap/.pma-quick-add ở product-ma.css. */
.pac-tile-wrap {
  position: relative;
}

.pac-quick-add {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.pac-tile-wrap:hover .pac-quick-add,
.pac-quick-add:focus-visible {
  opacity: 1;
  transform: translateY(0);
}

.pac-quick-add img {
  width: 18px;
  height: 18px;
}

.pac-quick-add:disabled {
  opacity: 0.6;
  cursor: default;
}

@media (hover: none) {
  .pac-quick-add {
    opacity: 1;
    transform: none;
  }
}

/* Sản phẩm chưa có ảnh đại diện thật - hiện tên sản phẩm thay ảnh
   (_catalog-results.blade.php). Trước đây KHÔNG có CSS nào cho class này. */
.pac-tile-caption {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 16px;
  color: var(--color-gray-100, #1e222b);
  text-align: center;
  text-decoration: none;
  font-family: var(--font-manrope);
  font-size: 14px;
  font-weight: 500;
}

.pac-shape {
  position: absolute;
  display: block;
  border-radius: 50%;
  box-shadow: 0 6px 14px rgba(30, 27, 22, 0.12);
}

.pac-shape--saucer {
  width: 62%;
  height: 22%;
  border-radius: 50%;
  left: 19%;
  bottom: 20%;
}

.pac-shape--cup {
  width: 34%;
  height: 34%;
  left: 33%;
  bottom: 34%;
}

.pac-shape--bowl {
  width: 52%;
  height: 52%;
  left: 16%;
  bottom: 24%;
}

.pac-shape--bowl-small {
  width: 30%;
  height: 30%;
  right: 14%;
  bottom: 20%;
}

.pac-shape--handle {
  width: 16%;
  height: 16%;
  right: 20%;
  bottom: 30%;
}

/* Bảng màu (mỗi tông có bản sáng + đậm để tạo chiều sâu giữa 2 khối) */
.pac-color-cream { background-color: #ede4d3; }
.pac-color-cream-dark { background-color: #cbb98f; }
.pac-color-indigo { background-color: #304a8c; }
.pac-color-sand { background-color: #e3c185; }
.pac-color-sand-dark { background-color: #b98a4a; }
.pac-color-fog { background-color: #e6e2da; }
.pac-color-fog-dark { background-color: #b9b3a6; }
.pac-color-teal { background-color: #4f8a82; }
.pac-color-teal-dark { background-color: #2f5f58; }
.pac-color-mustard { background-color: #d9a520; }
.pac-color-mustard-dark { background-color: #a97a10; }
.pac-color-walnut { background-color: #8a5a34; }
.pac-color-walnut-dark { background-color: #5c3a1e; }
.pac-color-terracotta { background-color: #c1602f; }
.pac-color-terracotta-dark { background-color: #8a3d1a; }
.pac-color-choco { background-color: #5b3524; }
.pac-color-choco-dark { background-color: #3a2015; }
.pac-color-rose { background-color: #e3b6bd; }
.pac-color-rose-dark { background-color: #c48792; }
.pac-color-mauve { background-color: #b98aa0; }
.pac-color-mauve-dark { background-color: #86546c; }
.pac-color-plum { background-color: #5a2f45; }
.pac-color-plum-dark { background-color: #3a1a2c; }
.pac-color-ivory { background-color: #f2ede1; }
.pac-color-ivory-dark { background-color: #d8cdb5; }
.pac-color-moss { background-color: #5f6b40; }
.pac-color-moss-dark { background-color: #3d4527; }
.pac-color-clay { background-color: #a15c33; }
.pac-color-clay-dark { background-color: #71401f; }
.pac-color-chestnut { background-color: #6e4326; }
.pac-color-chestnut-dark { background-color: #472a17; }

/* ================= RESPONSIVE ================= */
@media screen and (max-width: 1024px) {
  .pac-layout {
    flex-direction: column;
    gap: 40px;
  }

  .pac-sidebar {
    flex: 1 1 auto;
    width: 100%;
  }

  .pac-filters {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 24px 40px;
  }

  .pac-filter-group {
    flex: 1 1 200px;
    border-bottom: none;
    padding-bottom: 0;
  }
}

@media screen and (max-width: 600px) {
  .pac-layout {
    padding: 40px 20px 80px;
  }

  .pac-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .pac-filters {
    flex-direction: column;
  }
}