/* VitrinyON — White Experience v5.2.3 (Marketplace scoped)
   Escopo: body[data-portal-theme] — NÃO afeta /admin
   v5.2.3:
   - Tema claro real (Android/iOS): superfícies brancas e sem blur no light
   - Cidade/CEP posicionado no topo (header)
   - Hovers padronizados (sem underline; leve variação de cor)
   - Dropdown padrão (Preço ▾) para reutilizar
   - Cards travados (linhas fixas + placeholders invisíveis)
   - Faixa pós-banner mantida (nav contextual)
*/

/* ===== Tokens base ===== */
:root{
  --neo:#12FF88;
  --accent:#00FF99;

  --bg:#0b0f0e;
  --fg:#e6f6ef;
  --muted:#c9e2d6;            /* cinza legível no dark */
  --muted-light:#5b6a65;      /* cinza legível no light */
  --surface:#121a17;
  --surface2:#0e1513;
  --border:#1e2a26;

  --btn-on:#0e9a63;
  --btn-on-hover:#0b8759;
  --btn-on-active:#0a7c52;
}

/* ===== Tema isolado (apenas Portal) ===== */
body[data-portal-theme="dark"]{
  --bg:#0b0f0e; --fg:#e6f6ef; --muted:#c9e2d6;
  --surface:#121a17; --surface2:#0e1513; --border:#1e2a26;
  --btn-on:#0e9a63; --btn-on-hover:#0b8759; --btn-on-active:#0a7c52;
}
body[data-portal-theme="light"]{
  /* Light “real branco” para Android/iOS */
  --bg:#ffffff; --fg:#101412; --muted:#5b6a65;
  --surface:#ffffff; --surface2:#ffffff; --border:#e7ecea;
  --btn-on:#0e9a63; --btn-on-hover:#0b8759; --btn-on-active:#0a7c52;
}

/* ===== Base ===== */
html,body{height:100%}
body{background:var(--bg);color:var(--fg)}
a{color:var(--accent);text-decoration:none}
a:hover{opacity:.9}
.container-narrow{max-width:1200px}

/* ===== Header ===== */
.sticky-head{position:sticky;top:0;z-index:1030;background:var(--surface2);backdrop-filter:saturate(160%) blur(6px)}
/* Sem blur no tema claro para evitar “cinzar” no Android */
body[data-portal-theme="light"] .sticky-head{backdrop-filter:none}
.topbar{padding:.65rem 0}
.brand-link{display:flex;align-items:center;gap:.5rem}
.brand-logo{height:46px;width:auto}
@media (max-width:991.98px){.brand-logo{height:38px}}

.top-row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.top-actions{display:flex;align-items:center;gap:.5rem;margin-left:auto}

/* Chip de localização (Cidade/CEP) — mesmo altura da busca/botões */
.loc-chip{
  display:inline-flex;align-items:center;gap:.4rem;
  border:1px solid var(--border); background:var(--surface); color:var(--fg);
  border-radius:999px; padding:.35rem .65rem; white-space:nowrap; max-width:220px;
}
.loc-chip:hover{filter:brightness(1.08)}

/* Busca (placeholder e texto mais claros no dark) */
.search-holder{flex:1 1 auto; position:relative; min-width:260px}
@media (max-width:991.98px){ .search-holder{flex-basis:100%} }
.search-input{
  border-radius:999px;border:1px solid var(--border);
  background:var(--surface);color:var(--fg);
  padding-right:44px;
}
.search-input::placeholder{color:var(--muted)}
.search-icon{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  width:22px; height:22px; color:var(--muted); opacity:.95; pointer-events:none
}

/* Botões topo com contraste */
.btn-outline-light{
  --bs-btn-color: var(--fg);
  --bs-btn-border-color: var(--fg);
  --bs-btn-hover-bg: var(--fg);
  --bs-btn-hover-color: var(--bg);
  --bs-btn-hover-border-color: var(--fg);
}
body[data-portal-theme="light"] .btn-outline-light{
  --bs-btn-color:#111; --bs-btn-border-color:#111;
  --bs-btn-hover-bg:#111; --bs-btn-hover-color:#fff; --bs-btn-hover-border-color:#111;
}

/* Botão Tema (ícones) */
.theme-toggle.btn{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .6rem}
.theme-icon{width:18px;height:18px;display:block;transition:opacity .2s ease}
body[data-portal-theme="dark"]  .icon-sun {opacity:.35}
body[data-portal-theme="dark"]  .icon-moon{opacity:1}
body[data-portal-theme="light"] .icon-sun {opacity:1}
body[data-portal-theme="light"] .icon-moon{opacity:.35}

