/* ============================================================
   Grouse Rotisserie — Design System v2 (mobile-first)
   grouse-ui.css · Fase 1 (revisão — NÃO aplicado nas páginas)

   Premium rústico italiano · borgonha + dourado + creme.
   Mobile-first (maior fluxo): base = celular, melhora no desktop.
   Tudo prefixado .gx- para não colidir com o markup atual.
   ============================================================ */

/* ───────────────────────── TOKENS ───────────────────────── */
:root{
  /* Cores de marca */
  --c-red:#712a1f; --c-red-dark:#4d1c15; --c-red-mid:#8b3a2e;
  --c-gold:#f2bc33; --c-gold-deep:#d4a828; --c-cream:#f9f7f2;
  --c-ink:#1e1f1d; --c-white:#ffffff;

  /* Texto (escala de contraste — pensado p/ leitura 30+) */
  --c-text:#1e1f1d;        /* corpo principal */
  --c-text-2:#5a544c;      /* secundário (WCAG AA sobre creme) */
  --c-text-3:#857d72;      /* terciário/hint */
  --c-line:#e7e1d5; --c-line-soft:#f0ebe1;

  /* Semânticos */
  --c-ok:#16a34a; --c-ok-bg:#ecfdf3;
  --c-warn:#b45309; --c-warn-bg:#fff7e6;
  --c-err:#dc2626; --c-err-bg:#fef2f2;

  /* Tipografia */
  --f-display:'Bree Serif',serif;
  --f-ui:'Barlow Condensed',system-ui,-apple-system,sans-serif;
  /* Escala fluida (mobile → desktop) */
  --t-xs:12px; --t-sm:13.5px; --t-base:16px; --t-md:17px;
  --t-lg:clamp(19px,4.5vw,22px); --t-xl:clamp(22px,6vw,28px);
  --t-2xl:clamp(26px,7vw,36px); --t-hero:clamp(30px,8vw,52px);

  /* Espaço (ritmo de 4) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px;

  /* Raios */
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:26px; --r-pill:999px;

  /* Touch (alvos mínimos — Apple/Google = 44px) */
  --touch:44px; --touch-lg:52px;

  /* Elevação em camadas (mais profissional que sombra única) */
  --e-1:0 1px 2px rgba(30,31,29,.05), 0 1px 1px rgba(30,31,29,.04);
  --e-2:0 2px 6px rgba(30,31,29,.06), 0 4px 12px rgba(30,31,29,.05);
  --e-3:0 6px 16px rgba(30,31,29,.08), 0 12px 28px rgba(30,31,29,.07);
  --e-red:0 10px 30px rgba(113,42,31,.22);
  --e-gold:0 8px 22px rgba(242,188,51,.30);

  /* Movimento */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-fast:140ms; --dur:220ms; --dur-slow:360ms;

  /* Layout */
  --container:1200px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --z-bar:40; --z-sheet:60; --z-toast:90;
}

/* ───────────────────────── BASE ───────────────────────── */
.gx-scope{ font-family:var(--f-ui); color:var(--c-text); -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent; }
.gx-display{ font-family:var(--f-display); }

/* ───────────────────────── LAYOUT ───────────────────────── */
.gx-container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--sp-4); }
.gx-stack{ display:flex; flex-direction:column; gap:var(--sp-3); }
.gx-grid{ display:grid; gap:var(--sp-3); }
@media(min-width:640px){ .gx-grid--2{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1024px){ .gx-grid--3{grid-template-columns:repeat(3,1fr)}; .gx-container{padding-inline:var(--sp-6)} }

/* scroller horizontal com snap (categorias no mobile) */
.gx-scroller{ display:flex; gap:var(--sp-2); overflow-x:auto; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; padding-bottom:2px; scrollbar-width:none; }
.gx-scroller::-webkit-scrollbar{ display:none; }
.gx-scroller > *{ scroll-snap-align:start; flex:0 0 auto; }

/* ───────────────────────── TIPOGRAFIA ───────────────────── */
.gx-h1{ font-family:var(--f-display); font-size:var(--t-2xl); color:var(--c-red); line-height:1.08; }
.gx-h2{ font-family:var(--f-display); font-size:var(--t-xl); color:var(--c-ink); line-height:1.15; }
.gx-h3{ font-family:var(--f-display); font-size:var(--t-lg); color:var(--c-ink); line-height:1.2; }
.gx-body{ font-family:var(--f-ui); font-size:var(--t-md); color:var(--c-text); line-height:1.55; }
.gx-sm{ font-size:var(--t-sm); color:var(--c-text-2); line-height:1.45; }
.gx-eyebrow{ font-family:var(--f-ui); font-size:var(--t-xs); font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--c-gold-deep); }
.gx-price{ font-family:var(--f-display); color:var(--c-red); font-size:var(--t-lg); line-height:1; }
.gx-text-2{ color:var(--c-text-2); } .gx-text-3{ color:var(--c-text-3); }

/* ───────────────────────── BOTÕES ───────────────────────── */
.gx-btn{
  --bg:var(--c-ink); --fg:var(--c-white);
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  min-height:var(--touch); /* touch-friendly */
  font-family:var(--f-ui); font-weight:700; font-size:15px;
  letter-spacing:.04em; text-transform:uppercase;
  padding:12px 22px; border-radius:var(--r-pill);
  background:var(--bg); color:var(--fg);
  border:1.5px solid transparent; cursor:pointer; text-decoration:none; user-select:none;
  transition:transform var(--dur-fast) var(--ease), filter var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease);
}
.gx-btn:hover{ filter:brightness(1.07); box-shadow:var(--e-2); }
.gx-btn:active{ transform:scale(.97); }
.gx-btn:focus-visible{ outline:3px solid color-mix(in srgb,var(--c-gold) 65%,transparent); outline-offset:2px; }
.gx-btn--red{ --bg:var(--c-red); } .gx-btn--gold{ --bg:var(--c-gold); --fg:var(--c-ink); }
.gx-btn--ghost{ --bg:transparent; --fg:var(--c-red); border-color:var(--c-red); }
.gx-btn--lg{ min-height:var(--touch-lg); font-size:16px; padding:15px 28px; }
.gx-btn--block{ width:100%; }

/* botão "add" circular */
.gx-add{
  width:var(--touch); height:var(--touch); flex-shrink:0;
  border-radius:50%; border:none; cursor:pointer;
  background:var(--c-gold); color:var(--c-ink);
  font-size:24px; font-weight:800; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; box-shadow:var(--e-1);
  transition:transform var(--dur-fast) var(--ease), filter var(--dur-fast) var(--ease);
}
.gx-add:active{ transform:scale(.85); }
.gx-add.is-pulsing{ animation:gx-pulse 380ms var(--ease); }
@keyframes gx-pulse{ 0%{transform:scale(1)} 40%{transform:scale(1.16); box-shadow:0 0 0 7px color-mix(in srgb,var(--c-gold) 32%,transparent)} 100%{transform:scale(1); box-shadow:var(--e-1)} }

