/* =====================================================================
   CONFECTIL — Chita Nordestina
   Pano cru na mesa de estamparia: carimbo de flor, costura pontilhada,
   varal de lençóis e o índigo do tonel. Base sempre em cru (#f6f0e2).
   ===================================================================== */

:root {
  /* Paleta da estamparia */
  --tecido:        #f6f0e2;  /* cru, base de tudo */
  --tecido-clara:  #fbf7ee;  /* pano passado */
  --tecido-meia:   #efe6d1;  /* cru na sombra */
  --tecido-escura: #e6dabf;  /* beirada do pano */
  --geranio:       #c04a35;  /* vermelho gerânio */
  --indigo:        #34506e;  /* azul do tonel */
  --calendula:     #d99a2b;  /* amarelo calêndula */
  --folha:         #5d7a4e;  /* verde folha */
  --carimbo:       #5a4632;  /* marrom da tinta de carimbo */
  --tinta:         #3b2e20;  /* texto */
  --linha:         rgba(90, 70, 50, 0.38);   /* costura */
  --linha-forte:   rgba(90, 70, 50, 0.6);

  --fonte-display: "Yrsa", Georgia, "Times New Roman", serif;
  --fonte-texto: "Mukta", system-ui, -apple-system, "Segoe UI", sans-serif;

  --sombra-carimbo: 4px 4px 0 rgba(90, 70, 50, 0.22);
  --sombra-pano: 0 10px 26px rgba(90, 70, 50, 0.12);
  --largura: 1140px;
}

/* ---------- Base ---------- */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--tecido);
  background-image:
    radial-gradient(rgba(90, 70, 50, 0.05) 1px, transparent 1.4px);
  background-size: 26px 26px;
  color: var(--tinta);
  font-family: var(--fonte-texto);
  font-size: 1.0625rem;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--fonte-display);
  font-weight: 700;
  line-height: 1.14;
  color: var(--tinta);
  margin: 0 0 0.6em;
}

h1 { font-size: clamp(2.3rem, 5.2vw, 3.9rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
h3 { font-size: 1.35rem; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--indigo); text-underline-offset: 3px; }
a:hover { color: var(--geranio); }

:focus-visible {
  outline: 2px dashed var(--geranio);
  outline-offset: 3px;
}

::selection { background: var(--calendula); color: var(--tinta); }

.container {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 2rem);
}

/* Elemento escondido (exigido pelo rótulo oculto da newsletter) */
.hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 200;
  background: var(--carimbo);
  color: var(--tecido-clara);
  padding: 0.6rem 1.1rem;
  border-radius: 0 0 6px 6px;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 0; color: var(--tecido-clara); }

/* ---------- Faixas de estampa (estreitas, nunca papel de parede) ---------- */

.banda { height: 12px; }

.banda-tri {
  background-image:
    conic-gradient(from 135deg at 50% 0%, var(--geranio) 90deg, transparent 90deg),
    conic-gradient(from 135deg at 50% 0%, var(--indigo) 90deg, transparent 90deg);
  background-size: 26px 12px, 26px 12px;
  background-position: 0 0, 13px 0;
  background-repeat: repeat-x;
}

.banda-pontos {
  height: 12px;
  background-image:
    radial-gradient(circle, var(--calendula) 0 2px, transparent 2.6px),
    radial-gradient(circle, var(--indigo) 0 2px, transparent 2.6px);
  background-size: 18px 12px, 18px 12px;
  background-position: 0 3px, 9px 9px;
}

.banda-zigue {
  height: 10px;
  background-image:
    linear-gradient(45deg, var(--folha) 25%, transparent 25%),
    linear-gradient(-45deg, var(--folha) 25%, transparent 25%);
  background-size: 18px 10px;
  background-position: 0 0;
  background-repeat: repeat-x;
}

.banda-curta {
  width: 92px;
  height: 10px;
  margin-block: 0.9rem;
  background-image:
    radial-gradient(circle, var(--geranio) 0 2px, transparent 2.6px),
    radial-gradient(circle, var(--indigo) 0 2px, transparent 2.6px);
  background-size: 16px 10px, 16px 10px;
  background-position: 0 2px, 8px 8px;
  background-repeat: repeat-x;
}

