/* Selaria Maxsuel — folha de estilos principal */
:root {
  --couro: #3b2a22;
  --couro-2: #503a33;
  --caramelo: #f5a623;
  --caramelo-escuro: #a8620a;
  --creme: #f8f3ed;
  --areia: #efe5d9;
  --texto: #2b211c;
  --texto-suave: #6d5d53;
  --linha: #e4d8cb;
  --verde: #1f8a3b;
  --verde-escuro: #176c2e;
  --branco: #fff;
  --raio: 10px;
  --sombra: 0 6px 24px rgba(59, 42, 34, .08);
  --fonte: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --titulo: "Playfair Display", Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font: 16px/1.6 var(--fonte); color: var(--texto); background: var(--branco); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--caramelo-escuro); }
h1, h2, h3 { font-family: var(--titulo); line-height: 1.2; color: var(--couro); margin: 0 0 .5em; }
h1 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
h2 { font-size: clamp(1.4rem, 2.5vw, 1.9rem); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--caramelo); outline-offset: 2px; }

.container { width: min(1200px, 100% - 32px); margin-inline: auto; }
.container--estreito { width: min(860px, 100% - 32px); }
.pular { position: absolute; left: -999px; top: 0; background: var(--couro); color: #fff; padding: 8px 16px; z-index: 100; }
.pular:focus { left: 8px; }

/* Botões */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 20px; border: 2px solid var(--couro); border-radius: 8px;
  background: var(--couro); color: #fff; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: background .2s, border-color .2s, transform .1s;
}
.botao:hover { background: var(--couro-2); border-color: var(--couro-2); }
.botao:active { transform: translateY(1px); }
.botao:disabled { opacity: .5; cursor: not-allowed; }
.botao--grande { padding: 14px 26px; font-size: 1.05rem; }
.botao--bloco { width: 100%; }
.botao--verde { background: var(--verde); border-color: var(--verde); }
.botao--verde:hover { background: var(--verde-escuro); border-color: var(--verde-escuro); }
.botao--contorno { background: transparent; color: var(--couro); }
.botao--contorno:hover { background: var(--couro); color: #fff; }
.botao--claro { background: #fff; border-color: #fff; color: var(--couro); }
.botao--claro:hover { background: var(--creme); border-color: var(--creme); }

/* Topo */
.topo-aviso { background: var(--couro); color: #f4e6d4; font-size: .82rem; }
.topo-aviso .container { display: flex; justify-content: center; gap: 32px; padding: 6px 0; flex-wrap: wrap; }
.cabecalho { background: #fff; border-bottom: 1px solid var(--linha); position: sticky; top: 0; z-index: 50; }
.cabecalho__linha { display: flex; align-items: center; gap: 24px; padding: 14px 0; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--couro); flex-shrink: 0; }
.logo__icone { width: 52px; height: auto; }
.logo__texto { width: 118px; height: auto; }
.logo--claro { margin-bottom: 8px; }
.busca { flex: 1; display: flex; max-width: 520px; margin-left: auto; }
.busca input { flex: 1; min-width: 0; padding: 10px 14px; border: 2px solid var(--linha); border-right: 0; border-radius: 8px 0 0 8px; background: var(--creme); }
.busca input:focus { outline: none; border-color: var(--caramelo); background: #fff; }
.busca button { border: 0; background: var(--caramelo); color: var(--couro); padding: 0 16px; border-radius: 0 8px 8px 0; cursor: pointer; }
.busca--grande { margin: 24px auto; }
.carrinho-link { position: relative; color: var(--couro); padding: 6px; }
.carrinho-contador {
  position: absolute; top: -4px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 10px; background: var(--caramelo); color: var(--couro); font-size: .72rem; font-weight: 700;
  display: grid; place-items: center;
}
.carrinho-contador[hidden] { display: none; }
.menu-botao { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.menu-botao span { display: block; width: 22px; height: 2px; background: var(--couro); margin: 5px 0; transition: transform .2s, opacity .2s; }
.menu { background: var(--creme); border-top: 1px solid var(--linha); }
.menu .container { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.menu a { padding: 11px 12px; color: var(--couro); text-decoration: none; font-weight: 500; font-size: .92rem; white-space: nowrap; }
.menu a:hover { color: var(--caramelo-escuro); }

/* Carrossel de banners */
.carrossel { position: relative; overflow: hidden; background: var(--couro); }
.carrossel__trilho { display: flex; transition: transform .6s ease; }
.carrossel__slide { flex: 0 0 100%; display: block; }
.carrossel__slide img, .banner-mobile img { width: 100%; height: auto; aspect-ratio: 1920 / 300; object-fit: cover; }
.banner-mobile { display: none; }
.banner-mobile img { aspect-ratio: 1240 / 1316; }
.carrossel__seta {
  position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .85); color: var(--couro); font-size: 1.8rem; line-height: 1; cursor: pointer;
  opacity: 0; transition: opacity .2s; box-shadow: 0 2px 10px rgba(0,0,0,.2);
}
.carrossel:hover .carrossel__seta, .carrossel__seta:focus-visible { opacity: 1; }
.carrossel__seta--ant { left: 16px; }
.carrossel__seta--prox { right: 16px; }
.carrossel__pontos { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 8px; }
.carrossel__pontos button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 5px; background: rgba(255,255,255,.55); cursor: pointer; transition: width .3s, background .3s; }
.carrossel__pontos button[aria-current] { width: 28px; background: #fff; }

/* Banner antes do rodapé */
.banner-rodape img { width: 100%; height: auto; min-height: 220px; object-fit: cover; background: var(--areia); }

.sobretitulo { display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--caramelo); margin-bottom: 12px; }

/* Benefícios */
.beneficios { background: var(--creme); border-bottom: 1px solid var(--linha); }
.beneficios__grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 22px 0; }
.beneficios__grade > div { display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; align-items: center; }
.beneficios svg { grid-row: span 2; width: 36px; height: 36px; fill: var(--caramelo-escuro); }
.beneficios strong { color: var(--couro); line-height: 1.2; }
.beneficios span { color: var(--texto-suave); font-size: .88rem; line-height: 1.3; }

/* Seções */
.secao { padding: 56px 0; }
.secao--alt { background: var(--creme); }
.secao__topo { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 24px; }
.secao__topo h2 { margin: 0; }
.secao__topo a { font-weight: 600; text-decoration: none; white-space: nowrap; }

.categorias { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.categoria {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
  padding: 16px 12px; border: 1px solid var(--linha); border-radius: var(--raio);
  text-decoration: none; color: var(--couro); background: #fff; transition: box-shadow .2s, transform .2s;
}
.categoria:hover { box-shadow: var(--sombra); transform: translateY(-3px); }
.categoria img { width: 100px; height: 100px; object-fit: contain; margin-bottom: 8px; }
.categoria small { color: var(--texto-suave); }

/* Cartões de produto */
.grade-produtos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px; }
.card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; transition: box-shadow .2s, transform .2s; }
.card:hover { box-shadow: var(--sombra); transform: translateY(-3px); }
.card__img { position: relative; display: block; aspect-ratio: 1; background: #faf7f3; }
.card__img img { width: 100%; height: 100%; object-fit: contain; padding: 12px; transition: transform .3s; }
.card:hover .card__img img { transform: scale(1.04); }
.card__corpo { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; flex: 1; }
.card__cat { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--caramelo-escuro); }
.card__nome { font-family: var(--fonte); font-size: 1rem; font-weight: 600; margin: 0; }
.card__nome a { color: var(--texto); text-decoration: none; }
.card .preco { margin-top: auto; }
.card .botao { margin-top: 8px; padding: 9px 16px; }
.selo { position: absolute; top: 10px; left: 10px; background: var(--verde); color: #fff; font-weight: 700; font-size: .8rem; padding: 3px 9px; border-radius: 20px; }
.selo--grande { font-size: 1rem; padding: 5px 14px; }

.preco { display: flex; flex-direction: column; line-height: 1.3; }
.preco del { color: var(--texto-suave); font-size: .85rem; }
.preco strong { font-size: 1.3rem; color: var(--couro); }
.preco small { color: var(--verde); font-weight: 600; font-size: .85rem; }

/* Sobre / CTA */
.sobre { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: center; }
.sobre__selas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.checklist { list-style: none; padding: 0; margin: 20px 0 28px; display: grid; gap: 8px; }
.checklist li::before { content: "✓"; display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 10px; border-radius: 50%; background: var(--areia); color: var(--verde); font-weight: 700; font-size: .8rem; }
.cta-atacado { background: var(--caramelo-escuro); color: #fff; }
.cta-atacado__linha { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 40px 0; flex-wrap: wrap; }
.cta-atacado h2 { color: #fff; margin-bottom: 4px; }
.cta-atacado p { margin: 0; color: #fbe6d1; }

/* Loja */
.trilha { font-size: .88rem; color: var(--texto-suave); padding: 20px 0; }
.trilha a { color: var(--texto-suave); text-decoration: none; }
.trilha a:hover { color: var(--caramelo-escuro); }
.trilha span { margin: 0 6px; opacity: .6; }
.loja { display: grid; grid-template-columns: 220px 1fr; gap: 36px; padding-bottom: 64px; }
.filtros { position: sticky; top: 140px; align-self: start; }
.filtros h2 { font-size: 1.1rem; }
.filtros ul { list-style: none; padding: 0; margin: 0; }
.filtros a { display: flex; justify-content: space-between; padding: 8px 12px; border-radius: 6px; color: var(--texto); text-decoration: none; }
.filtros a:hover { background: var(--creme); }
.filtros a[aria-current] { background: var(--couro); color: #fff; }
.filtros small { opacity: .7; }
.loja__topo { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.loja__topo h1 { margin: 0; }
.loja__topo p { margin: 0; color: var(--texto-suave); }
.ordenar { display: flex; align-items: center; gap: 8px; font-size: .9rem; }
.ordenar select, .formulario input, .formulario select, .formulario textarea, .checkout input, .checkout textarea {
  padding: 10px 12px; border: 1px solid var(--linha); border-radius: 8px; background: #fff; width: 100%;
}
.ordenar select { width: auto; }
.chips { display: none; gap: 8px; overflow-x: auto; padding-bottom: 12px; margin-bottom: 8px; }
.chips a { padding: 6px 14px; border: 1px solid var(--linha); border-radius: 20px; text-decoration: none; color: var(--texto); white-space: nowrap; font-size: .9rem; }
.chips a.ativo { background: var(--couro); border-color: var(--couro); color: #fff; }
.paginacao { display: flex; justify-content: center; gap: 6px; margin-top: 36px; flex-wrap: wrap; }
.paginacao a { min-width: 40px; padding: 8px 12px; text-align: center; border: 1px solid var(--linha); border-radius: 8px; text-decoration: none; color: var(--texto); }
.paginacao a[aria-current] { background: var(--couro); border-color: var(--couro); color: #fff; }
.vazio { text-align: center; padding: 48px 16px; background: var(--creme); border-radius: var(--raio); }
.vazio--pagina { background: none; padding: 64px 0; }

/* Produto */
.produto { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding-bottom: 24px; }
.galeria { position: sticky; top: 140px; align-self: start; }
.galeria__principal { position: relative; background: #faf7f3; border: 1px solid var(--linha); border-radius: var(--raio); aspect-ratio: 1; overflow: hidden; }
.galeria__principal img { width: 100%; height: 100%; object-fit: contain; padding: 20px; }
.galeria__miniaturas { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; }
.galeria__miniaturas button { flex: 0 0 76px; height: 76px; padding: 4px; border: 2px solid var(--linha); border-radius: 8px; background: #fff; cursor: pointer; }
.galeria__miniaturas button[aria-current] { border-color: var(--caramelo); }
.galeria__miniaturas img { width: 100%; height: 100%; object-fit: contain; }
.produto__info h1 { margin: 6px 0 4px; }
.sku { color: var(--texto-suave); font-size: .9rem; margin: 0 0 16px; }
.preco--grande { padding: 18px 0; border-block: 1px solid var(--linha); margin: 16px 0 20px; gap: 2px; }
.preco--grande strong { font-size: 2.1rem; }
.preco__pix { color: var(--verde); }
.preco__parcela { color: var(--texto-suave); }
.comprar { display: grid; gap: 14px; }
.comprar__rotulo { font-weight: 600; }
.comprar__linha { display: flex; gap: 12px; }
.comprar__linha .botao { flex: 1; }
.opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
.opcao input { position: absolute; opacity: 0; pointer-events: none; }
.opcao span { display: inline-block; padding: 8px 14px; border: 2px solid var(--linha); border-radius: 8px; cursor: pointer; font-weight: 500; }
.opcao input:checked + span { border-color: var(--caramelo); background: #fdf3ea; }
.opcao input:focus-visible + span { outline: 3px solid var(--caramelo); outline-offset: 2px; }
.opcao input:disabled + span { opacity: .4; text-decoration: line-through; cursor: not-allowed; }
.quantidade { display: flex; border: 2px solid var(--linha); border-radius: 8px; overflow: hidden; }
.quantidade button { width: 40px; border: 0; background: var(--creme); font-size: 1.2rem; cursor: pointer; }
.quantidade input { width: 52px; border: 0; text-align: center; -moz-appearance: textfield; }
.quantidade input::-webkit-inner-spin-button { -webkit-appearance: none; }
.garantias { list-style: none; padding: 16px 18px; margin: 24px 0; background: var(--creme); border-radius: var(--raio); display: grid; gap: 6px; font-size: .92rem; }
.garantias li::before { content: "✓ "; color: var(--verde); font-weight: 700; }
.descricao { border-top: 1px solid var(--linha); padding-top: 20px; }
.descricao h2 { font-size: 1.3rem; }

/* Carrinho */
.carrinho { display: grid; grid-template-columns: 1fr 380px; gap: 36px; padding-bottom: 64px; align-items: start; }
.carrinho[hidden], .vazio[hidden] { display: none; }
.carrinho__itens { list-style: none; padding: 0; margin: 0 0 20px; border-top: 1px solid var(--linha); }
.item { display: grid; grid-template-columns: 84px 1fr auto; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--linha); }
.item img { width: 84px; height: 84px; object-fit: contain; background: #faf7f3; border-radius: 8px; }
.item__nome { font-weight: 600; color: var(--texto); text-decoration: none; }
.item__var { color: var(--texto-suave); font-size: .88rem; }
.item__acoes { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.item__acoes .quantidade button { width: 32px; }
.item__acoes .quantidade input { width: 40px; }
.item__remover { background: none; border: 0; color: #b3261e; cursor: pointer; font-size: .88rem; text-decoration: underline; }
.item__preco { font-weight: 700; color: var(--couro); text-align: right; }
.checkout { position: sticky; top: 140px; background: var(--creme); border-radius: var(--raio); padding: 24px; display: grid; gap: 12px; }
.checkout h2 { font-size: 1.3rem; margin: 0; }
.checkout__nota { margin: 0; font-size: .88rem; color: var(--texto-suave); }
.checkout label, .formulario label { display: grid; gap: 4px; font-weight: 500; font-size: .92rem; }
.checkout fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 4px; }
.checkout legend { font-weight: 500; font-size: .92rem; margin-bottom: 4px; }
.checkout .radio { display: flex; gap: 8px; align-items: center; font-weight: 400; }
.checkout .radio input { width: auto; }
.totais { margin: 8px 0; display: grid; gap: 6px; }
.totais div { display: flex; justify-content: space-between; }
.totais dt, .totais dd { margin: 0; }
.totais div[hidden] { display: none; }
.totais__total { border-top: 1px solid var(--linha); padding-top: 8px; font-weight: 700; font-size: 1.2rem; color: var(--couro); }

/* Páginas de texto e formulários */
.texto { padding-bottom: 24px; }
.texto li { margin-bottom: 4px; }
.caixa-contato { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 24px; margin-bottom: 64px; background: var(--creme); border-radius: var(--raio); }
.caixa-contato p { margin: 0; flex-basis: 100%; font-weight: 600; }
.formulario { display: grid; gap: 16px; padding: 28px; margin: 24px 0 64px; border: 1px solid var(--linha); border-radius: var(--raio); background: #fff; }
.formulario__duas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contato { display: grid; grid-template-columns: 280px 1fr; gap: 28px; }
.contato .formulario { margin-top: 0; }
.contato__canais { display: grid; gap: 12px; align-content: start; }
.canal { display: grid; padding: 16px 18px; border-radius: var(--raio); background: var(--creme); text-decoration: none; color: var(--texto); }
.canal strong { color: var(--couro); }

/* Rodapé */
.rodape { background: var(--couro); color: #d9c7b5; margin-top: 0; }
.rodape__grade { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 36px; padding: 56px 0 40px; }
.rodape h2 { font-family: var(--fonte); font-size: .95rem; text-transform: uppercase; letter-spacing: .08em; color: #fff; }
.rodape ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.rodape a { color: #d9c7b5; text-decoration: none; }
.rodape a:hover { color: #fff; }
.rodape p { font-size: .92rem; }
.pagamentos { color: #fff; font-weight: 500; }
.rodape__base { border-top: 1px solid rgba(255,255,255,.1); padding: 16px 0; font-size: .85rem; text-align: center; }
.rodape__base p { margin: 0; }
.creditos { margin-top: 6px !important; }
.creditos span { color: #e25555; }
.creditos a { color: #fff; font-weight: 600; }
.creditos a:hover { color: var(--caramelo); }

.whatsapp-flutuante {
  position: fixed; right: 20px; bottom: 20px; z-index: 60; width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center; background: #25d366; color: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.25);
  transition: transform .2s;
}
.whatsapp-flutuante:hover { transform: scale(1.08); }
.aviso-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 70;
  background: var(--couro); color: #fff; padding: 12px 20px; border-radius: 8px; box-shadow: var(--sombra);
  display: flex; gap: 14px; align-items: center; max-width: calc(100% - 32px);
}
.aviso-toast[hidden] { display: none; }
.aviso-toast a { color: var(--caramelo); font-weight: 600; white-space: nowrap; }

/* Responsivo */
@media (max-width: 1024px) {
  .rodape__grade { grid-template-columns: 1fr 1fr; }
  .loja { grid-template-columns: 1fr; }
  .filtros { display: none; }
  .chips { display: flex; }
  .carrinho { grid-template-columns: 1fr; }
  .checkout { position: static; }
}
@media (max-width: 800px) {
  .topo-aviso span:not(:first-child) { display: none; }
  .cabecalho__linha { flex-wrap: wrap; gap: 12px; padding: 10px 0; }
  .menu-botao { display: block; }
  .logo__icone { width: 42px; }
  .logo__texto { width: 96px; }
  .carrinho-link { margin-left: auto; }
  .busca { order: 5; flex-basis: 100%; max-width: none; }
  .menu { display: none; }
  .menu.aberto { display: block; }
  .menu .container { flex-direction: column; padding: 8px 0; }
  .menu a { padding: 10px 4px; border-bottom: 1px solid var(--linha); }
  .menu-botao[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-botao[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-botao[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .sobre, .produto, .contato { grid-template-columns: 1fr; gap: 28px; }
  .beneficios__grade { grid-template-columns: 1fr 1fr; }
  .galeria { position: static; }
  .formulario__duas { grid-template-columns: 1fr; }
  .secao { padding: 40px 0; }
}
@media (max-width: 767px) {
  .banner-mobile { display: block; }
  .carrossel__trilho, .carrossel__seta, .carrossel__pontos { display: none; }
  .banner-rodape img { min-height: 0; }
}
@media (max-width: 520px) {
  .grade-produtos { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .card__corpo { padding: 10px 12px 12px; }
  .card__nome { font-size: .9rem; }
  .preco strong { font-size: 1.1rem; }
  .card .botao { font-size: .85rem; padding: 8px 10px; }
  .rodape__grade { grid-template-columns: 1fr; }
  .categorias { grid-template-columns: repeat(2, 1fr); }
  .comprar__linha { flex-direction: column; }
  .item { grid-template-columns: 64px 1fr; }
  .item img { width: 64px; height: 64px; }
  .item__preco { grid-column: 2; text-align: left; }
  .formulario { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}