/* VARIÁVEIS & RESET */
:root {
  --primaria: #3b82f6;
  --primaria-escura: #2563eb;
  --primaria-suave: #60a5fa;
  --primaria-brilho: #93c5fd;
  --preto: #111111;
  --preto-profundo: #121212;
  --preto-caixa: #111111;
  --preto-borda: #222222;
  --cinza-escuro: #1a1a1a;
  --cinza-medio: #333333;
  --cinza-claro: #555555;
  --cinza-texto: #aaaaaa;
  --branco: #ffffff;
  --branco-suave: #f0f0f0;
  --sucesso: #22c55e;
  --sombra: 0 8px 30px rgba(0, 0, 0, 0.5);
  --sombra-destaque: 0 10px 40px rgba(59, 130, 246, 0.2);
  --raio-borda: 16px;
  --transicao: all 0.3s ease;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: var(--preto);
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--branco-suave);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* LAYOUT */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.layout {
  display: flex;
  gap: 2.5rem;
  align-items: flex-start;
}

.layout__principal { 
  flex: 1; 
  min-width: 0;
}

.layout__lateral { 
  width: 380px;
  position: relative;
}

/* COMPONENTES */
.cartao {
  background: var(--preto-caixa);
  border: 1px solid var(--preto-borda);
  border-radius: var(--raio-borda);
  padding: 1.75rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--sombra);
  transition: var(--transicao);
}

.cartao:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  border-color: var(--primaria);
}

.titulo-secao {
  color: var(--branco);
  font-size: 1.3rem;
  margin: 1.25rem 0 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  position: relative;
}

.titulo-secao::before {
  content: '';
  width: 5px;
  height: 22px;
  background: linear-gradient(to bottom, var(--primaria), var(--primaria-escura));
  border-radius: 3px;
}

/* BOTÕES */
.botao {
  border: none;
  cursor: pointer;
  font-weight: 600;
  transition: var(--transicao);
  font-family: inherit;
  border-radius: 10px;
  text-align: center;
}

.botao--primario {
  background: linear-gradient(135deg, var(--primaria), var(--primaria-escura));
  color: var(--branco);
  padding: 1.25rem;
  width: 100%;
  margin-top: 1.5rem;
  font-size: 1.1rem;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
  text-decoration: none;
  display: block;
}

.botao--primario:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
}

.botao--primario:active {
  transform: translateY(0);
}

.botao--secundario {
  background: var(--primaria);
  color: var(--branco);
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  border-radius: 8px;
}

.botao--secundario:hover { 
  background: var(--primaria-suave);
  transform: translateY(-2px);
}

.botao--contato {
  background: var(--primaria);
  color: var(--branco);
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  align-self: flex-start;
  font-size: 0.95rem;
}

.botao--contato:hover {
  background: var(--primaria-suave);
  transform: translateY(-2px);
}

/* FORMULÁRIOS */
.entrada {
  width: 100%;
  padding: 0.875rem 1rem;
  border: 2px solid var(--preto-borda);
  border-radius: 8px;
  font-family: inherit;
  font-size: 1rem;
  background: var(--preto-profundo);
  color: var(--branco);
  transition: var(--transicao);
}