/* ---------- Topo / navegação ---------- */

.topo {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(246, 240, 226, 0.95);
  backdrop-filter: blur(7px);
  border-bottom: 1.5px dashed var(--linha);
}

.barra-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding-block: 0.8rem;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--tinta);
}

.marca-carimbo {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  background: var(--geranio);
  color: var(--tecido-clara);
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: 1.5rem;
  border: 2px solid var(--carimbo);
  border-radius: 5px;
  box-shadow: var(--sombra-carimbo);
  transform: rotate(-2deg);
}

.marca-texto { display: grid; line-height: 1.15; }
.marca-texto strong {
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: 0.05em;
}
.marca-texto span {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--indigo);
}

.nav { display: flex; align-items: center; gap: clamp(0.9rem, 2.4vw, 1.8rem); }
.nav a {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.86rem;
  text-decoration: none;
  color: var(--tinta);
  padding-block: 0.3rem;
  border-bottom: 2px dashed transparent;
}
.nav a:hover { color: var(--geranio); }
.nav a[aria-current="page"] {
  color: var(--geranio);
  border-bottom-color: var(--geranio);
}

.topo-ferramentas { display: flex; align-items: center; gap: 0.9rem; }

.carrinho-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--tecido-clara);
  background: var(--indigo);
  border: 2px solid var(--carimbo);
  border-radius: 999px;
  padding: 0.42rem 0.55rem 0.42rem 1rem;
  box-shadow: 3px 3px 0 rgba(90, 70, 50, 0.2);
  transition: transform 0.15s ease;
}
.carrinho-link:hover { transform: translate(-1px, -1px); color: var(--tecido-clara); }

.carrinho-cont {
  display: grid;
  place-items: center;
  min-width: 1.7rem; height: 1.7rem;
  padding-inline: 0.3rem;
  background: var(--calendula);
  color: var(--tinta);
  font-size: 0.82rem;
  font-weight: 700;
  border-radius: 999px;
  border: 1.5px solid var(--carimbo);
}

.menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 10px;
  background: var(--tecido-clara);
  border: 1.5px solid var(--linha-forte);
  border-radius: 6px;
  cursor: pointer;
}
.menu-btn span {
  display: block;
  height: 2px;
  background: var(--carimbo);
  border-radius: 2px;
}

@media (max-width: 880px) {
  .menu-btn { display: flex; }
  .nav {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--tecido-clara);
    border-bottom: 2px dashed var(--linha-forte);
    padding: 0.6rem 1.4rem 1.1rem;
    box-shadow: var(--sombra-pano);
  }
  .nav.is-open { display: flex; }
  .nav a {
    padding: 0.75rem 0.2rem;
    border-bottom: 1.5px dashed var(--linha);
  }
  .nav a:last-child { border-bottom: 0; }
  .carrinho-link .rotulo-carrinho { display: none; }
}

/* ---------- Botões (carimbo na mesa) ---------- */

.btn {
  display: inline-block;
  font-family: var(--fonte-texto);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  color: var(--tecido-clara);
  background: var(--indigo);
  border: 2px solid var(--carimbo);
  border-radius: 5px;
  padding: 0.72rem 1.5rem;
  cursor: pointer;
  box-shadow: var(--sombra-carimbo);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover {
  color: var(--tecido-clara);
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 rgba(90, 70, 50, 0.24);
}
.btn:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 rgba(90, 70, 50, 0.22); }

.btn--geranio { background: var(--geranio); }
.btn--fantasma { background: transparent; color: var(--carimbo); }
.btn--fantasma:hover { color: var(--tinta); }
.btn--bloco { display: block; width: 100%; }

.link-btn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--geranio);
  text-decoration: underline;
  text-decoration-style: dashed;
  text-underline-offset: 4px;
  cursor: pointer;
}
.link-btn:hover { color: var(--indigo); }

/* ---------- Formulários ---------- */

.form-group { margin-bottom: 1.05rem; }

