/* ==========================================================================
   noma · flor e arte — sistema visual
   Cores e tipografia derivadas do manual de identidade (THRIA Studio Criativo).
   ========================================================================== */

:root {
  /* --- paleta da marca (hex oficiais do manual) --- */
  --casca:      #f8f1e8;  /* off-white, base */
  --areia:      #e2d8c7;  /* superfície secundária */
  --rose:       #ba9681;
  --terra:      #825d43;
  --cacau:      #47342a;  /* texto */
  --salvia:     #8c927e;
  --pedra:      #67756e;  /* verde da marca: traços, marca-d'água */
  --mostarda:   #a1843a;

  /* verde de superfície: #67756e escurecido o suficiente para o texto
     em --casca passar em AA (5.05:1). Mesma família, uso só em fundos. */
  --pedra-fundo: #5c6a63;

  /* --- derivadas --- */
  --linha:      color-mix(in srgb, var(--salvia) 45%, transparent);
  --tinta-2:    color-mix(in srgb, var(--cacau) 72%, var(--casca));
  --tinta-3:    color-mix(in srgb, var(--cacau) 52%, var(--casca));

  /* --- tipografia ---
     O manual especifica Walkway Black/Bold. Não há webfont livre;
     Poppins é o substituto geométrico mais próximo. Se a THRIA fornecer
     o arquivo licenciado da Walkway, troque só esta variável. */
  --fonte-titulo: "Poppins", "Century Gothic", "Futura", system-ui, sans-serif;
  --fonte-texto:  "Newsreader", Georgia, "Times New Roman", serif;

  /* --- métrica --- */
  --margem: clamp(1.25rem, 5vw, 5.5rem);
  --largura: 82rem;
  --raio: 2px;
  --transicao: 220ms cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}
