/* ==========================================================================
   Hora Sucinta — Design System (fiel ao Figma "Design System - HS")
   Tokens extraídos via Figma Dev Mode. Não usar valores fora daqui.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,600;0,700;1,400&family=Hanken+Grotesk:wght@300;400;500;600&family=Space+Grotesk:wght@400;500&family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* ---- Cores: background base ---- */
  --bg-base-0: #fffdf5;
  --bg-base-100: #faf7ed;
  --bg-base-200: #f5f1e4;

  /* ---- Cores: marca ---- */
  --brand-secondary-main: #3d4a2b;   /* verde musgo */
  --brand-secondary-light: #667b47;  /* verde claro (sacola / tiles) */
  --brand-primary-light: #837149;    /* argila/gold */
  --brand-primary-extra-dark: #f4f1e7;

  /* ---- Cores: texto ---- */
  --font-neutral-50: #3d4a2b;
  --font-neutral-100: #4a5239;
  --font-neutral-200: #9f5e34;       /* labels argila */
  --font-neutral-300: #716e63;
  --font-always-dark: #3d4a2b;
  --font-inverse: #f4f1e7;

  /* ---- Strokes ---- */
  --stroke-primary-main: #ded6c4;
  --stroke-primary-light: #837149;
  --stroke-neutral-100: #e5e5e5;
  --stroke-neutral-50: #f1f1f1;

  /* ---- Componentes: botão ---- */
  --btn-primary-bg: #3d4a2b;
  --btn-primary-content: #f4f1e7;
  --btn-secondary-bg: #837149;
  --btn-secondary-content: #f4f1e7;
  --btn-ghost-content: #ded6c4;
  --btn-ghost-stroke: #b8a984;
  --btn-radius: 8px;

  /* ---- Componentes: input ---- */
  --input-bg: #faf7ed;
  --input-stroke: #9a9a9a;
  --input-content: #9f5e34;
  --input-radius: 4px;

  /* ---- Componentes: tag ---- */
  --tag-bg: #faf7ed;
  --tag-stroke: #ded6c4;
  --tag-content: #9f5e34;

  /* ---- Cores auxiliares (uso pontual no site, fiéis ao arquivo) ---- */
  --band-text: #b5b5b5;              /* "Feito para permanecer" */
  --insta-bg: #374226;               /* fundo da seção Instagram */
  --insta-tile: #4a5a33;             /* tiles do Instagram */
  --insta-eyebrow: #e0b58a;          /* @handle e label 3º card */
  --insta-text: #eaeae3;             /* texto claro sobre verde */
  --dot-clay: #c0794a;               /* ponto do logo "hs." */

  /* ---- Fontes ---- */
  --font-display: 'Fraunces', Georgia, serif;   /* logo + títulos de página */
  --font-title: 'Merriweather', Georgia, serif; /* títulos de conteúdo */
  --font-body: 'Hanken Grotesk', system-ui, sans-serif;
  --font-support: 'Space Grotesk', system-ui, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, monospace; /* microtexto/rodapé */

  /* ---- Raios ---- */
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-pill: 4000px;

  /* ---- Espaçamentos (escala DS) ---- */
  --sp-2: 2px;  --sp-4: 4px;  --sp-6: 6px;  --sp-8: 8px;
  --sp-12: 12px; --sp-16: 16px; --sp-24: 24px; --sp-32: 32px;
  --sp-40: 40px; --sp-56: 56px;

  /* ---- Movimento (escala DS) ----
     Assim como cor e tipografia, duração e aceleração são tokens: usar sempre
     estes valores mantém o site com UMA personalidade de movimento em vez de
     cada tela inventar a sua. Se um dia entrar Motion, GSAP ou Lenis, essas
     bibliotecas passam a LER estes mesmos tokens — a troca não reescreve nada.

     --ease-out: desacelera forte no fim. Para coisas que ENTRAM na tela.
     --ease-io:  simétrica. Para coisas que se movem de um estado a outro.
     --ease-back: passa um pouco do ponto e volta. Só para microinterações. */
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);

  /* Elevação — sombras em tom de marca (verde), nunca cinza puro:
     sombra neutra sobre fundo quente "suja" a paleta. */
  --shadow-1: 0 1px 2px rgba(61, 74, 43, .06);
  --shadow-2: 0 6px 16px -6px rgba(61, 74, 43, .18), 0 2px 4px rgba(61, 74, 43, .06);
  --shadow-3: 0 24px 60px -24px rgba(40, 44, 30, .45);
}

/* Quem pede menos movimento recebe menos movimento — em TODO o site, não só
   nos poucos seletores listados à mão. Mantemos duração mínima (0.01ms) em vez
   de zero para que os eventos de fim de animação ainda disparem no JS. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  /* Nunca deixar um bloco preso invisível se o JS não chegar a revelá-lo. */
  [data-reveal-pending], [data-reveal-stagger][data-reveal-pending] > * { opacity: 1 !important; }
}

