/* Castanha Cearense - Estilos Principais */

/* Reset e Base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* Cores baseadas na identidade visual */
  --verde-escuro: #1a4d2e;
  --verde-medio: #2d5f3f;
  --laranja: #f59e0b;
  --laranja-escuro: #d97706;
  --bege: #f5e6d3;
  --marrom: #8b4513;
  --marrom-claro: #a0522d;
  --branco: #ffffff;
  --cinza-claro: #f3f4f6;
  --cinza-medio: #6b7280;
  --cinza-escuro: #1f2937;
  --preto: #000000;

  /* Sombras */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
  color: var(--cinza-escuro);
  background-color: var(--branco);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Header */
.header {
  background: linear-gradient(
    135deg,
    var(--verde-escuro) 0%,
    var(--verde-medio) 100%
  );
  color: var(--branco);
  padding: 1.5rem 0;
  box-shadow: var(--shadow-md);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-content {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  position: relative;
}

.logo {
  display: flex;
  align-items: center;
  justify-self: center;
  grid-column: 2;
}

.logo-link {
  display: inline-flex;
  align-items: center;
}

.logo-image {
  height: 56px;
  width: auto;
  display: block;
}

.nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-self: end;
  grid-column: 3;
  flex-wrap: nowrap;
}

.nav a {
  color: var(--branco);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s;
}

.nav a:hover {
  color: var(--laranja);
}

/* Botão Voltar Mobile - Oculto por padrão (desktop) */
.btn-voltar-mobile {
  display: none;
}

/* Botão Hambúrguer */
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-around;
  width: 30px;
  height: 30px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 1001;
  position: relative;
}

.hamburger-line {
  width: 100%;
  height: 3px;
  background-color: var(--branco);
  border-radius: 3px;
  transition: all 0.3s ease;
  transform-origin: center;
}

.menu-toggle.active .hamburger-line:nth-child(1) {
  transform: rotate(45deg) translate(8px, 8px);
}

.menu-toggle.active .hamburger-line:nth-child(2) {
  opacity: 0;
}

.menu-toggle.active .hamburger-line:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -7px);
}

/* Overlay do menu */
.menu-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 999;
  opacity: 0;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.menu-overlay.active {
  display: block;
  opacity: 1;
}

/* Search Container */
.search-container {
  position: relative;
  display: flex;
  align-items: center;
}

.search-input {
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid transparent;
  border-radius: 25px;
  padding: 0.6rem 2.5rem 0.6rem 1rem;
  font-size: 0.95rem;
  color: var(--cinza-escuro);
  width: 250px;
  transition: all 0.3s ease;
  outline: none;
}

.search-input::placeholder {
  color: var(--cinza-medio);
}

.search-input:focus {
  border-color: var(--laranja);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
  width: 280px;
}

.search-icon {
  position: absolute;
  right: 1rem;
  color: var(--cinza-medio);
  pointer-events: none;
  font-size: 1rem;
}

.search-input:focus + .search-icon {
  color: var(--laranja);
}

/* Search Dropdown Results */
.search-results-dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  background: white;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  max-height: 400px;
  overflow-y: auto;
  z-index: 1000;
  display: none;
}

.search-results-dropdown.show {
  display: block;
}

.search-result-item {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: background 0.2s;
  border-bottom: 1px solid var(--cinza-claro);
}

.search-result-item:hover,
.search-result-item.selected {
  background: var(--bege);
}

.search-result-item:last-child {
  border-bottom: none;
}

.search-result-image {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 4px;
  margin-right: 1rem;
  flex-shrink: 0;
}

.search-result-info {
  flex: 1;
  min-width: 0;
}

.search-result-name {
  font-weight: 500;
  color: var(--cinza-escuro);
  font-size: 0.9rem;
  margin-bottom: 0.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

.search-result-category {
  font-size: 0.8rem;
  color: var(--cinza-medio);
}

.search-result-price {
  font-weight: 600;
  color: var(--verde-escuro);
  font-size: 0.9rem;
  margin-left: 1rem;
  flex-shrink: 0;
}

.search-result-arrow {
  color: var(--cinza-medio);
  margin-left: 0.5rem;
  flex-shrink: 0;
}

.search-no-results {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--cinza-medio);
}

.search-no-results i {
  font-size: 2rem;
  opacity: 0.5;
  margin-bottom: 0.5rem;
  display: block;
}

.search-view-all {
  padding: 1rem;
  text-align: center;
  background: var(--verde-escuro);
  color: white;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
  border-radius: 0 0 8px 8px;
}

.search-view-all:hover {
  background: var(--verde-medio);
}

/* Menu do Cliente (Dropdown) */
.cliente-menu-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.btn-cliente-menu {
  background: transparent;
  border: none;
  border-radius: 25px;
  padding: 0.6rem 1rem;
  color: var(--branco);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  font-weight: 600;
  position: relative;
  white-space: nowrap;
}

.btn-cliente-menu:hover {
  background: transparent;
  transform: translateY(-2px);
}

.btn-cliente-menu i:first-child {
  font-size: 1.3rem;
  flex-shrink: 0;
}

.cliente-menu-links {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  align-items: flex-start;
}

.cliente-menu-link {
  color: var(--branco);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.2s ease;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  z-index: 1;
}

.cliente-menu-link:hover {
  color: var(--bege);
  text-decoration: underline;
}

.cliente-menu-text {
  display: inline-block;
}

.cliente-menu-arrow {
  font-size: 0.8rem;
  transition: transform 0.3s ease;
}

.btn-cliente-menu.active .cliente-menu-arrow {
  transform: rotate(180deg);
}

.cliente-menu-dropdown {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  background: var(--branco);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  min-width: 220px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  z-index: 1000;
  overflow: hidden;
  pointer-events: none;
}

.cliente-menu-dropdown.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.cliente-menu-header {
  padding: 15px 20px;
  background: linear-gradient(135deg, var(--verde-escuro), var(--verde-medio));
  color: var(--branco);
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 0.95rem;
}

.cliente-menu-header i {
  font-size: 1.3rem;
}

.cliente-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  color: var(--verde-escuro) !important;
  text-decoration: none;
  transition: all 0.2s ease;
  border-bottom: 1px solid var(--cinza-claro);
  font-size: 0.95rem;
  font-weight: 500;
}

.cliente-menu-item:last-child {
  border-bottom: none;
}

.cliente-menu-item:hover {
  background: var(--cinza-claro);
  color: var(--verde-escuro) !important;
  padding-left: 25px;
}

.cliente-menu-item span {
  color: var(--verde-escuro) !important;
}

.cliente-menu-item i {
  width: 20px;
  text-align: center;
  color: var(--verde-medio);
  font-size: 1rem;
}

.cliente-menu-item:hover i {
  color: var(--verde-escuro);
}

.cliente-menu-item:hover span {
  color: var(--verde-escuro) !important;
}

.cliente-menu-divider {
  height: 1px;
  background: var(--cinza-claro);
  margin: 5px 0;
}

.btn-carrinho {
  background: var(--laranja);
  border: none;
  color: var(--branco);
  padding: 0.75rem 1.5rem;
  border-radius: 50px;
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s;
  position: relative;
  flex-shrink: 0;
}

.btn-carrinho:hover {
  background: var(--laranja-escuro);
  transform: scale(1.05);
}

.carrinho-count {
  background: var(--marrom);
  color: var(--branco);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: bold;
}

/* Hero Section */
.hero {
  background: linear-gradient(135deg, var(--bege) 0%, var(--cinza-claro) 100%);
  padding: 4rem 0;
  text-align: center;
}

.hero-content h2 {
  font-size: 3rem;
  color: var(--verde-escuro);
  margin-bottom: 1rem;
  font-weight: bold;
}

.hero-content p {
  font-size: 1.25rem;
  color: var(--marrom);
  margin-bottom: 2rem;
}

/* Botões */
.btn {
  display: inline-block;
  padding: 0.75rem 2rem;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s;
  border: none;
  cursor: pointer;
  font-size: 1rem;
}

.btn-primary {
  background: var(--laranja);
  color: var(--branco);
}

.btn-primary:hover {
  background: var(--laranja-escuro);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.btn-secondary {
  background: var(--cinza-medio);
  color: var(--branco);
}

.btn-whatsapp {
  background: #25d366;
  color: var(--branco);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.125rem;
}

.btn-whatsapp:hover {
  background: #1ea952;
}

/* Seções */
.section-title {
  text-align: center;
  font-size: 2.5rem;
  color: var(--verde-escuro);
  margin-bottom: 3rem;
  position: relative;
  padding-bottom: 1rem;
}

.section-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: var(--laranja);
  border-radius: 2px;
}

.promocoes,
.destaques,
.produtos,
.sobre,
.contato {
  padding: 4rem 0;
}

.produtos {
  background: var(--cinza-claro);
}

.sobre {
  background: var(--bege);
  text-align: center;
}

.sobre p {
  max-width: 800px;
  margin: 0 auto;
  font-size: 1.125rem;
  color: var(--marrom-claro);
}

/* Grid de Produtos */
.produtos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.tipo-castanha {
  margin-bottom: 3rem;
}

.tipo-title {
  font-size: 2rem;
  color: var(--marrom);
  margin-bottom: 1.5rem;
  padding-left: 1rem;
  border-left: 4px solid var(--laranja);
}

/* Card de Produto - Novo Design Baseado na Imagem */
.produto-card {
  background: #f8f9fa; /* Cinza claro como na imagem */
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  position: relative;
  /* max-width: 320px; */
  width: 100%;
  margin: 0;
  height: 100%; /* Garante que todos os cards tenham a mesma altura */
  cursor: pointer; /* Indica que o card é clicável */
}

.produto-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.produto-card.destaque-card {
  border: none;
  position: relative;
}

.badge-destaque {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: var(--laranja);
  color: var(--branco);
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: bold;
  z-index: 10;
}

.produto-imagem-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.produto-card .produto-imagem-container {
  width: 100%;
  height: 280px;
  background: white;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  border-radius: 16px 16px 0 0;
}

.produto-card img {
  width: 100%;
  height: 110%;
  object-fit: contain;
  object-position: center;
  transition: transform 0.3s ease;
}

.produto-card .produto-imagem-container:hover img {
  transform: scale(1.05);
}

.galeria-indicador {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  background: rgba(0, 0, 0, 0.7);
  color: var(--branco);
  padding: 0.25rem 0.5rem;
  border-radius: 12px;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.produto-info {
  padding: 1.75rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: white;
  border-radius: 0 0 16px 16px;
  min-height: 0; /* Permite que o flex funcione corretamente */
  pointer-events: auto; /* Garantir que seja clicável */
}

.categoria-tag {
  display: inline-block;
  background: #2e7d32; /* Verde como na imagem */
  color: white;
  padding: 3px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  margin-bottom: 0.75rem;
  width: fit-content;
  font-weight: 500;
  font-family: sans-serif;
  flex-shrink: 0;
}

.produto-info h3 {
  font-size: 1.125rem;
  color: #1f2937;
  margin-bottom: 1rem;
  font-weight: 600;
  line-height: 1.25;
  flex-shrink: 0;
}

.produto-link-titulo {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s;
}

.produto-link-titulo:hover {
  color: var(--laranja);
  text-decoration: underline;
}

.produto-info p {
  color: #6b7280;
  font-size: 0.9rem;
  margin-bottom: 1.25rem;
  flex-grow: 0;
  flex-shrink: 0;
  line-height: 1.5;
}

/* Container para conteúdo variável (preço, economia, countdown) */
.produto-info .produto-footer,
.produto-info .economia,
.produto-info .countdown-timer {
  flex-shrink: 0;
  margin-bottom: 0.5rem;
}

.produto-footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 1rem;
  padding-top: 0;
  border: none;
  gap: 8px;
}

.peso {
  color: var(--cinza-medio);
  font-size: 0.875rem;
}

.preco {
  font-size: 1.6rem;
  font-weight: bold;
  color: var(--marrom);
}

.preco-a-partir {
  font-size: 0.875rem;
  font-weight: normal;
  color: var(--cinza-medio);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: block;
  margin-bottom: 0.25rem;
  line-height: 1.2;
}

.btn-add-carrinho {
  width: 100%;
  background: #f59e0b; /* Laranja como na imagem */
  color: white;
  border: none;
  padding: 12px 16px;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 1.125rem;
  margin-top: auto; /* Empurra o botão para o final */
  box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
  text-decoration: none;
  flex-shrink: 0; /* Não encolhe */
  position: relative;
  z-index: 10; /* Garantir que o botão fique acima do card */
  pointer-events: auto; /* Garantir que o botão seja clicável */
}

.btn-add-carrinho:hover {
  background: #d97706;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(245, 158, 11, 0.4);
  color: white;
  text-decoration: none;
}

.btn-esgotado {
  width: 100%;
  background: var(--cinza-medio);
  color: var(--branco);
  border: none;
  padding: 0.75rem;
  border-radius: 8px;
  font-weight: 600;
  cursor: not-allowed;
  margin-top: auto; /* Empurra o botão para o final */
  position: relative;
  z-index: 10; /* Garantir que o botão fique acima do card */
  pointer-events: auto; /* Garantir que o botão seja clicável */
  flex-shrink: 0; /* Não encolhe */
}

/* Carrinho Lateral */
.carrinho-lateral {
  position: fixed;
  right: -450px;
  top: 0;
  width: 450px;
  height: 100vh;
  background: var(--branco);
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
  transition: right 0.3s ease;
  z-index: 1002; /* Acima da bottom nav (1001) */
  display: flex;
  flex-direction: column;
}

.carrinho-lateral.aberto {
  right: 0;
}

