/* Mozzarella Menu — self-contained frontend styles (scoped under .mpk-app) */
.mpk-app {
  --mpk-bg: #121212;
  --mpk-surface: #1c1c1e;
  --mpk-surface-2: #27272a;
  --mpk-red: #ef4444;
  --mpk-green: #10b981;
  --mpk-gold: #f59e0b;
  --mpk-wa: #25d366;
  --mpk-line: rgba(255,255,255,.1);
  background: var(--mpk-bg);
  color: #fff;
  font-family: "DM Sans", system-ui, sans-serif;
  min-height: 100vh;
  line-height: 1.5;
}
.mpk-app *, .mpk-app *::before, .mpk-app *::after { box-sizing: border-box; }
.mpk-app h1,.mpk-app h2,.mpk-app h3 { font-family:"Outfit",sans-serif; margin:0; }
.mpk-app img { max-width:100%; display:block; }
.mpk-app ::selection { background: var(--mpk-red); color:#fff; }

/* HERO */
.mpk-hero { position:relative; overflow:hidden; }
.mpk-hero-glow { position:absolute; inset:0; pointer-events:none; }
.mpk-hero-glow::before,.mpk-hero-glow::after{ content:""; position:absolute; width:300px; height:300px; border-radius:50%; filter:blur(100px); }
.mpk-hero-glow::before{ left:-80px; top:-80px; background:rgba(239,68,68,.22); }
.mpk-hero-glow::after{ right:-80px; top:20px; background:rgba(16,185,129,.2); }
.mpk-hero-inner{ position:relative; max-width:1100px; margin:0 auto; padding:18px 16px 30px; }
.mpk-topbar{ display:flex; align-items:center; justify-content:flex-start; }
.mpk-phone-left{ display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:rgba(255,255,255,.8); font-size:14px; border:1px solid rgba(255,255,255,.15); background:rgba(0,0,0,.4); border-radius:999px; padding:6px 14px; }
.mpk-phone-left:hover{ color:#fff; }
.mpk-phone-ico{ display:inline-flex; color:var(--mpk-green); }
.mpk-lang{ display:inline-flex; align-items:center; gap:2px; border:1px solid rgba(255,255,255,.15); background:rgba(0,0,0,.4); border-radius:999px; padding:4px 8px; }
.mpk-lang span{ color:rgba(255,255,255,.2); }
.mpk-lang-btn{ background:none; border:none; color:rgba(255,255,255,.6); font-weight:700; font-size:12px; padding:4px 8px; border-radius:999px; cursor:pointer; }
.mpk-lang-btn.active{ background:var(--mpk-red); color:#fff; }
.mpk-brand{ text-align:center; margin-top:22px; }
.mpk-logo{ height:auto; width:auto; max-height:120px; max-width:260px; object-fit:contain; margin:0 auto; display:block; }
@media(min-width:640px){ .mpk-logo{ max-height:150px; max-width:340px; } }
.mpk-tagline{ color:rgba(255,255,255,.6); font-size:14px; margin-top:14px; }
.mpk-title{ font-size:clamp(38px,7vw,62px); font-weight:900; color:var(--mpk-gold); margin-top:12px; }
.mpk-subtitle{ font-weight:700; letter-spacing:.25em; text-transform:uppercase; font-size:18px; color:rgba(255,255,255,.9); }
.mpk-addr{ color:rgba(255,255,255,.45); font-size:13px; margin-top:8px; }
.mpk-search-wrap{ max-width:560px; margin:24px auto 0; }
.mpk-search{ width:100%; border:1px solid rgba(255,255,255,.15); background:rgba(28,28,30,.8); color:#fff; border-radius:999px; padding:14px 20px; font-size:15px; outline:none; }
.mpk-search:focus{ border-color:var(--mpk-red); }
.mpk-search::placeholder{ color:rgba(255,255,255,.4); }

/* NAV */
.mpk-nav{ position:sticky; top:0; z-index:40; border-bottom:1px solid var(--mpk-line); background:rgba(0,0,0,.7); backdrop-filter:blur(16px); }
.mpk-nav-inner{ max-width:1100px; margin:0 auto; display:flex; gap:8px; overflow-x:auto; padding:12px 16px; -ms-overflow-style:none; scrollbar-width:none; }
.mpk-nav-inner::-webkit-scrollbar{ display:none; }
.mpk-pill{ white-space:nowrap; border:none; cursor:pointer; border-radius:999px; padding:8px 20px; font-family:"Outfit",sans-serif; font-weight:600; font-size:14px; background:var(--mpk-surface-2); color:rgba(255,255,255,.7); transition:background-color .2s,color .2s; }
.mpk-pill.active{ background:var(--mpk-red); color:#fff; box-shadow:0 0 15px rgba(239,68,68,.4); }

/* SECTIONS */
.mpk-main{ max-width:1100px; margin:0 auto; padding:36px 16px; }
.mpk-noresults{ text-align:center; color:rgba(255,255,255,.5); padding:60px 0; }
.mpk-section{ margin-bottom:52px; scroll-margin-top:80px; }
.mpk-sec-head{ display:flex; align-items:center; gap:12px; margin-bottom:22px; flex-wrap:wrap; }
.mpk-viewall{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; text-decoration:none; border:1px solid rgba(255,255,255,.15); background:var(--mpk-surface); color:rgba(255,255,255,.8); border-radius:999px; padding:8px 16px; font-family:"Outfit"; font-weight:600; font-size:13px; cursor:pointer; transition:border-color .2s,color .2s; }
.mpk-viewall:hover{ border-color:var(--mpk-red); color:#fff; }
.mpk-catbar{ margin-bottom:18px; }
.mpk-back{ display:inline-flex; align-items:center; gap:6px; text-decoration:none; border:1px solid rgba(255,255,255,.15); background:var(--mpk-surface); color:rgba(255,255,255,.85); border-radius:999px; padding:8px 18px; font-family:"Outfit"; font-weight:600; font-size:14px; }
.mpk-back:hover{ color:#fff; border-color:var(--mpk-red); }
.mpk-count{ color:rgba(255,255,255,.45); font-size:13px; }
.mpk-footer-lang{ display:flex; align-items:center; justify-content:center; gap:12px; border-bottom:1px solid var(--mpk-line); padding:16px; }
.mpk-lang-label{ font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.45); }
.mpk-bar{ width:6px; height:28px; border-radius:999px; background:var(--mpk-red); }
.mpk-cat-name{ font-size:clamp(22px,4vw,30px); font-weight:900; }
.mpk-grid{ display:grid; grid-template-columns:1fr; gap:22px; }
@media(min-width:640px){ .mpk-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:980px){ .mpk-grid{ grid-template-columns:repeat(3,1fr); } }

/* CARD */
.mpk-card{ display:flex; flex-direction:column; overflow:hidden; border-radius:16px; border:1px solid var(--mpk-line); background:var(--mpk-surface); cursor:pointer; text-align:left; transition:transform .2s,border-color .2s,box-shadow .2s; }
.mpk-card:hover{ transform:translateY(-4px); border-color:rgba(255,255,255,.25); box-shadow:0 10px 40px rgba(0,0,0,.5); }
.mpk-card-img{ aspect-ratio:4/3; background:rgba(0,0,0,.4); overflow:hidden; }
.mpk-card-img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.mpk-card:hover .mpk-card-img img{ transform:scale(1.05); }
.mpk-noimg{ display:flex; align-items:center; justify-content:center; height:100%; color:rgba(255,255,255,.2); font-family:"Outfit"; font-size:38px; }
.mpk-card-body{ padding:16px; display:flex; flex-direction:column; gap:10px; flex:1; }
.mpk-card-title{ font-size:18px; font-weight:700; }
.mpk-card-desc{ font-size:14px; color:rgba(255,255,255,.55); margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* PRICES */
.mpk-prices{ display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; }
.mpk-price-pill{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--mpk-line); background:rgba(0,0,0,.3); border-radius:999px; padding:4px 12px; }
.mpk-price-pill .mpk-size{ font-size:12px; font-weight:700; color:rgba(255,255,255,.7); }
.mpk-price-pill .mpk-val{ font-family:"Outfit"; font-size:14px; font-weight:700; color:var(--mpk-gold); }
.mpk-price-single{ font-family:"Outfit"; font-weight:800; color:var(--mpk-gold); font-size:20px; margin-top:auto; }
.mpk-price-lg{ font-size:24px; }

/* FOOTER */
.mpk-footer{ margin-top:40px; border-top:1px solid var(--mpk-line); background:#0d0d0e; }
.mpk-footer-inner{ max-width:1100px; margin:0 auto; padding:48px 16px; display:grid; gap:36px; }
@media(min-width:820px){ .mpk-footer-inner{ grid-template-columns:1fr 1fr; } }
.mpk-footer-brand{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.mpk-footer-brand img{ height:56px; width:56px; object-fit:contain; border-radius:50%; }
.mpk-fb-name{ display:block; font-family:"Outfit"; font-size:20px; font-weight:900; }
.mpk-fb-sub{ display:block; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--mpk-gold); }
.mpk-about{ color:rgba(255,255,255,.6); font-size:14px; max-width:440px; }
.mpk-fline{ color:rgba(255,255,255,.75); font-size:14px; margin:6px 0; }
.mpk-social{ display:flex; gap:12px; margin-top:14px; }
.mpk-social a{ color:#fff; text-decoration:none; border:1px solid var(--mpk-line); background:var(--mpk-surface); padding:8px 16px; border-radius:999px; font-size:13px; transition:background-color .2s; }
.mpk-social a:hover{ background:var(--mpk-red); }
.mpk-footer-map iframe{ width:100%; height:280px; border:0; border-radius:16px; filter:invert(.9) hue-rotate(180deg); }
.mpk-directions{ display:flex; align-items:center; justify-content:center; margin-top:14px; background:var(--mpk-red); color:#fff; text-decoration:none; border-radius:999px; padding:12px 24px; font-family:"Outfit"; font-weight:700; }
.mpk-copy{ border-top:1px solid var(--mpk-line); text-align:center; padding:18px; font-size:12px; color:rgba(255,255,255,.4); }

/* WHATSAPP FLOATING */
.mpk-wa{ position:fixed; bottom:20px; right:20px; z-index:50; display:inline-flex; align-items:center; gap:8px; background:var(--mpk-wa); color:#fff; text-decoration:none; border-radius:999px; padding:14px 18px; font-family:"Outfit"; font-weight:700; box-shadow:0 4px 20px rgba(37,211,102,.45); animation:mpk-wa-pulse 2.2s ease-in-out infinite; }
.mpk-wa:hover{ transform:scale(1.05); }
.mpk-wa-text{ font-size:14px; }
@media(max-width:520px){ .mpk-wa-text{ display:none; } }
@keyframes mpk-wa-pulse{ 0%,100%{ box-shadow:0 4px 20px rgba(37,211,102,.45);} 50%{ box-shadow:0 4px 30px rgba(37,211,102,.85);} }

/* MODAL */
.mpk-modal{ position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(0,0,0,.8); backdrop-filter:blur(4px); }
.mpk-modal[hidden]{ display:none; }
.mpk-modal-box{ position:relative; width:100%; max-width:520px; max-height:92vh; overflow-y:auto; background:var(--mpk-surface); border:1px solid var(--mpk-line); border-radius:24px; }
.mpk-modal-close{ position:absolute; top:14px; right:14px; z-index:2; width:40px; height:40px; border:none; border-radius:50%; background:rgba(0,0,0,.6); color:#fff; font-size:24px; cursor:pointer; }
.mpk-modal-img{ aspect-ratio:16/10; background:rgba(0,0,0,.4) center/cover no-repeat; }
.mpk-modal-body{ padding:24px; display:flex; flex-direction:column; gap:14px; }
.mpk-modal-title{ font-size:24px; font-weight:900; }
.mpk-modal-desc{ color:rgba(255,255,255,.7); font-size:14px; margin:0; }
.mpk-modal-ing-label{ font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--mpk-gold); margin:0 0 4px; }
.mpk-modal-ing{ color:rgba(255,255,255,.6); font-size:14px; margin:0; }
.mpk-modal-price{ border:1px solid var(--mpk-line); background:rgba(0,0,0,.3); border-radius:16px; padding:16px; }
.mpk-modal-price:empty{ display:none; }
.mpk-modal-order{ display:flex; align-items:center; justify-content:center; background:var(--mpk-wa); color:#fff; text-decoration:none; border-radius:999px; padding:14px; font-family:"Outfit"; font-weight:700; }