/* ==========================================================
   LP GRILL — PREMIUM LIGHT / iFood-like (MOBILE FIRST)
   ✅ CSS LIMPO / SEM DUPLICAÇÃO
   ✅ Padrão Massas em todas páginas (cards com foto)
   ✅ Mobile ajustado: itens encaixam e botões menores
   ✅ Stepper único (sem conflitos)
   ✅ Modal Adicionais por cima (igual pagamento)
   ✅ QR code sempre aparece no checkout
   ========================================================== */

/* =========================
   TOKENS / VARIÁVEIS
   ========================= */
:root{
  --bg:#F4F6FA;
  --bg2:#FFFFFF;
  --card:#FFFFFF;

  --text:#111827;
  --muted:rgba(17,24,39,.62);
  --line:rgba(17,24,39,.10);

  --wine:#7f1d1d;
  --wine2:#4c0f0f;
  --red1:#A10F0F;
  --red2:#D32F2F;

  --green:#16A34A;
  --wa:#25D366;

  --radius:18px;
  --radius2:22px;

  --shadow1: 0 10px 22px rgba(17,24,39,.08);
  --shadow2: 0 14px 40px rgba(17,24,39,.10);

  /* FIX BARRA INFERIOR */
  --bottomBarH: 92px; /* desktop */
}

@media (max-width: 640px){
  :root{ --bottomBarH: 108px; } /* celular */
}

/* =========================
   RESET / BASE
   ========================= */
*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);

  background:
    radial-gradient(900px 460px at 92% 0%, rgba(211,47,47,.06), transparent 60%),
    radial-gradient(900px 460px at 8% 0%, rgba(127,29,29,.06), transparent 60%),
    linear-gradient(180deg, #ffffff, var(--bg));

  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;

  /* FIX: nada fica escondido atrás do sticky bottom */
  padding-bottom: calc(var(--bottomBarH) + env(safe-area-inset-bottom, 0px));
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
h1,h2,h3{ margin:0; }
p{ margin:6px 0 0; }

/* wrapper */
.container,
.lp-wrap{
  max-width:980px;
  margin:0 auto;
  padding:14px 14px calc(var(--bottomBarH) + 22px);
}

/* ============================================================
   PAGEBAR (sticky)
============================================================ */
.pagebar{
  position:sticky;
  top:0;
  z-index: 2000;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;

  background: rgba(244,246,250,.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  border-bottom:1px solid rgba(17,24,39,.08);
}

.back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 11px;
  border-radius:14px;
  border:1px solid rgba(17,24,39,.10);
  background: rgba(255,255,255,.88);
  font-weight:900;
  font-size:13px;
}

.page-title{ min-width:0; text-align:center; }
.page-title h1{ font-size:15px; letter-spacing:.2px; }
.page-title p{ font-size:12px; color:var(--muted); margin-top:4px; }

.brand-mini{ display:flex; align-items:center; gap:10px; }
.brand-mini img{
  width:54px; height:auto;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.14));
}

/* header sem logo quadrada: texto premium */
.brand-mini--text .brand-name{
  font-weight: 1000;
  letter-spacing: -.02em;
  font-size: 15px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(17,24,39,.10);
  background: rgba(255,255,255,.86);
  box-shadow: 0 10px 18px rgba(17,24,39,.06);
  white-space: nowrap;
}
@media (max-width:520px){
  .brand-mini--text .brand-name{ font-size: 14px; padding: 9px 10px; }
}

/* ============================================================
   TOP BANNER (FOTO) — FULL BLEED
============================================================ */
.top-banner{
  position: relative;
  width: 100%;
  height: clamp(120px, 18vw, 210px);
  overflow: hidden;
  display: grid;
  place-items: center;

  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;

  background: #fff;
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
}
.pagebar + .top-banner{ margin-top: 0; }

.top-banner img{
  width: 100%;
  height: 100%;
  display:block;
  object-fit: cover;
  object-position: center;
}

.top-banner.full-bleed{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

@media (max-width:600px){
  .top-banner{
    height: clamp(96px, 26vw, 150px);
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
  }
}

/* ============================================================
   TOPNAV (chips)
============================================================ */
.topnav{
  display:flex;
  align-items:center;
  gap:8px;
  flex: 1;
  justify-content:center;
  min-width:0;
}
.topnav a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 11px;
  border-radius:999px;
  border:1px solid rgba(17,24,39,.10);
  background: rgba(255,255,255,.88);
  font-weight:900;
  font-size:12.5px;
  white-space:nowrap;
  transition: transform .12s ease, filter .12s ease;
}
.topnav a:hover{ transform: translateY(-1px); filter: brightness(1.02); }
.topnav a.is-active{
  background: linear-gradient(180deg, var(--wine), var(--wine2));
  color:#fff;
  border-color: rgba(127,29,29,.35);
}

