/* Menu page only, loaded after styles.css by menu.html; the landing page never loads it.
   Etalase layout after the Maison Élise reference: cream paper, brown ink, cutouts sit straight on the page,
   rows split by 2px brown rules like the landing's range and why lists. The price is said once, big.
   Orange is kept for the Puff Gift block so it is the one loud moment. */
:root { --tabs-h: 58px; }
html { scroll-padding-top: calc(var(--nav-h) + var(--tabs-h) + 24px); }
body { background: var(--cream); overflow-x: clip; }

/* Opening: title left, price stamp right */
.menu { padding: calc(clamp(56px, 7vw, 112px) + var(--nav-h)) var(--m) clamp(40px, 5vw, 72px); background: var(--cream); position: relative; isolation: isolate; overflow: hidden; }
.menu-head {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 32px clamp(32px, 6vw, 96px);
  align-items: end; justify-items: stretch; max-width: 1180px; margin: 0 auto; text-align: left;
}
.menu-head h1 { font-size: clamp(3.4rem, 9vw, 8rem); line-height: .88; }
.menu-head p { margin-top: 24px; font-size: 1.2rem; max-width: 34ch; }
.deal-price { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; font-weight: 700; font-size: 1.15rem; }
.deal-price b { font: 800 clamp(5rem, 11vw, 9rem)/.8 var(--display); letter-spacing: -0.04em; color: var(--red); }
.deal dl { display: grid; grid-template-columns: 1fr 1fr; margin: 24px 0 0; border-top: 2px solid var(--brown); }
.deal dl div { padding: 14px 0; }
.deal dl div + div { padding-left: 20px; border-left: 2px solid var(--brown); }
.deal dt { font-weight: 700; }
.deal dd { margin: 0; }
.deal dd b { font: 800 2.2rem/1 var(--display); letter-spacing: -0.02em; }
.deal .deal-note { margin-top: 0; padding-top: 14px; border-top: 2px solid var(--brown); font-size: 1rem; max-width: none; }

/* Category tabs stick under the navbar */
.menu-tabs {
  position: sticky; top: var(--nav-h); z-index: 20;
  display: flex; gap: 8px; padding: 0 max(var(--m), (100% - 1180px) / 2);
  background: var(--cream); border-block: 2px solid var(--brown);
}
.menu-tabs a {
  display: inline-flex; align-items: center; min-height: calc(var(--tabs-h) - 4px); padding: 0 18px;
  color: var(--brown); font-weight: 700; text-decoration: none;
  transition: background-color .2s, color .2s;
}
.menu-tabs a:hover { background: var(--brown); color: var(--cream); }

/* Groups: a heading, then rows */
.menu-group { max-width: 1180px; margin: 0 auto; padding: clamp(56px, 7vw, 104px) var(--m) 0; box-sizing: content-box; position: relative; isolation: isolate; overflow: visible; }
.menu-group + .menu-group { padding-bottom: clamp(72px, 8vw, 120px); }
.group-title { margin-bottom: 20px; font-size: clamp(2.4rem, 5vw, 4.4rem); }

.menu-list .item {
  display: grid; grid-template-columns: clamp(150px, 22vw, 280px) minmax(0, 1fr) auto;
  gap: clamp(16px, 3vw, 48px); align-items: center;
  padding: 18px 0; border-top: 2px solid var(--brown);
}
.menu-list .item:last-child { border-bottom: 2px solid var(--brown); }
.item-pic { display: flex; align-items: center; justify-content: center; height: clamp(130px, 15vw, 200px); }
/* Croissant shots are portrait; turning them lays the croissant across the row */
.menu-list .item img { height: 100%; width: auto; max-width: none; margin: 0; rotate: -62deg; }
.menu-list .item-puff img { height: auto; width: 100%; max-height: 100%; rotate: 0deg; }
.menu-list .item:hover img { transform: translateY(-4px) rotate(-4deg); }
.menu-list .item h3 { font-size: clamp(1.8rem, 3.6vw, 3.2rem); transition: color .25s; }
.menu-list .item p { margin-top: 10px; font-size: 1.1rem; max-width: 42ch; }
.menu-list .item.is-picked h3 { color: var(--red); }
.badge-fav {
  display: inline-block; vertical-align: middle; margin-left: 8px; padding: 6px 12px; border-radius: 999px;
  background: var(--yellow); color: var(--ink); font: 700 .9rem/1 var(--font); letter-spacing: 0;
}

/* Stepper: red + always, minus and count once picked */
.qty button[data-d="-1"] { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--brown); }
.qty button[data-d="-1"]:hover { background: var(--brown); color: var(--cream); }
.qty button { width: 48px; height: 48px; }

/* Puff Gift: the one orange block; brown ink keeps text readable on it */
.gift { padding: clamp(72px, 8vw, 120px) var(--m); background: var(--orange); color: var(--ink); position: relative; isolation: isolate; overflow: hidden; }
.gift-head { max-width: 1180px; margin: 0 auto 48px; }
.gift-head p { font-weight: 700; }
.gift-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); max-width: 1180px; margin-inline: auto; }
.gift-card { padding: 28px; border-radius: 24px; background: var(--cream); }
.gift-pics { height: 320px; }
.gift-card h3 { font-size: clamp(1.8rem, 2.6vw, 2.4rem); }
.gift-card > p { font-size: 1.05rem; }
.gift-options { gap: 0; }
.gift-options li { padding: 10px 0; border-radius: 0; background: none; border-top: 2px solid var(--brown); transition: color .25s; }
.gift-options li.is-picked { color: var(--red); }
.gift-note { max-width: 1180px; margin: 24px auto 0; font-weight: 700; }

/* Title icons in headers */
.group-title {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 24px);
}
.gift-head h2 {
  display: flex;
  align-items: flex-start;
  gap: clamp(14px, 1.8vw, 24px);
  font-size: clamp(2rem, 3.5vw, 3rem);
  line-height: 1.05;
  max-width: none;
  color: #FFFFFF;
}
.title-icon {
  height: clamp(52px, 5.6vw, 78px);
  width: auto;
  aspect-ratio: 1;
  object-fit: contain;
  flex-shrink: 0;
}
.gift-head .title-icon {
  margin-top: 0.12em;
}
.title-icon-gift {
  filter: brightness(0) invert(1);
}

/* Cara pesan: layout and design matching mockup */
.order {
  display: block !important;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(64px, 7vw, 100px) var(--m);
  background: none;
  box-sizing: content-box;
  position: relative;
}
.order-head {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 40px;
}
.order-head h2 {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: clamp(2.2rem, 3.4vw, 3.2rem);
  font-weight: 800;
  color: var(--brown);
  letter-spacing: -0.03em;
  margin: 0;
}
.order-head .title-icon {
  height: clamp(40px, 4.2vw, 56px);
  width: auto;
}
.order-divider {
  flex: 1 1 40px;
  min-width: 40px;
  height: 1.5px;
  background: var(--brown);
}
.order-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3.2vw, 36px);
}
.steps li {
  display: grid;
  grid-template-columns: 36px 40px 1fr;
  align-items: start;
  gap: 16px;
  padding: 0;
  background: none;
  border: none;
}
.step-num {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #D9231A;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.15rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}
.step-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
}
.step-content h3 {
  font-size: clamp(1.2rem, 1.5vw, 1.45rem);
  font-weight: 800;
  color: var(--brown);
  line-height: 1.2;
}
.step-content p {
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  color: var(--brown);
  line-height: 1.45;
  margin-top: 6px;
  opacity: 0.9;
}

/* Order visual (photo + burst) */
.order-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.order-burst {
  position: absolute;
  left: -28px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 44px;
  overflow: visible;
  pointer-events: none;
  z-index: 2;
}
.order-photo {
  width: 100%;
  max-width: 440px;
  height: auto;
  aspect-ratio: 4 / 3.1;
  object-fit: cover;
  object-position: center 25%;
  border-radius: 28px;
  filter: none;
  display: block;
}

/* The order tray covers the bottom of the page: keep the footer readable above it */
body.has-cart .foot { padding-bottom: 200px; }

@media (max-width: 820px) {
  .menu-head { grid-template-columns: 1fr; }
  .menu-tabs { overflow-x: auto; scrollbar-width: none; }
  .menu-tabs a { flex: none; }
  .menu-list .item { grid-template-columns: 96px minmax(0, 1fr); gap: 4px 16px; padding: 16px 0; }
  .item-pic { grid-row: span 2; height: 110px; }
  .menu-list .item h3 { font-size: 1.6rem; }
  .menu-list .item p { font-size: 1rem; margin-top: 6px; }
  .menu-list .item .qty { justify-self: start; margin-top: 8px; }
  .qty button { width: 44px; height: 44px; }
  .badge-fav { margin: 6px 0 0; }
  .gift-row { grid-template-columns: 1fr; }
  .gift-pics { height: 260px; }
  .order-grid { grid-template-columns: 1fr; gap: 36px; }
  .order-burst { display: none; }
  .order-photo { max-width: 100%; aspect-ratio: 16 / 10; }
  .steps li { grid-template-columns: 30px 34px 1fr; gap: 12px; }
  .step-num { width: 30px; height: 30px; font-size: 1rem; }
  body.has-cart .foot { padding-bottom: 150px; }
}

/* ============================================================
   DOODLE ICON POSITIONS — MENU PAGE
   Posisi persis sesuai template Menu-html
   ============================================================ */

/* Base: doodle pakai fill:none, stroke dari currentColor via styles.css */

/* --- MENU HERO --- */
/* d-puff bg: 340×312, kanan bawah, z-1, opacity 0.08, merah, rotate 14deg */
.mn-hero-puff-bg {
  position: absolute;
  right: -70px;
  bottom: -110px;
  z-index: -1;
  opacity: 0.08;
  color: var(--red);
  transform: rotate(14deg);
}
/* d-puff kecil: 64×59, top 74px, left 50%, merah, rotate 18deg */
.mn-hero-puff-sm {
  position: absolute;
  top: 74px;
  left: 50%;
  color: var(--red);
  transform: rotate(18deg);
}
/* d-leaf: 34×51, bottom 44px, left 41%, merah, rotate 30deg */
.mn-hero-leaf {
  position: absolute;
  bottom: 44px;
  left: 41%;
  color: var(--red);
  transform: rotate(30deg);
}
/* d-star: 26×26, top 150px, left 56%, merah */
.mn-hero-star {
  position: absolute;
  top: 150px;
  left: 56%;
  color: var(--red);
}
/* d-croissant: 128×80, top 20px, right 3%, merah, rotate -14deg */
.mn-hero-cr {
  position: absolute;
  top: 20px;
  right: 3%;
  color: var(--red);
  transform: rotate(-14deg);
}

/* --- SECTION CROISSANT --- */
/* d-croissant bg: 380×244, z-1, opacity 0.06, merah, rotate -10deg */
.mn-cr-bg {
  position: absolute;
  right: -220px;
  top: 220px;
  z-index: -1;
  opacity: 0.06;
  color: var(--red);
  transform: rotate(-10deg);
}
/* d-croissant kanan atas: 64×41, merah, rotate 20deg */
.mn-cr-tr {
  position: absolute;
  right: -88px;
  top: 64px;
  color: var(--red);
  transform: rotate(20deg);
}
/* d-crumbs: 42×28, merah */
.mn-cr-crumbs {
  position: absolute;
  right: -78px;
  top: 132px;
  color: var(--red);
}
/* d-leaf: 32×48, left, top 470px, merah, rotate -22deg */
.mn-cr-leaf {
  position: absolute;
  left: -46px;
  top: 470px;
  color: var(--red);
  transform: rotate(-22deg);
}
/* d-star: 24×24, merah */
.mn-cr-star {
  position: absolute;
  right: -85px;
  top: 420px;
  color: var(--red);
}
/* d-croissant kiri tengah: 100×64, top 300px, merah, rotate -24deg */
.mn-cr-cl {
  position: absolute;
  top: 300px;
  left: -70px;
  color: var(--red);
  transform: rotate(-24deg);
}

/* --- SECTION PUFF PASTRY --- */
/* d-puff kiri atas: 72×66, merah, rotate -12deg */
.mn-puff-tl {
  position: absolute;
  left: -54px;
  top: 60px;
  color: var(--red);
  transform: rotate(-12deg);
}
/* d-leaf kanan: 34×51, merah, rotate 24deg */
.mn-puff-leaf {
  position: absolute;
  right: -84px;
  top: 330px;
  color: var(--red);
  transform: rotate(24deg);
}
/* d-star: 22×22, kiri, top 250px, merah */
.mn-puff-star {
  position: absolute;
  left: -38px;
  top: 250px;
  color: var(--red);
}
/* d-puff kanan tengah: 84×77, merah, rotate 14deg */
.mn-puff-tr {
  position: absolute;
  top: 150px;
  right: -87px;
  color: var(--red);
  transform: rotate(14deg);
}

/* --- SECTION PUFF GIFT --- */
/* d-gift bg: 300×300, kanan atas, z-1, opacity 0.16, putih, rotate 14deg */
.mn-gift-bg {
  position: absolute;
  right: -60px;
  top: -70px;
  z-index: -1;
  opacity: 0.16;
  color: #FFFFFF;
  transform: rotate(14deg);
}
/* d-croissant kanan bawah: 84×54, right 5%, bottom 34px, cream, rotate -10deg */
.mn-gift-cr {
  position: absolute;
  right: 5%;
  bottom: 34px;
  color: var(--cream);
  transform: rotate(-10deg);
}

/* --- SECTION CARA PESAN / ORDER --- */
/* d-star: 24×24, left 4%, top 64px, merah */
.mn-order-star {
  position: absolute;
  left: 4%;
  top: 64px;
  color: var(--red);
}
/* d-leaf: 30×45, right 3%, bottom 40px, merah, rotate -20deg */
.mn-order-leaf {
  position: absolute;
  right: 3%;
  bottom: 40px;
  color: var(--red);
  transform: rotate(-20deg);
}
/* d-puff inline di order-head, position static, merah, rotate -8deg */
.mn-order-puff {
  position: static;
  flex: none;
  color: var(--red);
  transform: rotate(-8deg);
}

/* Hide doodles di layar kecil ≤ 1240px (md breakpoint template) */
@media (max-width: 1240px) {
  .mn-hero-puff-bg, .mn-hero-puff-sm, .mn-hero-leaf, .mn-hero-star, .mn-hero-cr,
  .mn-cr-bg, .mn-cr-tr, .mn-cr-crumbs, .mn-cr-leaf, .mn-cr-star, .mn-cr-cl,
  .mn-puff-tl, .mn-puff-leaf, .mn-puff-star, .mn-puff-tr,
  .mn-gift-bg, .mn-gift-cr,
  .mn-order-star, .mn-order-leaf { display: none; }
}
/* d-puff inline di order-head dan d-croissant hero tetap tampil sampai breakpoint kecil */
@media (max-width: 760px) {
  .mn-order-puff { display: none; }
}