/* ==========================================================================
   Klyxar — layouts de página
   home · loja/categoria · produto · carrinho · checkout · pesquisa · conta ·
   marca · contacto · faq · legal · 404
   ========================================================================== */

/* cabeçalho de página simples */
.pag-cab { padding-top: clamp(32px, 5vw, 72px); }
.pag-cab .migalhas { margin-bottom: 20px; }
.pag-cab p { margin-top: 16px; color: var(--tinta-2); max-width: 52ch; }

/* ---------------------------------------------------------------- home */
.hero {
  position: relative;
  padding-top: clamp(8px, 2vw, 24px);
  padding-bottom: clamp(32px, 5vw, 72px);
  align-items: end;
}
.hero-texto { grid-column: 1 / 7; grid-row: 1; align-self: end; padding-bottom: clamp(24px, 6vw, 96px); position: relative; z-index: 2; }
.hero-eyebrow { display: block; margin-bottom: clamp(20px, 3vw, 40px); color: var(--tinta-3); font-size: 13px; }
.hero-titulo { font-size: var(--t-hero); line-height: .92; font-weight: 300; letter-spacing: -.04em; }
.hero-titulo .l { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.hero-titulo .l span { display: block; }
.hero-p { margin-top: clamp(24px, 3vw, 40px); max-width: 34ch; color: var(--tinta-2); font-size: 15px; }
.hero-acoes { display: flex; flex-wrap: wrap; gap: 14px 32px; align-items: center; margin-top: clamp(24px, 3vw, 36px); }
.hero-foto { grid-column: 7 / 13; grid-row: 1; position: relative; }
.hero-foto figure { position: relative; overflow: hidden; }
.hero-foto img { width: 100%; height: clamp(480px, calc(100svh - var(--topo) - 110px), 860px); object-fit: cover; object-position: 50% 20%; }
.hero-legenda { display: flex; justify-content: space-between; gap: 16px; margin-top: 12px; font-size: var(--t-peq); color: var(--tinta-3); }
.hero-legenda a:hover { color: var(--tinta); }
/* sequência de entrada (uma vez, na carga) */
@media (prefers-reduced-motion: no-preference) {
  .hero-titulo .l span { transform: translateY(110%); animation: hero-linha 1.1s var(--ease-out) forwards; animation-delay: calc(.15s + var(--i) * .1s); }
  .hero-eyebrow, .hero-p, .hero-acoes, .hero-legenda { opacity: 0; animation: hero-fade 1s var(--ease-out) forwards; }
  .hero-eyebrow { animation-delay: .1s; }
  .hero-p { animation-delay: .6s; }
  .hero-acoes { animation-delay: .75s; }
  .hero-legenda { animation-delay: 1s; }
  .hero-foto img { opacity: 0; transform: scale(1.06); animation: hero-foto 1.6s var(--ease-img) forwards; animation-delay: .05s; }
  @keyframes hero-linha { to { transform: none; } }
  @keyframes hero-fade { to { opacity: 1; } }
  @keyframes hero-foto { to { opacity: 1; transform: none; } }
}
@media (max-width: 899px) {
  .hero { padding-top: 0; align-items: start; }
  .hero-foto { grid-column: 1 / -1; grid-row: 1; margin-inline: calc(-1 * var(--margem)); }
  .hero-foto img { height: min(72svh, 640px); object-position: 50% 15%; }
  .hero-legenda { padding-inline: var(--margem); }
  .hero-texto { grid-column: 1 / -1; grid-row: 2; padding: 32px 0 0; }
  .hero-p { max-width: 30ch; }
}

/* categorias */
.cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px var(--gutter); }
.cat { display: block; }
.cat:nth-child(2), .cat:nth-child(4) { margin-top: clamp(32px, 6vw, 96px); }
.cat figure { overflow: hidden; }
.cat img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 1.6s var(--ease-img); }
@media (hover: hover) { .cat:hover img { transform: scale(1.04); } }
.cat-info { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 14px; }
.cat-info h3 { font-size: var(--t-3); font-weight: 300; }
.cat-info span { font-size: var(--t-peq); color: var(--tinta-3); }
@media (max-width: 767px) {
  .cats { grid-template-columns: 1fr 1fr; }
  .cat:nth-child(2), .cat:nth-child(4) { margin-top: 40px; }
}

