/* ===== FONT FAMILIES ===== */
@font-face{
  font-family:"La Machine Company";
  src:url("https://cdn.shopify.com/s/files/1/0846/4318/4899/files/La_Machine_Company.ttf?v=1793077389") format("truetype");
  font-display:swap;
}
@font-face{
  font-family:"Catavalo";
  src:url("https://cdn.shopify.com/s/files/1/0846/4318/4899/files/Catavalo-Regular.ttf?v=1793077352") format("truetype");
  font-display:swap;
}

:root{
  --bg:#CCBCA5;
  --ink:#485532;
  --font-heading:"Catavalo", Georgia, serif;             /* Margherita + MEADOW */
  --font-body:"Poppins", sans-serif;                     /* paragraph + menu */
  --font-pizza:"La Machine Company", Impact, sans-serif; /* PIZZA letters */
}

*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--ink);overflow-x:hidden}

/* ===== HEADER ===== */
.header{
  position:absolute;top:0;left:0;right:0;z-index:30;
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:26px 3.5vw 0;
}
.logo{text-decoration:none;display:block;flex-direction:column;align-items:center;line-height:1;color:var(--ink);margin-left:.5vw}
.logo{position:relative;z-index:2}
.logo img{display:block;height:clamp(56px,5.6vw,98px);width:auto}

.nav{
  display:flex;align-items:center;
  margin-top:10px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(72,85,50,.45);
  border-radius:14px;padding:10px 4px;
  font-family:var(--font-body);font-weight:400;
  font-size:clamp(12px,.95vw,17px);
}
.nav a{
  display:flex;align-items:center;gap:8px;
  color:var(--ink);text-decoration:none;padding:2px 16px;white-space:nowrap;
  transition:opacity .2s;
}
.nav a + a{border-left:1.5px solid var(--ink)}
.nav a:hover{opacity:.6}
.nav a:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
.nav .arrow-unused{width:6px;height:6px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:rotate(45deg) translateY(-2px)}

.menu-btn{display:none}
.nav-foot{display:none}
.logo img{display:block;height:clamp(54px,5.6vw,100px);width:auto}
.nav-foot{display:none}
html.menu-open{overflow:hidden}

/* ===== HERO ===== */
.hero{
  position:relative;z-index:2;min-height:100vh;width:100%;
  overflow:visible;overflow-x:clip;   /* neeche se cut nahi, sirf right edge par stick cut */
}

.hero-text{position:absolute;z-index:10;left:4.7vw;top:50%;transform:translateY(-52%)}
.hero-text h1{
  font-family:var(--font-heading);font-weight:400;
  font-size:clamp(52px,6.9vw,135px);line-height:1;letter-spacing:.005em;
}
.hero-text p{
  font-family:var(--font-body);font-weight:400;
  font-size:clamp(16px,1.7vw,32px);line-height:1.4;
  margin-top:.9em;max-width:17em;
}

/* pizza: handle (stick) right edge se aadha cut */
.pizza-wrap{
  position:absolute;z-index:5;right:-2.6vw;top:50%;
  width:min(44vw,860px);transform:translateY(-50%);
}
.pizza{
  width:100%;height:auto;display:block;
  filter:drop-shadow(0 25px 30px rgba(0,0,0,.25));
  transform:rotate(180deg);
  animation:pizzaFloat 8s ease-in-out infinite;
}
@keyframes pizzaFloat{
  0%,100%{transform:rotate(180deg) translateY(0) scale(1)}
  25%{transform:rotate(182deg) translateY(-12px) scale(1.02)}
  50%{transform:rotate(180deg) translateY(-18px) scale(1.03)}
  75%{transform:rotate(178deg) translateY(-8px) scale(1.015)}
}

/* ingredients */
.ing{position:absolute;z-index:6;height:auto;pointer-events:none;will-change:transform;transition:transform .25s ease-out;filter:drop-shadow(0 12px 12px rgba(0,0,0,.28))}
.ing-tomato   {top:1.5%;left:25%;width:8.5vw}
.ing-leaf     {top:-1%;left:47%;width:7.2vw}
.ing-coriander{top:17%;left:8.5%;width:3.6vw}
.ing-onion    {bottom:-3%;left:4.5%;width:13.5vw;z-index:8}
.ing-chilli   {bottom:-1%;left:36%;width:5.6vw}