@media (max-width: 860px){
  .pagebar{ flex-wrap:wrap; justify-content:space-between; }
  .page-title{ order:1; width: calc(100% - 64px); text-align:left; }
  .cart-btn{ order:2; }
  .topnav{
    order:3; width:100%;
    justify-content:flex-start;
    overflow-x:auto;
    padding-bottom:6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width:none;
  }
  .topnav::-webkit-scrollbar{ display:none; }
}

/* ============================================================
   CART BUTTON (top)
============================================================ */
.cart-btn{
  position:relative;
  border:1px solid rgba(17,24,39,.10);
  background: rgba(255,255,255,.88);
  border-radius:14px;
  padding:9px 11px;
  cursor:pointer;
  box-shadow: var(--shadow1);
}
.cart-badge{
  position:absolute; top:-8px; right:-8px;
  background: var(--green);
  color:#fff;
  border:2px solid #fff;
  border-radius:999px;
  font-size:12px;
  min-width:22px; height:22px;
  display:flex; align-items:center; justify-content:center;
  padding:0 6px;
}

/* ============================================================
   HERO MINI / INFOBAR
============================================================ */
#infoBar:empty{
  display:none !important;
  padding:0 !important;
  margin:0 !important;
}

.hero-mini{ margin: 12px 0 22px; }
@media (max-width: 520px){ .hero-mini{ margin-top: 8px; } }

.hero-mini__card{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  background:#ffffff;
  border-radius:16px;
  padding:16px 18px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  flex-wrap:wrap;
  border:1px solid rgba(17,24,39,.08);
}

.hero-mini__left{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}
.hero-mini__title{
  font-weight:1000;
  font-size:16px;
  letter-spacing:-.01em;
}
.hero-mini__sub{
  font-size:13px;
  color:var(--muted);
  font-weight:800;
}

.hero-mini__chips{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:6px;
}
.chip{
  background:#f3f4f6;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  border:1px solid rgba(17,24,39,.08);
  font-weight:900;
}

.hero-mini__right{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
}
.hero-mini__search{
  display:flex;
  align-items:center;
  gap:6px;
  background:#f7f7f7;
  border-radius:999px;
  padding:8px 12px;
  border:1px solid rgba(17,24,39,.08);
  width:100%;
}
.hero-mini__search input{
  border:none;
  outline:none;
  background:transparent;
  font-size:13px;
  width:100%;
}

@media (max-width:600px){
  .hero-mini__card{
    flex-direction:column;
    align-items:flex-start;
  }
  .hero-mini__right{
    width:100%;
    justify-content:space-between;
  }
}

/* ============================================================
   HOME GRID (Categorias)
============================================================ */
.grid,
.lp-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
  margin-top:12px;
}

.tile,
.lp-homecard{
  position:relative;
  background: rgba(255,255,255,.92);
  border:1px solid rgba(17,24,39,.10);
  border-radius: var(--radius2);
  box-shadow: var(--shadow1);
  overflow:hidden;
  padding:14px;
  min-height:108px;
  display:flex;
  gap:12px;
  align-items:center;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.tile:hover,
.lp-homecard:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow2);
  border-color: rgba(17,24,39,.14);
}
.tile:active,
.lp-homecard:active{ transform: scale(.99); }

.tile .tile-media,
.lp-homecard .lp-media{
  width:54px;
  height:54px;
  border-radius:16px;
  border:1px solid rgba(17,24,39,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(245,247,252,.9));
  box-shadow: 0 10px 18px rgba(17,24,39,.08);
  overflow:hidden;
  flex:0 0 auto;
}
.tile .tile-media img,
.lp-homecard .lp-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.tile-title{ margin:0; font-size:18px; font-weight:950; letter-spacing:-.02em; line-height:1.05; }
.tile-sub{ margin:6px 0 0; color:var(--muted); font-size:12.5px; line-height:1.25; }

.tile.highlight{
  border:2px solid rgba(22,163,74,.28);
  box-shadow: 0 18px 46px rgba(22,163,74,.10), var(--shadow1);
}
.tile.highlight .tile-title{ font-size:19px; }

