/**
 * LUOR — Vitrine · Card de produto (estilos do componente único)
 * @modulo   ecommerce
 * @tela     site_produto_card
 * @build    8
 * @data     25/10/2026
 * @tipo     MELHORIA
 * @desc     Build 8 (25/10): o selo da aplicação no carro escolhido (`.pn-apl`, F7 — *Escolha seu carro*): **Serve** (verde) e
 *           **Confirme** (âmbar), com a aplicação que o nome da peça diz. Parti da b7 do zip das 09:37 de 25/10.
 * @desc     Build 7 (29/09): o botão *Adicionar ao pedido* do card (`.pn-add`, F5.4), o selo *Parte em estoque* (`.pn-estq-parcial`) e o
 *           balão que confirma o que entrou no pedido (`.pn-pedido-aviso`) e o número de peças no *Meu pedido* do topo (`.ico-num`) — com os
 *           tokens do modelo da loja.
 */
.pn-prodgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:14px; margin-top:16px; }

.pn-prodcard{ position:relative; background:var(--card,#fff); border:1px solid var(--line,#e9e9e6); border-radius:var(--radius,14px); box-shadow:var(--shadow-sm,0 1px 2px rgba(20,24,28,.04),0 3px 10px rgba(20,24,28,.05)); padding:12px; display:flex; flex-direction:column; transition:transform .15s, box-shadow .15s, border-color .15s; }
.pn-prodcard:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md,0 14px 34px rgba(20,24,28,.12)); border-color:var(--brand,#ffb400); }
.pn-prodcard .pn-thumb{ height:150px; border-radius:12px; overflow:hidden; background:#fff; border:1px solid var(--line,#e9e9e6); display:flex; align-items:center; justify-content:center; }
.pn-prodcard .pn-thumb img{ width:100%; height:100%; object-fit:contain; }
.pn-prodcard .pn-title{ margin-top:10px; font-size:12.5px; font-weight:600; color:var(--ink-soft,#3b424a); line-height:1.25; min-height:34px; overflow:hidden; }
.pn-prodcard .pn-fab{ font-size:11px; font-weight:700; color:var(--ink,#15181c); text-transform:uppercase; letter-spacing:.02em; margin-top:6px; }
.pn-prodcard .pn-sku{ font-size:11px; color:var(--muted,#737b86); margin-top:2px; }
.pn-prodcard .pn-price{ font-family:var(--fdisp,'Archivo',system-ui,sans-serif); font-weight:900; font-size:18px; color:var(--ink,#15181c); margin-top:auto; padding-top:8px; }
.pn-prodcard .pn-btn{ margin-top:10px; display:block; text-align:center; background:var(--brand,#ffb400); color:var(--brand-ink,#1c1304); font-weight:800; padding:9px 12px; border-radius:10px; text-decoration:none; }
.pn-prodcard .pn-btn:hover{ background:var(--brand-deep,#f59e00); }

/* nos trilhos horizontais da home, o card ganha largura fixa pro scroll-snap */
.rail-inner .pn-prodcard{ width:230px; min-width:230px; scroll-snap-align:start; }

/* o preço de cada canal (D4/D23): o da loja em destaque, o do marketplace embaixo. Numa lista em que alguma peça tem
   marketplace, todas reservam a mesma altura — o preço da loja fica na mesma linha em todos os cards. */
.pn-prodcard .pn-precos{ margin-top:auto; padding-top:8px; }
.pn-prodcard .pn-precos .pn-price{ margin-top:0; padding-top:0; }
:is(.rail-inner, .pn-prodgrid, .abas-grid):has(.pn-mkt) .pn-precos{ min-height:64px; }
:is(.rail-inner, .pn-prodgrid, .abas-grid):has(.pn-de) .pn-precos{ padding-top:24px; }
:is(.rail-inner, .pn-prodgrid, .abas-grid):has(.pn-de) .pn-precos:has(.pn-de){ padding-top:8px; }
.pn-prodcard .pn-onde{ font-size:11.5px; color:var(--muted,#737b86); margin-top:1px; }
.pn-prodcard .pn-mkt{ display:flex; align-items:center; gap:6px; margin-top:6px; font-size:12px; color:var(--ink-soft,#3b424a); }
.pn-prodcard .pn-mkt i{ width:9px; height:9px; border-radius:50%; background:var(--muted,#737b86); flex:0 0 auto; }
.pn-prodcard .pn-mkt i.ml{ background:#ffe14d; box-shadow:inset 0 0 0 1px #c9a800; }
.pn-prodcard .pn-mkt b{ color:var(--ink,#15181c); }

/* a posição na vitrine Mais vendidos */
.pn-prodcard .pn-rank{ position:absolute; top:18px; right:18px; z-index:1; background:var(--ink,#15181c); color:var(--card,#fff); border-radius:7px; padding:3px 8px; font-size:11px; font-weight:800; }

/* a oferta com preço (0241): o % sobre a foto e o preço normal riscado em cima do preço da oferta */
.pn-prodcard .pn-pct{ position:absolute; top:18px; left:18px; z-index:1; background:var(--brand,#ffb400); color:var(--brand-ink,#1c1304); border-radius:7px; padding:3px 8px; font-family:var(--fdisp,system-ui,sans-serif); font-weight:800; font-size:13px; }
.pn-prodcard .pn-de{ font-size:12px; color:var(--muted,#737b86); text-decoration:line-through; line-height:1.2; }

/* o cronômetro da oferta (window.pnCronometro) */
.cr-cx{ display:inline-flex; flex-direction:column; align-items:center; justify-content:center; min-width:46px; padding:7px 6px 5px; margin-right:6px; border-radius:9px; background:rgba(255,255,255,.1); line-height:1; }
.cr-cx b{ font-family:var(--fdisp,system-ui,sans-serif); font-weight:800; font-size:22px; }
.cr-cx small{ font-size:10.5px; opacity:.75; margin-top:3px; letter-spacing:.04em; }
.cr-fim{ font-weight:700; opacity:.8; }
/* b6: o cliente que entrou (F5.3) */
.pn-prodcard .pn-seu{ font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--brand-text, var(--ink,#15181c)); line-height:1.2; }
.pn-prodcard .pn-consulte{ font-size:15px; color:var(--muted,#737b86); }
.pn-estq{ display:inline-flex; align-items:center; gap:5px; align-self:flex-start; margin-top:6px; padding:2px 9px; border-radius:999px;
          font-size:11.5px; font-weight:700; line-height:1.5; }
.pn-estq::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.pn-estq-pronta{ background:rgba(25,135,84,.12); color:#157347; }
.pn-estq-encomenda{ background:rgba(115,123,134,.14); color:var(--ink-soft,#3b424a); }
.m-pista .pn-estq-pronta{ color:#7ee2a3; }
/* b7: o pedido do cliente que entrou (F5.4) */
.pn-prodcard .pn-add{ margin-top:10px; display:block; width:100%; text-align:center; background:var(--brand,#ffb400); color:var(--brand-ink,#1c1304);
                      border:0; font-weight:800; font-size:14px; padding:9px 12px; border-radius:10px; cursor:pointer; font-family:inherit; }
.pn-prodcard .pn-add:hover{ background:var(--brand-deep,#f59e00); }
.pn-prodcard .pn-add:disabled{ opacity:.6; cursor:wait; }
.pn-estq-parcial{ background:rgba(255,180,0,.16); color:#8a5a00; }
.pn-pedido-aviso{ position:fixed; left:50%; bottom:22px; transform:translate(-50%, 30px); opacity:0; pointer-events:none; z-index:2000;
                  background:var(--ink,#15181c); color:var(--card,#fff); padding:12px 18px; border-radius:12px; font-size:14.5px; font-weight:600;
                  box-shadow:0 10px 30px rgba(0,0,0,.25); transition:opacity .2s, transform .2s; max-width:calc(100vw - 32px); }
.pn-pedido-aviso.on{ opacity:1; transform:translate(-50%, 0); pointer-events:auto; }
.pn-pedido-aviso.erro{ background:#b42318; }
.pn-pedido-aviso a{ color:var(--brand,#ffb400); margin-left:8px; font-weight:800; text-decoration:underline; }
.ico-pedido .i{ position:relative; }
.ico-num{ position:absolute; top:-7px; right:-9px; min-width:18px; height:18px; padding:0 5px; border-radius:999px; box-sizing:border-box;
          background:var(--brand,#ffb400); color:var(--brand-ink,#1c1304); font-size:11px; font-weight:800; font-style:normal;
          display:flex; align-items:center; justify-content:center; line-height:1; }
.ico-num[hidden]{ display:none; }
/* b8: a aplicação no carro escolhido (F7) */
.pn-apl{ display:inline-flex; align-items:center; gap:5px; align-self:flex-start; margin-top:6px; padding:2px 9px; border-radius:999px;
         font-size:11.5px; font-weight:700; line-height:1.5; max-width:100%; }
.pn-apl b{ font-weight:800; }
.pn-apl span{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pn-apl-serve{ background:rgba(25,135,84,.12); color:#157347; }
.pn-apl-confirme{ background:rgba(255,180,0,.18); color:#8a5a00; }
.pn-apl-nao{ background:rgba(180,35,24,.10); color:#b42318; }