/* Guest-first online order. Tokens inherit the public storefront settings. */
.oo-menu-intro { padding: clamp(32px, 5vw, 72px) 0 30px; background: var(--fe-sunken); border-bottom: 1px solid var(--fx-rule); }
.oo-menu-intro-inner { display: flex; align-items: end; justify-content: space-between; gap: 32px; }
.oo-kicker { display: block; color: var(--fp-accent); font-size: 12px; font-weight: 800; letter-spacing: .13em; }
.oo-menu-intro h1 { max-width: 680px; margin: 12px 0; font-size: clamp(32px, 4.5vw, 62px); line-height: 1.06; }
.oo-menu-intro p, .oo-checkout-head p { max-width: 650px; margin: 0; font-size: 16px; line-height: 1.6; color: var(--fx-body); }
.oo-steps { display: flex; gap: 8px; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
.oo-steps li { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 13px; border: 1px solid var(--fx-rule); border-radius: 7px; background: rgba(255,255,255,.55); color: var(--fx-body); font-size: 12px; font-weight: 700; white-space: nowrap; }
.oo-steps li span { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; border: 1px solid currentColor; font-variant-numeric: tabular-nums; }
.oo-steps .is-current { background: var(--fp-dark); color: #fff; border-color: var(--fp-dark); }
/* Membungkus dibiarkan; yang dirapikan perataan baris keduanya, agar pil yang turun tetap segaris dengan tepi kanan blok. */
.oo-menu-intro-inner .oo-steps { justify-content: flex-end; }

.oo-steps .is-done { color: #315f49; border-color: #95b3a0; background: #eaf3eb; }
.od-page .od-bar { position: sticky; top: 0; z-index: 20; box-shadow: 0 8px 24px rgba(23,31,24,.05); }
.od-page .od-item { padding: 15px; border-color: #e3dfd5; box-shadow: 0 3px 16px rgba(20,30,20,.035); }
.od-page .od-item:hover { border-color: #adb7a4; box-shadow: 0 10px 26px rgba(20,30,20,.08); }
.od-page .od-item-img { width: 104px; height: 104px; }
.od-page .od-item-name { font-size: 17px; }
.od-page .od-item-price { font-size: 16px; }
.od-page .od-add { min-width: 44px; min-height: 44px; }
.oo-item-context { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin: 0 0 24px; color: var(--fx-muted); font-size: 13px; }
.oo-item-context a { color: var(--fp-dark); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.oo-item-context a:focus-visible { outline: 3px solid var(--fp-accent); outline-offset: 3px; }
.oo-cart-note { margin: 0; padding: 12px 20px; color: var(--fx-body); background: var(--fe-sunken); border-bottom: 1px solid var(--fx-rule); font-size: 13px; line-height: 1.45; }
.oo-checkout-head { display: grid; gap: 15px; margin-bottom: 28px; }
.oo-checkout-head .fx-title { margin: 0; font-size: clamp(31px, 4vw, 48px); }
.oo-back { width: max-content; color: var(--fp-dark); font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.oo-back:hover { color: var(--fp-accent); }
.oo-checkout-head .oo-steps { margin-top: 10px; }
.oo-section-title { margin: 0 0 6px; font-size: 24px; }
.oo-section-copy, .oo-pay-note, .oo-pay-assurance { color: var(--fx-muted); font-size: 14px; line-height: 1.5; }
.oo-section-copy { max-width: 560px; margin-bottom: 24px; }
.oo-pay-note { margin: -2px 0 18px; }
.oo-pay-assurance { margin: 14px 0 0; }
.fx-checkout .fx-co-panel { border: 1px solid var(--fx-rule); box-shadow: 0 14px 40px rgba(24,33,23,.06); }
.fx-checkout .fx-pay { min-height: 70px; }
.fx-checkout .fx-pay-label small { display: block; margin-top: 3px; color: var(--fx-muted); font-size: 12px; font-weight: 500; }
.fx-checkout .fx-pay-btn { min-height: 52px; }
.fx-checkout .fx-pay-btn:disabled { opacity: .55; cursor: not-allowed; }
.oo-status-page { min-height: 65vh; display: grid; place-items: center; padding: 50px 18px 90px; background: var(--fx-paper); }
.oo-status-card { width: min(100%, 560px); padding: clamp(24px, 5vw, 48px); background: var(--fx-card); border: 1px solid var(--fx-rule); border-radius: 14px; box-shadow: 0 22px 60px rgba(24,33,23,.07); }
.oo-status-icon { display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 24px; color: #8a5d17; background: #fff0d5; border-radius: 13px; }
.oo-status-icon svg { width: 30px; height: 30px; }
.oo-status-card h1 { margin: 9px 0 14px; font-size: clamp(30px, 4vw, 42px); }
.oo-status-card p { line-height: 1.6; }
.oo-status-total { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 25px 0; padding: 18px 0; border-top: 1px solid var(--fx-rule); border-bottom: 1px solid var(--fx-rule); font-size: 15px; }
.oo-status-total strong { color: var(--fx-ink); font-size: 22px; }
.oo-status-hint { color: var(--fx-muted); font-size: 14px; }
.oo-status-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 25px; }
.oo-status-actions button, .oo-status-actions a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 18px; border-radius: 7px; font-weight: 700; text-decoration: none; }
.oo-status-actions button { border: 1px solid var(--fp-dark); color: #fff; background: var(--fp-dark); cursor: pointer; }
.oo-status-actions a { color: var(--fp-dark); border: 1px solid var(--fx-rule); }
.oo-status-actions button:hover { background: var(--fp-accent); border-color: var(--fp-accent); }
.oo-status-actions a:hover { border-color: var(--fp-dark); color: var(--fp-dark); }
.oo-status-actions :focus-visible, .oo-back:focus-visible, .od-page a:focus-visible { outline: 3px solid var(--fp-accent); outline-offset: 3px; }
@media (max-width: 850px) { .oo-menu-intro-inner { display: block; } .oo-menu-intro .oo-steps { margin-top: 24px; } }
@media (max-width: 575px) { .oo-menu-intro { padding: 28px 0 24px; } .oo-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; } .oo-steps li { flex-direction: column; text-align: center; white-space: normal; line-height: 1.2; font-size: 11px; padding: 8px 3px; } .od-page .od-item-img { width: 82px; height: 82px; } .oo-status-total { align-items: start; flex-direction: column; gap: 5px; } }
@media (prefers-reduced-motion: reduce) { .od-page .od-item, .oo-status-actions button { transition: none; } }

/* ======================================================================
   DETAIL HIDANGAN — arah "piring lalu nota"
   ----------------------------------------------------------------------
   MENGGANTIKAN, BUKAN MENAMBAL, tata letak dua kolom sebelumnya.
   Yang lama diukur begini pada hidangan sungguhan di layar 1351px:

       foto   544 x 544   (persegi, dipatok)
       panel  518 x 581
       sisa   ~400px kanvas kosong di bawah tombol, di kolom kanan

   Separuh layar pertama diberikan kepada satu foto yang di basis data
   ini sering belum diunggah — dan ketika belum, yang tampil kotak abu
   dengan ikon gambar rusak. Kolom keduanya tidak pernah bisa penuh
   karena panjangnya ditentukan isi formulir, bukan foto.

   Yang baru: SATU kolom. Foto jadi pita 16:10 selebar kolom, kartu
   pemesanan terangkat menindih tepi bawahnya. Tidak ada kolom kedua,
   jadi tidak ada ruang yang harus diisi; di layar lebar kolomnya
   sekadar melebar sampai 760px lalu berhenti — panjang baris teks
   tetap terbaca.

   WARNA. Token White Label dipertahankan (--fe-primary diturunkan dari
   --primary-color yang ditulis main.js). Yang berubah LETAKNYA: seluruh
   halaman kertas dan tinta, aksen merek hanya pada DUA hal — harga dan
   tombol tambah ke keranjang. Baris modifier netral sampai dicentang.
   Saran basis data skill UI (merah #DC2626) tidak dipakai; itu akan
   mematikan warna per-penyewa, dan v3 sudah mencatat keputusan itu.

   TIDAK ADA BILAH LENGKET DI BAWAH. Sempat direncanakan, lalu dibatalkan
   setelah membaca frontend-v3.css bagian 6/6b: di ponsel sudah ada
   .fx-tabbar DAN .fe3-cartbar yang bergantian menempel di tepi bawah.
   Bilah ketiga akan menumpuk di atas keduanya.
   ====================================================================== */

.fd-page {
  padding: 16px 0 clamp(36px, 5vw, 64px);
  background: var(--fx-paper);
}

/* Satu ukuran kolom dipakai pita foto, kartu, dan hidangan terkait,
   supaya tepi kiri semuanya segaris dari atas sampai bawah. */
.fd-col {
  width: min(100% - 40px, 760px);
  margin-inline: auto;
}

.fd-topbar { padding-bottom: 14px; }

.fd-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 2px;
  color: var(--fx-body);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
}

.fd-back svg { width: 17px; height: 17px; flex: none; }
.fd-back:hover { color: var(--fx-ink); }

.fd-back:focus-visible {
  outline: 2px solid var(--fe-ink);
  outline-offset: 3px;
  border-radius: 6px;
}

/* --- Pita foto ------------------------------------------------------ */
/* Huruf awal nama hidangan duduk di belakang gambar. Kalau gambarnya
   404 — dan di salinan ini uploads/website/ memang kosong — markup
   menyembunyikan <img> lewat onerror dan pelat berhurufnya yang
   tertinggal. Yang dihindari: ikon gambar rusak setinggi 544px. */
.fd-plate {
  position: relative;
  display: grid;
  place-items: center;
  margin: 0;
  aspect-ratio: 16 / 10;
  border-radius: 18px;
  overflow: hidden;
  background:
    linear-gradient(160deg,
      color-mix(in srgb, var(--fe-sunken) 88%, #fff),
      color-mix(in srgb, var(--fe-sunken) 72%, #000 5%));
}

.fd-plate-mono {
  font-family: var(--fx-serif);
  font-size: clamp(66px, 15vw, 140px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.04em;
  color: color-mix(in srgb, var(--fx-ink) 14%, transparent);
  user-select: none;
}

/* Tanpa foto, pitanya dipendekkan. Menyisakan tinggi untuk gambar yang
   tidak pernah datang hanya memindahkan isi halaman ke bawah lipatan. */
.fd-plate--kosong { aspect-ratio: 21 / 9; }

.fd-plate--kosong .fd-plate-mono { font-size: clamp(54px, 10vw, 96px); }

.fd-plate-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Kartu pemesanan ------------------------------------------------ */
.fd-card {
  position: relative;
  z-index: 1;
  margin-top: calc(-1 * clamp(26px, 5vw, 52px));
  padding: clamp(20px, 4vw, 34px);
  background: var(--fx-card);
  border: 1px solid var(--fx-rule);
  border-radius: 18px;
  box-shadow: 0 18px 46px rgba(24, 33, 23, .07);
}

.fd-name {
  margin: 0;
  font-family: var(--fx-serif);
  font-size: clamp(27px, 4.6vw, 40px);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.035em;
  color: var(--fx-ink);
}

.fd-pricerow {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 12px;
}

/* Salah satu dari dua tempat aksen merek dipakai di halaman ini.
   tabular-nums supaya angkanya tidak bergeser saat variation.js
   menimpa isinya. */
.fd-price {
  margin: 0;
  font-size: clamp(21px, 3vw, 27px);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--fe-ink);
  font-variant-numeric: tabular-nums;
}

.fd-cal {
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--fe-sunken);
  color: var(--fx-body);
  font-size: 12.5px;
  font-weight: 600;
}

.fd-desc {
  max-width: 62ch;
  margin: 14px 0 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--fx-body);
}

/* --- Kelompok pilihan ----------------------------------------------- */
/* Garis rambut, bukan kotak di dalam kotak: kartunya sudah punya satu
   bingkai, dan bingkai kedua membuat isinya terasa terkurung. */
.fd-group {
  margin-top: clamp(20px, 3vw, 28px);
  padding-top: clamp(18px, 2.6vw, 24px);
  border-top: 1px solid var(--fx-rule);
}

.fd-group-title {
  margin: 0 0 12px;
  font-family: var(--fx-sans);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fx-muted);
}

.fd-label {
  display: block;
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--fx-body);
}

.fd-select,
.fd-textarea {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--fx-rule);
  border-radius: 11px;
  background: var(--fx-card);
  color: var(--fx-ink);
  font-family: var(--fx-sans);
  /* 16px: di bawah itu iOS memperbesar halaman saat ruas difokus. */
  font-size: 16px;
  line-height: 1.45;
}

.fd-textarea { resize: vertical; }

/* assets/website/css/style.css:5623 memakai pemilih id (#variation_select { width: 420px }), jadi .fd-select sendirian
   selalu kalah. Idnya disebut di sini supaya beratnya sama, bukan
   dengan !important. */
#variation_select.fd-select { width: 100%; }

.fd-select:focus-visible,
.fd-textarea:focus-visible,
.fd-select:focus,
.fd-textarea:focus {
  outline: 2px solid var(--fe-ink);
  outline-offset: 2px;
  border-color: transparent;
}

/* --- Baris modifier -------------------------------------------------- */
/* Bingkai, latar, dan sudutnya ada di LABEL, bukan di baris .fd-mod.
   Alasannya teknis: keadaan tercentang hanya bisa dijangkau dari
   kotak centang ke saudaranya (.fd-mod-input:checked + .fd-mod-label),
   tidak ke induknya. Menaruh gayanya di label membuat aturan tercentang
   mungkin tanpa :has(). */
/* Membatalkan gaya warisan assets/website/css/style.css:4382-4414.
   Kelasnya dipertahankan di markup karena order.js memakainya untuk
   .closest(); yang dibatalkan tampilannya saja. Tanpa blok ini label
   modifier menyusut ke 212px di dalam baris selebar 650px, dan namanya
   dipaksa 13px tebal. */
.fd-mods.customize-variation-wrapper {
  position: static;
  height: auto;
  margin: 0;
  padding: 0;
  overflow: visible;
  background: none;
  border-radius: 0;
}

.fd-mod.customize-variation-item {
  display: block;
  margin: 0;
}

.fd-mod.customize-variation-item .fd-mod-label,
.fd-mod.customize-variation-item .fd-mod-name {
  font-size: 15px;
  font-weight: 500;
}

.fd-mod.customize-variation-item .fd-mod-price {
  font-size: 14px;
  font-weight: 600;
}

.fd-mods {
  display: grid;
  gap: 8px;
}

.fd-mod { position: relative; }

/* Kotak centang menutupi SELURUH baris dan tembus pandang. Itu yang
   membuat seluruh baris jadi sasaran sentuh tanpa label ganda: klik di
   mana pun mengenai input, jadi tidak ada klik label yang menyusul dan
   mengubahnya balik. Ia tetap dapat difokus keyboard — display:none
   akan mengeluarkannya dari urutan tab. */
.fd-mod-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  z-index: 1;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.fd-mod-label {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid var(--fx-rule);
  border-radius: 12px;
  background: var(--fx-card);
  color: var(--fx-ink);
  font-size: 15px;
  cursor: pointer;
  transition: background-color 140ms var(--fx-ease),
              border-color 140ms var(--fx-ease);
}

.fd-mod-tick {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--fx-rule);
  border-radius: 7px;
  background: var(--fx-card);
  color: transparent;
  transition: background-color 140ms var(--fx-ease),
              border-color 140ms var(--fx-ease),
              color 140ms var(--fx-ease);
}

.fd-mod-tick svg { width: 13px; height: 13px; }

.fd-mod-name {
  flex: 1 1 auto;
  min-width: 0;
}

.fd-mod-price {
  flex: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--fx-body);
  font-variant-numeric: tabular-nums;
}

.fd-mod-input:hover + .fd-mod-label {
  border-color: color-mix(in srgb, var(--fx-ink) 22%, var(--fx-rule));
}

.fd-mod-input:checked + .fd-mod-label {
  border-color: color-mix(in srgb, var(--fe-primary) 38%, var(--fx-rule));
  background: color-mix(in srgb, var(--fe-primary) 5%, var(--fx-card));
}

.fd-mod-input:checked + .fd-mod-label .fd-mod-tick {
  border-color: var(--fe-ink);
  background: var(--fe-ink);
  color: #fff;
}

/* Fokus keyboard harus terlihat sendiri: kotak centangnya tembus
   pandang, jadi cincin bawaan peramban tidak terlihat di mana pun. */
.fd-mod-input:focus-visible + .fd-mod-label {
  outline: 2px solid var(--fe-ink);
  outline-offset: 2px;
}

/* Pesan daring dimatikan: tidak ada kotak centang di markup, jadi
   labelnya menjadi anak pertama. Kotak centang hias dihilangkan supaya
   tidak menjanjikan pilihan yang tidak bisa dipilih. */
.fd-mod-label:first-child .fd-mod-tick { display: none; }
.fd-mod-label:first-child { cursor: default; }

/* --- Jumlah, total, tombol ------------------------------------------- */
.fd-buy {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: clamp(20px, 3vw, 28px);
  padding-top: clamp(18px, 2.6vw, 24px);
  border-top: 1px solid var(--fx-rule);
}

.fd-qtyfield .fd-label { margin-bottom: 8px; }

.fd-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--fx-rule);
  border-radius: 12px;
  background: var(--fx-card);
  overflow: hidden;
}