.entrada:focus {
  outline: none;
  border-color: var(--primaria);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.entrada::placeholder {
  color: var(--cinza-texto);
  opacity: 0.7;
}

/* INPUT DE QUANTIDADE */
.entrada--quantidade {
  width: 90px;
  text-align: center;
  font-weight: 700;
  padding: 0.75rem;
  border: 2px solid var(--primaria);
  background: rgba(59, 130, 246, 0.1);
  color: var(--branco);
  -moz-appearance: textfield;
}

.entrada--quantidade::-webkit-inner-spin-button:after {
  content: '▲';
  color: var(--branco);
  font-size: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.entrada--quantidade::-webkit-outer-spin-button:after {
  content: '▼';
  color: var(--branco);
  font-size: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.grupo-campos {
  display: flex;
  gap: 0;
  border-radius: 10px;
  overflow: hidden;
}

.campo-com-icone {
  position: relative;
}

.campo-com-icone__icone {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  pointer-events: none;
  opacity: 0.7;
  filter: invert(1) brightness(0.9);
}

.campos-duplos {
  display: flex;
  gap: 1rem;
}

/* BARRA SUPERIOR */
.barra-superior {
  background: var(--preto-profundo);
  padding: 1.25rem 0;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
  border-bottom: 1px solid var(--preto-borda);
}

.barra-superior__conteudo {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.barra-superior__esquerda {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.barra-superior__empresa {
  font-weight: 800;
  color: var(--branco);
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--primaria), var(--primaria-brilho));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.barra-superior__voltar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.barra-superior__voltar .icone {
  width: 18px;
  height: 18px;
  filter: invert(27%) sepia(85%) saturate(2878%) hue-rotate(216deg) brightness(150%) contrast(97%);
  transition: transform 0.3s ease;
}

.barra-superior__voltar:hover .icone {
  transform: translateX(-3px);
}

.barra-superior__link {
  color: var(--primaria-suave);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  transition: var(--transicao);
}

.barra-superior__link:hover {
  color: var(--primaria-brilho);
  text-decoration: underline;
}

.barra-superior__suporte {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--branco-suave);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  transition: var(--transicao);
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.barra-superior__suporte:hover {
  background: var(--primaria);
  color: var(--branco);
  border-color: var(--primaria);
  transform: translateY(-2px);
}

.barra-superior__suporte .icone {
  width: 18px;
  height: 18px;
  transition: var(--transicao);
  filter: invert(1) brightness(0.9);
}

.barra-superior__suporte:hover .icone {
  filter: brightness(0) invert(1);
}

.icone {
  width: 18px;
  height: 18px;
}

/* CABEÇALHO */
.cabecalho-pagina {
  padding: 2.5rem 0 1.5rem;
  text-align: center;
}

.cabecalho-pagina__titulo {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--branco);
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--branco), var(--primaria-brilho));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.cabecalho-pagina__subtitulo {
  color: var(--cinza-texto);
  font-size: 1rem;
  max-width: 600px;
  margin: 0 auto;
}

.conteudo-principal {
  padding: 1.5rem 0 3rem;
}

/* USUÁRIO */
.cartao-usuario {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  background: var(--preto-caixa);
  padding: 1.5rem;
  border-radius: var(--raio-borda);
  box-shadow: var(--sombra);
  border-left: 5px solid var(--primaria);
}

.cartao-usuario__info {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.cartao-usuario__avatar {
  border-radius: 50%;
  width: 56px;
  height: 56px;
  object-fit: cover;
  border: 3px solid var(--primaria);
  padding: 3px;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.cartao-usuario__nome {
  font-weight: 700;
  color: var(--branco);
  font-size: 1.2rem;
  letter-spacing: -0.01em;
}

.cartao-usuario__acao {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--primaria-brilho);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  transition: var(--transicao);
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.cartao-usuario__acao:hover { 
  background: var(--primaria);
  color: var(--branco);
  transform: translateY(-2px);
}

.cartao-usuario__acao img {
  width: 16px;
  height: 16px;
  filter: invert(27%) sepia(85%) saturate(2878%) hue-rotate(216deg) brightness(150%) contrast(97%);
}

.cartao-usuario__acao:hover img {
  filter: brightness(0) invert(1);
}

/* INFORMAÇÕES DO CLIENTE */
.informacoes-cliente {
  background: linear-gradient(135deg, var(--preto-profundo), var(--cinza-escuro));
  padding: 1.75rem;
  border-radius: var(--raio-borda);
  color: var(--branco);
  border: 1px solid var(--preto-borda);
}

.informacoes-cliente__linha {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.informacoes-cliente__item { 
  flex: 1; 
}

.informacoes-cliente__divisor {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(59, 130, 246, 0.2);
}

.informacoes-cliente strong {
  color: var(--primaria-brilho);
  font-weight: 600;
  display: inline-block;
  min-width: 90px;
}

/* PRODUTO */
.produto {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  padding: 1.5rem;
  min-height: 200px;
  transition: var(--transicao);
}

.produto:hover {
  background: rgba(59, 130, 246, 0.03);
}

.produto__imagem {
  width: 160px;
  height: 180px;
  object-fit: cover;
  border-radius: 10px;
  border: 2px solid var(--preto-borda);
  transition: var(--transicao);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.produto:hover .produto__imagem {
  border-color: var(--primaria);
  transform: scale(1.02);
}

.produto__detalhes { 
  flex: 1; 
}

.produto__cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.75rem;
  padding-top: 0.75rem;
}

.produto__nome {
  font-weight: 700;
  color: var(--branco);
  font-size: 1.3rem;
  letter-spacing: -0.01em;
}

.produto__remover {
  width: 20px;
  height: 20px;
  cursor: pointer;
  opacity: 0.6;
  transition: var(--transicao);
  filter: invert(1) brightness(0.8);
}

.produto__remover:hover {
  opacity: 1;
  transform: rotate(90deg);
  filter: invert(27%) sepia(85%) saturate(2878%) hue-rotate(216deg) brightness(150%) contrast(97%);
}

.produto__descricao {
  color: var(--cinza-texto);
  font-size: 0.95rem;
  margin-bottom: 1rem;
  line-height: 1.5;
}

.produto__controles {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
}

.produto__precos {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}

.preco { font-weight: 600; }
.preco--antigo { 
  color: var(--cinza-texto); 
  text-decoration: line-through; 
  font-size: 1rem; 
}
.preco--atual { 
  font-size: 1.4rem; 
  font-weight: 800; 
  color: var(--branco); 
}

.badge {
  color: var(--branco);
  padding: 0.4rem 1rem;
  border-radius: 20px;
  font-weight: 700;
  font-size: 0.85rem;
  background: var(--sucesso);
}

/* ENVIO */
.opcao-envio {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1.25rem;
  border: 2px solid var(--preto-borda);
  border-radius: var(--raio-borda);
  background: var(--preto-caixa);
  margin-bottom: 0.75rem;
  transition: var(--transicao);
  cursor: pointer;
}

.opcao-envio:hover {
  border-color: var(--primaria);
  transform: translateY(-2px);
}

.opcao-envio--ativa {
  border-color: var(--primaria);
  background: linear-gradient(to right, rgba(59, 130, 246, 0.1), transparent);
}

.opcao-envio__rotulo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  font-size: 1.05rem;
  color: var(--branco);
}

.opcao-envio__prazo,
.opcao-envio__endereco {
  color: var(--cinza-texto);
  font-size: 0.95rem;
  margin-top: 0.5rem;
}

.opcao-envio__alterar {
  color: var(--primaria-brilho);
  text-decoration: none;
  font-weight: 600;
  margin-top: 0.75rem;
  display: inline-block;
  font-size: 0.95rem;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  transition: var(--transicao);
  background: rgba(59, 130, 246, 0.1);
}

.opcao-envio__alterar:hover {
  background: var(--primaria);
  color: var(--branco);
}

.opcao-envio__preco {
  font-weight: 800;
  color: var(--branco);
  font-size: 1.2rem;
}

/* PAGAMENTO */
.metodo-pagamento {
  border: 2px solid var(--preto-borda);
  border-radius: var(--raio-borda);
  padding: 1.5rem;
  background: var(--preto-caixa);
  margin-bottom: 1rem;
  transition: var(--transicao);
  cursor: pointer;
}

.metodo-pagamento:hover {
  border-color: var(--primaria);
  transform: translateY(-2px);
}

.metodo-pagamento--ativo {
  background: linear-gradient(to right, rgba(59, 130, 246, 0.1), transparent);
  border-color: var(--primaria);
}

.metodo-pagamento__cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.metodo-pagamento__rotulo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  font-size: 1.05rem;
  color: var(--branco);
}

.metodo-pagamento__logo {
  width: 85px;
  height: 55px;
  object-fit: contain;
  opacity: 0.9;
  transition: var(--transicao);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.metodo-pagamento:hover .metodo-pagamento__logo {
  opacity: 1;
  transform: translateY(-2px);
}

.metodo-pagamento__formulario {
  margin-top: 1rem;
  padding: 1.25rem;
  background: var(--preto-profundo);
  border-radius: 10px;
  border: 1px solid var(--preto-borda);
}

.metodo-pagamento__bandeiras {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
}

.bandeira-cartao {
  width: 42px;
  height: 28px;
  object-fit: contain;
  filter: grayscale(20%);
  transition: var(--transicao);
  border-radius: 4px;
}

.bandeira-cartao:hover {
  filter: grayscale(0%);
  transform: translateY(-2px);
}

.selo-seguranca {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(59, 130, 246, 0.1);
  color: var(--primaria-brilho);
  padding: 1rem;
  border-radius: 10px;
  border: 1px solid rgba(59, 130, 246, 0.2);
  margin-top: 1rem;
  font-weight: 600;
  font-size: 0.9rem;
}

.selo-seguranca__icone {
  width: 20px;
  height: 20px;
  filter: invert(27%) sepia(85%) saturate(2878%) hue-rotate(216deg) brightness(150%) contrast(97%);
}

/* RESUMO */
.cartao-resumo {
  background: var(--preto-caixa);
  border-radius: var(--raio-borda);
  overflow: hidden;
  box-shadow: var(--sombra-destaque);
  position: relative;
  border: 2px solid var(--primaria);
}

.cartao-resumo::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--primaria), var(--primaria-brilho));
}

.cartao-resumo__conteudo {
  padding: 1.75rem;
}

.item-resumo {
  display: flex;
  justify-content: space-between;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.95rem;
  color: var(--branco-suave);
}

.item-resumo--secundario { 
  color: var(--cinza-texto);
  font-weight: 500;
}

.item-resumo--total { 
  border-top: 2px solid var(--primaria);
  padding-top: 1rem;
  margin-top: 0.5rem;
  font-weight: 800; 
  font-size: 1.2rem;
  color: var(--branco);
}

.valor-total {
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--primaria-brilho);
}

