/* ═══════════════════════════════════════════════════════════
   MANADA ANIMAL · Biblioteca de Componentes (.mn-*)
   ───────────────────────────────────────────────────────────
   Gerado a partir do design system. Requer mn-tokens.css.
   --gutter → --mn-gutter / --container → --mn-container
   para não colidir com variáveis do tema NuvemShop.
   ═══════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────
   BOTÕES  ·  .mn-btn
   ───────────────────────────────────────────────────────── */
.mn-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  font: var(--fw-bold) var(--fs-sm)/1 var(--font-brand);
  letter-spacing: var(--tr-snug);
  padding: 0.875rem 1.5rem;
  border: 0; border-radius: var(--r-pill);
  background: var(--accent); color: #fff;
  box-shadow: var(--sh-purple);
  cursor: pointer;
  text-decoration: none; white-space: nowrap;
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              background var(--dur-fast) var(--ease),
              filter var(--dur-fast) var(--ease);
}
.mn-btn:hover    { background: var(--accent-press); transform: translateY(-2px); box-shadow: var(--sh-lg); }
.mn-btn:active   { transform: translateY(0); filter: brightness(.97); }
.mn-btn:focus-visible { outline: none; box-shadow: var(--ring), var(--sh-md); }
.mn-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.mn-btn svg { width: 1.05em; height: 1.05em; flex: 0 0 auto; }

/* Variantes */
.mn-btn--pink  { background: var(--brand-pink); box-shadow: var(--sh-pink); }
.mn-btn--pink:hover { background: var(--mn-pink-600); }
.mn-btn--gold  { background: var(--highlight); color: var(--mn-purple-900); box-shadow: var(--sh-gold); }
.mn-btn--gold:hover { background: var(--mn-gold-600); }
.mn-btn--ink   { background: var(--ink); box-shadow: var(--sh-md); }
.mn-btn--ink:hover { background: var(--mn-purple-800); }
.mn-btn--ghost {
  background: transparent; color: var(--accent); box-shadow: none;
  border: 1.5px solid var(--line);
}
.mn-btn--ghost:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--mn-purple-200); box-shadow: var(--sh-sm); }
.mn-btn--quiet {
  background: var(--accent-soft); color: var(--accent); box-shadow: none;
}
.mn-btn--quiet:hover { background: var(--mn-purple-200); box-shadow: none; }
.mn-btn--onbrand {
  background: rgba(255,255,255,.16); color: #fff; box-shadow: none;
  border: 1px solid rgba(255,255,255,.32); backdrop-filter: blur(6px);
}
.mn-btn--onbrand:hover { background: rgba(255,255,255,.28); box-shadow: none; }

/* Tamanhos */
.mn-btn--sm    { padding: 0.55rem 1rem; font-size: var(--fs-xs); }
.mn-btn--lg    { padding: 1.05rem 2rem; font-size: var(--fs-body); }
.mn-btn--block { display: flex; width: 100%; }
.mn-btn--icon  { padding: 0.75rem; width: 2.85rem; height: 2.85rem; border-radius: var(--r-pill); }

/* ─────────────────────────────────────────────────────────
   BADGES / TAGS  ·  .mn-badge
   ───────────────────────────────────────────────────────── */
.mn-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font: var(--fw-bold) var(--fs-2xs)/1 var(--font-brand);
  letter-spacing: var(--tr-wide); text-transform: uppercase;
  padding: 6px 11px; border-radius: var(--r-pill);
  background: var(--accent-soft); color: var(--accent);
  white-space: nowrap;
}
.mn-badge svg { width: 12px; height: 12px; }
.mn-badge--manada   { background: var(--mn-purple-900); color: #fff; }
.mn-badge--pink     { background: var(--mn-pink-100); color: var(--mn-pink-600); }
.mn-badge--gold     { background: var(--mn-gold-100); color: var(--mn-gold-600); }
.mn-badge--green    { background: var(--mn-green-100); color: var(--mn-green-600); }
.mn-badge--receita  { background: var(--mn-orange-100); color: var(--mn-orange-600); }
.mn-badge--solid    { background: var(--accent); color: #fff; }
.mn-badge--ghost    { background: transparent; color: var(--text-muted); border: 1.5px solid var(--line); }

/* Selo de curadoria veterinária */
.mn-vet {
  display: inline-flex; align-items: center; gap: 7px;
  font: var(--fw-semibold) var(--fs-2xs)/1 var(--font-brand);
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-muted);
}
.mn-vet::before {
  content: ""; width: 14px; height: 14px; flex: 0 0 auto;
  border-radius: 50%; background: var(--positive);
  box-shadow: 0 0 0 3px var(--mn-green-100);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 10px; background-position: center; background-repeat: no-repeat;
}

/* ─────────────────────────────────────────────────────────
   CABEÇALHO DE SEÇÃO  ·  .mn-shead
   ───────────────────────────────────────────────────────── */
.mn-shead { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-8); flex-wrap: wrap; }
.mn-shead__tx { max-width: 46rem; }
.mn-shead__eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font: var(--fw-bold) var(--fs-2xs)/1 var(--font-brand);
  letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--accent);
  margin-bottom: var(--sp-3);
}
.mn-shead__eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--highlight);
}
.mn-shead__title {
  font: var(--fw-black) var(--fs-h2)/var(--lh-heading) var(--font-brand);
  letter-spacing: var(--tr-tight); color: var(--ink); margin: 0;
}
.mn-shead__title em { font-style: normal; color: var(--brand-pink); }
.mn-shead__lede { margin: var(--sp-3) 0 0; font-size: var(--fs-lead); line-height: var(--lh-relaxed); color: var(--text); }
.mn-shead__nav { display: flex; gap: var(--sp-2); align-items: center; }

