/* ================= PRODUCT-MA PAGE STYLES (product-ma.html) ================= */
/* Biến dùng chung xem tại :root trong style.css. File này chỉ chứa style riêng cho product-ma.html. */

.pma-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 ---------- */
.pma-sidebar {
  flex: 0 0 240px;
  width: 240px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

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

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

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

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

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

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

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

.pma-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;
}

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

.pma-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;
}

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

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

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

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

/* Ô tìm kiếm dùng chung wrapper .pma-filter-option với checkbox/radio ở trên -
   nếu không loại trừ riêng, input[type=search] bị ăn luôn rule "width/height:
   15px" của checkbox, co lại thành ô vuông bé tí trông như checkbox trống rỗng
   (bug thật, người dùng báo "CSS trang tìm kiếm sản phẩm bể hết, sản phẩm
   không hiện" - phát hiện qua headless Chrome đọc computed style thật). */
.pma-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;
}

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

.pma-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;
}

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

.pma-color-dot--1 { background-color: #2f6b8e; }
.pma-color-dot--2 { background-color: #3f7a52; }
.pma-color-dot--3 { background-color: #e0a72e; }
.pma-color-dot--4 { background-color: #d9601e; }
.pma-color-dot--5 { background-color: #7fb3d5; }
.pma-color-dot--6 { background-color: #8a8a82; }
.pma-color-dot--7 { background-color: #8a4a26; }
.pma-color-dot--8 { background-color: #a3221f; }

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

/* !important vì `static-typography.css` có rule `main:not(.home-test) h1`
   specificity cao hơn (2 :not() + element) load SAU file này, đè mất font-size
   20px định sẵn cho tiêu đề catalog - làm tiêu đề hiện to bằng cỡ display
   headline của trang chủ (đã xác nhận qua Chrome đọc computed style thật). */
.pma-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 HẾT bề rộng content area (`1fr`).
   KHÔNG chặn max-width trên .pma-tile nữa - bản trước chặn 260px + canh giữa
   bằng margin:auto trong cột rộng hơn khiến khoảng cách giữa 2 ảnh cạnh nhau
   không đều (rộng hẹp lẫn lộn tuỳ viewport, nhìn "tách xấu" - đúng phản hồi
   người dùng), giờ ảnh lấp đầy đúng cột của nó, khoảng cách giữa các ảnh CHỈ
   còn đúng 1 giá trị `gap` duy nhất, đều tăm tắp mọi viewport. */
.pma-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.pma-tile {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  text-decoration: none;
  transition: transform 0.2s ease;
  overflow: hidden;
}

a.pma-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) để tránh nút bấm lồng trong link (HTML không hợp lệ,
   click sẽ vừa gọi AJAX vừa điều hướng trang). Chỉ hiện với sản phẩm giá cố
   định (_catalog-results.blade.php lọc điều kiện trước khi render nút). */
.pma-tile-wrap {
  position: relative;
}

.pma-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;
}

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

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

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

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

/* Sản phẩm chưa có ảnh đại diện thật trong Media Library - hiện tên sản phẩm
   thay ảnh (_catalog-results.blade.php) thay vì để trống hoàn toàn. Trước đây
   KHÔNG có CSS nào cho class này nên chữ hiện ra như link mặc định của trình
   duyệt (xanh, gạch chân) trên nền trắng trơn - trông như lỗi hiển thị. */
.pma-tile-caption {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 16px;
  background-color: var(--color-floralwhite);
  color: var(--color-gray-100);
  text-align: center;
  text-decoration: none;
  font-family: var(--font-manrope);
  font-size: 14px;
  font-weight: 500;
}

.pma-tile--1 { background-color: #1f5c46; }

.pma-tile--2 {
  background-color: #7fb9a8;
  background-image:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.35) 0%, transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(31, 92, 70, 0.3) 0%, transparent 55%);
}

.pma-tile--3 { background-color: #1f5f6e; }
.pma-tile--4 { background-color: #6fc4c9; }

.pma-tile--5 {
  background-color: #a89a86;
  background-image:
    radial-gradient(circle at 35% 65%, rgba(90, 78, 62, 0.4) 0%, transparent 50%),
    radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.25) 0%, transparent 50%);
}

.pma-tile--6 { background-color: #7fb3d5; }
.pma-tile--7 { background-color: #5c6b3f; }

.pma-tile--8 {
  background-color: #d8d0bd;
  background-image:
    radial-gradient(circle at 30% 30%, rgba(180, 160, 120, 0.35) 0%, transparent 50%);
}

.pma-tile--9 { background-color: #e8a72e; }
.pma-tile--10 { background-color: #e0921f; }
.pma-tile--11 { background-color: #d9531e; }

.pma-tile--12 {
  background-color: #7a1f22;
  background-image:
    radial-gradient(circle at 65% 35%, rgba(150, 60, 60, 0.4) 0%, transparent 50%);
}

.pma-tile--13 { background-color: #8a4a26; }

.pma-tile--14 {
  background-color: #7d6f63;
  background-image:
    radial-gradient(circle at 40% 60%, rgba(120, 105, 90, 0.4) 0%, transparent 50%);
}

.pma-tile--15 {
  background-color: #c9a227;
  background-image: repeating-linear-gradient(
    100deg,
    rgba(255, 235, 180, 0.5) 0%,
    rgba(201, 162, 39, 0.9) 8%,
    rgba(160, 122, 20, 0.9) 16%
  );
}

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

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

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

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

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

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

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