/* PENTING: main.js mengikat setiap <span> di dalam .qty ke penambah
   atau pengurang jumlah, jadi aturan ini memang harus mengenai SEMUA
   span di sini — dan markupnya tidak boleh punya span lain. */
.fd-qty span {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: var(--fx-ink);
  cursor: pointer;
  user-select: none;
  transition: background-color 140ms var(--fx-ease);
}

.fd-qty span svg { width: 17px; height: 17px; }

/* Menyamakan berat pemilih dengan `.qty span.qty-add` di
   assets/website/css/style.css, yang memberi 34x34, latar #f2f2f2, dan
   radius 170px. `.fd-qty span` sendirian kalah berat, bukan kalah
   urutan — menaikkan urutan berkas tidak akan menolong. */
.fd-qty span.qty-add,
.fd-qty span.qty-subtract {
  /* !important di sini melawan `width: 34px !important` pada
     .qty span.qty-add di assets/website/css/style.css. Deklarasi
     ber-!important hanya kalah pada !important lain. Tingginya di
     sana TIDAK ber-!important, jadi cukup satu ruas ini. */
  width: 48px !important;
  height: 48px;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.fd-qty span.qty-add:hover,
.fd-qty span.qty-subtract:hover { background: var(--fe-sunken); }

.fd-qty span:hover { background: var(--fe-sunken); }

.fd-qty span:focus-visible {
  outline: 2px solid var(--fe-ink);
  outline-offset: -2px;
}

.fd-qty input {
  width: 56px;
  height: 48px;
  padding: 0;
  border: 0;
  border-inline: 1px solid var(--fx-rule);
  border-radius: 0;
  background: transparent;
  color: var(--fx-ink);
  text-align: center;
  font-family: var(--fx-sans);
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.fd-qty input:focus-visible {
  outline: 2px solid var(--fe-ink);
  outline-offset: -2px;
}

/* style.css memberi .text-center-total-amount `padding-top: 11px
   !important` dan text-align:center. Dua-duanya dibatalkan di sini,
   yang !important perlu dilawan !important. */
.fd-total {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  padding-top: 0 !important;
  text-align: right;
}

.fd-total-label {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fx-muted);
}

.fd-total .show_total_amount {
  font-family: var(--fx-serif);
  font-size: clamp(21px, 3vw, 27px);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--fx-ink);
  font-variant-numeric: tabular-nums;
}

