:root {
  --rosa: #f4b8c4;
  --rosa-escuro: #e08aa0;
  --chocolate: #5b3a29;
  --chocolate-claro: #8a6249;
  --creme: #fdf6f0;
  --creme-2: #f6e9dd;
  --texto: #3d2b21;
  --branco: #ffffff;
  --sombra: 0 8px 24px rgba(91, 58, 41, 0.12);
  --sombra-hover: 0 16px 32px rgba(91, 58, 41, 0.20);
  --raio: 14px;
  --transicao: cubic-bezier(0.4, 0, 0.2, 1);
  --header-h: 84px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  color: var(--texto);
  background: var(--creme);
  line-height: 1.6;
  max-width: 100%;
  overflow-x: hidden;
}

img, picture, svg, video { max-width: 100%; height: auto; display: block; }
.card-img, .product-thumb, .product-image { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

.container { width: min(1200px, 92%); margin: 0 auto; }

.btn {
  display: inline-block;
  background: var(--rosa-escuro);
  color: var(--branco);
  padding: 14px 32px;
  border: none;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.3s var(--transicao), background 0.3s var(--transicao), box-shadow 0.3s var(--transicao);
  box-shadow: var(--sombra);
}
.btn:hover { background: var(--chocolate); transform: translateY(-3px); box-shadow: var(--sombra-hover); }
.btn-ghost { background: transparent; color: var(--chocolate); border: 2px solid var(--rosa-escuro); }
.btn-ghost:hover { background: var(--rosa-escuro); color: var(--branco); }

.section { padding: 70px 0; }
.section-title { text-align: center; font-size: 2.2rem; color: var(--chocolate); margin-bottom: 12px; }
.section-sub { text-align: center; color: var(--chocolate-claro); margin-bottom: 40px; }

/* ===== HEADER / NAVBAR ===== */
/* ===== HEADER ORIGINAL (logo que desce / slideInDown) ===== */
.site-top {
  position: relative; width: 100%;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  z-index: 1000; min-height: 80px;
}
.site-top.scrolled { min-height: 64px; box-shadow: 0 4px 18px rgba(0,0,0,0.12); }
.site-top .content {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; position: relative; min-height: 80px;
}
.site-top h1 { display: none; }

/* Logo que desce (slideInDown) sobre um card claro — barra limpa */
.site-top .brand {
  display: inline-flex; align-items: center; justify-content: center;
  background: #ffffff;
  border-radius: 16px; padding: 6px 18px;
  box-shadow: 0 4px 16px rgba(91,58,41,0.12);
  animation: slideInDown 1.4s var(--transicao) both;
}
.site-top .brand .logo { max-height: 88px; width: auto; display: block; }

/* Queda da logo (igual ao original: WOW slideInDown) — CSS puro, sem depender de CDN */
@keyframes slideInDown {
  from { transform: translateY(-160%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.site-top ul.nav { animation: fadeIn 1.2s var(--transicao) both; }
.site-top .medias { animation: fadeIn 1.4s var(--transicao) both; }

/* Menu */
.site-top ul.nav { display: flex; list-style: none; gap: 25px; margin-left: 0; }
.site-top ul.nav > li > a {
  text-decoration: none; color: var(--chocolate); font-size: 19px; font-weight: 700; transition: color 0.3s;
}
.site-top ul.nav > li > a:hover { color: var(--rosa-escuro); }

.header-actions { display: flex; align-items: center; gap: 15px; }
.medias a { color: var(--chocolate); font-size: 20px; margin-left: 8px; transition: opacity 0.2s; }
.medias a:hover { opacity: 0.8; }
.search-box { display: flex; border: 1px solid #ddd; border-radius: 20px; padding: 3px 10px; }
.search-box input { border: none; outline: none; font-family: inherit; font-size: 14px; }
.search-box button { border: none; background: none; color: var(--chocolate); cursor: pointer; }

/* Carrinho + hamburguer (mobile) */
.cart-icon {
  position: relative; display: flex; align-items: center; gap: 6px;
  background: var(--creme-2); padding: 10px 16px; border-radius: 50px; font-weight: 700; color: var(--chocolate);
}
.cart-icon .count {
  background: var(--rosa-escuro); color: #fff; border-radius: 50%;
  min-width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem;
}
.menu-toggle { display: none; background: none; border: none; font-size: 1.8rem; color: var(--chocolate); cursor: pointer; }

/* ===== HERO SLIDER ===== */
.hero { position: relative; height: 70vh; min-height: 460px; overflow: hidden; background: var(--creme-2); }
.slides { display: flex; height: 100%; transition: transform 0.8s var(--transicao); }
.slide { min-width: 100%; height: 100%; position: relative; }
.slide img { width: 100%; height: 100%; object-fit: cover; }
.slide .caption {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: var(--branco); background: rgba(61, 43, 33, 0.35); padding: 20px;
}
.slide .caption h2 { font-size: 2.6rem; text-shadow: 0 2px 8px rgba(0,0,0,0.4); margin-bottom: 18px; }
.hero-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.85); border: none;
  width: 50px; height: 50px; border-radius: 50%; font-size: 1.4rem; cursor: pointer; color: var(--chocolate); transition: background 0.3s; }
.hero-nav:hover { background: var(--branco); }
.hero-prev { left: 20px; } .hero-next { right: 20px; }
.hero-dots { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; }
.hero-dots button {
  width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--branco); background: transparent; cursor: pointer; transition: all 0.3s;
}
.hero-dots button.active { background: var(--branco); transform: scale(1.2); }

/* ===== CTA RÁPIDA ===== */
.cta-rapida { background: linear-gradient(135deg, var(--rosa), var(--rosa-escuro)); color: var(--branco); text-align: center; padding: 50px 0; }
.cta-rapida h2 { font-size: 2rem; margin-bottom: 16px; }
.cta-rapida .btn { background: var(--branco); color: var(--rosa-escuro); }
.cta-rapida .btn:hover { background: var(--chocolate); color: var(--branco); }

/* ===== CARROSSEL DE CATEGORIAS ===== */
.cat-carousel { display: flex; gap: 24px; overflow-x: auto; padding: 10px 4px 24px; scroll-snap-type: x mandatory; }
.cat-carousel::-webkit-scrollbar { height: 8px; }
.cat-carousel::-webkit-scrollbar-thumb { background: var(--rosa); border-radius: 10px; }
.cat-card {
  scroll-snap-align: start; flex: 0 0 260px; background: var(--branco); border-radius: var(--raio);
  overflow: hidden; box-shadow: var(--sombra); transition: transform 0.4s var(--transicao), box-shadow 0.4s var(--transicao); text-align: center;
}
.cat-card:hover { transform: translateY(-8px); box-shadow: var(--sombra-hover); }
.cat-card .img-wrap { width: 100%; aspect-ratio: 1/1; overflow: hidden; }
.cat-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--transicao); }
.cat-card:hover img { transform: scale(1.08); }
.cat-card h3 { padding: 16px; color: var(--chocolate); }

/* ===== GRID DE PRODUTOS ===== */
.prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 28px; }
.prod-card {
  background: var(--branco); border-radius: var(--raio); overflow: hidden; box-shadow: var(--sombra);
  transition: transform 0.4s var(--transicao), box-shadow 0.4s var(--transicao); display: flex; flex-direction: column;
}
.prod-card:hover { transform: translateY(-5px); box-shadow: var(--sombra-hover); }
.prod-card .img-wrap { aspect-ratio: 4/3; overflow: hidden; }
.prod-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--transicao); }
.prod-card:hover img { transform: scale(1.08); }
.prod-body { padding: 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.prod-body h3 { color: var(--chocolate); font-size: 1.2rem; }
.prod-desc { color: var(--chocolate-claro); font-size: 0.92rem; flex: 1; }
.prod-price { font-weight: 700; color: var(--rosa-escuro); font-size: 1.1rem; }
.prod-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.prod-form select, .prod-form input {
  padding: 8px 10px; border: 1px solid var(--creme-2); border-radius: 8px; font-size: 0.9rem; flex: 1; min-width: 0;
}
.prod-form select { flex: 1 1 100%; }
.prod-form .add-order { flex: 1 1 100%; }
.prod-form .lbl { font-size: .76rem; color: var(--chocolate-claro); align-self: center; white-space: nowrap; }
.qty { display: flex; align-items: center; border: 1px solid var(--creme-2); border-radius: 8px; overflow: hidden; }
.qty button { background: var(--creme-2); border: none; width: 30px; height: 36px; cursor: pointer; font-size: 1.1rem; color: var(--chocolate); }
.qty input { width: 44px; text-align: center; border: none; }

/* ===== NEWSLETTER ===== */
.newsletter { background: var(--chocolate); color: var(--branco); text-align: center; padding: 60px 0; }
.newsletter h2 { font-size: 1.9rem; margin-bottom: 8px; }
.newsletter p { margin-bottom: 24px; opacity: 0.9; }
.newsletter form { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.newsletter input { padding: 14px 20px; border-radius: 50px; border: none; width: min(360px, 90%); font-size: 1rem; }
.newsletter .btn { background: var(--rosa-escuro); }
.newsletter .btn:hover { background: var(--rosa); color: var(--chocolate); }

/* ===== FOOTER ===== */
.footer { background: var(--creme-2); color: var(--chocolate); padding: 50px 0 20px; }
.footer .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 30px; }
.footer h4 { margin-bottom: 14px; color: var(--rosa-escuro); }
.footer a:hover { color: var(--rosa-escuro); }
.footer .social a { display: inline-block; margin-right: 12px; font-weight: 600; }
.footer .copy { text-align: center; margin-top: 30px; padding-top: 18px; border-top: 1px solid rgba(91,58,41,0.15); font-size: 0.9rem; }

/* ===== QUEM SOMOS ===== */
.page-banner { height: 70vh; min-height: 460px; overflow: hidden; background: var(--creme-2); }
.page-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-text { max-width: 800px; margin: 0 auto; }
.about-text p { margin-bottom: 18px; font-size: 1.05rem; }
.about-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 30px; }
.about-gallery img { border-radius: var(--raio); box-shadow: var(--sombra); width: 100%; height: 100%; object-fit: cover; }