.mn-arrow {
  width: 2.85rem; height: 2.85rem; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; cursor: pointer;
  background: var(--surface); color: var(--accent);
  border: 1.5px solid var(--line);
  transition: background var(--dur-fast), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast);
}
.mn-arrow:hover { background: var(--accent); color: #fff; transform: translateY(-2px); box-shadow: var(--sh-purple); border-color: transparent; }
.mn-arrow:disabled { opacity: .4; cursor: default; transform: none; box-shadow: none; background: var(--surface); color: var(--text-muted); }
.mn-arrow svg { width: 1.1rem; height: 1.1rem; }

/* ─────────────────────────────────────────────────────────
   CARD DE PRODUTO  ·  .mn-prod
   ───────────────────────────────────────────────────────── */
.mn-prod {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1.5px solid var(--line-soft);
  border-radius: var(--r-xl); overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur);
}
.mn-prod:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); border-color: var(--mn-purple-200); }

.mn-prod__media {
  position: relative; aspect-ratio: 1/1; background: var(--surface-sunken);
  display: grid; place-items: center; padding: var(--sp-5); overflow: hidden;
}
.mn-prod__media img { width: 100%; height: 100%; object-fit: contain; transition: transform var(--dur-slow) var(--ease); }
.mn-prod:hover .mn-prod__media img { transform: scale(1.05); }

.mn-prod__flags { position: absolute; top: var(--sp-3); left: var(--sp-3); display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.mn-prod__fav {
  position: absolute; top: var(--sp-3); right: var(--sp-3); z-index: 2;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(255,255,255,.85); backdrop-filter: blur(4px);
  border: 1.5px solid var(--line-soft); color: var(--text-muted);
  transition: color var(--dur-fast), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast);
}
.mn-prod__fav:hover { color: var(--brand-pink); transform: scale(1.08); box-shadow: var(--sh-sm); }
.mn-prod__fav svg { width: 1.05rem; height: 1.05rem; }
.mn-prod__fav.is-on { color: var(--brand-pink); }
.mn-prod__fav.is-on svg { fill: currentColor; }

.mn-prod__body { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4) var(--sp-4) var(--sp-5); flex: 1; }
.mn-prod__title {
  font: var(--fw-medium) var(--fs-sm)/1.4 var(--font-brand); color: var(--ink); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.4em;
}
.mn-prod__price { display: flex; flex-direction: column; gap: 1px; margin-top: auto; }
.mn-prod__price-from { font-size: var(--fs-xs); color: var(--text-muted); text-decoration: line-through; }
.mn-prod__price-now { font: var(--fw-black) var(--fs-h4)/1 var(--font-brand); color: var(--ink); letter-spacing: var(--tr-snug); }
.mn-prod__price-pix { font-size: var(--fs-xs); color: var(--positive); font-weight: var(--fw-semibold); }
.mn-prod__price-pix b { font-weight: var(--fw-bold); }
.mn-prod__cta { margin-top: var(--sp-3); }

/* ─────────────────────────────────────────────────────────
   CARD DE CATEGORIA  ·  .mn-cat
   ───────────────────────────────────────────────────────── */
.mn-cat {
  position: relative; display: block; border-radius: var(--r-2xl); overflow: hidden;
  aspect-ratio: 3/4; text-decoration: none; isolation: isolate;
  box-shadow: var(--sh-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.mn-cat:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.mn-cat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform var(--dur-slow) var(--ease); }
.mn-cat:hover img { transform: scale(1.06); }
.mn-cat::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(28,16,56,0) 38%, rgba(28,16,56,.82) 100%); }
.mn-cat__tag {
  position: absolute; top: var(--sp-3); left: var(--sp-3);
  font: var(--fw-bold) var(--fs-2xs)/1 var(--font-brand); letter-spacing: var(--tr-wide); text-transform: uppercase;
  padding: 6px 11px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.92); color: var(--accent);
}
.mn-cat__label {
  position: absolute; left: var(--sp-4); right: var(--sp-4); bottom: var(--sp-4);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  color: #fff; font: var(--fw-bold) var(--fs-h4)/1.1 var(--font-brand); letter-spacing: var(--tr-snug);
}
.mn-cat__label svg { width: 1.25rem; height: 1.25rem; transition: transform var(--dur) var(--ease); }
.mn-cat:hover .mn-cat__label svg { transform: translateX(4px); }

/* ─────────────────────────────────────────────────────────
   FAIXA DE CONFIANÇA  ·  .mn-trust
   ───────────────────────────────────────────────────────── */
