/* Ovello Eyewear — estilos da loja. Cores, fontes e espaços vêm de brand/tokens.css. */

*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--linho);
  color: var(--garrafa);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, dl, dd, figure { margin: 0; }
[hidden] { display: none !important; }
button, input, select { font: inherit; }

.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
.display, .titulo, .subtitulo { text-wrap: balance; }
a { color: inherit; }

:focus-visible { outline: 2px solid var(--garrafa); outline-offset: 2px; }
.escuro :focus-visible { outline-color: var(--linho); }

.pular {
  position: absolute;
  left: var(--space-2);
  top: calc(-1 * var(--space-5));
  padding: var(--space-2);
  background: var(--garrafa);
  color: var(--linho);
  z-index: 10;
}
.pular:focus { top: var(--space-1); }

/* ---------- Estrutura ---------- */

.conteiner {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-2);
}

.secao { padding-block: var(--space-5); }

.escuro { background: var(--garrafa); color: var(--sobre-escuro); }
.superficie { background: var(--areia); }

.cabecalho-secao { display: grid; gap: var(--space-1); margin-bottom: var(--space-4); }

.secundario { color: var(--pedra); }

/* Rótulos e botões têm espaçamento entre letras também depois da última letra.
   O recuo inicial do mesmo valor devolve o texto ao centro óptico. */
.centralizado { text-align: center; }
.centralizado .rotulo,
.rotulo.centralizado { text-indent: 0.24em; }

/* ---------- Botões ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--garrafa);
  border-radius: var(--radius-0);
  background: var(--garrafa);
  color: var(--linho);
  text-decoration: none;
  text-indent: 0.16em;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}
.btn:hover { background: var(--linho); color: var(--garrafa); }

.btn-claro { background: var(--linho); border-color: var(--linho); color: var(--garrafa); }
.btn-claro:hover { background: var(--garrafa); color: var(--linho); }

.btn-bloco { width: 100%; }

/* ---------- Foto pendente ---------- */

.foto {
  display: grid;
  place-items: center;
  background: var(--areia);
  color: var(--pedra);
  border-radius: var(--radius-0);
}
.foto-retrato { aspect-ratio: 4 / 5; }
.foto-quadrada { aspect-ratio: 1 / 1; }
.foto-paisagem { aspect-ratio: 3 / 2; }
.superficie .foto { background: var(--linho); }
.foto.rotulo { text-indent: 0.24em; }

/* ---------- 0. Barra de aviso ---------- */

.aviso {
  padding: var(--space-1) var(--space-2);
  text-align: center;
}

/* ---------- Cabeçalho ---------- */

/* Três colunas iguais nas laterais: o logo fica no centro exato da página. */
.topo { position: relative; z-index: 5; background: var(--linho); border-bottom: 1px solid var(--linha); }
.topo-grade {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: var(--space-2);
  padding-block: var(--space-2);
}
.marca { display: flex; justify-self: center; }
.marca img { width: 160px; height: auto; }

.menu { display: flex; gap: var(--space-3); justify-self: start; }
.menu a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.menu a:hover { border-bottom-color: var(--garrafa); }
.menu .so-desktop { display: none; }