body {
  margin: 0;
  background: var(--casca);
  color: var(--cacau);
  font-family: var(--fonte-texto);
  font-size: 1.0625rem;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

/* ---------- tipografia ---------- */
h1, h2, h3, h4, .ui {
  font-family: var(--fonte-titulo);
  font-weight: 300;
  letter-spacing: -0.005em;
  margin: 0;
}
h1 {
  font-weight: 200;
  font-size: clamp(2.6rem, 6.4vw, 4.9rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
}
h3 { font-size: 1.2rem; line-height: 1.3; font-weight: 400; }
p { margin: 0 0 1.15em; max-width: 64ch; }
.prosa { font-size: 1.09rem; line-height: 1.78; }
.prosa em { font-style: italic; color: var(--terra); }

.ui { font-weight: 400; letter-spacing: 0.03em; }
.miudo {
  font-family: var(--fonte-titulo);
  font-size: 0.8rem;
  letter-spacing: 0.09em;
  font-weight: 400;
  color: var(--tinta-3);
}

/* ---------- acessibilidade ---------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--mostarda);
  outline-offset: 3px;
  border-radius: var(--raio);
}
.oculto-visual {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.pular {
  position: absolute; left: 0; top: -4rem; z-index: 100;
  background: var(--cacau); color: var(--casca);
  padding: .7rem 1.1rem; font-family: var(--fonte-titulo); font-size: .9rem;
}
.pular:focus { top: 0; }

/* ---------- estrutura ---------- */
.faixa { padding-inline: var(--margem); }
.limite { max-width: var(--largura); margin-inline: auto; }
section { padding-block: clamp(3.5rem, 8vw, 7rem); }

.cabeca-secao {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap; margin-bottom: clamp(1.75rem, 4vw, 3rem);
}
.cabeca-secao p { max-width: 34ch; margin: 0; color: var(--tinta-2); }

/* ---------- marca ---------- */
.marca { display: inline-flex; align-items: center; gap: .8rem; text-decoration: none; }
.marca-wordmark {
  display: block;
  width: var(--w, 108px);
  aspect-ratio: 1074 / 334;
  background: var(--cor, var(--pedra));
  -webkit-mask: url("../assets/noma-wordmark.svg") no-repeat center / contain;
          mask: url("../assets/noma-wordmark.svg") no-repeat center / contain;
}
.flor {
  display: block;
  aspect-ratio: 443 / 1047;
  background: var(--cor, var(--pedra));
  -webkit-mask: url("../assets/noma-flor.svg") no-repeat center / contain;
          mask: url("../assets/noma-flor.svg") no-repeat center / contain;
}
.estampa {
  display: block;
  background-color: var(--cor, var(--casca));
  -webkit-mask: url("../assets/noma-estampa.png") repeat center / 340px;
          mask: url("../assets/noma-estampa.png") repeat center / 340px;
  opacity: .34;
}

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-family: var(--fonte-titulo); font-size: .95rem; font-weight: 400;
  letter-spacing: .02em; line-height: 1;
  padding: .95rem 1.6rem; border: 1px solid var(--cacau); border-radius: var(--raio);
  background: var(--cacau); color: var(--casca);
  text-decoration: none; cursor: pointer;
  transition: background var(--transicao), color var(--transicao), border-color var(--transicao);
}
.btn:hover { background: var(--terra); border-color: var(--terra); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn-vazado { background: transparent; color: var(--cacau); border-color: var(--linha); }
.btn-vazado:hover { background: transparent; border-color: var(--cacau); color: var(--cacau); }
.btn-claro { background: var(--casca); color: var(--cacau); border-color: var(--casca); }
.btn-claro:hover { background: var(--areia); border-color: var(--areia); color: var(--cacau); }
.btn-pequeno { padding: .6rem 1rem; font-size: .85rem; }

.link-sublinhado {
  font-family: var(--fonte-titulo); font-size: .95rem; text-decoration: none;
  border-bottom: 1px solid var(--linha); padding-bottom: .15rem;
  transition: border-color var(--transicao);
}
.link-sublinhado:hover { border-color: var(--mostarda); }

/* ==========================================================================
   cabeçalho
   ========================================================================== */
.topo {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--casca) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linha);
}
.topo-interno {
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
  min-height: 74px; max-width: var(--largura); margin-inline: auto;
}
.nav { display: flex; gap: clamp(1rem, 2.2vw, 2rem); margin-left: auto; }
.nav a {
  font-family: var(--fonte-titulo); font-size: .95rem; font-weight: 300;
  letter-spacing: .02em; text-decoration: none; padding: .35rem 0;
  border-bottom: 1px solid transparent; transition: border-color var(--transicao);
}
.nav a:hover, .nav a[aria-current="page"] { border-color: var(--pedra); }
.topo-acoes { display: flex; align-items: center; gap: .75rem; margin-left: auto; }
.nav + .topo-acoes { margin-left: 0; }
.pilula {
  display: none; align-items: center; gap: .45rem;
  font-family: var(--fonte-titulo); font-size: .8rem; letter-spacing: .04em;
  color: var(--tinta-2); border: 1px solid var(--linha); border-radius: 100px;
  padding: .4rem .85rem; text-decoration: none;
}
.pilula::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mostarda);
}
.btn-carrinho {
  position: relative; background: none; border: 1px solid var(--linha);
  border-radius: 100px; padding: .5rem 1rem; cursor: pointer;
  font-family: var(--fonte-titulo); font-size: .85rem; letter-spacing: .03em;
  transition: border-color var(--transicao);
}
.btn-carrinho:hover { border-color: var(--cacau); }
.btn-carrinho .contagem {
  display: inline-block; min-width: 1.35em; margin-left: .35rem;
  background: var(--cacau); color: var(--casca); border-radius: 100px;
  font-size: .75rem; text-align: center; padding: .05em .35em;
}
.btn-menu { display: none; background: none; border: 0; cursor: pointer; padding: .5rem; }

