/*
  Alinea — katalog & kartu buku (agen catalog).
  Dimuat di semua halaman dan perangkat oleh layout alinea; semua selektor di bawah body.alinea.
  Dipakai: products/products.twig (/products, halaman kategori), modules/product/{grid,masonry,slider}.twig,
  partials/book_card.twig. Tata letak memakai utilitas Tailwind + token mockup (text-ink, border-line, ...);
  berkas ini hanya untuk keadaan (tab aktif), pola mockup tanpa padanan utilitas, dan penimpaan CSS inti.
  Radius mengikuti pengaturan situs (live customizer): gambar/kartu = --site-image-radius, tombol/tab/kotak isian =
  --site-button-radius (preset "default" membuat variabel itu tidak sah, jadi cadangan 4px mockup yang dipakai).
*/

/* ---------- Pola mockup (katalog.html <style>) ---------- */
body.alinea .al-book .img-fade,
body.alinea .al-featured .img-fade {
  transition: opacity 0.3s ease;
}
body.alinea .al-book .img-fade:hover,
body.alinea .al-featured .img-fade:hover {
  opacity: 0.88;
}
body.alinea .al-catalog .ui-fade,
body.alinea .al-book .ui-fade,
body.alinea .al-featured .ui-fade {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
body.alinea .al-catalog .clean-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  outline: none;
  box-shadow: none;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  font-size: 12px;
  line-height: 16px;
  color: var(--al-ink, #161413);
}
body.alinea .al-select:focus-within {
  border-color: var(--al-ink, #161413);
}

/* ---------- Tab kategori (.cat-tab mockup) ---------- */
body.alinea .al-tab {
  display: inline-flex;
  align-items: center;
  color: var(--al-ink-muted, #6E6760);
  background-color: transparent;
  border-color: var(--al-line, #E7E2D8);
  text-decoration: none;
  cursor: pointer;
  line-height: 16px;
}
body.alinea .al-tab:hover {
  color: var(--al-ink, #161413);
}
body.alinea .al-tab.is-active,
body.alinea .al-tab.is-active:hover {
  background-color: var(--al-ink, #161413);
  color: #FFFFFF;
  border-color: var(--al-ink, #161413);
}
body.alinea .al-tab:focus-visible,
body.alinea .al-book a:focus-visible,
body.alinea .al-book button:focus-visible,
body.alinea .al-featured a:focus-visible,
body.alinea .al-featured button:focus-visible {
  outline: 2px solid var(--al-sienna, #8C3D22);
  outline-offset: 2px;
}

/* Baris tab & deret slider digulir horizontal tanpa scrollbar (scrollbar-none mockup tidak berefek). */
body.alinea .al-tabs,
body.alinea .al-scroll {
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
body.alinea .al-tabs::-webkit-scrollbar,
body.alinea .al-scroll::-webkit-scrollbar {
  display: none;
}

/* ---------- Kotak cari ---------- */
body.alinea .al-shelf-input {
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
  line-height: 16px;
  color: var(--al-ink, #161413);
}
body.alinea .al-shelf-input:focus {
  outline: none;
  box-shadow: none;
  border-color: var(--al-ink, #161413);
}
body.alinea .al-shelf-input::-webkit-search-decoration {
  -webkit-appearance: none;
}
body.alinea .al-shelf-input::placeholder {
  color: var(--al-ink-faint, #9C958D);
  opacity: 1;
}

/* ---------- Kartu buku ---------- */
body.alinea .al-book {
  min-width: 0;
}
body.alinea .al-book h3 {
  margin: 0 0 4px;
}
body.alinea .al-book h3 a {
  color: inherit;
  text-decoration: none;
}
body.alinea .al-book-author {
  min-height: 16px;
}
body.alinea .al-book-foot {
  min-height: 27px;
}
/* Harga dari CSS inti (oranye 800) tidak dipakai; teks harga kartu mengikuti mockup. */
body.alinea .al-book .price-tag {
  white-space: nowrap;
}
body.alinea .al-book-compare {
  white-space: nowrap;
}
/* Overlay "Lihat Detail / + Beli" hanya untuk perangkat ber-hover; di layar sentuh aksi ada di baris harga. */
@media (hover: none) {
  body.alinea .al-book-overlay {
    display: none;
  }
}

/* ---------- Kartu unggulan ---------- */
body.alinea .al-featured h2 a {
  color: inherit;
  text-decoration: none;
}

/* ---------- Empty state ---------- */
body.alinea .al-empty a {
  text-underline-offset: 3px;
}

/* ---------- Halaman (App\Utils\Pagination: <a> + span.current-page) ---------- */
body.alinea .al-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 0;
}
body.alinea .al-pagination a,
body.alinea .al-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  margin: 0;
  border: 1px solid var(--al-line, #E7E2D8);
  border-radius: var(--site-button-radius, 4px);
  background: #FFFFFF;
  color: var(--al-ink-muted, #6E6760);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transform: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
body.alinea .al-pagination a:hover {
  border-color: var(--al-ink, #161413);
  color: var(--al-ink, #161413);
  background: #FFFFFF;
  transform: none;
}
body.alinea .al-pagination span.current-page,
body.alinea .al-pagination .current-page {
  background: var(--al-ink, #161413);
  border-color: var(--al-ink, #161413);
  color: #FFFFFF;
  font-weight: 600;
}

/* ---------- Radius dari pengaturan situs ----------
   Bingkai sampul, gambar & kartu unggulan = radius gambar situs; gambar di dalamnya tidak dibulatkan sendiri (bingkai
   yang memotong). Tombol, tab, kotak cari & urutan = radius tombol situs (cadangan 4px mockup saat preset default).
   Selektor body.alinea menang atas `.product img` inti yang juga memakai variabel yang sama. */
body.alinea .al-book-cover,
body.alinea .al-featured-media,
body.alinea .al-featured-card {
  border-radius: var(--site-image-radius, 0px);
}
body.alinea .al-book-cover img,
body.alinea .al-featured-media img {
  border-radius: 0;
}
body.alinea .al-tab,
body.alinea .al-shelf-input,
body.alinea .al-select,
body.alinea .al-book-btn {
  border-radius: var(--site-button-radius, 4px);
}

/* Kotak cari bertipe search: tombol hapus bawaan WebKit disembunyikan (mockup memakai input teks polos). */
body.alinea .al-shelf-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}