/* ============================================================
   KERAVELLE — sistema visual global (todas as páginas)
   Carregado em layouts/layout.tpl. Escopo: body.kv-site.

   Estratégia: o tema Brasilia lê cores e fontes de variáveis CSS
   (style-tokens.tpl). Aqui redefinimos essas variáveis no <body>,
   então header, footer, botões, cards, formulários e carrinho
   herdam a marca sem editar nenhum snipplet nativo.
   Depois, ajustes pontuais de forma (raio 0, caixa alta, réguas).
   ============================================================ */

body.kv-site {
  /* --- tokens da marca --- */
  --kv-paper:    #F3F0EA;
  --kv-paper-2:  #E9E5DC;
  --kv-ash:      #8A867E;
  --kv-graphite: #262522;
  --kv-ink:      #0C0C0D;
  --kv-line:     #D8D3C9;
  --kv-line-d:   #34322E;
  --kv-signal:   #6B5B4A;

  /* --- sobrescreve tokens do tema --- */
  --main-background: var(--kv-paper);
  --main-foreground: var(--kv-ink);
  --main-foreground-opacity-03: rgba(12,12,13,.03);
  --main-foreground-opacity-05: rgba(12,12,13,.05);
  --main-foreground-opacity-10: rgba(12,12,13,.10);
  --main-foreground-opacity-20: rgba(12,12,13,.20);
  --main-foreground-opacity-30: var(--kv-line);
  --main-foreground-opacity-40: rgba(12,12,13,.40);
  --main-foreground-opacity-50: var(--kv-ash);
  --main-foreground-opacity-60: rgba(12,12,13,.60);
  --main-background-opacity-30: rgba(243,240,234,.30);
  --main-background-opacity-50: rgba(243,240,234,.50);
  --main-background-opacity-80: rgba(243,240,234,.80);

  --accent-color: var(--kv-signal);

  --button-background: var(--kv-ink);
  --button-foreground: var(--kv-paper);

  --label-background: var(--kv-graphite);
  --label-foreground: var(--kv-paper);
  --label-shipping-background: var(--kv-paper-2);
  --label-shipping-foreground: var(--kv-ink);
  --stock-color: var(--kv-signal);

  --header-background: var(--kv-paper);
  --header-foreground: var(--kv-ink);
  --header-foreground-opacity-10: rgba(12,12,13,.10);
  --header-foreground-opacity-20: rgba(12,12,13,.20);
  --header-foreground-opacity-30: var(--kv-line);
  --header-foreground-opacity-50: var(--kv-ash);
  --header-badge-background: var(--kv-ink);
  --header-badge-foreground: var(--kv-paper);
  --header-search-btn-background: var(--kv-ink);
  --header-search-btn-foreground: var(--kv-paper);
  --header-desktop-utilities-background: var(--kv-paper);
  --header-desktop-utilities-foreground: var(--kv-ink);
  --header-desktop-nav-background: var(--kv-paper);
  --header-desktop-nav-foreground: var(--kv-ink);
  --header-featured-link-foreground: var(--kv-signal);

  --primary-adbar-background: var(--kv-ink);
  --primary-adbar-foreground: var(--kv-paper);
  --secondary-adbar-background: var(--kv-graphite);
  --secondary-adbar-foreground: var(--kv-paper);

  --footer-background: var(--kv-ink);
  --footer-foreground: var(--kv-paper);
  --footer-foreground-opacity-40: rgba(243,240,234,.40);
  --footer-foreground-opacity-60: var(--kv-ash);

  --banner-services-background: var(--kv-paper-2);
  --banner-services-foreground: var(--kv-ink);
  --institutional-background: var(--kv-paper-2);
  --institutional-foreground: var(--kv-ink);
  --newsletter-background: var(--kv-graphite);
  --newsletter-foreground: var(--kv-paper);
  --newsletter-foreground-opacity-50: var(--kv-ash);
  --video-background: var(--kv-ink);
  --video-foreground: var(--kv-paper);

  --heading-font: "Bodoni Moda", "Prata", Georgia, serif;
  --body-font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --title-font-weight: 400;

  --border-radius: 0px;
  --border-radius-medium: 0px;
  --border-radius-small: 0px;
  --border-radius-smallest: 0px;
  --drop-shadow: none;

  background: var(--kv-paper);
  color: var(--kv-ink);
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------
   Tipografia base do tema
   ------------------------------------------------------------ */
body.kv-site h1, body.kv-site .h1,
body.kv-site h2, body.kv-site .h2,
body.kv-site h3, body.kv-site .h3,
body.kv-site h4, body.kv-site .h4 {
  font-family: var(--heading-font);
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.12;
  text-wrap: balance;
}
body.kv-site .font-family-body { font-family: var(--body-font); }

/* Rótulo padrão da marca: Archivo 500, caixa alta, .12em */
body.kv-site .btn,
body.kv-site .label,
body.kv-site .form-label,
body.kv-site .nav-desktop-list a,
body.kv-site .nav-desktop-main a,
body.kv-site .footer-nav-container .footer-title,
body.kv-site .accordion-title {
  font-family: var(--body-font);
  font-weight: 500;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------
   Botões
   ------------------------------------------------------------ */
body.kv-site .btn { border-radius: 0; transition: background-color .25s ease, color .25s ease, border-color .25s ease; }
body.kv-site .btn-primary {
  padding: 18px 28px;
  line-height: 1;
  border: 1px solid var(--kv-ink);
}
body.kv-site .btn-primary:hover { background-color: var(--kv-graphite); border-color: var(--kv-graphite); }
body.kv-site .btn-secondary,
body.kv-site .btn-default {
  background: transparent;
  color: var(--kv-ink);
  border: 1px solid var(--kv-ink);
  padding: 18px 28px;
  line-height: 1;
}
body.kv-site .btn-link { color: var(--kv-signal); text-transform: none; letter-spacing: 0; font-size: var(--font-small); font-weight: 400; }
body.kv-site .label { border-radius: 0; padding: 6px 10px; }

/* ------------------------------------------------------------
   Formulários
   ------------------------------------------------------------ */
body.kv-site .form-control,
body.kv-site .form-select,
body.kv-site .form-quantity {
  border-radius: 0;
  border-color: var(--kv-line);
  background-color: transparent;
}
body.kv-site .form-control:focus,
body.kv-site .form-select:focus { border-color: var(--kv-ink); outline: none; box-shadow: none; }

/* ------------------------------------------------------------
   Header: silencioso. Régua de 1px em vez de sombra.
   ------------------------------------------------------------ */
body.kv-site .head-main {
  background: var(--kv-paper);
  color: var(--kv-ink);
  border-bottom: 1px solid var(--kv-line);
  box-shadow: none;
}
body.kv-site .head-row { padding-block: 14px; }
/* Loja de produto único: busca é ruído. Some no desktop; no mobile fica pelo ícone nativo. */
body.kv-site .head-main .search-container { display: none; } /* busca: ruído em loja de produto único (todas as larguras) */
@media (min-width: 768px) { body.kv-site .head-row { padding-block: 18px; } }
/* Mobile: logo centralizada entre hambúrguer e utilidades, sem sobrepor */
@media (max-width: 767px) {
  /* grid 1fr auto 1fr: logo no centro exato, independente da largura de menu/utilidades */
  body.kv-site .head-row { padding-block: 10px; grid-template-columns: 1fr auto 1fr; }
  body.kv-site .head-row .menu-container { grid-column: 1; grid-row: 1; justify-self: start; }
  body.kv-site .head-row .logo-container,
  body.kv-site .head-row.logo-center .logo-container { grid-column: 2; grid-row: 1; text-align: center; padding: 0; }
  body.kv-site .head-row .utilities-container { grid-column: 3; grid-row: 1; justify-self: end; }
  body.kv-site #no-logo .logo-text { display: block; margin: 0 auto; }
  body.kv-site .logo-text-container { max-width: none; }
}
body.kv-site .nav-desktop-container .container { padding-block: 4px; }
body.kv-site .nav-desktop-list > li > a, body.kv-site .nav-desktop-main > li > a { padding-block: 10px; }
body.kv-site .nav-desktop-container {
  background: var(--kv-paper);
  border-bottom: 1px solid var(--kv-line);
  box-shadow: none;
}
body.kv-site .nav-desktop-list a,
body.kv-site .nav-desktop-main a { color: var(--kv-ink); }
body.kv-site .nav-desktop-list a:hover,
body.kv-site .nav-desktop-main a:hover { color: var(--kv-signal); }
body.kv-site .adbar { font-family: var(--body-font); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; }
body.kv-site .adbar-primary.adbar-colors { background: var(--kv-ink); color: var(--kv-paper); }
body.kv-site .adbar-secondary.adbar-colors { background: var(--kv-graphite); color: var(--kv-paper); }

/* ------------------------------------------------------------
   Footer: preto do produto. Continuação da progressão da página.
   ------------------------------------------------------------ */
body.kv-site .js-footer,
body.kv-site .footer-colors { background: var(--kv-ink); color: var(--kv-paper); }
body.kv-site .footer-colors a { color: var(--kv-paper); }
body.kv-site .footer-colors a:hover { color: var(--kv-ash); }
body.kv-site .footer-colors svg { fill: var(--kv-paper); }
body.kv-site .footer-main-info { padding-block: clamp(48px, 7vw, 96px); }
body.kv-site .footer-secondary-info { border-top: 1px solid var(--kv-line-d); padding-block: 24px; font-size: var(--font-smallest); color: var(--kv-ash); }
body.kv-site .footer-colors .form-control { border-color: var(--kv-line-d); color: var(--kv-paper); }
body.kv-site .footer-colors .btn-primary { background: var(--kv-paper); color: var(--kv-ink); border-color: var(--kv-paper); }

/* ------------------------------------------------------------
   Grade de produtos (categoria, busca, relacionados, home)
   Sem sombra, sem raio. Régua e fundo separam.
   ------------------------------------------------------------ */
body.kv-site .item { border-radius: 0; box-shadow: none; }
body.kv-site .item-image { background: var(--kv-paper-2); border-radius: 0; }
body.kv-site .item-image img { border-radius: 0; }
body.kv-site .item-name { font-family: var(--heading-font); font-size: 1.15rem; font-weight: 400; line-height: 1.25; }
body.kv-site .item-price { font-family: var(--body-font); font-weight: 500; }
body.kv-site .price-compare { color: var(--kv-ash); }

/* ------------------------------------------------------------
   Páginas de conteúdo: categoria, busca, contato, página, conta, blog
   ------------------------------------------------------------ */
body.kv-site .page-header,
body.kv-site .category-body h1,
body.kv-site .section-title { font-family: var(--heading-font); font-weight: 400; }
body.kv-site .breadcrumbs,
body.kv-site .breadcrumbs a { color: var(--kv-ash); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }
body.kv-site .user-content { line-height: 1.65; max-width: 65ch; }
body.kv-site .box,
body.kv-site .card,
body.kv-site .modal { border-radius: 0; box-shadow: none; border: 1px solid var(--kv-line); }
body.kv-site .table { border-color: var(--kv-line); }
body.kv-site hr { border-color: var(--kv-line); }

/* Carrinho (página e painel lateral) */
body.kv-site .cart-item { border-bottom: 1px solid var(--kv-line); }
body.kv-site .cart-summary,
body.kv-site .cart-totals { border-top: 1px solid var(--kv-line); }
body.kv-site .modal-cart-panel { background: var(--kv-paper); }

/* Alertas do tema: cor da marca, sem cor saturada */
body.kv-site .alert { border-radius: 0; border: 1px solid var(--kv-line); background: var(--kv-paper-2); color: var(--kv-ink); }
body.kv-site .alert-danger { border-color: var(--kv-signal); }

/* WhatsApp flutuante: preto, sem verde */
body.kv-site .whatsapp-chat,
body.kv-site .js-whatsapp-chat { background: var(--kv-ink) !important; border-radius: 0 !important; } /* o tema aplica cor inline */
body.kv-site .whatsapp-chat svg { fill: var(--kv-paper); }

/* Logo: altura controlada, sem esticar. Vale para a imagem enviada no painel. */
body.kv-site .logo-container img { max-height: 44px; width: auto; }
@media (min-width: 768px) { body.kv-site .logo-container img { max-height: 56px; } }
body.kv-site .js-footer-logo-container img { max-height: 40px; width: auto; }

/* Header em largura total: menu, logo e utilidades alinhados à mesma margem do hero */
body.kv-site { --kv-edge: clamp(24px, 4vw, 64px); }
@media (min-width: 768px) {
  body.kv-site .head-row.container,
  body.kv-site .nav-desktop-container .container,
  body.kv-site .adbar .container { max-width: 100%; padding-inline: var(--kv-edge); }
}

/* ------------------------------------------------------------
   Selo de cupom fixo (snipplets/keravelle/coupon-badge.tpl)
   ------------------------------------------------------------ */
body.kv-site .kv-coupon {
  position: fixed; left: 16px; bottom: 16px; z-index: 900;
  display: flex; align-items: stretch;
  background: var(--kv-ink); color: var(--kv-paper);
  border: 1px solid var(--kv-line-d);
  box-shadow: 0 12px 30px -12px rgba(0,0,0,.6);
  font-family: var(--body-font);
}
body.kv-site .kv-coupon[hidden] { display: none; }
body.kv-site .kv-coupon__main { display: flex; align-items: center; gap: 12px; padding: 14px 18px; color: var(--kv-paper); text-decoration: none; }
body.kv-site .kv-coupon__text { font-size: .8rem; font-weight: 500; letter-spacing: .02em; }
body.kv-site .kv-coupon__code { font-size: .7rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; padding: 4px 8px; border: 1px solid var(--kv-ash); color: var(--kv-paper-2); }
body.kv-site .kv-coupon__close { background: transparent; border: 0; border-left: 1px solid var(--kv-line-d); color: var(--kv-ash); font-size: 1.1rem; line-height: 1; padding: 0 14px; cursor: pointer; }
body.kv-site .kv-coupon__close:hover { color: var(--kv-paper); }
@media (max-width: 599px) {
  body.kv-site .kv-coupon { left: 12px; right: auto; bottom: 12px; max-width: calc(100vw - 24px - 64px); } /* deixa espaço para o botão de WhatsApp à direita */
  body.kv-site .kv-coupon__main { padding: 12px 14px; }
}

/* ------------------------------------------------------------
   Desktop: menu na mesma linha da logo e das utilidades.
   O tema renderiza o menu numa segunda linha (.nav-desktop-container);
   aqui ele é tirado do fluxo e posicionado sobre a linha da logo,
   logo após ela. Marcação e JS do tema intactos.
   ------------------------------------------------------------ */
@media (min-width: 768px) {
  body.kv-site .head-main { position: sticky; }
  body.kv-site .head-row { min-height: 92px; }
  body.kv-site .nav-desktop-container {
    position: absolute; bottom: 0; height: 92px;
    left: calc(var(--kv-edge) + 168px + 40px);
    width: auto; padding: 0; margin: 0; border: 0; background: transparent;
    display: flex; align-items: center;
  }
  body.kv-site .nav-desktop-container .container { padding: 0; margin: 0; max-width: none; height: auto !important; visibility: visible !important; } /* o tema esconde com inline style até o JS medir */
  body.kv-site .js-nav-desktop-container { display: flex; align-items: center; gap: 28px; }
  body.kv-site .nav-desktop-list, body.kv-site .nav-desktop-main { display: flex; align-items: center; gap: 28px; margin: 0; }
  body.kv-site .nav-desktop-list > li, body.kv-site .nav-desktop-main > li, body.kv-site .nav-main-item { margin: 0; }
  body.kv-site .nav-desktop-list a, body.kv-site .nav-desktop-main a { padding: 8px 0; white-space: nowrap; }
}

/* ------------------------------------------------------------
   Micro-animações. Regra: nada começa invisível. Só deslocamento
   leve (12px) ao entrar na tela, uma vez. Respeita reduced-motion.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  body.kv-site .kv-reveal { transform: translateY(12px); transition: transform .55s cubic-bezier(.2,.7,.2,1); will-change: transform; }
  body.kv-site .kv-reveal.is-in { transform: none; }
  body.kv-site .kv-btn, body.kv-site .btn-primary, body.kv-site .kv-ladder__opt, body.kv-site .kv-pcard__media, body.kv-site .kv-step__media img, body.kv-site .kv-acc summary::after { transition: transform .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease; }
  body.kv-site .kv-btn:hover, body.kv-site .btn-primary:hover { transform: translateY(-1px); }
  body.kv-site .kv-pcard__media:hover img, body.kv-site .kv-step__media:hover img { transform: scale(1.02); }
  body.kv-site .kv-pcard__media img, body.kv-site .kv-step__media img { transition: transform .5s ease; }
  body.kv-site .kv-acc details[open] summary::after { transform: rotate(180deg); }
  body.kv-site .kv-home-hero__copy > * { animation: kv-rise .7s cubic-bezier(.2,.7,.2,1) both; }
  body.kv-site .kv-home-hero__copy > *:nth-child(2) { animation-delay: .08s; }
  body.kv-site .kv-home-hero__copy > *:nth-child(3) { animation-delay: .16s; }
  body.kv-site .kv-home-hero__copy > *:nth-child(4) { animation-delay: .24s; }
  @keyframes kv-rise { from { transform: translateY(14px); } to { transform: none; } } /* sem opacity: visível desde o primeiro frame */
  body.kv-site .kv-coupon { animation: kv-rise .6s .6s cubic-bezier(.2,.7,.2,1) both; }
}

/* Botão flutuante "Comprar agora" (página do produto) — rola até a escolha de pacote */
body.kv-site .kv-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 890; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(243,241,236,.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-top: 1px solid var(--kv-line, #D8D3C9); }
body.kv-site .kv-sticky[hidden] { display: none; }
body.kv-site .kv-sticky__btn { display: block; width: 100%; max-width: 520px; margin: 0 auto; padding: 18px 24px; border: 0; cursor: pointer; background: #1f5c3f; color: #fff; text-align: center; text-decoration: none; font-family: var(--body-font); font-weight: 600; font-size: .9rem; letter-spacing: .14em; text-transform: uppercase; border-radius: 4px; box-shadow: 0 8px 20px -10px rgba(31,92,63,.6); }
body.kv-site .kv-sticky__btn:hover { background: #17492f; color: #fff; }
/* Selo de cupom sobe quando a barra está visível */
body.kv-site.kv-sticky-on .kv-coupon { bottom: 92px; }
@media (max-width: 599px) { body.kv-site.kv-sticky-on .kv-coupon { bottom: 84px; } }
@media (prefers-reduced-motion: no-preference) { body.kv-site .kv-sticky { animation: kv-rise .4s cubic-bezier(.2,.7,.2,1) both; } }

/* Folha inferior de escolha do kit (abre pelo botão flutuante) */
body.kv-site .kv-sheet { position: fixed; inset: 0; z-index: 950; }
body.kv-site .kv-sheet[hidden] { display: none; }
body.kv-site .kv-sheet__backdrop { position: absolute; inset: 0; background: rgba(12,12,13,.55); }
body.kv-site .kv-sheet__panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 88vh; overflow: auto; background: var(--kv-paper, #F3F1EC); color: var(--kv-ink, #0C0C0D); border-radius: 16px 16px 0 0; padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); box-shadow: 0 -12px 40px -16px rgba(0,0,0,.5); font-family: var(--body-font); }
@media (min-width: 700px) { body.kv-site .kv-sheet__panel { left: 50%; right: auto; width: 520px; transform: translateX(-50%); border-radius: 16px 16px 0 0; } }
body.kv-site .kv-sheet__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
body.kv-site .kv-sheet__title { margin: 0; font-family: var(--kv-display, serif); font-size: 1.35rem; }
body.kv-site .kv-sheet__close { background: transparent; border: 0; font-size: 1.6rem; line-height: 1; padding: 4px 8px; color: var(--kv-ash, #8A867E); cursor: pointer; }
body.kv-site .kv-sheet__body .kv-ladder__opt { cursor: pointer; }
body.kv-site .kv-sheet__go { display: block; width: 100%; margin-top: 12px; padding: 18px 24px; background: #1f5c3f; color: #fff; border: 0; border-radius: 4px; font-family: var(--body-font); font-weight: 600; font-size: .9rem; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
body.kv-site .kv-sheet__go:disabled { opacity: .8; cursor: default; }
body.kv-site .kv-sheet__note { margin: 10px 0 0; text-align: center; font-size: .75rem; color: var(--kv-ash, #8A867E); }
body.kv-site.kv-sheet-open { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  body.kv-site .kv-sheet__panel { animation: kv-sheet-up .28s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes kv-sheet-up { from { transform: translateY(24px); } to { transform: none; } }
  @media (min-width: 700px) { @keyframes kv-sheet-up { from { transform: translate(-50%, 24px); } to { transform: translateX(-50%); } } }
}