/* Tempat kedua — dan terakhir — aksen merek dipakai di halaman ini. */
.fd-atc {
  display: block;
  width: 100%;
  min-height: 54px;
  margin-top: 18px;
  padding: 14px 20px;
  border: 0;
  border-radius: 12px;
  background: var(--fe-ink);
  color: #fff;
  font-family: var(--fx-sans);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 150ms var(--fx-ease);
}

.fd-atc:hover { background: var(--fe-ink-hover); }

.fd-atc:focus-visible {
  outline: 2px solid var(--fx-ink);
  outline-offset: 3px;
}

/* order.js memunculkan tautan ini dengan .show(), yang menulis
   `display: inline` sebagai gaya sebaris — jadi tinggi sasarannya tidak
   bisa dari min-height. Dari padding-block. */
.fd-after {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 22px;
  margin-top: 12px;
}

.fd-link {
  padding-block: 10px;
  color: var(--fe-ink);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.fd-link:hover { color: var(--fe-ink-hover); }

.fd-link:focus-visible {
  outline: 2px solid var(--fe-ink);
  outline-offset: 3px;
  border-radius: 5px;
}

/* --- Hidangan terkait ------------------------------------------------ */
/* Kartu .od-item yang sama dengan halaman menu. Yang lama memakai
   .product: teks "ORDER NOW" di sana membungkus DI ATAS tombol panah
   bundarnya. Memakai ulang kartu menu sekaligus membuat halaman ini
   berakhir dengan kosakata tempat pengunjung datang. */
.fd-related {
  padding-block: clamp(36px, 5vw, 64px);
  background: var(--fe-sunken);
  border-top: 1px solid var(--fx-rule);
}

.fd-related-title {
  margin: 0 0 18px;
  font-family: var(--fx-serif);
  font-size: clamp(21px, 3vw, 29px);
  font-weight: 600;
  letter-spacing: -.03em;
  color: var(--fx-ink);
}

.fd-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 4px 18px;
}

