/* ============================================================
   VJ Sabores — style.css (v2)
   Paleta: creme, terracota, marrom suave, verde oliva.
   Decoração sutil com folhas (como no cardápio impresso).
   Mobile-first.
   ============================================================ */
:root {
  --creme: #FBF3E4;
  --creme-2: #F3E8D2;
  --creme-3: #FFF8EA;
  --terracota: #C06B3E;
  --terracota-dark: #A9582F;
  --terracota-soft: #E9BFA6;
  --marrom: #8B5A3C;
  --marrom-dark: #5E3C27;
  --oliva: #8A9A5B;
  --oliva-dark: #6F7E46;
  --oliva-soft: #D1D9B5;
  --text: #3A2A1E;
  --muted: #856B58;
  --card: #FFFDF7;
  --border: #E8D9BE;
  --danger: #B04141;
  --shadow: 0 6px 20px rgba(94, 60, 39, 0.08);
  --shadow-lg: 0 12px 32px rgba(94, 60, 39, 0.14);
  --radius: 16px;
  --radius-sm: 10px;
  --max: 960px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--text);
  background: var(--creme);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
  position: relative;
}

h1, h2, h3 {
  font-family: 'Fraunces', Georgia, serif;
  color: var(--marrom-dark);
  margin: 0 0 0.3em;
  line-height: 1.2;
}

a { color: var(--terracota-dark); }
a:hover { color: var(--terracota); }
img { max-width: 100%; display: block; }

.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 16px;
  position: relative;
  z-index: 2;
}

/* =========== FOLHAS DECORATIVAS DE FUNDO =========== */
.bg-leaves {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.bg-leaf {
  position: absolute;
  width: 240px;
  height: 240px;
  opacity: 0.32;
  filter: saturate(0.9) sepia(0.1);
  user-select: none;
}
.bg-leaf-tl {
  top: -30px; left: -40px;
  transform-origin: 30% 30%;
  animation: leafFloat 8s ease-in-out infinite;
}
.bg-leaf-tr {
  top: -30px; right: -40px;
  transform: scaleX(-1);
  transform-origin: 70% 30%;
  animation: leafFloat 9s ease-in-out infinite 1.5s;
}
.bg-leaf-bl {
  bottom: -30px; left: -40px;
  transform: scaleY(-1);
  transform-origin: 30% 70%;
  animation: leafFloat 10s ease-in-out infinite 3s;
}
.bg-leaf-br {
  bottom: -30px; right: -40px;
  transform: scale(-1,-1);
  transform-origin: 70% 70%;
  animation: leafFloat 8.5s ease-in-out infinite 0.8s;
}
@keyframes leafFloat {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  25%       { transform: translate(4px, -6px) rotate(1.5deg) scale(1.01); }
  50%       { transform: translate(2px, -10px) rotate(0.8deg) scale(1.01); }
  75%       { transform: translate(-3px, -5px) rotate(-1deg) scale(1); }
}
/* Corrigir transform base para as que têm flip */
.bg-leaf-tr { animation-name: leafFloatFlipH; }
.bg-leaf-bl { animation-name: leafFloatFlipV; }
.bg-leaf-br { animation-name: leafFloatFlipHV; }
@keyframes leafFloatFlipH {
  0%, 100% { transform: scaleX(-1) translate(0,0) rotate(0deg); }
  25%       { transform: scaleX(-1) translate(4px,-6px) rotate(1.5deg); }
  50%       { transform: scaleX(-1) translate(2px,-10px) rotate(0.8deg); }
  75%       { transform: scaleX(-1) translate(-3px,-5px) rotate(-1deg); }
}
@keyframes leafFloatFlipV {
  0%, 100% { transform: scaleY(-1) translate(0,0) rotate(0deg); }
  25%       { transform: scaleY(-1) translate(4px,-6px) rotate(1.5deg); }
  50%       { transform: scaleY(-1) translate(2px,-10px) rotate(0.8deg); }
  75%       { transform: scaleY(-1) translate(-3px,-5px) rotate(-1deg); }
}
@keyframes leafFloatFlipHV {
  0%, 100% { transform: scale(-1,-1) translate(0,0) rotate(0deg); }
  25%       { transform: scale(-1,-1) translate(4px,-6px) rotate(1.5deg); }
  50%       { transform: scale(-1,-1) translate(2px,-10px) rotate(0.8deg); }
  75%       { transform: scale(-1,-1) translate(-3px,-5px) rotate(-1deg); }
}
@media (min-width: 900px) {
  .bg-leaf { width: 320px; height: 320px; opacity: 0.28; }
}
@media (max-width: 520px) {
  .bg-leaf { width: 160px; height: 160px; opacity: 0.22; }
}

/* Acessibilidade */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  background: var(--marrom-dark);
  color: #fff;
  padding: 10px 16px;
  border-radius: 6px;
  z-index: 1000;
}
.skip-link:focus { left: 8px; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* =========== CABEÇALHO =========== */
.site-header {
  background: linear-gradient(180deg, var(--creme-2) 0%, rgba(243,232,210,0.95) 100%);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 12px rgba(94,60,39,0.08);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand img {
  width: 60px; height: 60px;
  border-radius: 50%;
  border: 2.5px solid var(--terracota);
  background: #fff;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 0 0 4px rgba(192,107,62,0.12);
  transition: box-shadow 0.3s;
}
.brand img:hover { box-shadow: 0 0 0 6px rgba(192,107,62,0.2); }
.brand-text { min-width: 0; }
.brand-text h1 {
  font-size: 1.35rem;
  margin: 0;
  color: var(--terracota-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand-text p {
  margin: 2px 0 0;
  color: var(--muted);
  font-style: italic;
  font-size: 0.88rem;
  font-family: 'Great Vibes', cursive;
  font-size: 1rem;
}

.status-wrapper { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.header-actions-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  background: #fff;
  border: 1px solid var(--border);
}
.status-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #bbb;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.05);
  animation: pulse 2.4s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
.status-badge.open  .status-dot { background: var(--oliva); box-shadow: 0 0 0 3px rgba(138,154,91,0.25); }
.status-badge.closed .status-dot { background: var(--danger); box-shadow: 0 0 0 3px rgba(176,65,65,0.2); animation: none; }
.status-badge.open  { color: var(--oliva-dark); }
.status-badge.closed { color: var(--danger); }

.btn-link {
  background: none; border: none; cursor: pointer;
  color: var(--terracota-dark); font-size: 0.85rem; padding: 4px;
  text-decoration: underline;
  min-height: 32px;
  font-family: inherit;
}

.horarios-list {
  background: var(--card);
  border-top: 1px solid var(--border);
  padding: 12px 16px;
}
.horarios-list table {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.horarios-list td {
  padding: 8px 0;
  border-bottom: 1px dashed var(--border);
}
.horarios-list td:first-child { font-weight: 600; color: var(--marrom-dark); }
.horarios-list td:last-child { text-align: right; color: var(--muted); }
.horarios-list tr.today td { color: var(--terracota-dark); font-weight: 700; }

/* =========== BOAS-VINDAS =========== */
.welcome {
  text-align: center;
  padding: 28px 12px 10px;
  color: var(--marrom);
  font-size: 1.12rem;
  font-family: 'Great Vibes', cursive;
  line-height: 1.4;
  letter-spacing: 0.01em;
  animation: welcomeFade 0.8s ease both;
}
@keyframes welcomeFade {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =========== BUSCA =========== */
.search-wrap {
  max-width: 640px;
  margin: 8px auto 20px;
  padding: 0 4px;
}
.search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 14px;
  box-shadow: var(--shadow);
  transition: border-color 0.15s ease;
}
.search-input-wrap:focus-within {
  border-color: var(--terracota);
  box-shadow: 0 0 0 3px rgba(192,107,62,0.12);
}
.search-icon { font-size: 1rem; color: var(--muted); flex-shrink: 0; }
.search-input-wrap input {
  border: none;
  background: transparent;
  padding: 12px 10px;
  font-family: inherit;
  font-size: 1rem;
  width: 100%;
  color: var(--text);
  outline: none;
}
.search-clear {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 1rem;
  width: 32px; height: 32px;
  border-radius: 50%;
}
.search-clear:hover { background: var(--creme-2); }

.pedido-minimo {
  text-align: center;
  font-size: 0.9rem;
  color: var(--marrom);
  background: var(--creme-2);
  border: 1px dashed var(--border);
  padding: 8px 14px;
  border-radius: 999px;
  max-width: 360px;
  margin: 14px auto;
}

/* =========== CATEGORIAS =========== */
.category { margin: 30px 0; }
.category-title {
  font-size: 1.5rem;
  color: var(--terracota-dark);
  padding-bottom: 10px;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--border);
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}
.category-title::before {
  content: '🌿';
  font-size: 1.1rem;
  opacity: 0.7;
}
.category-title::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 80px; height: 2px;
  background: linear-gradient(to right, var(--oliva), transparent);
  border-radius: 2px;
}

.products-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 640px) {
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}

/* =========== CARD DE PRODUTO (com foto) =========== */
.product-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(94,60,39,0.09), 0 1px 3px rgba(94,60,39,0.06);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s cubic-bezier(0.34,1.1,0.64,1), box-shadow 0.25s ease, border-color 0.25s ease;
  animation: cardReveal 0.5s cubic-bezier(0.34,1.1,0.64,1) both;
}
@keyframes cardReveal {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.product-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 18px 48px rgba(94,60,39,0.18), 0 4px 12px rgba(94,60,39,0.08);
  border-color: var(--terracota-soft);
}
.product-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--creme-2), var(--oliva-soft));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.product-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.product-card:hover .product-photo img {
  transform: scale(1.04);
}
.product-photo.no-photo {
  font-size: 3.2rem;
  color: var(--terracota);
  opacity: 0.55;
  font-family: 'Fraunces', serif;
}
.product-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  background: linear-gradient(180deg, var(--card) 0%, rgba(255,253,247,0.98) 100%);
}
.product-card h3 {
  font-size: 1.12rem;
  color: var(--marrom-dark);
  margin: 0;
  line-height: 1.3;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.product-card .desc {
  color: var(--muted);
  font-size: 0.9rem;
  flex: 1;
  margin: 0;
  line-height: 1.5;
}
.product-card .price {
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--terracota-dark);
  font-family: 'Fraunces', serif;
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: -0.01em;
}
.product-card .price::before {
  content: '';
  display: inline-block;
  width: 3px; height: 14px;
  background: var(--oliva);
  border-radius: 2px;
  opacity: 0.7;
}
.product-card .actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.btn-add {
  flex: 1;
  min-width: 120px;
  padding: 10px 14px;
  font-size: 0.92rem;
  min-height: 44px;
  transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
}
.btn-add:hover:not(:disabled) {
  box-shadow: 0 4px 12px rgba(192,107,62,0.3);
  transform: translateY(-1px);
}
.btn-add:active { transform: translateY(0); }
.btn-add.btn-added {
  background: var(--oliva);
  color: #fff;
}
.btn-add.btn-added:hover { background: var(--oliva-dark); }

.qty-control {
  display: inline-flex;
  align-items: center;
  background: var(--creme-2);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.qty-control button {
  background: transparent;
  border: none;
  width: 40px; height: 40px;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--marrom-dark);
  cursor: pointer;
  touch-action: manipulation;
}
.qty-control button:hover:not(:disabled) { background: var(--creme); }
.qty-control button:disabled { opacity: 0.4; cursor: not-allowed; }
.qty-control span {
  min-width: 28px;
  text-align: center;
  font-weight: 600;
}
.qty-control.qty-small button { width: 32px; height: 32px; font-size: 1rem; }
.qty-control.qty-small span { min-width: 22px; }

.obs-toggle {
  font-size: 0.85rem;
  background: none;
  border: 1px dashed var(--border);
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  align-self: flex-start;
  font-family: inherit;
  min-height: 32px;
}
.obs-toggle:hover { color: var(--terracota-dark); border-color: var(--terracota); }

.obs-input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-family: inherit;
  font-size: 0.9rem;
  background: #fff;
  resize: vertical;
}

.variacoes {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.variacoes label {
  font-size: 0.85rem;
  background: var(--creme-2);
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  border: 1.5px solid var(--border);
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.variacoes label:has(input:checked) {
  background: var(--terracota);
  color: #fff;
  border-color: var(--terracota-dark);
}
.variacoes label:hover:not(:has(input:checked)) {
  border-color: var(--terracota);
  color: var(--terracota-dark);
}
.variacoes input { display: none; }

/* Empty state */
.empty-state {
  text-align: center;
  padding: 50px 20px;
  color: var(--muted);
}
.empty-icon {
  font-size: 3rem;
  margin-bottom: 10px;
  opacity: 0.6;
}

/* =========== BOTÕES =========== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 22px;
  border-radius: 999px;
  border: none;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: transform 0.05s ease, background 0.2s ease;
  font-family: inherit;
  min-height: 44px;
  text-decoration: none;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--terracota); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--terracota-dark); }
.btn-ghost {
  background: transparent; color: var(--marrom-dark);
  border: 1px solid var(--border);
}
.btn-ghost:hover { background: var(--creme-2); }
.btn-icon {
  background: transparent; border: none; cursor: pointer;
  font-size: 1.15rem; color: var(--marrom-dark);
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.btn-icon:hover { background: var(--creme-2); }
.btn-big {
  padding: 14px 26px;
  font-size: 1.02rem;
  min-height: 50px;
}

/* =========== CARRINHO FLUTUANTE =========== */
.cart-toggle {
  position: fixed;
  left: 14px; right: 14px; top: 14px;
  background: linear-gradient(135deg, var(--terracota), var(--terracota-dark));
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-weight: 600;
  font-size: 0.98rem;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(192,107,62,0.50), 0 4px 10px rgba(0,0,0,0.15);
  z-index: 40;
  font-family: inherit;
  max-width: 420px;
  margin: 0 auto;
  transition: background 0.2s, box-shadow 0.2s, transform 0.1s;
}
.cart-toggle:hover {
  background: linear-gradient(135deg, var(--terracota-dark), #8a4220);
  box-shadow: 0 14px 36px rgba(192,107,62,0.55), 0 4px 12px rgba(0,0,0,0.18);
  transform: translateY(-1px);
}
.cart-toggle:active { transform: translateY(0); }
.cart-toggle.bump { animation: bump 0.35s ease; }
@keyframes bump {
  0%, 100% { transform: scale(1); }
  35%       { transform: scale(1.07) translateY(-2px); }
  70%       { transform: scale(0.98); }
}
.cart-icon { font-size: 1.15rem; }
.cart-label {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  font-size: 0.92rem;
}
.cart-count {
  background: #fff;
  color: var(--terracota-dark);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.85rem;
  font-weight: 700;
}
.cart-total {
  font-weight: 700;
  white-space: nowrap;
}

/* Back to top */
.back-to-top {
  position: fixed;
  right: 14px;
  bottom: 16px;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--marrom-dark);
  font-size: 1.3rem;
  cursor: pointer;
  box-shadow: var(--shadow);
  z-index: 39;
}
.back-to-top:hover { background: var(--creme-2); }

/* Quando não tem carrinho visível, sobe o back-to-top */
/* cart-toggle agora fica no topo — back-to-top independente */

/* =========== DRAWER DO CARRINHO =========== */
.cart-drawer {
  position: fixed;
  top: 0; right: 0;
  width: 100%;
  max-width: 440px;
  height: 100dvh;
  background: var(--creme);
  box-shadow: -12px 0 40px rgba(94,60,39,0.18);
  z-index: 60;
  display: flex;
  flex-direction: column;
  animation: slideIn 0.28s cubic-bezier(0.34, 1.1, 0.64, 1);
}
@keyframes slideIn {
  from { transform: translateX(105%); }
  to   { transform: translateX(0); }
}

/* Modo compacto: quando carrinho vazio (universal) */
.cart-drawer.is-empty {
  position: fixed;
  bottom: 0;
  right: 0;
  top: auto;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 100px;
  animation: slideUp 0.28s cubic-bezier(0.34, 1.1, 0.64, 1);
  border-top: 1px solid var(--border);
  border-radius: 20px 20px 0 0;
  border-left: none;
  box-shadow: 0 -4px 16px rgba(94,60,39,0.12);
}
@keyframes slideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.cart-drawer.is-empty .cart-drawer-header {
  display: none;
}

.cart-drawer.is-empty .cart-items {
  flex: 0;
  overflow: hidden;
  padding: 12px 16px;
  max-height: 60px;
}

.cart-drawer.is-empty .cart-footer {
  display: none;
}

.cart-drawer.is-empty .cart-empty-wrap {
  padding: 8px 16px;
  text-align: center;
}

.cart-drawer.is-empty .cart-empty-emoji {
  display: none;
}

.cart-drawer.is-empty .cart-empty {
  margin-top: 0;
  font-size: 0.9rem;
}

.cart-drawer.is-empty .cart-empty-hint {
  display: none;
}

/* Modo expandido: quando carrinho tem itens (universal) */
.cart-drawer:not(.is-empty) {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 440px;
  height: 100dvh;
  animation: slideIn 0.28s cubic-bezier(0.34, 1.1, 0.64, 1);
  border-radius: 0;
  border-left: 4px solid var(--oliva-soft);
}
@media (max-width: 520px) {
  .cart-drawer:not(.is-empty) {
    max-width: 100%;
  }
}
.cart-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 2px solid var(--border);
  background: linear-gradient(180deg, var(--creme-2), var(--creme));
}
.cart-drawer-header h2 { margin: 0; font-size: 1.2rem; color: var(--terracota-dark); }

.cart-items {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  -webkit-overflow-scrolling: touch;
}
.cart-empty {
  text-align: center;
  color: var(--muted);
  font-style: italic;
  margin-top: 40px;
}
.cart-item {
  padding: 12px 0;
  border-bottom: 1px dashed var(--border);
}
.cart-item-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}
.cart-item-left {
  display: flex;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.cart-item-photo {
  width: 52px; height: 52px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.cart-item-info { min-width: 0; }
.cart-item-name { font-weight: 600; color: var(--marrom-dark); }
.cart-item-sub { color: var(--muted); font-size: 0.85rem; }
.cart-item-price {
  font-weight: 700; color: var(--terracota-dark);
  white-space: nowrap;
  font-family: 'Fraunces', serif;
}
.cart-item-actions {
  display: flex; align-items: center; gap: 12px;
  margin-top: 10px;
  justify-content: space-between;
}
.cart-item-remove {
  background: none; border: none; cursor: pointer;
  color: var(--danger); font-size: 0.85rem; text-decoration: underline;
  min-height: 32px;
  font-family: inherit;
}

.cart-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  background: var(--creme-2);
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
}
.cart-totals div {
  display: flex; justify-content: space-between;
  margin-bottom: 10px;
  font-size: 1rem;
}
.cart-totals strong { color: var(--terracota-dark); font-family: 'Fraunces', serif; }
.cart-footer .btn { width: 100%; }

/* =========== MODAIS =========== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(40, 28, 18, 0.65);
  animation: fadeIn 0.2s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal-panel {
  position: relative;
  background: var(--creme);
  width: 100%;
  max-width: 520px;
  max-height: 94dvh;
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  margin: 16px;
  animation: modalIn 0.22s ease;
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 20px; border-bottom: 1px solid var(--border);
  background: var(--creme-2);
}
.modal-header h2 { margin: 0; font-size: 1.2rem; }
.modal-body {
  padding: 18px 20px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 14px;
  padding-bottom: calc(18px + env(safe-area-inset-bottom));
}
fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin: 0;
  background: #fff;
}
legend { font-weight: 600; color: var(--marrom-dark); padding: 0 6px; font-size: 0.92rem; }
label {
  display: block; font-size: 0.88rem; color: var(--marrom-dark);
  margin: 8px 0 4px;
  font-weight: 500;
}
input[type="text"], input[type="tel"], input[type="number"], input[type="search"], textarea, select {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 1rem; /* 16px evita zoom no iOS */
  background: #fff;
  color: var(--text);
}
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--terracota);
  outline-offset: 1px;
  border-color: var(--terracota);
}

.radio-group {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 6px;
}
.radio-group label {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--creme-2);
  padding: 10px 16px;
  border-radius: 999px;
  cursor: pointer;
  margin: 0;
  font-size: 0.95rem;
  border: 1px solid var(--border);
  min-height: 40px;
  transition: background 0.15s ease;
}
.radio-group input { accent-color: var(--terracota); margin: 0; }
.radio-group label:has(input:checked) {
  background: var(--terracota);
  color: #fff;
  border-color: var(--terracota-dark);
}

.info {
  font-size: 0.88rem;
  color: var(--muted);
  margin: 6px 0 0;
  font-style: italic;
}
.error {
  color: var(--danger);
  background: #fff3f3;
  border: 1px solid #f5cccc;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
}

.modal-totals {
  background: var(--creme-2);
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.modal-totals > div {
  display: flex; justify-content: space-between;
  padding: 4px 0;
  font-size: 0.98rem;
}
.modal-total {
  border-top: 1px solid var(--border);
  margin-top: 6px; padding-top: 10px !important;
  font-size: 1.14rem !important;
}
.modal-total strong { color: var(--terracota-dark); font-family: 'Fraunces', serif; }

.modal-actions {
  display: flex; justify-content: flex-end; gap: 10px;
  padding-top: 10px;
  flex-wrap: wrap;
}
.modal-actions.center { justify-content: center; }
.modal-actions .btn-primary { flex: 1; min-width: 160px; }

/* Modal "pedido enviado" */
.modal-sent {
  text-align: center;
  padding: 30px 24px 24px;
  align-items: center;
  gap: 10px;
  max-width: 460px;
}
.sent-icon {
  font-size: 3.2rem;
  margin-bottom: 6px;
  animation: heartbeat 1.6s ease-in-out infinite;
}
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}
.modal-sent h2 {
  color: var(--terracota-dark);
  font-size: 1.55rem;
  margin: 0 0 8px;
}
.modal-sent p { margin: 6px 0; color: var(--text); line-height: 1.5; }
.modal-sent .muted { color: var(--muted); }
.modal-sent .small { font-size: 0.88rem; }
.modal-sent .modal-actions { width: 100%; margin-top: 10px; }

/* =========== RODAPÉ =========== */
.site-footer {
  background: linear-gradient(180deg, var(--marrom) 0%, var(--marrom-dark) 100%);
  color: var(--creme-2);
  text-align: center;
  padding: 32px 16px calc(32px + env(safe-area-inset-bottom));
  margin-top: 40px;
  position: relative;
  z-index: 2;
  border-top: 3px solid var(--terracota-soft);
}
.site-footer p { margin: 4px 0; }
.site-footer .small { font-size: 0.8rem; opacity: 0.7; }
.site-footer a { color: var(--creme-2); text-decoration: underline; opacity: 0.8; }
.site-footer a:hover { opacity: 1; }

/* =========== MÓDULO: mobile-first ajustes =========== */
[hidden] { display: none !important; }