.topo-acoes { display: flex; align-items: center; justify-self: end; gap: var(--space-1); }
.busca-abrir,
.carrinho-abrir {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
/* A sacola é recortada no próprio desenho: encostada à direita, alinha com a borda do conteúdo. */
.carrinho-abrir { justify-content: flex-end; gap: var(--space-1); }
.carrinho-contagem { min-width: 1ch; letter-spacing: 0; }

/* ---------- Busca ---------- */

.busca { display: none; }
.topo.busca-aberta .busca {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: 0 var(--space-2) var(--space-2);
  background: var(--linho);
  border-bottom: 1px solid var(--linha);
}
.busca-icone { position: absolute; left: var(--space-2); top: 14px; color: var(--pedra); pointer-events: none; }
.busca input {
  width: 100%;
  min-height: 44px;
  padding: 0 0 0 var(--space-3);
  border: 0;
  border-bottom: 1px solid var(--pedra);
  border-radius: var(--radius-0);
  background: transparent;
  color: var(--garrafa);
  appearance: none;
}
.busca input::placeholder { color: var(--pedra); opacity: 1; }
.busca input::-webkit-search-cancel-button {
  appearance: none;
  width: 12px;
  height: 12px;
  cursor: pointer;
  background:
    linear-gradient(45deg, transparent calc(50% - 0.75px), var(--pedra) calc(50% - 0.75px), var(--pedra) calc(50% + 0.75px), transparent calc(50% + 0.75px)),
    linear-gradient(-45deg, transparent calc(50% - 0.75px), var(--pedra) calc(50% - 0.75px), var(--pedra) calc(50% + 0.75px), transparent calc(50% + 0.75px));
}
.busca input:focus-visible { outline: none; border-bottom-color: var(--garrafa); box-shadow: inset 0 -1px 0 var(--garrafa); }

.busca-resultados {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: var(--space-2);
  right: var(--space-2);
  z-index: 6;
  background: var(--areia);
}
.busca-resultados li + li { border-top: 1px solid var(--linha); }
.busca-resultados a {
  display: grid;
  min-height: 44px;
  padding: var(--space-1) var(--space-2);
  text-decoration: none;
}
.busca-resultados a:hover,
.busca-resultados a:focus-visible { background: var(--linho); outline-offset: -2px; }
.busca-vazia { padding: var(--space-2); }

/* ---------- 1. Hero ---------- */

.hero .conteiner { display: grid; gap: var(--space-4); }
.hero-texto { display: grid; gap: var(--space-3); align-content: center; justify-items: start; }
.hero-texto .rotulo { margin-bottom: calc(var(--space-1) - var(--space-3)); }
.hero-texto .corpo { max-width: 34em; }

/* ---------- 2. Garantias ---------- */

.garantias ul { display: grid; }
.garantias li {
  display: grid;
  gap: var(--space-1);
  padding-block: var(--space-3);
  text-align: center;
}
.garantias li + li { border-top: 1px solid var(--linha); }
.garantias .rotulo { text-indent: 0.24em; }

/* ---------- 3. Coleção ---------- */

.produtos { display: grid; gap: var(--space-5); }
.produto { display: grid; gap: var(--space-3); align-content: start; }
.produto-link { display: block; text-decoration: none; }
.produto-info { display: grid; gap: var(--space-1); }
.produto-info .subtitulo a { text-decoration: none; }
.produto-info .subtitulo a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.preco { color: var(--tartaruga); font-weight: 500; }
.produto-preco { display: grid; }

/* ---------- 5. Sobre ---------- */

.sobre .conteiner { display: grid; gap: var(--space-4); }
.sobre-texto { display: grid; gap: var(--space-3); align-content: center; }
.sobre-texto .rotulo { margin-bottom: calc(var(--space-1) - var(--space-3)); }
.sobre-texto .corpo { max-width: 34em; }

/* ---------- 7. Perguntas frequentes ---------- */

.faq-lista { max-width: 760px; border-top: 1px solid var(--linha); }
.faq-lista details { border-bottom: 1px solid var(--linha); }
.faq-lista summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 64px;
  padding-block: var(--space-2);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.faq-lista summary::-webkit-details-marker { display: none; }
.faq-lista summary::after {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  background:
    linear-gradient(currentColor, currentColor) center / 12px 1px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1px 12px no-repeat;
  transition: transform 160ms ease;
}
.faq-lista details[open] summary::after { transform: rotate(45deg); }
.faq-lista details p { padding-bottom: var(--space-3); max-width: 40em; }

/* ---------- 8. Chamada final ---------- */

.chamada .conteiner { display: grid; gap: var(--space-4); justify-items: center; text-align: center; }
.chamada .display { max-width: 12em; }

/* ---------- 9. Rodapé ---------- */

.rodape { padding-block: var(--space-5) var(--space-4); border-top: 1px solid var(--pedra); }
.rodape .conteiner { display: grid; gap: var(--space-4); }
.rodape-logo { display: flex; align-items: center; min-height: 44px; justify-self: start; align-self: start; }
.rodape-logo img { width: 176px; height: auto; }
.rodape-colunas { display: grid; gap: var(--space-4); }
.rodape-bloco { display: grid; align-content: start; }
/* Todas as linhas das colunas têm 44px (a área de toque dos links): texto e links alinham entre as colunas. */
.rodape-bloco > h2 { margin-bottom: var(--space-1); }
.rodape-bloco > p,
.rodape-links a { display: flex; align-items: center; min-height: 44px; }
.rodape-links a { text-decoration: none; }
.rodape-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.rodape-pagamento { display: grid; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--pedra); }
.selos { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.selos li { display: flex; width: 56px; height: 36px; background: var(--linho); }
.selos img { width: 100%; height: 100%; object-fit: contain; }
.rodape-fim { padding-top: var(--space-3); border-top: 1px solid var(--pedra); }

/* ---------- 4. Página de produto ---------- */

.trilha { padding-top: var(--space-3); }
.trilha a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.trilha a:hover { text-decoration: underline; text-underline-offset: 4px; }

.pdp { padding-block: var(--space-3) var(--space-5); }
.pdp .conteiner { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }

.galeria { display: grid; gap: var(--space-1); }
.miniaturas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-1); }

.pdp-info { display: grid; gap: var(--space-3); align-content: start; }
.pdp-titulo { display: grid; gap: var(--space-1); }
.pdp-preco { display: grid; }