@media (max-width: 560px) {
  .fd-plate { aspect-ratio: 3 / 2; }
  .fd-plate--kosong { aspect-ratio: 2 / 1; }
  .fd-col { width: min(100% - 28px, 760px); }
  .fd-buy { align-items: stretch; }
  .fd-total { align-items: flex-start; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .fd-mod-label,
  .fd-mod-tick,
  .fd-qty span,
  .fd-atc { transition: none; }
}

/* ======================================================================
   KEPING KATEGORI — keterbacaan label
   ----------------------------------------------------------------------
   DIUKUR di peramban, bukan dibaca dari kaskade:

       keping AKTIF   teks #000E74 di atas #202720  ->  1,04:1   GAGAL
       keping biasa   teks #495249 di atas #FFFDF8  ->  7,99:1   lolos

   Nama kategori pada keping aktif praktis tidak terbaca — navy tua di
   atas hijau-hitam. Penyebabnya dua lapisan yang setengah-setengah
   sepakat: public-redesign.css menyetel LATAR keping aktif ke --fp-dark
   tetapi tidak menyetel warna teksnya, jadi teks itu tetap mewarisi
   aksen merek dari lapisan di bawahnya.

   Sekaligus bobotnya diturunkan. Nama kategori datang dari basis data
   dalam HURUF BESAR SEMUA ("BREAKFAST", "SOFT DRINK"); huruf besar pada
   bobot 600 membuat baris kategori berteriak lebih keras daripada nama
   hidangan di bawahnya, yang justru isi halamannya.
   ====================================================================== */

.od-cats .od-cat .od-cat-name {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .005em;
}

.od-cats .od-cat.active,
.od-cats .od-cat.active .od-cat-name {
  color: #fff;
}

/* Tetap dibedakan bobotnya, bukan warnanya saja (1.4.1). */
.od-cats .od-cat.active .od-cat-name { font-weight: 600; }

/* ======================================================================
   DIALOG OPSI (.od-modal)
   ----------------------------------------------------------------------
   Muncul HANYA untuk hidangan yang punya varian atau modifier. Untuk
   sisanya tombol tambah langsung memasukkan ke keranjang — dialog yang
   isinya cuma "jumlah: 1" adalah rintangan, bukan pilihan.

   Di ponsel ia lembar bawah, bukan kotak di tengah: ibu jari ada di
   bawah layar, dan tombol tambahnya harus ada di sana juga.
   ====================================================================== */

.od-modal {
  position: fixed;
  inset: 0;
  z-index: 1090;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.od-modal[hidden] { display: none; }

body.od-modal-open { overflow: hidden; }

.od-modal-scrim {
  position: absolute;
  inset: 0;
  background: rgba(24, 28, 22, .5);
}

.od-modal-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(100%, 460px);
  max-height: min(88vh, 720px);
  background: var(--fx-card);
  border-radius: 18px;
  box-shadow: 0 28px 70px rgba(20, 26, 20, .28);
  overflow: hidden;
}

.od-modal-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 20px 12px;
}