/* PIZZA letters: ulta (180deg) + pizza ke neeche arc mein (JS position karta hai) */
.pizza-letters{
  position:absolute;inset:0;z-index:9;pointer-events:none;
  font-family:var(--font-pizza);
  color:transparent;-webkit-text-stroke:clamp(1px,.11vw,2px) var(--ink);   /* sirf outline */
  font-size:clamp(46px,7vw,135px);line-height:1;
}
.pizza-letters span{
  position:absolute;left:0;top:0;
  transform:translate(-50%,-50%) rotate(var(--r,180deg));
  opacity:0;
  animation:pop .7s cubic-bezier(.2,.9,.3,1.2) forwards;
  animation-delay:calc(var(--i) * .12s + .4s);
}
.pizza-letters span.fill{color:var(--ink)}                                  /* beech wala Z bhara hua */
@keyframes pop{
  from{opacity:0;transform:translate(-50%,-50%) rotate(var(--r)) scale(.5)}
  to  {opacity:1;transform:translate(-50%,-50%) rotate(var(--r)) scale(1)}
}

/* ===== RESPONSIVE ===== */
@media (max-width:900px){
  .header{position:fixed;align-items:center;padding:10px 5vw;background:rgba(204,188,165,.96)}
  .logo{position:relative;z-index:3;margin:0}
  .logo img{height:46px}
  .menu-btn{display:block}
  .hero{display:flex;flex-direction:column;padding:120px 6vw 22vw}
  .hero-text{position:static;transform:none}
  .hero-text p{font-size:18px}
  .pizza-wrap{position:relative;right:auto;top:auto;transform:none;width:100%;margin-top:30px}
  .ing-tomato{width:20vw;left:45%} .ing-leaf{width:16vw;left:72%}
  .ing-coriander{width:9vw} .ing-onion{width:28vw} .ing-chilli{width:12vw}
  .pizza-letters{font-size:11vw}
}
@media (prefers-reduced-motion:reduce){
  .pizza{animation:none}
  .pizza-letters span{animation:none;opacity:1;transform:translate(-50%,-50%) rotate(var(--r))}
  .ing{transition:none}
}
/* ensure new pizza keyframes respect reduced motion */
@media (prefers-reduced-motion:reduce){
  .pizza{animation:none !important}
}

/* ===================================================== */
/* ===== SECTION 2 : OUR SPECIALTIES ===== */
@font-face{
  font-family:"Anderfont";
  src:url("https://cdn.shopify.com/s/files/1/0846/4318/4899/files/anderfontfree.otf?v=1793077325") format("opentype");
  font-display:swap;
}
:root{ --font-script:"Anderfont", cursive; }

.specialties{
  position:relative;z-index:1;overflow:visible;overflow-x:clip;background:var(--bg);color:var(--ink);
  padding:clamp(70px,8vw,140px) 0 clamp(70px,8vw,140px);
}
.spec-chilli{
  position:absolute;top:-1vw;right:2vw;width:10vw;height:auto;z-index:3;pointer-events:none;
  filter:drop-shadow(0 12px 12px rgba(0,0,0,.28));
}

.spec-head{text-align:left}
.spec-title{
  position:relative;display:block;width:max-content;margin:0 auto;
  font-family:var(--font-heading);font-weight:400;
  font-size:clamp(48px,6.4vw,125px);line-height:1;
}
.spec-title .our{
  position:absolute;left:14%;top:-.62em;
  font-family:var(--font-script);font-size:.72em;line-height:1;
}
.spec-bar{
  margin:clamp(14px,1.6vw,26px) 0 0 22vw;
  background:var(--ink);color:#EDE3D0;
  font-family:var(--font-body);font-weight:400;
  font-size:clamp(13px,1.3vw,24px);
  padding:.55em 1.4em .55em 1.8em;
  border-radius:5px;
}

.spec-stage{position:relative;margin-top:clamp(30px,4vw,70px);padding:0 clamp(56px,6vw,110px)}
.spec-track{
  display:grid;grid-template-columns:repeat(3,1fr);align-items:center;gap:2vw;
  transition:opacity .22s ease,transform .22s ease;
}
.spec-track.swap{opacity:0;transform:translateX(var(--dx,30px))}

.dish{display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(10px,1.2vw,22px)}
.dish.up{flex-direction:column-reverse}               /* beech wali dish: text cup ke upar */
.dish img{
  width:clamp(170px,21vw,400px);height:auto;
  filter:drop-shadow(0 22px 22px rgba(0,0,0,.25));
  transform:rotate(var(--tilt,0deg));
  transition:transform .35s ease;
}
.dish:hover img{transform:rotate(calc(var(--tilt,0deg) * -1)) scale(1.04)}
.dish h3{
  font-family:var(--font-body);font-weight:600;
  font-size:clamp(11px,1vw,18px);line-height:1.35;text-transform:uppercase;
  max-width:16em;
}
.dish p{
  font-family:var(--font-body);font-weight:400;
  font-size:clamp(11px,.95vw,17px);line-height:1.5;
  max-width:24em;margin-top:.4em;
}

.spec-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:clamp(32px,2.6vw,48px);height:clamp(32px,2.6vw,48px);
  background:var(--ink);border:0;border-radius:8px;cursor:pointer;
  display:grid;place-items:center;transition:opacity .2s,transform .2s;
}
.spec-arrow:hover{opacity:.85}
.spec-arrow:active{transform:translateY(-50%) scale(.94)}
.spec-arrow:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.spec-arrow i{width:9px;height:9px;border-right:2px solid #EDE3D0;border-bottom:2px solid #EDE3D0}
.spec-prev{left:1.2vw} .spec-prev i{transform:rotate(135deg);margin-left:3px}
.spec-next{right:1.2vw} .spec-next i{transform:rotate(-45deg);margin-right:3px}

@media (max-width:900px){
  .spec-bar{margin-left:6vw;margin-right:0}
  .spec-chilli{width:20vw;right:0}
  .spec-stage{padding:0 6vw}
  .spec-track{grid-template-columns:1fr;gap:40px}
  .dish,.dish.up{flex-direction:column}
  .dish img{width:min(70vw,320px)}
  .dish h3{font-size:13px} .dish p{font-size:14px}
  .spec-arrow{display:none}
}
@media (prefers-reduced-motion:reduce){
  .spec-track{transition:none}
}

/* ===================================================== */
/* ===== SECTION 3 : LET'S SEE WHAT OTHER SAYS ===== */
.reviews{
  position:relative;z-index:1;background:var(--bg);color:var(--ink);
  padding:clamp(70px,9vw,170px) 0 clamp(70px,9vw,170px);
}
.rev-card{
  position:relative;isolation:isolate;width:80vw;max-width:1250px;margin:0 auto;
  transform:rotate(-2deg);                         /* poora div (border + image + text) tirchha */
  display:grid;grid-template-columns:38% 1fr auto;column-gap:4.3%;align-items:center;
  padding:0 3% 0 3.6%;
}
/* border image ke peeche rahti hai */
.rev-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  border:1.5px solid var(--ink);border-radius:8px;z-index:0;
}
.rev-img{
  position:relative;z-index:2;
  opacity:0;transition:opacity .3s ease;
  display:block;width:100%;height:auto;
  transform:translateY(-8.5%);                      /* sirf upar se border ke bahar */
  filter:drop-shadow(0 16px 18px rgba(0,0,0,.22));
}
.rev-img.ready{opacity:1}
.rev-body{transition:opacity .22s ease,transform .22s ease}
.rev-body.swap{opacity:0;transform:translateY(8px)}
.rev-title{
  font-family:var(--font-heading);font-weight:400;line-height:1;
  font-size:clamp(32px,5vw,96px);
}
.rev-sub{                                         /* title ke barabar chaurai */
  display:block;margin-top:.12em;
  font-family:var(--font-heading);font-weight:400;line-height:1.05;
  font-size:.5em;letter-spacing:.01em;
}
.rev-name{
  margin-top:1.2vw;
  font-family:var(--font-body);font-weight:600;font-size:clamp(15px,1.5vw,28px);
}
.rev-text{
  margin-top:.5em;
  font-family:var(--font-body);font-weight:400;
  font-size:clamp(12px,1.05vw,19px);line-height:1.6;
}
.rev-next{
  width:clamp(30px,2.6vw,46px);height:clamp(30px,2.6vw,46px);
  background:var(--ink);border:0;border-radius:10px;cursor:pointer;
  display:grid;place-items:center;transition:opacity .2s,transform .2s;
}
.rev-next:hover{opacity:.85}
.rev-next:active{transform:scale(.94)}
.rev-next:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.rev-next i{width:9px;height:9px;border-right:2px solid #EDE3D0;border-bottom:2px solid #EDE3D0;transform:rotate(-45deg);margin-right:3px}

@media (max-width:900px){
  .rev-card{width:88vw;grid-template-columns:1fr;row-gap:18px;padding:0 6% 24px;margin-top:70px;transform:rotate(-1.2deg)}
  .rev-img{width:70%;transform:none;margin-top:-60px}
  .rev-title{font-size:clamp(40px,13vw,80px)}
  .rev-name{font-size:18px;margin-top:14px}
  .rev-text{font-size:15px}
  .rev-next{justify-self:end}
}
@media (prefers-reduced-motion:reduce){ .rev-body{transition:none} }

/* ===================================================== */
/* ===== SECTION 4 : ABOUT OUR CAFE ===== */
.about{
  position:relative;z-index:1;background:var(--bg);color:var(--ink);
  display:grid;grid-template-columns:46% 1fr;align-items:center;
  padding:clamp(40px,5vw,100px) 6vw clamp(60px,7vw,130px) 0;
}
.about-img{
  display:block;width:100%;height:auto;
  max-height:min(100vh,900px);object-fit:contain;object-position:left center;
  opacity:0;transition:opacity .3s ease;
}
.about-img.ready{opacity:1}

.about-text{width:min(100%,42vw);margin:0 auto;text-align:center}
.about-title{
  font-family:var(--font-heading);font-weight:400;line-height:1;
  font-size:12vw;                                   /* JS CAFE ko text ki chaurai ke hisaab se fit karta hai */
}
.about-line{display:flex;align-items:flex-end;justify-content:center;margin-bottom:-.06em}
.about-script{
  font-family:var(--font-script);font-size:.5em;line-height:.9;
  margin-right:-.12em;position:relative;z-index:2;
}
.about-our{font-size:.36em;line-height:1;letter-spacing:.02em}
.about-cafe{display:inline-block;white-space:nowrap;letter-spacing:.02em}
.about-text p{
  font-family:var(--font-body);font-weight:400;
  font-size:clamp(12px,1.05vw,19px);line-height:1.65;
  margin-top:1.6em;
}
.about-text p + p{margin-top:1.4em}

@media (max-width:900px){
  .about{grid-template-columns:1fr;padding:50px 6vw 70px;row-gap:30px}
  .about-img{width:100%;max-height:none}
  .about-text{width:100%}
  .about-text p{font-size:15px}
}
@media (prefers-reduced-motion:reduce){ .about-img{transition:none} }

/* ===================================================== */
/* ===== SECTION 5 : OUR SPECIALTIES (3 olive columns) ===== */
.sp3{position:relative;z-index:1;background:var(--bg);color:var(--ink);overflow-x:clip;
  padding:clamp(60px,7vw,130px) 0 0}
.sp3-pepper{position:absolute;top:0;right:-3vw;width:11vw;height:auto;z-index:3;pointer-events:none;
  filter:drop-shadow(0 12px 12px rgba(72,85,50,.3))}
.sp3-chilli{position:absolute;top:22vw;right:17vw;width:9vw;height:auto;z-index:3;pointer-events:none;
  filter:drop-shadow(0 12px 12px rgba(72,85,50,.3))}
.sp3-title{position:relative;width:max-content;margin:0 auto clamp(30px,4vw,70px);
  font-family:var(--font-heading);font-weight:400;font-size:clamp(46px,6.4vw,125px);line-height:1;letter-spacing:.02em}
.sp3-title .our{position:absolute;right:-.5em;top:-.5em;font-family:var(--font-script);font-size:.72em;line-height:1;letter-spacing:0}
/* columns keep their natural height: staggered tops + slightly shorter text = staggered bottoms */
.sp3-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4.5vw;width:80vw;max-width:1400px;margin:0 auto;align-items:stretch}
.sp3-col{display:flex;flex-direction:column;align-items:center}
.sp3-col:nth-child(2){margin-top:52%}
.sp3-col:nth-child(3){margin-top:118%}
.sp3-plate{position:relative;z-index:2;width:118%;max-width:none;height:auto;opacity:0;transition:opacity .3s ease;
  filter:drop-shadow(0 16px 18px rgba(72,85,50,.28))}
.sp3-plate.ready{opacity:1}
.sp3-bar{flex:1;width:100%;background:var(--ink);color:#EDE3D0;margin-top:-26%;
  padding:calc(26% + 1.2vw) 1.6vw 4vw;text-align:center;
  font-family:var(--font-body);font-weight:400;font-size:clamp(11px,1vw,18px);line-height:1.6}
@media (max-width:900px){
  .sp3-pepper{width:20vw;right:-5vw}.sp3-chilli{display:none}
  .sp3-grid{grid-template-columns:1fr;gap:12vw;width:78vw}
  .sp3-col:nth-child(n){margin-top:0}
  .sp3-plate{width:100%}
  .sp3-bar{margin-top:-24%;padding:calc(24% + 16px) 6vw 28px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){ .sp3-plate{transition:none} }

/* ===================================================== */
/* ===== FOOTER ===== */
.foot{position:relative;z-index:1;margin-top:-1px;border-radius:clamp(22px,2.6vw,48px) clamp(22px,2.6vw,48px) 0 0;background:var(--ink);color:#EDE3D0;
  display:flex;justify-content:space-between;align-items:flex-start;gap:40px;
  padding:clamp(40px,5.5vw,110px) 8vw clamp(30px,3.5vw,70px) 8.5vw}
.foot a{color:inherit;text-decoration:none}
.foot a:hover{opacity:.75}
.foot a:focus-visible,.foot input:focus-visible,.foot button:focus-visible{outline:2px solid #EDE3D0;outline-offset:3px}

.foot-search{display:flex;align-items:center;width:min(100%,26vw);min-width:230px;
  border:2.5px solid #EDE3D0;border-radius:999px;padding:.5em 1.4em .5em 1.6em;margin-bottom:clamp(24px,2.8vw,56px)}
.foot-search input{flex:1;min-width:0;background:none;border:0;color:#EDE3D0;
  font-family:var(--font-body);font-style:italic;font-weight:400;font-size:clamp(14px,1.55vw,28px)}
.foot-search input::placeholder{color:#EDE3D0;opacity:1}
.foot-search input:focus{outline:none}
.foot-search button{background:none;border:0;color:#EDE3D0;cursor:pointer;display:grid;place-items:center}
.foot-search svg{width:clamp(22px,2.4vw,44px);height:clamp(22px,2.4vw,44px)}

/* rows: [icon] | line | text  — the vertical line runs from "Follow Us:" to the address */
.foot-info{font-family:var(--font-body);font-weight:500;font-size:clamp(12px,1.2vw,22px);line-height:1.4}
.foot-row{display:grid;grid-template-columns:1.5em 1fr;column-gap:1.3em;align-items:center}
.foot-row>.t{border-left:1.5px solid #EDE3D0;padding:.38em 0 .38em 1.1em}
.foot-row .ico{width:1.4em;height:1.4em;object-fit:contain;justify-self:center;display:block}
.foot-social{display:flex;align-items:center;gap:.5em}
.foot-social img{width:1.45em;height:1.45em;object-fit:contain;display:block}
.foot-social i{width:1px;height:1.2em;background:#EDE3D0;margin:0 .15em}

.foot-logo{display:flex;flex-direction:column;align-items:center;line-height:1;margin-top:.5vw}
.foot-logo img{display:block;width:clamp(130px,15vw,260px);height:auto}

@media (max-width:900px){
  .foot{flex-direction:column;align-items:flex-start;gap:36px;padding:50px 7vw 36px}
  .foot-search{width:100%}
  .foot-info{font-size:14px}
  .foot-logo{align-self:center;margin:0}
}

/* ===================================================== */
/* ===== SAME TOP / BOTTOM SPACING FOR EVERY SECTION ===== */
:root{--sec-y:clamp(70px,8vw,140px)}
.specialties,.reviews,.about{padding-top:var(--sec-y);padding-bottom:var(--sec-y)}
.sp3{padding-top:var(--sec-y);padding-bottom:0}   /* bars run straight into the footer */
@media (max-width:900px){
  :root{--sec-y:clamp(36px,8vw,70px)}
  .specialties,.reviews,.about{padding-top:var(--sec-y);padding-bottom:var(--sec-y)}
  .sp3{padding-top:var(--sec-y);padding-bottom:0}
}

/* ===== ANIMATION HELPERS ===== */
.ch{display:inline-block;will-change:transform}
.progress{position:fixed;top:0;left:0;width:100%;height:3px;background:var(--ink);transform-origin:0 50%;transform:scaleX(0);z-index:100;pointer-events:none}

/* ===================================================== */
/* ===== SECTION : POPULAR MENU ===== */
.pm{
  position:relative;z-index:1;width:100%;aspect-ratio:554/392;
  background:var(--bg);color:var(--ink);overflow:visible;overflow-x:clip;
}
.pm img{position:absolute;height:auto;pointer-events:none}
.pm-dots     {z-index:2;left:5%;   top:14.5%;width:21%}
.pm-coriander{z-index:5;left:48.5%;top:30%;  width:5.2%}
.pm-food     {z-index:3;left:13%;  top:47%;  width:37%;filter:drop-shadow(0 22px 22px rgba(0,0,0,.22))}
.pm-panel    {z-index:2;left:61%;  top:27%;  width:32%;filter:drop-shadow(0 18px 22px rgba(0,0,0,.28))}
.pm-pepper   {z-index:4;right:-1.5%;top:-1.5%;width:15%;filter:drop-shadow(0 12px 12px rgba(0,0,0,.28))}

.pm-title{
  position:absolute;z-index:4;left:33%;top:9.5%;
  font-family:var(--font-heading);font-weight:400;line-height:1;white-space:nowrap;
  font-size:clamp(40px,6.8vw,130px);
}
.pm-menu{                                   /* "Menu" script, Popular ke P ke neeche-left */
  position:absolute;left:-.65em;top:2.2em;
  font-family:var(--font-script);font-size:.62em;line-height:1;
  transform:rotate(-3deg);transform-origin:0 100%;
}
.pm-arrow{                                  /* Popular ke neeche se right ki taraf arrow */
  position:absolute;left:36%;top:1.1em;width:92%;height:auto;overflow:visible;color:var(--ink);
}
.pm-arrow .line{stroke-dasharray:1}

.pm-btn{
  position:absolute;z-index:6;left:1.6%;top:66%;
  width:clamp(30px,3vw,52px);height:clamp(30px,3vw,52px);
  background:var(--ink);border:0;border-radius:8px;cursor:pointer;
  display:grid;place-items:center;transition:opacity .2s;
}
.pm-btn:hover{opacity:.85}
.pm-btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.pm-btn i{width:8px;height:8px;border-left:2px solid #EDE3D0;border-bottom:2px solid #EDE3D0;transform:rotate(45deg);margin-left:3px}

@media (max-width:900px){
  .pm{aspect-ratio:auto;display:flex;flex-direction:column;align-items:center;gap:9vw;padding:calc(var(--sec-y)*.8) 6vw var(--sec-y);overflow-x:clip}
  .pm .pm-title{position:relative;left:auto;top:auto;font-size:17vw;align-self:center;margin:6vw 0 12vw;text-align:center}
  .pm .pm-menu{left:-.65em;top:2.2em;font-size:.55em}
  .pm .pm-arrow{left:42%;top:1.35em;width:82%}
  .pm .pm-food{position:relative;left:auto;top:auto;width:90%;margin-top:4vw}
  .pm .pm-panel{position:relative;left:auto;top:auto;width:92%}
  .pm .pm-dots,.pm .pm-pepper{display:none}
  .pm .pm-coriander,.pm .pm-btn,.pm .pm-badge,.pm .pm-steam{display:none}
}

/* ===== POPULAR MENU : extra motion (uses CSS "translate"/"rotate" props so GSAP reveals don't clash) ===== */
.pm-food  {animation:pmFloat 6s ease-in-out infinite}
.pm-panel {animation:pmFloat 7.5s ease-in-out -2s infinite}
.pm-pepper{transform-origin:80% 10%;animation:pmSway 5s ease-in-out infinite}
.pm-coriander{animation:pmSway 4s ease-in-out -1s infinite}
@keyframes pmFloat{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -1.6%;rotate:-.8deg}}
@keyframes pmSway{0%,100%{rotate:-5deg}50%{rotate:6deg}}
@keyframes pmSpin{to{rotate:360deg}}
.pm-steam{position:absolute;z-index:4;left:22%;top:34%;width:12%;height:auto;color:var(--ink);overflow:visible;pointer-events:none}
.pm-steam path{stroke-dasharray:90;stroke-dashoffset:90;opacity:0;animation:pmSteam 3.6s ease-in-out infinite}
.pm-steam path:nth-child(2){animation-delay:.9s}.pm-steam path:nth-child(3){animation-delay:1.8s}
@keyframes pmSteam{0%{stroke-dashoffset:90;opacity:0;translate:0 8px}30%{opacity:.7}100%{stroke-dashoffset:0;opacity:0;translate:0 -10px}}
.pm-badge{display:none} /* removed rotating badge image from Popular section */
.pm-badge svg{width:100%;height:100%;overflow:visible;animation:pmSpin 14s linear infinite}
.pm-badge text{fill:#EDE3D0;font-family:var(--font-body);font-weight:600;font-size:9.6px;letter-spacing:.14em}
.pm-badge .lf{stroke:#EDE3D0;transform-origin:50px 50px;animation:pmSpin 14s linear infinite reverse}
@media (prefers-reduced-motion:reduce){.pm-food,.pm-panel,.pm-pepper,.pm-coriander,.pm-dots,.pm-steam path,.pm-badge svg,.pm-badge .lf{animation:none}}
html{overflow-x:clip}

/* ===== FOOTER: image icons + logo ===== */
.foot-social a{display:block;line-height:0}
.foot-social img{width:1.45em;height:1.45em;object-fit:contain;display:block}
.foot-row .ico{object-fit:contain}
.foot-logo img{display:block;width:clamp(150px,17vw,320px);height:auto}

/* ===== MOBILE MENU (full-screen overlay) ===== */
html.menu-open,html.menu-open body{overflow:hidden}
@media (max-width:900px){
  .header{align-items:center}
  html.menu-open .header{position:fixed}
  .logo img{height:46px}
  .nav{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;position:fixed;inset:0;margin:0;border:0;border-radius:0;
    background:var(--bg);padding:130px 8vw 36px;z-index:40;overflow-y:auto;font-size:inherit;
    clip-path:circle(0px at calc(100% - 5vw - 24px) 34px);visibility:hidden;pointer-events:none;
    transition:clip-path .8s cubic-bezier(.7,0,.2,1),visibility 0s .8s}
  .nav.open{clip-path:circle(150vmax at calc(100% - 5vw - 24px) 34px);visibility:visible;pointer-events:auto;transition:clip-path .8s cubic-bezier(.7,0,.2,1),visibility 0s}
  .nav a{width:100%;padding:.18em 0;font-family:var(--font-heading);font-size:clamp(36px,11.5vw,60px);line-height:1.15;
    border:0!important;border-bottom:1px solid rgba(72,85,50,.28)!important;justify-content:space-between}
  .nav a.active{opacity:.55}
  .nav a.active::after{display:none}
  .nav-foot{display:flex;flex-direction:column;gap:8px;margin-top:auto;padding-top:34px;width:100%}
  .nav-foot a{font-family:var(--font-body);font-size:15px;font-weight:500;border:0!important;padding:0;width:auto}
  .nav.open a{animation:navIn .8s cubic-bezier(.2,.9,.3,1) both;animation-delay:calc(var(--n,1) * .07s + .3s)}
  @keyframes navIn{from{opacity:0;transform:translateY(40px)}}
  .menu-btn{display:block;position:relative;z-index:50;width:48px;height:48px;border:0;border-radius:50%;background:var(--ink);cursor:pointer;padding:0}
  .menu-btn span{position:absolute;left:14px;width:20px;height:2px;margin:0;background:#EDE3D0;border-radius:2px;transition:transform .45s cubic-bezier(.7,0,.2,1),top .45s cubic-bezier(.7,0,.2,1)}
  .menu-btn span:nth-child(1){top:19px}.menu-btn span:nth-child(2){top:27px}
  .menu-btn[aria-expanded="true"] span:nth-child(1){top:23px;transform:rotate(45deg)}
  .menu-btn[aria-expanded="true"] span:nth-child(2){top:23px;transform:rotate(-45deg)}
}

/* ===== SITE LOAD POPUP – Order Type style ===== */
.site-popup{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s .35s}
.site-popup.show{opacity:1;visibility:visible;transition:opacity .35s ease,visibility 0s}
.site-popup-backdrop{position:absolute;inset:0;background:rgba(40,48,28,.6);backdrop-filter:blur(5px)}
.site-popup-card{position:relative;z-index:1;background:#fff;color:var(--ink);border-radius:20px;max-width:380px;width:100%;text-align:center;box-shadow:0 28px 56px rgba(0,0,0,.28);transform:translateY(24px) scale(.96);transition:transform .4s cubic-bezier(.2,.9,.3,1);overflow:hidden}
.site-popup.show .site-popup-card{transform:translateY(0) scale(1)}
.site-popup-close{position:absolute;top:12px;right:12px;width:38px;height:38px;padding:0;border:1px solid rgba(72,85,50,.22);border-radius:50%;background:#fff;color:#344126;font-family:Arial,sans-serif;font-size:26px;font-weight:600;line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .2s,transform .2s;z-index:2;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.site-popup-close:hover{background:#f2f4ee;transform:scale(1.05)}

/* Order-type card layout */
.order-card .order-top{background:#4a5a36;padding:28px 24px 22px;display:flex;justify-content:center}
.order-card .site-popup-logo{margin:0}
.order-card .site-popup-logo img{height:52px;width:auto;filter:brightness(1.05)}
.order-body{padding:26px 24px 28px;text-align:left}
.order-body h2{font-family:var(--font-body);font-weight:600;font-size:18px;line-height:1.3;margin:0 0 18px;text-align:center;color:#1a1a1a}
.order-toggle{display:flex;background:#f0f0f0;border-radius:999px;padding:4px;margin-bottom:20px;gap:0}
.ot-btn{flex:1;border:0;background:transparent;font-family:var(--font-body);font-weight:500;font-size:14px;padding:10px 12px;border-radius:999px;cursor:pointer;color:#555;transition:background .2s,color .2s,box-shadow .2s}
.ot-btn.on{background:#fff;color:var(--ink);box-shadow:0 2px 8px rgba(0,0,0,.1);font-weight:600}
.order-label{display:block;font-family:var(--font-body);font-size:13px;color:#666;margin-bottom:8px}
.order-select-wrap{margin-bottom:18px;position:relative}
.order-select{width:100%;appearance:none;-webkit-appearance:none;font-family:var(--font-body);font-size:14px;padding:13px 40px 13px 14px;border:1.5px solid #ddd;border-radius:10px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center;color:#333;cursor:pointer;transition:border-color .2s}
.order-select:focus{outline:none;border-color:var(--ink)}
.order-select-wrap.shake{animation:shake .4s ease}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.order-select-btn{width:100%;border:0;background:#c5c5c5;color:#fff;font-family:var(--font-body);font-weight:600;font-size:15px;padding:14px;border-radius:10px;cursor:pointer;transition:background .25s}
.order-select-btn:hover{background:#4a5a36}
.order-select-btn:active{transform:scale(.98)}
@media (max-width:400px){
  .order-body{padding:22px 18px 24px}
  .order-body h2{font-size:16px}
}
body.has-cur .site-popup,body.has-cur .site-popup *{cursor:auto!important}
body.has-cur .site-popup button,body.has-cur .site-popup select{cursor:pointer!important}