/* Mi Pate v8-20261108 — 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}
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 20px}
.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}
.brand{display:block;text-decoration:none;line-height:0}
.brand-logo{height:48px;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}
.btn:hover{background:var(--orange-d);border-color:var(--orange-d)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.small{padding:9px 16px;font-size:14px}
.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:72px}
.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:min(88vh,880px);min-height:560px;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(34px,4.5vw,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(16px,3vw,40px)}
.brand-lines{display:flex;flex-direction:column;gap:12px;flex:none}
.brand-lines i{display:block;width:clamp(36px,5vw,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(72px,13vw,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:14px;letter-spacing:.4em;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:14px 30px;font-size:16px}
.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:20px;bottom:-56px;z-index:7;width:112px;height:112px;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:104px;height:104px;animation:spinbadge 28s linear infinite}
.spin-badge text{fill:var(--orange);font:700 12.5px "Manrope",sans-serif;letter-spacing:2px}
.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:repeat(3,1fr);gap:14px}
.featured-grid .card-compact{flex-direction:column}
.featured-grid .card-text{padding:6px 0}
.featured-grid .card-text .card-body{padding:22px 24px}
.featured-grid .card-text h3{font-size:22px}
.featured-grid .card-text p.desc{font-size:15px}
.featured-grid .card-compact h3{font-size:21px}
.section{padding:40px 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:32px;height:32px;border:0;background:transparent;font-size:17px;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 90px;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:16px;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 15px "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}
@media (max-width:760px){
  .slideshow{height:78vh;min-height:520px}
  .slide-brand-name{font-size:clamp(54px,15vw,96px)}
  .slide-brand-script{font-size:32px}
  .brand-lines{gap:8px}
  .brand-lines i{width:26px;height:2px}
  .slide-nav{width:38px;height:38px;font-size:24px}
  .spin-badge{width:84px;height:84px;right:12px;bottom:-42px}
  .spin-badge svg{width:78px;height:78px}
  .spin-badge text{font-size:11px;letter-spacing:1.5px}
  .brand-logo{height:40px}
  .featured-grid{grid-template-columns:1fr}
  .menu-grid{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
}

/* ---- 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}
}