/* ==========================================================================
   Alinea — pages.css (milik agen pages)
   Kulit halaman non-katalog: breadcrumb, footer, 404, arsip & detail esai, pencarian, galeri, halaman statis,
   keranjang (/cart), checkout (base checkout/checkout.twig), status pesanan (sukses/gagal/pending/stats),
   lacak & riwayat pesanan. Dimuat di semua halaman dan perangkat (layout alinea), jadi SEMUA selektor di bawah
   body.alinea dan dibatasi kelas kait halaman (.al-page, .al-footer, .al-shop, .checkout, modal checkout).
   Template keranjang/checkout tidak diubah logikanya: kulit hanya lewat kelas utilitas yang sudah ada + kelas kait
   .al-shop / .al-shop-crumbs. Warna/font = token mockup (tailwind.config index.html).
   ========================================================================== */

body.alinea {
  /* Warna dasar ikut webinfo (colorbody/bgbody lewat --site-* webstyle); aksen tetap palet tema */
  --alp-ink: var(--site-body-text, #161413);
  --alp-ink-muted: #6E6760;
  --alp-ink-faint: #9C958D;
  --alp-line: #E7E2D8;
  --alp-line-muted: #EFECE5;
  --alp-canvas: var(--site-body-bg, #FAF8F5);
  --alp-tint: #F3EEE7;
  --alp-sienna: #8C3D22;
  --alp-sienna-hover: #70301A;
  --alp-sienna-tint: #F5ECE6;
  --alp-gold: #A0804D;
  --alp-emerald: #047857;
  --alp-emerald-hover: #065f46;
  --alp-stone-800: #292524;
  --alp-stone-200: #e7e5e4;
  /* Font mengikuti variabel layout (webinfo.fonthead/fontbody), cadangan font mockup */
  --alp-serif: var(--al-font-head, 'Cormorant Garamond', Georgia, serif);
  --alp-sans: var(--al-font-body, 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif);
  /* Radius ikut live customizer (Setting radius preset default/none/soft/medium/round → webstyle-desktop.css.twig).
     --site-button-radius bernilai `initial` pada preset "default" → var() jatuh ke cadangan 4px (bentuk asli tema).
     --site-image-radius selalu berisi nilai (0px pada preset default/none). */
  --alp-r-btn: var(--site-button-radius, 4px);
  --alp-r-img: var(--site-image-radius, 0px);
}

/* ---------- Komponen kecil bersama (tombol, input, pill) ---------- */

body.alinea .al-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .875rem 1.75rem;
  border: 1px solid transparent;
  border-radius: var(--alp-r-btn);
  font-family: var(--alp-sans);
  font-size: .75rem;
  line-height: 1rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
}
body.alinea .al-btn--dark { background-color: var(--alp-ink); color: #fff; }
body.alinea .al-btn--dark:hover { background-color: var(--alp-stone-800); color: #fff; }
body.alinea .al-btn--outline { background-color: transparent; border-color: var(--alp-line); color: var(--alp-ink); font-weight: 500; }
body.alinea .al-btn--outline:hover { border-color: var(--alp-ink); }

body.alinea .al-input {
  background-color: #fff;
  border: 1px solid var(--alp-line);
  border-radius: var(--alp-r-btn);
  padding: .625rem .875rem;
  font-family: var(--alp-sans);
  font-size: .8125rem;
  line-height: 1.25rem;
  color: var(--alp-ink);
  outline: none;
  box-shadow: none;
  transition: border-color .2s ease;
}
body.alinea .al-input::placeholder { color: var(--alp-ink-faint); opacity: 1; }
body.alinea .al-input:focus { border-color: var(--alp-ink); }

body.alinea .al-pills { scrollbar-width: none; }
body.alinea .al-pills::-webkit-scrollbar { display: none; }
body.alinea .al-pill {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: .375rem .875rem;
  border: 1px solid var(--alp-line);
  border-radius: var(--alp-r-btn);
  background: transparent;
  color: var(--alp-ink-muted);
  font-family: var(--alp-sans);
  font-size: .75rem;
  line-height: 1rem;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
body.alinea .al-pill:hover { border-color: var(--alp-ink); color: var(--alp-ink); }
body.alinea .al-pill.is-active { background-color: var(--alp-ink); border-color: var(--alp-ink); color: #fff; }

/* ---------- Breadcrumb gaya mockup (kurasi/ruang-baca S3) ----------
   Layout alinea membungkus block breadcrumbs dengan kontainer mockup (max-w-7xl px-4 sm:px-6 lg:px-8). */
body.alinea .al-crumbs {
  padding-top: 2rem;
  margin-bottom: 1.5rem;
  font-family: var(--alp-sans);
  font-size: .75rem;
  line-height: 1rem;
  color: var(--alp-ink-muted);
}
body.alinea .al-crumbs ol { margin: 0; padding: 0; list-style: none; }
body.alinea .al-crumbs li { margin: 0; padding: 0; }
body.alinea .al-crumbs a { color: inherit; text-decoration: none; }
body.alinea .al-crumbs a:hover { color: var(--alp-ink); }
body.alinea .al-crumbs [aria-current] { color: var(--alp-ink); font-weight: 500; }

/* ---------- Halaman Alinea (.al-page): warna dasar, kartu esai, paginasi ---------- */

body.alinea .al-page { font-family: var(--alp-sans); color: var(--alp-ink); }
body.alinea .al-page h1,
body.alinea .al-page h2,
body.alinea .al-page h3 { font-family: var(--alp-serif); }
body.alinea .al-page .img-fade { transition: opacity .3s ease; }
body.alinea .al-page .img-fade:hover,
body.alinea .al-page .group:hover .img-fade { opacity: .88; }
body.alinea .al-page .ui-fade { transition: background-color .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease; }
body.alinea .al-page a { text-decoration: none; }
body.alinea .al-essay h2 a,
body.alinea .al-essay h3 a { color: inherit; }

body.alinea .al-page .pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .375rem;
  margin: 2rem 0 0;
}
body.alinea .al-page .pagination a,
body.alinea .al-page .pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  margin: 0;
  padding: 0 .625rem;
  border: 1px solid var(--alp-line);
  border-radius: var(--alp-r-btn);
  background: transparent;
  color: var(--alp-ink-muted);
  font-family: var(--alp-sans);
  font-size: .75rem;
  font-weight: 500;
  text-decoration: none;
  transform: none;
  box-shadow: none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
body.alinea .al-page .pagination a:hover { border-color: var(--alp-ink); color: var(--alp-ink); transform: none; }
body.alinea .al-page .pagination .current-page,
body.alinea .al-page .pagination span.current-page { background: var(--alp-ink); border-color: var(--alp-ink); color: #fff; }
body.alinea .al-page .pagination .disabled { opacity: .4; }

/* Galeri: tombol pembungkus lightbox tanpa gaya tombol bawaan */
body.alinea .al-gallery-card { background: transparent; border: 0; padding: 0; cursor: zoom-in; color: inherit; font: inherit; }
body.alinea .al-gallery-card:focus-visible { outline: 2px solid var(--alp-ink); outline-offset: 4px; border-radius: var(--alp-r-img); }

/* ---------- Isi artikel / halaman statis (.al-prose) ---------- */

body.alinea .al-prose {
  max-width: 42rem;
  font-family: var(--alp-sans);
  font-size: 1rem;
  line-height: 1.85;
  font-weight: 400;
  /* teks isi sedikit lebih lembut dari warna teks webinfo (dulu hex #3A3531 tetap) */
  color: color-mix(in srgb, var(--alp-ink) 86%, var(--alp-canvas));
  overflow-wrap: break-word;
}
@media (min-width: 640px) {
  body.alinea .al-prose { font-size: 1.0625rem; }
}
body.alinea .al-prose > :first-child { margin-top: 0; }
body.alinea .al-prose p { margin: 0 0 1.4em; }
body.alinea .al-prose h1,
body.alinea .al-prose h2,
body.alinea .al-prose h3,
body.alinea .al-prose h4,
body.alinea .al-prose .shop-inline-heading {
  font-family: var(--alp-serif);
  font-weight: 500;
  color: var(--alp-ink);
  letter-spacing: -.01em;
  line-height: 1.2;
}
body.alinea .al-prose h1 { font-size: 2.25rem; margin: 1.6em 0 .6em; }
body.alinea .al-prose h2 { font-size: 1.875rem; margin: 1.9em 0 .6em; }
body.alinea .al-prose h3 { font-size: 1.5rem; margin: 1.7em 0 .55em; }
body.alinea .al-prose h4 { font-size: 1.25rem; margin: 1.6em 0 .5em; }
body.alinea .al-prose h5,
body.alinea .al-prose h6 {
  font-family: var(--alp-sans);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--alp-ink-faint);
  margin: 2em 0 .75em;
}
body.alinea .al-prose .shop-inline-heading { display: inline; }
body.alinea .al-prose .shop-inline-heading-h1 { font-size: 2.25rem; }
body.alinea .al-prose .shop-inline-heading-h2 { font-size: 1.875rem; }
body.alinea .al-prose .shop-inline-heading-h3 { font-size: 1.5rem; }
body.alinea .al-prose .shop-inline-heading-h4 { font-size: 1.25rem; }
body.alinea .al-prose a {
  color: var(--alp-sienna);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(140, 61, 34, .35);
  transition: color .2s ease, text-decoration-color .2s ease;
}
body.alinea .al-prose a:hover { color: var(--alp-sienna-hover); text-decoration-color: currentColor; }
body.alinea .al-prose strong,
body.alinea .al-prose b { font-weight: 600; color: var(--alp-ink); }
body.alinea .al-prose em,
body.alinea .al-prose i { font-style: italic; }
body.alinea .al-prose blockquote {
  margin: 2em 0;
  padding: .1em 0 .1em 1.5em;
  border-left: 2px solid var(--alp-sienna);
  font-family: var(--alp-serif);
  font-size: 1.5rem;
  line-height: 1.45;
  font-style: italic;
  color: var(--alp-ink);
}
body.alinea .al-prose blockquote p { margin: 0 0 .5em; }
body.alinea .al-prose ul,
body.alinea .al-prose ol { margin: 0 0 1.4em; padding-left: 1.4em; }
body.alinea .al-prose ul { list-style: disc; }
body.alinea .al-prose ol { list-style: decimal; }
body.alinea .al-prose li { margin: .45em 0; padding: 0; }
body.alinea .al-prose li::marker { color: var(--alp-ink-faint); }
body.alinea .al-prose img { max-width: 100%; height: auto; border-radius: var(--alp-r-img); }
body.alinea .al-prose > img,
body.alinea .al-prose p > img:only-child,
body.alinea .al-prose figure { margin: 2em 0; }
body.alinea .al-prose figure img { margin: 0; }
body.alinea .al-prose figcaption { margin-top: .6em; font-size: .75rem; line-height: 1.5; color: var(--alp-ink-faint); text-align: center; }
body.alinea .al-prose hr { border: 0; border-top: 1px solid var(--alp-line); margin: 2.5em 0; }
body.alinea .al-prose table { width: 100%; margin: 2em 0; border-collapse: collapse; font-size: .875rem; }
body.alinea .al-prose th,
body.alinea .al-prose td { padding: .6em .75em; border-bottom: 1px solid var(--alp-line); text-align: left; vertical-align: top; }
body.alinea .al-prose th { font-weight: 600; color: var(--alp-ink); }
body.alinea .al-prose code { font-size: .875em; background: var(--alp-line-muted); padding: .1em .35em; border-radius: var(--alp-r-btn); }
body.alinea .al-prose iframe { max-width: 100%; }

/* Sisipan artikel/produk di isi artikel (gaya dasar di blok seo article.twig) */
body.alinea .al-prose .article-inline-embed {
  border: 1px solid var(--alp-line);
  border-radius: var(--alp-r-img);
  background: #fff;
  box-shadow: none;
}
body.alinea .al-prose .article-inline-embed a { color: inherit; text-decoration: none; }
body.alinea .al-prose .article-inline-embed img { margin: 0; border-radius: var(--alp-r-img); }
body.alinea .al-prose .article-inline-embed small { color: var(--alp-sienna); font-weight: 600; letter-spacing: .2em; }
body.alinea .al-prose .article-inline-embed strong { font-family: var(--alp-serif); font-weight: 500; font-size: 1.25rem; color: var(--alp-ink); }
body.alinea .al-prose .article-inline-embed em { color: var(--alp-ink-muted); }

/* ---------- Footer (.al-footer) ----------
   Warna lewat variabel webstyle (--site-footer-bg/-text/-link/-heading, diatur live customizer); cadangan = mockup. */

body.alinea .al-footer {
  background: var(--site-footer-bg, #161413);
  color: var(--site-footer-text, #a8a29e);
  font-family: var(--alp-sans);
}
body.alinea .al-footer__main,
body.alinea .al-footer__row { border-bottom: 1px solid rgba(255, 255, 255, .1); }
body.alinea .al-footer__logo { color: inherit; text-decoration: none; }
body.alinea .al-footer__brand { font-family: var(--alp-serif); color: var(--site-footer-heading, #fff); }
body.alinea .al-footer__tagline { color: var(--site-footer-text, #a8a29e); }
body.alinea .al-foot-block { font-size: .75rem; line-height: 1.625; }
body.alinea .al-foot-block > * + * { margin-top: .75rem; }
body.alinea .al-foot-title {
  margin: 0;
  font-family: var(--alp-serif);
  font-size: .875rem;
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--site-footer-heading, #fff);
}
body.alinea .al-foot-list { display: grid; gap: .5rem; margin-left: 0; margin-right: 0; margin-bottom: 0; padding: 0; list-style: none; }
body.alinea .al-foot-list li { margin: 0; padding: 0; }
body.alinea .al-footer .al-foot-link { color: var(--site-footer-link, #a8a29e); text-decoration: none; transition: color .2s ease; }
body.alinea .al-footer a.al-foot-link:hover { color: var(--site-footer-heading, #fff); }
/* .footer-text webstyle (15px) tidak berlaku: ukuran mengikuti blok (text-xs mockup) */
body.alinea .al-foot-block .al-foot-text { color: inherit; font-size: inherit; line-height: inherit; font-weight: inherit; }
body.alinea .al-foot-text a { color: var(--site-footer-link, #a8a29e); }
body.alinea .al-foot-text a:hover { color: var(--site-footer-heading, #fff); }
body.alinea .al-footer__bar { color: var(--site-footer-text, #a8a29e); }
body.alinea .al-footer__copy { margin: 0; }
body.alinea .al-footer__copy a { color: var(--site-footer-heading, #fff); text-decoration: none; }
body.alinea .al-footer__copy a:hover { text-decoration: underline; }
body.alinea .al-footer__badges p { margin: 0; }

/* Newsletter di blok footer (markup newsletter.js: wadah .flex + input email + .newsletter-subscribe-btn) */
body.alinea .al-footer input[type="email"],
body.alinea .al-footer input[type="text"] {
  width: 100%;
  margin: 0;
  padding: .5rem .75rem;
  background-color: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--alp-r-btn);
  font-family: var(--alp-sans);
  font-size: .75rem;
  line-height: 1rem;
  color: #fff;
  outline: none;
  box-shadow: none;
  transition: border-color .2s ease;
}
body.alinea .al-footer input[type="email"]::placeholder,
body.alinea .al-footer input[type="text"]::placeholder { color: #a8a29e; opacity: 1; }
body.alinea .al-footer input[type="email"]:focus,
body.alinea .al-footer input[type="text"]:focus { border-color: #fff; }
body.alinea .al-footer .newsletter-subscribe-btn,
body.alinea .al-footer #newsletter_subscribe {
  width: 100%;
  margin: 0;
  padding: .5rem 1rem;
  background-color: #fff;
  border: 0;
  border-radius: var(--alp-r-btn);
  font-family: var(--alp-sans);
  font-size: .75rem;
  line-height: 1rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--alp-ink);
  cursor: pointer;
  transition: background-color .2s ease;
}
body.alinea .al-footer .newsletter-subscribe-btn:hover,
body.alinea .al-footer #newsletter_subscribe:hover { background-color: var(--alp-stone-200); }

/* ==========================================================================
   KULIT TOKO: keranjang, checkout, status, lacak, riwayat
   Cakupan: .al-shop (template alinea checkout/*), .checkout (base checkout.twig), modal checkout, breadcrumb lama.
   ========================================================================== */

/* Breadcrumb bawaan template keranjang/status (kelas kait .al-shop-crumbs) */
body.alinea .al-shop-crumbs { border-bottom: 0 !important; }
body.alinea .al-shop-crumbs > div { padding-left: 0 !important; padding-right: 0 !important; }
body.alinea .al-shop-crumbs nav { padding: 2rem 0 0 !important; }
body.alinea .al-shop-crumbs ol { font-family: var(--alp-sans); font-size: .75rem !important; line-height: 1rem; color: var(--alp-ink-muted) !important; }
body.alinea .al-shop-crumbs a { color: inherit !important; text-decoration: none; }
body.alinea .al-shop-crumbs a:hover { color: var(--alp-ink) !important; }
body.alinea .al-shop-crumbs .text-slate-300 { color: inherit !important; }
body.alinea .al-shop-crumbs .text-slate-700 { color: var(--alp-ink) !important; font-weight: 500; }

/* Kontainer keranjang/riwayat selebar kontainer mockup (max-w-7xl lg:px-8) */
@media (min-width: 1024px) {
  body.alinea .al-shop--cart > .max-w-screen-xl,
  body.alinea .al-shop--history > .max-w-screen-xl { padding-left: 2rem; padding-right: 2rem; }
}

/* Dasar: font, warna teks, latar kanvas */
body.alinea :is(.al-shop, .checkout, #addressModal, #voucherModal, #paymentModal, #courierModal, #manualPaymentModal) {
  font-family: var(--alp-sans);
  color: var(--alp-ink);
}
body.alinea :is(.al-shop, .checkout).bg-slate-50 { background-color: transparent; }

/* Judul serif */
body.alinea :is(.al-shop, .checkout, #addressModal, #voucherModal, #paymentModal, #courierModal) :is(h1, h2, h3, h4) {
  font-family: var(--alp-serif);
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--alp-ink);
}
body.alinea :is(.al-shop, .checkout) h1 { font-size: 1.875rem; line-height: 1.15; font-weight: 400; }
@media (min-width: 640px) {
  body.alinea :is(.al-shop, .checkout) h1 { font-size: 2.25rem; }
}
body.alinea :is(.al-shop, .checkout) h2 { font-size: 1.375rem; line-height: 1.25; }
body.alinea :is(.al-shop, .checkout) h2.uppercase { font-size: .875rem; letter-spacing: .08em; line-height: 1.25rem; }
body.alinea :is(.al-shop, .checkout) :is(#cartPages, #checkoutPages) h4 { font-size: 1.0625rem; line-height: 1.3; font-weight: 500; }
body.alinea #exshopInvoice h1 { font-family: var(--alp-sans); font-size: 1.375rem; font-weight: 600; letter-spacing: 0; }

/* Peta warna teks utilitas → token */
body.alinea :is(.al-shop, .checkout, #addressModal, #voucherModal, #paymentModal, #courierModal, #manualPaymentModal) :is(.text-slate-900, .text-slate-800, .text-slate-700, .text-gray-900, .text-gray-800, .text-gray-700) { color: var(--alp-ink); }
body.alinea :is(.al-shop, .checkout, #addressModal, #voucherModal, #paymentModal, #courierModal, #manualPaymentModal) :is(.text-slate-600, .text-slate-500, .text-gray-600, .text-gray-500) { color: var(--alp-ink-muted); }
body.alinea :is(.al-shop, .checkout, #addressModal, #voucherModal, #paymentModal, #courierModal, #manualPaymentModal) :is(.text-slate-400, .text-slate-300, .text-gray-400) { color: var(--alp-ink-faint); }
body.alinea :is(.al-shop, .checkout, #addressModal, #voucherModal, #paymentModal, #courierModal, #manualPaymentModal) :is(.text-red-600, .text-red-500, .text-blue-600, .text-blue-500, .text-primary, .text-red-600\/50) { color: var(--alp-sienna) !important; }
body.alinea :is(.al-shop, .checkout, #addressModal, #voucherModal, #paymentModal, #courierModal, #manualPaymentModal) :is(.hover\:text-red-600, .hover\:text-red-700, .hover\:text-blue-600, .hover\:text-primary):hover { color: var(--alp-sienna) !important; }
body.alinea :is(.al-shop, .checkout) :is(.text-green-600, .text-green-500, .text-emerald-600) { color: var(--alp-emerald) !important; }
body.alinea :is(.al-shop, .checkout) :is(.text-amber-700, .text-amber-500) { color: var(--alp-gold) !important; }
body.alinea :is(.al-shop, .checkout) :is(.font-black, .font-bold) { font-weight: 600; }

/* Angka total: tinta, semibold, sans (bukan merah/oranye) */
body.alinea :is(.al-shop, .checkout) :is(#cartTotal, #total, #totalNoPayment, #checkoutTotalDisplay, .toprice, #checkoutPages .font-black) {
  color: var(--alp-ink) !important;
  font-family: var(--alp-sans);
  font-weight: 600;
}
body.alinea .al-shop #totalItems { color: var(--alp-sienna) !important; }

/* Latar, garis, sudut, bayangan */
body.alinea :is(.al-shop, .checkout, #addressModal, #voucherModal, #paymentModal, #courierModal) :is(.bg-slate-50, .bg-slate-50\/80, .bg-slate-50\/60, .bg-slate-50\/50, .bg-gray-50) { background-color: var(--alp-canvas); }
body.alinea :is(.al-shop, .checkout, #addressModal, #voucherModal, #paymentModal, #courierModal) :is(.bg-slate-100, .bg-gray-100) { background-color: var(--alp-tint); }
body.alinea :is(.al-shop, .checkout, #addressModal, #voucherModal, #paymentModal, #courierModal) :is(.bg-red-50, .bg-blue-50, .bg-primary\/5) { background-color: var(--alp-sienna-tint) !important; }
body.alinea :is(.al-shop, .checkout, #addressModal, #voucherModal, #paymentModal, #courierModal) :is(.hover\:bg-slate-50, .hover\:bg-slate-50\/50, .hover\:bg-slate-50\/30, .hover\:bg-slate-100, .hover\:bg-red-50):hover { background-color: var(--alp-canvas); }
body.alinea :is(.al-shop, .checkout, #addressModal, #voucherModal, #paymentModal, #courierModal) :is(.border-slate-200, .border-slate-300, .border-gray-200, .border-red-100, .border-red-200) { border-color: var(--alp-line); }
body.alinea :is(.al-shop, .checkout, #addressModal, #voucherModal, #paymentModal, #courierModal) :is(.border-slate-100, .border-slate-50) { border-color: var(--alp-line-muted); }
body.alinea :is(.al-shop, .checkout, #addressModal, #voucherModal, #paymentModal, #courierModal) :is(.border-red-500, .border-red-400, .border-red-300, .border-blue-500, .border-blue-600, .border-primary) { border-color: var(--alp-ink) !important; }
body.alinea :is(.al-shop, .checkout) :is(.divide-slate-100, .divide-slate-200, .divide-y) > * { border-color: var(--alp-line-muted); }
body.alinea :is(.al-shop, .checkout, #addressModal, #voucherModal, #paymentModal, #courierModal) :is(.rounded-xl, .rounded-2xl) { border-radius: var(--alp-r-img); }
body.alinea :is(.al-shop, .checkout, #addressModal, #voucherModal, #paymentModal, #courierModal) .rounded-lg { border-radius: var(--alp-r-img); }
body.alinea :is(.al-shop, .checkout, #addressModal, #voucherModal, #paymentModal, #courierModal) :is(.rounded-md, .rounded) { border-radius: var(--alp-r-btn); }
body.alinea :is(.al-shop, .checkout) :is(.shadow-sm, .shadow, .shadow-md, .border-2) { box-shadow: none; }
body.alinea :is(.al-shop, .checkout) .border-2 { border-width: 1px; }
body.alinea :is(.al-shop, .checkout) :is(.shadow-lg, .shadow-xl) { box-shadow: 0 12px 32px rgba(22, 20, 19, .08); }
body.alinea .al-shop--cart .sticky { box-shadow: none; border-top-color: var(--alp-line); }

/* Tombol utama: gelap, huruf kapital, tracking, sudut kecil */
body.alinea :is(.al-shop, .checkout, #addressModal, #voucherModal, #paymentModal, #courierModal) :is(a, button):is(.bg-red-600, .bg-blue-600, .bg-primary, .bg-slate-800, .bg-slate-900),
body.alinea :is(.al-shop, .checkout) :is(.checkout-btn, #confirmCheckout, #confirmCheckoutNoPayment, #changePaymentBtn, #openCourierModal, #trackPayMidtrans, [data-retry-payment]),
body.alinea .al-shop :is(a, button)[style*="background:#0f172a"],
body.alinea .al-shop :is(a, button)[style*="background:#dc2626"] {
  background-color: var(--alp-ink) !important;
  background-image: none !important;
  border-color: var(--alp-ink) !important;
  color: #fff !important;
  border-radius: var(--alp-r-btn) !important;
  font-family: var(--alp-sans);
  font-size: .75rem !important;
  line-height: 1rem;
  font-weight: 600 !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: none !important;
  transform: none !important;
}
body.alinea :is(.al-shop, .checkout, #addressModal, #voucherModal, #paymentModal, #courierModal) :is(a, button):is(.bg-red-600, .bg-blue-600, .bg-primary, .bg-slate-800, .bg-slate-900):hover,
body.alinea :is(.al-shop, .checkout) :is(.checkout-btn, #confirmCheckout, #confirmCheckoutNoPayment, #changePaymentBtn, #openCourierModal, #trackPayMidtrans, [data-retry-payment]):hover,
body.alinea .al-shop :is(a, button)[style*="background:#0f172a"]:hover,
body.alinea .al-shop :is(a, button)[style*="background:#dc2626"]:hover { background-color: var(--alp-stone-800) !important; }
body.alinea :is(.al-shop, .checkout) :is(.checkout-btn, #confirmCheckout, #confirmCheckoutNoPayment):disabled { opacity: .45; cursor: not-allowed; }
body.alinea :is(.al-shop, .checkout) :is(.checkout-btn, #confirmCheckout, #confirmCheckoutNoPayment) { padding-top: .95rem; padding-bottom: .95rem; }

/* Tombol WhatsApp (hijau) di halaman sukses: emerald seperti mockup */
body.alinea .al-shop a.bg-green-600 {
  background-color: var(--alp-emerald) !important;
  border-radius: var(--alp-r-btn) !important;
  font-size: .75rem !important;
  font-weight: 600 !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: none !important;
}
body.alinea .al-shop a.bg-green-600:hover { background-color: var(--alp-emerald-hover) !important; }

/* Tombol sekunder (abu) → garis tipis */
body.alinea .al-shop :is(a, button).bg-slate-100,
body.alinea .al-shop :is(a, button).bg-white.border,
body.alinea .checkout button.border-slate-300,
body.alinea :is(#addressModal, #voucherModal, #paymentModal, #courierModal) button:is(#cancelForm, #cancelModal, #cancelPayment, #cancelCourierBtn, [data-izimodal-close]):not(#confirmVoucher) {
  background-color: transparent !important;
  border: 1px solid var(--alp-line) !important;
  border-radius: var(--alp-r-btn) !important;
  color: var(--alp-ink) !important;
  font-size: .75rem !important;
  font-weight: 500 !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: none !important;
}
body.alinea .al-shop :is(a, button).bg-slate-100:hover,
body.alinea .al-shop :is(a, button).bg-white.border:hover,
body.alinea .checkout button.border-slate-300:hover,
body.alinea :is(#addressModal, #voucherModal, #paymentModal, #courierModal) button:is(#cancelForm, #cancelModal, #cancelPayment, #cancelCourierBtn, [data-izimodal-close]):not(#confirmVoucher):hover { border-color: var(--alp-ink) !important; }

/* Tombol dalam modal checkout */
body.alinea :is(#addressModal, #voucherModal, #paymentModal, #courierModal) :is(#saveForm, #confirmModal, #confirmPayment, #confirmCourier, #confirmVoucher, #applyManualVoucher) {
  background-color: var(--alp-ink) !important;
  color: #fff !important;
  border-radius: var(--alp-r-btn) !important;
  font-size: .75rem !important;
  font-weight: 600 !important;
  letter-spacing: .06em;
  text-transform: uppercase;
}
body.alinea :is(#addressModal, #voucherModal, #paymentModal, #courierModal) :is(#saveForm, #confirmModal, #confirmPayment, #confirmCourier, #confirmVoucher, #applyManualVoucher):hover { background-color: var(--alp-stone-800) !important; }
body.alinea :is(#addressModal, #voucherModal, #paymentModal, #courierModal) :is(#confirmPayment, #confirmCourier):disabled { opacity: .45; }

/* Kepala iziModal: warna tinta (checkout.js memberi headerColor merah) */
body.alinea .iziModal .iziModal-header { background: var(--alp-ink) !important; box-shadow: none !important; }
body.alinea .iziModal .iziModal-header-title { font-family: var(--alp-serif); font-weight: 500; letter-spacing: 0; }
body.alinea .iziModal { border-bottom-color: var(--alp-ink) !important; border-radius: var(--alp-r-img) !important; }

/* Input: garis tipis, sudut kecil, fokus tinta */
body.alinea :is(.al-shop, .checkout, #addressModal, #voucherModal, #paymentModal, #courierModal) :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], input:not([type]), textarea, select):not(.quantity-input) {
  background-color: #fff;
  border: 1px solid var(--alp-line);
  border-radius: var(--alp-r-btn);
  font-family: var(--alp-sans);
  font-size: .8125rem;
  color: var(--alp-ink);
  box-shadow: none;
  outline: none;
}
body.alinea :is(.al-shop, .checkout, #addressModal, #voucherModal, #paymentModal, #courierModal) :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], input:not([type]), textarea, select):not(.quantity-input):focus {
  border-color: var(--alp-ink);
  box-shadow: none;
  --tw-ring-color: transparent;
}
body.alinea :is(.al-shop, .checkout, #addressModal, #voucherModal, #paymentModal, #courierModal) :is(input, textarea)::placeholder { color: var(--alp-ink-faint); opacity: 1; }
body.alinea :is(.al-shop, .checkout, #addressModal, #voucherModal, #paymentModal, #courierModal) :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--alp-ink); }
body.alinea :is(.al-shop, .checkout) :is(input[type="checkbox"], input[type="radio"]):focus { box-shadow: none; --tw-ring-color: transparent; }

/* Label kepala kolom keranjang (desktop): huruf kecil kapital */
body.alinea .al-shop--cart :has(+ #cart) {
  background-color: transparent;
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--alp-ink-faint);
  border-bottom-color: var(--alp-line);
}

/* Baris item keranjang (markup cart.js) dan ringkasan checkout (markup checkout.js): sampul buku 3:4 */
body.alinea .al-shop #cartPages li > div > div > div > div:first-child:has(> img),
body.alinea .checkout #checkoutPages li > div > div:first-child:has(> img) {
  width: 3.75rem;
  height: 5rem;
  border-radius: var(--alp-r-img);
  border-color: var(--alp-line);
  box-shadow: none;
  background: var(--alp-tint);
}
body.alinea .al-shop #cartPages li img,
body.alinea .checkout #checkoutPages li img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
body.alinea .al-shop #cartPages li .h-8.w-24 { border-radius: var(--alp-r-btn); border-color: var(--alp-line); box-shadow: none; }
body.alinea .al-shop #cartPages .remove-btn:hover { color: #e11d48 !important; background-color: transparent !important; border-color: transparent !important; }
body.alinea .al-shop #cartPages a.bg-primary { border-radius: var(--alp-r-btn) !important; padding: .875rem 1.75rem; }
body.alinea .al-shop #cartPages .animate-spin,
body.alinea .al-shop #cart .animate-spin { border-color: var(--alp-ink); border-top-color: transparent; border-left-color: transparent; }

/* Checkout: hiasan amplop merah-biru disembunyikan; ikon opsi pengiriman/pembayaran bernada sienna */
body.alinea .checkout section > div[style*="repeating-linear-gradient"] { display: none; }
body.alinea .checkout section > div[style*="repeating-linear-gradient"] + div { margin-top: 0; }
body.alinea .checkout :is(.shipping-option-icon, .payment-option-icon) { background-color: var(--alp-sienna-tint) !important; color: var(--alp-sienna) !important; border-radius: var(--alp-r-btn); }
body.alinea .checkout :is(#shippingOptionCard, #paymentOptionCard) { border-radius: var(--alp-r-img); }
body.alinea .checkout :is(#shippingOptionCard, #paymentOptionCard):hover { border-color: var(--alp-ink); }
body.alinea .checkout #checkoutPages li.empty { padding: 1.25rem; font-size: .8125rem; color: var(--alp-ink-muted); }
body.alinea .checkout #customer .name { font-family: var(--alp-serif); font-size: 1.125rem; font-weight: 500; }
body.alinea .checkout .italic { font-style: normal; }

/* Status pesanan: ikon besar bernada tenang */
body.alinea .al-shop--status ion-icon.text-green-500 { color: var(--alp-emerald) !important; }
body.alinea .al-shop--status ion-icon.text-red-500 { color: var(--alp-sienna) !important; }
body.alinea .al-shop--status ion-icon.text-amber-500 { color: var(--alp-gold) !important; }
body.alinea .al-shop--status ion-icon.text-blue-500 { color: var(--alp-ink-muted) !important; }
body.alinea .al-shop--status .text-\[80px\] { font-size: 64px; }

/* Lacak pesanan: lencana status tetap berwarna semantik, hanya bentuknya dirapikan */
body.alinea .al-shop--track #exshopInvoice .rounded-full[style*="background"] { border-radius: var(--alp-r-btn); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; }
body.alinea .al-shop--track #exshopInvoice .uppercase.tracking-widest { letter-spacing: .14em; }
body.alinea .al-shop--track .bg-slate-950\/55 { background-color: rgba(22, 20, 19, .6); }

/* Riwayat pesanan (markup order-history.js) */
body.alinea .al-shop--history #exshopOrderHistory { font-family: var(--alp-sans); }
body.alinea .al-shop--history #exshopOrderHistory :is(button, a)[data-export-orders] { border-radius: var(--alp-r-btn); }

/* HP: tombol penuh lebar di kartu status tetap rapi */
@media (max-width: 639px) {
  body.alinea .al-shop--status .p-8 { padding: 1.5rem; }
}

/* ---------- Putaran verifikasi (6 Nov): selisih yang ditemukan saat uji alur ---------- */

/* webstyle-desktop.css memberi blockquote { margin: inherit !important } sehingga kutipan menempel ke paragraf */
body.alinea .al-prose blockquote { margin: 2em 0 !important; }

/* Keranjang: ruang kosong 200px di bawah daftar (min-h bawaan) dibuang; status memuat tetap berjarak dari py-20 */
body.alinea .al-shop--cart #cart { min-height: 0; }

/* Checkout tamu: "(opsional)" tetap sebaris dengan label Email (label bawaan berupa grid) */
body.alinea .checkout #customer label:has(> #guestEmail) { display: block; }
body.alinea .checkout #customer #guestEmail { display: block; margin-top: .25rem; }

/* Pilihan pembayaran & kurir: keadaan aktif bernada tinta/sienna, bukan oranye */
body.alinea :is(#paymentModal, #courierModal) :is(.payment-item, .courier-item) {
  border-color: var(--alp-line);
  border-radius: var(--alp-r-img);
  background: #fff;
}
body.alinea :is(#paymentModal, #courierModal) :is(.payment-item, .courier-item):hover { border-color: var(--alp-ink); background: var(--alp-canvas); }
body.alinea :is(#paymentModal, #courierModal) :is(.payment-item, .courier-item).active { border-color: var(--alp-ink) !important; background: var(--alp-sienna-tint) !important; }
body.alinea :is(#paymentModal, #courierModal) :is(.payment-item, .courier-item).active::after { color: var(--alp-sienna); }
body.alinea #paymentModal .payment-item .label { color: var(--alp-ink); font-weight: 600; }
body.alinea #paymentModal .payment-item .fee { border-radius: var(--alp-r-btn); background: var(--alp-tint); border-color: var(--alp-line); color: var(--alp-ink-muted); letter-spacing: .06em; }
/* Judul grup metode (BANK, QR CODE): label sans kecil, bukan judul serif */
body.alinea #paymentModal #paymentList h4 {
  font-family: var(--alp-sans);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--alp-ink-faint);
}

/* Modal petunjuk transfer manual (markup checkout.js, gaya inline): merah → tinta/sienna, kartu tanpa bayangan */
body.alinea #manualPaymentModal .bg-slate-50 { background-color: var(--alp-canvas) !important; }
body.alinea #manualPaymentModal :is(.rounded-xl, [style*="border-radius:12px"]) { border-radius: var(--alp-r-img) !important; box-shadow: none !important; border-color: var(--alp-line) !important; }
body.alinea #manualPaymentModal .instruction-body { color: var(--alp-ink-muted); }
body.alinea #manualPaymentModal .instruction-body p { color: var(--alp-ink-muted) !important; }
body.alinea #manualPaymentModal [style*="border-top:1px solid #e2e8f0"] { border-top-color: var(--alp-line) !important; color: var(--alp-ink) !important; }
body.alinea #manualPaymentModal strong[style*="#dc2626"] { color: var(--alp-sienna) !important; font-weight: 600; }
body.alinea #manualPaymentModal .border-slate-200 { border-color: var(--alp-line) !important; }
body.alinea #manualPaymentModal :is(#copyManualInstruction, #downloadQrisImage, [data-iziModal-close]) {
  border-radius: var(--alp-r-btn) !important;
  font-family: var(--alp-sans);
  font-size: .75rem !important;
  font-weight: 600 !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: none !important;
}
body.alinea #manualPaymentModal #copyManualInstruction { background: transparent !important; border: 1px solid var(--alp-line) !important; color: var(--alp-ink) !important; }
body.alinea #manualPaymentModal #copyManualInstruction:hover { border-color: var(--alp-ink) !important; }
body.alinea #manualPaymentModal :is(#downloadQrisImage, [data-iziModal-close]) { background: var(--alp-ink) !important; color: #fff !important; border: 1px solid var(--alp-ink) !important; }
body.alinea #manualPaymentModal :is(#downloadQrisImage, [data-iziModal-close]):hover { background: var(--alp-stone-800) !important; }

/* Tombol modal petunjuk & tombol aksi halaman sukses: teks kapital tetap satu baris */
body.alinea #manualPaymentModal :is(#copyManualInstruction, #downloadQrisImage, [data-iziModal-close]) { padding-left: .75rem !important; padding-right: .75rem !important; letter-spacing: .03em; white-space: nowrap; }
body.alinea .al-shop--status .grid > a.inline-flex { padding-left: .75rem; padding-right: .75rem; white-space: nowrap; letter-spacing: .04em; }

/* Lacak pesanan: tombol salin di modal instruksi transfer (inline biru) → tombol gelap */
body.alinea .al-shop :is(a, button)[style*="background:#2563eb"] {
  background-color: var(--alp-ink) !important;
  color: #fff !important;
  border-radius: var(--alp-r-btn) !important;
  font-size: .75rem !important;
  font-weight: 600 !important;
  letter-spacing: .06em;
  text-transform: uppercase;
}
body.alinea .al-shop :is(a, button)[style*="background:#2563eb"]:hover { background-color: var(--alp-stone-800) !important; }
body.alinea .al-shop [data-bank-instruction-modal] h2 { font-size: 1.5rem; font-weight: 500; }

/* HP: judul item keranjang tidak tertimpa ikon hapus (absolute top-4 right-4); kartu status tidak melayang di tengah 60vh */
@media (max-width: 767px) {
  body.alinea .al-shop--cart #cartPages h4 { padding-right: 2rem; }
}
@media (max-width: 639px) {
  body.alinea .al-shop--status { min-height: 0; align-items: flex-start; padding-top: 2rem; }
}
/* Halaman status (pending/gagal/stats): dua tombol inline-block disejajarkan */
body.alinea .al-shop--status a.inline-block { display: inline-flex; align-items: center; justify-content: center; line-height: 1rem; vertical-align: middle; }
@media (max-width: 639px) {
  body.alinea .al-prose blockquote { font-size: 1.3125rem; padding-left: 1.125em; }
}