/* ===== CARDÁPIO - BASE CSS ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@400;500;600;700;800;900&display=swap');

/* ===== CSS RESET ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: 'Inter', sans-serif; line-height: 1.5; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
button, input, select { font-family: inherit; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }

/* ===== SHARED TOKENS ===== */
:root {
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg: 0 10px 40px rgba(0,0,0,0.12);
  --shadow-xl: 0 20px 60px rgba(0,0,0,0.16);

  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

  --z-overlay: 100;
  --z-modal: 200;
  --z-toast: 300;
  --z-header: 50;
}

/* ===== LAYOUT ===== */
.container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }

/* ===== HEADER SHARED ===== */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--bg-header);
  border-bottom: 1px solid var(--border-color);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.header-inner {
  display: flex; align-items: center; gap: 1.5rem;
  padding: 1rem 1.5rem;
  max-width: 1280px; margin: 0 auto;
}
.header-logo { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
.header-logo .logo-icon {
  width: 48px; height: 48px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  background: var(--primary);
  color: white;
}
.header-logo .logo-name { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.35rem; color: var(--text-primary); line-height: 1; }
.header-logo .logo-tag { font-size: 0.7rem; font-weight: 500; color: var(--text-muted); letter-spacing: 0.05em; }

.header-search {
  flex: 1;
  position: relative;
}
.header-search input {
  width: 100%;
  padding: 0.7rem 2.5rem 0.7rem 2.75rem;
  border-radius: var(--radius-full);
  border: 2px solid var(--border-color);
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: 0.9rem;
  transition: border-color var(--transition-fast);
}
.header-search input:focus { outline: none; border-color: var(--primary); }
.header-search input::placeholder { color: var(--text-muted); }
.header-search .search-icon {
  position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); font-size: 1rem; pointer-events: none;
}
/* Botão "limpar busca" (X), injetado pelo JS (initSearch em cardapio.js) só
   quando o campo tem texto: apagar sem precisar segurar Backspace.
   display:none por padrão, classe .visivel liga o flex; nunca depender só
   do atributo hidden aqui: um display explícito nesta regra venceria o
   [hidden] nativo do navegador por especificidade, e o botão apareceria
   sempre (bug real, pego testando antes de subir). */
.header-search .search-clear {
  position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border-radius: 50%; border: none; padding: 0;
  display: none; align-items: center; justify-content: center;
  background: var(--border-color); color: var(--text-secondary);
  font-size: 0.7rem; line-height: 1; cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.header-search .search-clear.visivel { display: flex; }
.header-search .search-clear:hover { background: var(--primary); color: #fff; }

/* Envolve o botão de sacola — o JS de meus-pedidos.js injeta o próprio
   botão como irmão anterior dentro do mesmo pai, então basta este wrapper
   existir no HTML pra CruxMeusPedidos.init() colocar os dois botões juntos
   aqui dentro, sem precisar tocar no JS. */
.header-actions {
  display: flex; align-items: center; gap: 0.6rem;
}

.header-cart-btn {
  position: relative;
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.65rem 1.25rem;
  border-radius: var(--radius-full);
  border: none; cursor: pointer;
  background: var(--primary);
  color: white;
  font-weight: 600; font-size: 0.9rem;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
  white-space: nowrap;
}
.header-cart-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.cart-badge {
  position: absolute; top: -6px; right: -6px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--accent);
  color: white; font-size: 0.7rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid white;
  opacity: 0; transform: scale(0);
  transition: all var(--transition-slow);
}
.cart-badge.visible { opacity: 1; transform: scale(1); }
.cart-badge.bounce { animation: badge-bounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes badge-bounce { 0%,100%{transform:scale(1)} 50%{transform:scale(1.4)} }

/* ===== CATEGORY TABS ===== */
.category-nav {
  background: var(--bg-base);
  border-bottom: 1px solid var(--border-color);
  position: sticky; top: 74px;
  z-index: 40;
}
.category-nav-inner {
  display: flex; align-items: center; gap: 0.25rem;
  padding: 0 1.5rem;
  max-width: 1280px; margin: 0 auto;
  overflow-x: auto; scrollbar-width: none;
}
.category-nav-inner::-webkit-scrollbar { display: none; }
.cat-tab {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.9rem 1.1rem;
  border: none; background: transparent; cursor: pointer;
  font-size: 0.875rem; font-weight: 500; color: var(--text-secondary);
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}
.cat-tab:hover { color: var(--primary); }
.cat-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.cat-tab .cat-emoji { font-size: 1.1rem; }

/* ===== PROMO BANNER ===== */
.promo-banner {
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: 1.5rem auto;
  max-width: 1280px;
  padding: 0 1.5rem;
}
.promo-banner-track {
  display: flex; gap: 1rem;
  overflow-x: auto; scrollbar-width: none;
  scroll-snap-type: x mandatory;
  padding-bottom: 0.5rem;
}
.promo-banner-track::-webkit-scrollbar { display: none; }
.promo-card {
  flex-shrink: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex; align-items: center;
  gap: 1.5rem;
  padding: 1.25rem 2rem;
  min-width: 380px;
  scroll-snap-align: start;
  background: var(--promo-bg);
  position: relative;
}
.promo-card-text { flex: 1; }
.promo-card-label {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--primary); margin-bottom: 0.4rem;
}
.promo-card-title {
  font-family: 'Outfit', sans-serif; font-size: 1.4rem; font-weight: 800;
  color: var(--text-primary); line-height: 1.2; margin-bottom: 0.5rem;
}
.promo-card-desc { font-size: 0.875rem; color: var(--text-secondary); }
.promo-card-price {
  font-family: 'Outfit', sans-serif; font-size: 1.6rem; font-weight: 900;
  color: var(--primary); margin-top: 0.75rem; display: block;
}
.promo-card-img {
  width: 120px; height: 120px; object-fit: cover; border-radius: var(--radius-md);
  flex-shrink: 0;
}

/* ===== SECTION ===== */
.products-section { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem 3rem; }
.section-title {
  font-family: 'Outfit', sans-serif; font-size: 1.5rem; font-weight: 800;
  color: var(--text-primary); margin-bottom: 1.25rem;
  scroll-margin-top: 140px;
}

/* ===== PRODUCT CARD ===== */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}
.product-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--border-color);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
  position: relative;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary);
}
.product-card-img-wrap {
  position: relative; width: 100%; padding-top: 65%; overflow: hidden;
}
.product-card-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.product-card:hover .product-card-img { transform: scale(1.05); }
.product-card-body { padding: 1rem; }
.product-card-name {
  font-weight: 700; font-size: 1rem; color: var(--text-primary);
  margin-bottom: 0.35rem;
}
.product-card-desc {
  font-size: 0.8rem; color: var(--text-muted); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-bottom: 0.85rem;
}
.product-card-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
}
.product-price-wrap { display: flex; flex-direction: column; }
.product-price-original {
  font-size: 0.75rem; color: var(--text-muted);
  text-decoration: line-through; line-height: 1;
}
.product-price {
  font-family: 'Outfit', sans-serif; font-size: 1.2rem; font-weight: 800;
  color: var(--price-color);
}
.btn-add {
  width: 38px; height: 38px; border-radius: 50%; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary); color: white; font-size: 1.2rem;
  transition: transform var(--transition-slow), background var(--transition-fast);
  flex-shrink: 0;
}
.btn-add:hover { transform: scale(1.15) rotate(90deg); }
.btn-add:active { transform: scale(0.95); }
.product-badge {
  position: absolute; top: 0.75rem; left: 0.75rem;
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-full);
  font-size: 0.7rem; font-weight: 700;
  background: var(--primary); color: white;
}
.product-badge.sale {
  background: var(--accent-green, #16a34a);
}

/* ===== CART SIDEBAR ===== */
.cart-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.35);
  z-index: var(--z-overlay);
  opacity: 0; pointer-events: none;
  transition: opacity var(--transition-base);
  backdrop-filter: blur(2px);
}
.cart-overlay.open { opacity: 1; pointer-events: all; }
.cart-sidebar {
  position: fixed; right: 0; top: 0; bottom: 0;
  width: min(420px, 100vw);
  background: var(--bg-card);
  box-shadow: var(--shadow-xl);
  z-index: var(--z-modal);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--transition-base);
}
.cart-sidebar.open { transform: translateX(0); }
.cart-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border-color);
  display: flex; align-items: center; justify-content: space-between;
}
.cart-title {
  font-family: 'Outfit', sans-serif; font-size: 1.2rem; font-weight: 800;
  color: var(--text-primary);
}
.cart-close {
  width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--bg-base); color: var(--text-secondary);
  font-size: 1.1rem; display: flex; align-items: center; justify-content: center;
  transition: all var(--transition-fast);
}
.cart-close:hover { background: var(--border-color); }
.cart-items { flex: 1; overflow-y: auto; padding: 1rem 1.5rem; }
.cart-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 200px; gap: 1rem;
  color: var(--text-muted); text-align: center;
}
.cart-empty-icon { font-size: 3rem; opacity: 0.4; }
.cart-item {
  display: flex; gap: 1rem; align-items: center; padding: 0.875rem 0;
  border-bottom: 1px solid var(--border-color);
}
.cart-item:last-child { border-bottom: none; }
.cart-item-img {
  width: 64px; height: 64px; border-radius: var(--radius-md);
  object-fit: cover; flex-shrink: 0;
}
.cart-item-info { flex: 1; }
.cart-item-name-row { display: flex; align-items: center; gap: 6px; }
.cart-item-name { font-weight: 600; font-size: 0.9rem; color: var(--text-primary); }
.cart-item-price { font-size: 0.85rem; color: var(--price-color); font-weight: 700; }
/* Ícone de editar (não emoji, pedido explícito) — só aparece em item com
   adicionais escolhidos. Reabre o modal do produto com o que já foi marcado,
   pra adicionar ou remover (Cardapio.editCartItem). */
