/* ===========================================================
   Loja — skin "console": a mesma linguagem da home (vitrine)
   aplicada à listagem e à página de sistema. Preto · ouro · branco,
   tipografia mono, título vibrando. Escopada em html.loja-console
   (ver functions/loja-console.php), para não tocar outras páginas.
   =========================================================== */

html.loja-console {
  --lc-void: #06070c;
  --lc-surface: rgba(255,255,255,.035);
  --lc-line: rgba(255,255,255,.10);
  --lc-ink: #ffffff;
  --lc-ink-2: rgba(255,255,255,.66);
  --lc-ink-3: rgba(255,255,255,.4);
  --lc-gold: #d4af37;
  --lc-gold-2: #f3dc8e;
  --lc-mono: "Space Mono", ui-monospace, Menlo, monospace;
}

html.loja-console, html.loja-console body { background: var(--lc-void) !important; color: var(--lc-ink); }
html.loja-console .bg-white, html.loja-console .bg-surface, html.loja-console .tf-product-info-list { background: transparent !important; }

/* fundo: véu escuro + grão discreto, como o palco da vitrine */
html.loja-console body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(212,175,55,.06), transparent 45%),
    radial-gradient(100% 70% at 50% 110%, rgba(212,175,55,.04), transparent 50%),
    var(--lc-void);
}
html.loja-console .main-content, html.loja-console .tf-header, html.loja-console footer { position: relative; z-index: 1; }

/* ---------- cabeçalho da página (breadcrumb + título) ---------- */
html.loja-console .tf-breadcrumb,
html.loja-console .page-title,
html.loja-console .tf-page-title { background: transparent !important; }
html.loja-console .breadcrumb-item, html.loja-console .breadcrumb a, html.loja-console .breadcrumb span {
  font-family: var(--lc-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--lc-ink-3);
}
html.loja-console .breadcrumb a:hover { color: var(--lc-gold); }

/* título da página: letra de terminal com contorno + cópias fantasma vibrando */
html.loja-console .page-title .heading,
html.loja-console .tf-page-title .heading,
html.loja-console h1.heading,
html.loja-console .page-title .title,
html.loja-console h3.title {
  font-family: var(--lc-mono) !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .04em;
  color: #fff; -webkit-text-stroke: 2px #000; paint-order: stroke fill; position: relative;
}
html.loja-console .lc-vibra::before,
html.loja-console .lc-vibra::after {
  content: attr(data-texto); position: absolute; inset: 0; z-index: -1; -webkit-text-stroke: 0; pointer-events: none;
  animation-duration: 3.2s; animation-timing-function: steps(1,end); animation-iteration-count: infinite;
}
html.loja-console .lc-vibra::before { color: var(--lc-gold); animation-name: lc-vibra-a; }
html.loja-console .lc-vibra::after  { color: rgba(255,255,255,.72); animation-name: lc-vibra-b; }
html.loja-console .product-infor-name.lc-vibra::before { color: color-mix(in srgb, var(--lc-gold) 80%, transparent); }
html.loja-console .product-infor-name.lc-vibra::after { color: rgba(255,255,255,.5); }
@keyframes lc-vibra-a { 0%,100%{transform:translate(-1px,0)} 8%{transform:translate(1px,1px)} 17%{transform:translate(-1px,1px)} 25%{transform:translate(3px,-1px)} 33%{transform:translate(-1px,0)} 50%{transform:translate(1px,-1px)} 66%{transform:translate(-1px,-1px)} 83%{transform:translate(1px,1px)} }
@keyframes lc-vibra-b { 0%,100%{transform:translate(1px,0)} 8%{transform:translate(-1px,-1px)} 17%{transform:translate(2px,-1px)} 25%{transform:translate(-3px,1px)} 33%{transform:translate(1px,0)} 50%{transform:translate(-1px,1px)} 66%{transform:translate(1px,1px)} 83%{transform:translate(-1px,-1px)} }
@media (prefers-reduced-motion: reduce) { html.loja-console .lc-vibra::before, html.loja-console .lc-vibra::after { animation: none; } }

/* ---------- barra de filtros / ordenação ---------- */
html.loja-console .tf-shop-control, html.loja-console .wrapper-control-shop,
html.loja-console .sort-by-wrapper, html.loja-console .tf-btn-filter,
html.loja-console .nice-select, html.loja-console .bb-filter-item,
html.loja-console select, html.loja-console .form-select {
  background: var(--lc-surface) !important; color: var(--lc-ink-2) !important;
  border-color: var(--lc-line) !important; font-family: var(--lc-mono); font-size: 12px; letter-spacing: .04em;
}
html.loja-console .tf-btn-filter:hover, html.loja-console .nice-select:hover { border-color: var(--lc-gold) !important; color: var(--lc-ink) !important; }

/* ---------- cards de sistema ---------- */
html.loja-console .card-product {
  background: rgba(10,11,18,.6); border: 1px solid var(--lc-line); border-radius: 12px; overflow: hidden;
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
html.loja-console .card-product:hover { border-color: color-mix(in srgb, var(--lc-gold) 55%, transparent);
  transform: translateY(-4px); box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 0 40px -16px var(--lc-gold); }
html.loja-console .card-product_wrapper { background: #0b0c14; }
html.loja-console .card-product .product-img img { transition: transform .5s var(--lc-ease, ease); }
html.loja-console .card-product:hover .product-img img { transform: scale(1.04); }

/* o que não é de loja de sistema some: carrinho e desejos no card */
/* a barra inferior 'Adicionar ao carrinho' do card também sai — o card leva
   ao sistema, não ao carrinho */
html.loja-console .card-product .product-action_bot,
html.loja-console .card-product .card-product_btn,
html.loja-console .card-product a.tf-btn.btn-white,
html.loja-console .card-product .btn-quick-add,
html.loja-console .card-product .tf-btn-loading { display: none !important; }
html.loja-console .card-product .action-add-to-cart,
html.loja-console .card-product .action-wishlist,
html.loja-console .card-product .action-compare { display: none !important; }
/* a etiqueta "Novo" vira marcador técnico discreto */
html.loja-console .card-product .on-sale-wrap .tf-label,
html.loja-console .card-product .product-badge {
  background: rgba(212,175,55,.14) !important; color: var(--lc-gold-2) !important; border: 1px solid rgba(212,175,55,.35);
  font-family: var(--lc-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
}

/* corpo do card: categoria + nome em mono + prompt "ver sistema" */
html.loja-console .card-product_info { padding: 16px 16px 18px; }
html.loja-console .card-product_info .text-caption,
html.loja-console .card-product_info .brand,
html.loja-console .card-product_info .categories { font-family: var(--lc-mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--lc-gold); }
html.loja-console .card-product_info .name-product,
html.loja-console .card-product_info .name-product a {
  font-family: var(--lc-mono); font-weight: 700; font-size: 14px; letter-spacing: .01em; color: var(--lc-ink);
}
html.loja-console .card-product_info .name-product a:hover { color: var(--lc-gold-2); }
html.loja-console .card-product_info .price,
html.loja-console .card-product_info .price-wrap { font-family: var(--lc-mono); font-size: 12px; color: var(--lc-ink-2); letter-spacing: .04em; }
/* "ver sistema →" aparece ao passar o mouse */
html.loja-console .card-product .lc-ver { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px;
  font-family: var(--lc-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--lc-ink-3);
  opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .3s, color .3s; }
html.loja-console .card-product:hover .lc-ver { opacity: 1; transform: none; color: var(--lc-gold-2); }
html.loja-console .card-product .lc-ver--demo { color: var(--lc-gold); opacity: 1; transform: none; }

/* botão de quick-view/preview no card: pílula ouro em vez de redonda */
html.loja-console .card-product .action-quick-view a,
html.loja-console .card-product .action-preview a {
  background: rgba(6,7,12,.7); border: 1px solid rgba(212,175,55,.4); color: var(--lc-gold-2);
}
html.loja-console .card-product .action-quick-view a:hover,
html.loja-console .card-product .action-preview a:hover { background: var(--lc-gold); color: #0b0a06; }

/* ---------- página do sistema ---------- */
html.loja-console .product-info-wrapper, html.loja-console .tf-product-info-list { color: var(--lc-ink); }
html.loja-console .product-info-wrapper .product-title,
html.loja-console .tf-product-info-title h1,
html.loja-console h1.product-name,
html.loja-console .product-infor-name {
  font-family: var(--lc-mono) !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .02em;
  color: #fff; -webkit-text-stroke: 1.5px #000; paint-order: stroke fill;
}
html.loja-console .product-category, html.loja-console .tf-product-info-category a {
  font-family: var(--lc-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--lc-gold); }
html.loja-console .product-price, html.loja-console .tf-product-info-price .price,
html.loja-console .price-on-sale { font-family: var(--lc-mono); color: var(--lc-gold-2); letter-spacing: .02em; }
html.loja-console .product-sku, html.loja-console .product-description { color: var(--lc-ink-2); }

/* galeria: moldura de vidro escuro */
html.loja-console .tf-product-media-wrap img,
html.loja-console .product-images-slider img { border-radius: 12px; border: 1px solid var(--lc-line); background: #0b0c14; }

/* ações: pedir orçamento (ouro) + ver demonstração (contorno) */
html.loja-console .lc-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0 8px; }
html.loja-console .lc-actions a { display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; border-radius: 999px;
  font-family: var(--lc-mono); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; transition: all .25s; }
html.loja-console .lc-actions .lc-orcar { background: var(--lc-gold); color: #0b0a06; box-shadow: 0 16px 44px rgba(212,175,55,.3); }
html.loja-console .lc-actions .lc-orcar:hover { transform: translateY(-2px); box-shadow: 0 22px 54px rgba(212,175,55,.45); }
html.loja-console .lc-actions .lc-demo { border: 1px solid rgba(212,175,55,.5); color: var(--lc-gold-2); }
html.loja-console .lc-actions .lc-demo:hover { background: var(--lc-gold); color: #0b0a06; }
/* o fluxo de compra padrão só faz sentido quando há preço; sob consulta, escondido */
html.loja-console .product-sob-consulta .tf-sticky-atc-actions,
html.loja-console .product-sob-consulta .btn-add-to-cart,
html.loja-console .product-sob-consulta .btn-buy-now,
html.loja-sob-consulta .tf-sticky-btn-atc,
html.loja-sob-consulta .tf-sticky-atc-infos,
html.loja-sob-consulta .group-btn-product { display: none !important; }

/* abas (descrição) e produtos relacionados */
html.loja-console .widget-tabs .widget-menu-tab .item-title,
html.loja-console .tab-title, html.loja-console .nav-tab-item {
  font-family: var(--lc-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--lc-ink-3); }
html.loja-console .widget-tabs .widget-menu-tab .item-title.active,
html.loja-console .nav-tab-item.active { color: var(--lc-gold); }
html.loja-console .tf-section-title, html.loja-console .heading-section .title {
  font-family: var(--lc-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--lc-ink); }

/* o bloco de demonstração (system-demo) já existe; aqui só alinha a paleta */
html.loja-console .system-demo { border-color: var(--lc-line); }
html.loja-console .system-demo__chips li { border-color: rgba(212,175,55,.3); color: var(--lc-gold-2); }
html.loja-console .system-demo__btn.btn-fill { background: var(--lc-gold); color: #0b0a06; }


/* ===========================================================
   Fluxo de apresentação: cada card entra como um "sistema sendo
   carregado" — sobe, revela, e uma varredura ouro cruza a imagem.
   Classes aplicadas pelo loja-console.js (IntersectionObserver).
   =========================================================== */
html.loja-console .card-product { opacity: 0; transform: translateY(34px); will-change: transform, opacity; }
html.loja-console .card-product.lc-reveal { opacity: 1; transform: translateY(0);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1), border-color .3s, box-shadow .3s; }
@media (prefers-reduced-motion: reduce) { html.loja-console .card-product { opacity: 1; transform: none; } }

/* inclinação 3D sutil no hover (variáveis postas pelo JS) */
html.loja-console .card-product { transform-style: preserve-3d; }
html.loja-console .card-product.lc-reveal.lc-tilt {
  transform: perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-4px);
  transition: transform .12s linear, border-color .3s, box-shadow .3s; }

/* varredura ouro que cruza a imagem na revelação e repete no hover */
html.loja-console .card-product_wrapper { position: relative; overflow: hidden; }
html.loja-console .card-product_wrapper::after {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(243,220,142,.5) 50%, transparent 62%);
  transform: translateX(-120%); }
html.loja-console .card-product.lc-reveal .card-product_wrapper::after { animation: lc-sweep 1.1s ease .15s 1; }
html.loja-console .card-product:hover .card-product_wrapper::after { animation: lc-sweep .9s ease 1; }
@keyframes lc-sweep { 0%{opacity:0;transform:translateX(-120%)} 20%{opacity:1} 100%{opacity:0;transform:translateX(120%)} }

/* linha fina ouro que marca o topo do card ativo */
html.loja-console .card-product::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 5;
  background: linear-gradient(90deg, transparent, var(--lc-gold), transparent);
  transform: scaleX(0); transform-origin: center; transition: transform .45s cubic-bezier(.2,.7,.2,1); }
html.loja-console .card-product:hover::before { transform: scaleX(1); }

/* barra de filtros e título entram juntos */
html.loja-console .tf-shop-control, html.loja-console .wrapper-control-shop { opacity: 0; transform: translateY(16px); animation: lc-rise .7s ease .1s forwards; }
@keyframes lc-rise { to { opacity: 1; transform: none; } }