/* Overlay para fechar carrinho ao clicar fora */
.carrinho-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1001; /* Entre bottom nav e carrinho */
  opacity: 0;
  transition: opacity 0.3s ease;
  cursor: pointer;
}

.carrinho-overlay.show {
  display: block;
  opacity: 1;
}

.carrinho-header {
  background: var(--verde-escuro);
  color: var(--branco);
  padding: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.carrinho-header h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-fechar {
  background: transparent;
  border: none;
  color: var(--branco);
  font-size: 2rem;
  cursor: pointer;
  line-height: 1;
}

.carrinho-itens {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
}

.carrinho-vazio {
  text-align: center;
  color: var(--cinza-medio);
  padding: 3rem 1rem;
}

.carrinho-item {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.625rem;
  padding-top: 2rem;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  align-items: flex-start;
  transition: all 0.2s ease;
  margin-bottom: 0.5rem;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  position: relative;
}

.carrinho-item > .item-imagem {
  flex-shrink: 0;
}

.carrinho-item > .item-info {
  flex: 1;
  min-width: 0;
}

.carrinho-item > .item-controles {
  width: 100%;
}

.carrinho-item:hover {
  background-color: #f9fafb;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  border-color: #d1d5db;
}

.item-imagem {
  flex-shrink: 0;
}

.item-imagem img,
.item-imagem .placeholder {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
}

.item-imagem .placeholder {
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  font-size: 1.5rem;
}

.item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.item-info h4 {
  font-size: 0.875rem;
  color: #1f2937;
  margin: 0;
  line-height: 1.3;
  word-wrap: break-word;
  font-weight: 600;
}

.item-categoria,
.item-peso {
  /* font-size: 0.7rem;
  color: var(--cinza-medio);
  margin-bottom: 0.1rem; */
  display: none;
}

.item-preco {
  font-weight: 600;
  color: #1f2937;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.item-preco > span {
  font-size: 0.9rem;
  color: #1f2937;
  font-weight: 700;
}

.item-preco .preco-promocional {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.item-preco .preco-original {
  font-size: 0.75rem;
  text-decoration: line-through;
  color: #9ca3af;
  font-weight: 400;
}

.item-preco .preco-desconto {
  font-size: 0.9rem;
  color: #16a34a;
  font-weight: 700;
}

.item-preco .economia-item {
  /* font-size: 0.65rem;
  color: var(--cor-desconto-sucesso);
  background: #f0fdf4;
  padding: 2px 6px;
  border-radius: 4px;
  margin-top: 0.2rem; */
  display: none;
}

.item-controles {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  width: 100%;
  padding-top: 0.5rem;
  border-top: 1px solid #e5e7eb;
  margin-top: 0.25rem;
}

.item-quantidade {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: #f3f4f6;
  padding: 0.2rem;
  border-radius: 6px;
}

.btn-qty {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  color: #374151;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  transition: all 0.2s ease;
}

.btn-qty:hover {
  background: #f59e0b;
  border-color: #f59e0b;
  color: #ffffff;
}

.btn-qty:active {
  transform: scale(0.95);
}

.item-quantidade span {
  min-width: 20px;
  text-align: center;
  font-weight: 600;
  font-size: 0.85rem;
  color: #1f2937;
}

.item-subtotal {
  font-weight: 700;
  color: #1f2937;
  font-size: 0.95rem;
  white-space: nowrap;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

.item-subtotal .preco-promocional {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 0.4rem;
}

.item-subtotal .preco-original {
  font-size: 0.8rem;
  text-decoration: line-through;
  color: #9ca3af;
  font-weight: 400;
}

.item-subtotal .preco-desconto {
  font-size: 0.95rem;
  color: #16a34a;
  font-weight: 700;
}

.btn-remover {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: transparent;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0.25rem;
  border-radius: 4px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  z-index: 1;
}

.btn-remover:hover {
  background: #fee2e2;
  color: #dc2626;
}

.carrinho-footer {
  border-top: 1px solid #e5e7eb;
  padding: 1.25rem;
  background: #f9fafb;
}

.carrinho-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid #e5e7eb;
  font-size: 1.25rem;
  font-weight: 700;
  color: #1f2937;
}

.total-valor {
  font-size: 1.75rem;
  font-weight: 700;
  color: #f59e0b;
}

.aviso-frete {
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 4px;
  padding: 0.4rem 0.6rem;
  margin-bottom: 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.aviso-frete i {
  color: #856404;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.aviso-frete small {
  color: #856404;
  font-size: 0.75rem;
  line-height: 1.3;
}

/* Variações de Produto - Design da Imagem */
.variacao-selector {
  margin-bottom: 0.5rem;
  padding: 0;
  background: transparent;
  border: none;
}

.variacao-label {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
  color: #374151;
  margin-bottom: 0.4rem;
  display: block;
  font-family: sans-serif;
}

.variacoes-opcoes {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.variacao-opcao {
  flex: 1;
  min-width: 60px;
  padding: 8px 6px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background: white;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
}

.variacao-opcao:hover {
  border-color: #f59e0b;
  /* background: #fffbeb; */
}

.variacao-opcao.ativa {
  border-color: #f59e0b;
  background: #f59e0b;
  color: white;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
}

.variacao-opcao.sem-estoque {
  opacity: 0.6;
  cursor: not-allowed;
  background: #f8f9fa;
  border-color: #e9ecef;
  position: relative;
}

.variacao-opcao.sem-estoque::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(107, 114, 128, 0.1);
  border-radius: 6px;
  z-index: 1;
}

/* .variacao-opcao.sem-estoque::after {
  content: "ESGOTADO";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: #000000;
  color: white;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.55rem;
  z-index: 3;
  pointer-events: none;
} */

/* Ajustar posicionamento do conteúdo da variação esgotada */
.variacao-opcao.sem-estoque > * {
  position: relative;
  z-index: 1;
}

.variacao-opcao.readonly {
  opacity: 0.4;
  cursor: not-allowed;
  background: #f9fafb;
  border-color: #d1d5db;
}

/* Removido - preços não são mais exibidos nas variações */

.variacao-peso {
  font-weight: 600;
  font-size: 0.85rem;
  text-align: center;
  width: 100%;
}

/* Estilos de preço e estoque removidos - não são mais exibidos */

.produto-footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 1rem;
  padding-top: 0;
  border: none;
  gap: 8px;
}

.preco-selecionado {
  font-size: 1.5rem;
  font-weight: 700;
  color: #388e3c;
  width: 100%;
}

/* Estilos de preço das variações removidos - não são mais exibidos */

/* Responsivo */
@media (max-width: 768px) {
  .variacoes-opcoes {
    flex-direction: row;
    gap: 0.3rem;
  }

  .variacao-opcao {
    min-width: auto;
    flex: 1;
    padding: 0.5rem;
  }

  /* Estilos de preço das variações removidos */
}

.btn-finalizar {
  width: 100%;
  background: #25d366;
  color: var(--branco);
  border: none;
  padding: 1rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1.125rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.3s;
}

.btn-finalizar:hover {
  background: #1ea952;
}

/* Contato */
.contato {
  background: var(--verde-escuro);
  color: var(--branco);
  text-align: center;
}

.contato .section-title {
  color: var(--branco);
}

.contato .section-title::after {
  background: var(--laranja);
}

.contato-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.contato-info p {
  font-size: 1.125rem;
}

/* Footer */
.footer {
  background: var(--cinza-escuro);
  color: var(--branco);
  padding: 2rem 0;
  text-align: center;
}

.footer a {
  color: var(--laranja);
  text-decoration: none;
}

.footer a:hover {
  text-decoration: underline;
}

/* Barra de Navegação Inferior Mobile (Bottom Nav) */
.bottom-nav {
  display: none !important; /* Oculto por padrão (desktop) */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(
    135deg,
    var(--verde-escuro) 0%,
    var(--verde-medio) 100%
  );
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
  z-index: 1001; /* Acima do carrinho lateral (1000) */
  padding: 0.5rem 0;
  padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  pointer-events: auto; /* Garantir que seja clicável */
}

/* Garantir que bottom-nav esteja oculta em desktop */
@media (min-width: 769px) {
  .bottom-nav {
    display: none !important;
  }

  body {
    padding-bottom: 0 !important;
  }

  .footer {
    margin-bottom: 0 !important;
    padding-bottom: 2rem !important;
  }
}

.bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.5rem;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  font-size: 0.7rem;
  font-weight: 500;
  min-height: 60px;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  pointer-events: auto !important;
  z-index: 10;
  touch-action: manipulation; /* Melhorar resposta ao toque no mobile */
}

.bottom-nav-item i {
  font-size: 1.3rem;
  transition: all 0.3s ease;
  pointer-events: none; /* Não bloquear cliques */
}

.bottom-nav-item span {
  font-size: 0.7rem;
  white-space: nowrap;
  pointer-events: none; /* Não bloquear cliques */
}

.bottom-nav-item:active {
  transform: scale(0.95);
}

.bottom-nav-item.active {
  color: var(--laranja);
}

.bottom-nav-item.active i {
  transform: scale(1.1);
  color: var(--laranja);
}

.bottom-nav-badge {
  position: absolute;
  top: 0.2rem;
  right: 50%;
  transform: translateX(calc(50% + 8px));
  background: var(--laranja);
  color: var(--branco);
  border-radius: 10px;
  min-width: 18px;
  height: 18px;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  border: 2px solid var(--verde-escuro);
  padding: 0 4px;
  line-height: 1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  pointer-events: none !important; /* Não interferir com o clique do botão */
  z-index: 2;
}

.bottom-nav-badge:empty {
  display: none;
}

/* Modal de Busca Mobile */
.search-modal-mobile {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 2000;
  opacity: 0;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.search-modal-mobile.active {
  display: flex;
  opacity: 1;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
}

.search-modal-content {
  background: white;
  width: 100%;
  height: 100%;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  animation: slideUp 0.3s ease;
  display: flex;
  flex-direction: column;
}

@keyframes slideUp {
  from {
    transform: translateY(50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.search-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--cinza-claro);
  background: linear-gradient(
    135deg,
    var(--verde-escuro) 0%,
    var(--verde-medio) 100%
  );
  color: white;
}

.search-modal-header h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
}

.search-modal-close {
  background: transparent;
  border: none;
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
  border-radius: 50%;
  width: 36px;
  height: 36px;
}

.search-modal-close:active {
  transform: scale(0.9);
  background: rgba(255, 255, 255, 0.1);
}

.search-modal-body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.search-modal-input-container {
  position: relative;
  padding: 1.5rem;
  padding-bottom: 1rem;
  flex-shrink: 0;
}

.search-input-mobile {
  width: 100%;
  padding: 1rem 3rem 1rem 1rem;
  border: 2px solid var(--cinza-claro);
  border-radius: 12px;
  font-size: 1rem;
  outline: none;
  transition: all 0.3s ease;
}

.search-input-mobile:focus {
  border-color: var(--laranja);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
}

.search-icon-mobile {
  position: absolute;
  right: 2.5rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--cinza-medio);
  font-size: 1.1rem;
  pointer-events: none;
}

.search-input-mobile:focus + .search-icon-mobile {
  color: var(--laranja);
}

/* Categorias */
.search-categories-container {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--cinza-claro);
  display: none;
  flex-shrink: 0;
}

.search-categories-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.category-item-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  background: var(--bege);
  border-radius: 12px;
  text-decoration: none;
  color: var(--cinza-escuro);
  font-weight: 500;
  transition: all 0.2s ease;
}

.category-item-link:hover {
  background: var(--laranja);
  color: white;
  transform: translateX(4px);
}

.category-item-link i {
  color: var(--laranja);
  font-size: 0.85rem;
  transition: color 0.2s ease;
}

.category-item-link:hover i {
  color: white;
}

/* Sugestões */
.search-suggestions-container {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--cinza-claro);
  display: none;
  flex-shrink: 0;
}

.search-suggestions-header {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--cinza-medio);
  margin-bottom: 0.75rem;
}

.search-suggestions-items {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.suggestion-item-product {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border: none;
  background: var(--bege);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  width: 100%;
  color: var(--cinza-escuro);
}

.suggestion-item-product:hover {
  background: var(--laranja);
  color: white;
  transform: translateX(4px);
}

.suggestion-image {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid var(--cinza-claro);
  flex-shrink: 0;
}

.suggestion-info {
  flex: 1;
  min-width: 0;
}

.suggestion-name {
  font-weight: 500;
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
  word-wrap: break-word;
}

.suggestion-price {
  font-size: 0.85rem;
  color: var(--laranja);
  font-weight: 600;
}

.suggestion-item-product:hover .suggestion-price {
  color: white;
}

.suggestion-item-product i {
  color: var(--laranja);
  font-size: 0.85rem;
  flex-shrink: 0;
}

.suggestion-item-product:hover i {
  color: white;
}

/* Histórico */
.search-history-container {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--cinza-claro);
  display: none;
  flex-shrink: 0;
}

.search-history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.search-history-header span {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--cinza-medio);
}

.clear-history-btn {
  background: transparent;
  border: none;
  color: var(--cinza-medio);
  cursor: pointer;
  padding: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
  font-size: 0.85rem;
}

.clear-history-btn:hover {
  color: var(--laranja);
}

.search-history-items {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.history-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border: none;
  background: var(--bege);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  width: 100%;
  color: var(--cinza-escuro);
  font-size: 0.9rem;
}

.history-item:hover {
  background: var(--laranja);
  color: white;
}

.history-item i {
  color: var(--laranja);
  font-size: 0.85rem;
}

.history-item:hover i {
  color: white;
}