@media (min-width: 860px){
  .grid, .lp-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  .tile, .lp-homecard{ min-height:120px; }
}

/* ============================================================
   ✅ PRODUTOS (PADRÃO MASSAS EM TODAS PÁGINAS)
   render.js gera: .lp-card .lp-cardrow .lp-media + .lp-cardbody
============================================================ */

/* grid de produtos */
.product-grid,
#gridMassas,#gridMarmitas,#gridBebidas,#gridPorcoes,#gridCombos{
  display:grid;
  grid-template-columns: repeat(1, minmax(0,1fr));
  gap:12px;
  margin-top:12px;
}
@media(min-width:820px){
  .product-grid,
  #gridMassas,#gridMarmitas,#gridBebidas,#gridPorcoes,#gridCombos{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

/* card do produto */
.lp-card{
  background: rgba(255,255,255,.94);
  border:1px solid rgba(17,24,39,.10);
  border-radius: var(--radius2);
  box-shadow: var(--shadow1);
  overflow:hidden;
  padding:12px;
}

/* linha: FOTO + TEXTO */
.lp-cardrow{
  display:flex;
  gap:12px;
  align-items:flex-start;
}

/* FOTO — sempre visível */
.lp-media{
  width:92px;
  height:92px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(17,24,39,.10);
  box-shadow: 0 10px 18px rgba(17,24,39,.10);
  flex:0 0 92px;
  align-self:center;
  background:#fff;
}
.lp-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* TEXTO */
.lp-cardbody{
  flex:1;
  min-width:0;
}

.lp-title{
  margin:0;
  font-size:14.5px;
  font-weight:950;
  letter-spacing:-.01em;
}
.lp-desc{
  margin-top:6px;
  font-size:12px;
  color:var(--muted);
  line-height:1.35;
}

/* preços (se existir) */
.lp-price{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin-top:6px;
}
.lp-old{
  opacity:.55;
  text-decoration: line-through;
  font-weight:900;
  font-size:12.5px;
}
.lp-now{
  font-weight:1000;
  color: var(--wine);
  font-size:13px;
}

/* badges */
.lp-badges{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:6px; }
.lp-badge{
  font-size:11px;
  font-weight:1000;
  padding:5px 8px;
  border-radius:999px;
  border:1px solid rgba(17,24,39,.10);
  background: rgba(2,6,23,.03);
}

/* ============================================================
   ✅ STEPPER ÚNICO (SEM FOTO / SEM DUPLICAÇÃO)
   - Adicionar X +
============================================================ */
.lp-actions{ margin-top:10px; }

.lp-step{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
}

/* botões - e + */
.lp-step-btn{
  width:38px;
  height:38px;
  border-radius:12px;
  border:1px solid rgba(17,24,39,.14);
  background:#fff;
  cursor:pointer;
  font-weight:1000;
  font-size:18px;
  line-height:1;
  display:grid;
  place-items:center;
  transition: transform .08s ease, box-shadow .12s ease;
}
.lp-step-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(17,24,39,.12);
}
.lp-step-btn:active{ transform: scale(.99); }
.lp-step-btn.disabled{ opacity:.55; }

/* botão do meio */
.lp-step-mid{
  height:38px;
  border-radius:12px;
  border:1px solid rgba(127,29,29,.18);
  background: linear-gradient(180deg, rgba(211,47,47,.10), rgba(127,29,29,.06));
  cursor:pointer;
  font-weight:1000;
  font-size:13px;
  padding:0 12px;
  min-width:120px;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.lp-step-text{ font-weight:1000; }
.lp-step-qty{ font-weight:1100; }

/* lock do dia */
.lp-step.is-locked{ opacity:.60; filter: grayscale(.10); }
.lp-daynote{ margin-top:8px; font-size:12px; font-weight:800; opacity:.85; }

/* ============================================================
   ✅ MOBILE: encaixar melhor e botões menores
============================================================ */
@media (max-width: 520px){
  .lp-media{
    width:80px; height:80px; flex:0 0 80px;
    border-radius:14px;
  }
  .lp-card{ padding:11px; }
  .lp-title{ font-size:14px; }
  .lp-desc{ font-size:11.5px; }

  .lp-step{ gap:8px; }
  .lp-step-btn{ width:34px; height:34px; border-radius:11px; font-size:17px; }
  .lp-step-mid{ height:34px; min-width:104px; border-radius:11px; font-size:12.5px; padding:0 10px; }
}

/* ============================================================
   WHATS FLOAT
============================================================ */
.wa-float,
.lp-wa-fab{
  position:fixed;
  right:14px;
  bottom: calc(var(--bottomBarH) + 12px);
  width:56px; height:56px;
  border-radius:18px;
  background:
    radial-gradient(60px 60px at 30% 25%, rgba(255,255,255,.28), transparent 60%),
    linear-gradient(180deg, #2AF06F, var(--wa));
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 16px 40px rgba(37,211,102,.30);
  z-index:70;
  border: 1px solid rgba(255,255,255,.35);
}
.wa-float img,
.lp-wa-fab img{ width:28px; height:28px; }

/* ============================================================
   STICKY CTA BOTTOM
============================================================ */
.sticky-cta,
.lp-bottom{
  position:fixed;
  left:12px; right:12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index:75;
  display:flex;
  gap:10px;
  max-width:980px;
  margin:0 auto;
  pointer-events:auto;
}

.cta,
.lp-cartbox{
  flex:1;
  border:1px solid rgba(17,24,39,.12);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius:16px;
  padding:10px 12px;
  font-weight:950;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  box-shadow: var(--shadow1);
  min-height:58px;
}
.cta .mini{ font-size:12px; color:var(--muted); }

.cta.primary,
.lp-finalize{
  justify-content:center;
  background: linear-gradient(180deg, var(--red2), var(--red1));
  border:0;
  color:#fff;
  box-shadow: 0 18px 40px rgba(163,19,19,.28);
  min-height:58px;
  border-radius:16px;
  font-size:18px;
  font-weight:1000;
  letter-spacing:-.02em;
  padding: 0 12px;
}

@media (max-width:520px){
  .cta{ padding:10px 10px; min-height:56px; }
  .cta.primary{ font-size:17px; }
}

/* ============================================================
   DRAWER (Carrinho) — SEU HTML (.drawer)
============================================================ */
.drawer{
  position:fixed;
  inset:0;
  z-index:9000;
  display:none;
}
.drawer.open{ display:block; }

.drawer-backdrop{
  position:absolute;
  inset:0;
  background: rgba(2,6,23,.38);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.drawer-panel{
  position:absolute;
  top:0; right:0;
  width:min(460px, 94vw);
  height:100dvh;
  background: rgba(255,255,255,.96);
  border-left: 1px solid rgba(17,24,39,.10);
  box-shadow: -22px 0 70px rgba(2,6,23,.20);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.drawer-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(17,24,39,.10);
  background: rgba(244,246,250,.70);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.drawer-head h3{
  font-size:18px;
  font-weight:1000;
  letter-spacing:-.02em;
}
.drawer-head .muted,
.drawer-head p.muted{
  margin-top:4px;
  font-size:12.5px;
  color: var(--muted);
  font-weight:800;
}

.icon-btn{
  width:44px;
  height:44px;
  padding:0;
  border-radius:16px;
  border:1px solid rgba(17,24,39,.10);
  background: rgba(255,255,255,.92);
  cursor:pointer;
  box-shadow: var(--shadow1);
  transition: transform .12s ease, box-shadow .12s ease;
  display:grid;
  place-items:center;
  font-size:20px;
}
.icon-btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow2); }
.icon-btn:active{ transform: translateY(0px) scale(.99); }

.drawer-body{
  padding: 14px 16px 12px;
  overflow:auto;
  flex:1;
  -webkit-overflow-scrolling: touch;
}

.drawer-foot{
  padding: 12px 16px 16px;
  border-top: 1px solid rgba(17,24,39,.10);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* totals */
.totals{
  background: linear-gradient(180deg, #fff, rgba(127,29,29,.03));
  border:1px solid rgba(17,24,39,.10);
  border-radius: 22px;
  padding: 12px;
  box-shadow: 0 10px 22px rgba(17,24,39,.08);
  margin-bottom: 12px;
}
.row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 0;
  border-bottom: 1px dashed rgba(17,24,39,.14);
  font-weight: 900;
}
.row:last-child{ border-bottom:0; }
.row.total strong{ font-size: 18px; font-weight: 1100; }

/* itens */
#cartItems{ display:flex; flex-direction:column; gap:10px; }
.citem{
  border:1px solid rgba(17,24,39,.10);
  border-radius: 20px;
  padding: 12px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 22px rgba(17,24,39,.08);
  margin:0;
}
.cname{ font-weight:1000; font-size:15px; letter-spacing:-.01em; }
.cdesc{ font-size:12.5px; color:var(--muted); margin-top:4px; line-height:1.35; }

/* quantidade no carrinho (drawer) */
.drawer .qty{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:10px;
}
.drawer .qbtn{
  width:40px; height:40px;
  border-radius: 14px;
  border:1px solid rgba(17,24,39,.12);
  background:#fff;
  cursor:pointer;
  font-weight:1000;
  font-size:18px;
  box-shadow: 0 10px 18px rgba(17,24,39,.08);
  transition: transform .08s ease, box-shadow .12s ease;
}
.drawer .qbtn:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 26px rgba(17,24,39,.12);
}
.drawer .qbtn:active{ transform: translateY(0px) scale(.99); }

.drawer-actions{
  display:flex;
  gap:10px;
}
.drawer-actions .btn{
  height: 52px;
  border-radius: 18px;
  font-weight: 1000;
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: var(--shadow1);
  transition: transform .10s ease, box-shadow .12s ease;
}
.drawer-actions .btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow2); }
.drawer-actions .btn:active{ transform: translateY(0px) scale(.99); }