/* ===== CONTATO / PEDIDOS ===== */
.contact-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; }
.form-box { background: var(--branco); padding: 30px; border-radius: var(--raio); box-shadow: var(--sombra); }
.form-box label { display: block; margin: 14px 0 6px; font-weight: 600; color: var(--chocolate); }
.form-box input, .form-box textarea, .form-box select {
  width: 100%; padding: 12px 14px; border: 1px solid var(--creme-2); border-radius: 10px; font-size: 1rem; font-family: inherit;
}
.form-box textarea { resize: vertical; min-height: 120px; }
.hours-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.hours-table td { padding: 10px 6px; border-bottom: 1px solid var(--creme-2); }
.hours-table td:last-child { text-align: right; font-weight: 600; color: var(--chocolate); }
.map { border-radius: var(--raio); overflow: hidden; box-shadow: var(--sombra); margin-top: 16px; }

/* ===== CARRINHO / PEDIDO ===== */
.prod-form input[type="number"] { width: 64px; padding: 9px 8px; border: 1px solid var(--creme-2); border-radius: 8px; font-size: 0.9rem; text-align: center; }
.prod-form select.p-rec { padding: 9px 8px; border: 1px solid var(--creme-2); border-radius: 8px; font-size: 0.9rem; background: var(--branco); flex: 1; min-width: 0; }
.cart-table input.c-qty, .cart-table input.c-kg { width: 60px; padding: 7px 6px; border: 1px solid var(--creme-2); border-radius: 8px; font-size: 0.9rem; text-align: center; }
.cart-table input.c-kg { width: 64px; }
.cart-table { width: 100%; border-collapse: collapse; margin: 8px 0 18px; font-size: 0.92rem; }
.cart-table th, .cart-table td { padding: 10px 8px; border-bottom: 1px solid var(--creme-2); text-align: left; }
.cart-table th { color: var(--rosa-escuro); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; }
.cart-table .remover { background: none; border: none; color: var(--rosa-escuro); font-size: 1.1rem; cursor: pointer; }
.cart-total { font-size: 1.15rem; text-align: right; }
.cart-total strong { color: var(--rosa-escuro); }
.cart-empty { color: var(--chocolate-claro); padding: 10px 0; }
.info-block { background: var(--branco); padding: 26px; border-radius: var(--raio); box-shadow: var(--sombra); }