@media (max-width: 520px) {
  .header-inner {
    padding: 10px 14px;
    gap: 10px;
  }
  .status-wrapper {
    width: 100%;
    align-items: flex-end;
    flex-direction: column;
    justify-content: flex-end;
  }
  .header-actions-row {
    justify-content: flex-end;
  }
  .fav-toggle .fav-toggle-label { display: none; }
  .brand-text h1 { font-size: 1.2rem; }
  .brand-text p { font-size: 0.85rem; }
  .brand img { width: 54px; height: 54px; }
  .welcome { padding: 18px 12px 4px; font-size: 1rem; }
  .category-title { font-size: 1.3rem; }
  .product-card h3 { font-size: 1.05rem; }
  /* Deixa espaço no topo para o cart-toggle não cobrir o conteúdo */
  main { padding-top: 80px; }
}

/* Espaço extra no topo para que o cart flutuante não cubra o header */
#cardapio { padding-top: 80px; }

/* Quando a loja está fechada, o card fica levemente apagado */
body.loja-fechada .product-card { opacity: 0.95; }

/* Respeito a prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========== GALERIA NOS CARDS =========== */
.product-photo {
  overflow: hidden;
  position: relative;
}
.product-photo img {
  transition: opacity 0.2s ease, transform 0.35s ease;
}
.photo-nav {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  background: rgba(58,42,30,0.55);
  color: #fff;
  border: none; cursor: pointer;
  width: 34px; height: 34px;
  border-radius: 50%;
  font-size: 1.4rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity 0.2s, background 0.15s;
  z-index: 3;
}
.product-photo:hover .photo-nav { opacity: 1; }
.photo-nav:hover { background: rgba(58,42,30,0.8); }
.photo-nav-prev { left: 6px; }
.photo-nav-next { right: 6px; }
.photo-dots {
  position: absolute;
  bottom: 8px; left: 0; right: 0;
  display: flex; justify-content: center; gap: 5px;
  z-index: 3;
}
.photo-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
  border: 1.5px solid rgba(255,255,255,0.8);
  transition: background 0.2s, transform 0.2s;
}
.photo-dot.active {
  background: #fff;
  transform: scale(1.25);
}
.photo-zoom-hint {
  position: absolute;
  bottom: 8px; right: 8px;
  background: rgba(58,42,30,0.5);
  color: #fff;
  width: 30px; height: 30px;
  border-radius: 50%;
  font-size: 0.85rem;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
}
.product-photo:hover .photo-zoom-hint { opacity: 1; }

/* =========== LIGHTBOX =========== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: lbFadeIn 0.22s ease;
}
@keyframes lbFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.lightbox-backdrop {
  position: absolute; inset: 0;
  background: rgba(20,10,5,0.9);
  backdrop-filter: blur(6px);
}
.lightbox-img-wrap {
  position: relative; z-index: 2;
  max-width: 92vw;
  max-height: 85dvh;
  display: flex; align-items: center; justify-content: center;
  animation: lbImgIn 0.28s cubic-bezier(0.34,1.15,0.64,1);
}
@keyframes lbImgIn {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}
.lightbox-img {
  max-width: 92vw;
  max-height: 82dvh;
  border-radius: 12px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.7);
  display: block;
  object-fit: contain;
}
.lightbox-close {
  position: absolute;
  top: 16px; right: 16px;
  z-index: 3;
  background: rgba(255,255,255,0.15);
  border: 1.5px solid rgba(255,255,255,0.3);
  color: #fff;
  width: 44px; height: 44px;
  border-radius: 50%;
  font-size: 1.2rem; font-weight: 600;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.lightbox-close:hover { background: rgba(255,255,255,0.28); }
.lightbox-prev,
.lightbox-next {
  position: absolute; top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  background: rgba(255,255,255,0.12);
  border: 1.5px solid rgba(255,255,255,0.25);
  color: #fff;
  width: 50px; height: 50px;
  border-radius: 50%;
  font-size: 2rem; font-weight: 300;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, transform 0.15s;
}
.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }
.lightbox-prev:hover { background: rgba(255,255,255,0.25); transform: translateY(-50%) scale(1.08); }
.lightbox-next:hover { background: rgba(255,255,255,0.25); transform: translateY(-50%) scale(1.08); }
.lightbox-dots {
  position: absolute;
  bottom: 20px; left: 0; right: 0;
  display: flex; justify-content: center; gap: 8px;
  z-index: 3;
}
.lb-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  border: 1.5px solid rgba(255,255,255,0.7);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.lb-dot.active {
  background: #fff;
  transform: scale(1.35);
}
@media (max-width: 600px) {
  .lightbox-prev { left: 6px; }
  .lightbox-next { right: 6px; }
  .lightbox-prev, .lightbox-next { width: 40px; height: 40px; font-size: 1.6rem; }
}

/* =========== CHECKOUT: BANNER WHATSAPP =========== */
.checkout-wpp-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: linear-gradient(135deg, #e8f5e0, #f0f7e8);
  border: 1.5px solid #b8d9a0;
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 0.92rem;
  color: #3a5a28;
  line-height: 1.5;
  margin-bottom: 4px;
}
.checkout-wpp-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  margin-top: 1px;
}
.checkout-wpp-banner strong { color: #2d4a1f; }

/* =========== DESIGN: TEXTURA DE FUNDO =========== */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(138,154,91,0.06) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(192,107,62,0.06) 0%, transparent 50%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='60' height='60' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* =========== DESIGN: SEPARADOR ORNAMENTAL =========== */
.category + .category { margin-top: 36px; }
.category:not(:first-child)::before {
  content: '❧';
  display: block;
  text-align: center;
  font-size: 1.3rem;
  color: var(--terracota-soft);
  opacity: 0.8;
  margin-bottom: 32px;
  letter-spacing: 0.5em;
}

/* =========== DESIGN: WELCOME MELHORADO =========== */
#welcome-text {
  font-size: clamp(1.2rem, 3.5vw, 1.6rem);
  color: var(--marrom);
  display: block;
  position: relative;
}
#welcome-text::before,
#welcome-text::after {
  content: '✦';
  color: var(--terracota-soft);
  font-size: 0.7em;
  vertical-align: middle;
  margin: 0 8px;
  opacity: 0.7;
}

/* .product-body definida acima */

/* =========== DESIGN: PRODUTO SEM FOTO MAIS BONITO =========== */
.product-photo.no-photo {
  background: linear-gradient(135deg, var(--creme-2) 0%, var(--oliva-soft) 100%);
  font-size: 3.5rem;
  color: var(--terracota);
  opacity: 0.7;
}



/* =========== DESIGN: SEARCH BOX MAIS ELEGANTE =========== */
.search-input-wrap {
  box-shadow: 0 4px 16px rgba(94,60,39,0.08);
  transition: box-shadow 0.2s, border-color 0.15s;
}
.search-input-wrap:focus-within {
  box-shadow: 0 4px 20px rgba(192,107,62,0.18), 0 0 0 3px rgba(192,107,62,0.1);
}

/* =========== DESIGN: ANIMAÇÃO STAGGER MELHORADA =========== */
.product-card {
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.34, 1.08, 0.64, 1);
}

/* =============================================
   DESIGN ACONCHEGANTE — melhorias finais v3
   ============================================= */

/* Hero section com gradiente quente */
.site-main {
  position: relative;
  z-index: 1;
}

/* Welcome section expandida */
.welcome {
  position: relative;
  padding: 24px 20px 16px;
  margin: 0 0 8px;
}
.welcome::after {
  content: '';
  display: block;
  width: 60px; height: 2px;
  background: linear-gradient(to right, var(--terracota), transparent);
  border-radius: 2px;
  margin: 14px auto 0;
}

/* Horários com visual de tabela mais quente */
.horarios-section {
  background: linear-gradient(135deg, rgba(251,243,228,0.9), rgba(243,232,210,0.7));
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 2px;
}
.horarios-toggle {
  padding: 13px 18px;
  font-weight: 600;
  background: transparent;
  border-radius: 14px;
  transition: background 0.2s;
}
.horarios-toggle:hover {
  background: rgba(192,107,62,0.07);
}

/* Grid de produtos — melhores proporções */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}
@media (max-width: 540px) {
  .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
  }
}

/* Botão de adicionar — mais saboroso */
.btn-add {
  background: linear-gradient(135deg, var(--terracota), var(--terracota-dark));
  color: #fff;
  border: none;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.01em;
  position: relative;
  overflow: hidden;
}
.btn-add::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0);
  transition: background 0.2s;
}
.btn-add:hover:not(:disabled)::after {
  background: rgba(255,255,255,0.1);
}
.btn-add.btn-added {
  background: linear-gradient(135deg, var(--oliva), var(--oliva-dark));
}

/* Status badge melhorado */
.status-badge {
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: box-shadow 0.3s;
}
.status-badge.open {
  background: linear-gradient(135deg, rgba(138,154,91,0.15), rgba(138,154,91,0.08));
  box-shadow: 0 0 0 3px rgba(138,154,91,0.12), inset 0 1px 0 rgba(255,255,255,0.5);
}

/* Busca mais elegante */
.search-input-wrap {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  box-shadow: 0 2px 12px rgba(94,60,39,0.07);
  transition: box-shadow 0.25s, border-color 0.2s;
}
.search-input-wrap:focus-within {
  border-color: var(--terracota);
  box-shadow: 0 4px 20px rgba(192,107,62,0.15), 0 0 0 3px rgba(192,107,62,0.08);
}

/* Checkout modal mais quente */
.checkout-modal-inner {
  border-radius: 20px 20px 0 0;
}
.checkout-title {
  font-family: 'Fraunces', Georgia, serif;
  color: var(--terracota-dark);
}

/* Totais do checkout */
.checkout-summary {
  background: linear-gradient(135deg, var(--creme-2), rgba(243,232,210,0.5));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
}
.checkout-total-row {
  border-top: 2px solid var(--border);
  padding-top: 12px;
  margin-top: 8px;
}
.checkout-total-row strong {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.2rem;
  color: var(--terracota-dark);
}

/* Rodapé mais rico */
.site-footer {
  overflow: hidden;
}
.site-footer::before {
  content: '🌿 · · · 🌿';
  display: block;
  font-size: 0.9rem;
  letter-spacing: 0.8em;
  text-indent: 0.8em;
  opacity: 0.3;
  margin-bottom: 14px;
}

/* Carrinho — item com separador suave */
.cart-item {
  border-bottom: 1px solid var(--border);
  padding-bottom: 14px;
  animation: cartItemIn 0.22s ease both;
}
.cart-item:last-child { border-bottom: none; }
@keyframes cartItemIn {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Modal sent (pedido enviado) — mais festivo */
.sent-icon-wrap {
  animation: sentBounce 0.6s cubic-bezier(0.34,1.4,0.64,1) both;
}
@keyframes sentBounce {
  from { opacity: 0; transform: scale(0.5) rotate(-10deg); }
  to   { opacity: 1; transform: scale(1) rotate(0); }
}

/* Back to top button */
#back-to-top {
  background: var(--marrom-dark);
  color: var(--creme);
  border: none;
  border-radius: 50%;
  width: 44px; height: 44px;
  font-size: 1.2rem;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(94,60,39,0.25);
  position: fixed;
  bottom: 90px; right: 16px;
  z-index: 39;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}
#back-to-top:hover {
  background: var(--terracota-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(94,60,39,0.3);
}

/* Animação de entrada da página */
.site-header { animation: headerSlideDown 0.4s ease both; }
@keyframes headerSlideDown {
  from { opacity: 0; transform: translateY(-100%); }
  to   { opacity: 1; transform: translateY(0); }
}
.welcome { animation: welcomeFade 0.6s ease 0.2s both; }

/* Scrollbar estilizada */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--creme-2); }
::-webkit-scrollbar-thumb {
  background: var(--terracota-soft);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--terracota); }

/* Foco acessível bonito */
:focus-visible {
  outline: 2px solid var(--terracota);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Textura sutil nos separadores */
hr.ornamento {
  border: none;
  text-align: center;
  overflow: visible;
  color: var(--terracota-soft);
  opacity: 0.6;
}
hr.ornamento::after {
  content: '✦  ·  ✦';
  display: inline-block;
  font-size: 0.8rem;
  letter-spacing: 0.5em;
  padding: 0 10px;
}

/* ============================================================
   VJ Sabores — v3.1 detalhes finais
   Scroll reveal, ripple, fly-to-cart, confetti, chips sticky,
   favoritos, highlight busca, lightbox zoom, parallax folhas,
   bottom sheet progresso, glass header, separadores 🌿·····🌿
   ============================================================ */

/* ---------- Scroll reveal (IntersectionObserver) ---------- */
.product-card.reveal-bound:not(.reveal-in) {
  opacity: 0;
  transform: translateY(28px) scale(0.96);
  animation: none !important;
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1);
}
.product-card.reveal-in {
  opacity: 1;
  transform: translateY(0) scale(1);
  animation: none !important;
}
.category-title.reveal-bound:not(.reveal-in) {
  opacity: 0; transform: translateX(-12px);
  transition: opacity .5s ease, transform .5s ease;
}
.category-title.reveal-in { opacity: 1; transform: translateX(0); }

/* ---------- Tilt hover 3D (desktop) ---------- */
@media (hover: hover) and (pointer: fine) {
  .product-card {
    transform-style: preserve-3d;
    perspective: 900px;
  }
  .product-card:hover {
    transform: translateY(-6px) scale(1.015) rotateX(2deg) rotateY(-2deg);
    box-shadow: 0 22px 50px rgba(94,60,39,0.22), 0 6px 16px rgba(94,60,39,0.10);
  }
  .product-card:hover .product-photo img {
    transform: scale(1.06);
    filter: brightness(1.04) saturate(1.08);
  }
}

/* ---------- Ripple ---------- */
.btn, .btn-add, .cart-toggle, .btn-primary, .btn-ghost, .chip-cat {
  position: relative;
  overflow: hidden;
}
.ripple {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: rgba(255,255,255,0.55);
  transform: scale(0);
  animation: rippleOut 0.6s ease-out;
  mix-blend-mode: screen;
}
.btn-ghost .ripple { background: rgba(192,107,62,0.25); mix-blend-mode: normal; }
@keyframes rippleOut {
  to { transform: scale(2.5); opacity: 0; }
}

/* ---------- Fly emoji (fly-to-cart) ---------- */
.fly-emoji {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  font-size: 1.8rem;
  transform: translate(-50%, -50%);
  transition: transform 0.75s cubic-bezier(0.22,1,0.36,1), opacity 0.75s ease;
  filter: drop-shadow(0 2px 6px rgba(138,154,91,0.5));
  will-change: transform, opacity;
}

/* ---------- Confetti de folhinhas ---------- */
.confetti-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  overflow: hidden;
}
.confetti-piece {
  position: absolute;
  top: -40px;
  transform: translate(0,0) rotate(0);
  animation: confettiFall linear forwards;
  will-change: transform, opacity;
  filter: drop-shadow(0 2px 4px rgba(94,60,39,0.2));
}
@keyframes confettiFall {
  0% { transform: translate(0,0) rotate(0); opacity: 1; }
  100% { transform: translate(var(--drift, 0), 110vh) rotate(720deg); opacity: 0; }
}

/* ---------- Parallax das folhas de fundo ---------- */
.bg-leaf {
  will-change: transform;
}
.bg-leaf-tl { transform: translateY(var(--parallax-y, 0px)); }
.bg-leaf-tr { transform: scaleX(-1) translateY(calc(var(--parallax-y, 0px) * -1)); }
.bg-leaf-bl { transform: scaleY(-1) translateY(var(--parallax-y, 0px)); }
.bg-leaf-br { transform: scale(-1,-1) translateY(calc(var(--parallax-y, 0px) * -1)); }
/* Sobrepõe mas mantém o float: adicionamos animação de flutuação por pseudo */
.bg-leaf { animation-play-state: running; }

/* ---------- Header "glass" intenso ao rolar ---------- */
.site-header.is-scrolled {
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  background: linear-gradient(180deg, rgba(251,243,228,0.85) 0%, rgba(243,232,210,0.75) 100%);
  box-shadow: 0 6px 24px rgba(94,60,39,0.12);
}
.site-header.is-scrolled .brand img {
  width: 48px; height: 48px;
  transition: width .25s, height .25s;
}

/* ---------- Banner de tempo de entrega ---------- */
.delivery-time {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 4px auto 10px;
  max-width: var(--max);
  font-size: 0.88rem;
  color: var(--marrom-dark);
  background: linear-gradient(135deg, var(--creme-3), var(--creme-2));
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
  font-weight: 500;
}
.delivery-time .sep { opacity: 0.4; color: var(--oliva); }

/* ---------- Chips de categoria (sticky) ---------- */
.cat-chips-wrap {
  position: sticky;
  top: 86px;
  z-index: 20;
  background: linear-gradient(180deg, rgba(251,243,228,0.95) 0%, rgba(251,243,228,0.85) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(232,217,190,0.7);
  padding: 10px 0 10px;
  margin: 0 -16px 18px;
  box-shadow: 0 4px 12px rgba(94,60,39,0.04);
}
.cat-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 2px 16px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.cat-chips::-webkit-scrollbar { display: none; }
.chip-cat {
  flex-shrink: 0;
  background: #fff;
  border: 1.5px solid var(--border);
  color: var(--marrom-dark);
  padding: 8px 16px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, transform .15s, box-shadow .2s;
  white-space: nowrap;
  min-height: 36px;
}
.chip-cat:hover {
  border-color: var(--terracota);
  color: var(--terracota-dark);
  transform: translateY(-1px);
}
.chip-cat.active {
  background: linear-gradient(135deg, var(--terracota), var(--terracota-dark));
  color: #fff;
  border-color: var(--terracota-dark);
  box-shadow: 0 4px 12px rgba(192,107,62,0.3);
}

/* ---------- Favoritos (toggle no header) ---------- */
.fav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,0.92);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 5px 12px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--marrom-dark);
  cursor: pointer;
  transition: all .2s;
  min-height: 32px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(94,60,39,0.08);
}
.fav-toggle:hover { border-color: #d9454f; color: #d9454f; }
.fav-toggle.is-active {
  background: linear-gradient(135deg, #e94a58, #d9454f);
  color: #fff;
  border-color: #d9454f;
  box-shadow: 0 4px 12px rgba(217,69,79,0.3);
}
.fav-toggle.no-favs {
  animation: shakeX 0.4s ease;
}
@keyframes shakeX {
  0%,100% { transform: translateX(0); }
  20%      { transform: translateX(-5px); }
  40%      { transform: translateX(5px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(4px); }
}
.fav-toggle .fav-heart { font-size: 0.9rem; }
#fav-count {
  background: rgba(255,255,255,0.25);
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 0.78rem;
  min-width: 18px;
  text-align: center;
}
.fav-toggle:not(.is-active) #fav-count {
  background: #fbe5e7;
  color: #d9454f;
}
.fav-toggle:not(.has-items) #fav-count { display: none; }

/* ---------- Backdrop do carrinho ---------- */
.cart-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(40,20,10,0.55);
  z-index: 59;
  animation: fadeInBackdrop 0.2s ease;
}
@keyframes fadeInBackdrop {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.cart-backdrop[hidden] { display: none; }

/* ---------- Botão de favoritar (coração no card) ---------- */
.fav-btn {
  position: absolute;
  top: 10px; left: 10px;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem;
  color: #bbb;
  box-shadow: 0 2px 10px rgba(0,0,0,0.18);
  transition: background .2s, color .2s, transform .2s;
  z-index: 4;
  font-family: inherit;
  padding: 0;
}
.fav-btn:hover { transform: scale(1.1); background: #fff; }
.fav-btn.is-fav { color: #d9454f; background: #fff; }
.fav-btn.is-fav .fav-heart { animation: favHeart .45s cubic-bezier(.34,1.5,.64,1); }
.fav-btn.pop { animation: favPop .4s ease; }
@keyframes favPop {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.3); }
}
@keyframes favHeart {
  0% { transform: scale(0.4); }
  60% { transform: scale(1.35); }
  100% { transform: scale(1); }
}


/* Filtro de favoritos: quando ativo, mostra só categorias com cards visíveis */
body.show-favs-only .category:not(:has(.product-card:not([style*="display: none"]))) {
  display: none;
}

/* ---------- Highlight busca ---------- */
mark.hl {
  background: linear-gradient(180deg, rgba(255,240,180,0) 60%, rgba(255,221,130,0.8) 60%);
  color: inherit;
  padding: 0 1px;
  border-radius: 3px;
  font-weight: 600;
}

/* ---------- Barra de progresso do pedido mínimo ---------- */
.pm-bar {
  max-width: 640px;
  margin: 8px auto 18px;
  padding: 10px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pm-bar-label {
  font-size: 0.88rem;
  color: var(--marrom-dark);
  text-align: center;
}
.pm-bar-label strong { color: var(--terracota-dark); }
.pm-bar-track {
  height: 10px;
  background: var(--creme-2);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.pm-bar-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--oliva) 0%, var(--terracota) 100%);
  border-radius: 999px;
  transition: width .5s cubic-bezier(.34,1.1,.64,1);
  box-shadow: 0 0 12px rgba(192,107,62,0.35);
  position: relative;
}
.pm-bar-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: pmShimmer 2s linear infinite;
}
@keyframes pmShimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}
.pm-bar.is-complete .pm-bar-fill {
  background: linear-gradient(90deg, var(--oliva) 0%, var(--oliva-dark) 100%);
}

/* ---------- Separador 🌿 · · · 🌿 animado ---------- */
.category:not(:first-child)::before {
  content: '🌿 · · · 🌿';
  display: block;
  text-align: center;
  font-size: 1rem;
  letter-spacing: 0.5em;
  color: var(--terracota-soft);
  opacity: 0.85;
  margin: 28px 0 32px;
  animation: separatorBreathe 4s ease-in-out infinite;
}
@keyframes separatorBreathe {
  0%, 100% { opacity: 0.65; letter-spacing: 0.5em; }
  50% { opacity: 1; letter-spacing: 0.65em; }
}