.form-group label,
.conjunto legend {
  display: block;
  font-weight: 600;
  font-size: 0.92rem;
  margin-bottom: 0.35rem;
}

.field {
  width: 100%;
  padding: 0.68rem 0.85rem;
  font: inherit;
  color: var(--tinta);
  background: var(--tecido-clara);
  border: 1px solid var(--linha);
  border-bottom: 2px solid var(--carimbo);
  border-radius: 5px;
}
.field::placeholder { color: rgba(90, 70, 50, 0.55); }
.field:focus-visible { outline-offset: 1px; }

textarea.field { resize: vertical; min-height: 130px; }

select.field { appearance: auto; }

.hint {
  font-size: 0.84rem;
  color: rgba(59, 46, 32, 0.72);
  margin-top: 0.35rem;
}

.checkbox-line {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem;
  align-items: start;
  font-size: 0.88rem;
  line-height: 1.5;
  margin-block: 0.55rem;
  cursor: pointer;
}
.checkbox-line input[type="checkbox"] {
  width: 1.1rem; height: 1.1rem;
  margin-top: 0.18rem;
  accent-color: var(--geranio);
  flex: none;
}
.checkbox-line.full { grid-template-columns: auto 1fr; width: 100%; }

.form-feedback {
  display: none;
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  background: var(--tecido-clara);
  border: 2px dashed var(--folha);
  border-radius: 6px;
  color: var(--tinta);
}
.form-feedback.show { display: block; }
.form-feedback strong { color: var(--folha); }

.conjunto {
  border: 1.5px solid var(--linha);
  border-radius: 8px;
  background: var(--tecido-clara);
  padding: 1.2rem 1.3rem 1.35rem;
  margin: 0 0 1.5rem;
}
.conjunto legend {
  display: inline-block;
  padding-inline: 0.5rem;
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--indigo);
}
.conjunto legend .num {
  color: var(--geranio);
  font-family: var(--fonte-texto);
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-right: 0.4rem;
}

.duas-colunas {
  display: grid;
  gap: 0 1.1rem;
}
@media (min-width: 640px) {
  .duas-colunas { grid-template-columns: 1fr 1fr; }
}

/* ---------- Seções ---------- */

.secao { padding-block: clamp(2.6rem, 6vw, 4.6rem); }
.secao--alternada {
  background: var(--tecido-meia);
  border-block: 1.5px dashed var(--linha);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--geranio);
  margin: 0 0 0.8rem;
}
.eyebrow .num { color: var(--indigo); }
.eyebrow::after {
  content: "";
  width: 58px;
  border-top: 2px dashed rgba(192, 74, 53, 0.55);
}

.secao-cabecalho { max-width: 640px; margin-bottom: 2.1rem; }
.secao-cabecalho--centro { margin-inline: auto; text-align: center; }
.secao-cabecalho--centro .eyebrow { justify-content: center; }

/* ---------- Herói ---------- */

.hero {
  display: grid;
  gap: 2.8rem;
  padding-block: clamp(2.4rem, 6vw, 4.8rem);
}
@media (min-width: 920px) {
  .hero { grid-template-columns: 1.02fr 0.98fr; align-items: center; }
}

.hero-texto .lede {
  font-size: 1.16rem;
  max-width: 34em;
  color: rgba(59, 46, 32, 0.88);
}

.hero-acoes { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.6rem; }

.hero-notas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  list-style: none;
  margin: 2rem 0 0;
  padding: 1.2rem 0 0;
  border-top: 1.5px dashed var(--linha);
}
.hero-notas li {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
}
.hero-notas li::before {
  content: "";
  width: 9px; height: 9px;
  flex: none;
  align-self: center;
  border-radius: 2px;
  transform: rotate(45deg);
  background: var(--calendula);
  border: 1px solid var(--carimbo);
}
.hero-notas li:nth-child(2)::before { background: var(--geranio); }
.hero-notas li:nth-child(3)::before { background: var(--indigo); }

/* Pano estendido no varal */
.hero-midia {
  position: relative;
  margin-top: 1.6rem;
  background: var(--tecido-clara);
  border: 1.5px solid var(--linha-forte);
  border-radius: 8px;
  padding: 12px;
  box-shadow: var(--sombra-pano);
}
.hero-midia::before {
  /* corda do varal */
  content: "";
  position: absolute;
  top: -11px; left: -3%; right: -3%;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--carimbo) 6%, var(--carimbo) 94%, transparent);
}
.hero-midia img {
  border-radius: 4px;
  width: 100%;
  aspect-ratio: 4 / 4.6;
  object-fit: cover;
}
.hero-midia figcaption {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.7rem;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--carimbo);
}

.prendedor {
  position: absolute;
  top: -24px;
  width: 13px; height: 30px;
  background: var(--carimbo);
  border-radius: 3px 3px 2px 2px;
  box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.18);
}
.prendedor--a { left: 16%; transform: rotate(-4deg); }
.prendedor--b { right: 18%; transform: rotate(5deg); }
.prendedor--c { left: 52%; transform: rotate(2deg); height: 26px; }

.banda-pano { margin-block: 1.1rem 0; }

/* ---------- Grade de produtos (panos costurados) ---------- */

.grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 1.5rem;
}

.peca {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--tecido-clara);
  border: 1.5px solid var(--linha-forte);
  border-radius: 7px;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.peca:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra-pano);
}
.peca-midia { display: block; border-bottom: 1.5px dashed var(--linha); }
.peca-midia img {
  width: 100%;
  aspect-ratio: 4 / 4.7;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.peca:hover .peca-midia img { transform: scale(1.035); }

.peca-corpo {
  display: grid;
  gap: 0.25rem;
  padding: 0.95rem 1.05rem 1.15rem;
}
.peca-cat {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--carimbo);
}
.peca-cat::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--geranio);
  border: 1px solid var(--carimbo);
}
.peca-cat[data-cor="moletons"]::before { background: var(--indigo); }
.peca-cat[data-cor="tricot"]::before { background: var(--calendula); }
.peca-cat[data-cor="cardigans"]::before { background: var(--folha); }

.peca-nome { margin: 0; font-size: 1.22rem; }
.peca-nome a { color: var(--tinta); text-decoration: none; }
.peca-nome a:hover { color: var(--geranio); text-decoration: underline dashed; }

.preco {
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--indigo);
  margin: 0;
}

/* ---------- Filtros do catálogo ---------- */

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 2rem;
}
.filtro-chip {
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--carimbo);
  background: transparent;
  border: 1.5px solid var(--carimbo);
  border-radius: 999px;
  padding: 0.42rem 1.05rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.filtro-chip:hover { background: var(--tecido-meia); }
.filtro-chip[aria-pressed="true"] {
  background: var(--carimbo);
  color: var(--tecido-clara);
  box-shadow: 3px 3px 0 rgba(90, 70, 50, 0.2);
}

.aviso-vazio {
  grid-column: 1 / -1;
  padding: 2.2rem;
  text-align: center;
  background: var(--tecido-clara);
  border: 1.5px dashed var(--linha);
  border-radius: 8px;
}

/* ---------- Faixa de frete ---------- */

.nota-faixa {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.4rem;
  margin-top: 2.2rem;
  padding: 0.9rem 1.4rem;
  background: var(--tecido-clara);
  border: 1.5px dashed var(--linha-forte);
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 600;
  text-align: center;
}
.nota-faixa strong { color: var(--geranio); }

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

.trilha {
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  margin-bottom: 1.6rem;
  color: rgba(59, 46, 32, 0.7);
}
.trilha a { color: var(--carimbo); }

.produto-layout {
  display: grid;
  gap: 2.4rem;
}
@media (min-width: 920px) {
  .produto-layout { grid-template-columns: 1fr 1fr; align-items: start; }
}

.produto-midia {
  position: relative;
  background: var(--tecido-clara);
  border: 1.5px solid var(--linha-forte);
  border-radius: 8px;
  padding: 12px;
  box-shadow: var(--sombra-pano);
}
.produto-midia img {
  width: 100%;
  border-radius: 4px;
  aspect-ratio: 4 / 4.7;
  object-fit: cover;
}