/* Resultados */
.search-results-dropdown-mobile {
  flex: 1;
  overflow-y: auto;
  z-index: 2001;
  display: none;
  padding: 0.5rem 0;
  min-height: 0;
}

.search-results-dropdown-mobile.show {
  display: block;
}

.search-loading {
  padding: 2rem;
  text-align: center;
  color: var(--cinza-medio);
}

.search-loading i {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  color: var(--laranja);
}

.search-no-results-mobile {
  padding: 2rem;
  text-align: center;
  color: var(--cinza-medio);
}

.search-no-results-mobile i {
  font-size: 2rem;
  margin-bottom: 0.75rem;
  color: var(--cinza-claro);
}

.search-no-results-mobile p {
  margin: 0.5rem 0;
  font-weight: 500;
  color: var(--cinza-escuro);
}

.search-no-results-mobile small {
  font-size: 0.85rem;
  color: var(--cinza-medio);
}

.search-result-item-mobile {
  display: flex;
  align-items: flex-start;
  padding: 1rem 1.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  border-bottom: 1px solid var(--cinza-claro);
  gap: 1rem;
}

.search-result-item-mobile:hover,
.search-result-item-mobile.selected {
  background: var(--bege);
  transform: translateX(4px);
}

.search-result-item-mobile:last-child {
  border-bottom: none;
}

.search-result-image-wrapper {
  position: relative;
  flex-shrink: 0;
}

.search-result-image {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid var(--cinza-claro);
}

.result-badge-destaque {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--laranja);
  color: white;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.search-result-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.search-result-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.search-result-name {
  font-weight: 500;
  color: var(--cinza-escuro);
  font-size: 0.95rem;
  line-height: 1.4;
  flex: 1;
  min-width: 0;
  word-wrap: break-word;
}

.relevancia-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

.relevancia-badge.alta {
  background: var(--verde-medio);
  color: white;
}

.relevancia-badge.media {
  background: var(--laranja);
  color: white;
}

.search-result-category {
  font-size: 0.8rem;
  color: var(--cinza-medio);
  font-weight: 500;
}

.search-result-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.search-result-price {
  font-weight: 600;
  color: var(--laranja);
  font-size: 1rem;
}

.search-result-arrow {
  color: var(--cinza-medio);
  font-size: 0.9rem;
  transition: transform 0.2s ease;
}

.search-result-item-mobile:hover .search-result-arrow {
  transform: translateX(4px);
  color: var(--laranja);
}

.search-results-more {
  padding: 1rem 1.5rem;
  text-align: center;
  background: var(--bege);
  border-top: 1px solid var(--cinza-claro);
}

.search-results-more span {
  display: block;
  font-weight: 500;
  color: var(--cinza-escuro);
  margin-bottom: 0.25rem;
}

.search-results-more small {
  font-size: 0.8rem;
  color: var(--cinza-medio);
}

/* Notificação / Toast */
.notificacao {
  position: fixed;
  top: 20px;
  right: 20px;
  background: var(--verde-escuro);
  color: var(--branco);
  padding: 1rem 1.5rem;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  z-index: 10001;
  animation: slideInToast 0.3s ease;
  max-width: 90%;
  min-width: 280px;
  font-size: 14px;
  line-height: 1.5;
}

.notificacao.success {
  background: var(--verde-escuro);
  border-left: 4px solid var(--verde-medio);
}

.notificacao.error {
  background: #dc3545;
  border-left: 4px solid #c82333;
}

.notificacao.warning {
  background: #ffc107;
  color: #856404;
  border-left: 4px solid #ff9800;
}

.notificacao.info {
  background: #17a2b8;
  border-left: 4px solid #138496;
}

.notificacao.fade-out {
  animation: fadeOutToast 0.3s ease;
}

.notificacao i {
  font-size: 18px;
  flex-shrink: 0;
}

.notificacao span {
  flex: 1;
}

@keyframes slideIn {
  from {
    transform: translateX(400px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes slideInToast {
  from {
    transform: translateX(400px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fadeOutToast {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(400px);
    opacity: 0;
  }
}

/* Responsivo - Toast em mobile */
@media (max-width: 768px) {
  .notificacao {
    top: 10px;
    right: 10px;
    left: 10px;
    max-width: calc(100% - 20px);
    min-width: auto;
    font-size: 13px;
    padding: 0.875rem 1.25rem;
  }
}

/* Responsivo */
/* Modal de Galeria */
.galeria-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  z-index: 10000;
  animation: fadeIn 0.3s ease;
}

.galeria-modal.aberto {
  display: flex;
  align-items: center;
  justify-content: center;
}

.galeria-conteudo {
  max-width: 90%;
  max-height: 90%;
  position: relative;
}

.galeria-imagem-principal {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 8px;
}

.galeria-btn-fechar {
  position: absolute;
  top: -40px;
  right: 0;
  background: transparent;
  border: none;
  color: var(--branco);
  font-size: 2.5rem;
  cursor: pointer;
  transition: transform 0.2s;
  line-height: 1;
}

.galeria-btn-fechar:hover {
  transform: scale(1.2);
}

.galeria-btn-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.9);
  border: none;
  color: var(--verde-escuro);
  font-size: 2rem;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.galeria-btn-nav:hover {
  background: var(--branco);
  transform: translateY(-50%) scale(1.1);
}

.galeria-btn-prev {
  left: -60px;
}

.galeria-btn-next {
  right: -60px;
}

.galeria-miniaturas {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.galeria-miniatura {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.6;
  transition: all 0.3s;
  border: 2px solid transparent;
}

.galeria-miniatura:hover {
  opacity: 1;
}

.galeria-miniatura.ativa {
  opacity: 1;
  border-color: var(--laranja);
}

.galeria-info {
  text-align: center;
  color: var(--branco);
  margin-top: 1rem;
}

.galeria-info h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.galeria-info p {
  font-size: 0.9rem;
  opacity: 0.8;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Banner Carousel */
.banner-carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--cinza-escuro);
}

.carousel-container {
  position: relative;
  width: 100%;
  height: 600px;
  max-height: 85vh;
  overflow: hidden;
}

.carousel-slides {
  position: relative;
  width: 100%;
  height: 100%;
}

.carousel-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--cinza-escuro);
}

.carousel-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
}

/* Imagens de fundo para cada slide - REMOVIDO - agora aplicado dinamicamente via style inline */
/* .carousel-slide:nth-child(1) {
  background-image: linear-gradient(
      135deg,
      rgba(26, 77, 46, 0.7) 0%,
      rgba(45, 95, 63, 0.7) 100%
    ),
    url("../images/banners/banner1.jpg");
}

.carousel-slide:nth-child(2) {
  background-image: linear-gradient(
      135deg,
      rgba(139, 69, 19, 0.7) 0%,
      rgba(160, 82, 45, 0.7) 100%
    ),
    url("../images/banners/banner2.jpg");
}

.carousel-slide:nth-child(3) {
  background-image: linear-gradient(
      135deg,
      rgba(245, 158, 11, 0.7) 0%,
      rgba(217, 119, 6, 0.7) 100%
    ),
    url("../images/banners/banner3.jpg");
} */

.carousel-slide.active {
  opacity: 1;
  z-index: 1;
}

.carousel-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1;
}

.carousel-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--branco);
  padding: 2rem;
  max-width: 900px;
  margin: 0 auto;
}

.carousel-title {
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
  line-height: 1.2;
}

.carousel-subtitle {
  font-size: 1.5rem;
  margin-bottom: 2rem;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
  line-height: 1.4;
}

.carousel-content .btn {
  font-size: 1.1rem;
  padding: 1rem 2.5rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* Animações do Carousel */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInCarousel {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.carousel-slide.active .animate-slide-up {
  animation: slideUp 0.8s ease-out forwards;
}

.carousel-slide.active .animate-fade-in {
  animation: fadeInCarousel 1s ease-out 0.4s forwards;
  opacity: 0;
}

.carousel-slide.active .carousel-title {
  animation-delay: 0.2s;
}

.carousel-slide.active .carousel-subtitle {
  animation-delay: 0.4s;
}

/* Controles do Carousel */
.carousel-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.9);
  border: none;
  color: var(--verde-escuro);
  font-size: 1.5rem;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.carousel-control:hover {
  background: var(--branco);
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.carousel-control.prev {
  left: 2rem;
}

.carousel-control.next {
  right: 2rem;
}

/* Indicadores do Carousel */
.carousel-indicators {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 1rem;
  z-index: 10;
}

.carousel-indicators .indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--branco);
  background: transparent;
  cursor: pointer;
  transition: all 0.3s;
  padding: 0;
}

.carousel-indicators .indicator:hover {
  background: rgba(255, 255, 255, 0.5);
  transform: scale(1.2);
}

.carousel-indicators .indicator.active {
  background: var(--branco);
  width: 40px;
  border-radius: 6px;
}

/* Seção de Depoimentos/Avaliações */
.depoimentos {
  background: var(--cinza-claro);
  padding: 4rem 0;
}

.depoimentos-subtitulo {
  text-align: center;
  color: var(--cinza-medio);
  font-size: 1.1rem;
  margin-bottom: 3rem;
  margin-top: -1rem;
}

.depoimentos-carousel {
  position: relative;
  max-width: 800px;
  margin: 0 auto 3rem;
}

.depoimentos-container {
  position: relative;
  overflow: hidden;
  padding: 2rem 0;
}

.depoimentos-slides {
  position: relative;
  min-height: 350px;
}

.depoimento-card {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 700px;
  background: var(--branco);
  border-radius: 15px;
  padding: 2.5rem;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease-in-out;
  text-align: center;
}

.depoimento-card.active {
  opacity: 1;
  visibility: visible;
  animation: fadeInUp 0.6s ease-out;
  z-index: 1;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.depoimento-avatar {
  font-size: 4rem;
  color: var(--verde-escuro);
  margin-bottom: 1rem;
}

.depoimento-avatar i {
  display: inline-block;
  width: 80px;
  height: 80px;
  line-height: 80px;
  border-radius: 50%;
  background: var(--bege);
  color: var(--verde-escuro);
}

.depoimento-rating {
  display: flex;
  justify-content: center;
  gap: 0.3rem;
  margin-bottom: 1.5rem;
}

.depoimento-rating i {
  color: var(--laranja);
  font-size: 1.3rem;
}

.depoimento-texto {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--cinza-escuro);
  margin-bottom: 2rem;
  font-style: italic;
  position: relative;
}

.depoimento-texto::before {
  content: '"';
  font-size: 3rem;
  color: var(--laranja);
  opacity: 0.3;
  position: absolute;
  top: -20px;
  left: -10px;
  font-family: Georgia, serif;
}

.depoimento-autor h4 {
  font-size: 1.2rem;
  color: var(--verde-escuro);
  margin-bottom: 0.3rem;
  font-weight: 600;
}

.depoimento-local {
  color: var(--cinza-medio);
  font-size: 0.95rem;
}

/* Controles do Carousel de Depoimentos */
.depoimento-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--verde-escuro);
  border: none;
  color: var(--branco);
  font-size: 1.3rem;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.depoimento-control:hover {
  background: var(--verde-medio);
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.depoimento-control.prev {
  left: -60px;
}

.depoimento-control.next {
  right: -60px;
}

/* Indicadores dos Depoimentos */
.depoimento-indicators {
  position: relative;
  display: flex;
  gap: 0.8rem;
  justify-content: center;
  margin-top: 2rem;
}

.depoimento-indicators .dep-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--verde-escuro);
  background: transparent;
  cursor: pointer;
  transition: all 0.3s;
  padding: 0;
}

.depoimento-indicators .dep-indicator:hover {
  background: var(--verde-medio);
  transform: scale(1.2);
}

.depoimento-indicators .dep-indicator.active {
  background: var(--verde-escuro);
  width: 35px;
  border-radius: 5px;
}

/* Link para Google Reviews */
.avaliacoes-google {
  text-align: center;
  margin-top: 2rem;
}

.btn-google-reviews {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.9rem 2rem;
  background: var(--branco);
  color: var(--cinza-escuro);
  text-decoration: none;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s;
  box-shadow: var(--shadow-md);
  border: 2px solid transparent;
}

.btn-google-reviews:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: #4285f4;
  color: #4285f4;
}

.btn-google-reviews i {
  font-size: 1.3rem;
}