/* ---------- Skeleton shimmer nas imagens (enquanto carrega) ---------- */
.product-photo:not(.no-photo) img[src=""],
.product-photo img:not([complete]) {
  background: linear-gradient(90deg, var(--creme-2) 25%, var(--creme-3) 50%, var(--creme-2) 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s linear infinite;
}
@keyframes skeletonShimmer {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}

/* ---------- Status badge "porta abrindo" ---------- */
.status-badge.open .status-dot {
  animation: pulseOpen 2.2s ease-in-out infinite;
}
@keyframes pulseOpen {
  0%, 100% { box-shadow: 0 0 0 3px rgba(138,154,91,0.25); }
  50% { box-shadow: 0 0 0 6px rgba(138,154,91,0.08); }
}

/* ---------- Contador do carrinho (bounce ao mudar) ---------- */
.cart-count {
  transition: transform 0.3s cubic-bezier(.34,1.5,.64,1);
  display: inline-block;
}
.cart-toggle.bump .cart-count {
  animation: countBounce .5s cubic-bezier(.34,1.5,.64,1);
}
@keyframes countBounce {
  0%,100% { transform: scale(1); }
  40% { transform: scale(1.45); }
  70% { transform: scale(0.9); }
}

/* =========== LIGHTBOX v3 — zoom profissional =========== */
.lightbox-img-wrap {
  cursor: zoom-in;
  overflow: hidden;
  transition: transform 0.2s, opacity 0.2s;
  touch-action: none;
}
.lightbox-img-wrap.is-zoomed { cursor: grab; }
.lightbox-img-wrap.is-panning { cursor: grabbing; }
.lightbox-img {
  user-select: none;
  -webkit-user-drag: none;
  transform-origin: center center;
  will-change: transform;
}
.lightbox.is-closing .lightbox-backdrop {
  animation: lbFadeOut 0.2s ease forwards;
}
@keyframes lbFadeOut { to { opacity: 0; } }

/* Controles flutuantes de zoom */
.lightbox-controls {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(20,10,5,0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.15);
  z-index: 4;
}
/* Quando tem dots, sobe um pouco */
.lightbox-dots + .lightbox-controls,
.lightbox-controls { bottom: 56px; }
.lb-ctrl {
  background: rgba(255,255,255,0.12);
  border: none;
  color: #fff;
  width: 36px; height: 36px;
  border-radius: 50%;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, transform .1s;
  font-family: inherit;
}
.lb-ctrl:hover:not(:disabled) { background: rgba(255,255,255,0.25); transform: scale(1.08); }
.lb-ctrl:disabled { opacity: 0.35; cursor: not-allowed; }
.lb-zoom-pct {
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  min-width: 46px;
  text-align: center;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 520px) {
  .lightbox-controls { bottom: 48px; gap: 4px; padding: 5px 8px; }
  .lb-ctrl { width: 32px; height: 32px; font-size: 1rem; }
  .lb-zoom-pct { min-width: 40px; font-size: 0.76rem; }
}

/* ---------- Ícone/Indicador "toque para ampliar" ---------- */
.photo-zoom-hint {
  background: rgba(20,10,5,0.55);
  backdrop-filter: blur(4px);
  color: #fff;
  width: 32px; height: 32px;
  font-size: 1rem;
  border-radius: 50%;
  opacity: 0;
  transition: opacity .2s, transform .2s;
}
.product-photo:hover .photo-zoom-hint { opacity: 1; transform: scale(1.05); }
@media (hover: none) { .photo-zoom-hint { opacity: 0.85; } }

/* ---------- Brand logo animação (usa a nova logo enviada) ---------- */
.brand img {
  animation: brandReveal .8s cubic-bezier(.34,1.2,.64,1) both;
}
@keyframes brandReveal {
  from { opacity: 0; transform: rotate(-12deg) scale(0.7); }
  to   { opacity: 1; transform: rotate(0) scale(1); }
}
.brand img:hover {
  animation: brandSpin 0.8s ease;
}
@keyframes brandSpin {
  0% { transform: rotate(0) scale(1); }
  50% { transform: rotate(6deg) scale(1.06); }
  100% { transform: rotate(0) scale(1); }
}

/* ---------- Obra-prima: pattern kraft sutil ---------- */
body {
  background-image:
    radial-gradient(circle at 10% 5%, rgba(192,107,62,0.035) 0%, transparent 50%),
    radial-gradient(circle at 90% 95%, rgba(138,154,91,0.035) 0%, transparent 50%);
  background-attachment: fixed;
}

/* ---------- Botão voltar ao topo: polimento ---------- */
.back-to-top, #back-to-top {
  backdrop-filter: blur(8px);
  background: rgba(94,60,39,0.88) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  transition: transform .2s, background .2s, box-shadow .2s !important;
}

/* ---------- Mobile: chips ocupam a largura ---------- */
@media (max-width: 520px) {
  .cat-chips-wrap { top: 72px; }
  .pm-bar { margin: 6px 12px 14px; }
  .delivery-time { font-size: 0.82rem; margin: 4px 12px 10px; padding: 7px 14px; }
}

/* ---------- Respeita reduced-motion em tudo novo ---------- */
@media (prefers-reduced-motion: reduce) {
  .ripple, .fly-emoji, .confetti-container,
  .pm-bar-fill::after, .separator-breathe {
    animation: none !important;
    transition: none !important;
  }
  .category:not(:first-child)::before { animation: none !important; }
}

/* ============================================================
   UPGRADE PROFISSIONAL v4 — inspirado no panfleto
   ============================================================ */

/* ---------- Parallax/tilt 3D das folhas (mouse + giroscópio) ---------- */
.bg-leaf {
  --parallax-x: 0px;
  --parallax-y: 0px;
  --parallax-rot: 0deg;
  transition: filter .4s ease;
}
.bg-leaf-tl {
  transform:
    translate(var(--parallax-x, 0px), var(--parallax-y, 0px))
    rotate(var(--parallax-rot, 0deg));
}
.bg-leaf-tr {
  transform:
    translate(var(--parallax-x, 0px), var(--parallax-y, 0px))
    scaleX(-1)
    rotate(var(--parallax-rot, 0deg));
}
.bg-leaf-bl {
  transform:
    translate(var(--parallax-x, 0px), var(--parallax-y, 0px))
    scaleY(-1)
    rotate(var(--parallax-rot, 0deg));
}
.bg-leaf-br {
  transform:
    translate(var(--parallax-x, 0px), var(--parallax-y, 0px))
    scale(-1,-1)
    rotate(var(--parallax-rot, 0deg));
}
/* Desliga as keyframes antigas que conflitam com o parallax */
.bg-leaf-tl, .bg-leaf-tr, .bg-leaf-bl, .bg-leaf-br {
  animation: none !important;
}

/* ---------- Tipografia aprimorada do header, estilo panfleto ---------- */
.brand-text h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  letter-spacing: 0.5px;
  font-size: 1.45rem;
  background: linear-gradient(135deg, var(--terracota-dark) 0%, var(--terracota) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}
.brand-text p {
  font-family: 'Great Vibes', cursive;
  font-size: 1rem;
  color: var(--oliva-dark);
  letter-spacing: 0.3px;
}

/* ---------- Welcome com cara de cardápio impresso ---------- */
.welcome {
  text-align: center;
  padding: 28px 18px 12px;
  position: relative;
}
.welcome::before,
.welcome::after {
  content: '';
  display: block;
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg,
    transparent,
    var(--oliva-soft) 20%,
    var(--oliva) 50%,
    var(--oliva-soft) 80%,
    transparent);
  margin: 14px auto;
  border-radius: 2px;
  opacity: 0.8;
}
#welcome-text {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-style: italic;
  font-size: 1.12rem;
  color: var(--marrom-dark);
  margin: 0;
  max-width: 540px;
  margin: 0 auto;
  line-height: 1.45;
}

/* ---------- Título de categoria com estilo de painel impresso ---------- */
.category {
  position: relative;
  padding-top: 8px;
  margin-bottom: 32px;
}
.category-title {
  text-align: center;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 2rem;
  color: var(--terracota-dark);
  margin: 18px 0 22px;
  position: relative;
  letter-spacing: 0.5px;
}
.category-title::before,
.category-title::after {
  content: '';
  display: inline-block;
  width: 40px;
  height: 2px;
  background: var(--oliva);
  vertical-align: middle;
  margin: 0 14px;
  opacity: 0.7;
  border-radius: 2px;
}
@media (max-width: 520px) {
  .category-title { font-size: 1.55rem; }
  .category-title::before,
  .category-title::after { width: 24px; margin: 0 10px; }
}

/* ---------- Product card — estilo panfleto vintage ---------- */
.product-card {
  background: linear-gradient(180deg, #fffdf7 0%, #fffbf0 100%);
  border: 1px solid rgba(232,217,190,0.9);
  border-radius: 20px;
  box-shadow:
    0 2px 4px rgba(94,60,39,0.04),
    0 10px 28px rgba(94,60,39,0.08);
  transition: transform .25s ease, box-shadow .25s ease;
  overflow: hidden;
  position: relative;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 6px 12px rgba(94,60,39,0.08),
    0 20px 48px rgba(94,60,39,0.15);
}
.product-card h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--terracota-dark);
  letter-spacing: 0.2px;
}
.product-card .desc {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.45;
  font-style: italic;
}
.product-card .price {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  color: var(--marrom-dark);
  font-size: 1.35rem;
  letter-spacing: 0.3px;
}

/* ---------- Botões com design mais profissional ---------- */
.btn-primary {
  background: linear-gradient(135deg, var(--terracota) 0%, var(--terracota-dark) 100%);
  box-shadow: 0 4px 14px rgba(192,107,62,0.3);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 6px 20px rgba(192,107,62,0.4);
}
.btn-primary:active { transform: translateY(0); }

.btn-add.btn-added {
  background: linear-gradient(135deg, var(--oliva) 0%, var(--oliva-dark) 100%);
  box-shadow: 0 4px 14px rgba(138,154,91,0.3);
}

/* ---------- Carrinho flutuante mais polido ---------- */
.cart-toggle {
  background: linear-gradient(135deg, var(--terracota) 0%, var(--terracota-dark) 100%);
  box-shadow:
    0 8px 24px rgba(192,107,62,0.35),
    0 4px 12px rgba(94,60,39,0.2);
  transition: transform .2s ease, box-shadow .2s ease;
}
.cart-toggle:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 12px 32px rgba(192,107,62,0.45),
    0 6px 16px rgba(94,60,39,0.25);
}
@keyframes cartBump {
  0%,100% { transform: scale(1); }
  30% { transform: scale(1.12) rotate(-3deg); }
  60% { transform: scale(0.95) rotate(2deg); }
}
.cart-toggle.bump { animation: cartBump .45s cubic-bezier(.2,1.2,.4,1); }

/* ---------- Drawer do carrinho: border estilo cardápio ---------- */
.cart-drawer {
  border-left: 4px solid var(--oliva-soft);
  background:
    linear-gradient(180deg, rgba(255,253,247,0.98) 0%, rgba(251,243,228,0.98) 100%);
  box-shadow: -20px 0 40px rgba(94,60,39,0.15);
}
.cart-drawer-header h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  color: var(--terracota-dark);
}

/* ---------- Modais com topo decorativo ---------- */
.modal-panel {
  border-top: 5px solid var(--terracota);
  background: linear-gradient(180deg, #fffdf7, #fffbf0);
}
.modal-header h2 {
  font-family: 'Fraunces', Georgia, serif;
  color: var(--terracota-dark);
}

/* ---------- Status badge mais visual ---------- */
.status-badge {
  background: rgba(255,255,255,0.9);
  border-radius: 999px;
  padding: 5px 12px 5px 10px;
  font-weight: 600;
  font-size: 0.85rem;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04), 0 2px 8px rgba(94,60,39,0.08);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.status-badge.open { color: var(--oliva-dark); }
.status-badge.closed { color: var(--danger); }
.status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block;
}
.status-badge.open .status-dot {
  background: var(--oliva);
  box-shadow: 0 0 0 4px rgba(138,154,91,0.2);
  animation: pulseDot 1.8s ease-in-out infinite;
}
.status-badge.closed .status-dot { background: var(--danger); }
@keyframes pulseDot {
  0%,100% { box-shadow: 0 0 0 4px rgba(138,154,91,0.2); }
  50% { box-shadow: 0 0 0 8px rgba(138,154,91,0.05); }
}

/* ---------- Campo de busca estilo delicado ---------- */
.search-input-wrap {
  background: rgba(255,255,255,0.95);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 2px rgba(94,60,39,0.05),
    0 2px 6px rgba(94,60,39,0.06);
  transition: border-color .2s, box-shadow .2s;
}
.search-input-wrap:focus-within {
  border-color: var(--terracota);
  box-shadow:
    inset 0 1px 2px rgba(94,60,39,0.05),
    0 0 0 4px rgba(192,107,62,0.15);
}

