/* Mi Pate v10-20261110 — MOBILE-FIRST. v10: no top bar, no logo on the homepage,
   cover photo FULL-SCREEN (100svh) on mobile and desktop. Minimal like the Wix Pizza Restaurant template
   (1702): the slideshow IS the hero — big and full-width like the pizza
   site's cover, tall on desktop and on mobile too. Orange + white, taken
   from the real Mi Pate logo (PSD sticker): primary orange #B54104,
   light orange #F49E37. Cover text is the Wix lockup: script "The" on top,
   huge bold condensed "MI PATÉ" (Anton), small spaced "TAKEOUT & PICKUP",
   3 white lines on each side of the name. No serif on the cover. */
:root{
  --cream:#FFFFFF; --paper:#FFFFFF; --ink:#211A17; --muted:#7A6F66;
  --line:#F0E3D6; --orange:#B54104; --orange-d:#8F3403; --orange-l:#F49E37;
  --orange-soft:#FFF3E8; --soft:#FFF3E8;
  --radius:18px; --max:1080px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{overflow-x:clip}
body{margin:0;font-family:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--cream);color:var(--ink);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:"DM Serif Display",Georgia,serif;font-weight:400;line-height:1.15;margin:0}
p{margin:0}
.wrap{max-width:var(--max);margin:0 auto;padding:0 16px}
.topbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.topbar-in{max-width:var(--max);margin:0 auto;padding:10px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px}
/* v9: storefront logo sits CENTERED (Hai: logo is usually in the middle).
   3-column grid: spacer | logo | Order button, so the logo stays exactly
   centered while Order stays visible and thumb-reachable on the right. */
.topbar.storefront .topbar-in{display:grid;grid-template-columns:1fr auto 1fr}
.topbar-spacer{display:block}
.topbar.storefront .brand{justify-self:center}
.topbar.storefront .topbar-in .btn{justify-self:end;min-height:44px}
.brand{display:block;text-decoration:none;line-height:0}
.brand-logo{height:44px;width:auto}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--orange);color:#fff;border:1px solid var(--orange);border-radius:999px;padding:12px 22px;font:600 15px "Manrope",sans-serif;cursor:pointer;text-decoration:none;white-space:nowrap;min-height:44px}
.btn:hover{background:var(--orange-d);border-color:var(--orange-d)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.small{padding:10px 16px;font-size:14px;min-height:44px}
.btn.block{width:100%}
.btn:disabled{opacity:.55;cursor:not-allowed}
/* ---- v8: no separate hero — the ONE cover photo IS the hero, and it is BIG
   like the Wix pizza site's cover: full viewport width, tall (nearly a
   full screen), on desktop AND on mobile — never a narrow strip. Minimal
   text on the photo, like the Wix template's "The PIZZA SHOP / TAKEOUT &
   DELIVERY / Order Online": script word on top, huge bold condensed name,
   one small spaced line, one button, nothing else. ---- */
.eyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:0}
.eyebrow.center{text-align:center}
.slideshow-wrap{position:relative;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding:0;margin-bottom:64px}
.section-head.center{flex-direction:column;align-items:center;text-align:center;justify-content:center}
.section-head.center p{max-width:52ch}
.slideshow{position:relative;border-radius:0;overflow:hidden;height:100vh;height:100svh;min-height:520px;background:var(--soft)}
.slide{display:none;position:absolute;inset:0;margin:0}
.slide.active{display:block}
.slide img{width:100%;height:118%;margin-top:-9%;object-fit:cover;will-change:transform}
/* ---- v7: brand lockup ON the cover photo, exactly like the Wix
   template's "The PIZZA SHOP": script "The" on top, the name huge in
   bold condensed sans (Anton, NOT serif — Hai said the v5/v6 serif looked
   bad), "TAKEOUT & PICKUP" small and evenly spaced below, 3 short white
   lines on each side of the name, one white Order Online button. Sits
   above the slides, scrolls at normal speed while the photo parallaxes
   behind. Button is the only clickable part of the overlay (the rest is
   pointer-events:none). */
