/* Costa Norte Pratas — componentes reutilizáveis (cabeçalho, rodapé, botões, cards, filtros, galeria) */

/* ---------- cabeçalho ---------- */
.cabecalho{
  position:sticky;
  top:0;
  z-index:5;
  background:var(--creme);
  border-bottom:1px solid var(--linha);
}
.cabecalho .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--espaco-3);
  padding-top:14px;
  padding-bottom:14px;
}
.cabecalho__logo{
  display:flex;
  align-items:center;
}
.cabecalho__logo img{
  height:28px;
  width:auto;
}
.cabecalho__nav{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--espaco-4);
}
.cabecalho__link{
  font-size:15px;
  letter-spacing:0.03em;
  text-decoration:none;
  color:var(--azul-fraco);
  white-space:nowrap;
}
.cabecalho__link:hover,
.cabecalho__link.esta-ativo{
  color:var(--azul);
}

/* ---------- rodapé ---------- */
.rodape{
  margin-top:var(--espaco-7);
  position:relative;
  z-index:1;
  background:var(--azul);
  border-top:3px solid var(--ouro);
}
.rodape .container{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:var(--espaco-3);
  padding-top:var(--espaco-5);
  padding-bottom:var(--espaco-5);
}
.rodape__marca img{ height:28px; }
.rodape__nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--espaco-3) var(--espaco-4);
}
.rodape__nav a{
  font-size:13px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--creme);
}
.rodape__nav a:hover{ color:var(--ouro); }
.rodape__endereco{
  font-size:12px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--prata);
}
.rodape__copy{
  font-size:11px;
  letter-spacing:0.3em;
  text-transform:uppercase;
  color:var(--prata);
}

@media (min-width:700px){
  .rodape .container{
    flex-direction:row;
    justify-content:space-between;
    text-align:left;
  }
  .rodape__copy{ order:1; }
}

/* ---------- botões ---------- */
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:19px 22px 19px 54px;
  border-radius:var(--raio-pill);
  font-family:'Cormorant Garamond', Georgia, serif;
  font-weight:600;
  font-size:17px;
  letter-spacing:0.03em;
  text-decoration:none;
  border:none;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease;
}
.btn svg{
  position:absolute;
  left:22px;
  top:50%;
  transform:translateY(-50%);
  width:22px;
  height:22px;
  flex-shrink:0;
}
.btn:active{ transform:scale(0.98); }
.btn:focus-visible{ outline:2px solid var(--azul); outline-offset:3px; }

.btn-primary{
  background:var(--azul);
  color:var(--creme);
  box-shadow:var(--sombra-botao-azul);
}
.btn-primary:hover{ box-shadow:var(--sombra-botao-azul-hover); transform:translateY(-1px); }

.btn-whatsapp{
  background:var(--ouro);
  color:var(--azul);
  box-shadow:var(--sombra-botao-ouro);
}
.btn-whatsapp:hover{ box-shadow:var(--sombra-botao-ouro-hover); transform:translateY(-1px); }
.btn-whatsapp:focus-visible{ outline-color:var(--azul); }

.btn-secundario{
  background:transparent;
  color:var(--azul);
  border:1px solid var(--azul);
  padding:18px 26px;
}
.btn-secundario:hover{ background:var(--azul); color:var(--creme); }

.btn--pequeno{
  padding:10px 18px 10px 40px;
  font-size:14px;
}
.btn--pequeno svg{ left:16px; width:16px; height:16px; }

@media (max-width:360px){
  .btn{ font-size:15.5px; padding:17px 16px 17px 48px; }
}

/* ---------- migalhas (breadcrumb) ---------- */
.trilha{
  font-size:12px;
  letter-spacing:0.06em;
  color:var(--azul-fraco);
  margin-bottom:var(--espaco-4);
}
.trilha a{
  text-decoration:none;
  color:var(--azul-fraco);
}
.trilha a:hover{ color:var(--azul); text-decoration:underline; }
.trilha__separador{
  color:var(--prata);
  margin:0 6px;
}
.trilha__atual{ color:var(--azul); }

