/* ==========================================================================
   Cópia e Cia Itajaí — Sistema de design
   Paleta oficial da marca, extraída de copiaecia.com.br e da logo:
   azul marinho #0A1B65, azul claro #63B9FB, amarelo #FFD800, laranja #F1592A
   Base tipográfica: Poppins (display) + Inter (texto/UI)
   Assinatura: marcas de registro gráfico (crop marks) e barra CMYK
   ========================================================================== */

:root {
  /* Marca */
  --azul: #0a1b65;          /* azul marinho do símbolo */
  --azul-escuro: #071349;   /* topo e estados pressionados */
  --azul-medio: #2e4a9e;    /* símbolo na versão clara da logo */
  --azul-claro: #e4ecfb;    /* fundo suave */
  --azul-topo: #071349;
  --ciano: #63b9fb;         /* azul claro do "&CIA" */
  --ciano-escuro: #2f93e0;

  /* Acento */
  --laranja: #f1592a;       /* laranja da marca: logo, ícones, texto grande */
  --laranja-acao: #d4451c;  /* fundo com texto branco — 4.5:1, o tom da marca só chega a 3.4:1 */
  --laranja-escuro: #b53a17;
  --amarelo: #ffd800;       /* destaques e lançamentos */
  --amarelo-escuro: #e0be00;
  --promo: #d81e05;

  /* Neutros */
  --tinta: #1e2753;         /* texto principal do site oficial */
  --tinta-2: #4a5573;
  --tinta-3: #667089;       /* 4.6:1 sobre branco — mínimo do WCAG AA */
  --linha: #dfe4ef;
  --fundo: #f4f6fb;
  --grafite: #0a1b65;       /* rodapé no azul da marca */
  --grafite-2: #071349;

  /* Estrutura */
  --raio: 7px;
  --raio-lg: 12px;
  --container: 1240px;
  --sombra: 0 1px 2px rgba(28, 31, 35, .06), 0 4px 14px rgba(28, 31, 35, .05);
  --sombra-alta: 0 6px 12px rgba(28, 31, 35, .08), 0 18px 40px rgba(28, 31, 35, .1);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--tinta);
  background: #fff;
  overflow-x: hidden;
  font-feature-settings: "cv11", "ss01";
}

h1, h2, h3, h4, .display {
  font-family: Poppins, Inter, sans-serif;
  letter-spacing: -.02em;
  margin: 0;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }

:focus-visible {
  outline: 3px solid var(--azul);
  outline-offset: 2px;
  border-radius: 4px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 16px;
}

/* --------------------------------------------------------------------------
   Assinatura: barra CMYK + marcas de registro
   -------------------------------------------------------------------------- */
.cmyk-bar {
  height: 3px;
  display: flex;
}
.cmyk-bar span { flex: 1; }
.cmyk-bar span:nth-child(1) { background: var(--ciano); }
.cmyk-bar span:nth-child(2) { background: var(--laranja); }
.cmyk-bar span:nth-child(3) { background: var(--amarelo); }
.cmyk-bar span:nth-child(4) { background: var(--azul); }

/* Marcas de corte no título de seção */
.secao-titulo {
  position: relative;
  display: inline-block;
  font-size: 22px;
  font-weight: 700;
  padding: 0 22px;
}
.secao-titulo::before,
.secao-titulo::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  transform: translateY(-50%);
  border: 1.5px solid var(--azul);
  opacity: .5;
}
.secao-titulo::before { left: 0; border-right: 0; border-bottom: 0; }
.secao-titulo::after { right: 0; border-left: 0; border-top: 0; }

@media (min-width: 768px) {
  .secao-titulo { font-size: 27px; }
}

/* --------------------------------------------------------------------------
   Topo promocional
   -------------------------------------------------------------------------- */
.topbar {
  background: var(--azul-topo);
  color: #fff;
  font-size: 12px;
}
.topbar-cupom {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--amarelo);
  color: var(--tinta);
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: .04em;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.header-linha {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 66px;
}
.header-logo { flex: 0 0 auto; }
.header-logo svg { width: 168px; height: auto; }

.busca-form {
  position: relative;
  flex: 1;
  max-width: 520px;
}

.header-acoes {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

/* No celular a busca ganha uma linha inteira: é o principal caminho de entrada */
@media (max-width: 767px) {
  .header-linha {
    height: auto;
    flex-wrap: wrap;
    row-gap: 8px;
    padding-block: 10px;
  }
  .header-logo svg { width: 132px; }
  .busca-form { order: 3; flex: 1 0 100%; max-width: none; }
  .busca-campo { height: 40px; font-size: 16px; } /* 16px evita o zoom automático do iOS */
  .header-acao { padding: 10px 7px; min-height: 44px; }
  .carrossel-seta { width: 44px; height: 44px; }
  .nav-item > button, .nav-item > a { height: 44px; }
}

.header-acao {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--raio);
  transition: background-color .2s ease;
  cursor: pointer;
  white-space: nowrap;
}
.header-acao:hover { background: var(--azul-claro); }

.busca-campo {
  width: 100%;
  height: 42px;
  border: 2px solid var(--linha);
  border-radius: var(--raio);
  padding: 0 44px 0 14px;
  font-size: 14px;
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.busca-campo:focus {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 4px rgba(0, 87, 231, .12);
}
.busca-btn {
  position: absolute;
  right: 4px;
  top: 4px;
  bottom: 4px;
  width: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 5px;
  background: var(--azul);
  color: #fff;
  cursor: pointer;
  transition: background-color .2s ease;
}
.busca-btn:hover { background: var(--azul-escuro); }

.badge-contador {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--promo);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: grid;
  place-items: center;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   Navegação azul + mega menu
   -------------------------------------------------------------------------- */
.nav-principal {
  background: var(--azul);
  color: #fff;
  position: relative;
  z-index: 60;
}
.nav-lista {
  display: flex;
  align-items: stretch;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav-lista::-webkit-scrollbar { display: none; }

.nav-item > button,
.nav-item > a {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .18s ease;
}
.nav-item > button:hover,
.nav-item > a:hover,
.nav-item.aberto > button { background: rgba(255, 255, 255, .16); }

.nav-destaque {
  background: var(--laranja-acao) !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 4px;
  height: 28px !important;
  align-self: center;
}
.nav-destaque:hover { background: var(--laranja-escuro) !important; }

.megamenu {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: #fff;
  color: var(--tinta);
  box-shadow: var(--sombra-alta);
  border-top: 1px solid rgba(255, 255, 255, .25);
  display: none;
}
.nav-item.aberto .megamenu { display: block; }

.megamenu-col h4 {
  font-size: 13px;
  font-weight: 700;
  color: var(--azul);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--linha);
}
/* `:not(.btn)` porque a coluna "Precisa de ajuda?" tem um botão dentro dela.
   Sem a exceção, o seletor de tipo vence o do botão e desmancha as duas
   coisas de uma vez: `display: block` tira o alinhamento do ícone com o
   rótulo, e o azul do hover pinta o texto branco da cor do próprio fundo. */
.megamenu-col a:not(.btn) {
  display: block;
  padding: 3px 0;
  color: var(--tinta-2);
  font-size: 12.5px;
  transition: color .15s ease, transform .15s ease;
}
.megamenu-col a:not(.btn):hover { color: var(--azul); transform: translateX(2px); }

/* --------------------------------------------------------------------------
   Carrossel de banners
   -------------------------------------------------------------------------- */
.carrossel {
  position: relative;
  overflow: hidden;
  border-radius: var(--raio);
  background: var(--fundo);
}
.carrossel-trilho {
  display: flex;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}
.carrossel-slide { min-width: 100%; }

.carrossel-seta {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: var(--tinta);
  cursor: pointer;
  box-shadow: var(--sombra);
  transition: background-color .2s ease;
  z-index: 2;
}
.carrossel-seta:hover { background: #fff; }
.carrossel-seta[data-dir="prev"] { left: 12px; }
.carrossel-seta[data-dir="next"] { right: 12px; }

.carrossel-pontos {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 2;
}
.carrossel-ponto {
  width: 8px;
  height: 8px;
  border: 0;
  padding: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .55);
  cursor: pointer;
  transition: width .25s ease, background-color .25s ease;
}
.carrossel-ponto.ativo { width: 22px; background: #fff; }

/* --------------------------------------------------------------------------
   Trilho horizontal (categorias e vitrines)
   -------------------------------------------------------------------------- */
.trilho {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding-bottom: 6px;
  scrollbar-width: none;
}
.trilho::-webkit-scrollbar { display: none; }
.trilho > * { scroll-snap-align: start; flex: 0 0 auto; }

.trilho-wrap { position: relative; }
.trilho-seta {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  display: none;
  place-items: center;
  border: 1px solid var(--linha);
  border-radius: 999px;
  background: #fff;
  color: var(--tinta);
  cursor: pointer;
  box-shadow: var(--sombra);
  z-index: 3;
  transition: border-color .2s ease, color .2s ease;
}
.trilho-seta:hover { border-color: var(--azul); color: var(--azul); }
.trilho-seta[data-dir="prev"] { left: -14px; }
.trilho-seta[data-dir="next"] { right: -14px; }
@media (min-width: 1024px) { .trilho-seta { display: grid; } }

/* --------------------------------------------------------------------------
   Card de categoria
   -------------------------------------------------------------------------- */
.cat-card {
  width: 116px;
  text-align: center;
  cursor: pointer;
}
.cat-card figure {
  margin: 0 0 6px;
  border-radius: var(--raio);
  overflow: hidden;
  background: var(--fundo);
  border: 1px solid var(--linha);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.cat-card:hover figure {
  border-color: var(--azul);
  box-shadow: var(--sombra);
}
.cat-card span {
  font-size: 12px;
  font-weight: 600;
  color: var(--tinta-2);
  display: block;
  line-height: 1.3;
}
.cat-card:hover span { color: var(--azul); }

/* --------------------------------------------------------------------------
   Card de produto
   -------------------------------------------------------------------------- */
.produto-card {
  width: 236px;
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 10px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  position: relative;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.produto-card:hover {
  border-color: #cfd6de;
  box-shadow: var(--sombra-alta);
}
/* Barra CMYK revelada no hover — remete ao registro de cor da impressão */
.produto-card::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -1px;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, #00aeef 0 25%, #ec008c 25% 50%, #fff200 50% 75%, var(--tinta) 75% 100%);
  opacity: 0;
  transition: opacity .2s ease;
}
.produto-card:hover::after { opacity: 1; }

.produto-figura {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 5px;
  overflow: hidden;
  background: var(--fundo);
  margin-bottom: 10px;
}
.produto-figura img,
.produto-figura svg { width: 100%; height: 100%; object-fit: cover; }

.produto-selo {
  position: absolute;
  top: 8px;
  left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  z-index: 1;
}
.selo-lancamento { background: var(--amarelo); color: var(--tinta); }
.selo-oferta { background: var(--laranja-acao); color: #fff; }
.selo-frete { background: var(--azul); color: #fff; }
.selo-arte { background: var(--ciano); color: var(--azul); }

.produto-categoria {
  font-size: 10.5px;
  color: var(--tinta-3);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
  margin-bottom: 3px;
}
.produto-nome {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--tinta);
  margin-bottom: 5px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 35px;
}
.produto-card:hover .produto-nome { color: var(--azul); }

.produto-specs {
  font-size: 11px;
  color: var(--tinta-3);
  line-height: 1.4;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 31px;
}

.estrelas { display: inline-flex; gap: 1px; }
.estrelas svg { width: 11px; height: 11px; }

.produto-preco {
  font-family: Poppins, sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--tinta);
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.produto-unidade { font-size: 11px; color: var(--tinta-3); font-weight: 500; }

/* --------------------------------------------------------------------------
   Banners e blocos
   -------------------------------------------------------------------------- */
.banner-link {
  display: block;
  border-radius: var(--raio);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.banner-link:hover { box-shadow: var(--sombra-alta); }

.servico-card {
  position: relative;
  border-radius: var(--raio);
  overflow: hidden;
  cursor: pointer;
  min-height: 178px;
}
.servico-card > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* Bento 2x2 + 4 células menores: o card em destaque ocupa o quadrante maior */
.grade-servicos {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 900px) {
  .grade-servicos { grid-template-columns: repeat(4, 1fr); }
  .servico-card.destaque { grid-column: span 2; grid-row: span 2; }
}

.servico-card figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 26px 14px 12px;
  background: linear-gradient(to top, rgba(0, 0, 0, .78), transparent);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
}

.post-card {
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  overflow: hidden;
  background: #fff;
  cursor: pointer;
  transition: box-shadow .2s ease, border-color .2s ease;
  display: flex;
  flex-direction: column;
}
.post-card:hover { box-shadow: var(--sombra-alta); border-color: #cfd6de; }
.post-card h3 { font-size: 14px; font-weight: 700; line-height: 1.35; }
.post-card:hover h3 { color: var(--azul); }

/* --------------------------------------------------------------------------
   Texto institucional (SEO)
   -------------------------------------------------------------------------- */
.texto-seo {
  font-size: 12px;
  color: var(--tinta-2);
  line-height: 1.7;
}
.texto-seo h2 { font-size: 20px; margin-bottom: 10px; color: var(--tinta); }
.texto-seo h3 { font-size: 15px; margin: 20px 0 6px; color: var(--tinta); }
.texto-seo p { margin: 0 0 10px; }
.texto-seo a { color: var(--azul); font-weight: 600; }
.texto-seo a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Rodapé
   -------------------------------------------------------------------------- */
.rodape { background: var(--grafite); color: #d6d9dd; font-size: 12px; }
.rodape h4 {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 10px;
}
.rodape a { color: #b9bec5; display: inline-block; padding: 2.5px 0; transition: color .15s ease; }
.rodape a:hover { color: var(--ciano); }
.rodape-divisor { border-top: 1px solid rgba(255, 255, 255, .1); }
.rodape-tags { background: var(--grafite-2); }
.rodape-tags a { color: #9aa0a8; font-size: 11px; }

.pgto-chip {
  width: 38px;
  height: 25px;
  border-radius: 4px;
  background: #fff;
  display: grid;
  place-items: center;
  font-size: 8px;
  font-weight: 800;
  color: var(--tinta);
  letter-spacing: -.02em;
}
.social-chip {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  display: grid;
  place-items: center;
  color: #fff;
  transition: background-color .2s ease, transform .2s ease;
}
.social-chip:hover { background: var(--azul); }

/* --------------------------------------------------------------------------
   Avisos flutuantes
   -------------------------------------------------------------------------- */
.aviso-frete {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 70;
  max-width: 310px;
  background: #fff;
  border: 1px solid var(--linha);
  border-left: 4px solid var(--amarelo);
  border-radius: var(--raio);
  box-shadow: var(--sombra-alta);
  padding: 12px 34px 12px 12px;
  animation: sobe .4s ease both;
}
@keyframes sobe {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.cookie-banner {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 80;
  background: var(--grafite);
  color: #e6e8eb;
  padding: 14px 0;
}

.whats-flutuante {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 70;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: #25d366;
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: var(--sombra-alta);
  transition: transform .2s ease;
}
.whats-flutuante:hover { transform: scale(1.06); }

/* --------------------------------------------------------------------------
   Botões
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--raio);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  /* O rótulo não quebra: com altura fixa, uma segunda linha vaza para fora do
     botão. Em caixa estreita (o "Chamar no WhatsApp" do megamenu) é o texto
     que precisa encolher, nunca o ícone — por isso o `flex: none` no svg, sem
     o qual o flex espremia o ícone e deixava o WhatsApp oval. */
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn > svg { flex: none; }
.btn-primario { background: var(--azul); color: #fff; }
.btn-primario:hover { background: var(--azul-escuro); }
/* Laranja fica reservado para o passo que gasta dinheiro: comprar e pagar */
.btn-acao { background: var(--laranja-acao); color: #fff; }
.btn-acao:hover { background: var(--laranja-escuro); }
.btn-amarelo { background: var(--amarelo); color: var(--tinta); }
.btn-amarelo:hover { background: var(--amarelo-escuro); }
.btn-contorno { background: #fff; color: var(--azul); border: 2px solid var(--azul); }
.btn-contorno:hover { background: var(--azul-claro); }
.btn-fantasma { background: transparent; color: var(--tinta-2); }
.btn-fantasma:hover { background: var(--fundo); }

/* --------------------------------------------------------------------------
   Página de produto
   -------------------------------------------------------------------------- */
.opcao-grupo { border-bottom: 1px solid var(--linha); padding: 14px 0; }
.opcao-grupo legend {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--tinta-2);
  margin-bottom: 8px;
}
.opcao {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 14px;
  border: 1.5px solid var(--linha);
  border-radius: var(--raio);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tinta-2);
  background: #fff;
  cursor: pointer;
  text-align: center;
  transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}
.opcao:hover { border-color: var(--azul); color: var(--azul); }
.opcao input { position: absolute; opacity: 0; pointer-events: none; }
.opcao:has(input:checked) {
  border-color: var(--azul);
  background: var(--azul-claro);
  color: var(--azul-escuro);
}
.opcao:has(input:focus-visible) { outline: 3px solid var(--azul); outline-offset: 2px; }

/* Chips de tamanho pronto (produto-medida.js): são <button>, não <label>
   com input, então o estado ativo precisa de classe própria em vez do
   :has(input:checked) usado pelas demais .opcao. */
button.opcao.selecionada {
  border-color: var(--azul);
  background: var(--azul-claro);
  color: var(--azul-escuro);
}
button.opcao:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }

/* Extras: lista vertical de checkbox, não as caixinhas de .opcao — cada
   linha soma preço fixo e é independente das demais (ver produto.js). */
.acabamento-lista { display: flex; flex-direction: column; gap: 2px; }
.acabamento-linha {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--tinta);
  transition: background-color .15s ease;
}
.acabamento-linha:hover { background: var(--fundo); }
.acabamento-linha:has(input:checked) { background: var(--fundo); }
.acabamento-linha:has(input:disabled) {
  color: var(--tinta-3);
  text-decoration: line-through;
  cursor: not-allowed;
  opacity: .7;
}
.acabamento-linha:has(input:disabled):hover { background: transparent; }
.acabamento-linha input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--azul);
  flex-shrink: 0;
}
.acabamento-linha .acabamento-dias { color: var(--tinta-3); font-weight: 500; }
.acabamento-linha .acabamento-preco { font-weight: 600; margin-left: 2px; }

.miniatura {
  width: 62px;
  height: 62px;
  border: 1.5px solid var(--linha);
  border-radius: 5px;
  overflow: hidden;
  cursor: pointer;
  background: var(--fundo);
  transition: border-color .18s ease;
}
.miniatura.ativa, .miniatura:hover { border-color: var(--azul); }

.aba-btn {
  padding: 10px 16px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  color: var(--tinta-3);
  cursor: pointer;
  white-space: nowrap;
  transition: color .18s ease, border-color .18s ease;
}
.aba-btn:hover { color: var(--tinta); }
.aba-btn.ativa { color: var(--azul); border-color: var(--azul); }

.resumo-caixa {
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: #fff;
  box-shadow: var(--sombra);
}

/* --------------------------------------------------------------------------
   Carrinho
   -------------------------------------------------------------------------- */
.qtd-controle {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--linha);
  border-radius: var(--raio);
  overflow: hidden;
}
/* 44px é o mínimo confortável para o dedo. Este controle é justamente o que
   se usa no celular, dentro de uma lista, e errar o alvo aqui muda a
   quantidade do item errado. No desktop, onde há mouse, 34px basta. */
.qtd-controle button {
  width: 44px;
  height: 44px;
  border: 0;
  background: #fff;
  cursor: pointer;
  color: var(--tinta-2);
  font-size: 18px;
  transition: background-color .15s ease;
}
.qtd-controle button:hover { background: var(--fundo); color: var(--azul); }
.qtd-controle input {
  width: 54px;
  height: 44px;
  border: 0;
  border-inline: 1.5px solid var(--linha);
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Nunca remover o foco sem substituto: era `outline: none` puro, e quem
   navega por teclado perdia a referência de onde estava. */
.qtd-controle input:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: -2px;
}

@media (min-width: 900px) {
  .qtd-controle button { width: 36px; height: 36px; font-size: 16px; }
  .qtd-controle input { width: 48px; height: 36px; font-size: 13px; }
}

.passo-linha { display: flex; align-items: center; gap: 8px; }
.passo-bola {
  width: 24px; height: 24px;
  border-radius: 999px;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700;
  background: var(--linha); color: var(--tinta-3);
}
.passo-linha.ativo .passo-bola { background: var(--azul); color: #fff; }
.passo-linha.ativo span { color: var(--tinta); font-weight: 700; }

/* --------------------------------------------------------------------------
   Checkout e pedido
   -------------------------------------------------------------------------- */
.passos {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding: 12px 14px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: #fff;
}

.bloco-checkout {
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: #fff;
  padding: 18px;
  margin-bottom: 14px;
}

.titulo-bloco {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 14px;
}
.titulo-bloco .passo-bola { background: var(--azul); color: #fff; }

.grade-campos {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.campo { display: flex; flex-direction: column; gap: 4px; }
.campo > span {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--tinta-2);
}
.campo > span em { font-style: normal; font-weight: 500; color: var(--tinta-3); }
.campo input {
  height: 40px;
  border: 1.5px solid var(--linha);
  border-radius: var(--raio);
  padding: 0 11px;
  font-size: 13px;
  background: #fff;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.campo input:focus {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(10, 27, 101, .1);
}
.campo small { font-size: 10.5px; color: var(--tinta-3); }

/* 16px no celular evita o zoom automático do iOS ao focar o campo */
@media (max-width: 767px) {
  .campo input { font-size: 16px; }
}

.linha-resumo {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
}
.linha-resumo dt { color: var(--tinta-2); }
.linha-resumo dd { margin: 0; font-weight: 600; }

.aviso-suave {
  background: var(--azul-claro);
  border-left: 4px solid var(--azul);
  border-radius: var(--raio);
  padding: 11px 13px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--tinta-2);
}

.link-acao {
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--azul);
  font-weight: 600;
  font-size: inherit;
  cursor: pointer;
  text-decoration: underline;
}

/* Linha do tempo do pedido */
.linha-tempo { list-style: none; margin: 0; padding: 0; }
.linha-tempo li {
  position: relative;
  padding: 0 0 18px 26px;
  font-size: 12.5px;
}
.linha-tempo li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: #fff;
  border: 2.5px solid var(--linha);
}
.linha-tempo li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 16px;
  bottom: 0;
  width: 2px;
  background: var(--linha);
}
.linha-tempo li.feito::before { border-color: var(--azul); background: var(--azul); }
.linha-tempo li.atual::before { border-color: var(--laranja); background: var(--laranja); }
.linha-tempo li.atual strong { color: var(--laranja-escuro); }

/* --------------------------------------------------------------------------
   Utilidades
   -------------------------------------------------------------------------- */
.skeleton {
  background: linear-gradient(90deg, #eef0f3 25%, #f7f8fa 50%, #eef0f3 75%);
  background-size: 200% 100%;
  animation: brilho 1.3s infinite;
}
@keyframes brilho {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

.oculto { display: none !important; }

.girar { transform: rotate(180deg); }

/* Troca de composição dos banners: horizontal no desktop, vertical no celular */
.so-mobile { display: block; }
.so-desktop { display: none; }
@media (min-width: 768px) {
  .so-mobile { display: none; }
  .so-desktop { display: block; }
}

/* Visibilidade por breakpoint */
.esconde-sm { display: none; }
.esconde-md { display: none; }

@media (min-width: 640px) {
  .esconde-sm { display: block; }
}
@media (min-width: 1024px) {
  .esconde-md { display: flex; }
  .topbar-links { display: flex !important; }
}

/* Ajustes de largura dos cards por breakpoint */
@media (max-width: 480px) {
  .produto-card { width: 172px; }
  .cat-card { width: 96px; }
  .secao-titulo { padding: 0 18px; }
  .aviso-frete { left: 12px; right: 12px; max-width: none; bottom: 78px; }
}

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

/* ---------------------------------------------------------------- Avisos

   Substituem o alert() do navegador. Ficam acima de tudo (z-index 50, o topo
   da escala usada no projeto: banner de cookies é 40, cabeçalho fixo é 30) e
   fora do fluxo, para não empurrar a página quando aparecem.                */
.avisos {
  position: fixed;
  /* Escala de camadas da loja, do fundo para a frente:
       2–3   decoração dentro de card
       60    cabeçalho fixo
       70    WhatsApp flutuante e aviso de frete
       80    banner de cookies
       90    avisos  ← aqui
     O aviso é o topo de propósito: recado de erro escondido atrás de outro
     elemento é o mesmo que recado nenhum. */
  z-index: 90;
  bottom: 18px;
  left: 18px;
  /* Espaço à direita para o WhatsApp flutuante (52px + a margem dele). */
  right: 84px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  pointer-events: none;   /* a caixa não intercepta clique; só os avisos */
}

/* No celular o WhatsApp fica no canto e o aviso ocupa a largura toda, acima
   dele — brigar por espaço lado a lado deixaria as duas coisas ilegíveis. */
@media (max-width: 560px) {
  .avisos { right: 18px; bottom: 80px; align-items: stretch; }
}

.aviso {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: min(420px, 100%);
  padding: 12px 14px;
  border-radius: var(--raio);
  border-left: 3px solid var(--promo);
  background: #fff;
  box-shadow: 0 8px 28px rgba(10, 27, 101, .18);
  font-size: 13px;
  line-height: 1.45;
  color: var(--tinta);
  animation: aviso-entra 220ms ease-out;
}

.aviso-ok { border-left-color: #0a8a3f; }
.aviso p { margin: 0; flex: 1; }
.aviso-icone { color: var(--promo); flex: 0 0 auto; margin-top: 1px; }
.aviso-ok .aviso-icone { color: #0a8a3f; }

.aviso button {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--tinta-3);
  cursor: pointer;
}
.aviso button:hover { background: var(--fundo); color: var(--tinta); }

@keyframes aviso-entra {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* Quem pede menos movimento recebe o aviso sem a entrada deslizante — mas
   recebe o aviso, que é o que importa. */
@media (prefers-reduced-motion: reduce) {
  .aviso { animation: none; }
}

/* --------------------------------------------------------- Esqueleto

   Reserva o espaço do que ainda está chegando. Sem isto a home abre curta e
   "salta" quando o catálogo responde — o cliente que já tinha começado a
   clicar acaba clicando noutra coisa. Ocupa a mesma altura do card real.   */
.esqueleto-vitrine {
  display: flex;
  gap: 14px;
  overflow: hidden;
  padding: 4px 0;
}

.esqueleto-card {
  flex: 0 0 236px;
  height: 340px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background:
    linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .65) 45%, transparent 70%),
    var(--fundo);
  background-size: 250% 100%, 100% 100%;
  animation: esqueleto-brilho 1.4s ease-in-out infinite;
}

@keyframes esqueleto-brilho {
  from { background-position: 120% 0, 0 0; }
  to   { background-position: -60% 0, 0 0; }
}

/* Sem animação para quem pede menos movimento: o bloco continua reservando o
   espaço, que é a função principal. */
@media (prefers-reduced-motion: reduce) {
  .esqueleto-card { animation: none; }
}

/* ---------------------------------------------------- Caixa de confirmação

   Substitui `confirm()` e `prompt()`. Camada 95: acima dos avisos (90),
   porque a confirmação é uma pergunta que espera resposta — nada pode ficar
   na frente dela.                                                           */
.modal-fundo {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(10, 27, 101, .35);
  animation: modal-fundo-entra 160ms ease-out;
}

.modal-caixa {
  width: min(460px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  background: #fff;
  border-radius: var(--raio);
  padding: 22px;
  box-shadow: 0 20px 60px rgba(10, 27, 101, .28);
  animation: modal-caixa-entra 180ms ease-out;
}

.modal-caixa h2 { font-size: 16px; margin: 0 0 8px; }
.modal-caixa p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--tinta-2); }
.modal-caixa textarea {
  width: 100%;
  border: 1.5px solid var(--linha);
  border-radius: var(--raio);
  padding: 9px 10px;
  font: inherit;
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
}
.modal-caixa textarea:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; }

.modal-erro { margin-top: 10px !important; color: var(--promo) !important; font-size: 12px !important; }

.modal-acoes {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 18px;
  flex-wrap: wrap;
}
.modal-acoes .btn { height: 42px; padding-inline: 18px; }

/* Ação destrutiva não usa a mesma cor de "salvar": remover produto e salvar
   produto lado a lado, no mesmo laranja, é convite a errar. */
.btn-perigo {
  background: var(--promo);
  color: #fff;
  border: 0;
}
.btn-perigo:hover { filter: brightness(.93); }

@keyframes modal-fundo-entra { from { opacity: 0 } to { opacity: 1 } }
@keyframes modal-caixa-entra {
  from { opacity: 0; transform: translateY(10px) }
  to   { opacity: 1; transform: none }
}

@media (prefers-reduced-motion: reduce) {
  .modal-fundo, .modal-caixa { animation: none; }
}