/* editorial */
.edit { align-items: center; }
.edit-foto { grid-column: 1 / 8; }
.edit-foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.edit-texto { grid-column: 9 / 13; }
.edit-texto p { margin-top: 24px; color: var(--tinta-2); }
.factos { margin-top: 40px; }
.factos div { padding: 18px 0; border-top: 1px solid var(--linha); }
.factos div:last-child { border-bottom: 1px solid var(--linha); }
.factos dt { font-size: 15px; }
.factos dd { margin: 4px 0 0; font-size: 13px; color: var(--tinta-2); }
@media (max-width: 899px) {
  .edit-foto { grid-column: 1 / -1; }
  .edit-texto { grid-column: 1 / -1; margin-top: 32px; }
}

/* frase da marca */
.frase { padding-block: var(--secção); }
.frase p { grid-column: 2 / 12; font-size: clamp(30px, 4.2vw, 64px); line-height: 1.08; font-weight: 300; letter-spacing: -.03em; max-width: 22ch; }
.frase a { grid-column: 2 / 12; margin-top: 32px; justify-self: start; }
@media (max-width: 899px) { .frase p, .frase a { grid-column: 1 / -1; } }

/* ------------------------------------------------- loja / categoria */
.loja-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding-top: clamp(32px, 5vw, 72px); }
.loja-cab p { margin-top: 12px; color: var(--tinta-2); max-width: 44ch; }
.loja-n { color: var(--tinta-3); font-size: 13px; white-space: nowrap; }
.cat-cab { padding-top: clamp(24px, 4vw, 56px); align-items: end; }
.cat-cab-texto { grid-column: 1 / 7; padding-bottom: 8%; }
.cat-cab-texto h1 { margin-top: 16px; }
.cat-cab-texto p { margin-top: 24px; color: var(--tinta-2); max-width: 38ch; font-size: 15px; }
.cat-cab-texto .loja-n { display: block; margin-top: 20px; }
.cat-cab-foto { grid-column: 8 / 13; }
.cat-cab-foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; max-height: 70vh; }
@media (max-width: 899px) {
  .cat-cab-texto { grid-column: 1 / -1; grid-row: 2; padding: 24px 0 0; }
  .cat-cab-foto { grid-column: 1 / -1; grid-row: 1; }
  .cat-cab-foto img { max-height: 56vh; }
}
.barra {
  position: sticky; top: var(--topo); z-index: 30; background: var(--branco);
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  margin-top: clamp(28px, 4vw, 48px); padding: 8px 0; border-bottom: 1px solid var(--linha);
}
.barra-cats { display: flex; gap: 4px; margin-left: -10px; overflow-x: auto; scrollbar-width: none; }
.barra-cats::-webkit-scrollbar { display: none; }
.barra-cats a { display: block; padding: 8px 10px; white-space: nowrap; color: var(--tinta-3); font-size: 13px; transition: color var(--dur-1); position: relative; }
.barra-cats a::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--dur-2) var(--ease-out); }
.barra-cats a:hover, .barra-cats a[aria-current="page"] { color: var(--tinta); }
.barra-cats a[aria-current="page"]::after { transform: scaleX(1); }
.barra-acoes { display: flex; align-items: center; gap: 4px; flex: none; }
.barra-acoes button, .barra-acoes label { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; font-size: 13px; cursor: pointer; }
.barra-acoes select { appearance: none; border: 0; background: none; padding: 0; cursor: pointer; font-size: 13px; color: var(--tinta); field-sizing: content; }
.barra-acoes .n { color: var(--tinta-3); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 16px; }
.chips:empty { display: none; }
.chips .limpar { font-size: var(--t-peq); color: var(--tinta-3); padding: 0 6px; }
.chips .limpar:hover { color: var(--tinta); }
.grelha-loja { padding-top: clamp(28px, 4vw, 48px); min-height: 40vh; }
.mais { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: clamp(40px, 6vw, 80px); color: var(--tinta-3); font-size: var(--t-peq); }
.mais:empty { display: none; }
.mais-barra { width: 160px; height: 1px; background: var(--linha); }
.mais-barra span { display: block; height: 100%; background: var(--tinta); transition: width var(--dur-2) var(--ease-out); }
@media (max-width: 899px) {
  .barra { margin-inline: calc(-1 * var(--margem)); padding-inline: var(--margem); }
  .barra-cats { margin-left: -10px; }
  .loja-cab { flex-direction: column; align-items: flex-start; gap: 8px; }
}
/* filtros (gaveta) */
.filtros-grupo { padding: 18px 0; border-bottom: 1px solid var(--linha); }
.filtros-grupo legend, .filtros-grupo h3 { font-size: 13px; font-weight: 500; margin-bottom: 4px; }
.filtros-grupo .escolha { padding: 9px 0; font-size: 14px; }
.filtros-grupo .escolha .n { margin-left: auto; color: var(--tinta-3); font-size: var(--t-peq); }
.filtros-preco { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.filtros-preco .campo { flex: 1; margin-top: 0; }
.filtros-preco .campo input { min-height: 44px; padding-top: 16px; }
.filtros-preco .campo label { top: 13px; }
.filtros-preco .campo input:focus ~ label, .filtros-preco .campo input:not(:placeholder-shown) ~ label { transform: translateY(-12px) scale(.75); }

/* ---------------------------------------------------------- produto */
.pdp { padding-top: clamp(16px, 2.5vw, 32px); align-items: start; }
.pdp-galeria { grid-column: 1 / 8; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); }
.pdp-galeria figure { position: relative; overflow: hidden; cursor: zoom-in; }
.pdp-galeria figure:first-child { grid-column: 1 / -1; }
.pdp-galeria figure:first-child:last-child { grid-column: 1 / 2; }
.pdp-galeria figure:nth-child(2):last-child { grid-column: 1 / -1; }
.pdp-galeria img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.pdp-galeria figure:first-child img { aspect-ratio: 4 / 5; max-height: 86vh; }
.pdp-pontos { display: none; }
.pdp-info { grid-column: 9 / 13; position: sticky; top: calc(var(--topo) + 24px); }
.pdp-info .migalhas { margin-bottom: 20px; }
.pdp-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.pdp-cab h1 { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.15; font-weight: 300; letter-spacing: -.015em; }
.pdp-fav { flex: none; width: 40px; height: 40px; margin: -8px -8px 0 0; display: grid; place-items: center; color: var(--tinta); }
.pdp-fav svg { width: 22px; height: 22px; }
.pdp-fav.on svg path { fill: currentColor; }
.pdp-preco { margin-top: 10px; font-size: 16px; }
.pdp-sub { margin-top: 6px; color: var(--tinta-3); font-size: 13px; }
.pdp-desc { margin-top: 24px; color: var(--tinta-2); max-width: 40ch; }
.tamanhos { margin-top: 32px; }
.tamanhos-cab { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; font-size: 13px; }
.tamanhos-cab button { font-size: var(--t-peq); color: var(--tinta-3); text-decoration: underline; text-underline-offset: 3px; }
.tamanhos-cab button:hover { color: var(--tinta); }
.tamanhos-ops { display: flex; flex-wrap: wrap; gap: 8px; }
.tamanhos-ops button { min-width: 48px; height: 44px; padding: 0 12px; border: 1px solid var(--linha-2); font-size: 13px; transition: border-color var(--dur-1), background var(--dur-1), color var(--dur-1); }
.tamanhos-ops button:hover:not(:disabled) { border-color: var(--tinta); }
.tamanhos-ops button[aria-pressed="true"] { border-color: var(--tinta); background: var(--tinta); color: #fff; }
.tamanhos-ops button:disabled { color: var(--tinta-3); border-color: var(--linha); background: repeating-linear-gradient(135deg, transparent 0 6px, var(--areia) 6px 7px); }
.tamanhos .campo-erro { margin-top: 8px; }
.pdp-compra { display: flex; gap: 12px; margin-top: 28px; }
.pdp-compra .botao { flex: 1; }
.pdp-disp { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; color: var(--tinta-2); }
.pdp-disp::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.pdp-disp.pouco::before { background: var(--ouro); }
.pdp-disp.fora::before { background: var(--tinta-3); }
.pdp-avisar { margin-top: 24px; padding: 20px; background: var(--areia); }
.pdp-avisar p { font-size: 13px; color: var(--tinta-2); }
.pdp-avisar .campo { margin-top: 4px; }
.pdp-avisar .botao-linha { margin-top: 8px; }
.pdp-info .sanfona { margin-top: 36px; }
.pdp-info .sanfona summary { padding: 16px 0; }
.pdp-info .sanfona-corpo { font-size: 13px; }
.pdp-lista { display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; font-size: 13px; }
.pdp-lista dt { color: var(--tinta-3); }
.pdp-lista dd { margin: 0; }
/* barra fixa no telemóvel */
.pdp-fixo {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
  display: none; align-items: center; gap: 16px;
  padding: 12px var(--margem) calc(12px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid var(--linha);
  transform: translateY(100%); transition: transform var(--dur-2) var(--ease-out);
}
.pdp-fixo.on { transform: none; }
.pdp-fixo .botao { flex: 1; min-height: 48px; }
.pdp-fixo-info { display: flex; flex-direction: column; min-width: 0; font-size: 13px; }
.pdp-fixo-info strong { font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdp-fixo-info span { color: var(--tinta-2); }
@media (max-width: 899px) {
  .pdp { padding-top: 0; }
  .pdp-galeria {
    grid-column: 1 / -1; display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--margem)); padding-inline: 0;
  }
  .pdp-galeria::-webkit-scrollbar { display: none; }
  .pdp-galeria figure { flex: 0 0 100%; scroll-snap-align: start; cursor: default; }
  .pdp-galeria figure:first-child img { max-height: none; }
  .pdp-galeria img { aspect-ratio: 4 / 5; }
  .pdp-pontos { display: flex; justify-content: center; gap: 6px; grid-column: 1 / -1; margin-top: 12px; }
  .pdp-pontos span { width: 5px; height: 5px; border-radius: 50%; background: var(--linha-2); transition: background var(--dur-1); }
  .pdp-pontos span.on { background: var(--tinta); }
  .pdp-info { grid-column: 1 / -1; position: static; margin-top: 24px; }
  .pdp-fixo { display: flex; }
  body[data-page="produto"] main { padding-bottom: 80px; }
}
/* guia de tamanhos + zoom */
.tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabela th, .tabela td { padding: 10px 0; text-align: left; border-bottom: 1px solid var(--linha); }
.tabela th { font-weight: 500; color: var(--tinta-3); font-size: var(--t-peq); }
.guia p { color: var(--tinta-2); margin-bottom: 20px; font-size: 13px; }
.guia p + p { margin-top: -10px; }
dialog.zoom { position: fixed; inset: 0; margin: 0; padding: 0; border: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; background: var(--branco); }
.zoom::backdrop { background: var(--branco); }
.zoom-in { position: relative; width: 100%; height: 100%; display: grid; place-items: center; }
.zoom-in img { max-height: 100dvh; max-width: 100vw; object-fit: contain; background: none; }
.zoom-fechar { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; display: grid; place-items: center; }
.zoom-fechar svg { width: 24px; height: 24px; }
.zoom-nav { position: absolute; inset: auto 0 20px 0; display: flex; justify-content: center; gap: 24px; font-size: 13px; }
.zoom-nav button { padding: 8px 12px; }
.zoom-nav button:disabled { color: var(--linha-2); }
@media (prefers-reduced-motion: no-preference) { .zoom[open] { animation: fundo var(--dur-2) ease; } .zoom.closing { animation: fundo .25s ease reverse; } }

/* --------------------------------------------------------- carrinho */
.carrinho { padding-top: clamp(32px, 5vw, 72px); align-items: start; }
.carrinho-lista { grid-column: 1 / 8; }
.carrinho-lista .linhas li { grid-template-columns: 120px 1fr; gap: 24px; padding: 24px 0; }
.carrinho-lista .linhas li > a img { width: 120px; }
.carrinho-lista .linha-nome { font-size: 15px; }
.carrinho-lista .linha-rem { right: 0; }
.carrinho-lista .linhas li:first-child { border-top: 1px solid var(--linha); }
.resumo { grid-column: 9 / 13; position: sticky; top: calc(var(--topo) + 24px); }
.resumo h2 { font-size: 15px; font-weight: 500; padding-bottom: 16px; border-bottom: 1px solid var(--linha); }
.resumo-linhas { display: grid; gap: 10px; padding: 16px 0; font-size: 13px; color: var(--tinta-2); }
.resumo-linhas div { display: flex; justify-content: space-between; gap: 16px; }
.resumo-linhas .desc { color: var(--ok); }
.resumo-total { display: flex; justify-content: space-between; padding: 16px 0; border-top: 1px solid var(--linha); font-size: 16px; }
.resumo-total small { display: block; font-size: var(--t-peq); color: var(--tinta-3); }
.resumo .botao { margin-top: 8px; }
.resumo-nota { margin-top: 12px; font-size: var(--t-peq); color: var(--tinta-3); text-align: center; }
.cupao { display: flex; align-items: flex-end; gap: 12px; }
.cupao .campo { flex: 1; }
.cupao .botao-linha { min-height: 44px; margin-bottom: 22px; }
.cupao-on { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; font-size: 13px; }
.cupao-on button { color: var(--tinta-3); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 899px) {
  .carrinho-lista, .resumo { grid-column: 1 / -1; }
  .resumo { position: static; margin-top: 40px; }
  .carrinho-lista .linhas li { grid-template-columns: 96px 1fr; gap: 16px; }
  .carrinho-lista .linhas li > a img { width: 96px; }
}

/* --------------------------------------------------------- checkout */
body[data-page="checkout"] .topo { background: var(--branco); }
.checkout { padding-top: clamp(24px, 4vw, 56px); align-items: start; }
.checkout-form { grid-column: 1 / 8; max-width: 640px; }
.checkout-resumo { grid-column: 9 / 13; position: sticky; top: calc(var(--topo) + 24px); }
.passo { border-top: 1px solid var(--linha); padding: 22px 0; }
.passo:last-child { border-bottom: 1px solid var(--linha); }
.passo-cab { display: flex; align-items: baseline; gap: 16px; }
.passo-cab h2 { font-size: 15px; font-weight: 500; flex: 1; }
.passo-cab .num { width: 20px; font-size: var(--t-peq); color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.passo-cab .editar { font-size: var(--t-peq); color: var(--tinta-3); text-decoration: underline; text-underline-offset: 3px; display: none; }
.passo.feito .passo-cab .editar { display: block; }
.passo.feito .passo-cab h2, .passo.feito .passo-cab .num { color: var(--tinta-3); }
.passo-resumo { display: none; padding: 8px 0 0 36px; font-size: 13px; color: var(--tinta-2); }
.passo.feito .passo-resumo { display: block; }
.passo-corpo { display: none; padding: 4px 0 0 36px; }
.passo.activo .passo-corpo { display: block; animation: aparece var(--dur-2) var(--ease-out); }
.passo.pendente .passo-cab h2 { color: var(--tinta-3); }
.passo-acoes { display: flex; align-items: center; gap: 24px; margin-top: 24px; }
.passo-opcoes { margin-top: 8px; }
.passo-opcoes .escolha { border-top: 1px solid var(--linha); }
.passo-opcoes .escolha:last-child { border-bottom: 1px solid var(--linha); }
.passo-opcoes .preco { margin-left: auto; white-space: nowrap; }
.pagamento-nota { display: grid; gap: 12px; padding: 18px 20px; margin-top: 8px; background: var(--areia); font-size: 13px; color: var(--tinta-2); }
.pagamento-nota strong { font-weight: 500; color: var(--tinta); }
.pagamento-meios { display: flex; flex-wrap: wrap; gap: 8px; }
.pagamento-meios span { padding: 6px 10px; border: 1px solid var(--linha-2); font-size: var(--t-peq); background: #fff; }
.checkout-resumo h2 { font-size: 15px; font-weight: 500; padding-bottom: 16px; border-bottom: 1px solid var(--linha); }
.resumo-itens { display: grid; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--linha); }
.resumo-itens li { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; font-size: 13px; }
.resumo-itens img { width: 56px; aspect-ratio: 4/5; object-fit: cover; }
.resumo-itens small { display: block; color: var(--tinta-3); font-size: var(--t-peq); }
.checkout-seguro { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: var(--t-peq); color: var(--tinta-3); }
.checkout-seguro svg { width: 14px; height: 14px; }
.checkout-movel-resumo { display: none; }
@media (max-width: 899px) {
  .checkout-form, .checkout-resumo { grid-column: 1 / -1; }
  .checkout-resumo { position: static; }
  .checkout-movel-resumo { display: block; margin-bottom: 8px; }
  .checkout-movel-resumo details { border: 1px solid var(--linha); padding: 0 16px; }
  .checkout-movel-resumo summary { display: flex; justify-content: space-between; padding: 14px 0; cursor: pointer; list-style: none; font-size: 13px; }
  .checkout-movel-resumo summary::-webkit-details-marker { display: none; }
  .checkout-resumo.no-movel { display: none; }
  .checkout-movel-resumo .checkout-resumo { display: block; padding-bottom: 8px; }
  .checkout-movel-resumo .checkout-resumo h2 { display: none; }
  .passo-corpo, .passo-resumo { padding-left: 0; }
}
.sucesso { padding-top: clamp(40px, 6vw, 96px); }
.sucesso-texto { grid-column: 1 / 7; }
.sucesso-texto h1 { margin-top: 20px; }
.sucesso-texto > p { margin-top: 24px; color: var(--tinta-2); max-width: 40ch; }
.sucesso-num { margin-top: 32px; display: grid; grid-template-columns: auto 1fr; gap: 8px 24px; font-size: 13px; }
.sucesso-num dt { color: var(--tinta-3); }
.sucesso-num dd { margin: 0; }
.sucesso-acoes { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; margin-top: 40px; }
.sucesso-resumo { grid-column: 8 / 13; }
.sucesso-ok { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--tinta); border-radius: 50%; }
.sucesso-ok svg { width: 20px; height: 20px; }
@media (max-width: 899px) { .sucesso-texto, .sucesso-resumo { grid-column: 1 / -1; } .sucesso-resumo { margin-top: 40px; } }

/* --------------------------------------------------------- pesquisa */
.pesquisa-cab { padding-top: clamp(24px, 4vw, 56px); }
.pesquisa-form { position: relative; display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--tinta); }
.pesquisa-form input { flex: 1; min-width: 0; border: 0; background: none; outline: none; padding: 14px 0; font-size: clamp(24px, 3.4vw, 44px); font-weight: 300; letter-spacing: -.02em; }
.pesquisa-form input::placeholder { color: var(--tinta-3); }
.pesquisa-form input::-webkit-search-cancel-button { display: none; }
.pesquisa-form .icone { width: 44px; height: 44px; display: grid; place-items: center; color: var(--tinta-3); }
.pesquisa-form .icone svg { width: 22px; height: 22px; }
.pesquisa-form .icone:hover { color: var(--tinta); }
.pesquisa-meta { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 16px; font-size: 13px; color: var(--tinta-2); }
.pesquisa-sug { padding-top: 48px; }
.pesquisa-sug h2 { font-size: 13px; color: var(--tinta-3); font-weight: 400; margin-bottom: 16px; }
.pesquisa-sug ul { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.pesquisa-sug a { font-size: clamp(18px, 2vw, 24px); font-weight: 300; padding: 4px 0; transition: color var(--dur-1); }
.pesquisa-sug a:hover { color: var(--tinta-3); }
.pesquisa-sug + .pesquisa-sug { padding-top: 40px; }
.pesquisa-sug .recente { display: inline-flex; align-items: center; gap: 12px; }
.pesquisa-sug .recente button { width: 20px; height: 20px; display: grid; place-items: center; color: var(--tinta-3); }
.pesquisa-sug .recente button svg { width: 14px; height: 14px; }

/* ------------------------------------------------------------ conta */
.conta-entrar { padding-top: clamp(32px, 5vw, 72px); align-items: start; }
.conta-form { grid-column: 1 / 6; }
.conta-form + .conta-form { grid-column: 8 / 13; }
.conta-form h1, .conta-form h2 { font-size: var(--t-2); }
.conta-form > p { margin-top: 12px; color: var(--tinta-2); max-width: 40ch; }
.conta-form form { margin-top: 12px; }
.conta-form .botao { margin-top: 28px; }
.conta-form .demo { margin-top: 24px; padding: 14px 16px; background: var(--areia); font-size: var(--t-peq); color: var(--tinta-2); }
.conta-form .demo button { text-decoration: underline; text-underline-offset: 3px; }
.conta-form .ou { display: none; }
.conta-tabs { display: none; }
@media (max-width: 899px) {
  .conta-form, .conta-form + .conta-form { grid-column: 1 / -1; }
  .conta-form + .conta-form { margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--linha); }
}
.conta { padding-top: clamp(32px, 5vw, 72px); align-items: start; }
.conta-cab { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding-bottom: 32px; }
.conta-cab p { margin-top: 8px; color: var(--tinta-2); }
.conta-cab button { font-size: 13px; color: var(--tinta-3); text-decoration: underline; text-underline-offset: 3px; }
.conta-cab button:hover { color: var(--tinta); }
.conta-nav { grid-column: 1 / 4; position: sticky; top: calc(var(--topo) + 24px); }
.conta-nav a { display: block; padding: 10px 0; font-size: 14px; color: var(--tinta-3); border-top: 1px solid var(--linha); transition: color var(--dur-1); }
.conta-nav a:last-child { border-bottom: 1px solid var(--linha); }
.conta-nav a:hover, .conta-nav a[aria-current="page"] { color: var(--tinta); }
.conta-corpo { grid-column: 5 / 13; }
.conta-corpo > h2 { font-size: var(--t-3); font-weight: 400; margin-bottom: 20px; }
.encomenda { border-top: 1px solid var(--linha); padding: 22px 0; }
.encomenda:last-child { border-bottom: 1px solid var(--linha); }
.encomenda-cab { display: grid; grid-template-columns: 1fr auto; gap: 4px 24px; font-size: 13px; }
.encomenda-cab .num { font-size: 15px; }
.encomenda-cab .data { color: var(--tinta-3); }
.encomenda-cab .estado { grid-column: 2; grid-row: 1 / 3; align-self: start; justify-self: end; display: inline-flex; align-items: center; gap: 8px; }
.encomenda-cab .estado::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tinta-3); }
.encomenda-cab .estado.DELIVERED::before { background: var(--ok); }
.encomenda-cab .estado.SHIPPED::before, .encomenda-cab .estado.PAID::before { background: var(--ouro); }
.encomenda-itens { display: flex; gap: 8px; margin-top: 16px; }
.encomenda-itens img { width: 56px; aspect-ratio: 4/5; object-fit: cover; }
.encomenda-detalhe { display: none; margin-top: 20px; padding-top: 20px; border-top: 1px dashed var(--linha); }
.encomenda.aberta .encomenda-detalhe { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; font-size: 13px; animation: aparece var(--dur-2) var(--ease-out); }
.encomenda-detalhe h4 { font-size: var(--t-peq); color: var(--tinta-3); font-weight: 400; margin-bottom: 8px; }
.encomenda-detalhe ul li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
.encomenda-detalhe .tot { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--linha); }
.encomenda-detalhe address { font-style: normal; color: var(--tinta-2); }
.encomenda-acoes { margin-top: 16px; display: flex; gap: 24px; font-size: 13px; }
.encomenda-acoes button, .encomenda-acoes a { text-decoration: underline; text-underline-offset: 3px; color: var(--tinta-2); }
.encomenda-acoes button:hover, .encomenda-acoes a:hover { color: var(--tinta); }
.moradas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); }
.morada { padding: 20px; border: 1px solid var(--linha); font-size: 13px; color: var(--tinta-2); position: relative; }
.morada strong { display: block; font-weight: 400; color: var(--tinta); margin-bottom: 6px; }
.morada .pred { position: absolute; top: 20px; right: 20px; font-size: var(--t-peq); color: var(--tinta-3); }
.morada button { margin-top: 12px; font-size: var(--t-peq); color: var(--tinta-3); text-decoration: underline; text-underline-offset: 3px; }
.morada button:hover { color: var(--tinta); }
.morada-nova { margin-top: 24px; }
.morada-form { margin-top: 24px; padding: 24px; border: 1px solid var(--linha); }
.morada-form .passo-acoes { margin-top: 20px; }
@media (max-width: 899px) {
  .conta-nav { grid-column: 1 / -1; position: static; display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--margem)); padding-inline: var(--margem); border-bottom: 1px solid var(--linha); }
  .conta-nav a { border: 0 !important; padding: 10px 14px 10px 0; white-space: nowrap; }
  .conta-corpo { grid-column: 1 / -1; margin-top: 32px; }
  .moradas { grid-template-columns: 1fr; }
  .encomenda.aberta .encomenda-detalhe { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------ marca */
.marca-cab { padding-top: clamp(40px, 6vw, 96px); }
.marca-cab h1 { grid-column: 1 / 10; }
.marca-cab p { grid-column: 1 / 8; margin-top: clamp(24px, 3vw, 40px); font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5; color: var(--tinta-2); max-width: 44ch; }
.marca-fotos { align-items: start; }
.marca-fotos figure:nth-child(1) { grid-column: 1 / 8; }
.marca-fotos figure:nth-child(2) { grid-column: 9 / 13; margin-top: 30%; }
.marca-fotos figure:nth-child(3) { grid-column: 3 / 7; margin-top: clamp(-40px, -4vw, -80px); }
.marca-fotos img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.marca-blocos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px var(--gutter); }
.marca-blocos h2 { font-size: var(--t-3); font-weight: 400; margin-bottom: 14px; }
.marca-blocos p { color: var(--tinta-2); }
.valores { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); border-top: 1px solid var(--linha); }
.valores div { padding-top: 20px; }
.valores strong { display: block; font-size: var(--t-2); font-weight: 300; letter-spacing: -.02em; }
.valores span { display: block; margin-top: 4px; color: var(--tinta-2); font-size: 13px; }
@media (max-width: 899px) {
  .marca-cab h1, .marca-cab p { grid-column: 1 / -1; }
  .marca-fotos figure:nth-child(1) { grid-column: 1 / -1; }
  .marca-fotos figure:nth-child(2) { grid-column: 7 / 13; margin-top: 24px; }
  .marca-fotos figure:nth-child(3) { grid-column: 1 / 6; margin-top: 24px; }
  .marca-blocos, .valores { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------- contacto */
.contacto { padding-top: clamp(32px, 5vw, 72px); align-items: start; }
.contacto-info { grid-column: 1 / 6; }
.contacto-info > p { margin-top: 20px; color: var(--tinta-2); max-width: 36ch; }
.contacto-lista { margin-top: 40px; display: grid; gap: 20px; }
.contacto-lista dt { font-size: var(--t-peq); color: var(--tinta-3); }
.contacto-lista dd { margin: 2px 0 0; font-size: 15px; }
.contacto-lista a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--linha-2); }
.contacto-lista a:hover { text-decoration-color: currentColor; }
.contacto-form { grid-column: 7 / 13; }
.contacto-form .botao { margin-top: 28px; }
.contacto-ok { padding: 32px; border: 1px solid var(--linha); }
.contacto-ok h2 { font-size: var(--t-3); font-weight: 400; margin-bottom: 8px; }
.contacto-ok p { color: var(--tinta-2); }
@media (max-width: 899px) { .contacto-info, .contacto-form { grid-column: 1 / -1; } .contacto-form { margin-top: 40px; } }

/* -------------------------------------------------------------- faq */
.faq { padding-top: clamp(32px, 5vw, 72px); align-items: start; }
.faq-lat { grid-column: 1 / 4; position: sticky; top: calc(var(--topo) + 24px); }
.faq-lat h1 { font-size: var(--t-2); }
.faq-lat .pesq { position: relative; margin-top: 28px; }
.faq-lat .pesq input { width: 100%; height: 44px; padding: 0 0 0 28px; border: 0; border-bottom: 1px solid var(--linha-2); border-radius: 0; background: none; outline: none; }
.faq-lat .pesq input:focus { border-bottom-color: var(--tinta); }
.faq-lat .pesq svg { position: absolute; left: 0; top: 12px; width: 18px; height: 18px; color: var(--tinta-3); }
.faq-lat nav { margin-top: 28px; }
.faq-lat nav a { display: block; padding: 8px 0; font-size: 13px; color: var(--tinta-3); transition: color var(--dur-1); }
.faq-lat nav a:hover, .faq-lat nav a.on { color: var(--tinta); }
.faq-lat .ajuda { margin-top: 40px; font-size: 13px; color: var(--tinta-2); }
.faq-corpo { grid-column: 5 / 13; }
.faq-grupo + .faq-grupo { margin-top: 56px; }
.faq-grupo h2 { font-size: var(--t-3); font-weight: 400; margin-bottom: 8px; }
.faq-corpo .vazio { padding-top: 0; }
@media (max-width: 899px) {
  .faq-lat { grid-column: 1 / -1; position: static; }
  .faq-lat nav { display: flex; gap: 20px; overflow-x: auto; scrollbar-width: none; margin-top: 20px; }
  .faq-lat nav a { white-space: nowrap; }
  .faq-lat .ajuda { display: none; }
  .faq-corpo { grid-column: 1 / -1; margin-top: 40px; }
}

/* ------------------------------------------------------------ legal */
.legal { padding-top: clamp(32px, 5vw, 72px); align-items: start; }
.legal-lat { grid-column: 1 / 4; position: sticky; top: calc(var(--topo) + 24px); }
.legal-lat a { display: block; padding: 8px 0; font-size: 13px; color: var(--tinta-3); }
.legal-lat a:hover, .legal-lat a.on { color: var(--tinta); }
.legal-corpo { grid-column: 5 / 12; }
.legal-corpo h1 { font-size: var(--t-2); margin-bottom: 40px; }
.legal-corpo section + section { margin-top: 64px; }
.legal-corpo h2 { font-size: var(--t-3); font-weight: 400; margin-bottom: 16px; }
.legal-corpo h3 { font-size: 14px; font-weight: 500; margin: 24px 0 8px; }
.legal-corpo p, .legal-corpo li { color: var(--tinta-2); max-width: 66ch; }
.legal-corpo p + p { margin-top: 1em; }
.legal-corpo ul { list-style: disc; padding-left: 20px; }
.legal-corpo li { margin: 6px 0; }
.legal-corpo .peq { margin-top: 40px; color: var(--tinta-3); }
@media (max-width: 899px) {
  .legal-lat { grid-column: 1 / -1; position: static; display: flex; gap: 20px; overflow-x: auto; scrollbar-width: none; }
  .legal-lat a { white-space: nowrap; }
  .legal-corpo { grid-column: 1 / -1; margin-top: 32px; }
}

/* ------------------------------------------------------------- 404 */
.nao-encontrada { padding-top: clamp(64px, 12vw, 160px); }
.nao-encontrada h1 { grid-column: 1 / 9; }
.nao-encontrada p { grid-column: 1 / 7; margin-top: 24px; color: var(--tinta-2); }
.nao-encontrada .acoes { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; margin-top: 40px; }
@media (max-width: 899px) { .nao-encontrada h1, .nao-encontrada p { grid-column: 1 / -1; } }

.contacto-redes a + a::before { content: " · "; color: var(--tinta-3); }

/* pagamento embebido (Stripe Elements) */
.pag-preparar .suave { margin-bottom: 4px; }
.pag-express { min-height: 48px; margin-top: 4px; }
.pag-ou { display: flex; align-items: center; gap: 16px; margin: 20px 0 16px; font-size: var(--t-peq); color: var(--tinta-3); }
.pag-ou::before, .pag-ou::after { content: ""; flex: 1; height: 1px; background: var(--linha); }
.pag-cartao { min-height: 120px; }
.pag-embebido .passo-acoes { margin-top: 20px; }