/* ==========================================================================
   Meldê · system: base, browser surfaces, type roles and components.
   Shared by the landing, the brand page and the future store.
   ========================================================================== */

/* ---- Base ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
  scrollbar-color: var(--marrom-500) var(--mel-50);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-text);
  font-stretch: var(--wdth-text);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  caret-color: var(--mel-600);
  overflow-x: clip;
}
img, svg, picture, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; }
h1, h2, h3, h4 { font-weight: 900; text-wrap: balance; }
p { text-wrap: pretty; }
ul, ol { padding: 0; list-style: none; }

/* ---- Browser surfaces ---------------------------------------------- */
::selection { background: var(--mel-400); color: var(--marrom-900); }
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}
.no-escuro :focus-visible { outline-color: var(--focus-on-dark); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--mel-50); }
::-webkit-scrollbar-thumb { background: var(--marrom-500); border-radius: 12px; border: 3px solid var(--mel-50); }
::-webkit-scrollbar-thumb:hover { background: var(--marrom-900); }

.pular {
  position: fixed; left: var(--margem); top: 8px; z-index: 100;
  padding: 10px 16px; border-radius: var(--r-pill);
  background: var(--mel-400); color: var(--marrom-900);
  font-weight: 800; font-size: var(--fs-note); text-decoration: none;
  transform: translateY(-160%); transition: transform var(--dur-ui) var(--ease-out);
}
.pular:focus-visible { transform: none; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- Grounds ------------------------------------------------------- */
.no-branco { background: var(--ground); color: var(--ink); }
.no-escuro { background: var(--ground-dark); color: var(--ink-on-dark); --rule: var(--rule-on-dark); --ink-soft: var(--ink-on-dark-soft); }
.no-fundo  { background: var(--ground-deep); color: var(--ink-on-dark); --rule: var(--rule-on-dark); --ink-soft: var(--ink-on-dark-soft); }
.no-mel    { background: var(--light); color: var(--ink-on-light); --rule: rgb(48 37 30 / 0.28); --ink-soft: var(--marrom-700); }

/* ---- Grid ---------------------------------------------------------- */
.grade {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--margem);
}

/* ---- Type roles ---------------------------------------------------- */
.t-display, .t-h2, .t-mega, .t-h3, .t-rotulo, .t-num {
  font-stretch: var(--wdth-display);
  text-transform: uppercase;
}
.t-display { font-size: var(--fs-display); line-height: var(--lh-tight); font-weight: 900; letter-spacing: -0.02em; }
.t-h2      { font-size: var(--fs-h2); line-height: var(--lh-tight); font-weight: 900; letter-spacing: -0.015em; }
.t-mega    { font-size: var(--fs-mega); line-height: 0.78; font-weight: 900; letter-spacing: -0.035em; }
.t-h3      { font-size: var(--fs-h3); line-height: 1.02; font-weight: 800; letter-spacing: -0.005em; font-stretch: var(--wdth-label); }
.t-lead    { font-size: var(--fs-lead); line-height: 1.38; font-weight: 400; letter-spacing: -0.005em; }
.t-corpo   { font-size: var(--fs-body); line-height: var(--lh-text); }
.t-nota    { font-size: var(--fs-note); line-height: 1.45; color: var(--ink-soft); }
.t-rotulo  { font-size: var(--fs-micro); line-height: 1.2; font-weight: 700; letter-spacing: 0.12em; font-stretch: var(--wdth-label); }
.t-num     { font-weight: 900; font-variant-numeric: tabular-nums lining-nums; letter-spacing: -0.02em; }
.linha { display: block; }

/* ---- Icons: the circumflex is the only primitive ---------------------- */
.ic {
  width: 1em; height: 1em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round;
}
.ic--dir { transform: rotate(90deg); }
.ic--baixo { transform: rotate(180deg); }

/* ---- Buttons: the seal ---------------------------------------------- */
.selo {
  --selo-bg: var(--mel-400);
  --selo-ink: var(--marrom-900);
  --selo-dot: var(--marrom-900);
  --selo-dot-ink: var(--mel-50);
  display: inline-flex; align-items: center; gap: 18px;
  min-height: 58px; padding: 7px 7px 7px 28px;
  border-radius: var(--r-pill);
  background: var(--selo-bg); color: var(--selo-ink);
  font-size: 0.875rem; font-weight: 800; font-stretch: var(--wdth-label);
  letter-spacing: 0.1em; text-transform: uppercase; line-height: 1;
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 0 0 0 transparent;
  transition: background-color var(--dur-hover) ease, box-shadow var(--dur-ui) var(--ease-out), transform var(--dur-hover) ease;
}
.selo__ponto {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--selo-dot); color: var(--selo-dot-ink);
  font-size: 18px;
  transition: transform var(--dur-ui) var(--ease-mel);
}
.selo:hover { background: var(--mel-200); box-shadow: var(--sombra-selo); }
.selo:hover .selo__ponto { transform: translateX(4px); }
.selo:active { transform: scale(0.98); }
.selo[aria-disabled="true"], .selo:disabled { opacity: 0.55; pointer-events: none; }
.selo.is-carregando .selo__ponto .ic { animation: selo-gira 900ms linear infinite; }
@keyframes selo-gira { to { transform: rotate(450deg); } }