/* ---------- grade de produtos ---------- */
.grade-produtos{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:1fr;
  gap:28px;
}
@media (min-width:560px){
  .grade-produtos{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:860px){
  .grade-produtos{ grid-template-columns:repeat(3,1fr); }
}
@media (min-width:1180px){
  .grade-produtos{ grid-template-columns:repeat(4,1fr); }
}
.item-produto.esta-oculto{ display:none; }

.cartao-produto{
  display:block;
  background:var(--branco);
  border-radius:var(--raio-card);
  box-shadow:var(--sombra-card);
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  transition:transform .18s ease, box-shadow .18s ease;
}
.cartao-produto:hover{
  transform:translateY(-3px);
  box-shadow:var(--sombra-card-hover);
}
.cartao-produto:focus-visible{ outline:2px solid var(--azul); outline-offset:3px; }
.cartao-produto__imagem-wrap{
  position:relative;
  aspect-ratio:1/1;
  background:var(--creme);
}
.cartao-produto__imagem-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.cartao-produto__corpo{
  padding:16px 18px 20px;
}
.cartao-produto__etiqueta{
  display:inline-block;
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--azul-fraco);
  background:var(--creme);
  border-radius:var(--raio-pill);
  padding:4px 12px;
  margin-bottom:10px;
}
.cartao-produto__nome{
  font-size:19px;
  font-weight:500;
  margin-bottom:8px;
}
.cartao-produto__cta{
  font-size:14px;
  font-weight:600;
  color:var(--azul);
}
.cartao-produto__cta::after{
  content:"→";
  margin-left:4px;
}

/* ---------- selo de foto ilustrativa ---------- */
.selo-ilustrativa{
  position:absolute;
  top:10px;
  right:10px;
  background:rgba(251,249,246,0.9);
  color:var(--azul-fraco);
  font-size:10px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  border:1px dashed var(--prata);
  border-radius:var(--raio-pill);
  padding:4px 10px;
}

/* ---------- filtros de categoria ---------- */
.filtros{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:var(--espaco-5);
}
.filtro-pill{
  font-family:'Cormorant Garamond', Georgia, serif;
  border:1px solid var(--prata);
  background:var(--creme);
  color:var(--azul);
  border-radius:var(--raio-pill);
  padding:8px 18px;
  font-size:14px;
  letter-spacing:0.02em;
  cursor:pointer;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.filtro-pill:hover{ border-color:var(--azul); }
.filtro-pill.is-ativo{
  background:var(--azul);
  color:var(--creme);
  border-color:var(--azul);
}
.filtro-pill:focus-visible{ outline:2px solid var(--azul); outline-offset:2px; }

/* ---------- aviso de disponibilidade ---------- */
.aviso-disponibilidade{
  font-size:14px;
  color:var(--azul-fraco);
  background:var(--branco);
  border:1px solid var(--linha);
  border-radius:var(--raio-imagem);
  padding:14px 18px;
  margin-bottom:var(--espaco-5);
}

/* ---------- página de produto ---------- */
.produto{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--espaco-6);
  align-items:start;
}
@media (min-width:800px){
  .produto{ grid-template-columns:1.1fr 1fr; }
}

.galeria-principal{
  position:relative;
  aspect-ratio:1/1;
  border-radius:var(--raio-imagem);
  box-shadow:var(--sombra-card);
  overflow:hidden;
  background:var(--branco);
}
.galeria-principal img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.galeria-miniaturas{
  display:flex;
  gap:10px;
  margin-top:14px;
  flex-wrap:wrap;
}
.miniatura{
  width:64px;
  height:64px;
  padding:0;
  border:2px solid transparent;
  border-radius:10px;
  overflow:hidden;
  background:var(--branco);
  cursor:pointer;
}
.miniatura img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.miniatura.is-ativo{ border-color:var(--azul); }
.miniatura:focus-visible{ outline:2px solid var(--azul); outline-offset:2px; }

.produto__etiqueta{
  display:inline-block;
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--azul-fraco);
  background:var(--branco);
  border:1px solid var(--linha);
  border-radius:var(--raio-pill);
  padding:5px 14px;
  margin-bottom:14px;
}
.produto__info h1{ margin-bottom:14px; }
.produto__descricao{ margin-bottom:22px; }
.produto__detalhes{
  list-style:none;
  padding:0;
  margin:0 0 22px;
  font-size:15px;
  color:var(--azul-fraco);
  display:flex;
  flex-direction:column;
  gap:6px;
}
.produto__detalhes strong{ color:var(--azul); font-weight:600; }
.produto__acoes{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}

/* ---------- seções gerais ---------- */
.secao{
  padding:var(--espaco-6) 0;
  position:relative;
  z-index:1;
}
.secao--central{ text-align:center; }