.cores { border: 0; margin: 0; padding: 0; min-width: 0; }
.cores legend { padding: 0; margin-bottom: var(--space-2); }
.cores-opcoes { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.cor input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cor span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--space-2);
  border: 1px solid var(--pedra);
  cursor: pointer;
}
.cor input:checked + span { border-color: var(--garrafa); box-shadow: inset 0 0 0 1px var(--garrafa); }
.cor input:focus-visible + span { outline: 2px solid var(--garrafa); outline-offset: 2px; }

.entrega { padding: var(--space-2); background: var(--areia); }

.detalhes { display: grid; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--linha); }
.detalhes dl { display: grid; }
.detalhes dl > div {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--space-2);
  padding-block: var(--space-1);
  border-bottom: 1px solid var(--linha);
}
.detalhes dt { font-weight: 500; }

/* ---------- Compra na página de produto ---------- */

.pdp-compra { display: grid; gap: var(--space-3); }

/* ---------- Checkout ---------- */

.checkout { padding-block: var(--space-3) var(--space-5); }
.checkout-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }

.resumo { display: grid; gap: var(--space-3); align-content: start; padding: var(--space-3); background: var(--areia); }
.resumo .foto { background: var(--linho); }
.resumo-total { display: grid; border-top: 1px solid var(--linha); }
.resumo-total > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  padding-block: var(--space-1);
  border-bottom: 1px solid var(--linha);
}
.resumo-total .corpo dt { font-weight: 500; }

.checkout-form { display: grid; gap: var(--space-4); }
.checkout-form fieldset { display: grid; gap: var(--space-3); min-width: 0; margin: 0; padding: 0; border: 0; }
.checkout-form legend { padding: 0; margin-bottom: var(--space-3); }

.campo { display: grid; gap: var(--space-1); align-content: start; }
.campo > label { font-weight: 500; }
.campo input:where(:not([type="checkbox"], [type="radio"])),
.campo select {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--space-2);
  border: 1px solid var(--pedra);
  border-radius: var(--radius-0);
  background-color: var(--linho);
  color: var(--garrafa);
  appearance: none;
}
.campo select {
  padding-right: var(--space-4);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--pedra) 50%),
    linear-gradient(135deg, var(--pedra) 50%, transparent 50%);
  background-position: calc(100% - 21px) 50%, calc(100% - 16px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
.campo input:focus-visible,
.campo select:focus-visible { outline: 2px solid var(--garrafa); outline-offset: 0; }
.campo [aria-invalid="true"] { border-color: var(--tartaruga); box-shadow: inset 0 0 0 1px var(--tartaruga); }
.erro { color: var(--tartaruga); }

.campos-dois { display: grid; gap: var(--space-3); }

.opcoes-pagamento { display: grid; gap: var(--space-1); }
.opcao input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opcao-caixa { display: grid; padding: var(--space-2); border: 1px solid var(--pedra); cursor: pointer; }
.opcao input:checked + .opcao-caixa { border-color: var(--garrafa); box-shadow: inset 0 0 0 1px var(--garrafa); }
.opcao input:focus-visible + .opcao-caixa { outline: 2px solid var(--garrafa); outline-offset: 2px; }

.aceite { display: flex; gap: var(--space-1); align-items: flex-start; min-height: 44px; cursor: pointer; }
.aceite input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--garrafa); }

.checkout-enviar { display: grid; gap: var(--space-2); }
.btn:disabled { cursor: progress; opacity: 0.72; }

.aviso-erro { padding: var(--space-2); border: 1px solid var(--tartaruga); color: var(--tartaruga); }
.aviso-erro:focus { outline: none; }

.isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Retorno do pagamento ---------- */

.retorno .conteiner { display: grid; gap: var(--space-4); justify-items: center; max-width: 640px; }
.retorno-texto { display: grid; gap: var(--space-2); }

/* ---------- Políticas ---------- */

.politica .conteiner { display: grid; gap: var(--space-4); max-width: calc(720px + 2 * var(--space-2)); }
.politica-topo { display: grid; gap: var(--space-2); padding-bottom: var(--space-4); border-bottom: 1px solid var(--linha); }
.politica-topo .rotulo { margin-bottom: calc(var(--space-1) - var(--space-2)); }
.politica-texto { display: grid; gap: var(--space-4); }
.politica-texto section { display: grid; gap: var(--space-2); }
.politica-texto ul,
.politica-texto ol { display: grid; gap: var(--space-1); margin: 0; padding-left: var(--space-3); }
.politica-texto ul { list-style: square; }
.politica-texto li::marker { color: var(--pedra); }
.politica-texto strong { font-weight: 500; }
.politica-texto a { text-underline-offset: 4px; }

/* ---------- Carrinho ---------- */

.gaveta {
  width: min(420px, 100%);
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  background: var(--linho);
  color: var(--garrafa);
}
.gaveta[open] { display: flex; flex-direction: column; }
.gaveta::backdrop { background: color-mix(in srgb, var(--garrafa) 40%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .gaveta[open] { animation: gaveta-entra 240ms cubic-bezier(0.2, 0.8, 0.2, 1); }
  @keyframes gaveta-entra { from { transform: translateX(100%); } }
}
.gaveta-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--linha);
}
/* O X tem 14px dentro de 44px de toque: a margem alinha o desenho à borda do conteúdo (24px). */
.gaveta-fechar { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-right: -7px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.gaveta-vazio { display: grid; gap: var(--space-3); justify-items: start; padding: var(--space-3); }
.carrinho-lista { flex: 1; overflow-y: auto; padding: 0 var(--space-3); }
.carrinho-item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: var(--space-2);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--linha);
}
.carrinho-item-info { display: grid; gap: var(--space-1); align-content: start; }
.carrinho-item-fim { display: grid; justify-items: end; align-content: space-between; }
.carrinho-aviso { margin-top: var(--space-3); padding: var(--space-2); border: 1px solid var(--tartaruga); color: var(--tartaruga); }
.quantidade { display: inline-flex; align-items: center; justify-self: start; border: 1px solid var(--pedra); }
.quantidade button { width: 44px; height: 44px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.quantidade button:disabled { color: var(--pedra); cursor: not-allowed; }
.quantidade span { min-width: 24px; text-align: center; }
.gaveta-rodape { display: grid; gap: var(--space-2); padding: var(--space-3); border-top: 1px solid var(--linha); }
.gaveta-rodape .resumo-total { border-top: 0; margin-top: calc(-1 * var(--space-1)); }
.btn-texto {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

/* Resumo do checkout */
.resumo-topo { display: flex; align-items: center; justify-content: space-between; margin-block: calc((16px - 44px) / 2); }
/* "Editar" é mais estreito que 44px: a área de toque cresce para a esquerda, o texto segue na borda. */
.resumo-topo .btn-texto { min-width: 44px; justify-content: flex-end; }
.resumo-itens { display: grid; }
/* Com itens, o total encosta na lista (o vão do resumo somaria ao respiro de cada linha). */
.resumo-itens:has(li) ~ .resumo-total { margin-top: calc(-1 * var(--space-3)); }
.resumo-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: start;
  padding-block: var(--space-2);
  border-top: 1px solid var(--linha);
}

/* ---------- Desktop ---------- */

@media (min-width: 768px) {
  .conteiner { padding-inline: var(--space-4); }
  .secao { padding-block: calc(var(--space-5) * 1.5); }

  .menu .so-desktop { display: inline-flex; }
  .menu { gap: var(--space-4); }
  .marca img { width: 176px; }
  .busca-abrir { display: none; }
  .topo-acoes { gap: var(--space-3); }
  .busca,
  .topo.busca-aberta .busca { display: block; position: relative; top: auto; width: 240px; padding: 0; border: 0; background: none; }
  .busca-icone { left: 0; }
  .busca-resultados { left: auto; right: 0; width: 360px; }

  .campos-dois { grid-template-columns: 1fr 1fr; }
  .campos-dois.campos-cidade { grid-template-columns: 3fr 1fr; }
  .checkout-grade { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-5); align-items: start; }
  .checkout-form { grid-column: 1; grid-row: 1; }
  .resumo { grid-column: 2; grid-row: 1; position: sticky; top: var(--space-4); }

  /* Foto em 5/12: em 1440×900 o hero inteiro (texto e foto) cabe na primeira tela. */
  .hero .conteiner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-5); }

  .garantias ul { grid-template-columns: repeat(3, 1fr); }
  .garantias li { padding: var(--space-4) var(--space-3); }
  .garantias li + li { border-top: 0; border-left: 1px solid var(--linha); }

  /* Subgrade: nome, descrição, preço e botão alinham entre os cartões mesmo com textos de alturas diferentes. */
  .produtos { grid-template-columns: 1fr 1fr; column-gap: var(--space-4); row-gap: var(--space-3); }
  .produto { grid-row: span 4; grid-template-rows: subgrid; }
  /* Da segunda fileira em diante: o vão entre cartões volta a ser o do celular (64px), não o interno (24px). */
  .produto:nth-child(n + 3) { margin-top: calc(var(--space-5) - var(--space-3)); }

  .sobre .conteiner { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
  .sobre .foto { order: -1; }

  .rodape .conteiner { grid-template-columns: 1fr 2fr; }
  .rodape-colunas { grid-template-columns: repeat(3, 1fr); }
  .rodape-pagamento,
  .rodape-fim { grid-column: 1 / -1; }

  .pdp .conteiner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-5); align-items: start; }
  .pdp-info { position: sticky; top: var(--space-4); }
  .politica .conteiner { max-width: calc(720px + 2 * var(--space-4)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}