/* Responsivo */
@media (max-width: 768px) {
  /* Botão Voltar Mobile - Visível apenas em mobile */
  .btn-voltar-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    color: var(--branco);
    border: none;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    position: relative;
    z-index: 10;
    margin-right: 0.5rem;
  }

  .btn-voltar-mobile:hover {
    color: var(--laranja);
    transform: translateX(-3px);
    background: rgba(255, 255, 255, 0.1);
  }

  .btn-voltar-mobile:active {
    transform: translateX(-1px);
  }

  /* Header mobile */
  .header {
    position: sticky;
    top: 0;
    padding: 1rem 0;
  }

  .header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    position: relative;
  }

  /* Logo mobile - sempre centralizado na tela (posicionamento absoluto) */
  .logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
  }

  .logo-image {
    height: 48px;
  }

  /* Botão Voltar Mobile - Visível apenas em mobile */
  .btn-voltar-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    background: transparent;
    color: var(--branco);
    border: none;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    position: relative;
    z-index: 10;
    flex-shrink: 0;
    margin-right: 0.5rem;
  }

  .btn-voltar-mobile:hover {
    color: var(--cinza-medio);
    transform: translateX(-3px);
  }

  .btn-voltar-mobile:active {
    transform: translateX(-1px);
    color: var(--cinza-escuro);
  }

  /* Ocultar menu hambúrguer quando botão voltar estiver presente */
  .header-content:has(.btn-voltar-mobile) .menu-toggle {
    display: none !important;
  }

  /* Botão hambúrguer - visível no mobile, lado esquerdo (apenas se não houver botão voltar) */
  .menu-toggle {
    display: flex !important;
    flex-shrink: 0;
    z-index: 10;
  }

  /* Botão carrinho - sempre visível, lado direito */
  .btn-carrinho {
    flex-shrink: 0;
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
    z-index: 10;
  }

  .btn-carrinho i {
    font-size: 1rem;
  }

  .carrinho-count {
    width: 20px;
    height: 20px;
    font-size: 0.7rem;
  }

  /* Navegação mobile - menu lateral */
  .nav {
    position: fixed;
    top: 0;
    left: -100%;
    width: 85%;
    max-width: 320px;
    height: 100vh;
    background: linear-gradient(
      135deg,
      var(--verde-escuro) 0%,
      var(--verde-medio) 100%
    );
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 5rem 2rem 2rem;
    gap: 0;
    box-shadow: 5px 0 20px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* Scroll suave no iOS */
    display: flex; /* Mostrar quando o menu estiver ativo */
  }

  .nav.active {
    left: 0;
    display: flex !important; /* Garantir que apareça quando ativo */
  }

  /* Scrollbar personalizada para o menu mobile */
  .nav::-webkit-scrollbar {
    width: 6px;
  }

  .nav::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
  }

  .nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
  }

  .nav::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
  }

  /* Links do menu mobile - ocultar links de navegação (Produtos, Frete, Contato) */
  .nav-link:not(.nav-cliente-link) {
    display: none !important; /* Ocultar links de navegação no menu mobile */
  }

  /* Links do cliente no menu mobile */
  .nav-link.nav-cliente-link {
    width: 100%;
    padding: 1.2rem 0;
    font-size: 1.1rem;
    border-bottom: none !important;
    display: flex;
    transition: all 0.3s ease;
    color: var(--branco);
    text-decoration: none;
    font-weight: 500;
  }

  .nav-link.nav-cliente-link:first-child {
    margin-top: 0;
  }

  .nav-link.nav-cliente-link:hover,
  .nav-link.nav-cliente-link:active,
  .nav-link.nav-cliente-link:focus {
    color: var(--laranja);
    padding-left: 1rem;
    background: rgba(255, 255, 255, 0.05);
    outline: none;
  }

  /* Ocultar campo de busca no menu mobile */
  .nav .search-container {
    display: none !important;
  }

  /* Seção do Cliente no Menu Mobile (aparece no menu lateral quando aberto) */
  .nav-cliente-mobile {
    display: none; /* Oculto por padrão */
    width: 100%;
    order: 3;
    margin-top: 0;
    padding-top: 0;
  }
  
  /* Mostrar seção do cliente quando o menu estiver aberto */
  .nav.active .nav-cliente-mobile {
    display: block !important;
  }

  .nav-cliente-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 1rem 0;
    margin-bottom: 0.5rem;
    color: var(--branco);
    font-weight: 600;
    font-size: 1rem;
  }

  .nav-cliente-header i {
    font-size: 1.3rem;
    color: var(--branco);
  }

  .nav-cliente-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 1.2rem 0;
    font-size: 1.1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--branco);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
  }

  .nav-cliente-link i {
    width: 24px;
    text-align: center;
    font-size: 1.1rem;
    color: var(--branco);
  }

  .nav-cliente-link:hover,
  .nav-cliente-link:active,
  .nav-cliente-link:focus {
    color: var(--laranja);
    padding-left: 1rem;
    background: rgba(255, 255, 255, 0.05);
    outline: none;
  }

  .nav-cliente-link:hover i,
  .nav-cliente-link:active i,
  .nav-cliente-link:focus i {
    color: var(--laranja);
  }

  /* Ocultar menu do cliente desktop em mobile */
  .cliente-menu-wrapper {
    display: none !important;
  }

  .search-input {
    width: 100%;
    max-width: 100%;
    padding: 0.8rem 2.5rem 0.8rem 1rem;
    font-size: 1rem;
    background: rgba(255, 255, 255, 0.95);
  }

  .search-input:focus {
    width: 100%;
    border-color: var(--laranja);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.3);
  }

  .search-results-dropdown {
    left: 0;
    right: 0;
    max-height: 300px;
    margin-top: 0.5rem;
  }

  .search-result-item {
    padding: 0.8rem 1rem;
  }

  .search-result-image {
    width: 45px;
    height: 45px;
  }

  .search-result-name {
    font-size: 0.9rem;
    max-width: 180px;
  }

  .search-result-price {
    font-size: 0.85rem;
  }

  /* Barra de Navegação Inferior Mobile - Ativa apenas em mobile */
  .bottom-nav {
    display: flex !important;
    justify-content: space-around;
    align-items: center;
    flex-direction: row;
  }

  /* Garantir que bottom nav seja exibida mesmo com tema Black Friday */
  body.tema-black-friday .bottom-nav {
    display: flex !important;
  }

  /* Menu hambúrguer deve aparecer no mobile */
  .menu-toggle {
    display: flex !important;
  }

  /* Quando o menu lateral estiver aberto (classe .active), mostrar a navegação */
  .nav.active {
    display: flex !important;
    left: 0;
  }

  /* Quando o menu lateral estiver aberto, mostrar a seção do cliente */
  .nav.active .nav-cliente-mobile {
    display: block !important;
  }

  /* Ajustar padding do body para não ficar escondido atrás da bottom nav */
  body {
    padding-bottom: 70px;
  }

  /* Ajustar footer para não ficar escondido */
  .footer {
    margin-bottom: 70px;
    padding-bottom: calc(2rem + 70px);
  }

  /* Ajustar carrinho lateral para não ficar escondido */
  .carrinho-lateral {
    bottom: 0; /* Ocupar toda a altura */
    top: 0;
    z-index: 1002 !important; /* Acima da bottom nav */
  }

  .carrinho-lateral.aberto {
    right: 0 !important;
  }

  /* Ajustar header para não ter muito espaço quando bottom nav está ativa */
  .header {
    padding: 0.75rem 0;
  }

  /* Simplificar header no mobile */
  .header-content {
    gap: 0.5rem;
  }

  /* Logo menor no mobile com bottom nav */
  .logo-image {
    height: 40px;
  }

  /* Ocultar botão carrinho do header no mobile (usar apenas bottom nav) */
  .btn-carrinho {
    display: none !important;
  }

  /* Ocultar breadcrumb em dispositivos móveis */
  .breadcrumb {
    display: none !important;
  }
}

/* Garantir que botão carrinho apareça em desktop */
@media (min-width: 769px) {
  .btn-carrinho {
    display: flex !important;
  }

  /* Garantir que menu do cliente desktop apareça em desktop */
  .cliente-menu-wrapper {
    display: flex !important;
  }
  
  /* Ocultar seção do cliente mobile em desktop */
  .nav-cliente-mobile {
    display: none !important;
  }

  /* Ajustar layout do header em desktop */
  .header-content {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  /* Logo centralizado no desktop */
  .logo {
    justify-self: center;
    grid-column: 2;
  }

  /* Navegação com gap adequado */
  .nav {
    display: flex;
    align-items: center;
    gap: 2rem;
    justify-self: end;
    grid-column: 3;
  }

  /* Menu do Cliente no Mobile - Ordem natural do HTML será respeitada: Links → Busca → Menu → Carrinho */
  .cliente-menu-text {
    display: none;
  }
  
  .btn-cliente-menu {
    padding: 0.6rem;
    min-width: auto;
  }
  
  .cliente-menu-dropdown {
    right: 0;
    left: auto;
    min-width: 200px;
  }
  
  .nav .btn-carrinho {
    margin-left: 1rem;
    flex-shrink: 0;
  }
  
  .btn-cliente-menu {
    padding: 0.6rem;
    min-width: auto;
  }
  
  .cliente-menu-dropdown {
    right: 0;
    left: auto;
    min-width: 200px;
  }
  
  /* Garantir que nav e carrinho fiquem juntos à direita */
  .header-content {
    display: flex;
  }

  /* Logo à esquerda, nav e carrinho à direita */
  .logo {
    flex-shrink: 0;
  }

  /* Nav ocupa espaço disponível e empurra carrinho para direita */
  .nav {
    flex: 1;
    justify-content: flex-end;
  }
}

/* ==================== MOBILE - PADRONIZAÇÃO COMPLETA ==================== */
/* Continuação da media query mobile - produtos grid */
@media (max-width: 768px) {
  .container {
    padding: 0 12px;
  }

  .produtos-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }

  /* ===== HIERARQUIA VISUAL PADRONIZADA (Tablets ≤768px) =====
   * 
   * ESTRUTURA CSS GRID (6 linhas):
   * Linha 1 (auto): Categoria - 0.6rem
   * Linha 2 (auto): Título - 0.75rem
   * Linha 3 (60px): ÁREA FIXA para Variações OU Peso
   *   - Com variações: Botões (1kg, 500g, 250g) - 0.6rem
   *   - Sem variações: Peso centralizado - 0.7rem
   * Linha 4 (auto): PREÇO (sempre na mesma posição)
   *   - PREÇO: 0.85rem !important (PADRONIZADO - DESTAQUE)
   *   - Preço original riscado: 0.6rem !important
   * Linha 5 (1fr): ESPAÇO FLEXÍVEL (countdown se existir)
   * Linha 6 (auto): BOTÃO Adicionar - 0.7rem (sempre na mesma altura)
   * 
   * RESULTADO: Preços SEMPRE na linha 4 e BOTÕES SEMPRE na linha 6!
   */

  /* Otimizações para Cards de Produtos Mobile - UX/UI Melhorado */
  .produto-info {
    padding: 0.7rem; /* Padding reduzido para economizar espaço */
    display: grid;
    grid-template-rows: auto auto auto auto auto;
    /* categoria | título | preço | botão */
    gap: 0;
    min-height: 170px; /* Altura mínima reduzida */
  }

  .produto-card {
    min-width: 0;
    border-radius: 12px; /* Cantos mais arredondados para modernidade */
    display: flex;
    flex-direction: column;
    height: auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* Sombra mais suave */
    transition: all 0.3s ease;
  }
  
  .produto-card:active {
    transform: scale(0.98); /* Feedback tátil ao tocar */
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  }

  .produto-card .categoria-tag,
  .produto-info .categoria-tag {
    font-size: 0.65rem !important; /* Tamanho reduzido */
    padding: 3px 8px !important; /* Padding reduzido */
    margin-bottom: 0.4rem !important;
    border-radius: 12px; /* Mais arredondado */
    font-weight: 600; /* Mais peso */
    letter-spacing: 0.3px; /* Melhor legibilidade */
    height: 20px !important; /* Altura fixa apenas mobile */
  }

  .produto-info h3 {
    font-size: 1.1rem; /* Tamanho aumentado para melhor legibilidade */
    margin-bottom: 0.5rem;
    line-height: 1.3;
    min-height: 2.3em; /* Altura mínima ajustada */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 600; /* Mais destaque */
    color: #1f2937; /* Cor mais escura para contraste */
  }

  .produto-info p {
    display: none;
  }

  /* Ajustes para imagens - Melhor proporção visual */
  .produto-card .produto-imagem-container {
    height: 140px; /* Altura aumentada */
    border-radius: 12px 12px 0 0;
    background: white; /* Fundo branco limpo */
    position: relative;
    overflow: hidden;
  }

  .produto-card img {
    object-fit: contain;
    padding: 10px; /* Padding maior para espaçamento */
    height: 100%;
    transition: transform 0.3s ease;
  }
  
  .produto-card .produto-imagem-container:active img {
    transform: scale(0.95); /* Feedback ao tocar na imagem */
  }

  .variacao-selector {
    display: none; /* Ocultar seletor de variações no mobile para simplificar */
  }

  .variacao-label {
    font-size: 0.6rem;
    margin-bottom: 0.2rem;
    font-weight: 600;
  }

  .variacoes-opcoes {
    gap: 0.2rem;
  }

  .variacao-opcao {
    padding: 0.25rem 0.3rem;
    font-size: 0.6rem;
    min-height: 26px;
    border-radius: 4px;
  }

  .variacao-peso {
    font-size: 0.6rem;
  }

  .variacao-preco {
    font-size: 0.6rem;
    margin-top: 0.15rem;
  }

  .variacao-estoque {
    font-size: 0.6rem;
  }

  /* Padronizar peso/tamanho quando não tem variações - Ocupa 3ª linha do grid */
  .peso {
    font-size: 0.7rem;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Ocupa a 3ª linha do grid (60px) */
  }

  /* Produto-footer sempre na 4ª linha do grid */
  .produto-footer {
    margin-bottom: 0.5rem; /* Margem aumentada para espaçamento do botão */
    margin-top: 0;
    padding-top: 0;
    gap: 3px;
    /* Ocupa a 4ª linha do grid */
  }

  /* Botões - Design mais moderno e acessível */
  .produto-card .btn-add-carrinho,
  .produto-info .btn-add-carrinho,
  .produto-card .btn-esgotado,
  .produto-info .btn-esgotado {
    margin-top: 0 !important; /* Removido auto para eliminar espaço */
    margin-bottom: 0 !important;
    padding: 7px 10px !important; /* Padding reduzido */
    font-size: 0.9rem !important; /* Tamanho de fonte aumentado */
    min-height: 34px !important; /* Altura mínima reduzida */
    height: 20px !important; /* Altura fixa apenas mobile */
    font-weight: 600;
    border-radius: 8px; /* Cantos mais arredondados */
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.25); /* Sombra sutil */
    transition: all 0.2s ease;
  }
  
  .btn-add-carrinho:active {
    transform: scale(0.97); /* Feedback tátil ao pressionar */
    box-shadow: 0 1px 3px rgba(245, 158, 11, 0.3);
  }

  /* Economia e countdown ocupam a 5ª linha (espaço flexível) */
  .economia {
    display: none !important;
  }

  .countdown-timer {
    font-size: 0.7rem;
    padding: 4px 8px;
    margin-top: 0.4rem;
    margin-bottom: 0.4rem;
    align-self: start;
    border-radius: 8px; /* Mais arredondado */
    font-weight: 600; /* Mais destaque */
  }

  /* Preços - Hierarquia visual melhorada */
  .preco-selecionado,
  .preco,
  .produto-footer .preco {
    font-size: 1.5rem !important; /* Preço mais destacado */
    font-weight: 700;
    line-height: 1.2;
    margin-top: 0;
    color: #059669; /* Verde vibrante para preço */
  }

  .produto-footer .preco-container .preco-original,
  .preco-original {
    font-size: 0.8rem !important;
    line-height: 1.2;
    color: #9ca3af; /* Cinza mais claro para preço riscado */
    text-decoration: line-through;
    opacity: 0.8;
  }

  .produto-footer .preco-container .preco-desconto,
  .preco-desconto {
    font-size: 1.5rem !important; /* Consistente com preço normal */
    line-height: 1.2;
    color: #059669; /* Verde vibrante */
    font-weight: 700;
  }
  
  .preco-a-partir {
    font-size: 0.75rem !important; /* Tamanho aumentado */
    color: #6b7280; /* Cinza médio */
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
  }
  
  .preco-container {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  /* Botão fixo no footer do card */
  .produto-card .btn-add-carrinho,
  .produto-info .btn-add-carrinho {
    padding: 7px 10px !important;
    font-size: 0.7rem !important;
    margin-top: 0 !important; /* Removido auto para eliminar espaço */
    gap: 5px !important; /* Espaço entre ícone e texto */
    border-radius: 8px !important;
    min-height: 34px !important;
    text-transform: none; /* Manter capitalização normal */
    letter-spacing: 0.3px; /* Melhor legibilidade */
  }

  .produto-card .btn-add-carrinho i,
  .produto-info .btn-add-carrinho i {
    font-size: 0.7rem !important; /* Ícone proporcional ao texto */
  }

  .produto-card .btn-esgotado,
  .produto-info .btn-esgotado {
    margin-top: 0 !important; /* Removido auto para eliminar espaço */
    padding: 7px 10px !important; /* Padding reduzido para 768px */
    font-size: 0.7rem !important;
    min-height: 34px !important;
    height: 20px !important; /* Altura fixa apenas mobile */
  }

  /* Ocultar botão de compra rápida no mobile para economizar espaço */
  .btn-compra-rapida {
    display: none !important;
  }

  /* Countdown timer já definido acima na linha 5 do grid */

  .countdown-numero {
    min-width: 18px;
    padding: 2px 3px;
    font-size: 0.65rem;
  }

  .badge-destaque,
  .badge-promocao,
  .badge-desconto {
    font-size: 0.6rem;
    padding: 0.25rem 0.4rem;
  }

  .galeria-indicador {
    bottom: 0.3rem;
    right: 0.3rem;
    padding: 0.2rem 0.35rem;
    border-radius: 8px;
    font-size: 0.6rem;
    gap: 0.2rem;
  }

  .carrinho-lateral {
    width: 100%;
    right: -100%;
    z-index: 1002 !important; /* Garantir que fique acima da bottom nav */
  }

  .carrinho-lateral.aberto {
    right: 0;
  }

  .carrinho-item {
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.625rem;
  }

  .item-imagem img,
  .item-imagem .placeholder {
    width: 60px;
    height: 60px;
  }

  .item-info {
    flex: 1;
    min-width: 0;
  }

  .item-info h4 {
    font-size: 0.85rem;
  }

  .item-controles {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.5rem;
    border-top: 1px solid #e5e7eb;
    margin-top: 0.25rem;
  }

  .item-subtotal {
    font-size: 1rem;
  }

  .galeria-btn-prev,
  .galeria-btn-next {
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
  }

  .galeria-btn-prev {
    left: 10px;
  }

  .galeria-btn-next {
    right: 10px;
  }

  .galeria-conteudo {
    max-width: 95%;
  }

  /* Carousel Responsivo */
  .carousel-container {
    height: 400px;
    min-height: 400px;
    max-height: 50vh;
  }

  .carousel-image {
    object-fit: cover;
    object-position: center center;
    background-color: var(--cinza-escuro);
  }

  .carousel-title {
    font-size: 2rem;
  }

  .carousel-subtitle {
    font-size: 1.1rem;
  }

  .carousel-content .btn {
    font-size: 0.9rem;
    padding: 0.8rem 1.5rem;
  }

  .carousel-control {
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  }
  
  .carousel-control:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  }

  .carousel-control.prev {
    left: 5px;
  }

  .carousel-control.next {
    right: 5px;
  }

  .carousel-indicators {
    bottom: 1rem;
    gap: 0.5rem;
  }

  .carousel-indicators .indicator {
    width: 8px;
    height: 8px;
  }

  .carousel-indicators .indicator.active {
    width: 24px;
  }

  /* Depoimentos Responsivo */
  .depoimentos {
    padding: 3rem 0;
  }

  .depoimentos-carousel {
    max-width: 100%;
    padding: 0 1rem;
  }

  .depoimentos-slides {
    min-height: 400px;
  }

  .depoimento-card {
    padding: 2rem 1.5rem;
    max-width: 100%;
  }

  .depoimento-avatar i {
    width: 60px;
    height: 60px;
    line-height: 60px;
    font-size: 2.5rem;
  }

  .depoimento-rating i {
    font-size: 1.1rem;
  }

  .depoimento-texto {
    font-size: 1rem;
  }

  .depoimento-autor h4 {
    font-size: 1.1rem;
  }

  .depoimento-control {
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
    background: rgba(26, 77, 46, 0.85);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  }
  
  .depoimento-control:hover {
    background: rgba(26, 77, 46, 0.95);
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  }

  .depoimento-control.prev {
    left: 5px;
  }

  .depoimento-control.next {
    right: 5px;
  }

  .depoimento-indicators {
    gap: 0.5rem;
  }

  .depoimento-indicators .dep-indicator {
    width: 8px;
    height: 8px;
  }

  .depoimento-indicators .dep-indicator.active {
    width: 24px;
  }

  .btn-google-reviews {
    padding: 0.8rem 1.5rem;
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  /* ===== HIERARQUIA VISUAL PADRONIZADA (Smartphones ≤480px) =====
   * 
   * ESTRUTURA CSS GRID (6 linhas):
   * Linha 1 (auto): Categoria - 0.55rem
   * Linha 2 (auto): Título - 0.7rem
   * Linha 3 (55px): ÁREA FIXA para Variações OU Peso
   *   - Com variações: Botões (1kg, 500g, 250g) - 0.55rem
   *   - Sem variações: Peso centralizado - 0.65rem
   * Linha 4 (auto): PREÇO (sempre na mesma posição)
   *   - PREÇO: 0.8rem !important (PADRONIZADO - DESTAQUE)
   *   - Preço original riscado: 0.55rem !important
   * Linha 5 (1fr): ESPAÇO FLEXÍVEL (countdown se existir)
   * Linha 6 (auto): BOTÃO Adicionar - 0.65rem (sempre na mesma altura)
   * 
   * RESULTADO: Preços SEMPRE na linha 4 e BOTÕES SEMPRE na linha 6!
   */

  .carousel-container {
    height: 300px;
    min-height: 200px;
    max-height: 40vh;
  }

  .carousel-image {
    object-fit: cover;
    object-position: center center;
  }

  /* Ajustes adicionais para imagens em telas muito pequenas - Layout Compacto */
  .produto-card .produto-imagem-container {
    height: 130px; /* Altura aumentada */
    border-radius: 8px 8px 0 0;
  }

  .produto-card img {
    padding: 5px;
    height: 100%;
    object-fit: contain;
  }

  .container {
    padding: 0 8px;
  }

  /* Garantir 2 colunas também em telas muito pequenas */
  .produtos-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }

  .produto-info {
    padding: 0.4rem; /* Padding reduzido para economizar espaço */
    display: grid;
    grid-template-rows: auto auto 55px auto auto;
    /* categoria | título | área variações/peso | preço | botão */
    gap: 0;
    min-height: 240px; /* Altura mínima reduzida */
  }

  .produto-card {
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .produto-card .categoria-tag,
  .produto-info .categoria-tag {
    font-size: 0.55rem !important; /* Tamanho reduzido */
    padding: 2px 6px !important;
    margin-bottom: 0.25rem !important;
    height: 20px !important; /* Altura fixa apenas mobile */
  }

  .produto-info h3 {
    font-size: 0.95rem; /* Tamanho aumentado para melhor legibilidade */
    margin-bottom: 0.3rem;
    line-height: 1.2;
    min-height: 2.4em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .produto-info p {
    display: none;
  }

  /* Padronização de preços - mesma hierarquia para todos os cards */
  .preco-selecionado,
  .preco,
  .produto-footer .preco {
    font-size: 1.1rem !important; /* Tamanho aumentado para melhor destaque */
    font-weight: 700;
    line-height: 1.2;
  }

  .produto-footer .preco-container .preco-original,
  .preco-original {
    font-size: 0.55rem !important;
    line-height: 1.2;
  }

  .produto-footer .preco-container .preco-desconto,
  .preco-desconto {
    font-size: 1.1rem !important; /* Tamanho aumentado para melhor destaque */
    line-height: 1.2;
  }

  /* Botão fixo no footer do card */
  .produto-card .btn-add-carrinho,
  .produto-info .btn-add-carrinho {
    padding: 0.3rem 0.4rem !important; /* Padding reduzido */
    font-size: 0.85rem !important; /* Tamanho de fonte aumentado */
    margin-top: 0 !important; /* Removido auto para eliminar espaço */
    gap: 3px !important;
    border-radius: 6px !important;
    min-height: 32px !important;
    height: 20px !important; /* Altura fixa apenas mobile */
  }

  .produto-card .btn-add-carrinho i,
  .produto-info .btn-add-carrinho i {
    font-size: 0.6rem !important; /* Ícone proporcional ao texto */
  }

  .produto-card .btn-esgotado,
  .produto-info .btn-esgotado {
    margin-top: 0 !important; /* Removido auto para eliminar espaço */
    padding: 0.3rem 0.4rem !important; /* Padding reduzido para 480px */
    font-size: 0.6rem !important;
    min-height: 32px !important;
    height: 20px !important; /* Altura fixa apenas mobile */
  }

  /* Ocultar botão de compra rápida no mobile */
  .btn-compra-rapida {
    display: none !important;
  }

  /* Countdown timer já definido acima na linha 5 do grid */

  .countdown-numero {
    min-width: 16px;
    padding: 2px 3px;
    font-size: 0.6rem;
  }

  .badge-destaque,
  .badge-promocao,
  .badge-desconto {
    font-size: 0.55rem;
    padding: 0.2rem 0.35rem;
  }

  .variacao-selector {
    padding: 0.25rem;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Ocupa a 3ª linha do grid (55px) */
  }

  .variacao-label {
    font-size: 0.55rem;
    margin-bottom: 0.2rem;
    font-weight: 600;
  }

  .variacao-opcao {
    padding: 0.2rem 0.3rem;
    font-size: 0.55rem;
    min-height: 24px;
    border-radius: 4px;
  }

  .variacao-peso {
    font-size: 0.55rem;
  }

  .variacao-preco {
    font-size: 0.55rem;
  }

  .variacao-estoque {
    font-size: 0.55rem;
  }

  /* Padronizar peso/tamanho quando não tem variações - Ocupa 3ª linha do grid */
  .peso {
    font-size: 0.65rem;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Ocupa a 3ª linha do grid (55px) */
  }

  /* Produto-footer sempre na 4ª linha do grid */
  .produto-footer {
    margin-bottom: 0.5rem; /* Margem aumentada para espaçamento do botão */
    margin-top: 0;
    padding-top: 0;
    gap: 3px;
    /* Ocupa a 4ª linha do grid */
  }

  /* Botões ocupam a 5ª linha do grid - sempre no mesmo lugar */
  .btn-add-carrinho,
  .btn-esgotado {
    grid-row: 5;
    margin-top: 0;
    margin-bottom: 0;
  }

  /* Countdown ocupa a 5ª linha (espaço flexível) */
  .countdown-timer {
    grid-row: 5;
    font-size: 0.6rem;
    padding: 2px 5px;
    margin-top: 0.2rem;
    margin-bottom: 0;
    align-self: start;
  }

  .galeria-indicador {
    bottom: 0.25rem;
    right: 0.25rem;
    padding: 0.15rem 0.3rem;
    border-radius: 6px;
    font-size: 0.55rem;
    gap: 0.15rem;
  }

  /* .produto-card img {
    padding: 4px;
  } */

  .carousel-title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }

  .carousel-subtitle {
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
  }

  .carousel-content {
    padding: 1rem;
  }

  /* Otimizações adicionais para telas muito pequenas - Novo Design */
  /* Estilos já definidos na media query principal @media (max-width: 480px) acima */

  /* .badge-promocao {
    font-size: 0.6rem;
    padding: 0.25rem 0.4rem;
  }

  .badge-desconto {
    font-size: 0.6rem;
    padding: 0.25rem 0.4rem;
  }

  .produto-card .produto-imagem-container {
    height: 160px;
  }

  .produto-info {
    padding: 0.65rem;
  }

  .produto-info h3 {
    font-size: 0.8rem;
    min-height: 2.5em;
  }

  .produto-info p {
    display: none;
  } */

  /* Estilos de produtos já definidos na media query principal @media (max-width: 480px) acima */

  /* .categoria-tag {
    font-size: 0.6rem;
  }

  .variacao-selector {
    padding: 0.4rem;
  }

  .variacao-label {
    font-size: 0.65rem;
  }

  .variacao-opcao {
    min-height: 32px;
  }

  .btn-add-carrinho {
    padding: 0.55rem 0.65rem;
    font-size: 0.75rem;
  }

  .preco-selecionado {
    font-size: 0.9rem;
  } */

  /* Depoimentos Mobile */
  .depoimentos-slides {
    min-height: 450px;
  }

  .depoimento-card {
    padding: 1.5rem 1rem;
  }

  .depoimento-texto {
    font-size: 0.95rem;
  }

  .depoimento-texto::before {
    font-size: 2rem;
    top: -10px;
  }

  .depoimento-control.prev {
    left: 5px;
  }

  .depoimento-control.next {
    right: 5px;
  }
}

