/*
 * Alinea — CSS tingkat tema (dimuat layout di semua halaman dan perangkat, sesudah webstyle).
 * Milik agen chrome: dasar halaman, utilitas mockup (img-fade, ui-fade, clean-select, cat-tab, cart-backdrop,
 * cart-drawer), header, menu dropdown/mega menu, modal cari, laci navigasi HP, laci keranjang.
 * Semua selektor di bawah body.alinea agar tidak bocor ke tema lain. Warna dasar membaca variabel webinfo
 * (--site-*), nilai mockup sebagai cadangan.
 */

body.alinea {
  --al-canvas: var(--site-body-bg, #FAF8F5);
  --al-ink: var(--site-body-text, #161413);
  --al-ink-muted: #6E6760;
  --al-ink-faint: #9C958D;
  --al-line: #E7E2D8;
  --al-line-muted: #EFECE5;
  --al-sienna: #8C3D22;
  --al-sienna-hover: #70301A;
  --al-gold: #A0804D;
  --al-header-bg: var(--site-header-bg, #FAF8F5);
  --al-dark: var(--site-footer-bg, #161413);
  --al-header-h: 80px;
  --exshop-header-height: 81px;
  font-family: var(--al-font-body, 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif);
  background-color: var(--al-canvas);
  color: var(--al-ink);
  overflow-x: hidden;
}

body.alinea h1,
body.alinea h2,
body.alinea h3,
body.alinea h4,
body.alinea h5,
body.alinea h6,
body.alinea .heading-font {
  font-family: var(--al-font-head, 'Cormorant Garamond', Georgia, serif);
}

/* Elemen tanpa kelas font apa pun tetap memakai font body; kelas font-sans/font-serif/font-mono Tailwind menang. */
body.alinea .font-sans { font-family: var(--al-font-body, 'Plus Jakarta Sans', sans-serif); }
body.alinea .font-serif { font-family: var(--al-font-head, 'Cormorant Garamond', Georgia, serif); }

/* ---------- Utilitas mockup (CSS kustom index.html baris 35-70) ---------- */
body.alinea .img-fade { transition: opacity 0.3s ease; }
body.alinea .img-fade:hover { opacity: 0.88; }
body.alinea .ui-fade { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease; }
body.alinea .clean-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  outline: none;
}
body.alinea .cat-tab.active {
  background-color: #161413;
  color: #FFFFFF;
  border-color: #161413;
}
body.alinea .cart-backdrop { transition: opacity 0.3s ease, visibility 0.3s ease; }
body.alinea .cart-drawer { transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
body.alinea .scrollbar-none { scrollbar-width: none; }
body.alinea .scrollbar-none::-webkit-scrollbar { display: none; }

/* Cincin fokus keyboard untuk tautan/tombol; input memakai gaya fokusnya sendiri (focus:outline-none + border). */
body.alinea a:focus-visible,
body.alinea button:focus-visible,
body.alinea summary:focus-visible,
body.alinea [role="button"]:focus-visible { outline: 2px solid var(--al-ink); outline-offset: 2px; }
body.alinea .al-topbar a:focus-visible,
body.alinea .al-topbar select:focus-visible { outline: 1px solid #FFFFFF; outline-offset: 2px; }
body.alinea [data-alinea-cart-open]:focus-visible { outline-offset: 3px; }

/* ---------- Top bar ---------- */
body.alinea .al-topbar { background-color: var(--al-dark); }
body.alinea .al-topbar select { color: #FFFFFF; padding-right: 0; }
body.alinea .al-topbar select option { color: #161413; background-color: #FFFFFF; }

/* ---------- Header: posisi, mode, transparansi, tinggi logo dari setelan admin (navigation_config) ----------
   .al-header-wrap.is-sticky  = position "fixed" (menempel di atas saat digulir; top bar ikut tergulir seperti mockup).
   .al-header-wrap.is-overlay = position fixed/absolute + mode overlay di beranda: pembungkus setinggi 0 sehingga header
                                menumpuk di atas blok pertama tanpa memakan tempat.
   --al-hdr-alpha = transparent (0-100 %), --al-header-h = tinggi baris (logo gambar + 24 px, min 80 px). */
body.alinea .al-header-wrap { position: relative; z-index: 40; }
body.alinea .al-header-wrap.is-sticky { position: -webkit-sticky; position: sticky; top: 0; }
body.alinea .al-header-wrap.is-overlay { height: 0; }
body.alinea .al-header {
  --al-hdr-bg: var(--site-header-bg, #FAF8F5);
  --al-hdr-text: var(--site-header-text, #161413);
  --al-hdr-muted: color-mix(in srgb, var(--al-hdr-text) 62%, var(--al-hdr-bg));
  position: relative;
  color: var(--al-hdr-text);
  background-color: color-mix(in srgb, var(--al-hdr-bg) var(--al-hdr-alpha, 100%), transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--al-line) var(--al-hdr-alpha, 100%), transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
/* Transparansi 0: tanpa blur latar (seperti base --header-backdrop:none); padat lagi setelah digulir bila fixed. */
body.alinea .al-header--clear { -webkit-backdrop-filter: none; backdrop-filter: none; }
body.alinea .al-header.is-scrolled { background-color: var(--al-hdr-bg); border-bottom-color: var(--al-line); }
body.alinea .al-hdr-row { min-height: var(--al-header-h, 80px); }
body.alinea .al-hdr-navrow { min-height: 48px; border-top: 1px solid color-mix(in srgb, var(--al-line) var(--al-hdr-alpha, 100%), transparent); }
body.alinea .al-header.al-nav-collapsed .al-hdr-navrow { display: none !important; }
/* Logo terbelah: tombol cari ikon saja di desktop supaya kedua sisi menu seimbang dan logo tetap di tengah. */
@media (min-width: 1024px) {
  body.alinea .al-header--logosplit .al-split-side [data-search-toggler] > span { display: none; }
}

/* Warna header dari webinfo (colorhead/bghead lewat --site-header-*); token mockup di template dipetakan ke sini. */
body.alinea .al-header .text-ink,
body.alinea .al-header .hover\:text-ink:hover { color: var(--al-hdr-text); }
body.alinea .al-header .text-inkMuted { color: var(--al-hdr-muted); }
body.alinea .al-header .border-ink,
body.alinea .al-header .hover\:border-ink:hover { border-color: var(--al-hdr-text); }
body.alinea .al-header .bg-ink { background-color: var(--al-hdr-text); color: var(--al-hdr-bg); }
body.alinea .al-header .hover\:bg-stone-800:hover { background-color: color-mix(in srgb, var(--al-hdr-text) 82%, var(--al-hdr-bg)); }
body.alinea .al-header .al-cart-badge { background-color: var(--al-hdr-bg); color: var(--al-hdr-text); }
body.alinea .al-header .group:hover .group-hover\:text-sienna { color: var(--al-sienna); }

body.alinea .al-logo img { display: block; max-width: 260px; object-fit: contain; }
body.alinea .al-logo__text { display: block; }
body.alinea .al-header--logocenter .al-logo,
body.alinea .al-header--logosplit .al-logo { align-items: center; }
/* Seperti mockup: hanya item aktif yang ber-pb-1 + garis bawah, jadi teksnya naik +-2 px dari item lain. */
body.alinea .al-nav-link { display: inline-flex; align-items: center; white-space: nowrap; }
/* Lencana jumlah: px-1.5 py-0.5 dengan tinggi baris text-xs (16 px) seperti mockup -> bulat untuk satu digit. */
body.alinea .al-cart-badge { display: inline-flex !important; align-items: center; justify-content: center; }
body.alinea .al-carticon > a { white-space: nowrap; }
body.alinea [data-last-order-link]:not(.hidden) { display: inline-flex; }

/* Menu tidak muat (layar 1024-1100-an atau judul menu panjang dari admin): theme.js memberi .al-nav-tight (label
   tombol cari disembunyikan) lalu bila masih tidak muat .al-nav-collapsed (menu desktop disembunyikan, tombol laci HP
   dimunculkan). Menu tidak pernah turun baris atau menabrak logo. */
body.alinea .al-header.al-nav-tight [data-search-toggler] > span { display: none !important; }
body.alinea .al-header.al-nav-collapsed .al-nav { display: none !important; }
body.alinea .al-header.al-nav-collapsed [data-alinea-nav-open] { display: inline-flex !important; }

/* Menu desktop: dropdown dan mega menu dari partials/megamenu_container.twig (data menu admin). */
@media (min-width: 1024px) {
  body.alinea .al-nav .dv-nav-item { position: relative; display: flex; align-items: center; height: var(--al-header-h, 80px); }
  body.alinea .al-hdr-navrow .al-nav .dv-nav-item { height: 48px; }
  body.alinea .al-nav .dv-nav-item.has-megamenu-wide { position: static; }
  body.alinea .al-nav .dv-dropdown,
  body.alinea .al-nav .dv-megamenu {
    display: none;
    position: absolute;
    top: 100%;
    left: -1rem;
    z-index: 60;
    min-width: 240px;
    background: #FFFFFF;
    border: 1px solid var(--al-line);
    border-radius: 0 0 var(--site-image-radius, 0px) var(--site-image-radius, 0px);
    box-shadow: 0 24px 48px -24px rgba(22, 20, 19, 0.28);
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
    color: var(--al-ink-muted);
    margin: 0;
  }
  body.alinea .al-nav .dv-dropdown { padding: 8px 0 !important; list-style: none; }
  body.alinea .al-nav .dv-megamenu { padding: 24px 28px; box-sizing: border-box; width: max-content; max-width: min(calc(100vw - 32px), 1216px); }
  body.alinea .al-nav .dv-megamenu--container {
    left: 50%;
    transform: translateX(-50%);
    width: min(calc(100vw - 32px), 1216px);
    padding: 28px 32px;
  }
  body.alinea .al-nav .dv-megamenu--fluid { left: 0; right: 0; width: 100%; max-width: none; border-radius: 0; border-left: 0; border-right: 0; }
  body.alinea .al-nav .dv-megamenu--fluid .dv-megamenu-inner { max-width: 1216px; margin: 0 auto; }
  body.alinea .al-nav .dv-nav-item:hover > .dv-dropdown,
  body.alinea .al-nav .dv-nav-item:hover > .dv-megamenu,
  body.alinea .al-nav .dv-nav-item:focus-within > .dv-dropdown,
  body.alinea .al-nav .dv-nav-item:focus-within > .dv-megamenu { display: block; }
  body.alinea .al-nav .dv-sub-item { position: relative; }
  body.alinea .al-nav .dv-dropdown-sub {
    display: none;
    position: absolute;
    left: 100%;
    top: -9px;
    min-width: 220px;
    padding: 8px 0 !important;
    list-style: none;
    background: #FFFFFF;
    border: 1px solid var(--al-line);
    border-radius: var(--site-image-radius, 0px);
    box-shadow: 0 24px 48px -24px rgba(22, 20, 19, 0.28);
  }
  body.alinea .al-nav .dv-megamenu img { border-radius: var(--site-image-radius, 0px); }
  body.alinea .al-nav .dv-sub-item:hover > .dv-dropdown-sub,
  body.alinea .al-nav .dv-sub-item:focus-within > .dv-dropdown-sub { display: block; }
  body.alinea .al-nav .dv-dropdown a,
  body.alinea .al-nav .dv-dropdown-sub a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 20px;
    font-size: 13px;
    color: var(--al-ink-muted);
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
  }
  body.alinea .al-nav .dv-dropdown a:hover,
  body.alinea .al-nav .dv-dropdown-sub a:hover { background: var(--al-canvas); color: var(--al-ink); }
  body.alinea .al-nav .dv-megamenu-grid { display: flex; flex-wrap: wrap; gap: 24px; }
  body.alinea .al-nav .dv-megamenu-col { flex: 1 1 160px; min-width: 140px; max-width: 260px; }
  body.alinea .al-nav .dv-megamenu-head {
    display: block;
    font-family: var(--al-font-head, 'Cormorant Garamond', Georgia, serif);
    font-size: 16px;
    font-weight: 600;
    color: var(--al-ink);
    text-decoration: none;
    padding-bottom: 6px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--al-line);
  }
  body.alinea .al-nav a.dv-megamenu-head:hover { color: var(--al-sienna); }
  body.alinea .al-nav .dv-megamenu-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
  body.alinea .al-nav .dv-megamenu-link { display: block; font-size: 13px; color: var(--al-ink-muted); text-decoration: none; padding: 3px 0; }
  body.alinea .al-nav .dv-megamenu-link:hover { color: var(--al-sienna); }
}

/* ---------- Modal cari (kait search.js: kelas -translate-y-full / translate-y-0 ditukar skrip) ---------- */
body.alinea .al-search-overlay { z-index: 110; }
body.alinea .al-search {
  z-index: 120;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0s;
}
body.alinea .al-search.-translate-y-full {
  --tw-translate-y: -16px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}
body.alinea .al-search .search-input { box-shadow: none; }
body.alinea .al-search .search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
body.alinea #autocomplete-results { border-radius: 0; border-top: 0; }
body.alinea #autocomplete-results > div {
  padding: 8px;
  border: 1px solid transparent;
  border-radius: var(--site-image-radius, 0px);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
body.alinea #autocomplete-results > div:hover { background: var(--al-canvas); border-color: var(--al-line); }
body.alinea #autocomplete-results > div > a { display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; }
body.alinea #autocomplete-results img {
  width: 40px;
  height: 56px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: var(--site-image-radius, 0px);
  border: 1px solid rgba(231, 226, 216, 0.6);
}
body.alinea #autocomplete-results > div > a > span {
  font-family: var(--al-font-head, 'Cormorant Garamond', Georgia, serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--al-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.alinea #autocomplete-results > div > a:hover > span { color: var(--al-sienna); }
body.alinea #autocomplete-results > div.text-sm,
body.alinea #autocomplete-results > div[class*="p-3"] { font-size: 12px; color: var(--al-ink-muted); }
body.alinea #autocomplete-results > div:last-child:not(.al-sr) a,
body.alinea #autocomplete-results .text-blue-600,
body.alinea #autocomplete-results .text-blue-600 a {
  color: var(--al-sienna);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
body.alinea #autocomplete-results .text-blue-600:hover,
body.alinea #autocomplete-results > div:last-child:not(.al-sr) a:hover { background: transparent; border-color: transparent; text-decoration: underline; }

/* ---------- Laci navigasi HP: submenu dari partials/megamenu_mobile.twig ---------- */
body.alinea .al-mnav [data-submenu] {
  background: transparent;
  border: 0;
  min-width: 0;
  margin-top: 6px;
  padding: 2px 0 2px 12px;
  border-left: 1px solid var(--al-line);
  font-family: var(--al-font-body, 'Plus Jakarta Sans', sans-serif);
  list-style: none;
}
body.alinea .al-mnav [data-submenu].hidden { display: none; }
body.alinea .al-mnav [data-submenu] a {
  padding: 4px 0;
  font-size: 12px;
  font-weight: 400;
  color: var(--al-ink-muted);
  text-transform: none;
  letter-spacing: normal;
}
body.alinea .al-mnav [data-submenu] a:hover { color: var(--al-ink); }
body.alinea .al-mnav [data-submenu] .font-bold,
body.alinea .al-mnav [data-submenu] .uppercase { color: var(--al-ink); font-weight: 600; letter-spacing: 0.05em; }
body.alinea .al-mnav [data-submenu] [data-nested-menu] { background: transparent; padding-left: 10px; }
body.alinea .al-mnav [data-submenu] button { color: var(--al-ink-faint); padding: 4px; }
body.alinea .al-mnav [data-submenu] li { margin: 0; }
body.alinea .al-mnav [data-alinea-sub-toggle][aria-expanded="true"] svg { transform: rotate(180deg); }

/* ---------- Baris hasil cari bergaya mockup (digambar theme.js, kelas .al-sr) ---------- */
body.alinea #autocomplete-results > div.al-sr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: var(--site-image-radius, 0px);
}
body.alinea #autocomplete-results > div.al-sr:hover { background: var(--al-canvas); border-color: var(--al-line); }
body.alinea #autocomplete-results > div.al-sr > a { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; width: auto; }
body.alinea #autocomplete-results .al-sr__title {
  display: block;
  font-family: var(--al-font-head, 'Cormorant Garamond', Georgia, serif);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--al-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.2s ease;
}
body.alinea #autocomplete-results > div.al-sr > a:hover .al-sr__title { color: var(--al-sienna); }
body.alinea #autocomplete-results .al-sr__sub { margin: 0; font-size: 11px; line-height: 16px; color: var(--al-ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.alinea #autocomplete-results .al-sr__side { display: flex; align-items: center; gap: 12px; flex-shrink: 0; margin-left: 16px; }
body.alinea #autocomplete-results .al-sr__price { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--al-ink); white-space: nowrap; }
body.alinea #autocomplete-results .al-sr__buy {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--al-sienna);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  white-space: nowrap;
}
body.alinea #autocomplete-results .al-sr__buy:hover { text-decoration: underline; }
body.alinea #autocomplete-results .al-sr-empty { margin: 0; padding: 24px 0; text-align: center; font-size: 12px; color: var(--al-ink-muted); }
body.alinea #autocomplete-results > div.al-sr-more { padding: 8px; }
body.alinea #autocomplete-results > div.al-sr-more:hover { background: transparent; border-color: transparent; }
@media (max-width: 639px) {
  body.alinea #autocomplete-results .al-sr__side { margin-left: 8px; gap: 8px; }
}

/* ---------- Laci (keranjang & navigasi HP): panel difokus skrip, tanpa cincin fokus di sisi laci ---------- */
body.alinea #alineaCartDrawer:focus,
body.alinea [data-alinea-nav-panel]:focus { outline: none; }

/* ---------- Laci keranjang ---------- */
body.alinea #alineaCartDrawer [data-alinea-cart-list] img { background: #f5f5f4; }
body.alinea #alineaCartDrawer button:disabled { opacity: 0.4; cursor: not-allowed; }
/* Baris item digambar theme.js (kelas rounded-lg/rounded mockup): kartu dan sampul ikut radius gambar admin. */
body.alinea #alineaCartDrawer [data-cart-row],
body.alinea #alineaCartDrawer [data-cart-row] > img { border-radius: var(--site-image-radius, 0px); }

/* ---------- Toast iziToast dengan palet tema ---------- */
body.alinea .iziToast { border-radius: 4px; font-family: var(--al-font-body, 'Plus Jakarta Sans', sans-serif); }

/* ---------- Footer (grid dari footer builder; warna/tipografi blok di pages.css) ----------
   Tiap section = .al-footer__row (grid md:grid-cols-N, blok span 1/2). Baris dipisah garis tipis seperti mockup.
   Mockup: ul space-y-2 dengan tinggi baris text-xs (16 px), kolom space-y-3 antara paragraf dan formulir. */
body.alinea .al-footer .footer-block { margin: 0; }
body.alinea .al-footer .al-foot-list { line-height: 1rem; }
body.alinea .al-footer .al-foot-text > * + * { margin-top: 0.75rem; }
body.alinea .al-footer__row { border-bottom: 1px solid rgba(255, 255, 255, .1); }
body.alinea .al-footer__logo-img { display: block; height: auto; max-height: 48px; width: auto; max-width: 220px; object-fit: contain; }

/* ---------- Radius dari setelan admin (Website > Radius Gambar/Tombol, live customizer) ----------
   .al-r-img = kartu/gambar/panel (--site-image-radius: none/soft/medium/round).
   .al-r-btn = tombol & kontrol (--site-button-radius); preset "default" = bawaan tema (kelas rounded mockup).
   Elemen yang memang bulat (titik status, lencana jumlah rounded-full) tidak memakai kelas ini. */
body.alinea .al-r-img { border-radius: var(--site-image-radius, 0px); }
body.alinea[data-button-radius]:not([data-button-radius="default"]) .al-r-btn,
body.alinea[data-button-radius]:not([data-button-radius="default"]) #alineaCartDrawer [data-cart-row] div:has(> [data-cart-dec]) { border-radius: var(--site-button-radius); }

/* ---------- HP ---------- */
@media (max-width: 1023px) {
  body.alinea .al-header .al-nav { display: none; }
  body.alinea .al-hdr-row { min-height: 80px; }
  body.alinea .al-logo img { max-height: 48px; max-width: 180px; }
}

/* ---------- Ruang scrollbar tetap ----------
   Laci keranjang, laci menu, dan modal cari mengunci scroll dengan body overflow:hidden (theme.js lockScroll,
   search.js core). Tanpa ruang tetap, scrollbar hilang dan seluruh halaman bergeser ±15px saat dibuka/ditutup. */
html:has(> body.alinea) { scrollbar-gutter: stable; }

/* ---------- Footer: blok Newsletter (modul sistem, partial base footer_newsletter.twig) ---------- */
body.alinea .footer-newsletter__text { font-size: 12px; line-height: 1.6; font-weight: 300; color: var(--site-footer-text, #a8a29e); }
body.alinea .footer-newsletter__input { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); color: #fff; font-size: 12px; box-shadow: none; }
body.alinea .footer-newsletter__input::placeholder { color: #a8a29e; }
body.alinea .footer-newsletter__input:focus { border-color: #fff; box-shadow: none; }
body.alinea .footer-newsletter__button { background: #fff; color: var(--site-footer-bg, #161413); box-shadow: none; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
body.alinea .footer-newsletter__button:hover { background: #e7e5e4; }