/* ═══════════════════════════════════════════════════════════════════
   PELE DA LOJA ROBOROCK · roborock.ecletiq.com.br
   Sissi, 24/08/2026 · martelo do Paul

   POR QUE ESTE ARQUIVO EXISTE
   O Paul: "o cliente não sair de um layout totalmente customizado da
   Roborock e ir pra uma loja, ele vai achar até estranho e vai ficar com
   medo". Está certo, e é argumento de conversão, não de gosto.

   Carregado por resources/views/.../head.blade.php, que já busca
   css/<código-da-loja>.css e cai no shop.css se este arquivo sumir.
   Vale em TODA página: home, categoria, produto, carrinho e checkout —
   porque o middleware IdentifyStoreByHost entrega a loja em todas.

   AS CORES SÃO MEDIDAS, NÃO ESCOLHIDAS
   #EA0029 saiu do SVG do próprio logo da Roborock (us.roborock.com).
   Os outros dois tons existem por contraste medido:
     #EA0029  o oficial. 4,64:1 no branco — passa raspando;
                          3,91:1 no escuro — NÃO passa.
     #C4001F  6,24:1 no branco  → é este que carrega TEXTO PEQUENO.
     #FF3B52  5,18:1 no escuro  → herói, rodapé, faixas escuras.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --rr-marca:      #EA0029;   /* selo, botões, tarjas */
  --rr-marca-txt:  #C4001F;   /* texto pequeno em fundo claro */
  --rr-marca-luz:  #FF3B52;   /* qualquer coisa em fundo escuro */
  --rr-tinta:      #161616;   /* o preto da Roborock, do CSS deles */
  --rr-chao:       #F4F4F4;   /* o cinza-claro deles */
  --rr-linha:      #E2E3E1;
}

/* ── o que a marca pinta ───────────────────────────────────────────
   ⚠️ Só o que é ACENTO. Estrutura, grade e espaçamento continuam os da
   Ecletiq — a loja é a mesma por baixo, e refazer layout por marca é o
   caminho das 100 manutenções que a casa não quer. */

/* preço, o elemento mais olhado da página de produto */
.price, .product-price, .preco, [class*="price"] .amount {
  color: var(--rr-marca-txt);
}

/* botões de ação: comprar, adicionar ao carrinho, finalizar */
.btn-primary, .button-primary, .add-to-cart, .btn-cart,
button[type="submit"].primary, .checkout-button, .btn-checkout {
  background-color: var(--rr-marca) !important;
  border-color: var(--rr-marca) !important;
  color: #fff !important;
}
.btn-primary:hover, .button-primary:hover, .add-to-cart:hover,
.btn-cart:hover, .checkout-button:hover, .btn-checkout:hover {
  background-color: var(--rr-marca-txt) !important;
  border-color: var(--rr-marca-txt) !important;
}

/* links e realces de texto */
a:hover, .link-primary, .text-primary { color: var(--rr-marca-txt); }

/* selos: desconto, frete grátis, PIX */
.badge-discount, .tag-desconto, .selo, .badge-primary {
  background-color: var(--rr-marca);
  color: #fff;
}

/* o passo ativo do checkout — onde a pessoa está */
.checkout-step.active, .step.active, .is-current {
  border-color: var(--rr-marca);
  color: var(--rr-marca-txt);
}

/* foco de teclado: acessibilidade não muda de cor por marca, mas muda de tom */
:focus-visible { outline: 2px solid var(--rr-marca) !important; outline-offset: 3px; }

/* ── a barra de topo ────────────────────────────────────────────── */
.barra-topo, .top-bar, .header-top {
  background: var(--rr-tinta);
  color: #fff;
}

/* ── modo escuro do sistema ────────────────────────────────────────
   O oficial #EA0029 dá 3,91:1 sobre fundo escuro e não passa em texto
   pequeno. Quem estiver no escuro recebe o tom levantado. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --rr-marca-txt: var(--rr-marca-luz);
  }
}
:root[data-theme="dark"] { --rr-marca-txt: var(--rr-marca-luz); }

/* ── movimento ─────────────────────────────────────────────────────
   Nada aqui anima sozinho. A home tem os vídeos; a página de produto e o
   checkout são lugar de decidir e pagar, e ali movimento atrapalha. */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}