/* ==========================================================================
   Entrada de blocos ([data-reveal]) e transição entre páginas
   ========================================================================== */

/* O atributo "pending" é posto pelo motion.js e some assim que o bloco entra.
   Ele NÃO existe no HTML entregue pelo servidor: se o JS falhar ou estiver
   desligado, a página aparece completa. Esconder no HTML e revelar no JS é o
   erro clássico que deixa o site em branco quando o script quebra. */
[data-reveal-pending] { opacity: 0; }
[data-reveal-stagger][data-reveal-pending] > * { opacity: 0; }

/* Troca de página (varejo <-> atacado): onde houver suporte a View
   Transitions, o navegador faz o cruzamento entre as duas páginas sozinho.
   Onde não houver, nada acontece — nenhum código quebra. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: hs-fade-out 140ms var(--ease-io) both; }
::view-transition-new(root) { animation: hs-fade-in 260ms var(--ease-out) both; }
@keyframes hs-fade-out { to { opacity: 0; } }
@keyframes hs-fade-in { from { opacity: 0; transform: translateY(8px); } }

/* ==========================================================================
   Reset leve
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--font-neutral-100);
  background: var(--bg-base-0);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }

/* ==========================================================================
   Tipografia (classes utilitárias fiéis à escala do DS)
   ========================================================================== */
.t-title-72 { font-family: var(--font-title); font-weight: 700; font-size: 72px; line-height: 72px; }
.t-title-48 { font-family: var(--font-title); font-weight: 600; font-size: 48px; line-height: 48px; }
.t-title-40 { font-family: var(--font-title); font-weight: 400; font-size: 40px; line-height: 44px; }
.t-title-38 { font-family: var(--font-title); font-weight: 600; font-size: 38px; line-height: 42px; }
.t-title-22 { font-family: var(--font-title); font-weight: 300; font-size: 22px; line-height: 26px; }
.t-title-18 { font-family: var(--font-title); font-weight: 600; font-size: 18px; line-height: 22px; }
.t-title-16 { font-family: var(--font-title); font-weight: 500; font-size: 16px; line-height: 20px; }
.t-title-14 { font-family: var(--font-title); font-weight: 400; font-size: 14px; line-height: 18px; }
.t-title-12 { font-family: var(--font-title); font-weight: 300; font-size: 12px; line-height: 16px; }
.t-title-10 { font-family: var(--font-title); font-weight: 600; font-size: 10px; line-height: 14px; }

.t-body-18 { font-family: var(--font-body); font-weight: 300; font-size: 18px; line-height: 22px; }
.t-body-16 { font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 20px; }
.t-body-16-sb { font-family: var(--font-body); font-weight: 600; font-size: 16px; line-height: 20px; }
.t-body-14 { font-family: var(--font-body); font-weight: 400; font-size: 14px; line-height: 18px; }
.t-body-14-sb { font-family: var(--font-body); font-weight: 600; font-size: 14px; line-height: 18px; }
.t-body-12 { font-family: var(--font-body); font-weight: 400; font-size: 12px; line-height: 16px; }

.t-support-14 { font-family: var(--font-support); font-weight: 400; font-size: 14px; line-height: 18px; }
.t-support-12 { font-family: var(--font-support); font-weight: 400; font-size: 12px; line-height: 16px; }

/* ==========================================================================
   Botões (spec DS)
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-16);
  min-height: 32px;
  border: 0;
  border-radius: var(--btn-radius);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  transition: filter var(--dur-fast) var(--ease-io),
              background-color var(--dur-fast) var(--ease-io),
              transform var(--dur-fast) var(--ease-io),
              box-shadow var(--dur-fast) var(--ease-io);
}
.btn:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: var(--shadow-2); }
/* O clique afunda o botão e responde MAIS rápido que o hover: resposta tátil
   atrasada não é percebida como resposta. */
.btn:active { filter: brightness(.94); transform: translateY(1px); box-shadow: var(--shadow-1); transition-duration: 60ms; }
.btn:focus-visible { outline: 2px solid var(--brand-secondary-light); outline-offset: 2px; }
.btn svg { flex: none; }

.btn--primary { background: var(--btn-primary-bg); color: var(--btn-primary-content); }
.btn--primary svg { fill: var(--btn-primary-content); }

.btn--secondary { background: var(--btn-secondary-bg); color: var(--btn-secondary-content); }
.btn--secondary svg { fill: var(--btn-secondary-content); }

.btn--ghost {
  background: transparent;
  color: var(--btn-ghost-content);
  border: 1px solid var(--btn-ghost-stroke);
}
.btn--ghost svg { fill: var(--btn-ghost-content); }