.drawer-actions .btn.primary{
  background: linear-gradient(180deg, var(--red2), var(--red1));
  border:0;
  color:#fff;
  font-size: 16.5px;
  letter-spacing:-.01em;
  box-shadow: 0 18px 40px rgba(163,19,19,.24);
}
.drawer-actions .btn.light{
  background: rgba(2,6,23,.04);
  border: 1px solid rgba(17,24,39,.12);
}

@media (max-width: 520px){
  .drawer-panel{ width: 94vw; }
  .drawer-actions{ flex-direction:column; }
}

/* ============================================================
   CHECKOUT OVERLAY (mantém .ck-* para seu checkout.js)
============================================================ */
.ck-overlay{
  position:fixed;
  inset:0;
  display:none;
  align-items:flex-end;
  justify-content:center;
  padding:14px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  background: rgba(17,24,39,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index:9000;
}
.ck-overlay.is-open{ display:flex; }

.ck-modal, .ck-sheet{
  width:min(520px, 100%);
  max-height: min(92vh, 760px);
  overflow: hidden;
  background: linear-gradient(180deg, #eef0f3, #e7eaee);
  border:1px solid rgba(255,255,255,.75);
  border-radius: 26px;
  box-shadow: 0 22px 55px rgba(17,24,39,.20);
}

.ck-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:14px 14px 10px;
  border-bottom:1px solid rgba(17,24,39,.08);
  background: rgba(238,240,243,.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.ck-title strong{ font-size:18px; font-weight:1000; letter-spacing:-.02em; }
.ck-sub{ font-size:12px; color:var(--muted); font-weight:800; margin-top:4px; }

.ck-x{
  width:44px; height:44px;
  border-radius:16px;
  border:1px solid rgba(17,24,39,.10);
  background: rgba(255,255,255,.90);
  cursor:pointer;
  box-shadow: var(--shadow1);
  font-size:22px;
}

.ck-step{
  padding:12px 14px 14px;
  overflow:auto;
  max-height: calc(min(92vh, 760px) - 78px);
  -webkit-overflow-scrolling: touch;
}

.ck-card, .ck-box{
  border:1px solid rgba(17,24,39,.10);
  background: rgba(255,255,255,.92);
  border-radius: 20px;
  padding:12px;
  box-shadow: var(--shadow1);
}

.ck-grid, .ck-paygrid{ display:grid; gap:10px; }

.ck-pay, .ck-paybtn{
  display:flex;
  gap:12px;
  align-items:center;
  padding:12px;
  border-radius: 20px;
  border:1px solid rgba(17,24,39,.10);
  background: rgba(255,255,255,.92);
  cursor:pointer;
  box-shadow: var(--shadow1);
  transition: transform .08s ease, box-shadow .12s ease, border-color .12s ease;
}
.ck-pay:active, .ck-paybtn:active{ transform: scale(.99); }

.ck-pay-title{ font-weight:1000; font-size:15px; }
.ck-pay-desc{ color:var(--muted); font-weight:800; font-size:12px; }

.ck-pay.is-active, .ck-paybtn.is-active{
  border-color: rgba(22,163,74,.45);
  box-shadow: 0 16px 36px rgba(22,163,74,.16);
}

.ck-field{ display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.ck-field span{ font-size:12px; color:var(--muted); font-weight:800; }

.ck-field input,
.ck-field textarea{
  border-radius: 14px;
  padding:10px 12px;
  border:1px solid rgba(17,24,39,.10);
  background: rgba(255,255,255,.95);
  color: var(--text);
  box-shadow: var(--shadow1);
}

.ck-actions{ display:flex; gap:10px; margin-top:12px; }
.ck-btn{
  height:54px;
  border-radius: 18px;
  padding:0 12px;
  border:1px solid rgba(17,24,39,.10);
  background: rgba(255,255,255,.92);
  font-weight:1000;
  cursor:pointer;
  box-shadow: var(--shadow1);
  transition: transform .08s ease, box-shadow .12s ease;
}
.ck-btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow2); }
.ck-btn:active{ transform: scale(.99); }

.ck-btn.primary{
  border:0;
  background: linear-gradient(180deg, var(--red2), var(--red1));
  color:#fff;
  box-shadow: 0 16px 30px rgba(163,19,19,.24);
}
.ck-btn.full{ width:100%; }
.ck-btn.ghost{ background: rgba(255,255,255,.92); }

.ck-hint{
  font-size:12px;
  color:var(--muted);
  font-weight:800;
  margin-top:8px;
}
.ck-fee{
  margin-top:10px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
  color:var(--muted);
  font-weight:900;
}
.ck-blocked{
  margin-top:10px;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(211,47,47,.18);
  background: rgba(211,47,47,.08);
  font-size:12.5px;
}

/* ============================================================
   ✅ QR CODE (checkout) — QUADRADO FIXO
============================================================ */
.ck-qrwrap{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:12px;
}

.ck-qr{
  width:240px;
  height:240px;
  background:#fff !important;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.ck-qr img,
.ck-qr canvas{
  width:100% !important;
  height:100% !important;
  display:block;
  object-fit:contain;
  background:#fff !important;
}
.ck-qr::before,
.ck-qr::after{
  content:none !important;
  display:none !important;
}

/* ============================================================
   ✅ MODAL DE ADICIONAIS (overlay por cima)
   IDs esperados: #addonsModal, #addonsList, #addonsAddBtn
============================================================ */
#addonsModal{
  position:fixed;
  inset:0;
  z-index: 99999;
  display:none;
  background: rgba(0,0,0,.45);
}
#addonsModal.is-open{ display:block; }

#addonsModal .lp-modal__sheet,
#addonsModal .addons-sheet,
#addonsModal .modal-sheet{
  position:absolute;
  left:0; right:0; bottom:0;
  background:#fff;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -18px 50px rgba(0,0,0,.25);
  max-height: 86vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  transform: translateY(12px);
  animation: lpSheetUp .16s ease-out forwards;
}
@keyframes lpSheetUp{ to{ transform: translateY(0); } }

#addonsModal .lp-modal__head,
#addonsModal .addons-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid rgba(17,24,39,.10);
  background: rgba(244,246,250,.70);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

#addonsModal .lp-modal__body,
#addonsModal .addons-body{
  padding: 12px 12px 0;
  overflow:auto;
}

