/* ==========================================================================
   Design System — Lobo Motoparts
   Baseado no DESIGN.md. Tokens de cor, tipografia, espacamento, sombras,
   raios e breakpoints. Nao alterar sem atualizar o DESIGN.md.
   ========================================================================== */

:root {
  /* Cores principais */
  --lobo-primary: #1a1a1a;
  --lobo-secondary: #d4af37;
  /* Dourado para texto: #d4af37 mede ~2,1:1 sobre branco; este atinge AA. */
  --lobo-secondary-text: #8a6914;
  --lobo-accent: #c41e3a;

  /* Superficies */
  --lobo-bg: #ffffff;
  --lobo-bg-alt: #f8f9fa;
  --lobo-text: #212529;
  --lobo-text-muted: #6c757d;

  /* Bordas */
  --lobo-border: #dee2e6;

  /* Estados */
  --lobo-success: #28a745;
  /* O verde de estado tem 3,1:1 sobre branco, abaixo do mínimo da WCAG para
     texto pequeno. Estes dois são o par de leitura da pílula "Economize". */
  --lobo-success-bg: #e8f4ec;
  --lobo-success-ink: #146c2e;
  --lobo-error: #dc3545;
  --lobo-warning: #ffc107;
  --lobo-info: #0dcaf0;

  /* CTA */
  --lobo-cta: #c41e3a;
  --lobo-cta-hover: #a01730;
  --lobo-cta-active: #801426;

  /* Tipografia — familia */
  --lobo-font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    sans-serif;

  /* Tipografia — tamanhos */
  --lobo-text-xs: 0.75rem;
  --lobo-text-sm: 0.875rem;
  --lobo-text-base: 1rem;
  --lobo-text-lg: 1.125rem;
  --lobo-text-xl: 1.25rem;
  --lobo-text-2xl: 1.5rem;
  --lobo-text-3xl: 1.875rem;
  --lobo-text-4xl: 2.25rem;
  --lobo-text-5xl: 2.5rem;

  /* Tipografia — pesos */
  --lobo-font-regular: 400;
  --lobo-font-medium: 500;
  --lobo-font-semibold: 600;
  --lobo-font-bold: 700;

  /* Line-height */
  --lobo-leading-tight: 1.25;
  --lobo-leading-normal: 1.5;
  --lobo-leading-relaxed: 1.75;

  /* Espacamento (escala 4px) */
  --lobo-space-1: 0.25rem;
  --lobo-space-2: 0.5rem;
  --lobo-space-3: 0.75rem;
  --lobo-space-4: 1rem;
  --lobo-space-5: 1.25rem;
  --lobo-space-6: 1.5rem;
  --lobo-space-8: 2rem;
  --lobo-space-10: 2.5rem;
  --lobo-space-12: 3rem;
  --lobo-space-16: 4rem;

  /* Raios */
  --lobo-radius-sm: 0.25rem;
  --lobo-radius-md: 0.5rem;
  --lobo-radius-lg: 0.75rem;
  --lobo-radius-xl: 1rem;
  --lobo-radius-full: 9999px;

  /* Sombras */
  --lobo-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --lobo-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --lobo-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  --lobo-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);

  /* Breakpoints (referencia; usar em media queries com valores fixos) */
  --lobo-breakpoint-sm: 640px;
  --lobo-breakpoint-md: 768px;
  --lobo-breakpoint-lg: 1024px;
  --lobo-breakpoint-xl: 1280px;
  --lobo-breakpoint-2xl: 1536px;

  /* Transicoes */
  --lobo-transition-fast: 0.15s ease;
  --lobo-transition-base: 0.2s ease;
  --lobo-transition-slow: 0.3s ease;
  --lobo-motion-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --lobo-motion-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --lobo-motion-press: 160ms;
  --lobo-motion-panel: 160ms;
  --lobo-motion-drawer: 200ms;
}

/* ==========================================================================
   Aplicacao base dos tokens
   ========================================================================== */

body {
  font-family: var(--lobo-font-family) !important;
  color: var(--lobo-text);
  background-color: var(--lobo-bg);
  line-height: var(--lobo-leading-normal);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--lobo-font-family) !important;
  color: var(--lobo-primary);
  font-weight: var(--lobo-font-bold);
  line-height: var(--lobo-leading-tight);
}

h1 { font-size: var(--lobo-text-5xl); }
h2 { font-size: var(--lobo-text-3xl); }
h3 { font-size: var(--lobo-text-2xl); font-weight: var(--lobo-font-semibold); }
h4 { font-size: var(--lobo-text-xl); font-weight: var(--lobo-font-semibold); }
h5 { font-size: var(--lobo-text-lg); font-weight: var(--lobo-font-semibold); }
h6 { font-size: var(--lobo-text-base); font-weight: var(--lobo-font-semibold); }

