/* ============================================================
   CARDÁPIO — seleção de itens
   ============================================================ */

.cardapio-hero{
  position:relative; padding:120px 0 46px; overflow:hidden;
  background:
    linear-gradient(180deg, rgba(10,8,6,.62), rgba(10,8,6,.92)),
    url('../assets/img/food-defumados.jpg') center 35%/cover no-repeat;
}
.cardapio-hero::after{ content:""; position:absolute; inset:0;
  background:radial-gradient(70% 90% at 50% 120%, rgba(242,105,26,.22), transparent 60%); }
.cardapio-hero .wrap{ position:relative; z-index:2; text-align:center; }
.cardapio-hero h1{
  font-family:var(--ff-display); text-transform:uppercase;
  font-size:clamp(2.6rem,8vw,5rem); line-height:.9; margin:12px 0;
}
.cardapio-hero p{ color:var(--muted); max-width:560px; margin:0 auto; }
.back-link{ display:inline-flex; align-items:center; gap:8px; color:var(--muted);
  font-family:var(--ff-cond); text-transform:uppercase; letter-spacing:.12em; font-size:.78rem; }
.back-link:hover{ color:var(--fire-2); }

/* stepper de instrução */
.how{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:26px; }
.how span{ font-family:var(--ff-cond); text-transform:uppercase; letter-spacing:.06em;
  font-size:.76rem; color:var(--gold); border:1px solid var(--line); border-radius:999px; padding:7px 14px; }
.how b{ color:var(--fire-2); }

/* ---------- nav de categorias sticky ---------- */
.cat-nav{
  position:sticky; top:0; z-index:50;
  background:rgba(10,8,6,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.cat-nav .inner{ display:flex; gap:6px; overflow-x:auto; padding:12px 22px; max-width:var(--maxw); margin:0 auto; scrollbar-width:none; }
.cat-nav .inner::-webkit-scrollbar{ display:none; }
.cat-nav a{
  flex:0 0 auto; font-family:var(--ff-cond); text-transform:uppercase; letter-spacing:.06em;
  font-size:.82rem; color:var(--muted); padding:8px 14px; border-radius:999px; white-space:nowrap;
  transition:.2s; border:1px solid transparent;
}
.cat-nav a:hover{ color:var(--cream); }
.cat-nav a.active{ color:var(--fire-2); border-color:var(--fire); background:rgba(242,105,26,.08); }

/* ---------- corpo ---------- */
.cardapio-body{ padding:44px 0 160px; }
.cardapio-layout{ display:grid; grid-template-columns:1fr 340px; gap:40px; align-items:start; }

.menu-cat{ margin-bottom:46px; scroll-margin-top:76px; }
.menu-cat-head{ display:flex; align-items:center; gap:12px; margin-bottom:18px;
  padding-bottom:12px; border-bottom:1px solid var(--line); }
.menu-cat-head svg{ width:20px; height:24px; fill:var(--fire-2); }
.menu-cat-head h2{ font-family:var(--ff-display); text-transform:uppercase; font-size:1.9rem; letter-spacing:.01em; }
.menu-cat-count{ margin-left:auto; font-family:var(--ff-cond); text-transform:uppercase;
  letter-spacing:.1em; font-size:.72rem; color:var(--fire-2); }

.menu-items{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.menu-item{
  display:flex; align-items:center; gap:12px; cursor:pointer;
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:13px 15px; transition:border-color .18s, background .18s, transform .1s; user-select:none;
}
.menu-item:hover{ border-color:#3d2c1f; }
.menu-item.sel{ border-color:var(--fire); background:linear-gradient(180deg, rgba(242,105,26,.12), rgba(242,105,26,.04)); }
.mi-check{
  flex:0 0 auto; width:24px; height:24px; border-radius:7px;
  border:2px solid var(--muted-2); display:grid; place-items:center; transition:.18s;
}
.mi-check svg{ width:15px; height:15px; color:#20120a; opacity:0; transform:scale(.4); transition:.18s; }
.menu-item.sel .mi-check{ background:var(--fire-2); border-color:var(--fire-2); }
.menu-item.sel .mi-check svg{ opacity:1; transform:scale(1); }
.mi-name{ flex:1; font-size:.95rem; line-height:1.3; }
.mi-qty{ display:none; align-items:center; gap:8px; flex:0 0 auto; }
.menu-item.sel .mi-qty{ display:flex; }
.qbtn{ width:26px; height:26px; border-radius:7px; border:1px solid var(--line);
  background:var(--bg-3); color:var(--cream); font-size:1rem; cursor:pointer; line-height:1;
  display:grid; place-items:center; }
.qbtn:hover{ border-color:var(--fire); color:var(--fire-2); }
.qval{ min-width:16px; text-align:center; font-variant-numeric:tabular-nums; }

/* ---------- temáticos ---------- */
.tematicos{ margin-top:20px; }
.tematicos-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.tema-card{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:22px; transition:border-color .2s; }
.tema-card.sel{ border-color:var(--fire); background:linear-gradient(180deg, rgba(242,105,26,.1), transparent); }
.tema-card h3{ font-family:var(--ff-display); text-transform:uppercase; font-size:1.5rem; color:var(--fire-2); margin-bottom:12px; }
.tema-card ul{ margin-bottom:18px; }
.tema-card li{ color:var(--muted); font-size:.9rem; padding:4px 0 4px 16px; position:relative; }
.tema-card li::before{ content:"›"; position:absolute; left:0; color:var(--fire); }
.tema-btn{ width:100%; justify-content:center; padding:11px; font-size:.82rem; }

/* ---------- carrinho (coluna desktop) ---------- */
.cart-panel{ position:sticky; top:84px; }
.cart-card{
  background:linear-gradient(180deg, var(--bg-3), var(--panel));
  border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:var(--shadow);
}
.cart-card h3{ font-family:var(--ff-display); text-transform:uppercase; font-size:1.3rem;
  padding:18px 20px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:10px; }
.cart-card h3 .badge{ margin-left:auto; background:var(--fire-2); color:#20120a; font-family:var(--ff-cond);
  font-size:.8rem; min-width:26px; height:26px; padding:0 8px; border-radius:999px; display:grid; place-items:center; }
#cart-list{ max-height:300px; overflow-y:auto; padding:14px 20px; }
.cart-cat{ font-family:var(--ff-cond); text-transform:uppercase; letter-spacing:.1em;
  font-size:.72rem; color:var(--fire-2); margin:12px 0 6px; }
.cart-cat:first-child{ margin-top:0; }
.cart-line{ font-size:.9rem; color:var(--cream); padding:3px 0; }
.cart-empty{ color:var(--muted-2); font-size:.9rem; text-align:center; padding:20px 0; }

.cart-form{ padding:16px 20px; border-top:1px solid var(--line); display:grid; gap:10px; }
.cart-form label{ font-family:var(--ff-cond); text-transform:uppercase; letter-spacing:.08em;
  font-size:.68rem; color:var(--muted); margin-bottom:-4px; }
.cart-form input, .cart-form textarea{
  background:var(--bg); border:1px solid var(--line); border-radius:9px; color:var(--cream);
  padding:10px 12px; font-family:var(--ff-body); font-size:.9rem; width:100%; }
.cart-form input:focus, .cart-form textarea:focus{ outline:none; border-color:var(--fire); }
.cart-form textarea{ resize:vertical; min-height:56px; }
.cart-form .row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.cart-send{ padding:16px 20px 20px; border-top:1px solid var(--line); }
.cart-send .btn{ width:100%; justify-content:center; }
.cart-note{ text-align:center; font-size:.74rem; color:var(--muted-2); margin-top:10px; }

/* ---------- barra fixa mobile ---------- */
.cart-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:80; transform:translateY(120%);
  transition:transform .3s; background:rgba(10,8,6,.96); backdrop-filter:blur(12px);
  border-top:1px solid var(--line); padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  display:flex; gap:12px; align-items:center;
}
.cart-bar.show{ transform:none; }
.cart-bar .count{ display:flex; flex-direction:column; line-height:1.05; }
.cart-bar .count b{ font-family:var(--ff-display); font-size:1.5rem; color:var(--fire-2); }
.cart-bar .count small{ font-size:.66rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); }
.cart-bar #open-cart-2{ margin-left:auto; }
.cart-bar .btn{ padding:13px 20px; }

/* ---------- drawer mobile ---------- */
.drawer-backdrop{ position:fixed; inset:0; z-index:120; background:rgba(0,0,0,.6);
  opacity:0; pointer-events:none; transition:.3s; }
.cart-drawer.open ~ .drawer-backdrop, .drawer-backdrop.on{ opacity:1; pointer-events:auto; }
.cart-drawer{
  position:fixed; z-index:130; right:0; top:0; bottom:0; width:min(420px,92vw);
  background:var(--bg-2); border-left:1px solid var(--line); transform:translateX(100%);
  transition:transform .32s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column;
}
.cart-drawer.open{ transform:none; }
.cart-drawer header{ display:flex; align-items:center; padding:18px 20px; border-bottom:1px solid var(--line); }
.cart-drawer header h3{ font-family:var(--ff-display); text-transform:uppercase; font-size:1.4rem; }
.cart-drawer .close{ margin-left:auto; background:none; border:none; color:var(--muted); cursor:pointer; }
.cart-drawer .drawer-scroll{ overflow-y:auto; flex:1; }

/* toast */
#toast{ position:fixed; left:50%; bottom:90px; transform:translate(-50%,20px); z-index:300;
  background:var(--bg-3); border:1px solid var(--fire); color:var(--cream); padding:12px 18px;
  border-radius:10px; font-size:.9rem; opacity:0; pointer-events:none; transition:.25s; box-shadow:var(--shadow); }
#toast.show{ opacity:1; transform:translate(-50%,0); }

/* mostrar/ocultar por breakpoint */
.only-mobile{ display:none; }

/* ---------- DESKTOP: carrinho vira sidebar sticky ---------- */
@media (min-width:901px){
  .cart-drawer{
    position:sticky; top:84px; transform:none !important; width:auto;
    height:max-content; max-height:calc(100vh - 104px);
    background:linear-gradient(180deg, var(--bg-3), var(--panel));
    border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow);
  }
  .cart-drawer header .close{ display:none; }
  .cart-drawer .drawer-scroll{ overflow:visible; }
  #cart-list{ max-height:38vh; }
  .drawer-backdrop, .cart-bar{ display:none !important; }
}

@media (max-width:900px){
  .cardapio-layout{ grid-template-columns:1fr; }
  .only-mobile{ display:flex; }
  .menu-items{ grid-template-columns:1fr; }
  .tematicos-grid{ grid-template-columns:1fr; }
  .cardapio-body{ padding-bottom:120px; }
}