.caixa-desconto__titulo {
  margin: 0 0 1rem 0;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--branco);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.texto-confirmacao {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--cinza-texto);
  text-align: center;
  padding: 1rem;
  margin-top: 1.5rem;
  background: rgba(59, 130, 246, 0.05);
  border-radius: var(--raio-borda);
}

.link {
  color: var(--primaria-brilho);
  text-decoration: none;
  font-weight: 600;
}

.link:hover { 
  text-decoration: underline;
}

/* RODAPÉ */
.rodape {
  background: var(--preto-profundo) !important;
  padding: 3rem 0 2rem !important;
  margin-top: auto !important;
  border-top: 1px solid var(--preto-borda) !important;
}

.rodape__divisor {
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.3), transparent) !important;
  margin: 0 0 2.5rem 0 !important;
  width: 100% !important;
}

.rodape__conteudo {
  display: flex !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  margin: 0 !important;
}

.rodape__coluna {
  padding: 0 1rem !important;
  margin-bottom: 2rem !important;
  flex: 1 1 0 !important;
  min-width: 180px !important;
  display: flex !important;
  flex-direction: column !important;
}

.rodape__coluna--ajuda {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important; 
}

.rodape__conteudo-coluna {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

.rodape__coluna--ajuda .rodape__conteudo-coluna {
  justify-content: flex-start !important; 
  gap: 0.5rem !important; 
}

.rodape__coluna--localizacao .rodape__conteudo-coluna {
  justify-content: space-between !important;
  height: 100% !important;
}

.rodape__titulo {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  margin-bottom: 1rem !important;
  color: var(--branco) !important;
}

/* BOTÃO DE CONTATO  */
.botao--contato {
  background: var(--primaria) !important;
  color: var(--branco) !important;
  padding: 0.75rem 1.5rem !important;
  border-radius: 8px !important;
  font-size: 0.95rem !important;
  border: none !important;
  cursor: pointer !important;
  transition: var(--transicao) !important;
  margin-top: 0 !important; 
  align-self: flex-start !important;
  max-width: fit-content !important; 
}

.botao--contato:hover {
  background: var(--primaria-suave) !important;
  transform: translateY(-2px) !important;
}

.rodape__lista {
  list-style: none !important;
  padding-left: 0 !important;
  margin-bottom: 0 !important;
}

.rodape__lista li {
  margin-bottom: 0.75rem !important;
  color: var(--cinza-texto) !important;
  cursor: pointer !important;
  transition: var(--transicao) !important;
  font-size: 0.95rem !important;
}

.rodape__lista li:hover {
  color: var(--primaria-brilho) !important;
  transform: translateX(5px) !important;
}

/* SELETOR DE LOCALIZAÇÃO */
.seletor-localizacao {
  margin-bottom: 1.5rem !important;
  max-width: 220px !important; 
}

.seletor-localizacao__gatilho {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  padding: 0.75rem 1rem !important;
  cursor: pointer !important;
  background: rgba(59, 130, 246, 0.1) !important;
  border-radius: 8px !important;
  transition: var(--transicao) !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
  max-width: 220px !important; 
  width: 100% !important;
}

.seletor-localizacao__gatilho:hover {
  background: rgba(59, 130, 246, 0.15) !important;
  transform: translateY(-2px) !important;
}

.bandeira {
  width: 24px !important;
  height: 18px !important;
  border-radius: 2px !important;
}

/* REDES SOCIAIS */
.redes-sociais {
  display: flex !important;
  gap: 1rem !important;
  margin-top: 1.5rem !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
}

.rede-social {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  transition: var(--transicao) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  flex-shrink: 0 !important;
}

.rede-social:hover {
  background: var(--primaria) !important;
  transform: translateY(-3px) !important;
  border-color: var(--primaria) !important;
}

.icone-rede {
  width: 20px !important;
  height: 20px !important;
  opacity: 0.9 !important;
  filter: invert(1) brightness(0.9) !important;
}

.rede-social:hover .icone-rede {
  opacity: 1 !important;
  filter: brightness(0) invert(1) !important;
}


/* RESPONSIVIDADE */
@media (max-width: 992px) {
  .layout { 
    flex-direction: column; 
    gap: 2rem;
  }
  
  .layout__lateral { 
    width: 100%; 
  }
}

@media (max-width: 768px) {
  .container {
    padding: 0 1rem;
  }
  
  .cabecalho-pagina__titulo { 
    font-size: 2rem; 
  }
  
  .informacoes-cliente__linha { 
    flex-direction: column; 
    gap: 1rem; 
  }
  
  .produto {
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-height: auto;
  }
  
  .produto__imagem {
    width: 200px;
    height: 200px;
  }
  
  .produto__controllers {
    flex-direction: column;
    gap: 1rem;
  }
  
  .produto__precos {
    align-items: center;
  }
  
  .rodape__conteudo {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .cabecalho-pagina__titulo { 
    font-size: 1.75rem; 
  }
  
  .cartao {
    padding: 1.25rem;
  }
  
  .rodape__conteudo {
    grid-template-columns: 1fr;
    text-align: center;
  }
  
  .rodape__coluna--ajuda {
    align-items: center;
  }
  
  .redes-sociais {
    justify-content: center;
  }
  
  .barra-superior__conteudo {
    flex-direction: column;
    gap: 1rem;
  }
  
  .barra-superior__esquerda {
    align-items: center;
  }
  
  .opcao-envio,
  .metodo-pagamento {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
  
  .opcao-envio__preco {
    align-self: center;
  }
}

/* rodapé */
.rodape__conteudo-coluna {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 1rem 0;
}

.rodape__coluna--ajuda .rodape__conteudo-coluna {
  justify-content: space-between;
}

.rodape__coluna--localizacao .rodape__conteudo-coluna {
  justify-content: space-between;
  height: 100%;
}

.seletor-localizacao {
  margin-bottom: 1.5rem;
}

.redes-sociais {
  display: flex;
  gap: 1rem;
  margin-top: auto;
  justify-content: flex-start;
}

.grid-x.align-stretch > .cell {
  display: flex;
  flex-direction: column;
}

@media (max-width: 1024px) {
  .rodape__coluna {
    margin-bottom: 2rem;
  }
  
  .rodape__coluna--localizacao {
    margin-top: 1rem;
  }
  
  .redes-sociais {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .rodape__coluna {
    text-align: center;
  }
  
  .rodape__coluna--ajuda {
    align-items: center;
  }
  
  .botao--contato {
    align-self: center;
  }
  
  .seletor-localizacao__gatilho {
    justify-content: center;
  }
  
  .redes-sociais {
    justify-content: center;
  }
}

.rodape__conteudo {
  padding-top: 1rem;
}

.grid-x.grid-margin-x.align-stretch {
  margin-top: 0;
  margin-bottom: 0;
}

.grid-x.grid-margin-x.align-stretch > .cell {
  padding-top: 1rem;
  padding-bottom: 1rem;
}