/* Pão de Quê? — v2. Off-white de farinha, grafite da logo, casca como único acento. Uma identidade só, sempre clara. */
@font-face{font-family:"Instrument Serif";src:url(fonts/instrument-serif-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(fonts/instrument-serif-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(fonts/instrument-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(fonts/instrument-sans-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(fonts/instrument-sans-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --bg:#F7F4EE; --bg-2:#EFE9DF; --card:#FFFDF9;
  --ink:#15181C; --ink-2:#2B3037; --muted:#7A7268; --line:rgba(21,24,28,.10); --line-2:rgba(21,24,28,.18);
  --crust:#B07A45; --crust-2:#8E5C2E; --crust-soft:rgba(176,122,69,.12);
  --ok:#3D7A52; --low:#B0681E; --off:#9A9389;
  --glass:rgba(250,248,244,.72);
  --serif:"Instrument Serif","Cormorant Garamond",Georgia,serif;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.2,.7,.1,1);
  --gut:max(16px,env(safe-area-inset-left,0px));
  --gut-r:max(16px,env(safe-area-inset-right,0px));
  --pad:clamp(20px,5vw,72px);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#F7F4EE}}
:root[data-theme="dark"]{--bg:#F7F4EE}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--crust);outline-offset:3px;border-radius:6px}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.serif{font-family:var(--serif);font-weight:400}
.wrap{padding-left:max(var(--pad),env(safe-area-inset-left,0px));padding-right:max(var(--pad),env(safe-area-inset-right,0px))}
.logo-mark{display:block;aspect-ratio:1012/632;background:currentColor;-webkit-mask:url(img/logo.png) center/contain no-repeat;mask:url(img/logo.png) center/contain no-repeat}

/* botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:999px;font-size:14px;font-weight:500;letter-spacing:.01em;transition:transform .35s var(--ease),background .3s,color .3s,box-shadow .3s;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn-ink{background:var(--ink);color:var(--bg)}
.btn-ink:hover{background:#000}
.btn-crust{background:var(--crust);color:#FFF9F0}
.btn-crust:hover{background:var(--crust-2)}
.btn-ghost{border:1px solid var(--line-2);background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.btn[disabled]{opacity:.4;pointer-events:none}
.icon-btn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-2);background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}

/* status */
.chip{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 11px;border-radius:99px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--line);background:var(--card);white-space:nowrap}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.chip.disponivel{color:var(--ok)}
.chip.ultimas{color:var(--low)}
.chip.esgotado,.chip.fora{color:var(--off)}
.chip.forno{color:var(--crust-2);background:var(--crust-soft);border-color:transparent}
.chip.forno::before{animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25}}

/* barra da sacola */
.bagbar{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:12px var(--gut-r) calc(12px + env(safe-area-inset-bottom,0px)) var(--gut);pointer-events:none;transform:translateY(120%);transition:transform .6s var(--ease)}
.bagbar.show{transform:none}
.bagbar .in{pointer-events:auto;max-width:560px;margin:0 auto;display:flex;align-items:center;gap:14px;padding:10px 10px 10px 20px;border-radius:999px;background:var(--ink);color:var(--bg);box-shadow:0 24px 60px -18px rgba(21,24,28,.6)}
.bagbar .sum{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.bagbar .sum b{font-weight:600;font-size:15px;font-variant-numeric:tabular-nums}
.bagbar .sum span{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;opacity:.6}

/* folhas (detalhe e checkout) */
.scrim{position:fixed;inset:0;z-index:60;background:rgba(21,24,28,.35);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:.45s var(--ease)}
.sheet{position:fixed;z-index:61;left:0;right:0;bottom:0;max-height:92svh;overflow-y:auto;overscroll-behavior:contain;background:var(--bg);border-radius:26px 26px 0 0;transform:translateY(104%);transition:transform .6s var(--ease);padding-bottom:env(safe-area-inset-bottom,0px)}
.sheet.open{transform:none}
.sheet.open~.scrim,.scrim.on{opacity:1;visibility:visible}
@media (min-width:900px){
  .sheet{left:auto;top:0;bottom:0;width:480px;max-height:none;border-radius:0;transform:translateX(104%)}
}
.sheet-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.grab{position:absolute;left:50%;top:7px;width:40px;height:4px;border-radius:4px;background:var(--line-2);transform:translateX(-50%)}
@media (min-width:900px){.grab{display:none}}

.qty{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:999px;height:44px}
.qty button{width:44px;height:44px;font-size:18px;display:grid;place-items:center}
.qty output{min-width:24px;text-align:center;font-weight:600;font-variant-numeric:tabular-nums}

.field{display:grid;gap:6px}
.field>span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{width:100%;min-height:48px;border:1px solid var(--line-2);border-radius:14px;background:var(--card);padding:12px 14px;font-size:16px}
.field textarea{min-height:76px;resize:vertical}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:5px;border:1px solid var(--line);border-radius:16px;background:var(--bg-2)}
.seg button{min-height:44px;border-radius:12px;font-size:14px;font-weight:500;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--card);color:var(--ink);box-shadow:0 1px 0 var(--line),0 6px 16px -10px rgba(21,24,28,.35)}

.err{border-radius:14px;background:#FBEDE6;color:#8A3B14;padding:12px 14px;font-size:14px}
.notice{border-radius:14px;background:var(--crust-soft);color:var(--crust-2);padding:10px 14px;font-size:13px}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}