/* =====================================================================
   GELEIA DOS PINHAIS — camada visual comum do site
   Mesmo padrão aplicado no site da Formando Campeões:
   - par de fontes: títulos com a cara da marca (Fraunces) + Figtree no texto
   - fundo creme levemente tingido, superfícies brancas, linhas suaves
   - rótulo "eyebrow" (itálico com tracinho) antes dos títulos de seção
   - cartões com raio de 22px e sombra longa e suave
   - botões em pílula, links com sublinhado animado
   As cores vêm do tema.asp (T030_tema), então a tela "Tema" do sistema
   continua mudando a paleta.
   Este arquivo é carregado no fim de cada página (footer.asp) para
   prevalecer sobre os estilos antigos de cada tela.
   ===================================================================== */

/* ---------- base ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--gp-bg);
  color: var(--gp-ink);
  font-family: var(--gp-text) !important;
  letter-spacing: 0 !important;
  -webkit-font-smoothing: antialiased;
}
body .navbar, body .navbar-nav .nav-link, body .mega-menu h6, body .mega-menu a,
body input, body select, body textarea, body button { font-family: var(--gp-text); letter-spacing: 0; }

h1, h2, h3, h4, .h1, .h2, .h3, .h4,
.produto-nome, .modal-title, .offcanvas-title {
  font-family: var(--gp-display) !important;
  letter-spacing: -.01em;
}
h1, h2, .h1, .h2 { font-weight: 700; }

::selection { background: color-mix(in srgb, var(--gp-vinho) 22%, transparent); }
:focus-visible { outline: 2px solid var(--gp-dourado); outline-offset: 3px; }

/* ---------- títulos de seção (eyebrow + título) ---------- */
.sec-label, .sobre-sec-label, .contato-sec-label, .pub-sec-label, .serv-sec-label {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  font-family: var(--gp-display) !important;
  font-style: italic;
  font-weight: 600 !important;
  font-size: .98rem !important;
  text-transform: none !important;
  letter-spacing: .01em !important;
  color: var(--gp-vinho) !important;
  background: none !important;
  padding: 0 !important;
  border: 0 !important;
}
.sec-label::before, .sobre-sec-label::before, .contato-sec-label::before, .pub-sec-label::before, .serv-sec-label::before {
  content: "";
  width: 22px;
  height: 3px;
  border-radius: 3px;
  background: var(--gp-dourado);
}
.sec-header h2, .sobre-sec-header h2, .contato-sec-header h2, .pub-sec-header h2, .serv-sec-header h2,
.sobre-section-title, .serv-section-title {
  font-family: var(--gp-display) !important;
  font-weight: 700 !important;
  color: var(--gp-ink) !important;
  font-size: clamp(1.9rem, 4vw, 2.8rem) !important;
  line-height: 1.08 !important;
  text-transform: none !important;
  letter-spacing: -.01em !important;
  margin-top: 10px !important;
}
.sec-header p, .sobre-sec-header p, .contato-sec-header p, .pub-sec-header p, .serv-sec-header p {
  color: var(--gp-muted) !important;
  font-size: 1.08rem;
}
.sec-divider, .sobre-sec-divider, .contato-sec-divider, .pub-sec-divider, .serv-sec-divider { display: none !important; }

/* ---------- breadcrumb em pílula ---------- */
.breadcrumb-custom {
  display: inline-flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px !important;
  width: auto !important;
  max-width: 100%;
  padding: 7px 16px !important;
  margin: 0 0 24px !important;
  background: var(--gp-surface) !important;
  border: 1px solid var(--gp-line) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  font-size: .88rem !important;
  line-height: 1.3;
  color: var(--gp-muted) !important;
}
.breadcrumb-custom a {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--gp-muted) !important;
  text-decoration: none !important;
}
.breadcrumb-custom a:hover { color: var(--gp-vinho) !important; }
.breadcrumb-custom > span { color: color-mix(in srgb, var(--gp-muted) 45%, transparent) !important; }
.breadcrumb-custom .current { color: var(--gp-ink) !important; font-weight: 600; }