.selo--escuro { --selo-bg: var(--marrom-900); --selo-ink: var(--mel-50); --selo-dot: var(--mel-400); --selo-dot-ink: var(--marrom-900); }
.selo--escuro:hover { background: var(--marrom-700); box-shadow: 0 14px 28px -16px rgb(30 23 18 / 0.8); }
.selo--compacto { min-height: 44px; padding: 5px 5px 5px 18px; gap: 12px; font-size: 0.75rem; }
.selo--compacto .selo__ponto { width: 34px; height: 34px; font-size: 14px; }

.link {
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.22em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: text-decoration-color var(--dur-hover) ease, color var(--dur-hover) ease;
}
.link:hover { text-decoration-color: var(--mel-400); }

/* ---- Photo windows: rounded glass cut into the label --------------- */
.janela {
  position: relative; overflow: hidden;
  border-radius: var(--r-janela);
  background: var(--marrom-900);
  isolation: isolate;
  /* the die-cut: a hairline a few points outside the window, as if cut into the label */
  outline: 1px solid var(--rule);
  outline-offset: clamp(6px, 0.7vw, 10px);
}
.janela img { width: 100%; height: 100%; object-fit: cover; }
.janela__nota {
  position: absolute; left: 14px; bottom: 14px; z-index: 2;
  padding: 6px 10px; border-radius: var(--r-pill);
  background: rgb(30 23 18 / 0.66);
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; font-stretch: var(--wdth-label); line-height: 1;
  color: var(--mel-50); text-transform: uppercase; white-space: nowrap;
}

/* ---- Panel code: the label's die-cut mark ------------------------- */
.painel-cod {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; font-stretch: var(--wdth-label);
  text-transform: uppercase; color: var(--ink-soft);
}
.painel-cod::before { content: ""; width: 28px; height: 1px; background: currentColor; }

/* ---- Label rows (the table on the side of the jar) ------------------ */
.tabela { border-top: var(--rule-w) solid currentColor; }
.tabela__linha {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gutter);
  align-items: baseline; padding: 22px 0 20px;
  border-bottom: var(--hairline) solid var(--rule);
}
.tabela__linha:last-child { border-bottom-width: var(--rule-w); border-bottom-color: currentColor; }

/* ---- Fields ----------------------------------------------------------- */
.campo { display: grid; gap: 8px; }
.campo__rotulo { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; font-stretch: var(--wdth-label); }
.campo__entrada {
  width: 100%; min-height: 58px; padding: 0 20px;
  border-radius: var(--r-campo); border: 2px solid transparent;
  background: var(--mel-50); color: var(--marrom-900);
  font-size: 1.0625rem;
  transition: border-color var(--dur-hover) ease, box-shadow var(--dur-hover) ease;
}
.campo__entrada::placeholder { color: var(--marrom-500); opacity: 1; }
.campo__entrada:hover { border-color: rgb(48 37 30 / 0.25); }
.campo__entrada:focus { outline: none; border-color: var(--marrom-900); box-shadow: 0 0 0 4px rgb(48 37 30 / 0.16); }
.campo__entrada[aria-invalid="true"] { border-color: var(--alerta); }
.campo__erro { display: none; align-items: center; gap: 8px; font-size: var(--fs-note); font-weight: 600; color: var(--marrom-900); }
.campo__erro::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--alerta); flex: none; }
.campo__entrada[aria-invalid="true"] + .campo__erro { display: flex; }

/* ---- Seal band (lacre) ------------------------------------------- */
.lacre {
  position: relative; z-index: 4;
  overflow: hidden; white-space: nowrap;
  background: var(--mel-400); color: var(--marrom-900);
  border-block: 1px solid rgb(48 37 30 / 0.25);
}
.lacre__trilho { display: inline-flex; align-items: center; gap: 28px; padding: 14px 0; will-change: transform; }
.lacre__item { display: inline-flex; align-items: center; gap: 28px; font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; font-stretch: var(--wdth-label); }
.lacre__item .ic { font-size: 16px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}