/* =========================================================
   TAMMIA — halaman kategori dan brand
   CSS Injector "tammia_redesign_katbrand", kondisi Request path:
     /category/*
     /brand/*

   Halamannya view "product_by_category" milik Bion, dan itu sengaja
   TIDAK diganti: view itu sudah benar, datanya dari Commerce, dan satu
   view itu melayani halaman kategori sekaligus halaman brand lewat
   contextual filter. Yang dikerjakan file ini cuma menyamakan tampilan
   kartunya dengan kartu produk template.

   Peta nama kelas Bion ke template:
     .product-item-wrapper   -> kartu putih  (.product-card)
     .product-image-container-> kotak foto   (.product-img)
     .discount-badge         -> badge diskon (.product-badge.badge-sale)
     .product-title a        -> judul        (.product-name)
     .price-amount           -> harga jual   (.product-price.sale)
     .price-original         -> harga coret  (.product-price-was)
   ========================================================= */

/* ---- Judul halaman ---- */
body #block-tammia-theme-page-title h1 {
  font-family: "Comfortaa", "Poppins", sans-serif !important;
  font-size: clamp(2rem, 4.5vw, 3.4rem) !important;
  font-weight: 300 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
  color: #1a1a1a !important;
  text-transform: none !important;
  text-align: left !important;
  margin: 0 0 36px !important;
}
body .view-id-product_by_category { padding-bottom: 100px; }

/* ---- Kartu ---- */
body .view-id-product_by_category .product-item-wrapper {
  position: relative; background: #ffffff;
  border-radius: 28px; padding: 12px 12px 18px;
  box-shadow: 0 8px 30px -12px rgba(26,26,26,.07);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s cubic-bezier(.2,.8,.2,1);
  height: 100%; margin-bottom: 0 !important;
}
body .view-id-product_by_category .product-item-wrapper:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 60px -20px rgba(225,29,37,.26);
}
body .view-id-product_by_category .grid > .row { --bs-gutter-x: 1.5rem; --bs-gutter-y: 1.5rem; }
/* Kolom bawaan Bion col-auto col-sm-6 col-md-4 col-lg-3 menghasilkan 1 kartu
   per baris di HP dan 3 di tablet. Disamakan dengan /shop dan template:
   2 kartu sampai 991px, 4 kartu mulai 992px. */
body .view-id-product_by_category .grid > .row > [class*="col-"] {
  flex: 0 0 50%; max-width: 50%; width: 50%;
}
@media (min-width: 992px) {
  body .view-id-product_by_category .grid > .row > [class*="col-"] {
    flex: 0 0 25%; max-width: 25%; width: 25%;
  }
}

/* ---- Kotak foto ---- */
body .view-id-product_by_category .product-image-container {
  position: relative; aspect-ratio: 1/1; overflow: hidden;
  border-radius: 20px; margin-bottom: 16px;
  background: linear-gradient(160deg,#fcf0f0,#f7dedf);
}
body .view-id-product_by_category .product-image-container > a { display: block; height: 100%; }
body .view-id-product_by_category .product-image-container img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}