/* ---------- cartões ---------- */
.prod-card, .pub-card, .rel-card, .valor-card, .pilar-card,
.co-card, .contact-info-card, .sobre-main-card, .serv-main-card,
.login-box, .reset-box, .retorno-card, .pedido-card, .user-card,
.category-card, .success-box, .empty-state, .empty-pedidos, .sidebar-widget {
  background: var(--gp-surface) !important;
  border: 1px solid var(--gp-line) !important;
  border-radius: var(--gp-radius) !important;
  box-shadow: var(--gp-shadow) !important;
  overflow: hidden;
}
.prod-card, .pub-card, .rel-card { transition: transform .15s ease, border-color .15s ease !important; }
.prod-card:hover, .pub-card:hover, .rel-card:hover {
  transform: translateY(-3px) !important;
  border-color: color-mix(in srgb, var(--gp-vinho) 45%, var(--gp-line)) !important;
}
.co-card-header {
  background: var(--gp-mist) !important;
  border-bottom: 1px solid var(--gp-line) !important;
  color: var(--gp-ink) !important;
  font-family: var(--gp-display);
  font-weight: 700;
}
.prod-card .img-wrap, .pub-card .pub-img { background: var(--gp-mist); }
.prod-nome a, .pub-body h3 a, .pub-card h3 a { color: var(--gp-ink) !important; }
.prod-nome a:hover, .pub-body h3 a:hover, .pub-card h3 a:hover { color: var(--gp-vinho) !important; }
.prod-preco, .produto-preco, .modal-price, .ac-item-preco, .mmv2-destaque-preco {
  color: var(--gp-vinho) !important;
  font-family: var(--gp-display);
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
}
.prod-badge { border-radius: 999px !important; font-weight: 700 !important; letter-spacing: .02em; }
.badge-destaque { background: var(--gp-dourado) !important; color: #2A1A06 !important; }
.badge-promo { background: var(--gp-vinho) !important; color: #fff !important; }

/* ---------- botões em pílula ---------- */
.btn, .btn-carrinho, .btn-ver-prod, .btn-ver-todos, .btn-cta-dark, .btn-cta-wa,
.btn-hero-primary, .btn-hero-outline, .btn-comprar, .btn-finalizar, .btn-login,
.btn-salvar, .btn-add-cart, .btn-retorno, .btn-whatsapp-prod, .btn-buscar,
.btn-ver-produto, .aviso-btn-ok, .btn-politica-devolucao, .back-button {
  border-radius: 999px !important;
  font-family: var(--gp-text) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.btn-icon, .btn-close, .btn-pw-toggle, .mic-icon, .qty-control button { border-radius: 50% !important; }
.input-group .btn, .frete-input-group .btn { border-radius: 0 999px 999px 0 !important; }

.btn-carrinho, .btn-comprar, .btn-finalizar, .btn-login-primary, .btn-salvar, .btn-add-cart,
.btn-ver-todos-laranja, .btn-hero-primary, .btn-retorno-primario, .btn-primary {
  background: var(--gp-vinho) !important;
  border-color: var(--gp-vinho) !important;
  color: #fff !important;
}
.btn-carrinho:hover, .btn-comprar:hover, .btn-finalizar:hover, .btn-login-primary:hover, .btn-salvar:hover, .btn-add-cart:hover,
.btn-ver-todos-laranja:hover, .btn-hero-primary:hover, .btn-retorno-primario:hover, .btn-primary:hover {
  background: var(--laranja-dark) !important;
  border-color: var(--laranja-dark) !important;
  color: #fff !important;
}
.btn-ver-prod, .btn-retorno-secundario, .btn-outline-primary, .btn-ver-todos-claro {
  background: transparent !important;
  border: 1px solid var(--gp-line) !important;
  color: var(--gp-ink) !important;
}
.btn-ver-prod:hover, .btn-retorno-secundario:hover, .btn-outline-primary:hover, .btn-ver-todos-claro:hover {
  border-color: var(--gp-ink) !important;
  color: var(--gp-ink) !important;
  background: transparent !important;
}
.btn-cta-dark {
  background: var(--gp-vinho-escuro) !important;
  border-color: var(--gp-vinho-escuro) !important;
  color: #fff !important;
}
.btn-cta-dark:hover { background: var(--gp-vinho) !important; color: #fff !important; }
.btn-dourado {
  background: var(--gp-dourado) !important;
  border-color: var(--gp-dourado) !important;
  color: #2A1A06 !important;
}

/* ---------- formulários ---------- */
.form-control, .form-select, .co-input, .contact-form input, .contact-form textarea, .contact-form select {
  border-radius: 12px !important;
  border-color: var(--gp-line) !important;
  background-color: var(--gp-surface);
  color: var(--gp-ink);
}
.form-control:focus, .form-select:focus, .co-input:focus,
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus {
  border-color: var(--gp-vinho) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gp-vinho) 16%, transparent) !important;
}
.form-check-input:checked { background-color: var(--gp-vinho); border-color: var(--gp-vinho); }
.co-label, .form-label { font-weight: 600; color: var(--gp-ink); }

/* abas e passos */
.login-tab-btn.active, .nav-pills .nav-link.active { background: var(--gp-vinho) !important; color: #fff !important; }
.login-tab-btn { border-radius: 999px !important; }
.step.active .step-num, .step.done .step-num { background: var(--gp-vinho) !important; color: #fff !important; }

/* paginação */
.pagination .page-link { border-radius: 999px !important; margin: 0 3px; border-color: var(--gp-line); color: var(--gp-ink); }
.pagination .page-item.active .page-link { background: var(--gp-vinho); border-color: var(--gp-vinho); color: #fff; }

/* modais */
.modal-content { border-radius: var(--gp-radius) !important; border: 1px solid var(--gp-line) !important; }

/* pílulas de status (mesmas cores do sistema) */
.pill { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; font-weight: 600; padding: 4px 11px; border-radius: 99px; white-space: nowrap; line-height: 1.3; }
.pill-ok   { background: #DDF1E6; color: #1F6B45; }
.pill-wait { background: #FBEFD5; color: #7A5408; }
.pill-off  { background: #EFE7E1; color: #6E5B5E; }
.pill-no   { background: #F8DEDD; color: #9E2B2B; }

/* conta do cliente */
.account-sidebar .sidebar-link.active, .account-sidebar .sidebar-link:hover {
  background: var(--gp-mist) !important;
  color: var(--gp-vinho) !important;
  border-radius: 12px;
}
.user-avatar { background: var(--gp-mist) !important; color: var(--gp-vinho) !important; font-family: var(--gp-display); font-weight: 700; }

/* carrinho lateral */
.cart-item { border-bottom-color: var(--gp-line) !important; }
.cart-item img { border-radius: 10px !important; }

@media (prefers-reduced-motion: reduce) {
  .prod-card, .pub-card, .rel-card { transition: none !important; }
}