/* ---------- Footer com toque de cardápio ---------- */
.site-footer {
  margin-top: 50px;
  padding: 26px 0;
  text-align: center;
  border-top: 1px dashed rgba(138,154,91,0.35);
  background: linear-gradient(180deg, transparent, rgba(138,154,91,0.04));
}
#footer-text {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  color: var(--muted);
  font-size: 0.95rem;
}

/* ---------- Separador decorativo entre categorias ---------- */
.category:not(:first-of-type)::before {
  content: '❦';
  display: block;
  text-align: center;
  color: var(--oliva);
  font-size: 1.4rem;
  margin: 20px 0 6px;
  opacity: 0.6;
  transform: rotate(0deg);
  animation: gentleBreath 4s ease-in-out infinite;
}
@keyframes gentleBreath {
  0%,100% { transform: rotate(0deg) scale(1); opacity: 0.6; }
  50% { transform: rotate(4deg) scale(1.08); opacity: 0.8; }
}

/* ---------- Photo zoom hint (lupa) mais elegante ---------- */
.photo-zoom-hint {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(255,255,255,0.95);
  border-radius: 50%;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  pointer-events: none;
  opacity: 0.85;
  transition: opacity .2s, transform .2s;
}
.product-card:hover .photo-zoom-hint {
  opacity: 1;
  transform: scale(1.1);
}

/* ---------- Header na forma mais polida ---------- */
.site-header {
  background:
    linear-gradient(180deg,
      var(--creme-2) 0%,
      rgba(243,232,210,0.97) 80%,
      rgba(243,232,210,0.9) 100%);
  border-bottom: 1px solid rgba(232,217,190,0.6);
  box-shadow: 0 2px 20px rgba(94,60,39,0.06);
}
.site-header::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 3px;
  background: linear-gradient(90deg,
    transparent,
    var(--terracota-soft) 20%,
    var(--oliva-soft) 50%,
    var(--terracota-soft) 80%,
    transparent);
  opacity: 0.6;
}

/* ---------- Responsividade extra para celular ---------- */
@media (max-width: 520px) {
  .brand-text h1 { font-size: 1.2rem; }
  .brand-text p { font-size: 0.88rem; }
  .product-card h3 { font-size: 1.1rem; }
  .product-card .price { font-size: 1.2rem; }
  #welcome-text { font-size: 1rem; }
}

/* ---------- Lightbox cleanup (garante não travar) ---------- */
.lightbox[hidden] { display: none !important; }
.cart-drawer[hidden] { display: none !important; }
.cart-backdrop[hidden] { display: none !important; }
.modal[hidden] { display: none !important; }

/* ---------- Correção de radio/fieldset com visual mais limpo ---------- */
.radio-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.radio-group label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.radio-group label:hover {
  border-color: var(--terracota-soft);
  background: var(--creme-3);
}
.radio-group label:has(input:checked) {
  border-color: var(--terracota);
  background: linear-gradient(135deg, var(--creme-3), #fff);
  box-shadow: inset 0 0 0 1px var(--terracota);
}
.radio-group input[type="radio"] {
  accent-color: var(--terracota);
}

/* ============================================================
   ============ V5 — CARRINHO SIDEBAR DESKTOP =================
   ============ + PERFORMANCE FIXES (CHECKOUT)  ===============
   ============================================================ */

/* --- Empty state reforçado (novo) --- */
.cart-empty-wrap {
  text-align: center;
  padding: 40px 16px 20px;
}
.cart-empty-emoji {
  font-size: 3rem;
  opacity: 0.55;
  margin-bottom: 10px;
  filter: grayscale(0.3);
}
.cart-empty-hint {
  margin: 6px 0 0;
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.45;
}

/* --- Contador na header do sidebar --- */
.cart-sidebar-icon {
  font-size: 1.05rem;
  margin-right: 4px;
}
.cart-sidebar-count {
  display: inline-block;
  background: var(--terracota);
  color: #fff;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.78rem;
  font-weight: 700;
  margin-left: 6px;
  vertical-align: middle;
  min-width: 24px;
  text-align: center;
}
.cart-sidebar-count[hidden] { display: none; }

/* --- Botão "Finalizar" destacado (hero) --- */
.btn-checkout-hero {
  position: relative;
  font-size: 1.05rem;
  padding: 15px 18px;
  letter-spacing: 0.2px;
  background: linear-gradient(135deg, var(--terracota), var(--terracota-dark)) !important;
  box-shadow: 0 10px 24px rgba(192,107,62,0.35), 0 3px 8px rgba(0,0,0,0.08);
  border: none;
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-checkout-hero:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(192,107,62,0.45), 0 4px 10px rgba(0,0,0,0.12);
  filter: brightness(1.05);
}
.btn-checkout-hero:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
  filter: grayscale(0.4);
}
/* Pulse sutil quando ativo, guia o olho */
.btn-checkout-hero:not(:disabled) {
  animation: checkoutPulse 2.8s ease-in-out infinite;
}
@keyframes checkoutPulse {
  0%, 100% { box-shadow: 0 10px 24px rgba(192,107,62,0.35), 0 3px 8px rgba(0,0,0,0.08); }
  50%      { box-shadow: 0 14px 32px rgba(192,107,62,0.55), 0 4px 12px rgba(0,0,0,0.14); }
}
@media (prefers-reduced-motion: reduce) {
  .btn-checkout-hero:not(:disabled) { animation: none; }
}

/* ============================================================
   SIDEBAR PERMANENTE NO DESKTOP (>= 1024px)
   O drawer vira uma coluna fixa à direita, sempre visível.
   ============================================================ */
/* Sidebar fixa do desktop foi removida - carrinho agora universal */

/* Telas bem largas: sem sidebar, carrinho universal */

/* ============================================================
   PERFORMANCE: quando um modal está aberto, desativa efeitos
   caros (parallax de mouse, ripple, transitions em bg-leaves).
   Isso corrige a lentidão absurda reportada no formulário.
   ============================================================ */
body.modal-open .bg-leaves {
  /* Congela as folhas — nada de repintar em mousemove */
  pointer-events: none;
  transform: none !important;
  will-change: auto !important;
}
body.modal-open .bg-leaf {
  transition: none !important;
  animation: none !important;
  transform: none !important;
}
/* Desativa ripple caro dentro do modal — o clique fica instantâneo */
body.modal-open .modal .ripple { display: none !important; }

/* Inputs do checkout com renderização acelerada e sem jitter */
/* IMPORTANTE: não aplicar em radio/checkbox (bug visual de renderização) */
#checkout-form input:not([type="radio"]):not([type="checkbox"]),
#checkout-form textarea,
#checkout-form select {
  transform: translateZ(0);           /* promove para camada própria */
  backface-visibility: hidden;
  transition: border-color .15s, box-shadow .15s;
}

/* Evita ripple em radios/labels do form (não precisam) */
#checkout-form .radio-group label,
#checkout-form input,
#checkout-form textarea,
#checkout-form select {
  position: relative;
  overflow: visible;
}

/* Garantia extra: containeres do modal não viram contexto de parallax */
.modal-panel,
.modal-body,
#checkout-form {
  contain: layout paint style;
}

/* ============================================================
   TOAST de feedback — quando item foi adicionado ao carrinho
   ============================================================ */
.cart-feedback-toast {
  position: fixed;
  left: 50%;
  top: 24px;
  transform: translateX(-50%) translateY(-16px);
  background: linear-gradient(135deg, var(--oliva, #7a8a5e), #5f6d47);
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  z-index: 95;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .28s cubic-bezier(.2,1.2,.4,1);
  white-space: nowrap;
}
.cart-feedback-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============================================================
   BUGFIXES pequenos V5
   ============================================================ */
/* Evita que o botão "+ Observação" quebre o layout em telas estreitas */
.product-card .obs-toggle {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Bug: quando radio-group tem muitas opções, ocupa demais na vertical */
@media (min-width: 520px) {
  .radio-group {
    flex-direction: row !important;
    flex-wrap: wrap;
  }
  .radio-group label {
    flex: 1 1 calc(50% - 8px);
    min-width: 140px;
  }
}

/* Bug visual V5: garante que o texto do radio não seja cortado
   e o fundo selecionado seja legível com alto contraste. */
.radio-group label:has(input:checked) {
  background: linear-gradient(135deg, #fff4ea, #fff) !important;
  color: var(--marrom-dark) !important;
  border-color: var(--terracota) !important;
  box-shadow: inset 0 0 0 1.5px var(--terracota), 0 2px 8px rgba(192,107,62,0.12) !important;
}
.radio-group input[type="radio"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transform: none !important; /* garante que não pegue translateZ */
}
.radio-group label {
  line-height: 1.35;
  font-size: 0.95rem;
  min-height: 44px;           /* área de clique confortável */
}

/* Bug: textarea de observação ficava pequena demais */
#f-obs {
  min-height: 80px;
  resize: vertical;
}

/* Bug: erros saindo do container no mobile */
.error {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Bug: modal-panel em telas altas centraliza melhor */
.modal-panel {
  margin: auto 16px;
}

/* Ajuste fino: o botão de finalizar NO mobile drawer não precisa pulsar demais */
@media (max-width: 1023px) {
  .btn-checkout-hero:not(:disabled) {
    animation-duration: 3.5s;
  }
}

/* ============================================================
   ================== V6 — CORREÇÕES FINAIS ==================
   1) Radios legíveis (contraste forte — bug texto invisível)
   2) Performance: desativa observers/animações em checkout
   3) Carrinho flutuante SEMPRE visível em mobile/tablet
   4) Adaptação tablets (portrait e landscape)
   5) Safe-area + z-index coerentes
   ============================================================ */

/* ---------- 1) RADIOS do checkout — CONTRASTE FORTE ---------- */
/* Reseta conflitos anteriores com especificidade alta e !important pontual */
#checkout-form .radio-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
@media (min-width: 520px) {
  #checkout-form .radio-group {
    flex-direction: row;
    flex-wrap: wrap;
  }
  #checkout-form .radio-group label {
    flex: 1 1 calc(50% - 10px);
    min-width: 150px;
  }
}
#checkout-form .radio-group label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: #ffffff !important;
  color: var(--marrom-dark) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 12px !important;
  cursor: pointer;
  font-size: 0.97rem;
  font-weight: 500;
  line-height: 1.3;
  min-height: 48px;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
  box-shadow: none;
}
#checkout-form .radio-group label:hover {
  border-color: var(--terracota-soft) !important;
  background: var(--creme-3) !important;
}
/* SELECIONADO — fundo creme claro, texto marrom escuro, borda terracota grossa */
#checkout-form .radio-group label:has(input:checked) {
  background: linear-gradient(135deg, #FFF1E0, #FFFBF2) !important;
  color: var(--marrom-dark) !important;
  border-color: var(--terracota) !important;
  box-shadow: inset 0 0 0 1.5px var(--terracota), 0 3px 10px rgba(192,107,62,0.14) !important;
  font-weight: 600;
}
#checkout-form .radio-group input[type="radio"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--terracota);
  margin: 0;
  transform: none !important;
}

/* ---------- 2) PERFORMANCE: corta tudo que pesa durante checkout ---------- */
body.checkout-open,
body.modal-open {
  /* nada de parallax, fly, reveal animation durante formulário */
}
body.checkout-open .bg-leaves,
body.modal-open .bg-leaves {
  display: none !important;
}
body.checkout-open .product-card,
body.modal-open .product-card {
  animation: none !important;
  transition: none !important;
}
body.checkout-open .btn-checkout-hero,
body.modal-open .btn-checkout-hero {
  animation: none !important;
}
/* Desliga o pulse do botão inteiramente quando estiver em formulário/modal */
body.checkout-open *,
body.modal-open .modal * {
  animation-play-state: paused !important;
}
/* Libera apenas animações essenciais do próprio modal */
body.checkout-open .modal,
body.checkout-open .modal-panel,
body.modal-open .modal,
body.modal-open .modal-panel {
  animation-play-state: running !important;
}
/* Inputs do checkout sem will-change — evita layers GPU desnecessárias */
#checkout-form input,
#checkout-form textarea,
#checkout-form select {
  contain: layout style;
}