@media (min-width: 900px) { .pilula { display: inline-flex; } }
@media (max-width: 899px) {
  .nav {
    position: fixed; inset: 74px 0 auto; flex-direction: column; gap: 0;
    background: var(--casca); border-bottom: 1px solid var(--linha);
    padding: .5rem var(--margem) 1.5rem; margin: 0;
    transform: translateY(-140%); transition: transform var(--transicao);
  }
  .nav[data-aberto="true"] { transform: translateY(0); }
  .nav a { padding: .85rem 0; border-bottom: 1px solid var(--linha); font-size: 1.15rem; }
  .btn-menu { display: block; margin-left: auto; order: -1; }
  .topo-acoes { margin-left: 0; }
}

/* ==========================================================================
   hero
   ========================================================================== */
.hero { position: relative; overflow: hidden; padding-block: clamp(3rem, 9vw, 6.5rem) clamp(3.5rem, 9vw, 7rem); }
.hero-grade {
  max-width: var(--largura); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; align-items: center;
}
.hero h1 { max-width: 13ch; }
.hero-lead { font-size: 1.15rem; max-width: 38ch; color: var(--tinta-2); margin-top: 1.6rem; }
.hero-acoes { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.2rem; }
.hero-nota {
  margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid var(--linha);
  display: flex; flex-wrap: wrap; gap: 1.6rem 2.6rem;
}
.hero-nota div { max-width: 22ch; }
.hero-nota strong {
  display: block; font-family: var(--fonte-titulo); font-weight: 400; font-size: .95rem;
}
.hero-nota span { font-size: .92rem; color: var(--tinta-2); line-height: 1.5; display: block; }

.hero-arte { position: relative; justify-self: center; width: min(240px, 56vw); }
.hero-arte .flor {
  width: 100%;
  --cor: var(--pedra);
  clip-path: inset(0 0 0 0);
}
@media (prefers-reduced-motion: no-preference) {
  .hero-arte .flor { animation: desenhar 1900ms cubic-bezier(.33,.9,.4,1) both 180ms; }
}
@keyframes desenhar {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@media (min-width: 860px) {
  .hero-grade { grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 6vw, 6rem); }
  .hero-arte { width: min(400px, 34vw); justify-self: end; }
}

/* ==========================================================================
   categorias
   ========================================================================== */
.grade-categorias {
  display: grid; gap: 1px; background: var(--linha);
  border: 1px solid var(--linha);
  grid-template-columns: 1fr;
}
@media (min-width: 480px) { .grade-categorias { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .grade-categorias { grid-template-columns: repeat(3, 1fr); } }
.cartao-categoria {
  position: relative; overflow: hidden; text-decoration: none;
  background: var(--fundo, var(--areia)); color: var(--frente, var(--cacau));
  min-height: 250px; padding: 1.6rem;
  display: flex; flex-direction: column; justify-content: flex-end;
  transition: filter var(--transicao);
}
.cartao-categoria:hover { filter: brightness(.965); }
.cartao-categoria .flor {
  position: absolute; top: -8%; right: -14%; width: 46%;
  --cor: var(--frente, var(--cacau)); opacity: .3;
  transition: transform var(--transicao);
}
.cartao-categoria:hover .flor { transform: translateY(6px) rotate(-4deg); }
.cartao-categoria h3 { font-size: 1.5rem; font-weight: 300; letter-spacing: -0.01em; }
.cartao-categoria p {
  margin: .4rem 0 0; font-size: .95rem; line-height: 1.5;
  opacity: .82; max-width: 24ch;
}

/* ==========================================================================
   produtos
   ========================================================================== */
.trilho {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr);
  gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 1rem; scrollbar-width: thin;
}
.trilho > * { scroll-snap-align: start; }
@media (min-width: 1000px) {
  .trilho { grid-auto-columns: minmax(250px, 1fr); }
}