/* stepper de quantidade (− N +) — touch-friendly */
.gx-qty{ display:inline-flex; align-items:center; gap:var(--sp-1); }
.gx-qty__btn{
  width:var(--touch); height:var(--touch); border-radius:50%;
  border:1.5px solid var(--c-line); background:var(--c-white);
  font-size:20px; font-weight:700; color:var(--c-ink); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition:border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.gx-qty__btn:active{ transform:scale(.9); }
.gx-qty__btn--plus{ background:var(--c-gold); border-color:var(--c-gold); }
.gx-qty__n{ min-width:28px; text-align:center; font-weight:800; font-size:17px; }

/* ───────────────────────── CARDS / PRODUTO ──────────────── */
.gx-card{ background:var(--c-white); border:1px solid var(--c-line); border-radius:var(--r-lg); box-shadow:var(--e-1); overflow:hidden; transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
@media(hover:hover){ .gx-card:hover{ transform:translateY(-2px); box-shadow:var(--e-3); } }
.gx-card__body{ padding:var(--sp-4); }

.gx-product{
  display:flex; gap:var(--sp-4); align-items:center;
  background:var(--c-white); border:1px solid var(--c-line);
  border-radius:var(--r-lg); padding:var(--sp-3);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
@media(hover:hover){ .gx-product:hover{ transform:translateY(-2px); box-shadow:var(--e-2); border-color:#dcd4c4; } }
.gx-product:active{ transform:scale(.995); }
.gx-product__media{
  width:88px; height:88px; flex-shrink:0; border-radius:var(--r-md); overflow:hidden;
  background:var(--c-cream); position:relative; display:flex; align-items:center; justify-content:center;
}
@media(min-width:1024px){ .gx-product__media{ width:108px; height:108px; } }
.gx-product__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.gx-product__fallback{ font-size:34px; line-height:1; } /* 🐓 intocado */
.gx-product__info{ flex:1; min-width:0; }
.gx-product__name{ font-family:var(--f-display); font-size:var(--t-md); color:var(--c-ink); line-height:1.2; }
.gx-product__desc{ font-family:var(--f-ui); font-size:var(--t-sm); color:var(--c-text-2); margin-top:3px; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.gx-product__foot{ display:flex; align-items:center; justify-content:space-between; margin-top:var(--sp-3); gap:var(--sp-3); }

/* ───────────────────────── CHIP / BADGE ─────────────────── */
.gx-chip{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--f-ui); font-size:var(--t-sm); font-weight:600; color:var(--c-ink);
  background:color-mix(in srgb,var(--c-gold) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--c-gold) 34%,transparent);
  padding:7px 13px; border-radius:var(--r-pill); line-height:1.2; white-space:nowrap;
}
.gx-chip svg{ width:16px; height:16px; flex-shrink:0; stroke:var(--c-gold-deep); }
.gx-chip--on-dark{ color:#fff; background:rgba(242,188,51,.14); border-color:rgba(242,188,51,.32); }
.gx-chip--on-dark svg{ stroke:var(--c-gold); }
/* badge pequeno (ex: "Più venduto", "Novità") */
.gx-badge{ display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:3px 9px; border-radius:var(--r-pill); }
.gx-badge--gold{ background:var(--c-gold); color:var(--c-ink); }
.gx-badge--red{ background:var(--c-red); color:#fff; }
.gx-badge--soft{ background:var(--c-cream); color:var(--c-red); border:1px solid var(--c-line); }

/* ───────────────────────── PILL (categoria) ─────────────── */
.gx-pill{
  font-family:var(--f-ui); font-size:15px; font-weight:700; letter-spacing:.01em; color:var(--c-text-2);
  background:var(--c-white); border:1.5px solid var(--c-line); cursor:pointer;
  padding:9px 16px; min-height:var(--touch); border-radius:var(--r-pill); white-space:nowrap;
  transition:all var(--dur-fast) var(--ease);
}
.gx-pill:active{ transform:scale(.96); }
.gx-pill.is-active{ color:var(--c-white); background:var(--c-red); border-color:var(--c-red); box-shadow:var(--e-1); }
/* variante underline (desktop sidebar) */
.gx-tab{ font-family:var(--f-ui); font-size:15px; font-weight:700; color:var(--c-text-2); background:none; border:none; cursor:pointer; padding:10px 4px; border-bottom:2.5px solid transparent; }
.gx-tab.is-active{ color:var(--c-red); border-bottom-color:var(--c-red); }

/* ───────────────────────── INPUT / BUSCA ────────────────── */
.gx-input{
  width:100%; font-family:var(--f-ui); font-size:16px; /* 16px evita zoom no iOS */ color:var(--c-ink);
  background:var(--c-white); border:1.5px solid var(--c-line); border-radius:var(--r-md);
  padding:13px 15px; min-height:var(--touch); outline:none;
  transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.gx-input::placeholder{ color:var(--c-text-3); }
.gx-input:focus{ border-color:var(--c-red); box-shadow:0 0 0 3px color-mix(in srgb,var(--c-red) 10%,transparent); }
.gx-search{ position:relative; }
.gx-search .gx-input{ padding-left:44px; }
.gx-search__icon{ position:absolute; left:15px; top:50%; transform:translateY(-50%); color:var(--c-text-3); pointer-events:none; }

/* ───────────────────────── HERO compacto (split) ────────── */
.gx-hero{ position:relative; overflow:hidden; background:linear-gradient(135deg,var(--c-red-dark) 0%,var(--c-red) 55%,var(--c-red-mid) 100%); color:#fff; }
.gx-hero__inner{ display:grid; gap:var(--sp-5); align-items:center; padding:var(--sp-8) var(--sp-4) var(--sp-6); }
.gx-hero__title{ font-family:var(--f-display); font-size:var(--t-hero); line-height:1.05; }
.gx-hero__sub{ font-family:var(--f-ui); font-size:var(--t-md); color:rgba(255,255,255,.74); margin-top:var(--sp-2); max-width:46ch; }
.gx-hero__chips{ display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-4); }
.gx-hero__cta{ margin-top:var(--sp-5); }
.gx-hero__media{ display:none; }
@media(min-width:1024px){
  .gx-hero__inner{ grid-template-columns:1.05fr .95fr; min-height:380px; max-height:420px; padding:var(--sp-8); max-width:var(--container); margin-inline:auto; }
  .gx-hero__media{ display:block; align-self:stretch; position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--e-red); }
  .gx-hero__media img{ width:100%; height:100%; object-fit:cover; display:block; }
}

/* ───────────────────────── MOBILE: barra sticky de CTA ──── */
.gx-stickybar{
  position:fixed; left:0; right:0; bottom:0; z-index:var(--z-bar);
  padding:var(--sp-3) var(--sp-4) calc(var(--sp-3) + var(--safe-b));
  background:color-mix(in srgb,var(--c-cream) 92%,transparent);
  backdrop-filter:saturate(1.4) blur(10px); -webkit-backdrop-filter:saturate(1.4) blur(10px);
  border-top:1px solid var(--c-line);
}
/* pílula flutuante do carrinho (mobile) */
.gx-cartpill{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  background:var(--c-red); color:#fff; border-radius:var(--r-xl);
  padding:13px 16px; box-shadow:var(--e-red); cursor:pointer; min-height:var(--touch-lg);
  transition:transform var(--dur-fast) var(--ease);
}
.gx-cartpill:active{ transform:scale(.98); }
.gx-cartpill__badge{ background:var(--c-gold); color:var(--c-ink); font-weight:800; min-width:26px; height:26px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:14px; }

/* ───────────────────────── MOBILE: bottom sheet ─────────── */
.gx-sheet-backdrop{ position:fixed; inset:0; background:rgba(20,12,9,.5); z-index:var(--z-sheet); opacity:0; pointer-events:none; transition:opacity var(--dur) var(--ease); }
.gx-sheet-backdrop.is-open{ opacity:1; pointer-events:auto; }
.gx-sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:calc(var(--z-sheet) + 1);
  background:var(--c-white); border-radius:var(--r-xl) var(--r-xl) 0 0;
  box-shadow:0 -12px 40px rgba(20,12,9,.25);
  transform:translateY(100%); transition:transform var(--dur-slow) var(--ease-out);
  max-height:88vh; overflow:hidden; display:flex; flex-direction:column;
  padding-bottom:var(--safe-b);
}
.gx-sheet.is-open{ transform:translateY(0); }
.gx-sheet__grip{ width:40px; height:4px; border-radius:99px; background:var(--c-line); margin:10px auto 4px; flex-shrink:0; }
.gx-sheet__head{ padding:var(--sp-2) var(--sp-5) var(--sp-3); display:flex; align-items:center; justify-content:space-between; }
.gx-sheet__body{ padding:0 var(--sp-5) var(--sp-5); overflow-y:auto; }
@media(min-width:768px){ /* vira modal centralizado no desktop */
  .gx-sheet{ left:50%; right:auto; bottom:auto; top:50%; transform:translate(-50%,-46%); width:min(440px,92vw); border-radius:var(--r-xl); max-height:90vh; }
  .gx-sheet.is-open{ transform:translate(-50%,-50%); }
  .gx-sheet__grip{ display:none; }
}

/* ───────────────────────── ALERTAS / NOTAS ─────────────── */
.gx-note{ display:flex; gap:var(--sp-2); align-items:flex-start; font-size:var(--t-sm); line-height:1.45; padding:11px 14px; border-radius:var(--r-md); border:1px solid; }
.gx-note--ok{ background:var(--c-ok-bg); border-color:color-mix(in srgb,var(--c-ok) 30%,transparent); color:#14532d; }
.gx-note--warn{ background:var(--c-warn-bg); border-color:color-mix(in srgb,var(--c-warn) 30%,transparent); color:#7c2d12; }
.gx-note--err{ background:var(--c-err-bg); border-color:color-mix(in srgb,var(--c-err) 30%,transparent); color:#7f1d1d; }

/* barra de progresso (frete grátis) */
.gx-progress{ background:#fde8c0; border-radius:var(--r-pill); height:7px; overflow:hidden; }
.gx-progress__fill{ height:100%; background:linear-gradient(90deg,var(--c-gold),#fbbf24); border-radius:var(--r-pill); transition:width var(--dur-slow) var(--ease-out); }

/* ───────────────────────── MOVIMENTO ─────────────────────── */
.gx-reveal{ opacity:0; transform:translateY(10px); transition:opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.gx-reveal.is-in{ opacity:1; transform:none; }
.gx-reveal--d1{ transition-delay:60ms; } .gx-reveal--d2{ transition-delay:120ms; } .gx-reveal--d3{ transition-delay:180ms; }

.gx-skeleton{ background:linear-gradient(90deg,#efe9df 25%,#f6f1e9 50%,#efe9df 75%); background-size:200% 100%; animation:gx-shimmer 1.4s ease-in-out infinite; border-radius:var(--r-md); }
@keyframes gx-shimmer{ 0%{background-position:200% 0} 100%{background-position:-200% 0} }

.gx-bump{ animation:gx-bump 320ms var(--ease); }
@keyframes gx-bump{ 0%{transform:scale(1)} 35%{transform:scale(1.3)} 100%{transform:scale(1)} }

html.gx-smooth{ scroll-behavior:smooth; }

/* ───────────────────────── A11Y / REDUCED MOTION ─────────── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important; }
  .gx-reveal{ opacity:1; transform:none; } .gx-skeleton{ animation:none; }
}

/* ───────────────────────── ÍCONES de linha ───────────────── */
.gx-ico{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }