.menu-hero{ background:var(--sage); color:var(--navy); padding:calc(var(--nav-h) + 7vh) 0 6vh; text-align:center; position:relative; overflow:hidden; }
.menu-hero .eyebrow{ color:var(--navy); opacity:.6; }
.menu-hero h1{ font-family:var(--display); font-size:clamp(46px,7vw,92px); font-weight:400; margin:14px 0 16px; }
.menu-hero h1 em{ font-family:var(--serif); font-style:italic; }
.menu-hero p{ max-width:520px; margin:0 auto; font-size:16px; line-height:1.7; opacity:.78; }
.menu-hero .ar{ font-size:17px; opacity:.6; margin-bottom:6px; }
.menu-hero::after{ content:'☕'; position:absolute; bottom:-10px; right:6%; font-size:80px; opacity:.12; }

.menu-list{ background:var(--sage); padding:0 0 8vh; }
.macc{ max-width:1020px; margin:0 auto; display:flex; flex-direction:column; gap:16px; padding:0 24px; }

/* accordion item */
.macc-item{ background:rgba(253,250,245,.55); border-radius:24px; overflow:hidden; transition:background .3s, box-shadow .3s; }
.macc-item.open{ background:var(--white); box-shadow:0 18px 50px rgba(13,30,46,.12); }

/* header / toggle button */
.macc-head{ width:100%; background:none; border:none; cursor:pointer; text-align:left;
  display:grid; grid-template-columns:96px 1fr auto; align-items:center; gap:24px; padding:20px 24px; color:var(--navy); }
.macc-head .thumb{ width:96px; height:96px; border-radius:18px; background:#2a3b32 center/cover no-repeat; box-shadow:0 8px 24px rgba(13,30,46,.16); }
.macc-head .meta h2{ font-family:var(--serif); font-size:clamp(28px,3.6vw,42px); font-weight:400; line-height:1; }
.macc-head .meta .sub{ margin-top:7px; font-size:13px; letter-spacing:.04em; opacity:.7; }
.macc-head .meta .ar{ font-size:14px; opacity:.5; margin-top:3px; }
.macc-head .meta .count{ display:inline-block; margin-top:9px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; opacity:.5; }
.macc-head .chev{ width:46px; height:46px; border-radius:50%; background:var(--white); display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(13,30,46,.12); transition:transform .35s cubic-bezier(.7,0,.2,1), background .25s; flex-shrink:0; }
.macc-head .chev svg{ width:18px; height:18px; stroke:var(--navy); transition:stroke .25s; }
.macc-item.open .macc-head .chev{ transform:rotate(180deg); background:var(--navy); }
.macc-item.open .macc-head .chev svg{ stroke:var(--white); }
.macc-head:hover .chev{ transform:translateY(-1px); }
.macc-item.open .macc-head:hover .chev{ transform:rotate(180deg); }

/* expanding panel — animated via max-height + grid */
.macc-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .42s cubic-bezier(.7,0,.2,1); }
.macc-item.open .macc-panel{ grid-template-rows:1fr; }
.macc-panel-in{ overflow:hidden; }
.macc-body{ padding:4px 24px 26px; }
.macc-body .grid{ border-top:.5px solid var(--line); }
.mitem{ display:flex; justify-content:space-between; gap:16px; padding:16px 6px; border-bottom:.5px solid var(--line); }
.mitem .nm{ font-family:var(--display); font-size:18px; color:var(--navy); }
.mitem .ds{ font-size:13px; color:var(--text-dim); margin-top:3px; line-height:1.4; }
.mitem .pc{ font-family:var(--display); font-size:17px; color:var(--navy); white-space:nowrap; }
.macc-body .tip{ background:var(--cream); border-radius:14px; padding:14px 18px; margin-top:18px; font-size:13px; color:var(--text-dim); line-height:1.5; }
.macc-body .tip b{ color:var(--navy); }

.menu-note{ background:var(--navy); color:var(--white); text-align:center; padding:8vh 30px; }
.menu-note h2{ font-family:var(--display); font-size:clamp(30px,4vw,50px); font-weight:400; margin-bottom:14px; }
.menu-note h2 em{ font-family:var(--serif); font-style:italic; color:var(--sage); }
.menu-note p{ max-width:520px; margin:0 auto 28px; opacity:.7; line-height:1.7; }

@media (max-width:680px){
  .macc-head{ grid-template-columns:64px 1fr auto; gap:16px; padding:16px; }
  .macc-head .thumb{ width:64px; height:64px; border-radius:14px; }
  .macc-head .chev{ width:38px; height:38px; }
}
@media(max-width:767px){
	.wrap {
		padding: 0 20px;
	}
	.macc {
		padding: 0 20px;
	}
	.menu-note {
		padding: 40px 20px;
	}
}