.slide-brand{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);z-index:5;display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none;text-align:center;padding:0 20px}
.slide-brand-script{font-family:"Great Vibes",cursive;font-size:clamp(30px,8vw,58px);line-height:1;color:#fff;text-shadow:0 2px 14px rgba(20,16,12,.55)}
.slide-brand-row{display:flex;align-items:center;justify-content:center;gap:clamp(10px,3vw,40px);max-width:100%}
.brand-lines{display:flex;flex-direction:column;gap:10px;flex:none}
.brand-lines i{display:block;width:clamp(22px,6vw,72px);height:3px;background:#fff;box-shadow:0 1px 6px rgba(20,16,12,.5)}
.slide-brand-name{font-family:"Anton","Oswald",sans-serif;font-weight:400;font-size:clamp(54px,15vw,190px);line-height:.95;letter-spacing:.01em;text-transform:uppercase;color:#fff;text-shadow:0 2px 24px rgba(20,16,12,.55),0 1px 4px rgba(20,16,12,.6);white-space:nowrap}
.slide-brand-sub{font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:rgba(255,255,255,.97);font-weight:700;text-shadow:0 1px 8px rgba(20,16,12,.6)}
.slide-brand-btn{pointer-events:auto;margin-top:16px;background:#fff;color:var(--ink);border:1px solid #fff;padding:16px 34px;font-size:17px;min-height:52px}
.slide-brand-btn:hover{background:var(--orange-soft);border-color:#fff}
.slide-nav,.dots{z-index:6}
/* ---- v7: circular rotating text badge, like banhmiandyou.com. Small white
   disc with orange ring text, overlapping the slideshow's bottom-right
   corner like a sticker. Slow and gentle (28s per turn). Never covers the
   Order button or the dots. Stops spinning for reduced motion. ---- */
.spin-badge{position:absolute;right:12px;bottom:-42px;z-index:7;width:84px;height:84px;border-radius:50%;background:#fff;border:1.5px solid var(--orange);box-shadow:0 10px 28px rgba(33,26,23,.18);display:grid;place-items:center}
.spin-badge svg{width:78px;height:78px;animation:spinbadge 28s linear infinite}
.spin-badge text{fill:var(--orange);font:700 11px "Manrope",sans-serif;letter-spacing:1.5px}
.spin-dot{position:absolute;width:11px;height:11px;border-radius:50%;background:var(--orange)}
@keyframes spinbadge{to{transform:rotate(360deg)}}
.slide-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:0;background:rgba(251,248,242,.92);color:var(--ink);font-size:28px;line-height:1;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.slide-nav.prev{left:14px}
.slide-nav.next{right:14px}
.slide-nav:hover{background:#fff}
.dots{position:absolute;top:14px;right:14px;display:flex;gap:8px}
.dot{width:9px;height:9px;border-radius:50%;border:0;background:rgba(255,255,255,.55);cursor:pointer;padding:0}
.dot.active{background:#fff;transform:scale(1.25)}
.featured-grid{display:grid;grid-template-columns:1fr;gap:16px}
.featured-grid .card-compact{flex-direction:column}
.featured-grid .card-text{padding:6px 0}
.featured-grid .card-text .card-body{padding:22px 22px}
.featured-grid .card-text h3{font-size:22px}
.featured-grid .card-text p.desc{font-size:16px;line-height:1.55}
.featured-grid .card-compact h3{font-size:21px}
.section{padding:48px 0 8px}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:8px;flex-wrap:wrap}
.section-head h2{font-size:clamp(30px,4vw,40px)}
.section-head p{color:var(--muted);max-width:52ch}
.tray-note{margin:14px 0 26px;background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:14px 18px;font-size:15px}
.tray-note strong{font-weight:700}
.menu-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.featured-grid .card-body{padding:14px 16px}
.menu-grid.compact .card-body{padding:12px 14px;gap:6px}
.card-compact{flex-direction:row;align-items:stretch}
.card-compact>img{width:112px;min-height:112px;aspect-ratio:auto;object-fit:cover;flex:none}
.card-compact h3{font-size:19px}
.card-compact p.desc{font-size:13.5px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-compact .btn.small{padding:7px 13px;font-size:13px}
.consent-row{display:flex;gap:10px;align-items:flex-start;font-size:14px;font-weight:400;cursor:pointer}
.consent-row input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--orange)}
.card{background:var(--paper);border:1px solid var(--line);border-radius:20px;overflow:hidden;display:flex;flex-direction:column}
.card img{width:100%;aspect-ratio:16/10;object-fit:cover}
.card-body{padding:20px;display:flex;flex-direction:column;gap:10px;flex:1}
.card-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.card-top h3{font-size:24px}
.price{font-weight:700;white-space:nowrap}
.price small{font-weight:500;color:var(--muted);font-size:13px}
.tag{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);font-weight:700}
.card p.desc{color:#4A453F;font-size:15px;flex:1}
.qty-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.stepper{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.stepper button{width:40px;height:40px;border:0;background:transparent;font-size:18px;cursor:pointer}
.stepper span{min-width:32px;text-align:center;font-weight:700}
.note-input{width:100%;border:1px solid var(--line);border-radius:10px;padding:8px 10px;font:400 13px "Manrope",sans-serif;background:var(--cream)}
.note-input::placeholder{color:#9A938A}

.info-bar{margin:48px 0 8px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:14px}
.info-bar b{color:var(--ink)}
footer{padding:32px 0 120px;color:var(--muted);font-size:14px;text-align:center}
/* v8: sticky Order bar on mobile (GloriaFood) — replaces the old cart fab */
.sticky-order{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:12px 16px calc(12px + env(safe-area-inset-bottom, 0px));background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-top:1px solid var(--line)}
.sticky-order .btn{width:100%;padding:15px;font-size:17px;min-height:52px;box-shadow:0 10px 30px rgba(0,0,0,.22)}
@media (max-width:760px){.sticky-order{display:block}}
/* cart */
.cart-fab{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;display:none}
.cart-fab.show{display:block}
.cart-fab .btn{width:100%;padding:15px;font-size:16px;box-shadow:0 10px 30px rgba(0,0,0,.22)}
.drawer{position:fixed;inset:0;z-index:80;display:none}
.drawer.open{display:block}
.drawer-bg{position:absolute;inset:0;background:rgba(20,16,12,.45)}
.drawer-panel{position:absolute;right:0;top:0;bottom:0;width:min(480px,100%);background:var(--cream);overflow-y:auto;padding:24px}
.drawer-panel h2{font-size:30px;margin-bottom:4px}
.drawer-sub{color:var(--muted);font-size:14px;margin-bottom:18px}
.cart-line{border-top:1px solid var(--line);padding:14px 0;display:flex;gap:12px;align-items:flex-start}
.cart-line .nm{font-weight:700}
.cart-line .pr{color:var(--muted);font-size:14px}
.cart-line .grow{flex:1}
.cart-line .amt{font-weight:700;white-space:nowrap}
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;font-weight:700;margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px;font:400 16px "Manrope",sans-serif;background:#fff}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.total-row{display:flex;justify-content:space-between;font-weight:700;font-size:18px;border-top:1px solid var(--line);padding-top:14px;margin:6px 0 16px}
.pay-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.pay-opt{border:1px solid var(--line);border-radius:12px;padding:12px;cursor:pointer;background:#fff;font:600 14px "Manrope",sans-serif}
.pay-opt.on{border-color:var(--orange);background:var(--orange);color:#fff}
.empty{color:var(--muted);padding:24px 0;text-align:center}
.confirm{text-align:center;padding:32px 0}
.confirm .code{font-family:"DM Serif Display",Georgia,serif;font-size:40px;margin:10px 0}
.confirm p{color:#4A453F}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:84px;background:var(--ink);color:#fff;padding:12px 18px;border-radius:999px;font-size:14px;z-index:90;display:none}
.toast.show{display:block}
/* ---- v9: MOBILE-FIRST. The rules above ARE the phone layout. This block
   only widens things for desktop — desktop is the expanded version, not
   the other way round. ---- */
@media (min-width:761px){
  .wrap{padding:0 20px}
  .brand-logo{height:52px}
  .slideshow{height:100vh;height:100svh;min-height:560px}
  .slideshow-wrap{margin-bottom:72px}
  .slide-brand-name{font-size:clamp(72px,13vw,190px)}
  .slide-brand-script{font-size:clamp(34px,4.5vw,58px)}
  .slide-brand-sub{font-size:14px;letter-spacing:.4em}
  .brand-lines{gap:12px}
  .brand-lines i{width:clamp(36px,5vw,72px)}
  .spin-badge{width:112px;height:112px;right:20px;bottom:-56px}
  .spin-badge svg{width:104px;height:104px}
  .spin-badge text{font-size:12.5px;letter-spacing:2px}
  .featured-grid{grid-template-columns:repeat(3,1fr);gap:14px}
  .section{padding:40px 0 8px}
  footer{padding:32px 0 90px}
}
@media (max-width:760px){
  .slide-nav{width:38px;height:38px;font-size:24px}
  .menu-grid{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
}
/* Very small phones (iPhone SE / old Android, ~360px): shrink the lockup
   lines and the top-bar button so nothing ever overflows sideways. */
@media (max-width:360px){
  .brand-logo{height:38px}
  .topbar-in{padding:10px 12px;gap:8px}
  .topbar.storefront .topbar-in .btn{padding:9px 13px;font-size:13px}
  .slide-brand-name{font-size:clamp(48px,14.5vw,96px)}
  .brand-lines i{width:20px;height:2px}
  .brand-lines{gap:8px}
  .slide-brand-sub{letter-spacing:.26em}
}

/* ---- v2: fancy polish — soft corners, light shadows, airy spacing ---- */
.card{box-shadow:0 1px 2px rgba(30,27,24,.04),0 14px 34px -18px rgba(30,27,24,.20);transition:transform .25s ease,box-shadow .25s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(30,27,24,.05),0 20px 44px -18px rgba(30,27,24,.26)}

.section-head h2{letter-spacing:.01em}
/* ---- v2: full menu inside the Order drawer ---- */
.order-item{display:flex;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.order-item:first-child{border-top:0}
.order-item>img{width:64px;height:64px;object-fit:cover;border-radius:12px;flex:none;background:var(--soft)}
.order-item .grow{flex:1;min-width:0}
.order-item h3{font-size:18px}
.order-item .desc{font-size:13px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.custom-group{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:8px 10px;margin:8px 0}
.custom-title{font-size:13px;font-weight:700;margin-bottom:4px}
.custom-title .req{color:#B3261E}
.custom-hint{font-weight:500;color:var(--muted);font-size:12px}
.custom-opt{display:flex;align-items:center;gap:8px;font-size:14px;padding:4px 0;cursor:pointer}
.custom-opt input{accent-color:var(--orange);width:16px;height:16px;flex:none}
.drawer-foot{position:sticky;bottom:0;background:var(--cream);padding:14px 0 4px;border-top:1px solid var(--line);margin-top:8px}
@media (max-width:760px){
  .order-item>img{width:64px;height:64px}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .spin-badge svg{animation:none}
  .card{transition:none}
}