.cart-item-edit {
  width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--border-color);
  background: var(--bg-base); color: var(--text-muted); cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; padding: 0;
  transition: all var(--transition-fast);
}
.cart-item-edit:hover { border-color: var(--primary); color: var(--primary); }
.cart-item-controls {
  display: flex; align-items: center; gap: 0.5rem;
}
.qty-btn {
  width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--border-color);
  background: var(--bg-base); color: var(--text-primary);
  font-size: 0.9rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition-fast);
}
.qty-btn:hover { border-color: var(--primary); color: var(--primary); }
.qty-btn.remove { border-color: #ef4444; color: #ef4444; }
.qty-value { font-weight: 700; min-width: 20px; text-align: center; color: var(--text-primary); }

/* Adicionais no carrinho: some por completo (sem innerHTML) quando não há
   par configurado, não há estoque real do outro lado, ou a loja publicada
   está em modo retrato sem backend — ver buscarSugestoes em cardapio.js. */
.cart-sugestoes:empty { display: none; }
.cart-sugestoes {
  padding: 0 1.5rem 1rem; border-top: 1px solid var(--border-color); padding-top: 1rem;
}
.cart-sugestoes-titulo {
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted); margin-bottom: 0.6rem;
}
.cart-sugestoes-lista {
  display: flex; gap: 0.6rem; overflow-x: auto; padding-bottom: 0.2rem;
}
.cart-sugestao {
  flex: 0 0 auto; width: 96px; display: flex; flex-direction: column; gap: 0.3rem;
  padding: 0.5rem; border: 1px solid var(--border-color); border-radius: var(--radius-md);
  background: var(--bg-base); cursor: pointer; text-align: left;
  transition: border-color var(--transition-fast);
}
.cart-sugestao:hover { border-color: var(--primary); }
.cart-sugestao img {
  width: 100%; height: 56px; object-fit: cover; border-radius: calc(var(--radius-md) - 2px);
}
.cart-sugestao-nome {
  font-size: 0.72rem; font-weight: 600; color: var(--text-primary); line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cart-sugestao-preco { font-size: 0.75rem; font-weight: 700; color: var(--price-color); }

.cart-footer { padding: 1.25rem 1.5rem; border-top: 1px solid var(--border-color); }
.cart-subtotal {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 0.5rem; font-size: 0.9rem; color: var(--text-secondary);
}
.cart-total {
  display: flex; justify-content: space-between; align-items: center;
  font-family: 'Outfit', sans-serif; font-size: 1.3rem; font-weight: 800;
  color: var(--text-primary); margin-bottom: 1.25rem;
}
.btn-checkout {
  width: 100%; padding: 1rem; border-radius: var(--radius-full);
  border: none; cursor: pointer;
  background: var(--primary); color: white;
  font-family: 'Outfit', sans-serif; font-size: 1.05rem; font-weight: 700;
  transition: all var(--transition-base);
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
}
.btn-checkout:hover { filter: brightness(1.08); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-checkout:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ===== PRODUCT MODAL ===== */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.45);
  z-index: var(--z-modal); opacity: 0; pointer-events: none;
  transition: opacity var(--transition-base);
  backdrop-filter: blur(3px);
}
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal-box {
  position: fixed; left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(0.92);
  width: min(700px, 95vw);
  max-height: 90vh; overflow-y: auto;
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  z-index: calc(var(--z-modal) + 1);
  transition: transform var(--transition-slow), opacity var(--transition-base);
  opacity: 0; pointer-events: none;
}
.modal-overlay.open + .modal-box,
.modal-box.open {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1; pointer-events: all;
}
.modal-img { width: 100%; height: 280px; object-fit: cover; }
/* O reset genérico "img { display: block }" (topo deste arquivo) vence o
   atributo `hidden` do JS (openModal, cardapio.js) — regra de origem autor
   sempre bate regra de user-agent, specificity não decide isso. Sem isto,
   produto sem foto (a maioria, ver comentário em planeta-xis/boot.js)
   mostrava uma caixa branca vazia com ícone de imagem quebrada no modal. */
.modal-img[hidden] { display: none; }
.modal-body { padding: 1.5rem; }
.modal-title {
  font-family: 'Outfit', sans-serif; font-size: 1.6rem; font-weight: 800;
  color: var(--text-primary); margin-bottom: 0.5rem;
}
.modal-desc { font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 1.25rem; line-height: 1.6; }
.modal-price {
  font-family: 'Outfit', sans-serif; font-size: 1.5rem; font-weight: 900;
  color: var(--price-color); margin-bottom: 1.5rem;
}
.modal-options-title {
  font-weight: 700; font-size: 0.85rem; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.75rem;
}
.modal-options { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.25rem; }
.modal-option {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem;
  border: 1.5px solid var(--border-color); border-radius: var(--radius-md);
  cursor: pointer; transition: all var(--transition-fast);
}
.modal-option:hover { border-color: var(--primary); background: var(--promo-bg); }
.modal-option.selected { border-color: var(--primary); background: var(--promo-bg); }
.modal-option input { width: 18px; height: 18px; accent-color: var(--primary); }
.modal-option-name { flex: 1; font-weight: 500; color: var(--text-primary); }
.modal-option-price { font-weight: 700; color: var(--primary); font-size: 0.9rem; }
.modal-footer {
  display: flex; align-items: center; gap: 1rem; padding-top: 1rem;
  border-top: 1px solid var(--border-color);
}
.modal-qty-controls {
  display: flex; align-items: center; gap: 0.75rem;
  border: 1.5px solid var(--border-color); border-radius: var(--radius-full);
  padding: 0.5rem 1rem;
}
.modal-qty-btn {
  background: none; border: none; cursor: pointer;
  color: var(--primary); font-size: 1.1rem; font-weight: 700;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
}
.modal-qty-val { font-weight: 700; min-width: 24px; text-align: center; color: var(--text-primary); }
.btn-add-modal {
  flex: 1; padding: 0.875rem; border-radius: var(--radius-full);
  border: none; cursor: pointer;
  background: var(--primary); color: white;
  font-family: 'Outfit', sans-serif; font-size: 1rem; font-weight: 700;
  transition: all var(--transition-base);
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
}
.btn-add-modal:hover { filter: brightness(1.08); transform: translateY(-2px); }
.modal-close-btn {
  position: absolute; top: 1rem; right: 1rem;
  width: 38px; height: 38px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(0,0,0,0.4); color: white; font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition-fast);
}
.modal-close-btn:hover { background: rgba(0,0,0,0.65); }
.modal-box { position: relative; }

/* ===== CHECKOUT (crx-co-*) — injetado por _shared/checkout.js ===== */
/* Sheet de baixo pra cima, não modal centralizado: é o padrão já provado em
   jardim-europa (a primeira loja a ter checkout de verdade), e combina mais
   com "fechando um carrinho" do que o modal de produto centralizado. */
.crx-co-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  z-index: var(--z-modal); opacity: 0; pointer-events: none;
  transition: opacity var(--transition-base);
}
.crx-co-overlay.open { opacity: 1; pointer-events: all; }
.crx-co-sheet {
  position: fixed; left: 50%; bottom: 0; transform: translate(-50%, 100%);
  width: min(560px, 100%); max-height: 88vh; overflow-y: auto; overflow-x: hidden;
  background: var(--bg-card); border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  z-index: calc(var(--z-modal) + 1);
  transition: transform var(--transition-slow);
  display: flex; flex-direction: column;
}
.crx-co-sheet.open { transform: translate(-50%, 0); }
.crx-co-grip { width: 44px; height: 4px; border-radius: 4px; background: var(--border-color); margin: 11px auto 0; flex: 0 0 auto; }
.crx-co-close {
  position: absolute; top: 12px; right: 14px; background: none; border: 0;
  color: var(--text-muted); font-size: 19px; cursor: pointer; line-height: 1;
}
/* overflow-x: hidden explícito nos dois — sem isso, overflow-y:auto sozinho
   faz o navegador computar overflow-x como "auto" também (regra da spec de
   CSS Overflow: um eixo non-visible força o outro a virar auto), abrindo
   scroll horizontal que empurra o conteúdo pra fora da tela em telas
   estreitas. Achado ao vivo no celular do Andrei (2026-08-30): o formulário
   de "Fechar pedido" aparecia com a metade esquerda cortada no mobile.
   min-width:0 nos itens de grid/flex abaixo é o outro lado do mesmo bug —
   sem isso, o item nunca encolhe além do tamanho do próprio conteúdo
   (default do CSS é min-width:auto, não 0), e um <input> ou botão com texto
   mais comprido que a coluna força a grade/flex inteira a estourar a
   largura da tela, mesmo com 1fr/flex:1 pedindo pra encolher. */
.crx-co-scroll { overflow-y: auto; overflow-x: hidden; padding: 18px 24px 20px; }
.crx-co-title { font-size: 1.3rem; font-weight: 800; margin: 0 0 14px; color: var(--text-primary); }

.crx-co-modo { display: flex; gap: 8px; margin-bottom: 20px; }
.crx-co-modo-btn {
  flex: 1; min-width: 0; background: none; border: 1px solid var(--border-color); color: var(--text-secondary);
  font-weight: 700; font-size: 13px; padding: 12px; border-radius: var(--radius-md); cursor: pointer;
}
.crx-co-modo-btn.active { border-color: var(--primary); color: var(--primary); background: var(--promo-bg); }
/* [hidden] tem a mesma especificidade de .crx-co-modo{display:flex} — sem esta
   regra, o atributo hidden é ignorado (CSS de autor sempre vence CSS de user
   agent, mesmo empatado em especificidade). Achado ao vivo: o toggle Pix/
   Cartão aparecia mesmo com MP_PUBLIC_KEY não configurada. */
.crx-co-modo[hidden] { display: none; }

.crx-co-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; min-width: 0; }
/* mesmo problema do .crx-co-modo acima, pro formulário de cartão (#crx-co-cartao). */
.crx-co-campos[hidden] { display: none; }
.crx-co-campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.crx-co-campo-larga { grid-column: 1 / -1; }
.crx-co-campo span { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.crx-co-campo input, .crx-co-campo textarea {
  width: 100%; min-width: 0; box-sizing: border-box;
  background: var(--bg-base); border: 1px solid var(--border-color); border-radius: var(--radius-md);
  padding: 11px 13px; color: var(--text-primary); font-size: 14.5px; font-family: inherit;
}
.crx-co-campo textarea { resize: vertical; }
.crx-co-campo input:focus, .crx-co-campo textarea:focus { outline: none; border-color: var(--primary); }
.crx-co-pagamento-1x { grid-column: 1 / -1; margin: -4px 0 0; font-size: 12.5px; color: var(--text-muted); }

.crx-co-cupom { margin-bottom: 14px; }
.crx-co-cupom-linha { display: flex; gap: 8px; }
.crx-co-cupom-linha input { flex: 1; min-width: 0; text-transform: uppercase; }
.crx-co-cupom-btn {
  flex: none; background: none; border: 1px solid var(--border-color); color: var(--text-primary);
  font-weight: 700; font-size: 13px; padding: 0 16px; border-radius: var(--radius-md); cursor: pointer;
}
.crx-co-cupom-btn:disabled { opacity: .6; cursor: default; }
.crx-co-cupom-msg { font-size: 12.5px; margin: 6px 0 0; }
.crx-co-cupom-msg.ok { color: var(--primary); font-weight: 700; }
.crx-co-cupom-msg.erro { color: #E4796B; }

.crx-co-frete-wrap { margin-bottom: 14px; }
.crx-co-frete-status { font-size: 13px; color: var(--text-muted); margin: 0 0 8px; }
.crx-co-frete-opcoes { display: flex; flex-direction: column; gap: 8px; }
.crx-co-frete-opcoes .crx-co-modo-btn { flex: none; display: flex; justify-content: space-between; align-items: center; gap: 10px; text-align: left; }
.crx-co-frete-opcoes .crx-co-modo-btn small { display: block; font-weight: 500; color: var(--text-muted); font-size: 11.5px; margin-top: 2px; }

.crx-co-resumo { border-top: 1px solid var(--border-color); padding-top: 14px; margin-top: 4px; font-size: 14px; color: var(--text-secondary); }
.crx-co-resumo .l { display: flex; justify-content: space-between; padding: 3px 0; }
.crx-co-resumo .l.t { color: var(--text-primary); font-weight: 800; font-size: 16px; padding-top: 9px; margin-top: 6px; border-top: 1px solid var(--border-color); }
.crx-co-resumo .l span:last-child { font-variant-numeric: tabular-nums; }
.crx-co-erro { color: #E4796B; font-size: 14px; margin: 12px 0 0; }

.crx-co-foot { flex: 0 0 auto; padding: 14px 24px 20px; border-top: 1px solid var(--border-color); background: var(--bg-card); }
.crx-co-confirmar {
  width: 100%; background: var(--primary); color: #fff; border: 0;
  font-weight: 800; font-size: 14.5px; padding: 14px 18px; border-radius: var(--radius-md); cursor: pointer;
}
.crx-co-confirmar:hover { filter: brightness(0.94); }
.crx-co-confirmar:disabled { opacity: 0.6; cursor: not-allowed; }

.crx-co-ok { text-align: center; }
.crx-co-ok-body { padding: 34px 28px 30px; }
.crx-co-ok-selo {
  width: 58px; height: 58px; border-radius: 999px; margin: 0 auto 16px;
  display: grid; place-items: center; font-size: 27px;
  background: rgba(46,160,96,.13); color: #2EA060; border: 2px solid #2EA060;
}
.crx-co-ok-num { font-weight: 800; font-size: 27px; color: var(--price-color); margin: 8px 0 10px; letter-spacing: .02em; }
.crx-co-ok-txt { color: var(--text-secondary); font-size: 14.5px; margin: 0 0 22px; }

/* ===== MEUS PEDIDOS (sem conta) ===== */
/* Botão de entrada injetado ao lado da sacola (mesmo header-inner flex) —
   degradê nas cores PRIMÁRIAS da própria loja (--primary/--primary-dark, já
   definidas por cada storefront), pra chamar atenção sem depender de mais
   nenhuma cor nova por loja. Texto sempre visível: um ícone sozinho ("o que
   é isso?") é exatamente o problema que motivou trocar o botão flutuante. */
.crx-mp-trigger {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.65rem 1.1rem;
  border-radius: var(--radius-full); border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: white; font-weight: 700; font-size: 0.85rem; white-space: nowrap;
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.crx-mp-trigger:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.crx-mp-busca-titulo { font-size: 12.5px; color: var(--text-muted); margin: 18px 0 10px; }
.crx-mp-vazio { color: var(--text-muted); font-size: 13.5px; padding: 10px 0; }
.crx-mp-item {
  border: 1px solid var(--border-color); border-radius: var(--radius-md);
  padding: 12px 14px; margin-bottom: 8px;
}
.crx-mp-item-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 14.5px; }
.crx-mp-status { font-size: 12px; font-weight: 700; color: var(--primary); }
.crx-mp-item-itens { font-size: 12.5px; color: var(--text-secondary); margin-top: 4px; }

/* ===== TOAST ===== */
.toast-container {
  position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
  z-index: var(--z-toast); display: flex; flex-direction: column; gap: 0.5rem;
  pointer-events: none; align-items: center;
}
.toast {
  background: var(--text-primary); color: var(--bg-base);
  padding: 0.75rem 1.5rem; border-radius: var(--radius-full);
  font-weight: 600; font-size: 0.9rem;
  display: flex; align-items: center; gap: 0.5rem;
  box-shadow: var(--shadow-lg);
  animation: toast-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}
.toast.out { animation: toast-out 0.3s ease forwards; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(20px) scale(0.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toast-out {
  to { opacity: 0; transform: translateY(-10px) scale(0.95); }
}

/* ===== PWA — instalar / ativar notificação ===== */
/* #pwa-banner é o container único que pwa.js injeta: só existe um banner por
   vez (instalar OU notificar), nunca dois competindo por atenção. Vazio
   (:empty) não ocupa espaço nenhum na página. */
#pwa-banner:empty { display: none; }
/* Estilo "barra", não "card flutuante" — pedido do Andrei (2026-09-04),
   inspirado na barra de app da Amazon (plana, sem sombra, sem cantos
   arredondados, sem animação de bounce). A diferença de posição é
   proposital: a Amazon fica colada no topo/cabeçalho; aqui fica fixa
   embaixo (mesmo lugar que já era no mobile, agora igual em qualquer
   tamanho de tela — sem a versão "card centralizado" que só existia a
   partir de 640px). Continua abaixo do modal/checkout de propósito
   (z-overlay, não z-toast): convite persistente, não compete com um
   pedido sendo fechado. */
.pwa-toast {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-overlay);
  display: flex; align-items: center; gap: 0.65rem;
  background: var(--bg-card); border-top: 1px solid var(--border-color);
  padding: 0.6rem 0.9rem; padding-bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px));
  animation: pwa-toast-in 0.25s ease-out;
}
@keyframes pwa-toast-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.pwa-toast-icone { font-size: 1.3rem; flex-shrink: 0; line-height: 1; }
.pwa-toast-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.pwa-toast-texto strong { font-size: 0.85rem; color: var(--text-primary); }
.pwa-toast-texto span { font-size: 0.74rem; color: var(--text-secondary); line-height: 1.3; }
.pwa-toast--ios .pwa-toast-texto span { color: var(--text-primary); }
/* Contorno, não preenchido — o botão da Amazon é discreto (pílula com borda),
   não um CTA gritando pra cima do resto da barra. */
.pwa-toast-btn {
  flex-shrink: 0; background: transparent; color: var(--primary);
  border: 1.5px solid var(--primary); border-radius: 999px; padding: 0.4rem 0.9rem;
  font-weight: 700; font-size: 0.78rem; cursor: pointer; white-space: nowrap;
}
.pwa-toast-btn:hover { background: var(--primary); color: #fff; }
.pwa-toast-fechar {
  flex-shrink: 0; background: none; border: none; color: var(--text-muted);
  font-size: 0.95rem; cursor: pointer; padding: 0.25rem; line-height: 1;
}

/* ===== FOOTER ===== */
.site-footer {
  background: var(--bg-footer);
  border-top: 1px solid var(--border-color);
  padding: 2rem 1.5rem;
  text-align: center;
}
.footer-inner { max-width: 1280px; margin: 0 auto; }
.footer-brand {
  font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.1rem;
  color: var(--primary); margin-bottom: 0.5rem;
}
.footer-powered {
  font-size: 0.8rem; color: var(--text-muted);
}
.footer-powered span { color: var(--primary); font-weight: 600; }

/* ===== PAUSA MANUAL DE PEDIDOS (store-status.js) ===== */
/* Vermelho fixo, independente da cor de marca de cada loja — sinaliza
   "decisão do dono agora", mais urgente que o aviso neutro de "fechado por
   horário" (que continua usando --accent de cada loja). Especificidade de
   2 classes já vence a regra .aviso-fechada de cada style.css sem precisar
   de !important. */
.aviso-fechada.aviso-pausada {
  background: #DC2626;
  color: #fff;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .header-inner { padding: 0.875rem 1rem; gap: 0.875rem; flex-wrap: wrap; justify-content: space-between; }
  .header-search { order: 3; flex: 1 1 100%; }
  .header-logo .logo-name { font-size: 1.1rem; }
  /* Texto sempre visível nos dois botões (Sacola e Meus Pedidos) — um ícone
     sozinho some visualmente no mobile e ninguém entende o que é (achado
     testando a Planeta Xis, 2026-08-29). Pra caber sem disputar espaço com
     o logo, .header-actions empilha os dois em vez de lado a lado. */
  .header-actions { flex-direction: column; align-items: stretch; gap: 0.4rem; }
  .header-actions .header-cart-btn,
  .header-actions .crx-mp-trigger { width: 100%; justify-content: center; padding: 0.55rem 0.9rem; }
  .promo-card { min-width: 280px; padding: 1rem 1.25rem; }
  .products-grid { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 0.875rem; }
  .product-card-body { padding: 0.75rem; }
  .cart-sidebar { width: 100%; }
  .modal-box { width: 100%; max-height: 100vh; border-radius: var(--radius-xl) var(--radius-xl) 0 0; top: auto; bottom: 0; left: 0; transform: translateY(100%); }
  .modal-box.open { transform: translateY(0); }
  .promo-banner { padding: 0 1rem; }
  .products-section { padding: 0 1rem 5rem; }
  .category-nav-inner { padding: 0 1rem; }
  .cat-tab { padding: 0.75rem 0.875rem; font-size: 0.8rem; }
}

@media (max-width: 480px) {
  .products-grid { grid-template-columns: 1fr 1fr; }
  .product-price { font-size: 1rem; }
}

/* ===== LOADING SKELETON ===== */
.skeleton {
  background: linear-gradient(90deg, var(--border-color) 25%, var(--bg-base) 50%, var(--border-color) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ===== SCROLL TO TOP ===== */
.scroll-top-btn {
  position: fixed; bottom: 5rem; right: 1.5rem;
  width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--primary); color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; box-shadow: var(--shadow-md);
  opacity: 0; transform: translateY(20px);
  transition: all var(--transition-base);
  z-index: 30;
}
.scroll-top-btn.visible { opacity: 1; transform: translateY(0); }
.scroll-top-btn:hover { transform: translateY(-4px); }

/* ===== AGE GATE (_shared/age-gate.js) ===== */
/* Usa as variáveis já definidas por CADA loja (--bg-header/--primary/etc.)
   com fallback, pra reaproveitar automaticamente a paleta de quem chamar
   este módulo sem precisar de CSS próprio por loja. */
#age-gate-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg-header, #1b1712);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
}
.age-gate-box {
  max-width: 380px; width: 100%; text-align: center;
  background: var(--bg-card, #fff);
  border-radius: var(--radius-lg, 14px);
  padding: 2rem 1.75rem;
  box-shadow: var(--shadow-lg, 0 20px 40px rgba(0,0,0,.35));
}
.age-gate-title {
  margin: 0 0 .5rem; font-weight: 800; font-size: 1.05rem;
  color: var(--primary, #24422f); text-transform: uppercase; letter-spacing: .04em;
}
.age-gate-pergunta { margin: 0 0 .6rem; font-size: 1.15rem; font-weight: 700; color: var(--text-primary, #241C10); }
.age-gate-aviso { margin: 0 0 1.4rem; font-size: .88rem; color: var(--text-secondary, #5C4E36); line-height: 1.5; }
.age-gate-botoes { display: flex; flex-direction: column; gap: .6rem; }
.age-gate-btn {
  border: none; border-radius: var(--radius-md, 10px); padding: .8rem 1rem;
  font-weight: 800; font-size: .92rem; cursor: pointer;
}
.age-gate-btn-sim { background: var(--primary, #24422f); color: #fff; }
.age-gate-btn-sim:hover { background: var(--primary-dark, #1b3323); }
.age-gate-btn-nao { background: none; border: 1.5px solid var(--border-color, #E6DFC9); color: var(--text-secondary, #5C4E36); }
.age-gate-btn-nao:hover { border-color: var(--primary, #24422f); color: var(--primary, #24422f); }