/* ============================================
   SISTEMA DE DESCONTOS - TÉCNICAS DE MARKETING
   ============================================ */

/* Cores de desconto */
:root {
  --cor-desconto-sucesso: #16a34a;
  --cor-desconto-urgencia: #dc2626;
  --cor-desconto-alerta: #f59e0b;
  --cor-desconto-fundo: #fee2e2;
}

/* Badge de Promoção - Design da Imagem */
.badge-promocao {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #dc2626; /* Vermelho como na imagem */
  color: white;
  padding: 2px 6px;
  border-radius: 6px;
  font-weight: bold;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 4px rgba(220, 38, 38, 0.3);
  z-index: 10;
  font-family: sans-serif;
}

.badge-promocao-animada {
  animation: pulsePromo 1.8s ease-in-out infinite;
}

@keyframes pulsePromo {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

/* Badge de Percentual de Desconto - Design da Imagem */
.badge-desconto {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #dc2626; /* Vermelho como na imagem */
  color: white;
  padding: 10px;
  border-radius: 50%;
  font-weight: bold;
  font-size: 0.9rem;
  box-shadow: 0 2px 4px rgba(220, 38, 38, 0.3);
  z-index: 10;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: sans-serif;
  line-height: 1;
}

@keyframes rotateIn {
  from {
    transform: rotate(-180deg) scale(0);
    opacity: 0;
  }
  to {
    transform: rotate(0) scale(1);
    opacity: 1;
  }
}

/* Container de Preços com Desconto - Design da Imagem */
.preco-container {
  display: flex;
  flex-direction: column;
  /* gap: 8px; */
  margin-top: 6px;
}

/* Preços principais do produto (não variações) */
.produto-footer .preco-container .preco-original {
  font-size: 0.875rem;
  color: #6b7280;
  text-decoration: line-through;
  font-weight: normal;
}

.produto-footer .preco-container .preco-desconto {
  font-size: 1.5rem;
  color: 388e3c;
  font-weight: 700;
}

/* Preço Original (riscado) - Design da Imagem */
.preco-original {
  text-decoration: line-through;
  color: #9ca3af;
  font-size: 1rem;
  opacity: 0.8;
  text-align: left;
  width: 100%;
  font-weight: normal;
  margin-bottom: 4px;
}

/* Preço com Desconto - Design da Imagem */
.preco-desconto {
  color: #388e3c;
  font-size: 2rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  text-align: left;
  width: 100%;
  gap: 8px;
  line-height: 1;
}

/* Economia - Design da Imagem */
.economia {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #dcfce7;
  color: #15803d;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: 8px;
  margin-bottom: 0;
  flex-shrink: 0; /* Não encolhe */
  /* width: fit-content; */
}

.economia i {
  font-size: 0.9rem;
}

/* Selo de Oferta Limitada */
.oferta-limitada {
  background: var(--cor-desconto-alerta);
  color: white;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: bold;
  text-transform: uppercase;
  display: inline-block;
  margin-top: 8px;
  animation: blink 2s ease-in-out infinite;
}

@keyframes blink {
  0%,
  50%,
  100% {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0.7;
  }
}

/* Countdown Timer - Design da Imagem */
.countdown-timer {
  background: #fce7f3; /* Rosa claro como na imagem */
  color: #dc2626;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  margin-top: 12px;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid #f9a8d4;
  flex-shrink: 0; /* Não encolhe */
}

.countdown-timer i {
  animation: pulse 1s ease-in-out infinite;
}

.countdown-numero {
  display: inline-block;
  background: rgba(255, 255, 255, 0.2);
  padding: 2px 6px;
  border-radius: 4px;
  min-width: 28px;
  text-align: center;
  font-weight: bold;
}

.countdown-timer.urgente {
  background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
  animation: shake 0.5s ease-in-out infinite;
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-2px);
  }
  75% {
    transform: translateX(2px);
  }
}

.countdown-expirado {
  color: var(--cinza-medio);
  font-style: italic;
}

/* Efeito de Brilho/Shine nos Produtos em Promoção */
.produto-card.com-desconto::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  animation: shine 3s infinite;
  z-index: 1;
  pointer-events: none;
}

@keyframes shine {
  0% {
    left: -100%;
  }
  20%,
  100% {
    left: 100%;
  }
}

.produto-card.com-desconto {
  position: relative;
  overflow: hidden;
  border: none;
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.2);
}

.produto-card.com-desconto:hover {
  border: none;
  box-shadow: 0 6px 16px rgba(220, 38, 38, 0.3);
  transform: translateY(-4px);
}

/* Badge "Melhor Oferta" para maiores descontos */
.melhor-oferta {
  position: absolute;
  top: 50px;
  left: -30px;
  background: var(--cor-desconto-alerta);
  color: white;
  padding: 6px 40px;
  font-size: 0.7rem;
  font-weight: bold;
  text-transform: uppercase;
  transform: rotate(-45deg);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  z-index: 10;
}

/* Animação de entrada para produtos com desconto */
.produto-card.com-desconto {
  animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Estilos de preço das variações removidos - não são mais exibidos */

/* Destaque visual extra para grandes descontos (30%+) */
.desconto-grande {
  animation: pulseGrande 1.5s ease-in-out infinite;
}

@keyframes pulseGrande {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(220, 38, 38, 0);
  }
}

/* Estilos para economia no carrinho */
.preco-promocional {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.preco-promocional .preco-original {
  font-size: 0.8rem;
  color: var(--cinza-medio);
  text-decoration: line-through;
}

.preco-promocional .preco-desconto {
  font-size: 1rem;
  color: var(--cor-desconto-sucesso);
  font-weight: bold;
}

.economia-item {
  font-size: 0.75rem;
  color: var(--cor-desconto-sucesso);
  background: #d1fae5;
  padding: 2px 6px;
  border-radius: 4px;
  margin-top: 2px;
  display: inline-block;
}

.economia-item i {
  margin-right: 3px;
}

.economia-total {
  background: transparent;
  color: #15803d;
  padding: 3px 0;
  margin: 0;
  text-align: right;
  font-weight: 500;
  border: none;
  font-size: 0.75rem;
}

.economia-total i {
  margin-right: 4px;
  font-size: 0.8rem;
}

/* Melhorias no layout do carrinho - Estilos consolidados acima */

.carrinho-footer {
  flex-shrink: 0;
  border-top: 1px solid #e5e7eb;
  background: #f9fafb;
}

/* Ajustar posicionamento do resumo de economia */
#economia-resumo {
  margin: 0 16px 6px 16px;
}

/* Resumo de valores - Padrão de mercado */
#resumo-valores {
  margin-bottom: 0.75rem;
}

.carrinho-subtotal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  font-size: 0.95rem;
  color: #374151;
}

.carrinho-desconto {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  color: #16a34a;
  font-weight: 600;
  font-size: 0.95rem;
}

.carrinho-desconto i {
  margin-right: 4px;
  font-size: 0.85rem;
}

/* Responsividade dos Descontos - Novo Design */
@media (max-width: 768px) {
  .produto-card {
    max-width: 100%;
    margin: 0;
  }

  .badge-promocao {
    font-size: 0.6rem;
    padding: 4px 8px;
    top: 6px;
    left: 6px;
  }

  .badge-desconto {
    font-size: 0.65rem;
    width: 35px;
    height: 35px;
    top: 6px;
    right: 6px;
  }

  /* Altura da imagem já definida na media query principal */
  /* .produto-card .produto-imagem-container {
    height: 180px;
  } */

  /* Padding e outros estilos já definidos na media query principal */

  .economia-total {
    margin: 8px 12px;
    padding: 6px 10px;
    font-size: 0.85rem;
  }
}

.countdown-numero {
  min-width: 24px;
  padding: 2px 4px;
}

.economia {
  /* font-size: 0.7rem; */
  padding: 3px 8px;
}
/* Cupom no Carrinho - Sutil e Expansível */
.cupom-section {
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #e5e7eb;
}

.cupom-toggle {
  background: transparent;
  border: none;
  color: #6b7280;
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
  transition: color 0.2s ease;
  width: 100%;
  text-align: left;
}

.cupom-toggle:hover {
  color: #f59e0b;
}

.cupom-toggle i {
  font-size: 0.9rem;
}

.cupom-form-container {
  margin-top: 0.75rem;
  animation: slideDown 0.2s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cupom-input-group {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.cupom-input-group input {
  flex: 1;
  padding: 0.5rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.875rem;
  transition: border-color 0.2s ease;
}

.cupom-input-group input:focus {
  outline: none;
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}

.cupom-input-group button {
  background: #f59e0b;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}

.cupom-input-group button:hover {
  background: #d97706;
}

.cupom-input-group button:disabled {
  background: #9ca3af;
  cursor: not-allowed;
}

#cupom-mensagem {
  margin-top: 0.5rem;
}

.cupom-erro {
  color: #dc2626;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.cupom-sucesso {
  color: #16a34a;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.cupom-aplicado {
  background: #ecfdf5;
  border: 1px solid #16a34a;
  color: #15803d;
  padding: 0.625rem 0.75rem;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.cupom-aplicado span {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cupom-aplicado .remover-cupom {
  background: transparent;
  border: 1px solid #16a34a;
  color: #15803d;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.75rem;
  min-width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.cupom-aplicado .remover-cupom:hover {
  background: #dc2626;
  border-color: #dc2626;
  color: white;
}

/* Linha de Desconto no Carrinho - Estilos movidos para cima */

/* ========================================
   Carousel de Produtos em Promoção
   ======================================== */

.promocoes {
  background: linear-gradient(135deg, #fff5f0 0%, #ffe5d8 100%);
  position: relative;
  overflow: hidden;
}

.promocoes::before {
  content: "🔥";
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 100px;
  opacity: 0.1;
  pointer-events: none;
}

.section-subtitle {
  text-align: center;
  color: var(--cinza-medio);
  font-size: 1.1rem;
  margin-top: -1rem;
  margin-bottom: 2rem;
}

.promocoes-carousel {
  position: relative;
  width: 100%;
  margin-top: 2rem;
}

.promocoes-track-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 1rem 0;
}

.promocoes-track {
  display: flex;
  gap: 2rem;
  transition: transform 0.5s ease-in-out;
  will-change: transform;
}

.promocao-item {
  flex: 0 0 calc(33.333% - 1.35rem);
  min-width: calc(33.333% - 1.35rem);
  max-width: calc(33.333% - 1.35rem);
}

.promocao-item .produto-card {
  height: 100%;
  margin: 0;
}

/* ========================================
   Carousel de Categorias
   ======================================== */

.categorias {
  padding: 4rem 0;
  background: var(--branco);
}

.categorias-carousel {
  position: relative;
  width: 100%;
  margin-top: 2rem;
}

.categorias-track-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 1rem 0;
}

.categorias-track {
  display: flex;
  gap: 1rem;
  transition: transform 0.5s ease-in-out;
  will-change: transform;
}

.categoria-item {
  flex: 0 0 calc(33.333% - 0.67rem);
  min-width: calc(33.333% - 0.67rem);
  max-width: calc(33.333% - 0.67rem);
}

@media (max-width: 1024px) {
  .categoria-item {
    flex: 0 0 calc(50% - 0.5rem);
    min-width: calc(50% - 0.5rem);
    max-width: calc(50% - 0.5rem);
  }
}

.categoria-card {
  display: block;
  background: var(--branco);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

.categoria-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.categoria-imagem-container {
  width: 100%;
  height: 200px;
  overflow: hidden;
  background: var(--cinza-claro);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.categoria-imagem {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.categoria-card:hover .categoria-imagem {
  transform: scale(1.05);
}

.categoria-imagem-placeholder {
  background: linear-gradient(135deg, var(--laranja) 0%, var(--laranja-escuro) 100%);
  color: var(--branco);
  font-size: 3rem;
}

.categoria-info {
  padding: 1.5rem;
  text-align: center;
}

.categoria-nome {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--cinza-escuro);
  margin: 0 0 0.5rem 0;
}

.categoria-tipo {
  font-size: 0.9rem;
  color: var(--cinza-medio);
  display: block;
}

/* Controles do Carousel de Categorias */
.categorias-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--branco);
  border: 2px solid var(--cinza-claro);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.categorias-control:hover {
  background: var(--laranja);
  border-color: var(--laranja);
  color: var(--branco);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.categorias-prev {
  left: -25px;
}

.categorias-next {
  right: -25px;
}

/* Padronização de controles de carousel para mobile */
@media (max-width: 768px) {
  /* Carousel de Categorias */
  .categorias-control {
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  }
  
  .categorias-control:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  }
  
  .categorias-prev {
    left: 5px;
  }
  
  .categorias-next {
    right: 5px;
  }
  
  /* Carousel de Promoções */
  .promocoes-control {
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  }
  
  .promocoes-control:hover {
    background: rgba(0, 0, 0, 0.65);
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  }
  
  .promocoes-control.prev {
    left: 5px;
  }
  
  .promocoes-control.next {
    right: 5px;
  }
  
  /* Carousel Principal (Banners) - já existe, mas vamos garantir consistência */
  .carousel-control {
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  }
  
  .carousel-control:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  }
  
  .carousel-control.prev {
    left: 5px;
  }
  
  .carousel-control.next {
    right: 5px;
  }
  
  /* Carousel de Depoimentos */
  .depoimento-control {
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
    background: rgba(26, 77, 46, 0.85);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  }
  
  .depoimento-control:hover {
    background: rgba(26, 77, 46, 0.95);
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  }
  
  .depoimento-control.prev {
    left: 5px;
  }
  
  .depoimento-control.next {
    right: 5px;
  }
}

/* Indicadores do Carousel de Categorias */
.categorias-indicators {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2rem;
}

.categoria-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--cinza-medio);
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}

.categoria-indicator:hover {
  border-color: var(--laranja);
  background: var(--laranja);
}

.categoria-indicator.active {
  background: var(--laranja);
  border-color: var(--laranja);
}

/* Estilos para página de categoria */
.categoria-page {
  padding: 2rem 0 4rem;
}

.categoria-header {
  margin-bottom: 3rem;
  text-align: center;
}

.categoria-imagem-header {
  margin-bottom: 1.5rem;
}

.categoria-imagem-header .categoria-imagem {
  max-width: 300px;
  max-height: 300px;
  border-radius: 12px;
  object-fit: cover;
  margin: 0 auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.categoria-info-header {
  margin-top: 1rem;
}

.categoria-subtitle {
  font-size: 1.1rem;
  color: var(--cinza-medio);
  margin-top: 0.5rem;
}

.categoria-vazia {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--cinza-medio);
}

.categoria-vazia p {
  font-size: 1.1rem;
  margin-bottom: 2rem;
}

/* Controles do Carousel de Promoções */
.promocoes-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  transition: all 0.3s ease;
  z-index: 10;
  backdrop-filter: blur(5px);
}

.promocoes-control:hover {
  background: rgba(0, 0, 0, 0.8);
  transform: translateY(-50%) scale(1.1);
}

.promocoes-control.prev {
  left: -25px;
}

.promocoes-control.next {
  right: -25px;
}

.promocoes-control i {
  pointer-events: none;
}

/* Indicadores do Carousel de Promoções */
.promocoes-indicators {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 2rem;
  padding: 1rem 0;
}

.promo-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--laranja);
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}

