/* =====================================================================
 * loja-gromuse.css — Restyle da vitrine inspirado no layout "Gromuse".
 * Opção B: mantém a COR DE MARCA atual (--color-brand) e adota os
 * PADRÕES de layout/UX da referência (header em barra, busca em pílula,
 * chips de categoria, hero). Overlay aditivo: carregado DEPOIS de
 * styles.css, portanto reversível (basta remover o <link>).
 *
 * Escopo: apenas catalogo.html (único que linka styles.css).
 * Fases entregues aqui: 0 (tokens) + 1 (header + categorias) + hero provisório.
 * ===================================================================== */

/* ---------- Fase 0 · Tokens de layout do storefront ---------- */
:root {
  --loja-radius: 16px;
  --loja-radius-pill: 999px;
  --loja-shadow-sm: 0 1px 2px rgba(24, 16, 20, .06), 0 6px 18px rgba(24, 16, 20, .06);
  --loja-shadow-md: 0 10px 30px rgba(24, 16, 20, .12);
  --loja-gap: 16px;
  --loja-maxw: 1200px;

  /* Chrome usa a cor de marca (agora azul/ciano — ver override abaixo) */
  --loja-chrome: var(--color-brand);
  --loja-chrome-hover: var(--color-brand-hover);
  --loja-on-chrome: #ffffff;

  /* Superfícies neutras */
  --loja-surface: var(--color-bg, #fff);
  --loja-surface-2: #f5f8fb;
  --loja-line: var(--color-border, #e6e1e3);
  --loja-ink: var(--color-text, #1a1a1a);
  --loja-ink-soft: var(--color-text-muted, #737373);
}

/* ===== Marca azul/ciano do storefront (casa com o banner da fábrica) =====
   Redefine os tokens base --editorial-pink* — como --color-brand,
   --sanpil-primary e --sanpil-accent-pink derivam deles, todo o chrome da
   loja vira azul. Escopado: só as páginas que carregam este overlay
   (catálogo, carrinho, checkout); o admin continua com a paleta original. */
:root {
  --editorial-pink: #1187c6;        /* azul/ciano (acento do banner) */
  --editorial-pink-light: #43a9e0;
  --editorial-pink-dark: #0d6a9c;
  --sanpil-primary-50: #eef7fc;
  --sanpil-primary-100: #d5ebf8;
}

html.theme-dark {
  /* Tom frio para casar com os cards escuros do tema */
  --loja-surface-2: #1c2128;
  --sanpil-primary-50: rgba(17, 135, 198, 0.16);
  --sanpil-primary-100: rgba(17, 135, 198, 0.28);
}

/* ---------- Fase 1 · Faixa promocional fina (topo) ---------- */
.loja-topstrip {
  background: linear-gradient(90deg, var(--loja-chrome), var(--loja-chrome-hover));
  color: var(--loja-on-chrome);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  padding: 7px 16px;
  letter-spacing: .01em;
}
.loja-topstrip i { margin-right: 6px; opacity: .9; }
.loja-topstrip strong { font-weight: 800; }

/* ---------- Fase 1 · Cabeçalho ---------- */
.header-sticky-wrapper { position: sticky; top: 0; z-index: 90; }

.main-header {
  background-color: var(--loja-surface);
  box-shadow: var(--loja-shadow-sm);
  border-bottom: 1px solid var(--loja-line);
}

/* Reduz a altura exagerada do header antigo */
.middle-header { height: auto; padding: 14px 0; }
.middle-header .container { gap: 20px; }
/* Logomarca em destaque (marca é o principal ancoradouro visual da loja) */
.middle-header { padding: 16px 0; }
.logo {
  height: 104px;
  flex: 0 0 auto;
  padding: 6px 14px;
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--loja-shadow-sm);
}
.logo-image { height: 100%; width: auto; }
html.theme-dark .logo { background: #fff; } /* fundo claro fixo: logo tem arte sobre branco */

/* Busca em pílula única, larga e central (padrão Gromuse) */
.search-bar { max-width: 620px; }
.search-container {
  background: var(--loja-surface-2);
  border: 1.5px solid var(--loja-line);
  border-radius: var(--loja-radius-pill);
  padding: 4px 4px 4px 18px;
  align-items: center;
  transition: border-color .2s, box-shadow .2s;
}
.search-container:focus-within {
  border-color: var(--loja-chrome);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--loja-chrome) 15%, transparent);
}
.search-bar input {
  border: none;
  background: transparent;
  border-radius: 0;
  padding: 10px 6px;
  color: var(--loja-ink);
}
.search-bar input:focus { outline: none; }
.search-button {
  background-color: var(--loja-chrome);
  border-radius: var(--loja-radius-pill);
  padding: 0;
  width: 42px;
  height: 42px;
  justify-content: center;
  flex: 0 0 auto;
  transition: background-color .2s, transform .1s;
}
.search-button:hover { background-color: var(--loja-chrome-hover); transform: scale(1.05); }
.search-button span { display: none; }

/* Ações à direita: carrinho circular + links discretos */
.header-actions { gap: 8px; }
.cart-link {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: var(--loja-radius-pill);
  background: var(--loja-surface-2);
  border: 1.5px solid var(--loja-line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--loja-ink);
  transition: border-color .2s, color .2s;
}
.cart-link:hover { border-color: var(--loja-chrome); color: var(--loja-chrome); }
.cart-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--loja-radius-pill);
  background: var(--loja-chrome);
  color: var(--loja-on-chrome);
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px var(--loja-surface);
}
.admin-link {
  border-radius: var(--loja-radius-pill);
  padding: 9px 14px;
  font-size: 13.5px;
  border: 1.5px solid var(--loja-line);
  color: var(--loja-ink-soft);
  background: var(--loja-surface);
}
.admin-link:hover { border-color: var(--loja-chrome); color: var(--loja-chrome); background: var(--loja-surface); }

/* ---------- Fase 1 · Faixa de categorias em chips ---------- */
.categories-nav {
  background-color: var(--loja-surface);
  border-top: none;
  border-bottom: 1px solid var(--loja-line);
  padding: 12px 0;
}
.categories { gap: 10px; }
.category-btn {
  padding: 9px 18px;
  border: 1.5px solid var(--loja-line);
  border-radius: var(--loja-radius-pill);
  background: var(--loja-surface);
  color: var(--loja-ink-soft);
  font-weight: 600;
  font-size: 13.5px;
  transition: all .18s ease;
}
.category-btn:hover {
  border-color: var(--loja-chrome);
  color: var(--loja-chrome);
  transform: translateY(-1px);
}
.category-btn.active {
  background-color: var(--loja-chrome);
  border-color: var(--loja-chrome);
  color: var(--loja-on-chrome);
  box-shadow: var(--loja-shadow-sm);
}

/* O <body> do catálogo é flex-column: sem width:100%, blocos com max-width
   encolhem para a largura do conteúdo (desalinhados). Fixa todos na mesma
   largura/centro que o conteúdo principal. */
.loja-hero,
.loja-offers,
.loja-section-head,
body main.container { width: 100%; }

/* ---------- Hero · banner em imagem cheia ---------- */
.loja-hero {
  max-width: var(--loja-maxw);
  margin: 22px auto 8px;
  padding: 0 20px;
}
.loja-hero__banner {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  box-shadow: var(--loja-shadow-md);
  text-decoration: none;
}
.loja-hero__img {
  display: block;
  width: 100%;
  height: auto;      /* preserva a proporção do banner (texto/CTA embutidos) */
}

/* Fallback provisório (só aparece se a imagem não existir ainda) */
.loja-hero__fallback { display: none; }
.loja-hero--sem-img .loja-hero__banner {
  background: linear-gradient(135deg, #0f172a, #1e293b 55%, var(--loja-chrome));
  min-height: 240px;
}
.loja-hero--sem-img .loja-hero__fallback {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 40px 44px;
  color: #fff;
}
.loja-hero__tag {
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 11px;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: var(--loja-radius-pill);
  background: rgba(255, 255, 255, .18);
}
.loja-hero__title {
  font-size: clamp(24px, 3.2vw, 38px);
  line-height: 1.08;
  letter-spacing: -.02em;
  font-weight: 800;
  text-wrap: balance;
  color: #fff;
}
.loja-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--loja-chrome);
  color: var(--loja-on-chrome);
  font-weight: 800;
  font-size: 15px;
  padding: 12px 24px;
  border-radius: var(--loja-radius-pill);
  box-shadow: var(--loja-shadow-sm);
}

/* ---------- Fase 2 · Cards de oferta (linha estilo Gromuse) ---------- */
/* Aposenta as barras laterais fixas: o conteúdo passa a ocupar largura total
   e as ofertas viram uma linha de cards no fluxo (padrão Gromuse). */
.page-sidebar { display: none !important; }
body { padding-left: 0 !important; padding-right: 0 !important; }
/* `body` eleva a especificidade acima do `main.container { max-width:none !important }`
   definido no <style> inline do catalogo.html (que aparece depois deste arquivo). */
body main.container { max-width: var(--loja-maxw) !important; margin: 0 auto !important; }

.loja-offers {
  max-width: var(--loja-maxw);
  margin: 22px auto 0;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--loja-gap);
}
.loja-offer {
  position: relative;
  overflow: hidden;
  border-radius: var(--loja-radius);
  padding: 18px 16px 16px;
  min-height: 120px;
  color: #fff;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: var(--loja-shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease;
}
.loja-offer:hover { transform: translateY(-3px); box-shadow: var(--loja-shadow-md); }
.loja-offer__label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .95;
}
.loja-offer__highlight { font-size: 26px; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; }
.loja-offer__desc { font-size: 12.5px; line-height: 1.3; opacity: .92; max-width: 18ch; }
.loja-offer__icon {
  position: absolute;
  right: 12px;
  bottom: 10px;
  font-size: 40px;
  line-height: 1;
  opacity: .95;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .25));
}
.loja-offer--orange { background: linear-gradient(150deg, #fb923c, #ea580c); }
.loja-offer--green  { background: linear-gradient(150deg, #34d399, #15803d); }
.loja-offer--blue   { background: linear-gradient(150deg, #60a5fa, #1d4ed8); }
.loja-offer--roxo   { background: linear-gradient(150deg, #a78bfa, #6d28d9); }

/* Título de seção acima da grade */
.loja-section-head {
  max-width: var(--loja-maxw);
  margin: 30px auto 4px;
  padding: 0 20px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.loja-section-head h2 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--loja-ink);
  margin: 0;
}
.loja-section-head span { font-size: 13px; color: var(--loja-ink-soft); }

/* ---------- Fase 3 · Card de produto (estilo Gromuse) ---------- */
.produto {
  border: 1px solid var(--loja-line);
  border-radius: var(--loja-radius);
  box-shadow: var(--loja-shadow-sm);
}
.produto:hover { box-shadow: var(--loja-shadow-md); }

/* Imagem preenche 100% do card (cover, sem padding). Exclui os cards de
   placa (desenho técnico/ISO), que têm layout e proporção próprios. */
.produto__imagem-wrap:not(.produto__imagem-wrap--placa) {
  background: var(--loja-surface-2);
  height: 230px;
  padding: 0;
}
.produto__imagem:not(.produto__imagem--iso):not(.produto__imagem--placa) {
  object-fit: cover;
  object-position: var(--produto-img-pos, 50% 50%);
}

.produto__info { padding: 16px 16px 18px; gap: 2px; }
.produto__titulo {
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
  line-height: 1.3;
}
.produto__precos { margin-bottom: 6px; gap: 8px; align-items: center; }
.produto__preco-antigo { font-size: 12px; }
.produto__desconto {
  font-size: 11px;
  font-weight: 800;
  background: var(--color-success-bg, #dcfce7);
  color: var(--color-success);
  padding: 2px 7px;
  border-radius: var(--loja-radius-pill);
}

/* Preço com centavos sobrescritos (padrão Gromuse) */
.produto__preco-atual { display: flex; align-items: flex-start; gap: 2px; line-height: 1; margin-bottom: 4px; }
.produto__preco-moeda { font-size: 15px; font-weight: 800; align-self: flex-start; margin-top: 3px; }
.produto__preco-int { font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.produto__preco-cent { font-size: 15px; font-weight: 800; margin-top: 2px; }

.produto__parcelado { font-size: 12px; margin-bottom: 10px; }

/* Chips de meta (estoque, cor, frete) */
.produto__tags-row { gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.produto__estoque, .produto__cor, .produto__tag {
  font-size: 11px;
  font-weight: 600;
  color: var(--loja-ink-soft);
  background: var(--loja-surface-2);
  border: 1px solid var(--loja-line);
  padding: 3px 9px;
  border-radius: var(--loja-radius-pill);
}
.produto__frete-gratis {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-success);
  background: var(--color-success-bg, #dcfce7);
  padding: 3px 9px;
  border-radius: var(--loja-radius-pill);
}

/* Botão de carrinho — pílula (mantém verde: ação positiva) */
.produto__botao {
  margin-top: auto;
  border-radius: var(--loja-radius-pill);
  padding: 12px;
  font-size: 14.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background .2s ease, transform .12s ease;
}
.produto__botao:hover { transform: translateY(-1px); }
.produto__indisponivel {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--loja-ink-soft);
  background: var(--loja-surface-2);
  border: 1px solid var(--loja-line);
  padding: 10px;
  border-radius: var(--loja-radius-pill);
  justify-content: center;
}

/* ---------- Fase 5 · Carrinho & Checkout (mesma linguagem visual) ---------- */
/* Reaproveita o chrome do header (logo/pilulas) ja definido acima ao linkar
   este overlay em carrinho.html e checkout.html. Aqui so refinamentos
   especificos dessas paginas — conservador no checkout (fluxo de pagamento). */

/* Botoes primarios em pilula (mantem a cor semantica de cada um) */
.cart-primary,
.cart-continuar { border-radius: var(--loja-radius-pill); }
.cart-primary { box-shadow: var(--loja-shadow-sm); transition: transform .12s ease, filter .2s ease; }
.cart-primary:hover { transform: translateY(-1px); }
.cart-clear { border-radius: var(--loja-radius-pill); border-color: var(--loja-line); }

/* Itens e painel do carrinho com a mesma familia de raio/linha/sombra */
.cart-item { border-color: var(--loja-line); border-radius: var(--loja-radius); }
.cart-item img { background: var(--loja-surface-2); }
.quantity-control { border-radius: var(--loja-radius-pill); border-color: var(--loja-line); }
.cart-items,
.cart-summary { box-shadow: var(--loja-shadow-md); border-radius: var(--loja-radius); }

/* Checkout: apenas coesao de raio nos botoes principais (sem tocar no form) */
.btn-finalizar,
.btn-pix-gerar,
.btn-pagar-cartao,
.btn-copy-pix { border-radius: var(--loja-radius-pill) !important; }

/* ---------- Responsivo ---------- */
@media (max-width: 980px) { .loja-offers { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .loja-offers { grid-template-columns: 1fr; } }
@media (max-width: 860px) {
  .loja-hero__card { grid-template-columns: 1fr; }
  .loja-hero__art { min-height: 150px; order: -1; }
  .loja-hero__body { padding: 26px 24px 30px; }
  .search-bar { order: 3; max-width: 100%; flex-basis: 100%; }
  .middle-header .container { flex-wrap: wrap; }
  .logo { height: 76px; }
}