a {
  color: var(--lobo-accent);
  transition: color var(--lobo-transition-fast);
}

a:hover {
  color: var(--lobo-cta-hover);
}

/* ==========================================================================
   Componentes — Botoes
   ========================================================================== */

.lobo-btn-primary {
  display: inline-block;
  background: var(--lobo-cta);
  color: #ffffff;
  padding: var(--lobo-space-3) var(--lobo-space-6);
  border: none;
  border-radius: var(--lobo-radius-md);
  font-family: var(--lobo-font-family);
  font-size: var(--lobo-text-base);
  font-weight: var(--lobo-font-semibold);
  line-height: var(--lobo-leading-normal);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--lobo-transition-base);
}

.lobo-btn-primary:hover {
  background: var(--lobo-cta-hover);
  color: #ffffff;
}

.lobo-btn-primary:active {
  background: var(--lobo-cta-active);
}

.lobo-btn-secondary {
  display: inline-block;
  background: transparent;
  color: var(--lobo-text);
  padding: var(--lobo-space-3) var(--lobo-space-6);
  border: 1px solid var(--lobo-border);
  border-radius: var(--lobo-radius-md);
  font-family: var(--lobo-font-family);
  font-size: var(--lobo-text-base);
  font-weight: var(--lobo-font-medium);
  line-height: var(--lobo-leading-normal);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--lobo-transition-base),
    border-color var(--lobo-transition-base);
}

.lobo-btn-secondary:hover {
  background: var(--lobo-bg-alt);
  border-color: var(--lobo-text-muted);
}

/* Feedback fisico somente nos CTAs principais e habilitados. */
.lobo-btn-primary:not(:disabled):not(.disabled),
.lobo-btn-secondary:not(:disabled):not(.disabled) {
  transition:
    transform var(--lobo-motion-press) var(--lobo-motion-ease-out),
    background-color var(--lobo-transition-base);
}

.single_add_to_cart_button:not(:disabled):not(.disabled),
.checkout-button:not(:disabled):not(.disabled) {
  transition:
    transform var(--lobo-motion-press) var(--lobo-motion-ease-out),
    background-color var(--lobo-transition-base) !important;
}

#place_order:not(:disabled):not(.disabled) {
  transition:
    transform var(--lobo-motion-press) var(--lobo-motion-ease-out),
    background-color var(--lobo-transition-base) !important;
}

.lobo-btn-primary:not(:disabled):not(.disabled):active,
.lobo-btn-secondary:not(:disabled):not(.disabled):active,
.single_add_to_cart_button:not(:disabled):not(.disabled):active,
.checkout-button:not(:disabled):not(.disabled):active {
  transform: scale(0.97);
}

#place_order:not(:disabled):not(.disabled):active {
  transform: scale(0.97);
}

/* ==========================================================================
   Componentes — Badges
   ========================================================================== */

.lobo-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--lobo-space-1) var(--lobo-space-2);
  border-radius: var(--lobo-radius-full);
  font-size: var(--lobo-text-xs);
  font-weight: var(--lobo-font-medium);
  line-height: 1;
}

.lobo-badge-success {
  background: var(--lobo-success);
  color: #ffffff;
}

.lobo-badge-error {
  background: var(--lobo-error);
  color: #ffffff;
}

.lobo-badge-warning {
  background: var(--lobo-warning);
  color: var(--lobo-primary);
}

/* ==========================================================================
   Utilitarios
   ========================================================================== */

.lobo-text-muted { color: var(--lobo-text-muted); }
.lobo-bg-alt { background-color: var(--lobo-bg-alt); }

/* ---------- P01: bloco de preço PIX (card e PDP) ----------
   Linha secundária abaixo do preço principal do WooCommerce. Não compete com
   ele: menor, sem negrito no rótulo, sem riscado. O riscado é do Woo e só
   aparece em promoção real. */
.lobo-pix {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: var(--lobo-space-1);
  font-size: var(--lobo-text-sm);
  line-height: 1.35;
  color: var(--lobo-text-muted);
}

/* O valor do PIX é a segunda leitura do card, depois do preço cheio: ganha a
   cor de destaque para separar as duas linhas sem precisar de tamanho maior. */
.lobo-pix__valor {
  color: var(--lobo-cta);
  font-weight: var(--lobo-font-semibold);
}

.lobo-pix__valor strong {
  color: inherit;
  font-weight: var(--lobo-font-bold);
}

.lobo-pix__valor .amount {
  white-space: nowrap;
}