/* ---------- 3) CARRINHO FLUTUANTE — SEMPRE VISÍVEL MOBILE/TABLET ---------- */
/* Com itens: fixo no topo-direito como pill */
@media (max-width: 1023px) {
  .cart-toggle:not(.is-empty) {
    position: fixed !important;
    left: auto !important;
    right: 14px !important;
    top: calc(14px + env(safe-area-inset-top, 0px)) !important;
    bottom: auto !important;
    z-index: 55 !important;
    display: flex !important;
    padding: 10px 16px;
    min-height: 48px;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    font-size: 0.95rem;
    border-radius: 999px !important;
    box-shadow: 0 8px 24px rgba(192,107,62,0.4) !important;
    visibility: visible;
    animation: cartPulse 2.4s ease-in-out infinite;
  }
  @keyframes cartPulse {
    0%, 100% { box-shadow: 0 12px 32px rgba(192,107,62,0.45), 0 4px 14px rgba(0,0,0,0.18); }
    50%      { box-shadow: 0 16px 40px rgba(192,107,62,0.60), 0 6px 18px rgba(0,0,0,0.22); }
  }
  /* Vazio: faixa discreta na parte inferior */
  .cart-toggle.is-empty {
    position: fixed !important;
    bottom: 0 !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
    z-index: 55 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    min-height: 48px;
    margin: 0 !important;
    font-size: 0.88rem;
    font-weight: 500;
    color: rgba(255,255,255,0.85) !important;
    background: rgba(94,60,39,0.72) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 -2px 12px rgba(94,60,39,0.18) !important;
    letter-spacing: 0.03em;
    pointer-events: none;
  }
  .cart-toggle.is-empty .cart-count,
  .cart-toggle.is-empty .cart-total {
    display: none;
  }
  .cart-toggle.is-empty .cart-label-text {
    font-size: 0;
  }
  .cart-toggle.is-empty .cart-label-text::after {
    content: 'Carrinho vazio';
    font-size: 0.88rem;
  }
  .cart-toggle.is-empty .cart-icon {
    font-size: 1rem;
    opacity: 0.7;
  }
  /* Quando modal/checkout abre, esconde o cart-toggle para não atrapalhar */
  body.checkout-open .cart-toggle,
  body.modal-open .cart-toggle {
    display: none !important;
  }
}

/* Padding top para conteúdo não ficar atrás do botão (agora no topo) */
@media (max-width: 1023px) {
  main.container { padding-top: 88px; padding-bottom: 20px; }
}
@media (max-width: 520px) {
  main.container { padding-top: 80px; padding-bottom: 16px; }
}

/* Tablet portrait: força mostrar botão carrinho (override das regras antigas) */
@media (min-width: 521px) and (max-width: 1023px) {
  .cart-toggle {
    top: calc(18px + env(safe-area-inset-top)) !important;
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    min-width: 340px;
  }
  .cart-toggle:not(.is-empty) {
    animation: cartPulseTablet 2.6s ease-in-out infinite;
  }
  @keyframes cartPulseTablet {
    0%, 100% { transform: translateX(-50%) scale(1); box-shadow: 0 12px 32px rgba(192,107,62,0.45), 0 4px 14px rgba(0,0,0,0.18); }
    50%      { transform: translateX(-50%) scale(1.02); box-shadow: 0 16px 42px rgba(192,107,62,0.60); }
  }
}

/* ---------- 4) GARANTIR que [hidden] no desktop continue funcionando ---------- */
@media (min-width: 1024px) {
  /* Carrinho agora universal - sem sidebar fixa no desktop */
}

/* ---------- 5) Quando botão está oculto por [hidden], respeitar ---------- */
/* No mobile queremos que apareça mesmo com hidden pra UX, mas o JS controla.
   O JS agora NUNCA marca hidden=true em mobile, só em desktop. */
.cart-toggle[hidden] { display: none !important; }

/* ---------- 6) Reforço visual do botão "Finalizar pelo WhatsApp" no drawer ---------- */
.cart-footer .btn-checkout-hero {
  font-weight: 700;
  letter-spacing: 0.3px;
}

/* ---------- 7) Fix modal-panel: melhor espaço/scroll em telas pequenas ---------- */
@media (max-width: 520px) {
  .modal-panel {
    margin: 0;
    max-height: 100dvh;
    height: 100dvh;
    border-radius: 0;
    border-top: 5px solid var(--terracota);
  }
  .modal-body {
    padding: 16px;
    gap: 12px;
  }
  .modal-header {
    padding: 12px 16px;
  }
  /* Botões do modal empilham no mobile e ganham mais destaque */
  .modal-actions {
    flex-direction: column-reverse;
    gap: 10px;
  }
  .modal-actions .btn {
    width: 100%;
    min-width: auto;
  }
  .modal-actions .btn-primary {
    min-height: 52px;
    font-size: 1rem;
  }
}

/* ---------- 8) Remove checkoutPulse global; deixa só estático bonito ---------- */
.btn-checkout-hero:not(:disabled) {
  animation: none !important;
}
.btn-checkout-hero:not(:disabled):hover {
  box-shadow: 0 14px 30px rgba(192,107,62,0.55), 0 4px 12px rgba(0,0,0,0.15) !important;
}

/* ---------- 9) TEXTAREA observação com placeholder mais legível ---------- */
#f-obs::placeholder {
  color: var(--muted);
  opacity: 0.85;
}
#f-obs {
  color: var(--text);
  background: #fff;
  font-family: inherit;
}

/* ---------- 10) Input de nome: garantir contraste ---------- */
#checkout-form input[type="text"],
#checkout-form input[type="tel"],
#checkout-form input[type="number"],
#checkout-form textarea {
  background: #fff;
  color: var(--text);
  font-size: 1rem;
  min-height: 46px;
}
#checkout-form input:focus,
#checkout-form textarea:focus {
  box-shadow: 0 0 0 3px rgba(192,107,62,0.18);
}

/* ============================================================
   ================ V7 — CORREÇÃO DEFINITIVA =================
   OBJETIVOS (pedidos do cliente, textual):
   1) Botão "Ver cardápio / carrinho" SEMPRE visível no TOPO
      (canto superior DIREITO), nunca mais rodapé.
   2) Modal "Finalizar pedido" SEM DELAY — zero animações pesadas
      enquanto o form está aberto.
   3) Adaptado para mobile E tablets.
   4) Máxima especificidade com !important para vencer V6/V5.
   ============================================================ */

/* ---------- 1) CART TOGGLE — AGORA É FAB FIXO NO TOPO-DIREITO ---------- */
/* Aplica em TODA largura até o desktop (onde vira sidebar). */
@media (max-width: 1023px) {
  .cart-toggle,
  .cart-toggle.is-empty {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 10px) !important;
    right: 10px !important;
    left: auto !important;
    bottom: auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    transform: none !important;
    padding: 10px 14px !important;
    min-height: 46px !important;
    border-radius: 999px !important;
    font-size: 0.92rem !important;
    gap: 8px !important;
    background: linear-gradient(135deg, var(--terracota) 0%, var(--terracota-dark) 100%) !important;
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(192,107,62,0.40) !important;
    z-index: 100 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    animation: none !important;
  }

  /* Esconde elementos internos redundantes para compactar */
  .cart-toggle .cart-icon {
    font-size: 1.05rem !important;
  }
  .cart-toggle .cart-label-text {
    /* Em mobile compacta para "Carrinho", em tablet mostra inteiro */
    display: inline !important;
  }
  .cart-toggle .cart-count {
    background: #fff !important;
    color: var(--terracota-dark) !important;
    min-width: 22px;
    height: 22px;
    padding: 0 7px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    border-radius: 999px !important;
  }
  .cart-toggle .cart-total {
    font-weight: 700 !important;
    font-size: 0.88rem !important;
    white-space: nowrap;
  }

  /* Quando vazio: totalmente convidativo (count e total escondidos) */
  .cart-toggle.is-empty .cart-count,
  .cart-toggle.is-empty .cart-total {
    display: none !important;
  }
  .cart-toggle.is-empty {
    background: linear-gradient(135deg, #E08A5B 0%, var(--terracota) 100%) !important;
  }

  /* MICRO pulse só quando tem item — chama atenção sem irritar */
  .cart-toggle:not(.is-empty)::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 0 rgba(192,107,62,0.55);
    animation: cartRingPulseV7 2.2s ease-out infinite;
    pointer-events: none;
  }
  @keyframes cartRingPulseV7 {
    0%   { box-shadow: 0 0 0 0 rgba(192,107,62,0.55); }
    70%  { box-shadow: 0 0 0 12px rgba(192,107,62,0); }
    100% { box-shadow: 0 0 0 0 rgba(192,107,62,0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .cart-toggle:not(.is-empty)::after { animation: none !important; }
  }

  /* Celulares pequenos: esconde o texto longo e mostra ícone + contador + valor */
  @media (max-width: 420px) {
    .cart-toggle .cart-label-text {
      /* Mostra só quando VAZIO, para convidar */
      display: none !important;
    }
    .cart-toggle.is-empty .cart-label-text {
      display: inline !important;
      font-size: 0.85rem !important;
    }
    .cart-toggle {
      padding: 9px 12px !important;
      min-height: 42px !important;
      gap: 6px !important;
    }
  }

  /* Tablet: mantém tudo visível, bonito */
  @media (min-width: 640px) and (max-width: 1023px) {
    .cart-toggle {
      padding: 11px 18px !important;
      min-height: 48px !important;
      font-size: 0.98rem !important;
    }
  }

  /* Remove o padding-bottom exagerado do main — botão não fica mais embaixo */
  main.container { padding-bottom: 30px !important; }
}

/* Garante que no mobile o .cart-toggle NUNCA fica com `hidden` aplicado
   visualmente quando o JS esqueceu de tirar (ele deve aparecer vazio também). */
@media (max-width: 1023px) {
  .cart-toggle[hidden] { display: none !important; }
}

/* Exceção: quando checkout está aberto, realmente esconde */
@media (max-width: 1023px) {
  body.checkout-open .cart-toggle,
  body.modal-open .cart-toggle,
  body.cart-open .cart-toggle {
    display: none !important;
  }
}

/* Back-to-top: reposiciona para canto inferior sem conflitar com o FAB superior */
@media (max-width: 1023px) {
  .back-to-top {
    right: 14px !important;
    bottom: calc(14px + env(safe-area-inset-bottom)) !important;
  }
}

/* Header: cria espaço à direita para não colidir com o FAB */
@media (max-width: 1023px) {
  .site-header .header-inner {
    padding-right: 60px !important;
  }
}
@media (max-width: 420px) {
  .site-header .header-inner {
    padding-right: 54px !important;
  }
}

/* ---------- 2) MODAL DE CHECKOUT — ZERO DELAY (performance) ---------- */
/* (a) Remove blur caríssimo do backdrop no mobile */
@media (max-width: 1023px) {
  .modal-backdrop {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    animation: none !important;
  }
  .modal-panel {
    animation: none !important;
  }
  /* Oculta o fundo completamente no mobile para performance máxima */
  .modal-backdrop {
    background: #fff !important;
    opacity: 1 !important;
  }
}

/* (b) Trava todas as animações/observers do resto da página */
body.checkout-open,
body.modal-open {
  /* Congela folhas decorativas e oculta o main para aliviar o paint */
}
body.checkout-open main,
body.modal-open main {
  display: none !important;
}
body.checkout-open .bg-leaves,
body.modal-open .bg-leaves {
  display: none !important;
}
/* Sem animation-play-state: paused (causa reflow) — usa animation:none direto */
body.checkout-open *,
body.modal-open *:not(.modal):not(.modal *) {
  animation: none !important;
}
/* Mas mantém transitions essenciais do form (border/box-shadow nos inputs) */
body.checkout-open #checkout-form input,
body.checkout-open #checkout-form textarea,
body.checkout-open #checkout-form select,
body.modal-open #checkout-form input,
body.modal-open #checkout-form textarea,
body.modal-open #checkout-form select {
  animation: none !important;
  transition: border-color .12s linear, box-shadow .12s linear !important;
}