.produto-info .preco { font-size: 2rem; }
.produto-info .lede { font-size: 1.05rem; }

.tamanhos { margin-block: 1.4rem 1.5rem; }
.tamanhos > p {
  font-weight: 600;
  font-size: 0.92rem;
  margin-bottom: 0.5rem;
}
.tamanho-linha { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.tamanho-chip {
  min-width: 3.1rem;
  font: inherit;
  font-weight: 700;
  padding: 0.5rem 0.7rem;
  color: var(--carimbo);
  background: var(--tecido-clara);
  border: 1.5px solid var(--carimbo);
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.tamanho-chip:hover { background: var(--tecido-meia); }
.tamanho-chip.is-on {
  background: var(--geranio);
  color: var(--tecido-clara);
  box-shadow: 3px 3px 0 rgba(90, 70, 50, 0.22);
}

.produto-comprar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
}
.produto-comprar .form-group { margin-bottom: 0; max-width: 7.5rem; }

.ficha-peca {
  margin-top: 1.8rem;
  padding: 1.1rem 1.2rem;
  background: var(--tecido-meia);
  border: 1.5px dashed var(--linha);
  border-radius: 7px;
  font-size: 0.94rem;
}
.ficha-peca dt { font-weight: 700; margin-top: 0.6rem; }
.ficha-peca dt:first-child { margin-top: 0; }
.ficha-peca dd { margin: 0 0 0.2rem; color: rgba(59, 46, 32, 0.85); }

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

.carrinho-grid {
  display: grid;
  gap: 2rem;
}
@media (min-width: 920px) {
  .carrinho-grid { grid-template-columns: 1.5fr 1fr; align-items: start; }
}

.carrinho-linha {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 1rem;
  align-items: center;
  padding-block: 1.1rem;
  border-bottom: 1.5px dashed var(--linha);
}
.carrinho-linha img {
  width: 96px;
  border-radius: 5px;
  border: 1.5px solid var(--linha-forte);
}
.carrinho-linha strong { font-size: 1.02rem; }
.carrinho-linha .meta {
  font-size: 0.85rem;
  color: rgba(59, 46, 32, 0.7);
  margin: 0.15rem 0 0.4rem;
}

.stepper {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 0.3rem;
}
.stepper button {
  width: 1.9rem; height: 1.9rem;
  font: inherit;
  font-weight: 700;
  color: var(--carimbo);
  background: var(--tecido-clara);
  border: 1.5px solid var(--carimbo);
  border-radius: 5px;
  cursor: pointer;
  line-height: 1;
}
.stepper button:hover { background: var(--tecido-meia); }
.stepper span { min-width: 1.4rem; text-align: center; font-weight: 600; }

.carrinho-linha .valor-linha {
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: 1.12rem;
  color: var(--indigo);
  white-space: nowrap;
}

.resumo {
  position: sticky;
  top: 96px;
  background: var(--tecido-clara);
  border: 1.5px solid var(--linha-forte);
  border-radius: 8px;
  padding: 1.3rem 1.4rem 1.5rem;
  box-shadow: var(--sombra-pano);
}
.resumo h2 { font-size: 1.45rem; }
.resumo-linha {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.55rem;
  border-bottom: 1.5px dashed var(--linha);
  font-size: 0.96rem;
}
.resumo-linha.total {
  border-bottom: 0;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--indigo);
}
.resumo .hint { margin-top: 0.7rem; }
.resumo .btn { margin-top: 1rem; }

.aviso-vazio-grande {
  text-align: center;
  padding: clamp(2rem, 6vw, 3.6rem);
  background: var(--tecido-clara);
  border: 1.5px dashed var(--linha-forte);
  border-radius: 10px;
}
.aviso-vazio-grande .btn { margin-top: 1.2rem; }

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

.checkout-grid {
  display: grid;
  gap: 2rem;
}
@media (min-width: 960px) {
  .checkout-grid { grid-template-columns: 1.55fr 1fr; align-items: start; }
}

