:root{
color-scheme:light;
--cream-20:#f9f6ef;
--cream-50:#f4f0e4;
--cream-100:#ede5d6;
--sage-80:#eef3e8;
--sage-120:#e3eadf;
--sage-200:#d1dbc7;
--olive-200:#c1d1b2;
--olive-300:#a6bc92;
--olive-400:#8ea57a;
--olive-600:#3a5a40;
--olive-700:#2e4b33;
--olive-900:#1f3524;
--golden-400:#d6aa3d;
--golden-500:#be8c25;
--drop-light:#f5dc7b;
--muted:#6f7462;
--card:#fffdf8;
--radius-md:18px;
--radius-lg:24px;
--radius-xl:36px;
--shadow-1:0 12px 34px rgba(32,50,36,.08);
--shadow-2:0 22px 60px rgba(32,50,36,.18);
--max-width:min(1180px, calc(100vw - 3.5rem));
--olive-branch:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 24' fill='none' stroke='%233a5a40' stroke-width='1.2' stroke-linecap='round'><path d='M2 12h60'/><path d='M64 12c8-10 22-10 30 0'/><path d='M94 12h44'/><path d='M84 6c2 2 2 6 0 8m7-10c3 3 3 9 0 12'/><circle cx='77' cy='12' r='3' fill='%23a3b18a'/><circle cx='86' cy='12' r='3' fill='%23a3b18a'/></svg>");
--emblem-branch:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 160' fill='none'><path d='M14 138c54-30 112-66 198-120' stroke='%233a5a40' stroke-width='8' stroke-linecap='round' stroke-linejoin='round'/><path d='M58 114c20-20 48-34 72-32' stroke='%233a5a40' stroke-width='6' stroke-linecap='round'/><path d='M120 84c28-16 52-30 88-42' stroke='%233a5a40' stroke-width='6' stroke-linecap='round'/><path d='M46 128c10-22 30-36 52-34' stroke='%2390a776' stroke-width='8' stroke-linecap='round' stroke-linejoin='round'/><path d='M138 78c12-18 30-30 50-30' stroke='%2390a776' stroke-width='8' stroke-linecap='round' stroke-linejoin='round'/><ellipse cx='72' cy='128' rx='16' ry='22' fill='%23515c3d'/><ellipse cx='142' cy='98' rx='14' ry='20' fill='%23515c3d'/><ellipse cx='192' cy='64' rx='12' ry='18' fill='%23515c3d'/><path d='M74 102c14-8 28-18 40-30' stroke='%2398b686' stroke-width='10' stroke-linecap='round' stroke-linejoin='round'/><path d='M152 64c14-8 26-16 36-26' stroke='%2398b686' stroke-width='10' stroke-linecap='round' stroke-linejoin='round'/></svg>");
--silhouette-branch:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320' fill='none'><path d='M16 290c124-72 188-140 294-250' stroke='%238fa67c' stroke-width='14' stroke-linecap='round' stroke-linejoin='round' opacity='.45'/><circle cx='94' cy='220' r='26' fill='%23b8c7a3' opacity='.55'/><circle cx='184' cy='142' r='22' fill='%23b8c7a3' opacity='.55'/><circle cx='256' cy='86' r='20' fill='%23b8c7a3' opacity='.5'/></svg>");
}

body{
margin:0;
min-height:100vh;
font-family:"Inter",system-ui,sans-serif;
color:var(--olive-900);
background:
radial-gradient(1200px 600px at 10% -10%, rgba(193,209,178,.28), transparent),
radial-gradient(900px 500px at 90% 0%, rgba(239,204,124,.24), transparent),
linear-gradient(180deg, var(--cream-20) 0%, #fff 60%);
}
body::after{
content:"";
position:fixed;
inset:-10% -20% -20% -20%;
background-image:var(--silhouette-branch);
background-size:420px;
background-repeat:repeat;
opacity:.09;
pointer-events:none;
mix-blend-mode:multiply;
}

a{color:inherit;}

.wrap{
width:var(--max-width);
margin-inline:auto;
padding-inline:clamp(.8rem,3vw,1.6rem);
}

main.wrap{
display:grid;
gap:clamp(1.4rem,3vw,2rem);
margin-block:clamp(1.8rem,5vw,3.2rem);
}

.site-header{
position:relative;
background:linear-gradient(90deg, rgba(255,255,255,.95), rgba(230,239,225,.92));
backdrop-filter:blur(12px);
border-bottom:1px solid rgba(58,90,64,.12);
box-shadow:0 10px 26px rgba(32,50,36,.06);
z-index:10;
}
.site-header::after{
content:"";
position:absolute;
inset:auto 0 0 0;
height:4px;
background:linear-gradient(90deg, rgba(214,170,61,.6), transparent 65%);
opacity:.7;
}
.site-header .wrap{
display:flex;
align-items:center;
gap:.75rem;
padding-block:.85rem;
}

#site-name{
margin:0;
font-family:Marcellus,Georgia,serif;
font-size:clamp(1.6rem,2.3vw,2.5rem);
letter-spacing:.6px;
color:var(--olive-700);
}
#site-tagline{
margin:0;
font-size:.98rem;
color:var(--muted);
}
#site-tagline:empty{display:none;}

.header-controls{
margin-left:auto;
display:flex;
align-items:center;
gap:.75rem;
flex-wrap:wrap;
justify-content:flex-end;
position:relative;
}

.top-nav{
display:flex;
gap:.35rem;
padding:.25rem .45rem;
background:rgba(255,255,255,.82);
border-radius:999px;
box-shadow:0 8px 22px rgba(32,50,36,.08);
backdrop-filter:blur(6px);
overflow-x:auto;
scrollbar-width:none;
scroll-padding-inline:.45rem;
position:relative;
}
.top-nav::-webkit-scrollbar{
display:none;
}
.top-nav a{
white-space:nowrap;
display:inline-flex;
align-items:center;
justify-content:center;
padding:.45rem .9rem;
border-radius:999px;
font-weight:600;
font-family:inherit;
color:var(--olive-700);
text-decoration:none;
border:1px solid transparent;
transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.top-nav a:hover{
background:color-mix(in oklab, var(--sage-200) 55%, white);
border-color:rgba(58,90,64,.18);
color:var(--olive-900);
}
.top-nav a:focus-visible{
outline:none;
border-color:rgba(58,90,64,.35);
background:color-mix(in oklab, var(--olive-300) 28%, white);
color:var(--olive-900);
}

.visually-hidden{
position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap;
border:0;
}

/* Hidden sections - remove this class to show the section again */
.hidden-section{
display:none !important;
}

.lang-switcher{
display:flex;
align-items:center;
gap:.35rem;
padding:.25rem;
background:rgba(255,255,255,.82);
border-radius:999px;
box-shadow:0 8px 22px rgba(32,50,36,.08);
backdrop-filter:blur(6px);
}
.lang-btn{
appearance:none;
border:1px solid transparent;
background:rgba(234,242,230,.6);
color:var(--olive-700);
font-size:1.25rem;
line-height:1;
padding:.35rem;
border-radius:50%;
cursor:pointer;
transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.lang-btn:hover{
transform:translateY(-1px);
box-shadow:0 6px 14px rgba(32,50,36,.16);
background:rgba(214,232,205,.9);
}
.lang-btn.is-active{
border-color:rgba(58,90,64,.3);
background:rgba(142,165,122,.25);
box-shadow:0 6px 18px rgba(32,50,36,.18);
}
.lang-btn:focus-visible{
outline:2px solid rgba(214,170,61,.6);
outline-offset:2px;
}

.hero{
position:relative;
isolation:isolate;
border-radius:var(--radius-xl);
display:grid;
grid-template-columns:minmax(0,1.1fr) auto;
align-items:center;
gap:clamp(1.6rem,5vw,4rem);
padding:clamp(1.8rem,5vw,3.2rem);
color:var(--olive-700);
background:linear-gradient(135deg, rgba(255,253,248,.95), rgba(234,242,230,.86));
border:1px solid rgba(58,90,64,.12);
box-shadow:var(--shadow-2);
overflow:hidden;
}
.hero::before{
content:"";
position:absolute;
inset:-25% -8% auto 38%;
height:60%;
background:radial-gradient(circle at 20% 20%, rgba(214,170,61,.2), transparent 65%);
transform:rotate(-8deg);
opacity:.7;
}
.hero::after{
content:"";
position:absolute;
inset:12% 0 -18% 42%;
background:radial-gradient(ellipse at 50% 40%, rgba(143,166,124,.2), transparent 70%);
opacity:.35;
}
.hero-text{
position:relative;
z-index:2;
max-width:48ch;
}
.hero h2{
margin:0 0 .4rem;
font-family:Marcellus,Georgia,serif;
font-size:clamp(2.1rem,4vw,3rem);
color:var(--olive-900);
}
#hero-intro{
margin:0;
font-size:1.05rem;
line-height:1.7;
color:var(--muted);
}
.hero-text::after{
content:"";
display:block;
width:90px;
height:4px;
margin-top:1.1rem;
background:linear-gradient(90deg, var(--golden-400), transparent);
border-radius:999px;
}

.hero-emblem{
position:relative;
width:clamp(220px,24vw,310px);
aspect-ratio:1.2;
z-index:2;
}
.hero-emblem::before{
content:"";
position:absolute;
inset:0;
background-image:var(--emblem-branch);
background-repeat:no-repeat;
background-position:center;
background-size:contain;
filter:drop-shadow(0 18px 34px rgba(47,74,51,.22));
transform:rotate(-3deg);
}
.hero-emblem::after{
content:"";
position:absolute;
inset:6% 10% 28% 10%;
background:radial-gradient(circle at 40% 30%, rgba(214,170,61,.28), transparent 75%);
opacity:.65;
}

section.card{position:relative;}
.card{
background:linear-gradient(180deg, rgba(255,253,248,.96), rgba(234,242,230,.88));
border-radius:var(--radius-lg);
padding:clamp(1.2rem,3vw,1.9rem);
margin-block:1rem;
box-shadow:var(--shadow-1);
border:1px solid rgba(58,90,64,.12);
}
section.card::before{
content:"";
position:absolute;
left:50%;
top:-18px;
transform:translateX(-50%);
width:180px;
height:26px;
background-image:var(--olive-branch);
background-repeat:no-repeat;
background-position:center;
opacity:.9;
filter:drop-shadow(0 6px 10px rgba(58,90,64,.1));
z-index:2;
}
.card>h3{
margin-block:0 .6rem;
font-family:Marcellus,Georgia,serif;
color:var(--olive-900);
letter-spacing:.3px;
}
.card>h3 + .olive-divider{margin-block:.5rem 1rem;}

/* === Menu Card Grid Layout === */
.menu-card-grid{
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.menu-card{
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(58,90,64,.18);
  background: linear-gradient(180deg, rgba(249,246,239,.98), rgba(244,240,228,.96));
  box-shadow: 0 4px 16px rgba(32,50,36,.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.menu-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(32,50,36,.12);
  border-color: rgba(58,90,64,.2);
}

.menu-card.is-expanded{
  border-color: rgba(142,165,122,.35);
  box-shadow: 0 8px 28px rgba(32,50,36,.14);
}

.menu-card-header{
  width: 100%;
  padding: 1.3rem 1.6rem;
  font-family: Marcellus, Georgia, serif;
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--olive-700);
  background: linear-gradient(135deg, rgba(166,188,146,.22), rgba(193,209,178,.14));
  border: none;
  border-bottom: 2px solid rgba(58,90,64,.15);
  text-align: left;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.menu-card-header:hover{
  background: linear-gradient(135deg, rgba(166,188,146,.32), rgba(193,209,178,.22));
  color: var(--olive-900);
}

.menu-card-header:active{
  background: linear-gradient(135deg, rgba(166,188,146,.38), rgba(193,209,178,.28));
}

.menu-card-header-content{
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.menu-card-chevron{
  font-size: 2rem;
  line-height: 1;
  font-weight: 300;
  color: var(--olive-600);
  transition: transform 0.3s ease, color 0.2s ease;
  display: inline-block;
}

.menu-card-header:hover .menu-card-chevron{
  color: var(--olive-900);
}

.menu-card.is-expanded .menu-card-chevron{
  transform: rotate(90deg);
}

.section-icon{
  font-size: 1.5rem;
  line-height: 1;
}

.menu-card-items{
  padding: 1rem 1.4rem 1.2rem;
  overflow: hidden;
  max-height: 3000px;
  opacity: 1;
  transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease;
}

.menu-card-items.collapsed{
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.menu-item{
  padding: 0.85rem 0;
  border-bottom: 1px dotted rgba(58,90,64,.15);
}

.menu-item:last-child{
  border-bottom: 0;
  padding-bottom: 0;
}

.menu-item-content{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

.item-name{
  font-weight: 600;
  color: var(--olive-900);
  font-size: 0.98rem;
  flex: 1;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.item-number{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  height: 1.75rem;
  padding: 0 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--olive-700);
  background: linear-gradient(135deg, rgba(166,188,146,.2), rgba(193,209,178,.15));
  border: 1px solid rgba(58,90,64,.2);
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.item-icon{
  font-size: 1.2rem;
  line-height: 1;
  flex-shrink: 0;
}

.item-price{
  font-weight: 700;
  color: var(--olive-700);
  font-size: 0.95rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.item-desc{
  margin-top: 0.35rem;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
  font-style: italic;
}

.item-badges{
  margin-top: 0.5rem;
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.badge{
display:inline-flex;
align-items:center;
justify-content:center;
font-size:.78rem;
padding:.2rem .55rem;
border-radius:999px;
background:color-mix(in oklab, var(--sage-200) 55%, white);
border:1px solid rgba(58,90,64,.18);
color:var(--olive-700);
margin-right:.35rem;
}

.muted{color:var(--muted);}
.small{font-size:.9rem;}

.hours-table{
width:100%;
border-collapse:separate;
border-spacing:0 .4rem;
}
.hours-table tr{
background:linear-gradient(90deg, rgba(255,255,255,.95), rgba(222,236,210,.8));
box-shadow:0 1px 0 rgba(58,90,64,.08);
}
.hours-table td{padding:.6rem 1rem;}
.hours-table td:first-child{font-weight:650; color:var(--olive-700);}

.map{
aspect-ratio:16/9;
border-radius:var(--radius-lg);
overflow:hidden;
border:1px solid rgba(58,90,64,.18);
box-shadow:0 12px 28px rgba(32,50,36,.08);
}
.map iframe{width:100%; height:100%; border:0;}

.gallery-grid{
display:grid;
gap:.9rem;
grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
}
.gallery-grid figure{
margin:0;
border-radius:var(--radius-md);
overflow:hidden;
position:relative;
box-shadow:var(--shadow-1);
background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(236,244,229,.8));
}
.gallery-grid figcaption{
position:absolute;
inset:auto 0 0 0;
padding:.5rem .75rem;
font-size:.85rem;
background:linear-gradient(to top, rgba(0,0,0,.55), transparent);
color:white;
}

.contact-list{
list-style:none;
padding:0;
margin:0;
display:grid;
gap:.5rem;
}
.contact-list a{
color:var(--olive-700);
text-decoration:none;
border-bottom:1px solid rgba(58,90,64,.25);
transition:color .2s ease, background .2s ease;
}
.contact-list a:hover{
color:var(--olive-900);
background:color-mix(in oklab, var(--sage-200) 35%, white);
}
#contact-social{
display:flex;
gap:.35rem;
align-items:center;
flex-wrap:wrap;
}
#contact-social[hidden]{display:none;}
#contact-social-label{font-weight:600;}

.site-footer{
margin-top:3rem;
padding:1.5rem 0 2.4rem;
color:var(--muted);
background:linear-gradient(180deg, rgba(234,242,230,.6), rgba(255,255,255,.9));
border-top:1px solid rgba(58,90,64,.14);
}
.site-footer .wrap{
display:flex;
gap:.75rem;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
}
.site-footer a{color:var(--olive-700); text-decoration:none;}
.site-footer a:hover{color:var(--olive-900); text-decoration:underline;}

button,.btn{
appearance:none;
border:1px solid rgba(58,90,64,.2);
background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(234,242,230,.9));
color:var(--olive-700);
padding:.55rem 1rem;
border-radius:999px;
font-weight:650;
cursor:pointer;
text-decoration:none;
box-shadow:0 10px 24px rgba(32,50,36,.12);
transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
button:hover,.btn:hover{
transform:translateY(-1px);
box-shadow:0 14px 32px rgba(32,50,36,.16);
background:color-mix(in oklab, var(--sage-200) 45%, white);
}
button:active,.btn:active{transform:translateY(0);}

@media (max-width:900px){
.hero{grid-template-columns:1fr; text-align:center;}
.hero-text::after{margin-inline:auto;}
.hero-emblem{margin-inline:auto;}
.site-header .wrap{flex-direction:column; text-align:center;}
#site-name{width:100%;}
.header-controls{margin-left:0; width:100%; justify-content:center;}
.top-nav{justify-content:flex-start; margin-inline:auto;}
}

@media (max-width:640px){
body::after{background-size:320px;}
.wrap{padding-inline:clamp(.6rem,4vw,1rem);}
.card{padding:1rem;}
.top-nav{
flex-wrap:nowrap;
padding-left:.65rem;
padding-right:.65rem;
}
.top-nav-scroll-arrow-right,
.top-nav-scroll-arrow-left{
position:absolute;
top:1.1rem;
font-size:2rem;
font-weight:300;
color:var(--olive-600);
pointer-events:none;
z-index:1;
}
.top-nav-scroll-arrow-right{
right:-1.25rem;
animation:bounce-right 1.5s ease-in-out infinite;
opacity:1;
transition:opacity .3s ease;
}
.top-nav-scroll-arrow-right.hidden{
opacity:0;
}
.top-nav-scroll-arrow-left{
left:-1.25rem;
animation:bounce-left 1.5s ease-in-out infinite;
opacity:0;
transition:opacity .3s ease;
}
.top-nav-scroll-arrow-left.visible{
opacity:1;
}
.top-nav a{font-size:.82rem; padding:.38rem .65rem;}
.top-nav a:first-child{margin-left:0;}
.lang-switcher{justify-content:center;}
}

@keyframes bounce-right{
0%, 100%{transform:translateY(-50%) translateX(0);}
50%{transform:translateY(-50%) translateX(4px);}
}

@keyframes bounce-left{
0%, 100%{transform:translateY(-50%) translateX(0);}
50%{transform:translateY(-50%) translateX(-4px);}
}

@supports (animation-timeline:view()){
.card,.hero{animation:reveal .8s both; animation-timeline:view(); animation-range:entry 20% cover 20%;}
@keyframes reveal{from{opacity:0; translate:0 16px} to{opacity:1; translate:0 0}}
}

/* === Floating Instagram Button === */
.instagram-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color: white;
  text-decoration: none;
  border-radius: 50px;
  box-shadow: 0 8px 24px rgba(188, 24, 136, 0.4);
  font-weight: 600;
  font-size: 0.9rem;
  z-index: 1000;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: pulse 2s ease-in-out infinite;
}

.instagram-float:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 12px 32px rgba(188, 24, 136, 0.6);
  animation: none;
}

.instagram-float svg {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.instagram-float span {
  white-space: nowrap;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .instagram-float {
    bottom: 16px;
    right: 16px;
    padding: 8px 14px;
    font-size: 0.85rem;
  }

  .instagram-float svg {
    width: 24px;
    height: 24px;
  }
}

@media (max-width: 480px) {
  .instagram-float span {
    display: none;
  }
  
  .instagram-float {
    padding: 14px;
    border-radius: 50%;
    width: 52px;
    height: 52px;
    justify-content: center;
  }
}

/* === Menu Card Grid Responsive === */
@media (max-width: 768px) {
  .menu-card-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .menu-card-header {
    font-size: 1.2rem;
    padding: 1.2rem 1.3rem;
    min-height: 60px;
  }

  .menu-card-chevron{
    font-size: 1.8rem;
  }

  .item-name {
    font-size: 0.94rem;
  }

  .item-price {
    font-size: 0.92rem;
  }
}

@media (max-width: 480px) {
  .menu-card-header {
    padding: 1.1rem 1.2rem;
    font-size: 1.1rem;
  }

  .menu-card-items {
    padding: 0.85rem 1.1rem 1rem;
  }

  .menu-item {
    padding: 0.7rem 0;
  }

  .menu-card-chevron{
    font-size: 1.6rem;
  }
}

/* === Info Button with Glow Effect === */
.item-info-btn {
  appearance: none;
  background: linear-gradient(135deg, rgba(214,170,61,.25), rgba(190,140,37,.2));
  border: 2px solid rgba(214,170,61,.5);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  padding: 0;
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--olive-800);
  transition: all 0.3s ease;
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 2px 8px rgba(214,170,61,.4), 0 0 12px rgba(214,170,61,.2);
  animation: gentle-pulse 2.5s ease-in-out infinite;
  font-weight: 700;
  font-size: 13px;
  font-family: Georgia, serif;
}

.item-info-btn::before {
  content: 'i';
  position: absolute;
  font-style: italic;
  color: var(--olive-800);
  font-weight: 700;
}

.item-info-btn:hover {
  background: linear-gradient(135deg, rgba(214,170,61,.4), rgba(190,140,37,.35));
  border-color: rgba(214,170,61,.75);
  transform: scale(1.18);
  box-shadow: 0 4px 16px rgba(214,170,61,.6), 0 0 24px rgba(214,170,61,.4);
  animation: none;
}

.item-info-btn:active {
  transform: scale(1.08);
}

.item-info-btn svg {
  display: none;
}

@keyframes gentle-pulse {
  0%, 100% {
    box-shadow: 0 2px 8px rgba(214,170,61,.4), 0 0 12px rgba(214,170,61,.2);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 3px 12px rgba(214,170,61,.6), 0 0 20px rgba(214,170,61,.35);
    transform: scale(1.05);
  }
}

/* On mobile, add a subtle tap indicator */
@media (max-width: 768px) {
  .item-info-btn {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  .item-info-btn:active {
    background: rgba(214,170,61,.5);
  }
}

/* === Dish Details Modal === */
.dish-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

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

.dish-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(31,53,36,.75);
  backdrop-filter: blur(4px);
  animation: fadeIn 0.3s ease;
}

.dish-modal-content {
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, var(--card), rgba(234,242,230,.95));
  border-radius: var(--radius-lg);
  border: 2px solid rgba(214,170,61,.3);
  box-shadow: 0 24px 60px rgba(31,53,36,.4), 0 0 0 1px rgba(255,255,255,.5);
  max-width: 540px;
  width: 100%;
  max-height: 85vh;
  overflow: auto;
  animation: slideUp 0.3s ease;
}

.dish-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 1.5rem 1rem;
  border-bottom: 2px solid rgba(214,170,61,.2);
  background: linear-gradient(135deg, rgba(214,170,61,.08), transparent);
}

.dish-modal-header h4 {
  margin: 0;
  font-family: Marcellus, Georgia, serif;
  font-size: 1.5rem;
  color: var(--olive-900);
  flex: 1;
}

.dish-modal-close {
  appearance: none;
  background: rgba(255,255,255,.6);
  border: 1px solid rgba(58,90,64,.2);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--olive-700);
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.dish-modal-close:hover {
  background: rgba(255,255,255,.9);
  border-color: rgba(58,90,64,.35);
  color: var(--olive-900);
  transform: rotate(90deg);
}

.dish-modal-body {
  padding: 1.5rem;
}

.dish-modal-desc {
  margin: 0 0 1.5rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--muted);
  font-style: italic;
}

.dish-modal-desc:empty {
  display: none;
}

.dish-modal-allergens,
.dish-modal-additives {
  margin-top: 1.5rem;
}

.dish-modal-allergens:empty,
.dish-modal-additives:empty {
  display: none;
}

.dish-modal-allergens h5,
.dish-modal-additives h5 {
  margin: 0 0 0.75rem;
  font-family: Marcellus, Georgia, serif;
  font-size: 1.1rem;
  color: var(--olive-800);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dish-modal-allergens h5::before {
  content: "⚠️";
  font-size: 1rem;
}

.dish-modal-additives h5::before {
  content: "ℹ️";
  font-size: 1rem;
}

.allergen-list,
.additive-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.5rem;
}

.allergen-list li,
.additive-list li {
  padding: 0.65rem 0.85rem;
  background: linear-gradient(90deg, rgba(255,255,255,.85), rgba(234,242,230,.75));
  border-left: 3px solid rgba(214,170,61,.5);
  border-radius: 6px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--olive-900);
}

.allergen-list li strong,
.additive-list li strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6rem;
  height: 1.6rem;
  padding: 0 0.35rem;
  margin-right: 0.5rem;
  font-size: 0.8rem;
  color: var(--olive-700);
  background: rgba(214,170,61,.2);
  border: 1px solid rgba(214,170,61,.3);
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Modal responsive adjustments */
@media (max-width: 640px) {
  .dish-modal {
    padding: 0.5rem;
  }

  .dish-modal-content {
    max-height: 92vh;
    border-radius: var(--radius-md);
  }

  .dish-modal-header {
    padding: 1.2rem 1.2rem 0.85rem;
  }

  .dish-modal-header h4 {
    font-size: 1.3rem;
  }

  .dish-modal-body {
    padding: 1.2rem;
  }

  .allergen-list li,
  .additive-list li {
    font-size: 0.88rem;
  }
}