/* ---- Badge diskon ---- */
body .view-id-product_by_category .discount-badge {
  /* Bion memberi badge ini right:10px, jadi kotaknya melebar penuh.
     right dinolkan supaya lebarnya ikut isi seperti template. */
  position: absolute; top: 12px; left: 12px; right: auto !important; z-index: 2;
  display: inline-flex !important; align-items: center; gap: 4px;
  background: #e11d25; color: #fff;
  font-family: "JetBrains Mono", monospace; font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase; font-weight: 600;
  padding: 6px 10px; border-radius: 999px;
  width: auto; height: auto;
}
body .view-id-product_by_category .discount-badge span { color: #fff; font-size: 10px; line-height: 1; }

/* ---- Tombol quick view dan wishlist, muncul waktu hover ---- */
body .view-id-product_by_category .qv-overlay {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2;
  display: flex; justify-content: center;
  opacity: 0; transform: translateY(8px); transition: all .3s ease;
  background: none;
}
body .view-id-product_by_category .product-item-wrapper:hover .qv-overlay { opacity: 1; transform: translateY(0); }
body .view-id-product_by_category .qv-button {
  background: #1a1a1a !important; color: #fff !important; border: none !important;
  border-radius: 999px !important;
  font-family: "JetBrains Mono", monospace !important; font-size: 10px !important;
  letter-spacing: .16em !important; text-transform: uppercase !important;
  padding: 10px 18px !important; margin: 0 !important;
}
body .view-id-product_by_category .qv-button:hover { background: #e11d25 !important; }
body .view-id-product_by_category .wishlist-btn-wrapper {
  position: absolute; right: 12px; top: 12px; z-index: 3;
}
body .view-id-product_by_category .wishlist-btn {
  width: 34px; height: 34px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.9); color: #e11d25;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; padding: 0; transition: background .2s ease;
}
body .view-id-product_by_category .wishlist-btn:hover { background: #fff; }

/* ---- Judul dan harga ---- */
body .view-id-product_by_category .product-info { padding: 0 6px; }
body .view-id-product_by_category .product-title { margin: 0 0 8px; }
body .view-id-product_by_category .product-title a {
  font-family: "Poppins", sans-serif; font-size: 14px; font-weight: 500;
  color: #1a1a1a; line-height: 1.4; text-decoration: none;
  min-height: 40px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Urutan di markup Bion: harga coret dulu baru harga jual. Template
   sebaliknya, jadi dibalik lewat order, bukan lewat mengubah view. */
body .view-id-product_by_category .product-price {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
body .view-id-product_by_category .price-amount {
  order: 1;
  font-family: "Comfortaa", "Poppins", sans-serif; font-size: 18px; font-weight: 500; color: #e11d25;
}
body .view-id-product_by_category .price-original {
  order: 2;
  font-size: 13px; color: #414042; text-decoration: line-through;
}
/* Produk tanpa harga coret: harganya hitam, bukan merah */
body .view-id-product_by_category .product-price:not(:has(.price-original)) .price-amount { color: #1a1a1a; }

/* ---- Pager ---- */
body .view-id-product_by_category .pager__items {
  display: flex; justify-content: center; gap: 6px;
  margin-top: 60px; list-style: none; padding: 0;
}
body .view-id-product_by_category .pager__item { margin: 0; }
body .view-id-product_by_category .pager__item a {
  min-width: 40px; height: 40px; padding: 0 10px;
  border-radius: 10px; border: 1px solid #e6e2dd;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: "JetBrains Mono", monospace; font-size: 13px;
  color: #1a1a1a; text-decoration: none; transition: all .2s ease;
}
body .view-id-product_by_category .pager__item a:hover { border-color: #e11d25; color: #e11d25; }
body .view-id-product_by_category .pager__item.is-active a { background: #1a1a1a; border-color: #1a1a1a; color: #fff; }

@media (max-width: 575px) {
  body .view-id-product_by_category { padding-bottom: 60px; }
  body #block-tammia-theme-page-title h1 { margin-bottom: 24px !important; }
}


/* ===== Halaman brand / kategori yang belum ada produknya =====
   Sebelum ini halamannya benar-benar blank, cuma judul lalu footer.
   Teksnya ada di view product_by_category > No results behavior, jadi
   admin bisa mengubah kalimatnya lewat Views UI. */
body .tm-empty {
  text-align: center;
  padding: 72px 24px 96px;
  max-width: 520px;
  margin: 0 auto;
}
body .tm-empty__title {
  font-family: "Comfortaa","Poppins",sans-serif;
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  font-weight: 300; color: #1a1a1a; margin: 0 0 10px;
}
body .tm-empty__sub { color: #414042; font-size: 15px; line-height: 1.7; margin: 0 0 26px; }
body .tm-empty__btn {
  display: inline-block; padding: 13px 30px; border-radius: 999px;
  background: #e11d25; color: #fff; text-decoration: none;
  font-family: "Comfortaa","Poppins",sans-serif; font-weight: 500; font-size: 14px;
  transition: background .2s ease;
}
body .tm-empty__btn:hover { background: #c1161d; color: #fff; }
@media (max-width: 575px) { body .tm-empty { padding: 48px 20px 64px; } }