#addonsList{ padding: 12px; }

.addon-row{
  display:grid;
  grid-template-columns: 52px 1fr auto;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(17,24,39,.10);
  border-radius: 14px;
  background: #fff;
  margin-bottom: 10px;
  align-items:center;
}
.addon-img{
  width:52px; height:52px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid rgba(17,24,39,.08);
  display:block;
}
.addon-title{ font-weight: 900; font-size: 13.5px; line-height:1.15; }
.addon-desc{ font-size: 12px; color: var(--muted); margin-top:2px; }
.addon-price{ font-weight: 950; font-size: 13px; margin-top:6px; color: var(--wine); }

.addon-qty{
  display:flex; align-items:center; gap:8px;
}
.addon-qty button{
  width: 30px; height: 30px;
  border-radius: 10px;
  border: 1px solid rgba(17,24,39,.12);
  background:#fff;
  font-weight:1000;
  cursor:pointer;
}
.addon-qty span{
  min-width: 18px;
  text-align:center;
  font-weight:1000;
}

#addonsModal .lp-modal__foot,
#addonsModal .addons-foot{
  padding: 12px;
  border-top: 1px solid rgba(17,24,39,.10);
  background: #fff;
}
#addonsAddBtn{
  width:100%;
  padding: 12px 14px;
  border-radius: 14px;
  border:0;
  background: linear-gradient(180deg, var(--wine), var(--wine2));
  color:#fff;
  font-weight: 1000;
  cursor:pointer;
}