.btn--line {
  background: transparent;
  color: var(--font-always-dark);
  border: 1px solid var(--stroke-primary-main);
}
.btn--line svg { fill: var(--font-always-dark); }
.btn--line:hover { background: var(--bg-base-100); filter: none; }

.btn--block { width: 100%; }
.btn--lg { padding: var(--sp-8) var(--sp-24); min-height: 44px; font-size: 16px; }
/* Botão desligado não reage a nada: nem sobe, nem afunda, nem ganha sombra. */
.btn:disabled { background: #e5e5e5; color: #565656; cursor: not-allowed; filter: none; opacity: 1; transform: none; box-shadow: none; }
.btn:disabled svg { fill: #565656; }

/* ==========================================================================
   Tag (pill) — Linha / Tipo
   ========================================================================== */
.tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 2px 12px;
  border: 1px solid var(--tag-stroke);
  border-radius: var(--radius-pill);
  background: var(--tag-bg);
  color: var(--tag-content);
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 10px;
  line-height: 14px;
}

/* ==========================================================================
   Input / Select (spec DS)
   ========================================================================== */
.field {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-6) var(--sp-8);
  background: var(--input-bg);
  border: 1px solid var(--input-stroke);
  border-radius: var(--input-radius);
  color: var(--input-content);
}
.field svg { fill: var(--input-content); flex: none; }
.field input,
.field select {
  border: 0;
  background: transparent;
  color: var(--input-content);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 20px;
  outline: none;
  width: 100%;
}
.field input::placeholder { color: var(--input-content); opacity: .8; }
.field--select { cursor: pointer; }
.field--select select { cursor: pointer; appearance: none; padding-right: 4px; }

/* ==========================================================================
   Card de produto (DS: variantes Varejo / Atacado)
   ========================================================================== */
.product-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-24);
  width: 266px;
  padding: var(--sp-16) var(--sp-16) var(--sp-24);
  background: var(--bg-base-100);
  border-radius: var(--radius-8);
}
/* Varejo: título limitado a 2 linhas → cards uniformes (imagem quadrada), sem borda */
.product-card--varejo .product-card__title {
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 44px;
}
/* Atacado: altura automática (cresce com as faixas) + borda sutil */
.product-card--atacado { border: 1.542px solid var(--stroke-neutral-50); }
.product-card__inner { display: flex; flex-direction: column; gap: var(--sp-16); flex: 1; }
/* Mantém o botão sempre no rodapé do card (alinhado entre cards da mesma linha) */
.product-card > .btn { margin-top: auto; }
.product-card__tags { display: flex; gap: var(--sp-8); }
.product-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-4);
  background: var(--bg-base-200);
  overflow: hidden;
}
.product-card__badge {
  position: absolute; right: 8px; bottom: 8px;
  width: 26px; height: 26px; border-radius: var(--radius-pill);
  display: flex; align-items: center; justify-content: center;
  background: rgba(61, 74, 43, .82);
}
.product-card__badge svg { fill: var(--font-inverse); }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; }
.product-card__media--empty {
  background-image:
    linear-gradient(45deg, #e9e4d4 25%, transparent 25%),
    linear-gradient(-45deg, #e9e4d4 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e9e4d4 75%),
    linear-gradient(-45deg, transparent 75%, #e9e4d4 75%);
  background-size: 18px 18px;
  background-position: 0 0, 0 9px, 9px -9px, -9px 0;
  background-color: var(--bg-base-100);
}
.product-card__title {
  color: var(--font-always-dark); margin: 0;
  font-family: var(--font-title); font-weight: 700; font-size: 18px; line-height: 22px;
}
.product-card__text { display: flex; flex-direction: column; gap: var(--sp-16); }
.product-card__prices { display: flex; flex-direction: column; gap: var(--sp-16); }
.product-card__price-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-8); }
.product-card__price-label {
  font-family: var(--font-title); font-weight: 400; font-size: 16px; line-height: 20px;
  color: var(--font-always-dark);
}
.product-card__price-money {
  display: inline-flex; align-items: flex-end; gap: 6px;
  font-family: var(--font-title); font-weight: 400; font-size: 16px; line-height: 20px;
  color: var(--font-always-dark); margin-left: auto;
}
.product-card__price-unit { font-family: var(--font-title); font-weight: 300; font-size: 12px; line-height: 16px; color: var(--font-always-dark); }

/* ==========================================================================
   Divisor com label (ex.: "CATÁLOGO ————")
   ========================================================================== */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-16);
  color: var(--font-neutral-200);
  font-family: var(--font-support);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--stroke-primary-main);
}
.eyebrow--center::before {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: .3;
}

/* Utilitários */
.container { width: min(1200px, 100% - 48px); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }