/* =========================================================
   Alinea — halaman detail produk (products/product.twig)
   Dimuat layout Alinea di semua halaman & perangkat; semua selektor di bawah body.alinea .al-pd
   agar tidak bocor. Warna mengikuti token mockup (sama dengan tailwind.config layout);
   latar gradien lipat memakai --site-body-bg agar menyatu dengan latar halaman.
   ========================================================= */

body.alinea .al-pd {
  --al-pd-ink: var(--al-ink, #161413); /* token tema (theme.css), sama dengan Tailwind `ink` */
  --al-pd-ink-hover: #292524;
  --al-pd-muted: #6E6760;
  --al-pd-faint: #9C958D;
  --al-pd-line: #E7E2D8;
  --al-pd-sienna: var(--al-sienna, #8C3D22);
  --al-pd-canvas: var(--site-body-bg, #FAF8F5);
}

/* Transisi kecil mockup (.ui-fade / .img-fade), dicakup ke halaman ini saja. */
body.alinea .al-pd .ui-fade {
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
}
body.alinea .al-pd .img-fade {
  transition: opacity .3s ease;
}
body.alinea .al-pd .img-fade:hover {
  opacity: .88;
}

/* ---------- Galeri ---------- */
body.alinea .al-pd .slider-wrapper .slider-track {
  height: 100%;
}
body.alinea .al-pd .slider-wrapper .slide-item {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
body.alinea .al-pd #thumbsContainer .thumb-item {
  /* style.css mobile memberi `button { border: none }`; gaya garis dikembalikan di sini. */
  border-style: solid;
  border-width: 2px;
  border-color: var(--al-pd-line);
  display: block;
  width: 100%;
  background-color: #f5f5f4;
}
body.alinea .al-pd #thumbsContainer .thumb-item:hover {
  border-color: var(--al-pd-faint);
}
body.alinea .al-pd #thumbsContainer .thumb-item.active {
  border-color: var(--al-pd-ink);
}
body.alinea .al-pd #thumbsContainer .thumb-item:focus-visible {
  outline: 2px solid var(--al-pd-sienna);
  outline-offset: 2px;
}

/* ---------- Harga ---------- */
body.alinea .al-pd #product-price .line-through {
  margin-left: .5rem;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
  color: var(--al-pd-faint);
}

/* ---------- Deskripsi (isi DB) + lipat devorge ---------- */
body.alinea .al-pd .al-pd-desc > * + * {
  margin-top: .75rem;
}
body.alinea .al-pd .al-pd-desc p {
  margin: 0;
}
body.alinea .al-pd .al-pd-desc > * + p {
  margin-top: .75rem;
}
body.alinea .al-pd .al-pd-desc a {
  color: var(--al-pd-ink);
  text-decoration: underline;
  text-decoration-color: var(--al-pd-line);
  text-underline-offset: 3px;
}
body.alinea .al-pd .al-pd-desc a:hover {
  color: var(--al-pd-sienna);
}
body.alinea .al-pd .al-pd-desc strong,
body.alinea .al-pd .al-pd-desc b {
  font-weight: 600;
  color: var(--al-pd-ink);
}
body.alinea .al-pd .al-pd-desc ul,
body.alinea .al-pd .al-pd-desc ol {
  padding-left: 1.25rem;
}
body.alinea .al-pd .al-pd-desc ul { list-style: disc; }
body.alinea .al-pd .al-pd-desc ol { list-style: decimal; }
body.alinea .al-pd .al-pd-desc li {
  margin: .25rem 0; /* menimpa `ul li { margin: 10px 0 }` di style.css mobile */
}
body.alinea .al-pd .al-pd-desc img {
  max-width: 100%;
  height: auto;
}
body.alinea .al-pd .product-description-shell[data-description-ready="true"]:not(.is-expanded) .product-description-content {
  max-height: 21rem;
  overflow: hidden;
}
body.alinea .al-pd .product-description-shell.is-collapsible:not(.is-expanded)::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 2.75rem;
  left: 0;
  height: 5rem;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--al-pd-canvas));
}
body.alinea .al-pd .product-description-toggle i {
  transition: transform 160ms ease;
}
body.alinea .al-pd .product-description-shell.is-expanded .product-description-toggle i {
  transform: rotate(180deg);
}

