/* ==========================================================================
   DEWANYA NYEMIL — Katalog & Order
   Arah: katalog jajanan mobile-first, kartu besar, popup order cepat.
   Basis: layout & font sama dengan UT SALUT Mandalika (DM Sans, sistem 8px).
   Palet: Reflex Blue (#002EE6) · Yellow 109 (#FFE600) · Cool Gray 2C (#E6E6E6)
   ========================================================================== */

/* ---------- 0. FONT (self-hosted, DM Sans) ---------- */
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/dmsans-latin.woff2') format('woff2-variations');
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/dmsans-latin-ext.woff2') format('woff2-variations');
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020-20A0, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- 1. TOKENS ---------- */
/* Palet brand:
     Chili Red     #D92727  25% — tombol pesan, CTA, harga promo, elemen aktif
     Food Yellow   #FFC928  15% — promo, badge diskon, highlight, dekoratif
     Warm Cream    #FFF8E8  45% — latar utama
     Dark Charcoal #292522  10% — teks, heading, navigasi, footer
     White         #FFFFFF       — kartu, modal, form, keranjang             */
:root {
  /* --- Chili Red --- */
  --red:        #D92727;
  --red-700:    #B41F1F;   /* hover / gelap */
  --red-500:    #E44949;   /* terang */
  --red-100:    #FBE3E3;   /* tint muda */
  --red-50:     #FDF0F0;
  --red-ink:    #C42020;   /* merah untuk TEKS di atas tint merah — kontras AA */

  /* --- Food Yellow --- */
  --gold:       #FFC928;
  --gold-700:   #E5AF10;   /* hover / gelap */
  --gold-100:   #FFF4D1;   /* tint muda */
  --gold-ink:   #6B4E00;   /* kuning untuk TEKS di latar terang — kontras AA */

  /* --- Warm Cream --- */
  --cream:      #FFF8E8;
  --cream-2:    #FDF1DC;   /* sedikit lebih tua untuk pemisah */
  --cream-3:    #F7EAD2;

  /* --- Dark Charcoal --- */
  --ink:        #292522;
  --ink-2:      #5C554E;   /* teks sekunder */
  --ink-3:      #6E665E;   /* tersier */
  --ink-line:   #E8DFCE;   /* garis di latar cream */
  --ink-line-2: #D6C9B4;

  --white:      #FFFFFF;

  /* Alias lama dipertahankan agar tidak ada referensi yang terputus */
  --navy: var(--ink); --navy-700: #141210; --navy-500: var(--ink-2);
  --navy-100: var(--red-100); --navy-50: var(--red-50);
  --blue: var(--red); --blue-700: var(--red-700); --blue-500: var(--red-500);
  --blue-100: var(--red-100); --blue-50: var(--red-50);
  --yellow: var(--gold); --yellow-600: var(--gold-700);
  --yellow-100: var(--gold-100); --yellow-text: var(--gold-ink);
  --bg: var(--cream); --warm: var(--cream); --warm-2: var(--gold-100);
  --border: var(--ink-line); --border-2: var(--ink-line-2);
  --text: var(--ink); --text-2: var(--ink-2);

  --success:    #1B7A45;
  --wa:         #0E7A44;
  --wa-700:     #0B6B3A;

  --font: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --fs-body:  17px;
  --fs-sm:    15px;
  --fs-xs:    12.5px;
  --fs-h1:    clamp(24px, 3vw, 34px);
  --fs-h2:    clamp(20px, 2.2vw, 26px);
  --fs-h3:    clamp(17px, 1.5vw, 19px);
  --fs-num:   clamp(24px, 2.4vw, 30px);
  --fs-icon:  18px;

  --lh-body:  1.5;
  --lh-snug:  1.25;
  --lh-quiet: 1.6;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi:   600;
  --fw-bold:   700;

  --sp-1: 8px;   --sp-2: 16px;  --sp-3: 24px;  --sp-4: 32px;
  --sp-5: 40px;  --sp-6: 48px;  --sp-8: 64px;

  --gap:   clamp(14px, 1.4vw, 20px);
  --wrap:  1440px;
  --pad-x: clamp(16px, 2.4vw, 40px);

  --r-sm: 10px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  --sh-xs: 0 1px 2px rgba(0, 43, 73, .05);
  --sh-sm: 0 2px 6px rgba(0, 43, 73, .04), 0 6px 16px rgba(0, 43, 73, .04);
  --sh-md: 0 4px 12px rgba(0, 43, 73, .05), 0 12px 32px rgba(0, 43, 73, .06);
  --sh-lg: 0 8px 24px rgba(0, 43, 73, .07), 0 24px 60px rgba(0, 43, 73, .08);
  --sh-gold: 0 2px 8px rgba(224, 168, 0, .22);

  --reserve-cart: 0px;   /* ruang untuk bar keranjang bawah (desktop) */
  --head-h: 60px;        /* tinggi header */
  --bar-h: 112px;        /* tinggi area search + chip */

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur: .22s;
  --dur-slow: .4s;
}

/* ---------- 2. RESET & DASAR ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: var(--fw-normal);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--bg);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  /* HP: beri ruang bawah supaya bar tidak menutupi konten */
  padding-bottom: 0;
}

h1, h2, h3, h4, h5, h6,
button, input, select, textarea {
  font-family: inherit;
  font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
  margin: 0;
}
h1 { font-size: var(--fs-h1); line-height: 1.15; letter-spacing: -.03em; }
h2 { font-size: var(--fs-h2); line-height: 1.15; letter-spacing: -.02em; }
h3 { font-size: var(--fs-h3); letter-spacing: -.01em; }

img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }

::selection { background: var(--yellow); color: var(--navy); }
:focus-visible { outline: 3px solid var(--blue-500); outline-offset: 2px; border-radius: 6px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad-x); }

.section--paper { background: var(--cream); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* ---------- 3. HEADER ---------- */
.site-head {
  position: sticky; top: 0; z-index: 60;
  background: var(--white);
  border-bottom: 1px solid var(--ink-line);
  transition: box-shadow var(--dur) var(--ease);
}
.site-head.is-stuck { box-shadow: var(--sh-sm); }
.site-head__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: var(--head-h); padding-block: 8px;
}
.brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.brand__logo {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 13px;
  display: grid; place-items: center; background: var(--red);
  color: var(--gold); font-size: 20px;
  box-shadow: 0 2px 8px rgba(217, 39, 39, .22);
}
.brand__text { min-width: 0; }
.brand__name {
  display: block; font-size: 17px; font-weight: var(--fw-bold); color: var(--ink);
  letter-spacing: -.015em; line-height: 1.2; white-space: nowrap;
}
.brand__tag {
  display: block; font-size: 11px; font-weight: var(--fw-medium); color: var(--ink-3);
  letter-spacing: .04em; text-transform: uppercase; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 430px) { .brand__tag { display: none; } }

.head-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* ---------- 4. SEARCH + KATEGORI (menempel) ---------- */
.menu-bar {
  position: sticky; top: var(--head-h); z-index: 50;
  background: var(--white);
  border-bottom: 1px solid var(--ink-line);
  padding-block: 12px;
  box-shadow: 0 1px 0 rgba(41, 37, 34, .04);
}

.menu-bar__row { display: flex; gap: 10px; align-items: center; margin-bottom: 11px; }

.menu-search { position: relative; flex: 1 1 auto; min-width: 0; }
.menu-search input {
  width: 100%; padding: 0 44px 0 44px;
  border: 1.5px solid var(--ink-line); border-radius: var(--r-pill);
  background: var(--cream); color: var(--ink);
  /* 16px: cegah iOS auto-zoom saat fokus pada input */
  font-size: 16px;
  min-height: 48px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.menu-search input::placeholder { color: var(--ink-3); }
.menu-search input:focus { outline: none; border-color: var(--red); background: var(--white); box-shadow: 0 0 0 4px var(--red-50); }
.menu-search .ico {
  position: absolute; left: 17px; top: 50%; transform: translateY(-50%);
  color: var(--ink-3); font-size: 15px; pointer-events: none;
}
.menu-search__clear {
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--cream-2); color: var(--ink-2); font-size: 13px;
  display: grid; place-items: center;
}
.menu-search__clear:hover { background: var(--cream-3); color: var(--red); }

/* Chip kategori — scroll horizontal bila sempit */
.chips {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px;
  scrollbar-width: none; -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  padding: 0 16px; min-height: 44px; border-radius: var(--r-pill);
  background: var(--white); border: 1.5px solid var(--ink-line);
  font-size: 14.5px; font-weight: var(--fw-medium); color: var(--ink-2);
  cursor: pointer; white-space: nowrap;
  transition: all var(--dur) var(--ease);
}
.chip:hover { border-color: var(--red); color: var(--red-ink); background: var(--red-50); }
.chip.is-active {
  background: var(--red); border-color: var(--red); color: #fff; font-weight: var(--fw-semi);
  box-shadow: 0 2px 8px rgba(217, 39, 39, .22);
}
.chip__ico { font-size: 14px; }
.chip__n {
  display: inline-grid; place-items: center; min-width: 21px; height: 21px; padding: 0 6px;
  border-radius: var(--r-pill); background: var(--cream-2); color: var(--ink-2);
  font-size: 11.5px; font-weight: var(--fw-bold);
}
.chip.is-active .chip__n { background: var(--gold); color: var(--ink); }

/* Desktop: pencarian lebih lebar, chip rata kanan di baris yang sama */
@media (min-width: 900px) {
  .menu-bar { padding-block: 14px; }
  .menu-bar__row { margin-bottom: 12px; }
  .menu-search { max-width: 420px; }
}

/* ---------- 5. KATALOG ---------- */
.catalog { padding-block: 22px 56px; }
.catalog__head { margin-bottom: 20px; }
.catalog__title { color: var(--ink); font-weight: var(--fw-bold); margin-bottom: 7px; }
.catalog__hint {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14.5px; color: var(--ink-2); line-height: 1.5;
}
.catalog__hint i { color: var(--red); }
.catalog__foot {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 28px;
  font-size: 13px; color: var(--ink-2); line-height: 1.55;
  padding-top: 18px; border-top: 1px solid var(--ink-line);
}
.catalog__foot i { color: var(--red); margin-top: 2px; }

/* Grid: 2 kolom di HP, naik bertahap */
.mgrid { display: grid; gap: clamp(10px, 2.5vw, 16px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .mgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); } }
@media (min-width: 1100px) { .mgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1500px) {
  .mgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; }
}

/* Desktop: judul & hint sejajar dalam satu baris, ruang bernapas */
@media (min-width: 900px) {
  .catalog { padding-block: 30px 64px; }
  .catalog__head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 24px; margin-bottom: 24px;
  }
  .catalog__title { margin-bottom: 0; }
  .catalog__hint { text-align: right; max-width: 42ch; }
}

/* ---------- 6. KARTU MENU ---------- */
.mgrid > .mcard { min-width: 0; }
.mcard {
  position: relative; display: flex; flex-direction: column;
  background: var(--white); border: 1.5px solid var(--ink-line);
  border-radius: var(--r-xl); overflow: hidden; height: 100%;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(41, 37, 34, .04);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.mcard:hover { transform: translateY(-4px); border-color: var(--red-100); box-shadow: 0 10px 28px rgba(41, 37, 34, .10); }
.mcard:active { transform: translateY(-1px) scale(.996); }
.mcard:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

.mcard__img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--cream-2); line-height: 0; }
.mcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.mcard:hover .mcard__img img { transform: scale(1.04); }

.mcard__cat {
  position: absolute; top: 6px; left: 6px; z-index: 2;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 6px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .94); color: var(--ink);
  font-size: 9px; font-weight: var(--fw-semi); line-height: 1;
  box-shadow: 0 1px 2px rgba(41, 37, 34, .10);
}
.mcard__cat i { color: var(--red); font-size: 8.5px; }
/* Badge promo/diskon — Food Yellow */
.mcard__flag {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  padding: 3px 6px; border-radius: var(--r-pill);
  background: var(--gold); color: var(--ink);
  font-size: 8.5px; font-weight: var(--fw-bold); letter-spacing: .01em; text-transform: uppercase;
  line-height: 1; box-shadow: 0 1px 3px rgba(229, 175, 16, .30);
}
.mcard__flag--hot { background: var(--red); color: #fff; box-shadow: 0 1px 3px rgba(217, 39, 39, .28); }

@media (min-width: 640px) {

.mcard__body { display: flex; flex-direction: column; flex-grow: 1; padding: 10px 10px 12px; }
.mcard__title {
  font-size: 14.5px; font-weight: var(--fw-semi); color: var(--ink);
  margin-bottom: 3px; letter-spacing: -.01em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  line-height: 1.3;
}
.mcard__desc {
  font-size: 11.5px; color: var(--ink-2); line-height: 1.4;
  margin-bottom: 8px; flex-grow: 1;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mcard__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  margin-top: auto; padding-top: 8px; border-top: 1px dashed var(--ink-line);
}
.mcard__price { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; }
.mcard__price-from {
  font-size: 9px; font-weight: var(--fw-semi); color: var(--gold-ink);
  background: var(--gold-100); padding: 1px 5px; border-radius: var(--r-pill);
  text-transform: uppercase; letter-spacing: .03em; white-space: nowrap;
}
/* Harga — Chili Red */
.mcard__price-now { font-size: 15px; font-weight: var(--fw-bold); color: var(--red); letter-spacing: -.01em; white-space: nowrap; }
.mcard__price-was { font-size: 11px; color: var(--ink-3); text-decoration: line-through; }

.mcard__cta {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
  padding: 6px 10px; border-radius: var(--r-pill);
  background: var(--red-50); color: var(--red-ink);
  font-size: 11.5px; font-weight: var(--fw-semi);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.mcard:hover .mcard__cta { background: var(--red); color: #fff; }

@media (min-width: 640px) {
  .mcard__body { padding: 15px 16px 16px; }
  .mcard__title { font-size: var(--fs-h3); margin-bottom: 5px; line-height: var(--lh-snug); }
  .mcard__desc { font-size: 13.5px; margin-bottom: 13px; line-height: 1.5; }
  .mcard__foot { padding-top: 13px; gap: 10px; }
  .mcard__price { flex-direction: row; align-items: baseline; gap: 7px; }
  .mcard__price-from { font-size: 10px; padding: 2px 7px; }
  .mcard__price-now { font-size: 19.5px; }
  .mcard__price-was { font-size: 13px; }
  .mcard__cta { padding: 9px 15px; font-size: 13.5px; gap: 6px; }

/* Empty state */
.empty {
  grid-column: 1 / -1; text-align: center; padding: 48px 16px; color: var(--ink-2);
}
.empty i { font-size: 32px; color: var(--ink-line-2); margin-bottom: 12px; display: block; }
.empty p { font-size: 15px; line-height: 1.6; }

/* ---------- 7. POPUP ORDER ---------- */
.sheet {
  position: fixed; inset: 0; z-index: 100;
  display: grid; align-items: end; justify-items: center;
  pointer-events: none;
}
.sheet.is-open { pointer-events: auto; }
.sheet__scrim {
  position: absolute; inset: 0; background: rgba(30, 26, 23, .45);
  opacity: 0; transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), backdrop-filter 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
}
.sheet.is-open .sheet__scrim {
  opacity: 1;
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
}

.sheet__panel {
  position: relative; width: 100%; max-width: 540px;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-bottom: none;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.16), 0 -2px 10px rgba(0, 0, 0, 0.05);
  max-height: 92vh; max-height: 92dvh;
  display: flex; flex-direction: column;
  transform: translateY(32px) scale(0.97); opacity: 0;
  transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.sheet.is-open .sheet__panel { transform: translateY(0) scale(1); opacity: 1; }

/* Desktop: 2 kolom — gambar kiri (baris penuh), teks kanan, footer baris penuh */
@media (min-width: 880px) {
  .sheet { align-items: center; }
  .sheet__panel:not(.sheet__panel--cart) {
    border-radius: var(--r-xl); max-height: 88vh; max-height: 88dvh;
    max-width: 920px;
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas:
      "hero scroll"
      "foot foot";
    overflow: hidden;
  }
  .sheet__panel:not(.sheet__panel--cart) .order-hero { grid-area: hero; height: auto; min-height: 340px; }
  .sheet__panel:not(.sheet__panel--cart) .order-hero__img { height: 100%; }
  .sheet__panel:not(.sheet__panel--cart) .sheet__scroll { grid-area: scroll; padding: 26px 30px 6px; }
  .sheet__panel:not(.sheet__panel--cart) .sheet__foot { grid-area: foot; padding: 18px 30px 22px; }
  .opt-input { font-size: 15.5px; }
}

.sheet__close {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255, 255, 255, .96); color: var(--ink);
  font-size: 14px; display: grid; place-items: center;
  box-shadow: 0 2px 8px rgba(41, 37, 34, .16);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.sheet__close:hover { background: var(--red); color: #fff; }

.sheet__scroll { overflow-y: auto; padding: 14px 16px 8px; -webkit-overflow-scrolling: touch; }

/* ---- Gambar item di popup ---- */
.order-hero {
  position: relative;
  height: 160px; flex-shrink: 0;
  background: var(--cream-2);
  border-bottom: 1px solid var(--ink-line);
  overflow: hidden;
}
.order-hero__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.order-hero__cat {
  position: absolute; left: 12px; bottom: 10px;
  padding: 4px 10px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .95); color: var(--red-ink);
  font-size: 10px; font-weight: var(--fw-semi); letter-spacing: .04em; text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(41, 37, 34, .14);
}
.order-title { font-size: 18px; font-weight: var(--fw-bold); color: var(--ink); margin-bottom: 4px; letter-spacing: -.01em; }
.order-desc { font-size: 13px; color: var(--ink-2); line-height: 1.45; margin-bottom: 10px; }
.order-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; flex-wrap: wrap; }
.order-price__from {
  font-size: 10.5px; font-weight: var(--fw-semi); color: var(--ink-2);
  background: var(--gold-100); padding: 2px 8px; border-radius: var(--r-pill);
}
.order-price__now { font-size: 20px; font-weight: var(--fw-bold); color: var(--red); letter-spacing: -.02em; }
.order-price__was { font-size: 12.5px; color: var(--ink-3); text-decoration: line-through; }

.opt-group--note { margin-top: 12px; }

/* Grup opsi */
.opt-groups { padding-top: 12px; display: grid; gap: 14px; }
.opt-group { display: grid; gap: 7px; }
.opt-group__label {
  font-size: 12.5px; font-weight: var(--fw-semi); color: var(--ink);
  letter-spacing: .01em; padding: 0;
}
.opt-group__label span { font-weight: var(--fw-normal); color: var(--ink-3); }
.opt-group__label .req { color: var(--red-ink); font-weight: var(--fw-semi); }

.choices { display: grid; gap: 7px; }
.choices--check { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.choice {
  position: relative; display: flex; align-items: center; gap: 9px;
  padding: 9px 12px; border: 1.5px solid var(--ink-line); border-radius: var(--r-md);
  background: var(--white); cursor: pointer; min-height: 42px;
  font-size: 13.5px; font-weight: var(--fw-medium); color: var(--ink);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.choice:hover { border-color: var(--ink-line-2); background: var(--cream); }
.choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.choice__box {
  width: 18px; height: 18px; border-radius: 5px; flex-shrink: 0;
  border: 1.5px solid var(--ink-line-2); background: var(--white);
  display: grid; place-items: center; color: transparent; font-size: 10px;
  transition: all var(--dur) var(--ease);
}
.choices--radio .choice__box { border-radius: 50%; }
/* Elemen aktif — Chili Red */
.choice input:checked ~ .choice__box { background: var(--red); border-color: var(--red); color: #fff; }
.choice input:checked ~ .choice__label { font-weight: var(--fw-semi); color: var(--ink); }
.choice:has(input:checked) { border-color: var(--red); background: var(--red-50); }
.choice input:focus-visible ~ .choice__box { outline: 3px solid var(--red); outline-offset: 2px; }
.choice__label { flex-grow: 1; }
.choice__add { font-size: 12px; font-weight: var(--fw-semi); color: var(--red-ink); white-space: nowrap; }

/* Input nama & catatan */
.opt-input {
  width: 100%; padding: 9px 12px; min-height: 42px;
  border: 1.5px solid var(--ink-line); border-radius: var(--r-md);
  background: var(--cream); font-size: 14px; color: var(--ink); resize: vertical;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.opt-input::placeholder { color: var(--ink-3); }
.opt-input:focus { outline: none; border-color: var(--red); background: var(--white); box-shadow: 0 0 0 3px var(--red-50); }

/* Baris jumlah */
.opt-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 0 2px; margin-top: 12px; border-top: 1px solid var(--ink-line);
}
.opt-row__label { font-size: 14px; font-weight: var(--fw-semi); color: var(--ink); }

.qty { display: inline-flex; align-items: center; gap: 2px; border: 1.5px solid var(--ink-line); border-radius: var(--r-pill); background: var(--cream); padding: 2px; }
.qty--lg { padding: 3px; }
.qty__btn {
  width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--white); color: var(--red); font-size: 18px; font-weight: var(--fw-bold);
  display: grid; place-items: center; line-height: 1; box-shadow: 0 1px 3px rgba(41, 37, 34, .10);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.qty__btn:hover { background: var(--red); color: #fff; }
.qty__btn:active { transform: scale(.94); }
.qty__val { min-width: 36px; text-align: center; font-size: 15px; font-weight: var(--fw-bold); color: var(--ink); }

/* Footer popup */
.sheet__foot {
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--ink-line); background: var(--cream);
  border-radius: 0 0 var(--r-xl) var(--r-xl);
}
.sheet__total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.sheet__total-label { font-size: 13.5px; color: var(--ink-2); }
.sheet__total-val { font-size: 20px; font-weight: var(--fw-bold); color: var(--red); letter-spacing: -.02em; }

/* ---------- 8. TOMBOL ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 14.5px; font-weight: var(--fw-semi); padding: 10px 18px;
  border-radius: var(--r-md); border: 1px solid transparent; cursor: pointer;
  line-height: 1.25; white-space: nowrap;
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
/* CTA utama — Chili Red */
.btn--red { background: var(--red); color: #fff; border-color: var(--red); box-shadow: 0 3px 12px rgba(217, 39, 39, .28); }
.btn--red:hover { background: var(--red-700); border-color: var(--red-700); box-shadow: 0 7px 20px rgba(217, 39, 39, .34); }
.btn--wa { background: var(--wa); color: #fff; border-color: var(--wa); box-shadow: 0 3px 12px rgba(14, 122, 68, .25); }
.btn--wa:hover { background: var(--wa-700); border-color: var(--wa-700); box-shadow: 0 7px 20px rgba(14, 122, 68, .32); }
.btn--lg { padding: 12px 20px; font-size: 15px; min-height: 46px; }
.btn--block { width: 100%; }

/* Tombol chat di header */
.head-wa {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 18px; min-height: 44px; border-radius: var(--r-pill);
  background: var(--red); color: #fff; font-size: 14.5px; font-weight: var(--fw-semi);
  white-space: nowrap; flex-shrink: 0;
  box-shadow: 0 3px 12px rgba(217, 39, 39, .28);
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.head-wa:hover { background: var(--red-700); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(217, 39, 39, .34); }
.head-wa__txt { display: none; }
@media (min-width: 400px) { .head-wa__txt { display: inline; } }

/* ---------- 9. TOAST ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 16px); z-index: 120;
  max-width: min(92vw, 440px); padding: 14px 20px;
  background: var(--ink); color: #fff; border-radius: var(--r-md);
  font-size: 14px; font-weight: var(--fw-medium); line-height: 1.45;
  box-shadow: 0 12px 36px rgba(41, 37, 34, .30); opacity: 0; pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur-slow) var(--ease-out);
}
.toast.is-show { opacity: 1; transform: translate(-50%, 0); }
.toast::before {
  content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold); margin-right: 10px; vertical-align: middle;
}

/* ---------- 10. FOOTER (Dark Charcoal) ---------- */
.foot { background: var(--ink); color: rgba(255, 255, 255, .70); padding-block: 40px 24px; font-size: 14.5px; }
.foot__grid { display: grid; gap: 24px; padding-bottom: 28px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
@media (min-width: 640px) { .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.foot__brand { display: flex; align-items: center; gap: 11px; margin-bottom: 15px; }
.foot__name { color: #fff; font-size: 17px; font-weight: var(--fw-bold); }
.foot__desc { line-height: var(--lh-quiet); max-width: 46ch; margin-bottom: 20px; }
.foot__h {
  color: var(--gold); font-size: 12px; font-weight: var(--fw-semi);
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: 15px;
.foot__list { display: grid; gap: 10px; }
.foot__list a, .foot__list span { color: rgba(255, 255, 255, .70); line-height: 1.5; }
.foot__list a:hover { color: var(--gold); }
.foot__list i { color: var(--gold); width: 18px; text-align: center; margin-right: 7px; }
.socials { display: flex; gap: 10px; }
.social {
  width: 42px; height: 42px; border-radius: var(--r-sm); display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .82); font-size: 15px;
  transition: all var(--dur) var(--ease);
}
.social:hover { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.foot__bottom {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between;
  padding-top: 22px; font-size: 12.5px;
}
.foot__legal { display: flex; flex-wrap: wrap; gap: 20px; }
.foot__legal a:hover { color: var(--gold); }

/* ---------- 11. KERANJANG ---------- */
/* Bar mengambang di bawah */
.cartbar {
  position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 90; width: min(100% - 32px, 720px);
  animation: cartbar-in .28s var(--ease-out);
}
.cartbar[hidden] { display: none; }
@keyframes cartbar-in { from { opacity: 0; transform: translate(-50%, 18px); } to { opacity: 1; transform: translate(-50%, 0); } }
.cartbar__btn {
  width: 100%; display: flex; align-items: center; gap: 13px;
  padding: 11px 13px 11px 14px; min-height: 62px;
  border: none; border-radius: var(--r-lg); cursor: pointer;
  background: var(--ink); color: #fff; text-align: left;
  box-shadow: 0 12px 34px rgba(41, 37, 34, .34);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.cartbar__btn:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(41, 37, 34, .40); }
.cartbar__icon {
  position: relative; width: 42px; height: 42px; flex-shrink: 0; border-radius: var(--r-md);
  background: var(--red); display: grid; place-items: center; font-size: 17px;
}
.cartbar__meta { display: flex; flex-direction: column; gap: 1px; flex-grow: 1; min-width: 0; }
.cartbar__count { font-size: 12px; font-weight: var(--fw-medium); color: rgba(255, 255, 255, .72); }
.cartbar__total { font-size: 17px; font-weight: var(--fw-bold); color: var(--gold); letter-spacing: -.01em; }
.cartbar__go {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
  padding: 11px 17px; border-radius: var(--r-md);
  background: var(--red); color: #fff; font-size: 14px; font-weight: var(--fw-semi); white-space: nowrap;
}
@media (max-width: 520px) {
  .cartbar__go span { display: none; }
  .cartbar__btn { min-height: 58px; }
}

/* saat keranjang tampil, beri ruang di bawah halaman */
body.has-cart .catalog { padding-bottom: 112px; }
body.has-cart .foot { padding-bottom: 112px; }

/* Panel keranjang */
.sheet--cart { z-index: 110; }
.sheet__panel--cart { max-width: 560px; }
.sheet__h {
  display: flex; align-items: center; gap: 8px;
  font-size: 17px; font-weight: var(--fw-bold); color: var(--ink);
  padding-bottom: 2px;
}
.sheet__h i { color: var(--red); font-size: 15px; }
.sheet__sub { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }
.sheet__sub:empty { display: none; }

.cart-list { display: grid; gap: 10px; padding-top: 12px; }
.cart-row {
  display: grid; grid-template-columns: 50px minmax(0, 1fr) auto;
  gap: 10px; align-items: center;
  padding: 10px; border: 1px solid var(--ink-line); border-radius: var(--r-md);
  background: var(--white);
}
.cart-row__img {
  width: 50px; height: 50px; border-radius: var(--r-sm); object-fit: cover;
  background: var(--cream-2); border: 1px solid var(--ink-line);
}
.cart-row__body { min-width: 0; }
.cart-row__name { font-size: 13.5px; font-weight: var(--fw-semi); color: var(--ink); margin-bottom: 2px; }
.cart-row__opts { font-size: 11px; color: var(--ink-3); line-height: 1.4; margin-bottom: 5px; word-break: break-word; }
.cart-row__opts:empty { display: none; }
.cart-row__under { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cart-row__price { font-size: 13.5px; font-weight: var(--fw-bold); color: var(--red); }
.cart-row__right { flex-shrink: 0; text-align: right; }
.cart-row__del {
  width: 32px; height: 32px; margin-left: auto; margin-bottom: 6px;
  border: none; border-radius: var(--r-sm); cursor: pointer;
  background: var(--red-50); color: var(--red-ink); font-size: 12px;
  display: grid; place-items: center;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.cart-row__del:hover { background: var(--red); color: #fff; }

.qty--sm { padding: 2px; }
.qty--sm .qty__btn { width: 32px; height: 32px; font-size: 15px; }
.qty--sm .qty__val { min-width: 28px; font-size: 13.5px; }
@media (max-width: 640px) {
  .qty--sm .qty__btn { width: 32px; height: 32px; }
  .cart-row { grid-template-columns: 48px minmax(0, 1fr) auto; padding: 10px 8px; }
}

.cart-more {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 4px; padding: 10px; border-radius: var(--r-md); cursor: pointer;
  border: 1.5px dashed var(--ink-line-2); background: transparent;
  color: var(--ink-2); font-size: 13px; font-weight: var(--fw-semi);
  transition: all var(--dur) var(--ease);
}
.cart-more:hover { border-color: var(--red); color: var(--red-ink); background: var(--red-50); border-style: solid; }

.cart-empty { text-align: center; padding: 32px 14px; }
.cart-empty i { font-size: 36px; color: var(--ink-line-2); display: block; margin-bottom: 12px; }
.cart-empty p { font-size: 13.5px; color: var(--ink-2); margin-bottom: 16px; }

.cart-clear { margin-top: 8px; background: transparent; color: var(--ink-2); border-color: var(--ink-line); font-size: 13px; padding: 8px; }
.cart-clear:hover { background: var(--red-50); color: var(--red-ink); border-color: var(--red-100); }

.btn--ghost { background: transparent; color: var(--ink-2); border-color: var(--ink-line-2); }
.btn--ghost:hover { background: var(--cream-2); color: var(--ink); }

#cart-submit:disabled { background: var(--ink-line-2); border-color: var(--ink-line-2); color: #fff; opacity: .75; cursor: not-allowed; transform: none; box-shadow: none; }

/* Desktop: panel keranjang lebih lega, footer sejajar */
@media (min-width: 880px) {
  .sheet--cart .sheet__panel--cart { max-width: 620px; border-radius: var(--r-xl); }
  .sheet--cart .sheet__scroll { padding: 26px 30px 8px; }
  .sheet--cart .sheet__foot { padding: 18px 30px 24px; }
  .sheet--cart .sheet__foot .opt-group--note { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .sheet--cart .sheet__foot .opt-group--note { margin-top: 0; }
  .sheet--cart .sheet__foot > .opt-group--note:first-child { margin-top: 0; }
}
@media (min-width: 880px) {
  .sheet--cart .sheet__foot { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; align-items: end; }
  .sheet--cart .sheet__foot .sheet__total,
  .sheet--cart .sheet__foot #cart-submit,
  .sheet--cart .sheet__foot .cart-clear { grid-column: 1 / -1; }
}

@media print { .site-head, .menu-bar, .sheet, .toast { display: none !important; } }

/* ---------- 11. GERAK DIBATASI (aksesibilitas) ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}