.pagamento-linha { display: grid; gap: 0.7rem; }
.pagamento-opcao {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.3rem 0.75rem;
  align-items: start;
  padding: 0.9rem 1rem;
  background: var(--tecido);
  border: 1.5px solid var(--linha);
  border-radius: 6px;
  cursor: pointer;
}
.pagamento-opcao input[type="radio"] {
  width: 1.15rem; height: 1.15rem;
  margin-top: 0.25rem;
  accent-color: var(--indigo);
}
.pagamento-opcao strong { display: block; }
.pagamento-opcao span { grid-column: 2; font-size: 0.88rem; color: rgba(59, 46, 32, 0.78); }
.pagamento-opcao:has(input:checked) {
  border-color: var(--indigo);
  border-style: dashed;
  background: var(--tecido-clara);
  box-shadow: 3px 3px 0 rgba(52, 80, 110, 0.18);
}

/* ---------- Contato ---------- */

.contato-grid {
  display: grid;
  gap: 2rem;
}
@media (min-width: 920px) {
  .contato-grid { grid-template-columns: 1.5fr 1fr; align-items: start; }
}

.cartao-info {
  background: var(--tecido-clara);
  border: 1.5px solid var(--linha-forte);
  border-radius: 8px;
  padding: 1.4rem 1.5rem;
  box-shadow: var(--sombra-pano);
}
.cartao-info h2 { font-size: 1.35rem; }
.cartao-info ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.cartao-info li { display: grid; gap: 0.1rem; }
.cartao-info li span:first-child {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--geranio);
}

/* ---------- Categorias / blocos ---------------- */

.tarjas-categoria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.2rem;
}
.tarja-categoria {
  position: relative;
  display: block;
  padding: 1.25rem 1.3rem 1.35rem;
  background: var(--tecido-clara);
  border: 1.5px solid var(--linha-forte);
  border-radius: 7px;
  text-decoration: none;
  color: var(--tinta);
  overflow: hidden;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.tarja-categoria:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra-pano);
  color: var(--tinta);
}
.tarja-categoria::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 8px;
  background-image: radial-gradient(circle, var(--cat, var(--geranio)) 0 2.2px, transparent 2.8px);
  background-size: 14px 8px;
  background-position: center;
  background-repeat: repeat-x;
}
.tarja-categoria h3 { margin: 0.5rem 0 0.15rem; font-size: 1.3rem; }
.tarja-categoria p { margin: 0; font-size: 0.88rem; color: rgba(59, 46, 32, 0.75); }

/* ---------- Chamada final ---------- */

.chamada {
  position: relative;
  text-align: center;
  padding: clamp(2.4rem, 6vw, 4rem) clamp(1.2rem, 4vw, 3rem);
  background: var(--indigo);
  border: 2px solid var(--carimbo);
  border-radius: 10px;
  color: var(--tecido-clara);
  box-shadow: var(--sombra-carimbo);
  overflow: hidden;
}
.chamada h2, .chamada p { color: var(--tecido-clara); }
.chamada .btn { background: var(--calendula); color: var(--tinta); border-color: var(--carimbo); }
.chamada .btn:hover { color: var(--tinta); }
.chamada::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1.5px dashed rgba(246, 240, 226, 0.5);
  border-radius: 6px;
  pointer-events: none;
}

/* ---------- Sobre ---------- */

.historia-grid {
  display: grid;
  gap: 2.2rem;
}
@media (min-width: 920px) {
  .historia-grid { grid-template-columns: 1fr 1fr; align-items: center; }
}

.lista-costura { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: 1rem; }
.lista-costura li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.8rem;
  align-items: start;
}
.lista-costura li::before {
  content: "";
  margin-top: 0.5rem;
  width: 11px; height: 11px;
  border-radius: 3px;
  transform: rotate(45deg);
  background: var(--cat, var(--geranio));
  border: 1.5px solid var(--carimbo);
}
.lista-costura strong { display: block; font-size: 1.02rem; }
.lista-costura span { font-size: 0.93rem; color: rgba(59, 46, 32, 0.82); }