/* ---------- Varian (tetap didukung; mockup tanpa varian) ---------- */
body.alinea .al-pd .al-pd-option {
  margin: 0;
}
body.alinea .al-pd .selectedvar {
  border-color: var(--al-pd-ink) !important;
  background-color: var(--al-pd-ink) !important;
  color: #fff !important;
}
/* Segitiga kuning + ikon centang `.selectedvar` dari style.css mobile dimatikan. */
body.alinea .al-pd .selectedvar::before,
body.alinea .al-pd .selectedvar::after {
  content: none !important;
  display: none !important;
}

/* ---------- Stepper qty ---------- */
body.alinea .al-pd .al-pd-qty {
  -moz-appearance: textfield;
  appearance: textfield;
  color: var(--al-pd-ink);
  border: 0;
  box-shadow: none;
  outline: none;
  min-width: 0;
}
body.alinea .al-pd .al-pd-qty::-webkit-outer-spin-button,
body.alinea .al-pd .al-pd-qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
body.alinea .al-pd .al-pd-stepper button {
  color: var(--al-pd-ink);
  line-height: 1.25rem;
}

/* ---------- Tombol beli ----------
   style.css mobile memberi #add-to-cart / #add-to-cart-var latar #555 lewat selektor ID; ditimpa di sini. */
body.alinea .al-pd #add-to-cart,
body.alinea .al-pd #add-to-cart-var {
  display: block;
  flex: 1 1 0%;
  width: auto;
  min-width: 0;
  margin: 0;
  background-color: var(--al-pd-ink);
  color: #fff;
  text-shadow: none;
  white-space: normal;
}
body.alinea .al-pd #add-to-cart:hover:not(:disabled),
body.alinea .al-pd #add-to-cart-var:hover:not(:disabled) {
  background-color: var(--al-pd-ink-hover);
}
body.alinea .al-pd #add-to-cart:disabled,
body.alinea .al-pd #add-to-cart-var:disabled {
  opacity: .5;
  cursor: not-allowed;
}
body.alinea .al-pd .al-pd-wa,
body.alinea .al-pd .al-pd-wa:hover {
  color: #fff;
  text-decoration: none;
}

/* ---------- Spesifikasi ---------- */
body.alinea .al-pd .al-pd-specs dd {
  margin: 0;
}

/* ---------- Breadcrumb ---------- */
body.alinea .al-pd .al-pd-breadcrumb a {
  color: inherit;
  text-decoration: none;
}
body.alinea .al-pd .al-pd-breadcrumb a:hover {
  color: var(--al-pd-ink);
}

/* ---------- Monograf terkait ---------- */
body.alinea .al-pd .al-pd-related h2 {
  margin: 0;
}

/* Kartu terkait memakai macro katalog (judul text-base sm:text-lg, harga text-xs sm:text-sm);
   di mockup detail kartunya lebih kecil: judul text-base leading-snug, harga text-xs. */
body.alinea .al-pd .al-pd-related .al-book h3 {
  font-size: 1rem;
  line-height: 1.375;
}
body.alinea .al-pd .al-pd-related .al-book .price-tag {
  font-size: .75rem;
  line-height: 1rem;
}

/* ---------- Radius dari pengaturan situs (live customizer) ----------
   Bingkai gambar utama & thumbnail = --site-image-radius; tombol, stepper, pilihan varian = --site-button-radius
   (preset "default" membuat variabel itu tidak sah, jadi cadangan 4px mockup yang dipakai). */
body.alinea .al-pd .al-pd-main,
body.alinea .al-pd #thumbsContainer .thumb-item {
  border-radius: var(--site-image-radius, 0px);
}
body.alinea .al-pd .al-pd-main img,
body.alinea .al-pd #thumbsContainer .thumb-item img {
  border-radius: 0;
}
body.alinea .al-pd #add-to-cart,
body.alinea .al-pd #add-to-cart-var,
body.alinea .al-pd .al-pd-wa,
body.alinea .al-pd .al-pd-email,
body.alinea .al-pd .al-pd-stepper,
body.alinea .al-pd .al-pd-option {
  border-radius: var(--site-button-radius, 4px);
}