/* ---------------------------------------------------------------------
 * AVH — kad azhp pada arkib Shop (WooCommerce) dan Courses (Tutor LMS)
 * v3.15.16. Bergantung pada homepage-v2.css (.azhp-card/.azhp-prod/.azhp-course)
 * dan ate-components.css (.azhp .ate-scope). Sidebar filter, sort, carian
 * Enfold/Tutor TIDAK disentuh — fail ini hanya susun kad dalam grid.
 * Breakpoint ikut Enfold: 959px mobile / 960px desktop (BUKAN 768px).
 *
 * ⚠️ v3.15.14 cuba buang terus `<ul class="products">`/`<li class="product">`
 * (ganti <div class="azhp-grid">) — PRODUK SEMUA HILANG di live (disyaki
 * Enfold/plugin shop bergantung pada tag/kelas tu, cth JS masonry). Fail
 * ni DIROLLBACK v3.15.15 ke struktur ul.products/li.product asal (sama
 * macam v3.15.13) — KEKALKAN struktur ni, jangan cuba buang lagi tanpa
 * sahkan di staging dulu.
 *
 * v3.15.16 — PUNCA SEBENAR pepijat "kad kecil/padding besar" (4 pusingan
 * sebelum ni) akhirnya dikenal pasti melalui devtools langsung di live
 * (Wan guna Claude extension Chrome, 1 Sept 2026): ada rule CSS LAMA
 * (`.woocommerce ul.products li.product { width:48%!important;
 * margin-left:2%!important; float:left!important; }` dalam
 * `@media (max-width:767px)`) — kemungkinan besar dalam Additional
 * CSS/Quick CSS WordPress (database, bukan fail), BUKAN dalam mana-mana
 * fail plugin/tema yang saya ada akses. Specificity rule lama tu (0,3,2)
 * TEPAT SAMA dengan rule kita (0,3,2) — jadi ia menang ikut turutan muat
 * (Quick CSS/Customizer sengaja dimuat PALING AKHIR mengikut reka bentuk
 * WordPress), bukan sebab lebih spesifik. Punca sebenar `!important` kita
 * gagal berulang kali — bukan Enfold/Avia macam disyaki sebelum ni.
 *
 * Fix: naikkan specificity kita terus (ulang `.product.product` +
 * `:nth-child(n)`, (0,3,2) → (0,5,2)) supaya menang MUTLAK tanpa kira
 * turutan muat — TANPA sentuh/padam rule lama yang saya tak boleh sahkan
 * lokasinya (tiada akses DB/tema dari sini). Ini pendekatan paling
 * selamat lepas insiden v3.15.14.
 * --------------------------------------------------------------------- */

/* ---------- Shop / kategori / tag produk (WooCommerce) ---------- */
.azhp-shop-scope ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  list-style: none !important;
  margin: 0 0 24px !important;
  padding: 0 !important;
}
/* v3.15.16 — .product diulang + :nth-child(n) sengaja: naikkan specificity
   (0,3,2)→(0,5,2) supaya menang mutlak lawan rule lama
   `.woocommerce ul.products li.product` (0,3,2) DAN varian
   `:nth-child(2n+1){clear:left}` dia (0,4,2) — dua-dua kalah sekarang
   tanpa kira turutan muat. :nth-child(n) padan SEMUA item (tak sempitkan
   skop), cuma trick naikkan specificity. */
.azhp-shop-scope ul.products li.product.product:nth-child(n) {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  clear: none !important;
}
.azhp-shop-scope ul.products li.product .azhp-card { height: 100%; }

@media (max-width: 1100px) {
  .azhp-shop-scope ul.products { grid-template-columns: repeat(3, 1fr); }
}
/* Wan sahkan keutamaan (31 Ogos 2026): telefon SENTIASA 2 lajur, desktop
   kekal 4 lajur asal. */
@media (max-width: 959px) {
  .azhp-shop-scope ul.products { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  /* Kecilkan jarak tepi .container Enfold khusus di sini sahaja (tak
     sentuh .container am, header/laman lain kekal) supaya kad dapat
     lebih ruang pada telefon. */
  .azhp-shop-scope { padding-left: 12px !important; padding-right: 12px !important; }
}

/* ⚠️ `.products img` Enfold/WooCommerce (width:100%; height:auto)
   berkongsi specificity sama dengan `.azhp-prod__seller img` homepage-v2.css
   dan dimuat SELEPASnya di halaman Shop — jadi ia menang dan avatar seller
   (sepatutnya 20×20 bulat) meregang jadi sebesar imej produk. !important di
   sini sengaja — ia satu-satunya cara menewaskan CSS tema/plugin luar yang
   turutan muatnya di luar kawalan kita. */
.azhp-shop-scope ul.products li.product .azhp-prod__seller img {
  width: 20px !important;
  height: 20px !important;
  max-width: 20px !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  flex-shrink: 0;
}

/* ---------- Courses (Tutor LMS) ---------- */
.azhp-course-scope .tutor-course-list.tutor-grid { gap: 16px; }
.azhp-course-scope .tutor-course-list.tutor-grid > .azhp-card { height: 100%; }