/* botão pequeno "Adicionais" no canto — versão premium */
#openAddons,
.addons-fab{
  position: fixed;
  left: 12px;       /* 👈 agora na esquerda */
  right: auto;      /* 👈 evita conflito */
  bottom: calc(var(--bottomBarH) + 14px);
  z-index: 9999;

  padding: 11px 14px;
  border-radius: 999px;
  border: none;

  background: linear-gradient(135deg, #b91c1c, #7f1d1d);
  color:#fff;

  font-weight: 900;
  font-size: 13px;
  letter-spacing:.3px;

  box-shadow: 0 10px 28px rgba(185,28,28,.35);

  cursor:pointer;

  animation: pulseAddons 2s infinite;
}

/* ============================================================
   EXTRAS: toque premium
============================================================ */
button,
.qbtn,
.ck-pay,
.ck-paybtn,
.cta,
.drawer-actions .btn,
.icon-btn{
  -webkit-tap-highlight-color: transparent;
}

/* Checkout mais "GRANDE" (visual antigo) */
.ck-modal{
  max-width: 880px !important;
}

.ck-pay{
  padding: 18px 18px !important;
  border-radius: 18px !important;
}

.ck-pay strong{
  font-size: 16px !important;
}

.ck-pay small{
  font-size: 13px !important;
  opacity: .75 !important;
}

/* No celular mantém confortável */
@media (max-width: 640px){
  .ck-modal{ max-width: 94vw !important; }
  .ck-pay{ padding: 16px 14px !important; }
}
/* botão flutuante WhatsApp */
.waFloat,
#waFloat{
  width: 46px;
  height: 46px;
  bottom: calc(var(--bottomBarH) + 18px);
  right: 12px;
  border-radius: 50%;
  padding: 6px;
}

/* imagem interna */
.waFloat img,
#waFloat img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (max-width: 600px){
  .waFloat,
  #waFloat{
    width: 42px;
    height: 42px;
    bottom: calc(var(--bottomBarH) + 16px);
  }
}
/* Toast confirmação verde */
.added-toast{
  position: fixed;
  left: 50%;
  bottom: calc(var(--bottomBarH) + 84px);
  transform: translateX(-50%) translateY(8px);
  background: linear-gradient(135deg,#16a34a,#22c55e);
  color:#fff;
  padding: 11px 16px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 13px;
  box-shadow: 0 10px 28px rgba(34,197,94,.35);
  opacity:0;
  pointer-events:none;
  z-index:99999;
  transition: .2s ease;
}
.added-toast.show{
  opacity:1;
  transform: translateX(-50%) translateY(0);
}
/* ===========================
   AJUSTE PC / DESKTOP
   (mantém celular perfeito)
   =========================== */
@media (min-width: 900px){

  /* container principal: não fica estourado e centraliza */
  .container{
    max-width: 1100px;
    margin: 0 auto;
  }

  /* banner/topo: limita altura e evita “cortar” */
  .top-banner,
  .top-banner-full,
  .hero-banner,
  .banner{
    max-height: 260px;
    overflow: hidden;
    border-radius: 18px;
  }

  .top-banner img,
  .top-banner-full img,
  .hero-banner img,
  .banner img{
    width: 100%;
    height: 260px;
    object-fit: cover;      /* mantém bonito */
    object-position: center;/* centraliza */
    display: block;
  }

  /* cards das categorias: grid mais bonito no PC */
  .cats,
  .categories,
  .grid-cats{
    display: grid;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    gap: 16px;
  }

  /* barra de ações (ver carrinho + finalizar): fica alinhada no PC */
  .sticky-cta,
  #stickyCTA{
    max-width: 1100px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 16px;
  }
}
/* ===========================
   BANNER TOPO — AJUSTE DESKTOP
   =========================== */
@media (min-width: 900px){

  /* deixa o banner realmente full width */
  .top-banner,
  .top-banner-full,
  header img[src*="banner-topo"],
  img[src*="banner-topo"]{
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    display: block;
  }

  /* limita altura para não ficar gigante */
  img[src*="banner-topo"]{
    height: 260px;
    object-fit: cover;
    object-position: center;
  }
}