/* ===== Banner ===== */
.hero-wrap{background:var(--surface2);border-bottom:1px solid var(--border)}
.hero-img{display:block;width:100%;height:auto;max-height:288px;object-fit:contain;object-position:center}
@media (max-width:767.98px){ .hero-img{max-height:200px} }

/* ===== Faixa pós-banner (nav contextual) ===== */
.postnav-wrap{background:var(--surface2);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.postnav-line{display:flex;align-items:center;justify-content:center;gap:1.25rem;min-height:56px}
.postnav-scroll{display:flex;gap:1rem;overflow-x:auto;scrollbar-width:thin;align-items:center;justify-content:center}
.postnav-scroll::-webkit-scrollbar{height:6px}
.postnav-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:6px}
.postnav-item{color:var(--fg);text-decoration:none;font-weight:600;white-space:nowrap;transition:filter .15s ease,color .15s ease}
.postnav-item:hover{color:var(--accent);text-decoration:none;filter:brightness(1.07)} /* sem underline */
.postnav-sep{opacity:.25}

/* Dropdown padrão (Preço ▾) */
.postnav-dropdown{position:relative}
.postnav-dropdown-menu{
  position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%);
  background:var(--surface); border:1px solid var(--border); border-radius:10px;
  padding:.5rem; min-width:220px; display:none; z-index:1031;
  box-shadow:0 10px 24px rgba(0,0,0,.15)
}
.postnav-dropdown:hover .postnav-dropdown-menu{display:block}
.postnav-dropdown-menu a{
  display:block; padding:.4rem .55rem; border-radius:8px;
  color:var(--fg); text-decoration:none; white-space:nowrap
}
.postnav-dropdown-menu a:hover{background:rgba(0,0,0,.06)}

/* ===== Cards (travados) ===== */
.card-prod{background:var(--surface);border:1px solid var(--border);border-radius:18px;height:100%}
.media-box{width:100%;aspect-ratio:1/1;background:var(--bg);border:1px solid var(--border);
  border-radius:14px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.media-box img{width:100%;height:100%;object-fit:cover}

/* Título – exatamente 3 linhas */
.card-prod .title{
  font-weight:600; line-height:1.25; font-size:15.5px; color:var(--fg);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; min-height:3.75em;
}

/* Loja – 1 linha */
.card-prod .store-line{
  font-size:.86rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-height:1.1em;
}

/* Bloco de preços: 3 sublinhas travadas */
.card-prod .subline{min-height:1.1em}
.card-prod .subline.ghost{visibility:hidden;}

/* Linhas de preço */
.price-row{display:flex;align-items:baseline;gap:.5rem}
.price{font-weight:800;color:#ffffff}
body[data-portal-theme="light"] .price{color:#0f1a16}
.text-secondary{color:var(--muted)!important}
.from{color:var(--muted);text-decoration:line-through}
.badge-off{background:#dc2626;color:#fff;border-radius:.5rem;padding:.1rem .45rem;font-size:.70rem}

/* Botão ON (sem apagar o texto acima) */
.btn-on{
  --bs-btn-color:#08110d;
  --bs-btn-bg:var(--btn-on);
  --bs-btn-border-color:var(--btn-on);
  --bs-btn-hover-color:#08110d;
  --bs-btn-hover-bg:var(--btn-on-hover);
  --bs-btn-hover-border-color:var(--btn-on-hover);
  --bs-btn-active-color:#08110d;
  --bs-btn-active-bg:var(--btn-on-active);
  --bs-btn-active-border-color:var(--btn-on-active);
  box-shadow:0 5px 14px rgba(14,154,99,.18);
}
.price-actions-gap{margin-top:.5rem}
.card-prod:hover{border-color:rgba(0,255,153,.45);box-shadow:0 8px 28px rgba(0,255,153,.05)}

/* ===== Rodapé ===== */
footer{background:var(--surface2);border-top:1px solid var(--border);padding:1.25rem 0;margin-top:1.5rem}
.ft-green{font-weight:700}
body[data-portal-theme="dark"]  .ft-green{color:#ffffff}
body[data-portal-theme="light"] .ft-green{color:#000000}

/* ===== Acessibilidade & espaçamentos ===== */
:focus-visible{outline:2px dashed var(--accent);outline-offset:2px}
section.py-4{padding-top:1.25rem !important;padding-bottom:1.75rem !important}
.row.g-3{--bs-gutter-x:1rem;--bs-gutter-y:1rem}