/* Quanto se ganha, em reais. Fica numa pílula porque é o único ganho concreto
   do card e some no meio das outras linhas se for só texto. */
.lobo-pix__economia {
  align-self: flex-start;
  margin-top: 2px;
  padding: 1px var(--lobo-space-2);
  border-radius: var(--lobo-radius-sm);
  background: var(--lobo-success-bg);
  color: var(--lobo-success-ink);
  font-size: var(--lobo-text-xs);
  font-weight: var(--lobo-font-semibold);
  white-space: nowrap;
}

.lobo-pix__parc {
  margin-top: var(--lobo-space-1);
  font-size: var(--lobo-text-xs);
}

.lobo-pix__parc b {
  color: var(--lobo-text);
  font-weight: var(--lobo-font-semibold);
}

.lobo-pix__ate {
  white-space: nowrap;
}

/* Rótulo colado no preço cheio do WooCommerce. Nunca compete com o número:
   tamanho de legenda e cor apagada. */
.lobo-preco__meio {
  font-size: var(--lobo-text-xs);
  font-weight: var(--lobo-font-regular);
  color: var(--lobo-text-muted);
  letter-spacing: 0;
  white-space: nowrap;
}

/* ---------- T02: ícones do sistema nos títulos do Contato ----------
   A página usava emoji (📱 ✉️ 📍) nos <h3>. Emoji renderiza diferente em cada
   sistema, entra na leitura de tela como palavra ("telefone celular") e não
   acompanha a cor do tema. Aqui o ícone é decorativo puro: sai do conteúdo e
   vira `mask-image`, que herda `currentColor` e some para o leitor de tela. */
.lobo-h3-icone::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.4em;
  vertical-align: -0.12em;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.lobo-h3-icone--whatsapp::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12.04 2c-5.46 0-9.91 4.45-9.91 9.91 0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38c1.45.79 3.08 1.21 4.74 1.21 5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.816 9.816 0 0 0 12.04 2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12.04 2c-5.46 0-9.91 4.45-9.91 9.91 0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38c1.45.79 3.08 1.21 4.74 1.21 5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.816 9.816 0 0 0 12.04 2z'/%3E%3C/svg%3E");
}

.lobo-h3-icone--email::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 6h18v12H3z'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 6h18v12H3z'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
}

.lobo-h3-icone--local::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E");
}

/* ---------- X01: página "Em breve" na paleta da loja ----------
   O pattern padrão do WooCommerce vem com fundo roxo (#7f54b3 e vizinhos), que
   não é nossa cor e é a única tela que o visitante vê hoje. */
.wp-block-woocommerce-coming-soon .coming-soon-cover,
.wp-block-woocommerce-coming-soon .wp-block-cover {
  background-color: var(--lobo-primary) !important;
  min-height: 60vh;
}

.wp-block-woocommerce-coming-soon .wp-block-cover__background,
.wp-block-woocommerce-coming-soon .has-background-dim::before {
  background-color: var(--lobo-primary) !important;
  opacity: 1 !important;
}

.woocommerce-coming-soon-banner {
  font-family: var(--lobo-font-family) !important;
  color: #ffffff !important;
  max-width: 22ch;
  margin-inline: auto;
}

.lobo-breve__texto {
  max-width: 46ch;
  margin: var(--lobo-space-4) auto 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--lobo-text-lg);
  line-height: 1.5;
  text-align: center;
}

.lobo-breve__acoes {
  margin-top: var(--lobo-space-6);
  text-align: center;
}

.lobo-breve__whats {
  display: inline-block;
  padding: var(--lobo-space-3) var(--lobo-space-6);
  background: var(--lobo-secondary);
  color: #000000;
  font-weight: var(--lobo-font-bold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-radius: var(--lobo-radius-md);
  text-decoration: none;
  min-height: 44px;
}

.lobo-breve__whats:hover {
  background: #ffffff;
  color: #000000;
}

/* Os ícones sociais e o botão "Acessar" do pattern vinham calibrados para o
   fundo roxo do WooCommerce. Com o fundo preto da marca eles somem, então
   passam a ser claros. */
.wp-block-woocommerce-coming-soon .wp-block-social-links .wp-social-link a {
  color: rgba(255, 255, 255, 0.75) !important;
  fill: rgba(255, 255, 255, 0.75) !important;
}

.wp-block-woocommerce-coming-soon .wp-block-social-links .wp-social-link a:hover {
  color: var(--lobo-secondary) !important;
  fill: var(--lobo-secondary) !important;
}

.wp-block-woocommerce-coming-soon .wp-block-site-title a,
.wp-block-woocommerce-coming-soon .wp-block-site-title {
  color: #ffffff !important;
}