.mn-trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-2); }
.mn-trust__item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--r-lg); }
.mn-trust__item + .mn-trust__item { box-shadow: inset 1px 0 0 var(--line-soft); }
.mn-trust__ic {
  width: 2.6rem; height: 2.6rem; flex: 0 0 auto; border-radius: var(--r-md);
  display: grid; place-items: center; background: var(--accent-soft); color: var(--accent);
}
.mn-trust__ic svg { width: 1.3rem; height: 1.3rem; }
.mn-trust__tx b { display: block; font: var(--fw-bold) var(--fs-sm)/1.2 var(--font-brand); color: var(--ink); }
.mn-trust__tx span { font-size: var(--fs-xs); color: var(--text-muted); }

/* ─────────────────────────────────────────────────────────
   FAIXA DE ESTATÍSTICAS  ·  .mn-stats
   ───────────────────────────────────────────────────────── */
.mn-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sp-6); }
.mn-stats__n { font: var(--fw-black) var(--fs-h1)/1 var(--font-brand); letter-spacing: var(--tr-tight); color: var(--ink); }
.mn-stats__n em { font-style: normal; color: var(--brand-pink); }
.mn-stats__l { margin-top: 6px; font-size: var(--fs-sm); color: var(--text-muted); }
.mn-stats--onbrand .mn-stats__n { color: #fff; }
.mn-stats--onbrand .mn-stats__n em { color: var(--highlight); }
.mn-stats--onbrand .mn-stats__l { color: rgba(255,255,255,.78); }

/* ─────────────────────────────────────────────────────────
   FORMULÁRIOS  ·  .mn-field / .mn-input / .mn-select
   ───────────────────────────────────────────────────────── */
.mn-field { display: flex; flex-direction: column; gap: 7px; }
.mn-label { font: var(--fw-semibold) var(--fs-xs)/1 var(--font-brand); color: var(--ink); }
.mn-input, .mn-select, .mn-textarea {
  font: var(--fw-regular) var(--fs-sm)/1.4 var(--font-brand); color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--line);
  border-radius: var(--r-md); padding: 0.8rem 1rem; width: 100%;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.mn-input::placeholder, .mn-textarea::placeholder { color: var(--mn-400); }
.mn-input:focus, .mn-select:focus, .mn-textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.mn-select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23857799' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; }

.mn-field--stacked .mn-label {
  background: var(--surface-sunken); border: 1.5px solid var(--line); border-bottom: none;
  border-radius: var(--r-sm) var(--r-sm) 0 0; padding: 9px 14px;
}
.mn-field--stacked .mn-input, .mn-field--stacked .mn-select { border-radius: 0 0 var(--r-sm) var(--r-sm); }

.mn-search { position: relative; }
.mn-search .mn-input { border-radius: var(--r-pill); padding-left: 2.75rem; }
.mn-search svg { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 1.1rem; height: 1.1rem; color: var(--text-muted); pointer-events: none; }

/* ─────────────────────────────────────────────────────────
   NEWSLETTER  ·  .mn-news
   ───────────────────────────────────────────────────────── */
.mn-news {
  position: relative; overflow: hidden; border-radius: var(--r-2xl);
  background: var(--mn-gold-100); padding: var(--section-y) var(--mn-gutter);
}
.mn-news__inner { position: relative; max-width: 60rem; margin: 0 auto; display: grid; gap: var(--sp-6); align-items: center; grid-template-columns: 1.1fr 1fr; }
.mn-news__title { font: var(--fw-black) var(--fs-h2)/var(--lh-heading) var(--font-brand); letter-spacing: var(--tr-tight); color: var(--ink); margin: 0; }
.mn-news__title em { font-style: normal; color: var(--accent); }
.mn-news__sub { margin: var(--sp-2) 0 0; color: var(--text); font-size: var(--fs-sm); }
.mn-news__form { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.mn-news__form .mn-input { flex: 1 1 12rem; }
@media (max-width: 720px) { .mn-news__inner { grid-template-columns: 1fr; } }

/* ─────────────────────────────────────────────────────────
   PÍLULA / CHIP DE FILTRO  ·  .mn-chip
   ───────────────────────────────────────────────────────── */
.mn-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font: var(--fw-semibold) var(--fs-xs)/1 var(--font-brand);
  padding: 0.5rem 0.9rem; border-radius: var(--r-pill);
  background: var(--surface); color: var(--text); border: 1.5px solid var(--line);
  cursor: pointer; transition: all var(--dur-fast) var(--ease);
}
.mn-chip:hover { border-color: var(--mn-purple-200); color: var(--accent); }
.mn-chip.is-active { background: var(--accent); color: #fff; border-color: transparent; }

/* ─────────────────────────────────────────────────────────
   UTILITÁRIOS DE LAYOUT
   ───────────────────────────────────────────────────────── */
.mn-container { max-width: var(--mn-container); margin-inline: auto; padding-inline: var(--mn-gutter); }
.mn-section { padding-block: var(--section-y); }
.mn-grid-prod { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-5); }
.mn-divider { height: 1px; background: var(--line); border: 0; margin: 0; }