.grade-produtos {
  display: grid; gap: clamp(1.5rem, 3vw, 2.5rem) 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.produto { display: flex; flex-direction: column; }
.produto-figura {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  background: var(--fundo, var(--areia)); margin-bottom: .9rem;
}
.produto-figura img { width: 100%; height: 100%; object-fit: cover; }
.produto-figura .estampa { position: absolute; inset: 0; }
.produto-figura .flor {
  position: absolute; left: 50%; top: 50%; width: 42%;
  transform: translate(-50%, -50%); --cor: var(--frente, var(--pedra)); opacity: .55;
}
.selo {
  position: absolute; top: .75rem; left: .75rem; z-index: 2;
  font-family: var(--fonte-titulo); font-size: .72rem; letter-spacing: .06em;
  background: var(--casca); color: var(--cacau); padding: .3rem .6rem;
}
.produto h3 { font-size: 1.05rem; font-weight: 400; }
.produto h3 a { text-decoration: none; border-bottom: 1px solid transparent; }
.produto h3 a:hover { border-color: var(--pedra); }
.produto-desc { font-size: .93rem; color: var(--tinta-3); margin: .25rem 0 .6rem; line-height: 1.5; }
.produto-rodape { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.preco { font-family: var(--fonte-titulo); font-size: 1.02rem; font-weight: 400; letter-spacing: 0; }
.preco s { color: var(--tinta-3); font-size: .85em; margin-right: .4rem; }
.esgotado { font-family: var(--fonte-titulo); font-size: .82rem; color: var(--terra); }

/* ==========================================================================
   catálogo: filtros
   ========================================================================== */
.catalogo { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 940px) { .catalogo { grid-template-columns: 232px minmax(0, 1fr); } }

.filtros { position: sticky; top: 96px; }
.filtro-grupo { border-top: 1px solid var(--linha); padding: 1.1rem 0; }
.filtro-grupo:first-child { border-top: 0; padding-top: 0; }
.filtro-grupo h3 { font-size: .95rem; font-weight: 400; margin-bottom: .7rem; }
.filtro-opcao {
  display: flex; align-items: center; gap: .6rem; padding: .28rem 0;
  font-family: var(--fonte-titulo); font-size: .93rem; font-weight: 300; cursor: pointer;
}
.filtro-opcao input { accent-color: var(--pedra); width: 1rem; height: 1rem; cursor: pointer; }
.filtro-opcao .n { margin-left: auto; font-size: .8rem; color: var(--tinta-3); }

.barra-catalogo {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; padding-bottom: 1.25rem; margin-bottom: 1.75rem;
  border-bottom: 1px solid var(--linha);
}
.campo-select {
  font-family: var(--fonte-titulo); font-size: .9rem; padding: .5rem .7rem;
  background: transparent; border: 1px solid var(--linha); border-radius: var(--raio);
}
.vazio { padding: 4rem 0; text-align: center; }
.vazio h3 { font-size: 1.3rem; margin-bottom: .5rem; }

/* ==========================================================================
   página de produto
   ========================================================================== */
.produto-pagina { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (min-width: 900px) { .produto-pagina { grid-template-columns: 1.05fr .95fr; } }
.produto-pagina .produto-figura { aspect-ratio: 4 / 5; margin: 0; }
.migalhas { font-family: var(--fonte-titulo); font-size: .85rem; color: var(--tinta-3); margin-bottom: 1.5rem; }
.migalhas a { text-decoration: none; }
.migalhas a:hover { color: var(--cacau); }
.produto-pagina h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 200; }
.preco-grande { font-family: var(--fonte-titulo); font-size: 1.6rem; font-weight: 300; margin: 1rem 0 1.5rem; }
.campo { display: block; margin-bottom: 1.25rem; }
.campo > span {
  display: block; font-family: var(--fonte-titulo); font-size: .88rem;
  margin-bottom: .4rem; color: var(--tinta-2);
}
.campo input, .campo select, .campo textarea {
  width: 100%; padding: .8rem .9rem; background: var(--casca);
  border: 1px solid var(--linha); border-radius: var(--raio);
  font-family: var(--fonte-titulo); font-size: .95rem; font-weight: 300;
}
.campo textarea { font-family: var(--fonte-texto); resize: vertical; min-height: 5.5rem; }
.campo .contador { font-size: .8rem; color: var(--tinta-3); text-align: right; display: block; margin-top: .25rem; }
.linha-campos { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
.detalhes-produto { border-top: 1px solid var(--linha); margin-top: 2rem; }
.detalhes-produto details { border-bottom: 1px solid var(--linha); }
.detalhes-produto summary {
  font-family: var(--fonte-titulo); font-size: .98rem; padding: 1rem 0; cursor: pointer;
  list-style: none; display: flex; justify-content: space-between; align-items: center;
}
.detalhes-produto summary::-webkit-details-marker { display: none; }
.detalhes-produto summary::after { content: "+"; font-size: 1.2rem; color: var(--tinta-3); }
.detalhes-produto details[open] summary::after { content: "–"; }
.detalhes-produto .corpo { padding-bottom: 1.2rem; font-size: .97rem; }
.detalhes-produto .corpo ul { margin: 0; padding-left: 1.1rem; }
.detalhes-produto .corpo li { margin-bottom: .35rem; }

/* ==========================================================================
   entrega
   ========================================================================== */
.bloco-entrega {
  background: var(--areia); border-radius: var(--raio);
  padding: clamp(1.75rem, 4vw, 3rem);
  display: grid; gap: clamp(1.75rem, 4vw, 3.5rem);
}
@media (min-width: 860px) { .bloco-entrega { grid-template-columns: .9fr 1.1fr; align-items: start; } }
.form-cep { display: flex; gap: .6rem; flex-wrap: wrap; }
.form-cep select { flex: 1 1 12rem; }
.resposta-entrega {
  margin-top: 1.25rem; padding: 1rem 1.15rem; background: var(--casca);
  border-left: 2px solid var(--mostarda); font-size: .95rem;
}
.resposta-entrega strong { font-family: var(--fonte-titulo); font-weight: 400; }
.resposta-entrega[hidden] { display: none; }
.janelas { display: grid; gap: .5rem; margin-top: 1rem; font-size: .93rem; }
.janelas div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px dotted var(--linha); padding-bottom: .4rem; }
.janelas span:last-child { font-family: var(--fonte-titulo); font-size: .88rem; color: var(--tinta-2); }

/* ==========================================================================
   faixa editorial
   ========================================================================== */
.editorial {
  position: relative; overflow: hidden;
  background: var(--pedra-fundo); color: var(--casca);
}
.editorial .estampa { position: absolute; inset: 0; --cor: var(--casca); opacity: .16; }
.editorial > .limite { position: relative; }
.editorial h2 { max-width: 16ch; }
.editorial .prosa { color: color-mix(in srgb, var(--casca) 88%, var(--pedra-fundo)); }
.tres { display: grid; gap: 2rem; margin-top: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 780px) { .tres { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } }
.tres h3 { font-size: 1.15rem; font-weight: 400; margin-bottom: .5rem; }
.tres p { font-size: .97rem; margin: 0; color: color-mix(in srgb, var(--casca) 82%, var(--pedra-fundo)); }

/* ==========================================================================
   experiências
   ========================================================================== */
.grade-exp { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
.exp {
  border: 1px solid var(--linha); padding: 1.6rem;
  display: flex; flex-direction: column; gap: .6rem;
}
.exp h3 { font-size: 1.25rem; font-weight: 300; }
.exp p { font-size: .96rem; margin: 0; color: var(--tinta-2); }
.exp .link-sublinhado { margin-top: auto; align-self: flex-start; padding-top: .8rem; }

/* ==========================================================================
   rodapé
   ========================================================================== */
.rodape { background: var(--cacau); color: var(--casca); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.rodape a { text-decoration: none; }
.rodape-grade { display: grid; gap: 2.5rem; }
@media (min-width: 760px) { .rodape-grade { grid-template-columns: 1.3fr 1fr 1fr 1.1fr; gap: 2rem; } }
.rodape h4 { font-size: .95rem; font-weight: 400; margin-bottom: .9rem; }
.rodape ul { list-style: none; margin: 0; padding: 0; }
.rodape li { margin-bottom: .5rem; }
.rodape li a { font-family: var(--fonte-titulo); font-size: .93rem; font-weight: 300; opacity: .82; }
.rodape li a:hover { opacity: 1; }
.rodape address {
  font-style: normal; font-size: .95rem; line-height: 1.7;
  color: color-mix(in srgb, var(--casca) 78%, var(--cacau));
}
.rodape-fim {
  margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid color-mix(in srgb, var(--casca) 22%, transparent);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-family: var(--fonte-titulo); font-size: .8rem;
  color: color-mix(in srgb, var(--casca) 62%, var(--cacau));
}

/* ==========================================================================
   carrinho (gaveta)
   ========================================================================== */
.veu {
  position: fixed; inset: 0; z-index: 50; background: rgba(71, 52, 42, .38);
  opacity: 0; pointer-events: none; transition: opacity var(--transicao);
}
.veu[data-aberto="true"] { opacity: 1; pointer-events: auto; }
.gaveta {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 51;
  width: min(420px, 100%); background: var(--casca);
  display: flex; flex-direction: column;
  transform: translateX(101%); transition: transform var(--transicao);
  box-shadow: -18px 0 40px rgba(71, 52, 42, .1);
}
.gaveta[data-aberto="true"] { transform: translateX(0); }
.gaveta-topo {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--linha);
}
.gaveta-topo h2 { font-size: 1.2rem; font-weight: 400; }
.fechar { background: none; border: 0; cursor: pointer; font-size: 1.5rem; line-height: 1; padding: .25rem .5rem; }
.gaveta-corpo { flex: 1; overflow-y: auto; padding: 1.25rem 1.5rem; }
.gaveta-rodape { border-top: 1px solid var(--linha); padding: 1.25rem 1.5rem; }
.item-carrinho { display: grid; grid-template-columns: 62px 1fr; gap: .9rem; padding: .9rem 0; border-bottom: 1px solid var(--linha); }
.item-carrinho .produto-figura { aspect-ratio: 1; margin: 0; }
.item-carrinho h3 { font-size: .97rem; font-weight: 400; }
.item-carrinho .meta { font-size: .85rem; color: var(--tinta-3); margin: .15rem 0 .4rem; }
.qtd { display: inline-flex; align-items: center; border: 1px solid var(--linha); border-radius: var(--raio); }
.qtd button { background: none; border: 0; cursor: pointer; width: 1.9rem; height: 1.8rem; font-size: 1rem; line-height: 1; }
.qtd span { min-width: 1.6rem; text-align: center; font-family: var(--fonte-titulo); font-size: .9rem; }
.remover { background: none; border: 0; cursor: pointer; font-family: var(--fonte-titulo); font-size: .82rem; color: var(--tinta-3); text-decoration: underline; padding: 0; margin-left: .75rem; }
.remover:hover { color: var(--terra); }
.totais { display: flex; justify-content: space-between; font-family: var(--fonte-titulo); margin-bottom: .5rem; font-size: .95rem; }
.totais.total { font-size: 1.15rem; color: var(--cacau); margin-bottom: 1rem; }

/* aviso de sistema (ex.: sincronização com o ERP) */
.aviso {
  font-family: var(--fonte-titulo); font-size: .82rem; line-height: 1.5;
  color: var(--tinta-3); margin-top: .9rem;
}

/* figura grande (página de produto): estampa mais discreta */
.produto-pagina .produto-figura .estampa { opacity: .24; }
.produto-pagina .produto-figura .flor { width: 38%; }

/* miniatura do carrinho é pequena demais para carregar selo */
.item-carrinho .selo { display: none; }

/* ==========================================================================
   v2 — componentes do redesenho (set/2026)
   ========================================================================== */

/* ---------- faixa de diferenciais, logo abaixo do hero ---------- */
.faixa-diferenciais {
  border-block: 1px solid var(--linha);
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
}
.faixa-diferenciais ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.25rem 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.faixa-diferenciais strong {
  display: block; font-family: var(--fonte-titulo); font-weight: 400;
  font-size: 1rem; margin-bottom: .15rem;
}
.faixa-diferenciais span { font-size: .93rem; color: var(--tinta-2); }

/* ---------- seta dos cartões de intenção ---------- */
.cartao-categoria .seta {
  margin-top: .9rem; font-family: var(--fonte-titulo); font-size: .88rem;
  letter-spacing: .02em; border-bottom: 1px solid currentColor;
  align-self: flex-start; padding-bottom: .15rem; opacity: .9;
}

/* ---------- fichas (ocasiões em destaque, subcategorias) ---------- */
.fichas { display: flex; flex-wrap: wrap; gap: .75rem; }
.ficha {
  display: inline-flex; align-items: center; gap: .55rem;
  border: 1px solid var(--linha); border-radius: 100px;
  padding: .6rem 1.15rem .6rem .9rem; text-decoration: none;
  transition: border-color var(--transicao), background var(--transicao);
}
.ficha:hover { border-color: var(--pedra); background: var(--areia); }
.ficha .flor { width: 14px; --cor: var(--salvia); flex: none; }
.ficha-nome { font-family: var(--fonte-titulo); font-size: .95rem; font-weight: 300; }
.fichas-claras .ficha {
  border-color: color-mix(in srgb, var(--casca) 38%, transparent); color: var(--casca);
}
.fichas-claras .ficha:hover {
  background: color-mix(in srgb, var(--casca) 12%, transparent);
  border-color: var(--casca);
}
.fichas-claras .ficha .flor { --cor: var(--casca); }

/* ---------- grade de ocasiões (página Presentear) ---------- */
.grade-ocasioes {
  display: grid; gap: 1px; background: var(--linha); border: 1px solid var(--linha);
  grid-template-columns: 1fr;
}
@media (min-width: 560px) { .grade-ocasioes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .grade-ocasioes { grid-template-columns: repeat(3, 1fr); } }
.cartao-ocasiao {
  position: relative; overflow: hidden; background: var(--casca);
  padding: 1.75rem 1.6rem; text-decoration: none;
  display: flex; flex-direction: column; min-height: 200px;
  transition: background var(--transicao);
}
.cartao-ocasiao:hover { background: var(--areia); }
.cartao-ocasiao .flor {
  position: absolute; top: -10%; right: -12%; width: 40%;
  --cor: var(--salvia); opacity: .22;
}
.cartao-ocasiao h3 { font-size: 1.3rem; font-weight: 300; }
.cartao-ocasiao p {
  margin: .5rem 0 0; font-size: .93rem; line-height: 1.55;
  color: var(--tinta-2); max-width: 30ch;
}
.cartao-ocasiao .seta {
  margin-top: auto; padding-top: 1rem;
  font-family: var(--fonte-titulo); font-size: .83rem; color: var(--tinta-3);
}

/* ---------- serviços ---------- */
.grade-servicos { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.servico {
  border: 1px solid var(--linha); padding: 1.6rem;
  display: flex; flex-direction: column; gap: .55rem;
}
.servico h3 { font-size: 1.25rem; font-weight: 300; }
.servico h3 a { text-decoration: none; border-bottom: 1px solid transparent; }
.servico h3 a:hover { border-color: var(--pedra); }
.servico p { font-size: .96rem; margin: 0; color: var(--tinta-2); }
.servico .servico-titulo { font-family: var(--fonte-titulo); font-size: .95rem; color: var(--cacau); }
.servico .link-sublinhado { margin-top: auto; align-self: flex-start; padding-top: .8rem; }
.servico-grande { padding: 2rem 1.8rem; }

/* ---------- rótulo de curadoria na vitrine ---------- */
.curadoria {
  display: block; font-family: var(--fonte-titulo); font-size: .73rem;
  letter-spacing: .08em; color: var(--terra); margin-bottom: .3rem;
}

/* ---------- chamada com arte (assinatura na home) ---------- */
.chamada-dupla {
  display: grid; gap: 2rem; align-items: center;
  border: 1px solid var(--linha); padding: clamp(1.75rem, 4vw, 3rem);
}
@media (min-width: 780px) { .chamada-dupla { grid-template-columns: 1.4fr .6fr; } }
.chamada-arte { justify-self: center; width: min(150px, 40vw); }
.chamada-arte .flor { width: 100%; --cor: var(--salvia); }

/* ---------- manifesto no fim da home ---------- */
.manifesto { border-top: 1px solid var(--linha); }
.manifesto h2 { max-width: 22ch; font-weight: 200; }

/* ==========================================================================
   assinatura
   ========================================================================== */
.montador { display: grid; gap: 1.5rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
@media (min-width: 780px) { .montador { grid-template-columns: 1fr 1fr; gap: 2.5rem; } }
.seletor { border: 0; margin: 0; padding: 0; }
.seletor legend {
  font-family: var(--fonte-titulo); font-size: .9rem; color: var(--tinta-2);
  padding: 0; margin-bottom: .75rem;
}
.seletor > div { display: grid; gap: .6rem; }
.opcao-radio {
  display: grid; grid-template-columns: auto 1fr; gap: .2rem .7rem;
  align-items: start; cursor: pointer;
  border: 1px solid var(--linha); border-radius: var(--raio);
  padding: .85rem 1rem; transition: border-color var(--transicao), background var(--transicao);
}
.opcao-radio:hover { border-color: var(--salvia); }
.opcao-radio.marcada { border-color: var(--pedra); background: var(--areia); }
.opcao-radio input { grid-row: span 2; accent-color: var(--pedra); margin-top: .25rem; }
.opcao-nome { font-family: var(--fonte-titulo); font-size: 1rem; }
.opcao-texto { font-size: .9rem; color: var(--tinta-3); line-height: 1.45; }

.grade-planos { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.plano {
  position: relative; border: 1px solid var(--linha); padding: 1.75rem 1.5rem;
  display: flex; flex-direction: column; gap: .5rem;
  transition: border-color var(--transicao);
}
.plano.escolhido { border-color: var(--pedra); background: var(--areia); }
.plano.recomendado { border-color: var(--mostarda); }
.selo-plano {
  position: absolute; top: -.7rem; left: 1.4rem;
  font-family: var(--fonte-titulo); font-size: .72rem; letter-spacing: .06em;
  background: var(--mostarda); color: var(--cacau); padding: .2rem .6rem;
}
.plano h3 { font-size: 1.35rem; font-weight: 300; }
.plano-texto { font-size: .93rem; color: var(--tinta-2); margin: 0; }
.plano-preco {
  font-family: var(--fonte-titulo); font-size: 1.9rem; font-weight: 300;
  margin: .5rem 0 0; line-height: 1;
}
.plano-preco span { font-size: .95rem; color: var(--tinta-3); }
.plano-detalhe { font-family: var(--fonte-titulo); font-size: .82rem; color: var(--tinta-3); margin: .2rem 0 .5rem; }
.plano ul { list-style: none; margin: 0 0 1.25rem; padding: 0; font-size: .92rem; }
.plano li { padding-left: 1rem; position: relative; margin-bottom: .3rem; }
.plano li::before { content: "—"; position: absolute; left: 0; color: var(--salvia); }
.plano .btn { margin-top: auto; width: 100%; }

.resumo-assinatura {
  margin-top: clamp(1.75rem, 4vw, 2.5rem); padding: 1.5rem;
  background: var(--pedra-fundo); color: var(--casca);
  display: flex; flex-wrap: wrap; gap: 1.25rem;
  align-items: center; justify-content: space-between;
}
.resumo-assinatura strong {
  display: block; font-family: var(--fonte-titulo); font-weight: 400; font-size: 1.05rem;
}
.resumo-assinatura span {
  font-size: .92rem; color: color-mix(in srgb, var(--casca) 78%, var(--pedra-fundo));
}
.resumo-assinatura .btn { background: var(--casca); color: var(--cacau); border-color: var(--casca); }
.resumo-assinatura .btn:hover { background: var(--areia); border-color: var(--areia); }

/* quatro cartões de intenção pedem 2x2, não a grade de 3 dos grupos */
.grade-intencao { grid-template-columns: 1fr; }
@media (min-width: 620px) { .grade-intencao { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .grade-intencao { grid-template-columns: repeat(2, 1fr); } }
.grade-intencao .cartao-categoria { min-height: 220px; }