.od-modal-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-family: var(--fx-serif);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.025em;
  color: var(--fx-ink);
}

.od-modal-x {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--fx-rule);
  border-radius: 11px;
  background: var(--fx-card);
  color: var(--fx-body);
  cursor: pointer;
}

.od-modal-x svg { width: 17px; height: 17px; }

/* Diukur di lebar 375px: tombol tutup 40x40 dan aksi kartu keranjang
   34x34. Keduanya lolos ambang WCAG 2.2 untuk web (24px), tetapi di
   layar yang benar-benar disentuh jari keduanya dinaikkan ke 44px. */
@media (pointer: coarse) {
  /* Ringkasan syarat dirender 53x40 -- teksnya pendek, jadi yang
     dinaikkan tingginya, bukan lebarnya. */
  .oo-offer-terms > summary { min-height: 44px; }
  .od-modal-x { width: 44px; height: 44px; }
  .fx-cart .cart-card-actions { gap: 8px; }
  .fx-cart .cart-card-actions > button { width: 44px; height: 44px; }
  .fx-cart .sidebar-cart-card .card-title { padding-right: 100px; }
}
.od-modal-x:hover { background: var(--fe-sunken); color: var(--fx-ink); }

.od-modal-x:focus-visible {
  outline: 2px solid var(--fe-ink);
  outline-offset: 2px;
}

.od-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0 20px 4px;
}

.od-modal-price {
  margin: 0 0 4px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--fe-ink);
  font-variant-numeric: tabular-nums;
}

.od-modal-group {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--fx-rule);
}

.od-modal-group[hidden] { display: none; }

.od-modal-group-title {
  margin: 0 0 10px;
  font-family: var(--fx-sans);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fx-muted);
}

.od-modal-label {
  display: block;
  margin: 0 0 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--fx-body);
}

.od-modal-select,
.od-modal-textarea {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--fx-rule);
  border-radius: 11px;
  background: var(--fx-card);
  color: var(--fx-ink);
  font-family: var(--fx-sans);
  /* 16px: di bawah itu iOS memperbesar halaman saat ruas difokus. */
  font-size: 16px;
  line-height: 1.45;
}

.od-modal-textarea { resize: vertical; }

.od-modal-select:focus-visible,
.od-modal-textarea:focus-visible,
.od-modal-select:focus,
.od-modal-textarea:focus {
  outline: 2px solid var(--fe-ink);
  outline-offset: 2px;
  border-color: transparent;
}

/* Galat "pilih varian dulu" duduk DI BAWAH ruasnya, bukan sebagai toast:
   yang perlu diperbaiki ada di sini, jadi pesannya juga. */
.od-modal-err {
  margin: 8px 0 0;
  color: #b42318;
  font-size: 13px;
  font-weight: 600;
}

.od-modal-err[hidden] { display: none; }

.od-modal-foot {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  padding: 16px 20px 20px;
  border-top: 1px solid var(--fx-rule);
  background: var(--fx-card);
}

.od-modal-qty { flex: none; }
.od-modal-qty .od-modal-label { margin-bottom: 7px; }

