@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

@property --gradient-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@property --gradient-angle-offset { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@property --gradient-percent { syntax: "<percentage>"; initial-value: 5%; inherits: false; }
@property --gradient-shine { syntax: "<color>"; initial-value: white; inherits: false; }
@keyframes gradient-angle { to { --gradient-angle: 360deg; } }

#fg-menu {
  --bg: #000; --surface: #151515; --surface-2: #1f1f1f; --line: #2a2a2a;
  --orange: #FF914D; --text: #fff; --muted: #b3aaa3;
  --shiny-cta-bg: #000; --shiny-cta-bg-subtle: #FF914D; --shiny-cta-highlight: #FF914D;
  --gradient-shine: #fff;
  --ease: cubic-bezier(.25, 1, .5, 1);
  font-family: 'Poppins', sans-serif; color: var(--text); background: var(--bg);
  max-width: 760px; margin: 0 auto; padding-bottom: 104px; position: relative;
  -webkit-tap-highlight-color: transparent;
}
#fg-menu * { box-sizing: border-box; }
#fg-menu h1, #fg-menu h2, #fg-menu h3, #fg-menu p { margin: 0; }
#fg-menu ::selection { background: var(--orange); color: #000; }
#fg-menu button, #fg-menu select, #fg-menu input, #fg-menu textarea { font-family: inherit; }
#fg-menu :focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
#fg-menu ::placeholder { color: #8b8580; }
.fg-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* topo com logo */
html, body { overflow-x: clip; }
/* mesmo degradê radial do topo da home (#FF914D → #FF3131), sangrando até as bordas da tela */
.fg-hero { display: block !important; margin: 0 calc(50% - 50vw); padding: 28px calc(50vw - 50% + 16px) 22px; text-align: center;
  background: radial-gradient(circle at center center, #FF914D 15%, #FF3131 100%); }
.fg-hero img { display: block; margin: 0 auto; width: min(240px, 64vw); height: auto; }
.fg-hero p { color: #1a0800; font-weight: 500; font-size: .88rem; margin-top: 8px; text-wrap: balance; }

/* abas de categoria */
.fg-tabs { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--line);
  display: flex; gap: 8px; overflow-x: auto; padding: 10px 16px; scrollbar-width: none; }
.fg-tabs::-webkit-scrollbar { display: none; }
.fg-tabs a { flex: none; min-height: 40px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--text); background: var(--surface); font-size: .85rem; font-weight: 600;
  text-decoration: none; transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
.fg-tabs a:hover { border-color: var(--orange); }
.fg-tabs a.on { background: var(--orange); border-color: var(--orange); color: #000; }

/* categorias */
.fg-cat { padding: 28px 16px 0; scroll-margin-top: 68px; }
.fg-cat > h2 { font-size: 1.3rem; font-weight: 800; color: var(--orange); text-wrap: balance; }
.fg-cat > p { color: var(--muted); font-size: .82rem; margin-top: 2px; }
.fg-list { display: grid; gap: 14px; margin-top: 14px; }

/* card com borda brilhante rotacionando (mesmo efeito da home) */
.fg-card {
  --animation: gradient-angle linear infinite; --duration: 3s;
  isolation: isolate; position: relative; overflow: hidden; display: grid; grid-template-columns: 132px 1fr; gap: 14px; align-items: start;
  padding: 12px; line-height: 1.2; border: 1px solid transparent; border-radius: 12px; color: var(--text);
  background: linear-gradient(var(--shiny-cta-bg), var(--shiny-cta-bg)) padding-box,
    conic-gradient(from calc(var(--gradient-angle) - var(--gradient-angle-offset)), transparent,
      var(--shiny-cta-highlight) var(--gradient-percent), var(--gradient-shine) calc(var(--gradient-percent) * 2),
      var(--shiny-cta-highlight) calc(var(--gradient-percent) * 3), transparent calc(var(--gradient-percent) * 4)) border-box;
  box-shadow: inset 0 0 0 1px var(--shiny-cta-bg-subtle);
  animation: var(--animation) var(--duration);
}
@media (prefers-reduced-motion: reduce) { .fg-card { animation: none; } }
.fg-card:not(:has(.fg-img)) { grid-template-columns: 1fr; }
.fg-img { width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 18px; object-fit: cover; background: var(--surface); display: block; }
.fg-info { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.fg-info h3 { font-size: 1rem; font-weight: 700; text-wrap: balance; }
.fg-info .d { color: var(--muted); font-size: .8rem; line-height: 1.4; }

/* variações (tamanho) */
.fg-vars { border: 0; padding: 0; margin: 2px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(56px, 1fr)); gap: 6px; min-width: 0; }
.fg-vars label { cursor: pointer; }
.fg-vars span { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 36px; padding: 0 6px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); font-size: .72rem; font-weight: 600; line-height: 1.15; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.fg-vars label:hover span { border-color: var(--orange); }
.fg-vars input:checked + span { background: var(--orange); border-color: var(--orange); color: #000; }
.fg-vars input:focus-visible + span { outline: 2px solid var(--orange); outline-offset: 2px; }

.fg-price { font-weight: 800; color: var(--orange); font-size: 1.2rem; font-variant-numeric: tabular-nums; margin-top: 2px; }
.fg-add { width: 100%; min-height: 44px; border: 0; cursor: pointer; background: var(--orange); color: #000; font-weight: 700; font-size: .9rem;
  border-radius: 10px; padding: 0 16px; transition: transform .2s var(--ease), background .2s var(--ease); }
.fg-add:hover { background: #ffa66e; }
.fg-add:active { transform: scale(.97); }
.fg-add.ok { background: #fff; }

@media (max-width: 380px) { .fg-card { grid-template-columns: 108px 1fr; gap: 10px; } }

/* desktop: produtos em linhas de 3 colunas */
@media (min-width: 1024px) {
  #fg-menu { max-width: 1200px; }
  .fg-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .fg-card { grid-template-columns: 120px 1fr; }
  .fg-cat { padding-inline: 24px; }
  .fg-tabs { padding-inline: 24px; }
  .fg-bar a { max-width: 1152px; }
}

/* barra do carrinho */
.fg-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); display: none; }
.fg-bar.show { display: block; }
.fg-bar a { width: 100%; max-width: 728px; margin: 0 auto; min-height: 52px; display: flex; justify-content: space-between; align-items: center;
  background: var(--orange); color: #000; text-decoration: none; border-radius: 12px; padding: 0 18px; font-weight: 700; font-size: .95rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.6); font-variant-numeric: tabular-nums; }
.fg-bar a:hover { background: #ffa66e; }

.fg-ver { display: inline-flex; align-items: center; gap: 8px; }
.fg-ico { flex: none; }
#fg-count { min-width: 64px; }

/* barra superior: logo + lista de categorias + busca (organização do cardápio digital) */
.fg-top { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 16px; }
.fg-top .fg-mini { width: 40px; height: auto; flex: none; }
.fg-top select { flex: 1; min-width: 0; min-height: 44px; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; font: 600 .9rem 'Poppins', sans-serif; }
.fg-top button { flex: none; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.fg-top button:hover, .fg-top select:hover { border-color: var(--orange); }
.fg-top input[type=search] { flex: 1 0 100%; min-height: 44px; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; font: 500 .95rem 'Poppins', sans-serif; }
.fg-top input[type=search]:focus { outline: none; border-color: var(--orange); }
.fg-top input[hidden], .fg-card[hidden], .fg-cat[hidden] { display: none !important; }
.fg-cat { scroll-margin-top: 72px; }