/* ===== WHATSAPP FLUTUANTE ===== */
.whatsapp-float {
  position: fixed; bottom: 24px; right: 24px; z-index: 1100; display: flex; align-items: flex-end; gap: 12px;
}
.whatsapp-btn {
  width: 60px; height: 60px; border-radius: 50%; background: #25d366; color: var(--branco);
  display: flex; align-items: center; justify-content: center; font-size: 1.8rem; cursor: pointer;
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.5); position: relative;
  animation: pulse 2s infinite var(--transicao);
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(37,211,102,0.5); }
  70% { box-shadow: 0 0 0 16px rgba(37,211,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}
.whatsapp-status { position: absolute; bottom: 2px; right: 2px; width: 14px; height: 14px; background: #25d366; border: 2px solid var(--branco); border-radius: 50%; }
.whatsapp-chat {
  background: var(--branco); border-radius: 14px; box-shadow: var(--sombra-hover); width: 280px; overflow: hidden;
  opacity: 0; visibility: hidden; transform: translateY(16px); transition: all 0.35s var(--transicao);
}
.whatsapp-chat.open { opacity: 1; visibility: visible; transform: translateY(0); }
.whatsapp-chat .head { background: #25d366; color: var(--branco); padding: 14px; font-weight: 700; }
.whatsapp-chat .body { padding: 14px; font-size: 0.92rem; color: var(--texto); }
.whatsapp-chat .body .msg { background: var(--creme-2); border-radius: 10px; padding: 10px; margin-bottom: 12px; }
.whatsapp-chat .btn { width: 100%; text-align: center; background: #25d366; }

/* ===== COOKIES ===== */
.cookie-banner {
  position: fixed; bottom: 0; left: 0; width: 100%; background: var(--chocolate); color: var(--branco);
  padding: 16px 0; z-index: 1200; display: flex; gap: 16px; align-items: center; justify-content: center; flex-wrap: wrap;
  transition: transform 0.4s var(--transicao);
}
.cookie-banner.hidden { transform: translateY(100%); }
.cookie-banner p { font-size: 0.9rem; max-width: 700px; }
.cookie-banner .btn { padding: 10px 22px; }
.cookie-banner .btn.btn-ghost { color: var(--branco); border-color: var(--branco); }
.cookie-banner .btn.btn-ghost:hover { background: var(--branco); color: var(--chocolate); }

/* ===== RESPONSIVO ===== */
@media (max-width: 900px) {
  .site-top ul.nav {
    position: fixed; top: 0; right: 0; width: 260px; height: 100vh;
    background: #fff; flex-direction: column; align-items: flex-start; padding: 24px; gap: 18px;
    transform: translateX(100%); transition: transform 0.4s var(--transicao); box-shadow: var(--sombra); z-index: 1200;
  }
  .site-top ul.nav.open { transform: translateX(0); }
  .header-actions .medias { display: none; }
  .menu-toggle { display: block; }
  .contact-grid { grid-template-columns: 1fr; }
  .slide .caption h2 { font-size: 1.8rem; }
}

/* ===== FASE 4: PIX, MANUTENÇÃO, RESPONSIVO ===== */
.manutencao-bar { background: #b33939; color: #fff; padding: 12px 16px; text-align: center; font-weight: 700; font-size: .95rem; }
.pix-box { border: 1px solid #ecd9c6; border-radius: 12px; padding: 14px 16px; background: #fffaf4; }
.pix-box h4 { margin: 0 0 8px; color: #55363f; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.panel { overflow-x: auto; }

/* Miniaturas de produtos nas tabelas do admin */
.table-prod img, .product-thumb, .table-prod td:first-child img {
  width: 48px; height: 48px; max-width: none; object-fit: cover; border-radius: 6px; flex: 0 0 auto;
}

@media (max-width: 768px) {
  .btn, .cart-icon, .menu-toggle { min-height: 44px; }
  .qty button, .qty input { min-width: 44px; min-height: 44px; }
  .form-box .btn, #waOrder { min-height: 44px; }
  .table-pedidos th, .table-pedidos td, .cart-table th, .cart-table td { padding: 8px; }
  .slide-cap h2 { font-size: 1.4rem !important; }
  .nav a { min-height: 44px; display: flex; align-items: center; }
  /* Formulários do admin empilham em coluna única */
  .row2 { flex-direction: column; }
  .row2 > div { min-width: 0; width: 100%; }
  .sec-card { padding: 14px 12px; }
  /* Grid de produtos: 1 coluna em telas estreitas, 2 colunas compactas acima */
  .prod-grid { grid-template-columns: 1fr; gap: 18px; }
  /* Carrinho com rolagem isolada no mobile */
  #cartItems { overflow-x: auto; }
  .cart-table { font-size: 0.82rem; }
  .section { padding: 48px 0; }
  .cta-rapida { padding: 40px 0; }
  .cta-rapida h2 { font-size: 1.6rem; }
  .newsletter { padding: 44px 0; }
}

@media (min-width: 481px) and (max-width: 768px) {
  /* 2 colunas compactas no tablet/desktop pequeno */
  .prod-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  /* Banners não estouram nem cortam textos */
  .hero { height: auto; min-height: 0; }
  .hero .slides { height: 250px; }
  .slide { height: 100%; }
  .slide img { max-height: 250px; object-fit: cover; }
  .page-banner { height: 250px; min-height: 0; }
  .cat-carousel { gap: 14px; }
  .cat-card { flex: 0 0 200px; }
  .about-gallery { grid-template-columns: 1fr; }
  .footer .cols { grid-template-columns: 1fr; }
  .whatsapp-chat { width: 240px; }
}

/* Modal / diálogos genéricos (caso adicionados) ocupam a tela no celular */
.modal, dialog {
  width: 95%; max-width: 95vw; max-height: 90vh; overflow-y: auto;
}
@media (max-width: 480px) {
  .modal, dialog { width: 100vw; }
}