.od-modal-add {
  flex: 1 1 auto;
  min-height: 50px;
  padding: 13px 18px;
  border: 0;
  border-radius: 12px;
  background: var(--fe-ink);
  color: #fff;
  font-family: var(--fx-sans);
  font-size: 15.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 150ms var(--fx-ease);
}

.od-modal-add:hover { background: var(--fe-ink-hover); }

.od-modal-add:focus-visible {
  outline: 2px solid var(--fx-ink);
  outline-offset: 3px;
}

/* Tombol tambah di baris daftar kini <button>, bukan <a>. */
button.od-add {
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

@media (max-width: 560px) {
  .od-modal { align-items: flex-end; padding: 0; }
  .od-modal-panel {
    width: 100%;
    max-height: 92vh;
    border-radius: 18px 18px 0 0;
  }
  .od-modal-foot { padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
}

/* ======================================================================
   KERANJANG
   ----------------------------------------------------------------------
   Kartu barang dulu memakai gaya templat: gambar 70x83 (potret, padahal
   fotonya persegi), tombol hapus merah menyala di pojok, dan tidak ada
   cara mengubah catatan — catatan hanya bisa ditulis SEKALI, di halaman
   detail, sebelum barangnya masuk. Sesudah itu satu-satunya jalan
   mengubahnya adalah menghapus barangnya dan mengulang.

   Sekarang tiap barang punya dua aksi setara di pojoknya — catatan dan
   hapus — berbentuk sama, netral saat diam. Merah hanya muncul saat
   tombol hapus disentuh; tombol merah yang selalu menyala berhenti
   berarti "hati-hati".
   ====================================================================== */

.fx-cart .cart-sidebar-scroll { gap: 10px; }

.fx-cart .sidebar-cart-card {
  position: relative;
  padding: 12px;
  gap: 10px;
  background: var(--fx-card);
  border: 1px solid var(--fx-rule);
  border-radius: 14px;
  box-shadow: none;
}

.fx-cart .sidebar-cart-card .card-header {
  align-items: flex-start;
  gap: 12px;
  background: none;
}

/* Ruang untuk dua tombol aksi diberikan pada JUDULNYA saja, bukan pada
   seluruh kepala kartu. Versi pertama memberi padding-right: 84px ke
   .card-header dan ikut menghimpit baris harga di bawahnya: harga, tombol
   jumlah, dan subtotal berdesakan di sisa ~215px sampai angkanya
   membungkus jadi dua baris. Diukur, bukan dikira. */
.fx-cart .sidebar-cart-card .card-title { padding-right: 78px; }

/* Persegi, bukan potret 70x83. Dan saat berkasnya hilang — uploads/website/
   di banyak pemasangan kosong — kotaknya tetap kotak bernada, bukan ikon
   gambar rusak yang mendorong seluruh kartu. */
.fx-cart .sidebar-cart-card img {
  flex: none;
  width: 58px;
  height: 58px;
  border-radius: 11px;
  object-fit: cover;
  background: var(--fe-sunken);
}

.fx-cart .sidebar-cart-card .card-title {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--fx-ink);
}

.fx-cart .sidebar-cart-card .card-prices ul {
  margin: 6px 0 0;
  gap: 3px;
}

.fx-cart .sidebar-cart-card .card-prices ul li {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--fx-muted);
}

/* Catatan: dibedakan dengan garis tepi, bukan dengan warna saja. */
.fx-cart .sidebar-cart-card .card-description {
  margin: 8px 0 0;
  padding-left: 9px;
  border-left: 2px solid var(--fx-rule);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--fx-body);
}

.fx-cart .sidebar-cart-card .price-section {
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.fx-cart .price-section div {
  font-size: 13px;
  color: var(--fx-body);
  font-variant-numeric: tabular-nums;
}

.fx-cart .sidebar-cart-card .subtotal_cal {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--fx-ink);
}

/* --- Pengubah jumlah --- */
.fx-cart .sidebar-cart-card .quantity {
  width: auto;
  height: auto;
  padding: 0;
  gap: 0;
  background: var(--fx-card);
  border: 1px solid var(--fx-rule);
  border-radius: 11px;
  overflow: hidden;
}

.fx-cart .sidebar-cart-card .quantity button {
  width: 38px;
  height: 38px;
  border-radius: 0;
  background: transparent;
  color: var(--fx-ink);
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
}

.fx-cart .sidebar-cart-card .quantity button:hover {
  background: var(--fe-sunken);
}

.fx-cart .sidebar-cart-card .quantity button:focus-visible {
  outline: 2px solid var(--fe-ink);
  outline-offset: -2px;
}

.fx-cart .sidebar-cart-card .quantity input {
  width: 40px;
  height: 38px;
  border-radius: 0;
  border-inline: 1px solid var(--fx-rule);
  font-size: 14px;
  font-weight: 700;
  color: var(--fx-ink);
  font-variant-numeric: tabular-nums;
}

/* --- Dua aksi di pojok: catatan dan hapus --- */
.fx-cart .cart-card-actions {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 6px;
}

.fx-cart .cart-card-actions > button,
.fx-cart .sidebar-cart-card .delete-btn {
  position: static;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--fx-rule);
  border-radius: 9px;
  background: var(--fx-card);
  color: var(--fx-body);
  cursor: pointer;
  transition: background-color 140ms var(--fx-ease),
              border-color 140ms var(--fx-ease),
              color 140ms var(--fx-ease);
}

.fx-cart .cart-card-actions > button svg { width: 15px; height: 15px; }

.fx-cart .cart-card-actions > button:hover {
  background: var(--fe-sunken);
  border-color: #cfcabc;
  color: var(--fx-ink);
}

/* Barang yang SUDAH punya catatan ditandai, supaya tidak perlu dibuka
   dulu untuk tahu ada isinya. */
.fx-cart .cart-note-btn.has-note {
  border-color: color-mix(in srgb, var(--fe-primary) 38%, var(--fx-rule));
  background: color-mix(in srgb, var(--fe-primary) 7%, var(--fx-card));
  color: var(--fe-ink);
}

/* Merusak tetap dibedakan — tetapi hanya saat disentuh. Kontras 6,0:1. */
.fx-cart .sidebar-cart-card .delete-btn { color: var(--fx-body); }

.fx-cart .sidebar-cart-card .delete-btn:hover {
  background: #fdecea;
  border-color: #f3c7c1;
  color: #a1231a;
}

.fx-cart .cart-card-actions > button:focus-visible {
  outline: 2px solid var(--fe-ink);
  outline-offset: 2px;
}

/* --- Penyunting catatan sebaris --- */
.fx-cart .cart-note-edit {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--fx-rule);
}

.fx-cart .cart-note-edit[hidden] { display: none; }

.fx-cart .cart-note-label {
  display: block;
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--fx-body);
}

.fx-cart .cart-note-input {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 9px 11px;
  border: 1px solid var(--fx-rule);
  border-radius: 9px;
  background: var(--fx-card);
  color: var(--fx-ink);
  font-family: var(--fx-sans);
  font-size: 16px;
  line-height: 1.4;
  resize: vertical;
}

.fx-cart .cart-note-input:focus-visible,
.fx-cart .cart-note-input:focus {
  outline: 2px solid var(--fe-ink);
  outline-offset: 2px;
  border-color: transparent;
}

.fx-cart .cart-note-btns {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.fx-cart .cart-note-done,
.fx-cart .cart-note-cancel {
  min-height: 38px;
  padding: 8px 15px;
  border-radius: 9px;
  border: 1px solid transparent;
  font-family: var(--fx-sans);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.fx-cart .cart-note-done {
  background: var(--fe-ink);
  color: #fff;
}

.fx-cart .cart-note-done:hover { background: var(--fe-ink-hover); }

.fx-cart .cart-note-cancel {
  background: var(--fx-card);
  border-color: var(--fx-rule);
  color: var(--fx-body);
}

.fx-cart .cart-note-cancel:hover { background: var(--fe-sunken); color: var(--fx-ink); }

.fx-cart .cart-note-done:focus-visible,
.fx-cart .cart-note-cancel:focus-visible {
  outline: 2px solid var(--fe-ink);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .od-modal-add,
  .fx-cart .cart-card-actions > button { transition: none; }
}

/* --- Ruang: daftar barang lebih dulu, ringkasan seperlunya ----------- */
/* Ringkasan dulu 278px dari 474px tinggi badan panel — lebih dari separuh
   panel dipakai empat baris angka dan satu tombol, sementara daftar
   barangnya hanya menyisakan satu kartu yang terlihat. */
.fx-cart .fx-cart-foot { padding: 12px 20px 16px; }
.fx-cart .fx-cart-summary .fx-sum-row { padding: 6px 0; font-size: 14px; }
.fx-cart .fx-cart-summary .fx-sum-total {
  margin-top: 4px;
  padding-top: 10px;
  /* Memperkecil SELURUH baris ringkasan tadi ikut meratakan baris total
     dengan tiga baris di atasnya — satu-satunya angka yang benar-benar
     dibayar jadi tidak berbeda dari ongkos kirim. Ditegakkan kembali di
     sini, lewat ukuran dan bobot, bukan warna. */
  font-size: 16.5px;
  font-weight: 700;
  color: var(--fx-ink);
}

.fx-cart .fx-cart-summary .fx-sum-total > :last-child { font-size: 18px; }
.fx-cart .fx-cart-cta { margin-top: 10px; }
.fx-cart .oo-cart-note { padding: 10px 20px; font-size: 12.5px; }

/* --- Baris harga kartu ---------------------------------------------- */
/* Harga satuan naik ke barisnya sendiri. Tiga anak dalam 277px tidak
   muat, dan yang mengalah selalu angkanya — persis informasi yang orang
   datang ke keranjang untuk memeriksanya. */
.fx-cart .sidebar-cart-card .price-section { flex-wrap: wrap; }

.fx-cart .price-section > div:first-child {
  order: -1;
  flex: 1 1 100%;
  margin-bottom: 4px;
  font-size: 12.5px;
  color: var(--fx-muted);
  white-space: nowrap;
}

.fx-cart .sidebar-cart-card .quantity button { width: 34px; height: 34px; }
.fx-cart .sidebar-cart-card .quantity input { width: 38px; height: 34px; }

.fx-cart .sidebar-cart-card .subtotal_cal {
  margin-left: auto;
  white-space: nowrap;
}

/* ======================================================================
   PAPAN PENAWARAN DI KEPALA HALAMAN PESAN ONLINE
   ----------------------------------------------------------------------
   Slot kanan kepala halaman dulu berisi penunjuk tiga langkah: benar,
   tetapi tidak pernah berubah dan tidak menolong siapa pun memilih makan
   siang. Sekarang slot itu berisi penawaran yang BENAR-BENAR berlaku
   hari ini di outlet terpilih. Penunjuk langkahnya turun ke bawah teks
   pembuka, tempat urutan kiri-ke-kanan lebih mudah dibaca.

   BENTUKNYA PAPAN PENGUMUMAN, BUKAN TOMBOL. Itu keputusan yang paling
   menentukan, dan alasannya bukan estetika: pesanan online tidak
   menerapkan potongan apa pun (PaymentController.php menulis seluruh
   ruas diskon sebagai 0), dan tidak ada ruas kode voucher di checkout.
   Kartu yang terlihat bisa diklik akan menjanjikan sesuatu yang tidak
   terjadi. Jadi tidak ada satu pun kartu di sini yang bisa ditekan;
   yang bisa dibuka hanyalah syaratnya.

   SYARAT MEMAKAI <details>. Syarat lengkap tiap penawaran terlalu
   panjang untuk dibaca semua orang, tetapi terlalu penting untuk
   disembunyikan di halaman lain. <details> menyelesaikan keduanya tanpa
   satu baris JS pun, dan sudah bisa dioperasikan papan ketik sejak
   lahir.
   ====================================================================== */

.oo-menu-intro-inner.has-offers {
  align-items: flex-start;
  gap: clamp(28px, 4vw, 52px);
}

/* Judul halaman menu hanya untuk pembaca layar -- teks pembuka yang
   terlihat sudah dihapus, tetapi halaman tetap butuh satu h1. */
.oo-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Tanpa teks pembuka, penunjuk langkah duduk di kiri papan penawaran. */
.oo-menu-intro-inner.has-offers > .oo-steps {
  flex: 1 1 auto;
  justify-content: flex-start;
}

.oo-offers {
  flex: 0 0 auto;
  width: min(100%, 380px);
}

.oo-offers-head { margin-bottom: 12px; }

/* Baris 6 berkas ini menyetel `.oo-menu-intro p { font-size: 16px }`.
   Pemilih itu (0,1,1) mengalahkan `.oo-offers-note` (0,1,0), jadi
   catatan dan deskripsi kartu dirender 16px -- diukur, bukan dikira.
   Keduanya keterangan pendukung di panel sempit; pada 16px catatannya
   membungkus tiga baris dan menekan kartu pertama ke bawah lipatan.
   Beratnya disamakan dengan menyebut induknya. */
.oo-menu-intro .oo-offers-note,
.oo-menu-intro .oo-offer-desc {
  max-width: none;
  font-size: 12.5px;
  line-height: 1.45;
}

.oo-offers-h {
  margin: 0;
  font-family: var(--fx-sans);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fx-muted);
}

/* Kalimat penentu: penawaran ini ditukar di outlet. Diberi bobot dan
   kontras penuh, bukan disamarkan sebagai cetakan kecil — justru inilah
   yang mencegah tamu merasa ditipu di halaman pembayaran. */
.oo-offers-note {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--fx-body);
}

.oo-offer-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  /* Banyak penawaran tidak boleh mendorong daftar menu ke bawah lipatan.
     Digulir di tempat, dan hanya di layar yang memang punya ruang. */
  max-height: 340px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.oo-offer {
  padding: 12px 14px;
  background: var(--fx-card);
  border: 1px solid var(--fx-rule);
  border-radius: 12px;
}

.oo-offer-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.oo-offer-kind {
  flex: none;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fx-muted);
}

.oo-offer-value {
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--fe-ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.oo-offer-title {
  margin: 5px 0 0;
  font-family: var(--fx-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--fx-ink);
}

/* Kode voucher disalin dengan mata dan tangan, bukan tombol. Jadi ia
   harus mudah DISOROT: satu ketukan ganda memilih seluruh kodenya. */
.oo-offer-code {
  display: inline-block;
  padding: 3px 9px;
  border: 1px dashed var(--fx-rule);
  border-radius: 7px;
  background: var(--fe-sunken);
  color: var(--fx-ink);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .06em;
  user-select: all;
}

.oo-offer-desc {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--fx-body);
}

/* --- Syarat --- */
.oo-offer-terms { margin-top: 8px; }

.oo-offer-terms > summary {
  /* DISPLAY-NYA TIDAK DIUBAH, dan ini bukan soal selera.
     Diuji dengan klik tetikus sungguhan: dengan `display: inline-flex`
     Chrome memberi fokus ke <summary> tetapi TIDAK membuka <details>-nya
     -- syaratnya tidak pernah bisa dibaca siapa pun. Summary kehilangan
     perilaku pengungkapnya begitu display-nya dipaksa ke flex.
     Penandanya dimatikan lewat list-style dan ::-webkit-details-marker,
     bukan dengan mengganti display. */
  padding: 6px 2px;
  color: var(--fx-body);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.oo-offer-terms > summary::-webkit-details-marker { display: none; }

/* Penanda dibuat sendiri: ::marker bawaan tidak bisa diberi warna yang
   cukup kontras di semua peramban, dan arahnya menjelaskan keadaan
   buka/tutup lebih baik daripada segitiga kecil. */
.oo-offer-terms > summary::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 9px;
  vertical-align: 1px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 140ms var(--fx-ease);
}

.oo-offer-terms[open] > summary::before {
  transform: rotate(45deg);
}

.oo-offer-terms > summary:hover { color: var(--fx-ink); }

.oo-offer-terms > summary:focus-visible {
  outline: 2px solid var(--fe-ink);
  outline-offset: 2px;
  border-radius: 6px;
}

.oo-offer-terms ul {
  margin: 4px 0 2px;
  padding-left: 16px;
  list-style: disc;
}

.oo-offer-terms li {
  margin: 0 0 3px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--fx-body);
}

@media (max-width: 860px) {
  .oo-menu-intro-inner.has-offers { flex-direction: column; }
  .oo-offers { width: 100%; }
  /* Di layar sempit halaman sudah bergulir; daftar yang ikut bergulir
     sendiri menjebak jari di dua arah sekaligus. */
  .oo-offer-list { max-height: none; overflow: visible; }
}

@media (prefers-reduced-motion: reduce) {
  .oo-offer-terms > summary::before { transition: none; }
}