/* (c) Remove will-change e translateZ dos inputs — criava camadas GPU desnecessárias */
#checkout-form input,
#checkout-form textarea,
#checkout-form select {
  will-change: auto !important;
  transform: none !important;
  backface-visibility: visible !important;
}

/* (d) Modal panel: renderização isolada e scroll suave */
.modal-panel {
  contain: layout paint style !important;
  transform: translateZ(0);
}
.modal-body {
  -webkit-overflow-scrolling: touch;
  contain: layout paint style;
}

/* (e) Remove ripple dentro do checkout se por acaso escapar */
body.checkout-open .ripple,
body.modal-open .ripple {
  display: none !important;
}

/* (f) Pausa parallax/tilt das folhas duplamente via CSS */
body.checkout-open .bg-leaf,
body.modal-open .bg-leaf {
  animation: none !important;
  transform: none !important;
  transition: none !important;
  will-change: auto !important;
}

/* ---------- 3) BOTÕES DO MODAL — feedback instantâneo ---------- */
body.checkout-open .btn,
body.modal-open .btn,
body.checkout-open .btn-primary,
body.modal-open .btn-primary,
body.checkout-open .btn-ghost,
body.modal-open .btn-ghost {
  transition: background-color .1s linear, box-shadow .1s linear !important;
}

/* ---------- 4) Inputs focáveis sem delay visual ---------- */
body.checkout-open input:focus,
body.modal-open input:focus,
body.checkout-open textarea:focus,
body.modal-open textarea:focus {
  outline: 2px solid var(--terracota) !important;
  outline-offset: 1px !important;
}

/* ---------- 5) CART TOGGLE no DESKTOP permanece oculto (sidebar ativa) ---------- */
@media (min-width: 1024px) {
  body.has-cart-sidebar .cart-toggle {
    display: none !important;
  }
}

/* ---------- 6) Safe-area refinado para iPhones com notch ---------- */
@supports (padding: env(safe-area-inset-top)) {
  @media (max-width: 1023px) {
    .cart-toggle {
      top: calc(env(safe-area-inset-top, 0px) + 10px) !important;
    }
  }
}

/* ---------- 7) Header sticky precisa ficar abaixo do FAB em z-index ---------- */
.site-header { z-index: 30; }
@media (max-width: 1023px) {
  .cart-toggle { z-index: 55 !important; }
  .cart-backdrop { z-index: 59; }
  .cart-drawer { z-index: 60; }
  .modal { z-index: 80; }
}

/* ---------- 8) Fix: fotos e cards NÃO re-animam durante checkout ---------- */
body.checkout-open .product-card,
body.modal-open .product-card,
body.checkout-open .reveal-in,
body.modal-open .reveal-in {
  animation: none !important;
  transform: none !important;
  opacity: 1 !important;
  transition: none !important;
}

/* ---------- 9) Corpo do modal não cria novas camadas em cada scroll ---------- */
.modal-body { will-change: auto; }

/* ---------- 10) Smooth-scroll do container do modal sem jank ---------- */
#checkout-modal .modal-panel {
  overscroll-behavior: contain;
}

/* ---------- 11) Checkout bottom safe-area ---------- */
@media (max-width: 520px) {
  #checkout-form .modal-actions {
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }
}

/* ---------- 12) O botão "Finalizar pelo WhatsApp" do drawer:
                   em mobile/tablet fica fixo no rodapé do drawer ---------- */
.cart-drawer .cart-footer {
  position: sticky;
  bottom: 0;
  background: var(--creme);
  z-index: 2;
}

/* ---------- 13) Foco visível no FAB ---------- */
.cart-toggle:focus-visible {
  outline: 3px solid var(--oliva);
  outline-offset: 3px;
}

/* ============================================================
   ============= FIM DO BLOCO V7 DE CORREÇÕES ================
   ============================================================ */

/* ============================================================
   === CARRINHO INTELIGENTE — OVERRIDE FINAL (max priority) ===
   Quando vazio: só botão/faixa. Quando tem itens: drawer pleno.
   ============================================================ */

/* Mobile/tablet: vazio = faixa fina no rodapé */
@media (max-width: 1023px) {
  .cart-toggle.is-empty {
    position: fixed !important;
    bottom: 0 !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
    transform: none !important;
    min-height: 46px !important;
    padding: 10px 20px !important;
    background: rgba(94,60,39,0.82) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow: 0 -2px 14px rgba(94,60,39,0.20) !important;
    justify-content: center !important;
    gap: 8px !important;
    font-size: 0.88rem !important;
    color: rgba(255,255,255,0.80) !important;
    pointer-events: none !important;
    z-index: 100 !important;
    animation: none !important;
  }
  .cart-toggle.is-empty::after {
    display: none !important;
    animation: none !important;
  }
  .cart-toggle.is-empty .cart-count,
  .cart-toggle.is-empty .cart-total {
    display: none !important;
  }
  .cart-toggle.is-empty .cart-icon {
    font-size: 1rem !important;
    opacity: 0.75 !important;
  }
  .cart-toggle.is-empty .cart-label-text {
    font-size: 0 !important;
  }
  .cart-toggle.is-empty .cart-label-text::after {
    content: 'Carrinho vazio' !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em !important;
  }
}

/* Desktop: vazio = pequeno badge discreto no canto inferior direito */
@media (min-width: 1024px) {
  .cart-toggle.is-empty {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    border-radius: 999px !important;
    transform: none !important;
    min-height: 40px !important;
    padding: 8px 18px !important;
    background: rgba(94,60,39,0.78) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    box-shadow: 0 4px 16px rgba(94,60,39,0.22) !important;
    justify-content: center !important;
    gap: 6px !important;
    font-size: 0.82rem !important;
    color: rgba(255,255,255,0.78) !important;
    pointer-events: none !important;
    z-index: 100 !important;
    animation: none !important;
    display: inline-flex !important;
  }
  .cart-toggle.is-empty::after {
    display: none !important;
    animation: none !important;
  }
  .cart-toggle.is-empty .cart-count,
  .cart-toggle.is-empty .cart-total {
    display: none !important;
  }
  .cart-toggle.is-empty .cart-icon {
    font-size: 0.9rem !important;
    opacity: 0.72 !important;
  }
  .cart-toggle.is-empty .cart-label-text {
    font-size: 0 !important;
  }
  .cart-toggle.is-empty .cart-label-text::after {
    content: 'Carrinho vazio' !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
  }
}

/* Quando checkout/modal aberto: esconde o toggle em qualquer estado */
body.checkout-open .cart-toggle,
body.modal-open .cart-toggle {
  display: none !important;
}

/* ============================================================
   ================ V8 — CARRINHO iFOOD MOBILE =================
   OBJETIVOS:
   1) Mobile/Tablet (<1024px): quando TEM itens no carrinho, o
      #cart-toggle vira uma BARRA FIXA INFERIOR estilo iFood
      (largura total, mostrando itens + total + botão "Ver carrinho").
   2) Mobile/Tablet VAZIO: mantém o FAB compacto no topo-direito
      convidando a escolher ("Ver cardápio / carrinho").
   3) Ao adicionar item, o drawer NÃO abre mais sozinho — usuário
      clica na barra para abrir o resumo completo.
   4) Desktop (≥1024px): inalterado (sidebar fixa continua como está).
   ============================================================ */

/* Por padrão, esconde o texto "mobile-only" em todas as telas */
.cart-label-text-mobile { display: none; }

@media (max-width: 1023px) {

  /* ========== ESTADO COM ITENS → BARRA INFERIOR iFOOD ========== */
  .cart-toggle.has-items {
    /* Sobrescreve o FAB do topo (V7) e vira barra inferior full-width */
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) 16px !important;
    min-height: 64px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    background: linear-gradient(135deg, var(--terracota) 0%, var(--terracota-dark) 100%) !important;
    color: #fff !important;
    font-size: 1rem !important;
    box-shadow: 0 -6px 20px rgba(94,60,39,0.28), 0 -2px 6px rgba(0,0,0,0.10) !important;
    z-index: 55 !important;
    animation: cartBarSlideUp 0.32s cubic-bezier(0.16,1,0.3,1) !important;
    border-top: 1px solid rgba(255,255,255,0.12) !important;
  }

  @keyframes cartBarSlideUp {
    from { transform: translateY(100%); opacity: 0.6; }
    to   { transform: translateY(0);    opacity: 1; }
  }

  /* Desliga o anel de pulse do V7 na barra inferior (ficava feio ocupando tela) */
  .cart-toggle.has-items::after {
    display: none !important;
    animation: none !important;
  }

  /* Ícone + contagem, agrupados à esquerda */
  .cart-toggle.has-items .cart-icon {
    font-size: 1.35rem !important;
    flex-shrink: 0 !important;
  }

  .cart-toggle.has-items .cart-label {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .cart-toggle.has-items .cart-count {
    background: #fff !important;
    color: var(--terracota-dark) !important;
    min-width: 26px !important;
    height: 26px !important;
    padding: 0 9px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.85rem !important;
    font-weight: 800 !important;
    border-radius: 999px !important;
    flex-shrink: 0 !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
  }

  /* Esconde o texto longo e mostra "Ver carrinho" quando a barra está com itens */
  .cart-toggle.has-items .cart-label-text {
    display: none !important;
  }
  .cart-toggle.has-items .cart-label-text-mobile {
    display: inline !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Total bem destacado à direita + seta sutil */
  .cart-toggle.has-items .cart-total {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    position: relative !important;
    padding-right: 18px !important;
  }
  .cart-toggle.has-items .cart-total::after {
    content: '›';
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-52%);
    font-size: 1.4rem;
    font-weight: 400;
    opacity: 0.85;
    line-height: 1;
  }

  /* ========== ESTADO VAZIO → FAB compacto no topo (já tratado em V7) ==========
     O bloco V7 acima já estiliza .cart-toggle (sem .has-items) como FAB.
     Aqui só garantimos que .cart-label-text-mobile fique escondido quando vazio. */
  .cart-toggle.is-empty .cart-label-text-mobile {
    display: none !important;
  }

  /* Evita que o conteúdo da página fique oculto atrás da barra inferior.
     Só adiciona padding quando existe carrinho com itens (via body.cart-has-items
     — opcional, ver JS). Fallback: sempre reserva espaço quando a barra aparece. */
  body:has(.cart-toggle.has-items) main.container {
    padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body:has(.cart-toggle.has-items) .back-to-top {
    bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Quando o drawer está aberto, esconde a barra inferior (drawer tem seu próprio botão de finalizar) */
  body.cart-open .cart-toggle.has-items {
    display: none !important;
  }
}

/* Desktop: barra inferior NUNCA aparece (a sidebar assume) */
@media (min-width: 1024px) {
  .cart-toggle.has-items {
    display: none !important;
  }
}