.numeros-costura {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}
.numeros-costura div {
  padding: 1.1rem 1.2rem;
  background: var(--tecido-clara);
  border: 1.5px dashed var(--linha-forte);
  border-radius: 7px;
  text-align: center;
}
.numeros-costura strong {
  display: block;
  font-family: var(--fonte-display);
  font-size: 1.7rem;
  color: var(--indigo);
}
.numeros-costura span { font-size: 0.86rem; letter-spacing: 0.05em; }

/* ---------- Páginas legais ---------- */

.pagina-legal {
  max-width: 780px;
  margin-inline: auto;
  padding-block: clamp(2.4rem, 6vw, 4.2rem);
}
.pagina-legal .data-revisao {
  font-size: 0.88rem;
  color: rgba(59, 46, 32, 0.65);
  letter-spacing: 0.04em;
}
.legal-prosa h2 {
  font-size: 1.45rem;
  margin-top: 2.2rem;
  padding-bottom: 0.4rem;
  border-bottom: 1.5px dashed var(--linha);
}
.legal-prosa h2 .num { color: var(--geranio); margin-right: 0.5rem; }
.legal-prosa ul, .legal-prosa ol { padding-left: 1.3rem; }
.legal-prosa li { margin-bottom: 0.45rem; }
.legal-ficha {
  margin-top: 2.6rem;
  padding: 1.2rem 1.4rem;
  background: var(--tecido-clara);
  border: 1.5px solid var(--linha-forte);
  border-radius: 8px;
  font-size: 0.95rem;
}
.legal-ficha strong { font-family: var(--fonte-display); font-size: 1.05rem; }

/* ---------- Rodapé ---------- */

.rodape {
  margin-top: clamp(2.6rem, 6vw, 4.4rem);
  background: var(--tecido-meia);
  border-top: 1.5px solid var(--linha-forte);
}

.rodape-grade {
  display: grid;
  gap: 2.2rem;
  padding-block: clamp(2.2rem, 5vw, 3.4rem);
}
@media (min-width: 880px) {
  .rodape-grade { grid-template-columns: 1.2fr 0.8fr 1.2fr; }
}

.rodape h2 {
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  margin-bottom: 0.8rem;
  color: var(--indigo);
}
.rodape-marca {
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.05em;
  margin-bottom: 0.2rem;
}
.rodape p { font-size: 0.94rem; color: rgba(59, 46, 32, 0.85); }
.rodape a { color: var(--carimbo); text-decoration-color: var(--linha-forte); }
.rodape a:hover { color: var(--geranio); }

.rodape-links {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 0.45rem;
  font-size: 0.94rem;
}
.rodape-links a { text-decoration: none; }
.rodape-links a:hover { text-decoration: underline dashed; }

.news-form .field { margin-bottom: 0.6rem; }
.news-form .btn { margin-bottom: 0.9rem; }

.rodape-legal {
  border-top: 1.5px dashed var(--linha);
  padding-block: 1.1rem;
  font-size: 0.86rem;
  color: rgba(59, 46, 32, 0.78);
  text-align: center;
}
.rodape-legal p { margin: 0; }

/* ---------- Toast ---------- */

.toast-region {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 300;
  display: grid;
  gap: 0.5rem;
  max-width: min(92vw, 360px);
}
.toast {
  background: var(--indigo);
  color: var(--tecido-clara);
  border: 1.5px dashed rgba(246, 240, 226, 0.6);
  border-radius: 7px;
  padding: 0.75rem 1.05rem;
  font-size: 0.92rem;
  font-weight: 500;
  box-shadow: var(--sombra-carimbo);
  animation: surgir 0.25s ease;
}
@keyframes surgir {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Diversos ---------- */

.secao-topo { padding-bottom: 1.4rem; }

.cabeca-pagina { max-width: 720px; }
.cabeca-pagina .lede { font-size: 1.1rem; color: rgba(59, 46, 32, 0.85); }

.destaque-link {
  display: inline-block;
  margin-top: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.88rem;
  color: var(--geranio);
  text-decoration: underline dashed;
  text-underline-offset: 5px;
}
.destaque-link:hover { color: var(--indigo); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}