.promo-indicator:hover {
  background: var(--laranja);
  transform: scale(1.2);
}

.promo-indicator.active {
  background: var(--laranja);
  width: 30px;
  border-radius: 10px;
}

/* Responsividade do Carousel de Promoções */
@media (max-width: 1024px) {
  .promocoes-control.prev {
    left: 10px;
  }

  .promocoes-control.next {
    right: 10px;
  }

  .promocao-item {
    flex: 0 0 calc(50% - 1rem);
    min-width: calc(50% - 1rem);
    max-width: calc(50% - 1rem);
  }
}

@media (max-width: 768px) {
  .promocoes::before {
    font-size: 60px;
  }

  .section-subtitle {
    font-size: 1rem;
  }

  .promocoes-control {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }

  .promo-indicator {
    width: 10px;
    height: 10px;
  }

  .promo-indicator.active {
    width: 24px;
  }

  /* Cards em 2 colunas mantendo proporção - altura reduzida */
  .promocao-item {
    flex: 0 0 calc(50% - 0.75rem);
    min-width: calc(50% - 0.75rem);
    max-width: calc(50% - 0.75rem);
  }

  .promocao-item .produto-card {
    max-height: 340px;
  }

  .promocao-item .produto-imagem-container {
    height: 140px !important;
  }

  .promocao-item .produto-info {
    min-height: auto !important;
  }

  .promocoes-track {
    gap: 0.5rem;
    padding: 0 0.5rem;
  }

  .promocoes-track-container {
    padding: 0.75rem 0.5rem;
  }

  .promocoes-carousel {
    margin-top: 1rem;
  }
}

@media (max-width: 480px) {
  .promocoes-control {
    width: 35px;
    height: 35px;
    font-size: 1rem;
  }

  .promocoes-control.prev {
    left: 5px;
  }

  .promocoes-control.next {
    right: 5px;
  }

  .promo-indicator {
    width: 8px;
    height: 8px;
  }

  .promo-indicator.active {
    width: 20px;
  }

  /* Mantém 2 colunas para não esticar os cards - altura reduzida */
  .promocao-item {
    flex: 0 0 calc(50% - 0.5rem);
    min-width: calc(50% - 0.5rem);
    max-width: calc(50% - 0.5rem);
  }

  .promocao-item .produto-card {
    max-height: 320px;
  }

  .promocao-item .produto-imagem-container {
    height: 130px !important;
  }

  .promocao-item .produto-info {
    min-height: auto !important;
  }

  .promocoes-track {
    gap: 0.5rem;
    padding: 0 0.5rem;
  }

  .promocoes-track-container {
    padding: 0.5rem 0.25rem;
  }

  .promocoes-carousel {
    margin-top: 0.75rem;
  }
}

/* ============================================
   MODAL COMPRA RÁPIDA (1 CLICK)
   ============================================ */

.modal-compra-rapida {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  align-items: center;
  justify-content: center;
}

.modal-compra-rapida.aberto {
  display: flex;
}

.modal-compra-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
}

.modal-compra-content {
  position: relative;
  background: white;
  border-radius: 16px;
  padding: 2rem;
  max-width: 500px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modal-compra-fechar {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  color: var(--cinza-medio);
  transition: color 0.2s;
  line-height: 1;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-compra-fechar:hover {
  color: var(--cinza-escuro);
}

.modal-compra-titulo {
  font-size: 1.5rem;
  color: var(--verde-escuro);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.modal-compra-titulo i {
  color: #25d366;
  font-size: 1.8rem;
}

.modal-compra-produto {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: var(--cinza-claro);
  border-radius: 12px;
}

.modal-compra-imagem {
  width: 100px;
  height: 100px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.modal-compra-imagem img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.modal-compra-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.modal-compra-info h4 {
  font-size: 1.1rem;
  color: var(--cinza-escuro);
  margin-bottom: 0.25rem;
}

.modal-compra-categoria {
  font-size: 0.9rem;
  color: var(--cinza-medio);
}

.modal-compra-variacoes {
  margin-bottom: 1.5rem;
}

.modal-compra-label {
  display: block;
  font-weight: 600;
  color: var(--cinza-escuro);
  margin-bottom: 0.75rem;
  font-size: 1rem;
}

.modal-variacoes-opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.variacao-opcao-modal {
  padding: 0.75rem 1.25rem;
  border: 2px solid var(--cinza-claro);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  background: white;
  text-align: center;
  min-width: 80px;
}

.variacao-opcao-modal:hover {
  border-color: var(--verde-medio);
  transform: translateY(-2px);
}

.variacao-opcao-modal.ativa {
  border-color: var(--verde-escuro);
  background-color: var(--verde-escuro);
  color: white;
}

.variacao-opcao-modal.sem-estoque {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: var(--cinza-claro);
}

.variacao-opcao-modal.sem-estoque:hover {
  transform: none;
  border-color: var(--cinza-claro);
}

.variacao-peso {
  font-weight: 600;
  font-size: 0.95rem;
}

.variacao-indisponivel {
  font-size: 0.7rem;
  color: var(--cinza-medio);
  margin-top: 0.25rem;
}

.modal-compra-quantidade {
  margin-bottom: 1.5rem;
}

.modal-quantidade-controles {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.btn-qty-modal {
  width: 40px;
  height: 40px;
  border: 2px solid var(--verde-escuro);
  background: white;
  color: var(--verde-escuro);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.btn-qty-modal:hover {
  background-color: var(--verde-escuro);
  color: white;
}

.btn-qty-modal:active {
  transform: scale(0.95);
}

#modal-compra-qty {
  width: 80px;
  height: 40px;
  text-align: center;
  border: 2px solid var(--cinza-claro);
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--cinza-escuro);
}

.modal-compra-preco {
  background: var(--bege);
  padding: 1.25rem;
  border-radius: 12px;
  margin-bottom: 1.5rem;
}

.modal-preco-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  color: var(--cinza-escuro);
  font-size: 0.95rem;
}

.modal-preco-total {
  display: flex;
  justify-content: space-between;
  padding-top: 0.75rem;
  border-top: 2px solid var(--laranja);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--verde-escuro);
}

.modal-compra-acoes {
  display: flex;
  gap: 1rem;
}

.btn-modal-cancelar {
  flex: 1;
  padding: 0.875rem 1.5rem;
  border: 2px solid var(--cinza-medio);
  background: white;
  color: var(--cinza-escuro);
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 1rem;
}

.btn-modal-cancelar:hover {
  background-color: var(--cinza-claro);
  border-color: var(--cinza-escuro);
}

.btn-modal-whatsapp {
  flex: 2;
  padding: 0.875rem 1.5rem;
  border: none;
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
  color: white;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
}

.btn-modal-whatsapp:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(37, 211, 102, 0.4);
}

.btn-modal-whatsapp:active {
  transform: translateY(0);
}

.btn-modal-whatsapp i {
  font-size: 1.2rem;
}

/* Botão Comprar com 1 Click nos cards de produto */
.btn-compra-rapida {
  width: 100%;
  padding: 0.75rem 1rem;
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  box-shadow: 0 2px 8px rgba(37, 211, 102, 0.2);
}

.btn-compra-rapida:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
}

.btn-compra-rapida:active {
  transform: translateY(0);
}

.btn-compra-rapida i {
  font-size: 1.1rem;
}

/* Responsividade do Modal */
@media (max-width: 768px) {
  .modal-compra-content {
    padding: 1.5rem;
    max-width: 95%;
    max-height: 85vh;
  }

  .modal-compra-titulo {
    font-size: 1.25rem;
  }

  .modal-compra-produto {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .modal-compra-imagem {
    width: 120px;
    height: 120px;
  }

  .modal-compra-acoes {
    flex-direction: column;
  }

  .btn-modal-cancelar,
  .btn-modal-whatsapp {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .modal-compra-content {
    padding: 1.25rem;
    border-radius: 12px;
  }

  .modal-compra-titulo {
    font-size: 1.1rem;
  }

  .modal-variacoes-opcoes {
    gap: 0.5rem;
  }

  .variacao-opcao-modal {
    padding: 0.625rem 1rem;
    min-width: 70px;
    font-size: 0.9rem;
  }

  /* Botão de compra rápida oculto no mobile */
  .btn-compra-rapida {
    display: none !important;
  }
}

/* ==================== Políticas ==================== */

/* Footer Links */
.footer-links {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.footer-links a {
  color: var(--laranja);
  text-decoration: none;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}

.footer-links a:hover {
  color: var(--branco);
  background-color: rgba(255, 138, 0, 0.2);
  text-decoration: underline;
}

/* Modal de Políticas */
.modal-politica {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease;
}

.modal-politica-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.75);
  cursor: pointer;
}

.modal-politica-content {
  position: relative;
  background-color: var(--branco);
  width: 90%;
  max-width: 800px;
  max-height: 85vh;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.modal-politica-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2rem;
  border-bottom: 2px solid #f0f0f0;
  background-color: #f8f8f8;
  border-radius: 12px 12px 0 0;
}

.modal-politica-header h2 {
  margin: 0;
  font-size: 1.5rem;
  color: var(--cinza-escuro);
  font-weight: 600;
}

.modal-politica-fechar {
  background: none;
  border: none;
  font-size: 2rem;
  color: var(--cinza-medio);
  cursor: pointer;
  line-height: 1;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.modal-politica-fechar:hover {
  background-color: rgba(0, 0, 0, 0.1);
  color: var(--cinza-escuro);
  transform: rotate(90deg);
}

.modal-politica-body {
  padding: 2rem;
  overflow-y: auto;
  flex: 1;
  line-height: 1.7;
  color: var(--cinza-escuro);
}

.modal-politica-body h3 {
  color: var(--laranja);
  font-size: 1.2rem;
}

/* Métodos de Pagamento - Layout Lado a Lado */
.metodo-pagamento-opcoes {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.metodo-pagamento-option {
  flex: 1;
  min-width: 200px;
  cursor: pointer;
}

.metodo-pagamento-option input[type="radio"] {
  display: none;
}

.metodo-pagamento-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  border: 2px solid var(--cinza-medio);
  border-radius: 12px;
  background: var(--branco);
  transition: all 0.3s ease;
  text-align: center;
}

.metodo-pagamento-card i {
  font-size: 32px;
  color: var(--cinza-medio);
  transition: all 0.3s ease;
}

.metodo-pagamento-card span {
  font-size: 16px;
  font-weight: 600;
  color: var(--cinza-escuro);
  transition: all 0.3s ease;
}

.metodo-pagamento-option:hover .metodo-pagamento-card {
  border-color: var(--laranja);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 152, 0, 0.2);
}

.metodo-pagamento-option:hover .metodo-pagamento-card i {
  color: var(--laranja);
}

.metodo-pagamento-option input[type="radio"]:checked + .metodo-pagamento-card {
  border-color: var(--laranja);
  background: linear-gradient(135deg, #fff9e6 0%, #ffffff 100%);
  box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3);
}

.metodo-pagamento-option input[type="radio"]:checked + .metodo-pagamento-card i {
  color: var(--laranja);
}

.metodo-pagamento-option input[type="radio"]:checked + .metodo-pagamento-card span {
  color: var(--laranja);
}

@media (max-width: 768px) {
  .metodo-pagamento-opcoes {
    flex-direction: row;
    gap: 0.75rem;
  }
  
  .metodo-pagamento-option {
    min-width: calc(50% - 0.375rem);
    flex: 1;
  }
  
  .metodo-pagamento-card {
    padding: 15px 10px;
  }
  
  .metodo-pagamento-card i {
    font-size: 24px;
  }
  
  .metodo-pagamento-card span {
    font-size: 14px;
  }
}

.modal-politica-body h3 {
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  font-weight: 600;
}

/* Estilos para tipo de entrega no checkout */
.checkout-form .form-group:first-of-type {
  display: block !important;
}

.tipo-entrega-opcoes {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  margin-top: 10px;
  visibility: visible !important;
  opacity: 1 !important;
}

.tipo-entrega-option {
  display: block !important;
  cursor: pointer;
  visibility: visible !important;
  opacity: 1 !important;
}

.tipo-entrega-option input[type="radio"] {
  display: none;
}

.tipo-entrega-card {
  padding: 20px;
  border: 2px solid var(--cinza-medio);
  border-radius: 8px;
  text-align: center;
  transition: all 0.3s ease;
  background: white;
  visibility: visible !important;
  opacity: 1 !important;
  display: block !important;
}

.tipo-entrega-card i {
  font-size: 32px;
  color: var(--cinza-medio);
  margin-bottom: 10px;
  display: block;
}

.tipo-entrega-card span {
  display: block;
  font-weight: 600;
  color: var(--cinza-escuro);
  font-size: 16px;
}

.tipo-entrega-option input[type="radio"]:checked + .tipo-entrega-card {
  border-color: var(--laranja);
  background: rgba(255, 152, 0, 0.05);
}

.tipo-entrega-option input[type="radio"]:checked + .tipo-entrega-card i {
  color: var(--laranja);
}

.tipo-entrega-option:hover .tipo-entrega-card {
  border-color: var(--laranja);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Informações de retirada */
.checkout-info-retirada {
  margin-top: 15px;
  margin-bottom: 15px;
}

.checkout-info-retirada .alert {
  padding: 15px;
  border-radius: 8px;
  border-left: 4px solid var(--laranja);
}

.checkout-info-retirada .alert i {
  color: var(--laranja);
  margin-right: 10px;
}

.checkout-info-retirada strong {
  display: block;
  margin-bottom: 10px;
  color: var(--cinza-escuro);
}

#checkout-endereco-retirada-texto {
  white-space: pre-line;
  line-height: 1.6;
  color: var(--cinza-escuro);
}

#checkout-horario-retirada-texto,
#checkout-observacoes-retirada-texto {
  margin-top: 8px;
  font-size: 14px;
  color: var(--cinza-escuro);
}

/* Responsivo - Tipo de entrega */
@media (max-width: 768px) {
  .tipo-entrega-opcoes {
    grid-template-columns: 1fr;
  }
}

/* Estilos para seleção de endereço no checkout */
#checkout-select-endereco {
  width: 100%;
  padding: 12px;
  border: 2px solid var(--cinza-medio);
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 10px;
  font-family: inherit;
}

#checkout-select-endereco:focus {
  outline: none;
  border-color: var(--laranja);
  box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.1);
}

.checkout-endereco-info {
  font-size: 14px;
  line-height: 1.6;
  color: var(--cinza-escuro);
}

.checkout-endereco-info strong {
  color: var(--verde-escuro);
  display: block;
  margin-bottom: 5px;
}

#checkout-endereco-cep,
#checkout-endereco-logradouro,
#checkout-endereco-numero,
#checkout-endereco-complemento,
#checkout-endereco-bairro,
#checkout-endereco-cidade,
#checkout-endereco-estado,
#checkout-endereco-ponto-referencia {
  width: 100%;
  padding: 12px;
  border: 2px solid var(--cinza-medio);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  transition: all 0.3s ease;
}

#checkout-endereco-cep:focus,
#checkout-endereco-logradouro:focus,
#checkout-endereco-numero:focus,
#checkout-endereco-complemento:focus,
#checkout-endereco-bairro:focus,
#checkout-endereco-cidade:focus,
#checkout-endereco-estado:focus,
#checkout-endereco-ponto-referencia:focus {
  outline: none;
  border-color: var(--laranja);
  box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.1);
}

.form-help {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  color: var(--cinza-medio);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@media (max-width: 768px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

/* Estilos para campo CPF/CNPJ no checkout */
.checkout-cpf-cnpj-section {
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 20px;
  background: var(--cinza-claro);
  border-radius: 8px;
  border: 2px solid var(--laranja);
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.checkout-cpf-cnpj-alert {
  margin-bottom: 15px;
  padding: 15px;
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 8px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.checkout-cpf-cnpj-alert i {
  color: #856404;
  font-size: 20px;
  margin-top: 2px;
}

.checkout-cpf-cnpj-alert strong {
  color: #856404;
  display: block;
  margin-bottom: 5px;
}

.checkout-cpf-cnpj-alert p {
  color: #856404;
  margin: 0;
  font-size: 14px;
}

.checkout-cpf-cnpj-input {
  width: 100%;
  padding: 12px;
  border: 2px solid var(--cinza-medio);
  border-radius: 8px;
  font-size: 16px;
  font-family: inherit;
  transition: all 0.3s ease;
  background: white;
}

.checkout-cpf-cnpj-input:focus {
  outline: none;
  border-color: var(--laranja);
  box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.1);
}

.checkout-cpf-cnpj-input.erro {
  border-color: #dc3545;
  background-color: #fff5f5;
}

.checkout-cpf-cnpj-input.erro:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}

.checkout-cpf-cnpj-input.sucesso {
  border-color: #28a745;
  background-color: #f0fff4;
}

.checkout-cpf-cnpj-input.sucesso:focus {
  border-color: #28a745;
  box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.1);
}

.checkout-cpf-cnpj-input:disabled {
  background-color: #e9ecef;
  cursor: not-allowed;
  opacity: 0.7;
}

.checkout-cpf-cnpj-erro,
.checkout-cpf-cnpj-sucesso {
  margin-top: 8px;
  padding: 10px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.checkout-cpf-cnpj-erro {
  background: #fee;
  color: #c33;
  border: 1px solid #fcc;
}

.checkout-cpf-cnpj-erro i {
  color: #c33;
}

.checkout-cpf-cnpj-sucesso {
  background: #efe;
  color: #3c3;
  border: 1px solid #cfc;
}

.checkout-cpf-cnpj-sucesso i {
  color: #3c3;
}

#checkout-salvar-cpf-cnpj-btn {
  margin-top: 15px;
}

#checkout-salvar-cpf-cnpj-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

@media (max-width: 768px) {
  .checkout-cpf-cnpj-section {
    padding: 15px;
  }
  
  .checkout-cpf-cnpj-alert {
    padding: 12px;
    flex-direction: column;
    gap: 8px;
  }
  
  .checkout-cpf-cnpj-alert i {
    align-self: flex-start;
  }
}

.modal-politica-body h3:first-child {
  margin-top: 0;
}

.modal-politica-body h4 {
  color: var(--cinza-escuro);
  font-size: 1rem;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.modal-politica-body p {
  margin-bottom: 1rem;
  text-align: justify;
}

.modal-politica-body ul {
  margin-bottom: 1rem;
  padding-left: 2rem;
}

.modal-politica-body li {
  margin-bottom: 0.5rem;
}

.modal-politica-body strong {
  color: var(--cinza-escuro);
  font-weight: 600;
}

.modal-politica-body a {
  color: var(--laranja);
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
}

.modal-politica-body a:hover {
  text-decoration: underline;
  color: #e67700;
}

/* Scrollbar personalizada para o modal */
.modal-politica-body::-webkit-scrollbar {
  width: 8px;
}

.modal-politica-body::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.modal-politica-body::-webkit-scrollbar-thumb {
  background: var(--laranja);
  border-radius: 10px;
}

.modal-politica-body::-webkit-scrollbar-thumb:hover {
  background: #e67700;
}

/* Responsivo - Políticas */
@media (max-width: 768px) {
  .footer-links {
    flex-direction: column;
    gap: 1rem;
    align-items: center;
  }

  .modal-politica-content {
    width: 95%;
    max-height: 90vh;
    border-radius: 8px;
  }

  .modal-politica-header {
    padding: 1rem 1.25rem;
    border-radius: 8px 8px 0 0;
  }

  .modal-politica-header h2 {
    font-size: 1.25rem;
  }

  .modal-politica-body {
    padding: 1.25rem;
  }

  .modal-politica-body h3 {
    font-size: 1.1rem;
  }

  .modal-politica-body p {
    text-align: left;
  }
}

@media (max-width: 480px) {
  .footer-links a {
    font-size: 0.85rem;
  }

  .modal-politica-header {
    padding: 0.875rem 1rem;
  }

  .modal-politica-header h2 {
    font-size: 1.1rem;
  }

  .modal-politica-fechar {
    font-size: 1.5rem;
    width: 28px;
    height: 28px;
  }

  .modal-politica-body {
    padding: 1rem;
    font-size: 0.9rem;
  }

  .modal-politica-body h3 {
    font-size: 1rem;
  }

  .modal-politica-body h4 {
    font-size: 0.95rem;
  }
}

/* Modal de Consulta de Frete */
.modal-overlay-frete {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay-frete.active {
  opacity: 1;
  visibility: visible;
}

.modal-frete {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--branco);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  max-width: 600px;
  width: 90%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

.modal-frete.active {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.modal-frete-header {
  padding: 1.5rem;
  border-bottom: 1px solid var(--cinza-claro);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, var(--verde-escuro) 0%, var(--verde-medio) 100%);
  color: var(--branco);
  border-radius: 12px 12px 0 0;
}

.modal-frete-header h3 {
  margin: 0;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.modal-frete-close {
  background: transparent;
  border: none;
  color: var(--branco);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 4px;
  transition: background-color 0.2s;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-frete-close:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.modal-frete-body {
  padding: 1.5rem;
  overflow-y: auto;
  flex: 1;
}

.consulta-frete-form {
  margin-bottom: 1.5rem;
}

.form-group-frete {
  margin-bottom: 1rem;
}

.form-group-frete label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: var(--cinza-escuro);
}

.input-group-frete {
  display: flex;
  gap: 0.5rem;
}

.input-group-frete input {
  flex: 1;
  padding: 0.75rem;
  border: 2px solid var(--cinza-claro);
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.3s;
}

.input-group-frete input:focus {
  outline: none;
  border-color: var(--verde-medio);
}

.btn-consultar-frete {
  padding: 0.75rem 1.5rem;
  background: var(--verde-escuro);
  color: var(--branco);
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}

.btn-consultar-frete:hover {
  background: var(--verde-medio);
}

.cep-endereco-info {
  display: block;
  margin-top: 0.5rem;
  color: var(--cinza-medio);
  font-size: 0.9rem;
}

.frete-loading {
  text-align: center;
  padding: 2rem;
  color: var(--cinza-medio);
}

.frete-loading i {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--verde-medio);
}

.frete-resultados {
  margin-top: 1rem;
}

.frete-opcoes-titulo {
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--cinza-claro);
}

.frete-opcoes-titulo h4 {
  margin: 0;
  color: var(--verde-escuro);
  font-size: 1.2rem;
}

.frete-opcao-card {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  border: 2px solid var(--cinza-claro);
  border-radius: 8px;
  margin-bottom: 1rem;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.frete-opcao-card:hover {
  border-color: var(--verde-medio);
  box-shadow: 0 4px 12px rgba(26, 77, 46, 0.1);
}

.frete-opcao-imagem {
  flex-shrink: 0;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cinza-claro);
  border-radius: 8px;
  overflow: hidden;
}

.frete-opcao-imagem img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.frete-opcao-info {
  flex: 1;
}

.frete-opcao-info h5 {
  margin: 0 0 0.75rem 0;
  color: var(--verde-escuro);
  font-size: 1.1rem;
}

.frete-opcao-detalhes {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.frete-opcao-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--cinza-escuro);
}

.frete-opcao-item i {
  color: var(--verde-medio);
  width: 20px;
}

.frete-opcao-item strong {
  color: var(--verde-escuro);
  font-size: 1.1rem;
}

.frete-erro {
  padding: 1rem;
  background: #fee;
  border: 2px solid #fcc;
  border-radius: 8px;
  color: #c33;
  margin-top: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Responsividade Modal Frete */
@media (max-width: 768px) {
  .modal-frete {
    width: 95%;
    max-height: 95vh;
  }

  .modal-frete-header {
    padding: 1rem;
  }

  .modal-frete-header h3 {
    font-size: 1.2rem;
  }

  .modal-frete-body {
    padding: 1rem;
  }

  .input-group-frete {
    flex-direction: column;
  }

  .btn-consultar-frete {
    width: 100%;
    justify-content: center;
  }

  .frete-opcao-card {
    flex-direction: column;
  }

  .frete-opcao-imagem {
    width: 100%;
    height: 150px;
  }
}