/*
Theme Name:       Peças Express
Theme URI:        https://pecas-express.ao
Description:      Tema profissional para o marketplace Peças Express. Compatível com Gutenberg e Elementor.
Author:           Vilaris Tech
Author URI:       https://vilaris.ao
Version:          3.0.0
Requires at least: 6.0
Requires PHP:      8.0
License:          GPL v2 or later
Text Domain:      pecas-express
Tags:             marketplace, automotive, e-commerce, block-editor, full-site-editing

Design System:
  --purple-dark:  #40157B
  --purple:       #7304C3
  --green:        #1FF07A
  --dark:         #18181B
*/

/* ============================================================
   PEÇAS EXPRESS — Design System v3.0
   Migrado do sistema PHP original, adaptado para WordPress
   ============================================================ */

:root {
  --pe-pnav-h: 60px; /* altura da barra inferior do painel (mobile) */
  --pe-gutter: clamp(1rem, 2.5vw, 2.5rem); /* margem lateral (site em largura total) */
  --purple-dark:  #40157B;
  --purple:       #7304C3;
  --green:        #1FF07A;
  --white:        #FFFFFF;
  --dark:         #18181B;
  --dark-2:       #27272A;
  --dark-3:       #3F3F46;
  --gray:         #71717A;
  --gray-light:   #A1A1AA;
  --bg:           #F9F9FB;
  --border:       #E4E4E7;
  --text:         #18181B;
  --text-muted:   #52525B;
  --radius:       10px;
  --radius-lg:    16px;
  --shadow:       0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --shadow-md:    0 4px 12px rgba(0,0,0,.1);
  --shadow-lg:    0 10px 40px rgba(0,0,0,.12);
  --transition:   .2s ease;
  /* Tema: superfícies e texto (o escuro redefine-os mais abaixo) */
  --surface:      #FFFFFF;
  --surface-2:    #F4F4F5;
  --surface-3:    #E4E4E7;
  --tint:         #F3E8FF;
  --purple-text:  #40157B;
  color-scheme: light;
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
button { cursor: pointer; }
a { color: var(--purple); text-decoration: none; }
a:hover { text-decoration: none; }

/* ── Tipografia ─────────────────────────────────────────────── */
h1 { font-size: clamp(1.75rem, 4vw, 2.5rem);   font-weight: 800; line-height: 1.2; color: var(--text); }
h2 { font-size: clamp(1.3rem, 3vw, 1.875rem);  font-weight: 700; color: var(--text); }
h3 { font-size: 1.2rem;  font-weight: 600; color: var(--text); }
h4 { font-size: 1rem;    font-weight: 600; color: var(--text); }
p  { color: var(--text-muted); line-height: 1.7; }

/* ── Layout ─────────────────────────────────────────────────── */
.container    { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }
.container--sm{ max-width: 720px; }
.container--lg{ max-width: 1400px; }
.section      { padding: 4rem 0; }
.section--sm  { padding: 2rem 0; }

@media (max-width: 480px) {
  .container { padding: 0 1rem; }
}

/* Garante área de respiro para os wrappers inline dos cards que ficavam
   sem altura reservada antes da imagem carregar (ver .card__img abaixo). */
.card__img-wrap { position: relative; overflow: hidden; aspect-ratio: 4/3; }
.card__img-wrap > .card__img { aspect-ratio: auto; height: 100%; }

/* ── Botões ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem 1.25rem;
  border-radius: var(--radius);
  font-size: .9rem; font-weight: 600;
  cursor: pointer; border: none;
  transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition), background var(--transition);
  text-decoration: none; line-height: 1.4;
}
.btn:active { transform: scale(.97); }
.btn:hover  { text-decoration: none; }

.btn--primary {
  background: var(--purple);
  color: #fff;
  box-shadow: 0 2px 8px rgba(115,4,195,.35);
}
.btn--primary:hover { background: var(--purple-dark); box-shadow: 0 4px 14px rgba(64,21,123,.4); color: #fff; }

.btn--green {
  background: var(--green);
  color: var(--dark);
  box-shadow: 0 2px 8px rgba(31,240,122,.3);
}
.btn--green:hover { opacity: .9; color: var(--dark); }

.btn--outline {
  background: transparent;
  border: 1.5px solid var(--border);
  color: var(--text);
}
.btn--outline:hover { border-color: var(--purple); color: var(--purple); }

.btn--ghost   { background: transparent; color: var(--text-muted); }
.btn--ghost:hover { background: var(--border); color: var(--text); }

.btn--danger  { background: #EF4444; color: #fff; }
.btn--danger:hover { background: #DC2626; color: #fff; }

.btn--whatsapp {
  background: #25D366; color: #fff;
  box-shadow: 0 2px 8px rgba(37,211,102,.35);
}
.btn--whatsapp:hover { background: #1DB954; color: #fff; }

.btn--sm  { padding: .4rem .9rem; font-size: .8rem; }
.btn--lg  { padding: .8rem 1.75rem; font-size: 1rem; }
.btn--xl  { padding: 1rem 2.25rem; font-size: 1.05rem; }
.btn--full{ width: 100%; justify-content: center; }

/* ── Navbar ─────────────────────────────────────────────────── */
.navbar {
  background:var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.navbar__inner {
  display: flex;
  align-items: center;
  height: 64px;
  gap: 1.5rem;
}
.navbar__logo {
  font-size: 1.25rem;
  font-weight: 800;
  color:var(--purple-text);
  text-decoration: none;
  flex-shrink: 0;
}
.navbar__logo span { color: var(--green); }
.navbar__logo--img img { max-height: 40px; max-width: 160px; }
.navbar__logo:hover { text-decoration: none; }

.navbar__nav {
  display: flex;
  align-items: center;
  gap: .25rem;
  margin-left: auto;
}

.navbar__link {
  padding: .45rem .75rem;
  border-radius: var(--radius);
  font-size: .875rem;
  font-weight: 500;
  color: var(--text);
  transition: background var(--transition), color var(--transition);
  display: inline-flex; align-items: center; gap: .35rem;
  text-decoration: none;
}
.navbar__link:hover          { background: var(--bg); color: var(--pe-header-hover, var(--pe-header-accent, var(--purple))); text-decoration: none; }
.navbar__link--active,
.navbar__link.is-active      { color: var(--pe-header-active, var(--pe-header-accent, var(--purple))); font-weight: 600; }

/* Categorias: o botão da navbar agora abre o drawer lateral (#pe-cat-drawer) — ver mais abaixo */
.navbar__megabtn {
  background: none; border: none;
  font-family: inherit;
  padding: .45rem .75rem;
  border-radius: var(--radius);
  font-size: .875rem; font-weight: 500; color: var(--text);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: .35rem;
  transition: background var(--transition), color var(--transition);
}
.navbar__megabtn:hover { background: var(--bg); color: var(--pe-header-hover, var(--pe-header-accent, var(--purple))); }
.megabtn-chevron { display: inline-flex; transition: transform .2s; }
.navbar__megabtn[aria-expanded="true"] .megabtn-chevron { transform: rotate(90deg); }

/* ── Flash messages ─────────────────────────────────────────── */
.flash {
  padding: .85rem 1.25rem;
  border-radius: var(--radius);
  font-size: .9rem;
  font-weight: 500;
  margin-bottom: 1rem;
}
.flash--success { background: rgba(31,240,122,.12); color: #166534; border: 1px solid rgba(31,240,122,.3); }
.flash--error   { background: rgba(239,68,68,.1);   color: #991B1B; border: 1px solid rgba(239,68,68,.25); }
.flash--warning { background: rgba(234,179,8,.1);   color: #854D0E; border: 1px solid rgba(234,179,8,.25); }
.flash--info    { background: rgba(115,4,195,.08);  color:var(--purple-text); border: 1px solid rgba(115,4,195,.2); }

/* ── Forms ──────────────────────────────────────────────────── */
.form-group   { margin-bottom: 1rem; }
.form-label   { display: block; font-size: .875rem; font-weight: 600; margin-bottom: .4rem; color: var(--text); }
.form-control {
  width: 100%;
  padding: .6rem .9rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: .9rem; font-family: inherit;
  background:var(--surface); color: var(--text);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}
.form-control:focus { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(115,4,195,.12); }
.form-control::placeholder { color: var(--gray-light); }
.form-control:disabled { background: var(--bg); cursor: not-allowed; }
textarea.form-control { min-height: 100px; resize: vertical; }
select.form-control   { cursor: pointer; }
.form-hint  { font-size: .78rem; color: var(--gray-light); margin-top: .35rem; }
.form-error { font-size: .78rem; color: #EF4444; margin-top: .35rem; }

/* Checkbox / Radio */
.form-check { display: flex; align-items: center; gap: .5rem; font-size: .875rem; cursor: pointer; }
.form-check input { accent-color: var(--purple); width: 16px; height: 16px; }

/* ── Cards ──────────────────────────────────────────────────── */
.card {
  background:var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
}
.card:hover { box-shadow: var(--shadow-md); }
.card__img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.card__body  { padding: 1rem; }
.card__title { font-size: 1rem; font-weight: 600; margin-bottom: .25rem; color: var(--text); }
.card__price { font-size: 1.2rem; font-weight: 800; color: var(--purple); margin-bottom: .5rem; }
.card__meta  { font-size: .8rem; color: var(--gray); display: flex; align-items: center; gap: .35rem; }
.card__badges{ display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: .75rem; }

/* Product card link */
a.product-card, a.product-card:hover { text-decoration: none; color: inherit; display: block; }
a.product-card .card { height: 100%; }

/* ── Badges ─────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .2rem .55rem;
  border-radius: 100px;
  font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
}
.badge--new     { background: rgba(31,240,122,.15); color: #166534; }
.badge--used    { background: rgba(234,179,8,.12);  color: #854D0E; }
.badge--active  { background: rgba(31,240,122,.15); color: #166534; }
.badge--pending { background: rgba(234,179,8,.12);  color: #854D0E; }
.badge--error   { background: rgba(239,68,68,.1);   color: #991B1B; }
.badge--purple  { background: rgba(115,4,195,.1);   color:var(--purple-text); }
.badge--gray    { background: var(--bg); color: var(--gray); border: 1px solid var(--border); }

/* ── Grid de produtos ───────────────────────────────────────── */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1rem;
}

/* ── Stats cards ────────────────────────────────────────────── */
.stat-card {
  background:var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  display: flex; align-items: center; gap: 1rem;
}
.stat-card__icon {
  width: 48px; height: 48px;
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; flex-shrink: 0;
}
.stat-card__icon--purple { background: rgba(115,4,195,.1); color: var(--purple); }
.stat-card__icon--green  { background: rgba(31,240,122,.15); color: #166534; }
.stat-card__icon--blue   { background: rgba(59,130,246,.1); color: #1E40AF; }
.stat-card__icon--amber  { background: rgba(234,179,8,.12); color: #854D0E; }
.stat-card__value { font-size: 1.75rem; font-weight: 800; color: var(--text); line-height: 1; }
.stat-card__label { font-size: .8rem; color: var(--gray); margin-top: .2rem; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }

/* ── KPI grid do dashboard admin (responsivo) ─────────────────── */
.pe-kpi-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: .75rem; margin-bottom: 2rem; }
@media (max-width: 1300px) { .pe-kpi-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1024px) { .pe-kpi-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .pe-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 380px)  { .pe-kpi-grid { grid-template-columns: 1fr; } }
.pe-kpi-grid .stat-card { padding: 1rem 1.1rem; gap: .75rem; }
.pe-kpi-grid .stat-card__icon { width: 38px; height: 38px; font-size: 1.1rem; }

/* ── Painel (dashboard) ─────────────────────────────────────── */
.panel-layout { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.panel-sidebar {
  background: var(--dark);
  padding: 1.5rem 1rem;
  display: flex; flex-direction: column; gap: .25rem;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.panel-sidebar__logo {
  font-size: 1.1rem; font-weight: 800; color: #fff;
  padding: .5rem .75rem 1.25rem;
  display: block; text-decoration: none;
}
.panel-sidebar__logo span { color: var(--green); }
.panel-sidebar__section {
  font-size: .65rem; font-weight: 700; color: rgba(255,255,255,.3);
  text-transform: uppercase; letter-spacing: .1em;
  padding: .75rem .75rem .25rem;
}
.panel-nav-link {
  display: flex; align-items: center; gap: .65rem;
  padding: .55rem .75rem;
  border-radius: var(--radius);
  font-size: .875rem; font-weight: 500; color: rgba(255,255,255,.65);
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.panel-nav-link:hover,
.panel-nav-link.is-active { background: rgba(255,255,255,.1); color: #fff; text-decoration: none; }
.panel-nav-link.is-active { font-weight: 600; }
.panel-content { padding: 2rem; min-height: 100vh; background: var(--bg); }
.panel-header  { margin-bottom: 1.75rem; }
.panel-header h1 { font-size: 1.4rem; }
.panel-header p  { font-size: .875rem; margin-top: .25rem; }

/* ── Table ──────────────────────────────────────────────────── */
.table-wrapper { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--border); }
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
  background:var(--surface);
}
@media (max-width: 900px) {
  /* Sem min-width, o navegador espreme as colunas para caber no ecrã em vez
     de rolar horizontalmente — e é isso que faz os botões de ações
     (vários ícones lado a lado) ficarem espremidos numa coluna estreita e
     empilharem na vertical (flex-wrap). Com min-width, a tabela mantém a
     largura natural e o overflow-x:auto do wrapper passa a rolar de verdade. */
  .table { min-width: 900px; }
}
.table th {
  background: var(--bg);
  font-size: .75rem; font-weight: 700; color: var(--gray);
  text-transform: uppercase; letter-spacing: .05em;
  padding: .75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.table td {
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: middle;
}
/* Coluna de ações: nunca quebrar os ícones em várias linhas */
.table td > div[style*="flex-wrap"] { flex-wrap: nowrap !important; }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--bg); }

/* ── Paginação ──────────────────────────────────────────────── */
.pagination {
  display: flex; align-items: center; justify-content: center; gap: .35rem;
  margin-top: 2rem;
}
.page-btn {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius);
  font-size: .875rem; font-weight: 500;
  border: 1.5px solid var(--border);
  background:var(--surface); color: var(--text);
  cursor: pointer; text-decoration: none;
  transition: all var(--transition);
}
.page-btn:hover      { border-color: var(--purple); color: var(--purple); text-decoration: none; }
.page-btn.is-active  { background: var(--purple); border-color: var(--purple); color: #fff; }
.page-btn:disabled   { opacity: .4; cursor: not-allowed; }

/* ── Footer ─────────────────────────────────────────────────── */
.footer {
  position: relative;
  background: #000;
  color: rgba(255,255,255,.7);
  padding: 3.5rem 0 2rem;
  margin-top: 4rem;
}
.footer::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--purple) 0%, var(--purple-dark) 45%, var(--green) 100%);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 2.5rem;
  margin-bottom: 2.5rem;
}
.footer__logo {
  font-size: 1.3rem; font-weight: 800; color: #fff; text-decoration: none;
}
.footer__logo span { color: var(--green); }
.footer__logo--img { display: inline-block; }
.footer__heading {
  position: relative; display: inline-block;
  font-size: .7rem; font-weight: 700; color: rgba(255,255,255,.4);
  text-transform: uppercase; letter-spacing: .1em;
  margin-bottom: 1rem; padding-bottom: .55rem;
}
.footer__heading::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 22px; height: 2px; border-radius: 2px;
  background: var(--green);
}
.footer a {
  display: flex; align-items: center; gap: .4rem;
  font-size: .85rem; color: rgba(255,255,255,.55);
  text-decoration: none; margin-bottom: .55rem;
  transition: color var(--transition), transform var(--transition);
  width: fit-content;
}
.footer a:hover { color: #fff; text-decoration: none; transform: translateX(3px); }

/* Newsletter — cartão em destaque no topo do rodapé */
.footer__newsletter {
  display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; justify-content: space-between;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.75rem;
  margin-bottom: 2.5rem;
}
.footer__newsletter-icon {
  width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(31,240,122,.12); color: var(--green);
}
.footer__newsletter-copy { display: flex; align-items: center; gap: 1rem; }
.footer__newsletter-title { font-weight: 700; color: #fff; font-size: 1rem; margin-bottom: .2rem; }
.footer__newsletter-text { font-size: .82rem; color: rgba(255,255,255,.5); margin: 0; }
.footer__newsletter-form input {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.15);
  border-radius: 8px; padding: .6rem .9rem; color: #fff; font-size: .82rem;
  transition: border-color var(--transition), background var(--transition);
}
.footer__newsletter-form input::placeholder { color: rgba(255,255,255,.4); }
.footer__newsletter-form input:focus { outline: none; border-color: var(--green); background: rgba(255,255,255,.1); }

/* Redes sociais no rodapé */
/* Redes sociais — círculos perfeitamente quadrados */
.footer__social {
  display: flex; flex-wrap: wrap; gap: .55rem;
  margin-top: 1.15rem;
}
.footer__social-btn {
  flex-shrink: 0;
  display: inline-flex !important; align-items: center; justify-content: center;
  width: 34px; height: 34px; min-width: 34px;
  margin-bottom: 0 !important; padding: 0;
  border-radius: 8px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.65);
  text-decoration: none;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}
.footer__social-btn svg { display: block; flex-shrink: 0; }
.footer__social-btn:hover {
  background: var(--purple, #7304C3);
  border-color: var(--purple, #7304C3);
  color: #fff; transform: translateY(-2px);
}

/* Selos de pagamento / parceiros */
.footer__badge {
  display: inline-flex; align-items: center; gap: .3rem;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: 6px; padding: .3rem .7rem; font-size: .78rem; color: rgba(255,255,255,.7);
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.footer__badge:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); color: #fff; }

/* Barra de gateways / parceiros */
.footer__trust {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 1.5rem; margin-bottom: 1.5rem;
  display: flex; flex-wrap: wrap; gap: 2rem;
  justify-content: center; align-items: flex-start;
}
.footer__trust-group { display: flex; flex-direction: column; gap: .6rem; align-items: center; }
.footer__trust-label {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .68rem; font-weight: 700; color: rgba(255,255,255,.35);
  text-transform: uppercase; letter-spacing: .1em;
}
.footer__trust-badges { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }
.footer__badge-logo {
  max-height: 28px; max-width: 80px;
  object-fit: contain; display: block;
  filter: brightness(0) invert(1); opacity: .7;
  transition: opacity var(--transition);
}
.footer__badge:hover .footer__badge-logo { opacity: 1; }

/* ── Página de nenhum resultado ── */
.pe-no-results {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 3.5rem 1.5rem 4rem;
  max-width: 520px; margin: 0 auto;
}
.pe-no-results__illustration { margin-bottom: 1.5rem; opacity: .92; }
.pe-no-results__heading {
  font-size: 1.35rem; font-weight: 700; color: var(--text);
  margin: 0 0 .5rem;
}
.pe-no-results__sub {
  font-size: .9rem; color: var(--gray); margin: 0 0 1.75rem; line-height: 1.6;
}

/* Barra de pesquisa rápida */
.pe-no-results__search { width: 100%; margin-bottom: 1.5rem; }
.pe-no-results__search-wrap {
  display: flex; align-items: center; gap: .5rem;
  background: var(--bg); border: 1.5px solid var(--border);
  border-radius: var(--radius-lg); padding: .4rem .4rem .4rem .85rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.pe-no-results__search-wrap:focus-within {
  border-color: var(--purple); box-shadow: 0 0 0 3px rgba(115,4,195,.1);
}
.pe-no-results__search-icon { color: var(--gray-light); flex-shrink: 0; display: flex; }
.pe-no-results__search-input {
  flex: 1; border: none; background: transparent; outline: none;
  font-size: .9rem; color: var(--text); padding: .25rem 0;
}
.pe-no-results__search-input::placeholder { color: var(--gray-light); }

/* Tags de categorias sugeridas */
.pe-no-results__tags-wrap {
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  margin-bottom: 1.75rem; width: 100%;
}
.pe-no-results__tags-label {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--gray-light);
}
.pe-no-results__tags {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem;
}
.pe-no-results__tag {
  display: inline-flex; align-items: center;
  background: var(--tint, #EDE9FE);
  color: var(--purple); border: 1px solid rgba(115,4,195,.15);
  border-radius: 100px; padding: .3rem .85rem;
  font-size: .8rem; font-weight: 500; text-decoration: none;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}
.pe-no-results__tag:hover {
  background: var(--purple); color: #fff; border-color: var(--purple);
  transform: translateY(-1px);
}

/* CTAs */
.pe-no-results__ctas {
  display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center;
}

.footer__bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 1.5rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-size: .8rem; color: rgba(255,255,255,.35);
  flex-wrap: wrap;
}
.footer__bottom a {
  display: inline-flex; font-size: .8rem; color: rgba(255,255,255,.5);
  text-decoration: none; margin-bottom: 0;
}
.footer__bottom a:hover { color: #fff; transform: none; }
.footer__dev { display: flex; align-items: center; gap: .5rem; }
.footer__dev img { max-height: 28px; opacity: .7; }

/* Voltar ao topo */
.footer__bottom .footer__totop {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.7);
  border: 1px solid rgba(255,255,255,.1); margin-bottom: 0;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.footer__bottom .footer__totop:hover { background: var(--green); color: var(--dark); transform: translateY(-3px); }

/* ── Botão de upload personalizado (substitui o input[type=file] nativo) ── */
.pe-upload {
  position: relative; display: flex; align-items: stretch; width: 100%;
  border: 1.5px solid var(--border); border-radius: var(--radius);
  overflow: hidden; cursor: pointer; background:var(--surface);
  transition: border-color var(--transition);
}
.pe-upload:hover { border-color: var(--purple); }
.pe-upload__btn {
  display: inline-flex; align-items: center; gap: .45rem; flex-shrink: 0;
  padding: .6rem 1rem; background: var(--bg); color: var(--text);
  font-size: .82rem; font-weight: 600; white-space: nowrap;
  border-right: 1.5px solid var(--border);
  transition: background var(--transition), color var(--transition);
}
.pe-upload:hover .pe-upload__btn { background: var(--purple); color: #fff; border-color: var(--purple); }
.pe-upload__name {
  flex: 1; display: flex; align-items: center; padding: .6rem .85rem;
  font-size: .82rem; color: var(--gray-light);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pe-upload__name.is-filled { color: var(--text); font-weight: 500; }
.pe-upload__input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── Biblioteca de Mídia (painel) ──────────────────────────────────────── */
.pe-media__header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap;
}
.pe-media__uploadcard { margin-bottom: 1.5rem; }

.pe-media__toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-bottom: 1rem; min-height: 34px;
  background:var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: .6rem .85rem;
}
.pe-media__toolbar-left { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.pe-media__filter { width: auto; padding: .4rem 1.9rem .4rem .7rem; font-size: .82rem; height: auto; }
#pe-media-select-mode.is-active { background: var(--purple); color: #fff; border-color: var(--purple); }
.pe-media__selectall {
  display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
  font-size: .85rem; font-weight: 600; color: var(--text);
  user-select: none;
}
.pe-media__selectall input { width: 16px; height: 16px; accent-color: var(--purple); cursor: pointer; }
.pe-media__count { font-size: .82rem; color: var(--gray); }
.pe-media__search {
  display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--gray);
  margin-left: auto;
}
.pe-media__search input { width: 220px; padding: .4rem .7rem; font-size: .82rem; height: auto; }
@media (max-width: 700px) {
  .pe-media__toolbar { flex-direction: column; align-items: stretch; }
  .pe-media__search { margin-left: 0; }
  .pe-media__search input { width: 100%; }
}

.pe-media { display: flex; align-items: flex-start; gap: 1.5rem; }
/* Grelha + estado vazio + "Carregar mais" numa só coluna: sem isto o botão (width:100%) era um irmão flex da grelha e esmagava-a numa só coluna quando havia mais de uma página de fotos. */
.pe-media__main { flex: 1; min-width: 0; }
.pe-media__grid {
  flex: 1; min-width: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 1rem;
}
.pe-media__item {
  position: relative; cursor: pointer; border-radius: var(--radius); overflow: hidden;
  background:var(--surface); border: 2px solid transparent; box-shadow: 0 1px 3px rgba(0,0,0,.08);
  transition: border-color var(--transition), transform var(--transition);
}
.pe-media__item:hover { transform: translateY(-2px); }
.pe-media__item.is-selected { border-color: var(--purple); }
.pe-media__item.is-selected::before {
  content: ''; position: absolute; inset: 0; background: rgba(115,4,195,.15); z-index: 1; pointer-events: none;
}
.pe-media__item img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; background: var(--bg); }
.pe-media__item-name {
  font-size: .72rem; padding: .4rem .55rem; color: var(--gray);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pe-media__check {
  position: absolute; top: .45rem; left: .45rem; z-index: 2;
  width: 22px; height: 22px; display: flex; cursor: pointer;
  opacity: 0; transition: opacity var(--transition);
}
.pe-media__grid.is-select-mode .pe-media__check,
.pe-media__item:hover .pe-media__check,
.pe-media__item.is-selected .pe-media__check { opacity: 1; }
.pe-media__check input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; cursor: pointer; }
.pe-media__check span {
  width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0;
  background: rgba(255,255,255,.85); border: 1.5px solid rgba(0,0,0,.15);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition), border-color var(--transition);
}
.pe-media__check span::after {
  content: ''; width: 6px; height: 10px; border: solid var(--surface); border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px,-1px); opacity: 0;
}
.pe-media__check input:checked + span { background: var(--purple); border-color: var(--purple); }
.pe-media__check input:checked + span::after { opacity: 1; }

/* Painel lateral de edição */
.pe-media__panel {
  width: 0; opacity: 0; overflow: hidden;
  flex-shrink: 0; background:var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 0; position: sticky; top: 1rem;
  transition: width var(--transition), opacity var(--transition), padding var(--transition);
}
.pe-media__panel.is-open { width: 280px; opacity: 1; padding: 1.25rem; }
.pe-media__panel-close {
  float: right; background: none; border: 0; font-size: 1.3rem; line-height: 1; cursor: pointer;
  color: var(--gray-light); margin: -.25rem -.25rem 0 0;
}
.pe-media__panel-close:hover { color: var(--text); }
.pe-media__panel-preview {
  clear: both; border-radius: var(--radius); overflow: hidden; margin-bottom: 1rem;
  background: var(--bg);
}
.pe-media__panel-preview img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.pe-media__panel-date { font-size: .78rem; color: var(--gray-light); margin: -.5rem 0 1rem; }
.pe-media__panel-actions { display: flex; flex-direction: column; gap: .5rem; }
.pe-media__panel-actions .btn { width: 100%; justify-content: center; }

@media (max-width: 900px) {
  .pe-media { flex-direction: column; }
  /* Folha inferior: assenta ACIMA da barra de navegação do painel (60px + área segura), não por baixo dela */
  .pe-media__panel {
    position: fixed; top: auto; left: 0; right: 0;
    bottom: calc(var(--pe-pnav-h, 60px) + env(safe-area-inset-bottom, 0px));
    width: auto !important; border-radius: 16px 16px 0 0; border-bottom: 0;
    z-index: 955; box-shadow: 0 -8px 30px rgba(0,0,0,.25);
    max-height: calc(100vh - var(--pe-pnav-h, 60px) - env(safe-area-inset-bottom, 0px) - 4.5rem);
    max-height: calc(100dvh - var(--pe-pnav-h, 60px) - env(safe-area-inset-bottom, 0px) - 4.5rem);
    overflow-y: auto; overscroll-behavior: contain;
  }
  .pe-media__panel:not(.is-open) { display: none; }
  .pe-media__panel.is-open { padding: 1rem 1.25rem 1.25rem; }
  /* Pré-visualização mais baixa para os botões caberem sem scroll */
  .pe-media__panel-preview img { aspect-ratio: 16 / 9; max-height: 22vh; max-height: 22dvh; }
  .pe-media__panel-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
  .pe-media__panel-actions #pe-media-panel-save { grid-column: 1 / -1; }
  /* Deixa espaço para rolar até aos últimos ficheiros com a folha aberta */
  .pe-media:has(.pe-media__panel.is-open) { padding-bottom: 55vh; padding-bottom: 55dvh; }
}
@media (max-width: 380px) {
  .pe-media__panel-actions { grid-template-columns: 1fr; }
}

/* ── Filtros catálogo ────────────────────────────────────────── */
.filters-bar {
  background:var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  margin-bottom: 1.75rem;
  display: flex; gap: .75rem; flex-wrap: wrap; align-items: flex-end;
}
.filter-group { display: flex; flex-direction: column; gap: .35rem; min-width: 150px; flex: 1; }
.filter-label { font-size: .75rem; font-weight: 600; color: var(--gray); text-transform: uppercase; letter-spacing: .05em; }
.filter-control {
  padding: .5rem .75rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: .875rem; background:var(--surface); color: var(--text);
  transition: border-color var(--transition);
  outline: none; width: auto; min-width: 150px; max-width: 100%;
}
.filter-control:focus { border-color: var(--purple); }
.filter-group .filter-control { width: 100%; }
/* Telemóvel: um filtro por linha, a toda a largura; desktop: lado a lado */
@media (max-width: 640px) {
  .filter-control { width: 100%; min-width: 0; }
  .acc-filters .btn { width: 100%; justify-content: center; }
}

/* ── Filter bar (painel vendedor) ─────────────────────────────── */
.pe-filter-bar {
  display: flex; align-items: center; gap: 0;
  background:var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
  margin-bottom: 1rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.pe-filter-bar:focus-within {
  border-color: var(--purple); box-shadow: 0 0 0 3px rgba(115,4,195,.09);
}

/* Campo de pesquisa */
.pe-filter-bar__search {
  display: flex; align-items: center; gap: .5rem;
  flex: 1; min-width: 0; padding: 0 .85rem;
}
.pe-filter-bar__search-icon { color: var(--gray-light); flex-shrink: 0; display: flex; }
.pe-filter-bar__input {
  flex: 1; border: none; outline: none; background: transparent;
  font-size: .875rem; color: var(--text); padding: .65rem 0;
  min-width: 0;
}
.pe-filter-bar__input::placeholder { color: var(--gray-light); }
.pe-filter-bar__clear-input {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; border: none;
  background: var(--border); color: var(--gray); cursor: pointer;
  flex-shrink: 0; padding: 0;
  transition: background var(--transition), color var(--transition);
}
.pe-filter-bar__clear-input:hover { background:var(--surface-3); color: var(--text); }

/* Separador vertical */
.pe-filter-bar__sep {
  width: 1px; align-self: stretch;
  background: var(--border); flex-shrink: 0; margin: .4rem 0;
}

/* Pills de estado */
.pe-filter-bar__pills {
  display: flex; align-items: center; gap: .25rem; padding: .35rem .5rem; flex-shrink: 0;
}
.pe-filter-bar__pill {
  display: inline-flex; align-items: center;
  padding: .3rem .75rem; border-radius: 100px;
  border: none; background: transparent; cursor: pointer;
  font-size: .8rem; font-weight: 500; color: var(--gray);
  white-space: nowrap;
  transition: background var(--transition), color var(--transition);
}
.pe-filter-bar__pill:hover { background: var(--bg); color: var(--text); }
.pe-filter-bar__pill--active {
  background: var(--purple); color: #fff; font-weight: 600;
}
.pe-filter-bar__pill--active:hover { background: var(--purple-dark, #5a02a0); }

/* Botão limpar todos os filtros */
.pe-filter-bar__reset {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex-shrink: 0; margin: .3rem .4rem .3rem 0;
  border-radius: 50%; border: 1.5px solid var(--border);
  color: var(--gray); text-decoration: none;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.pe-filter-bar__reset:hover { background: #FEE2E2; border-color: #FECACA; color: #DC2626; }

@media (max-width: 640px) {
  .pe-filter-bar { flex-wrap: wrap; border-radius: var(--radius); }
  .pe-filter-bar__search { padding: 0 .75rem; order: 1; width: 100%; border-bottom: 1px solid var(--border); }
  .pe-filter-bar__sep { display: none; }
  .pe-filter-bar__pills { order: 2; padding: .4rem .5rem; overflow-x: auto; flex-wrap: nowrap; width: 100%; }
  .pe-filter-bar__reset { order: 0; margin: .3rem .4rem .3rem auto; }
}

/* ── Seller card ─────────────────────────────────────────────── */
.seller-card {
  display: flex; align-items: center; gap: .75rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:var(--surface); text-decoration: none; color: inherit;
}
.seller-card:hover { box-shadow: var(--shadow-md); text-decoration: none; color: inherit; }
.seller-card__logo {
  width: 52px; height: 52px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg);
  border: 2px solid var(--border);
  flex-shrink: 0;
}
.seller-card__name  { font-size: .95rem; font-weight: 600; }
.seller-card__meta  { font-size: .8rem; color: var(--gray); }

/* ── Stars rating ───────────────────────────────────────────── */
.stars { color: #FBBF24; letter-spacing: .1em; }
.stars--sm { font-size: .8rem; }

/* ── Tabs ───────────────────────────────────────────────────── */
.tabs { display: flex; gap: .5rem; border-bottom: 2px solid var(--border); margin-bottom: 1.5rem; }
.tab-btn {
  padding: .6rem 1rem; background: none; border: none;
  font-size: .875rem; font-weight: 600; color: var(--gray);
  cursor: pointer; position: relative; bottom: -2px;
  border-bottom: 2px solid transparent;
  transition: color var(--transition);
}
.tab-btn:hover   { color: var(--purple); }
.tab-btn.is-active { color: var(--purple); border-bottom-color: var(--purple); }
.tab-panel { display: none; }
.tab-panel.is-active { display: block; }

/* Abas responsivas: qualquer .tabs do site vira <select> abaixo dos 900px —
   o <select> é gerado automaticamente por main.js (peBuildTabsSelect). */
.pe-tabs-auto-select { display: none; }
@media (max-width: 900px) {
  .tabs { display: none !important; }
  .pe-tabs-auto-select { display: block !important; margin-bottom: 1.5rem; }
}

/* ── Alert / Notice ─────────────────────────────────────────── */
.alert {
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  font-size: .9rem;
  display: flex; gap: .75rem; align-items: flex-start;
}
.alert--info    { background: rgba(115,4,195,.06); border: 1px solid rgba(115,4,195,.2); color:var(--purple-text); }
.alert--success { background: rgba(31,240,122,.1); border: 1px solid rgba(31,240,122,.3); color: #166534; }
.alert--warning { background: rgba(234,179,8,.1);  border: 1px solid rgba(234,179,8,.3);  color: #854D0E; }
.alert--danger  { background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.2); color: #991B1B; }

/* ── Loading spinner ────────────────────────────────────────── */
.spinner {
  width: 24px; height: 24px;
  border: 3px solid var(--border);
  border-top-color: var(--purple);
  border-radius: 50%;
  animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading { display: flex; align-items: center; justify-content: center; padding: 3rem; }

/* ── Modal ──────────────────────────────────────────────────── */
.modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.5); z-index: 2000;
  align-items: center; justify-content: center; padding: 1rem;
}
.modal-overlay.is-open { display: flex; }
.modal {
  background:var(--surface);
  border-radius: var(--radius-lg);
  padding: 2rem;
  max-width: 520px; width: 100%;
  box-shadow: var(--shadow-lg);
  position: relative; max-height: 90vh; overflow-y: auto;
}
.modal__close {
  position: absolute; top: 1rem; right: 1rem;
  background: none; border: none; font-size: 1.4rem;
  cursor: pointer; color: var(--gray); padding: .25rem;
}

/* ── Upload de imagem ───────────────────────────────────────── */
.upload-zone {
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: 2.5rem 1rem;
  text-align: center; cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
  background: var(--bg);
}
.upload-zone:hover,
.upload-zone.is-dragging { border-color: var(--purple); background: rgba(115,4,195,.04); }
.upload-zone__icon { font-size: 2.5rem; margin-bottom: .75rem; color: var(--gray-light); }
.upload-zone__text { font-size: .9rem; color: var(--gray); }

/* ── Barra de progresso de envio (estilo WordPress) ────────────────────── */
#pe-media-upload-progress { margin-top: .85rem; display: flex; flex-direction: column; gap: .6rem; }
.pe-upload-item {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  column-gap: .6rem; row-gap: .3rem;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  padding: .55rem .75rem;
}
.pe-upload-item__top { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: .75rem; }
.pe-upload-item__name { font-size: .8rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pe-upload-item__size { font-size: .74rem; color: var(--gray-light); flex-shrink: 0; }
.pe-upload-item__bar {
  height: 6px; border-radius: 4px; background: rgba(0,0,0,.08); overflow: hidden;
}
.pe-upload-item__fill {
  height: 100%; background: var(--purple); border-radius: 4px;
  transition: width .15s ease;
}
.pe-upload-item__pct { font-size: .72rem; color: var(--gray); min-width: 52px; text-align: right; }
.pe-upload-item.is-done .pe-upload-item__fill { background: #1FF07A; }
.pe-upload-item.is-done .pe-upload-item__pct { color: #166534; }
.pe-upload-item.is-error .pe-upload-item__fill { background: #EF4444; width: 100% !important; }
.pe-upload-item.is-error .pe-upload-item__pct { color: #991B1B; }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: .75rem;
  margin-top: 1rem;
}
.gallery-item {
  position: relative; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 1; border: 2px solid var(--border);
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; }
.gallery-item__badge {
  position: absolute; top: 4px; left: 4px;
  background: var(--purple); color: #fff;
  font-size: .65rem; font-weight: 700; padding: 2px 6px;
  border-radius: 4px;
}
.gallery-item__remove {
  position: absolute; top: 4px; right: 4px;
  background: rgba(0,0,0,.65); color: #fff;
  border: none; border-radius: 50%;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem; cursor: pointer;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  /* .pe-desktop-nav (navbar + categorias) fica oculto em mobile — ver .pe-mobile-header/.pe-mobile-nav */
  .panel-layout { grid-template-columns: 1fr; }
  .panel-sidebar { display: none; position: fixed; inset: 0; z-index: 999; width: 260px; }
  .panel-sidebar.is-open { display: flex; }
  .panel-content { padding: 1.25rem; }

  .footer__grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .products-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }

  .filters-bar { flex-direction: column; }
  .filter-group { min-width: unset; }
}

@media (max-width: 480px) {
  .footer__grid { grid-template-columns: 1fr; }
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .footer__bottom { flex-direction: column; text-align: center; }
}

/* ── Largura total: só menu, rodapé e páginas de listagem ─────────────────
   Resto do site (contacto, sobre, faq, produto, conta, etc.) mantém 1200/1400px.
   A classe .pe-fullwidth é adicionada ao <body> em functions.php
   (home, catálogo, lojas, favoritos). Menu e rodapé são sempre largura total. */
.navbar .container,
.footer > .container,
body.pe-fullwidth .container { max-width: none; padding-left: var(--pe-gutter); padding-right: var(--pe-gutter); }

/* ── WordPress core classes ─────────────────────────────────── */
.wp-block-group.is-layout-constrained > * { max-width: 1200px; margin-left: auto; margin-right: auto; }
.alignwide  { max-width: 1400px; margin-left: auto; margin-right: auto; }
.alignfull  { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); }

/* ── Dashboard: sidebar fixa + conteúdo lateral —————————— */
.dashboard {
  display: flex;
  min-height: 100vh;
}
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 240px;
  flex-shrink: 0;
  background:var(--surface);
  color: var(--text);
  z-index: 100;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  box-shadow: 2px 0 8px rgba(0,0,0,.05);
  overflow: hidden;
  transition: width .25s cubic-bezier(.4,0,.2,1);
}
/* Estado colapsado: só ícones */
.sidebar.collapsed { width: 62px; }
/* Mobile (≤900px): volta a drawer */
@media (max-width: 900px) {
  .dashboard { display: block; }
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; height: auto;
    width: 280px; max-width: 88vw;
    transform: translateX(-100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    z-index: 980;
    box-shadow: 4px 0 32px rgba(0,0,0,.18);
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar.collapsed { width: 280px; transform: translateX(0); }

  /* Secções em acordeão — mesma formatação/comportamento do menu de
     categorias (pe-cat-drawer__group): título clicável, seta que roda,
     submenu recolhido por omissão. */
  .sidebar__section-title {
    cursor: pointer;
    pointer-events: auto;
  }
  .sidebar__section-caret {
    display: flex;
    transition: transform .25s;
  }
  .sidebar__section-title[aria-expanded="true"] .sidebar__section-caret { transform: rotate(180deg); }
  .sidebar__section-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
  }
  .sidebar__section.is-open .sidebar__section-body { max-height: 600px; }
}
@media (max-width: 480px) {
  .sidebar { width: 100vw; max-width: 100vw; }
}
/* Header da sidebar: logo + botões */
.sidebar__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  background: var(--purple-dark);
  flex-shrink: 0;
  overflow: hidden;
  min-height: 56px;
}
/* Fechar (só mobile) */
.sidebar__close {
  background: none; border: none; color: #fff; cursor: pointer; padding: .25rem;
  display: flex; align-items: center; justify-content: center; border-radius: 6px;
  transition: background .15s; flex-shrink: 0;
}
.sidebar__close:hover { background: rgba(255,255,255,.15); }
@media (min-width: 901px) { .sidebar__close { display: none; } }
/* Zona do meio com scroll vertical */
.sidebar__scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: .75rem 0;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.sidebar__scroll::-webkit-scrollbar { width: 4px; }
.sidebar__scroll::-webkit-scrollbar-track { background: transparent; }
.sidebar__scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.sidebar__logo {
  font-size: 1rem; font-weight: 800;
  color: #fff; margin-bottom: 0;
  display: block; text-decoration: none;
  padding: 0;
}
.sidebar__logo span { color: #fff; }
/* Logo completo (visível expandido, oculto colapsado) */
.sidebar__logo-full { display: block; }
/* Ícone/favicon (oculto expandido, visível colapsado) */
.sidebar__logo-icon { display: none; }
.sidebar__section { padding: .3rem 0; }
.sidebar__section + .sidebar__section { border-top: 1px solid var(--border); }
.sidebar__section-title {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--gray); padding: .65rem 1.25rem;
  background: none; border: none; text-align: left;
}
.sidebar__section:has(.sidebar__link--active) .sidebar__section-title,
.sidebar__section.has-active .sidebar__section-title { color: var(--purple); }
.sidebar__section-caret {}
.sidebar__section-body {
  display: flex; flex-direction: column; gap: 2px;
  padding: 0 .75rem;
}
/* Collapse effect removed — sections always visible */
.sidebar__section.is-collapsed .sidebar__section-body { max-height: none; }
.sidebar__link {
  display: flex; align-items: center; gap: .65rem;
  padding: .6rem .75rem; border-radius: 8px;
  font-size: .875rem; font-weight: 500; color: var(--text);
  transition: background .15s, color .15s;
  text-decoration: none;
}
.sidebar__link:hover { background: var(--bg); color: var(--purple); text-decoration: none; }
.sidebar__link--active { background: rgba(115,4,195,.08); color:var(--purple-text); font-weight: 600; }
.sidebar__link svg { width: 16px; height: 16px; flex-shrink: 0; }
.sidebar__badge {
  margin-left: auto; background: var(--purple, #7304C3);
  color: #fff; border-radius: 100px;
  font-size: .7rem; font-weight: 700;
  padding: .1rem .45rem;
}

/* ── Sidebar colapsada: só ícones ──────────────────────────────── */
@media (min-width: 901px) {
  .sidebar__section-title { cursor: default; pointer-events: none; }
  .sidebar__section-caret { display: none; }
  .sidebar.collapsed .sidebar__header { padding: .75rem; justify-content: center; }
  .sidebar.collapsed .sidebar__logo { display: flex; justify-content: center; padding: 0; }
  .sidebar.collapsed .sidebar__logo-full { display: none; }
  .sidebar.collapsed .sidebar__section-title { display: none; }
  .sidebar.collapsed .sidebar__section + .sidebar__section { border-top: none; }
  .sidebar.collapsed .sidebar__section-body {
    max-height: 9999px !important;
    padding: 0 .35rem;
  }
  .sidebar.collapsed .sidebar__section.is-collapsed .sidebar__section-body { max-height: 9999px !important; }
  .sidebar.collapsed .sidebar__link {
    justify-content: center;
    padding: .65rem;
    gap: 0;
    font-size: 0; /* esconde texto; SVGs não herdam font-size */
    position: relative;
  }
  .sidebar.collapsed .sidebar__link svg { width: 18px; height: 18px; flex-shrink: 0; }
  .sidebar.collapsed .sidebar__badge { display: none; }
  .sidebar.collapsed .sidebar__logo-icon { display: block; }
  .sidebar.collapsed .sidebar__section { padding: .15rem 0; }
  /* Tooltip ao hover no estado colapsado */
  .sidebar.collapsed .sidebar__link::after {
    content: attr(title);
    position: absolute;
    left: calc(100% + 8px); top: 50%; transform: translateY(-50%);
    background: var(--dark); color: #fff;
    font-size: .78rem; font-weight: 500; font-family: inherit;
    white-space: nowrap; padding: .3rem .65rem;
    border-radius: 6px; pointer-events: none;
    opacity: 0; transition: opacity .15s; z-index: 200;
  }
  .sidebar.collapsed .sidebar__link:hover::after { opacity: 1; }
}

/* Botão colapsar/expandir (desktop) */
.sidebar__collapse-btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: .8rem;
  border: none; border-top: 1px solid var(--border);
  background: none; color: var(--gray);
  cursor: pointer; flex-shrink: 0;
  transition: color .15s, background .15s;
}
.sidebar__collapse-btn:hover { background: var(--bg); color: var(--purple); }
.sidebar__collapse-btn svg { width: 18px; height: 18px; transition: transform .25s; }
.sidebar.collapsed .sidebar__collapse-btn svg { transform: rotate(180deg); }
@media (max-width: 900px) { .sidebar__collapse-btn { display: none; } }

.main-content { flex: 1; min-width: 0; padding: 0 2rem 2rem; overflow-x: clip; }

/* Topbar do painel: breadcrumb + avatar + sair */
.panel-topbar {
  position: sticky; top: 0; z-index: 60;
  background:var(--surface);
  height: 56px;
  display: flex; align-items: center; gap: 1rem;
  padding: 0 1.5rem;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  /* Extend topbar to edges, compensate main-content side padding */
  margin: 0 -2rem 2rem;
}
/* Toggle mobile (só ≤900px) */
.sidebar-toggle {
  display: none; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; color: var(--text);
  padding: .3rem; border-radius: 6px; flex-shrink: 0;
}
.sidebar-toggle:hover { background: var(--bg); }
@media (max-width: 900px) { .sidebar-toggle { display: flex; } }

/* Breadcrumb */
.panel-topbar__breadcrumb {
  flex: 1; display: flex; align-items: center; gap: .4rem;
  font-size: .875rem; color: var(--gray); min-width: 0;
  overflow: hidden;
}
.panel-topbar__breadcrumb a {
  color: var(--gray); text-decoration: none;
  white-space: nowrap; transition: color .15s;
}
.panel-topbar__breadcrumb a:hover { color: var(--purple); text-decoration: none; }
.panel-topbar__breadcrumb-sep { color: var(--border); font-size: 1.1rem; line-height: 1; }
.panel-topbar__breadcrumb-current {
  font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Lado direito */
.panel-topbar__right {
  display: flex; align-items: center; gap: .65rem; flex-shrink: 0;
}
.panel-topbar__logout {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .82rem; font-weight: 600; color: var(--gray);
  text-decoration: none; white-space: nowrap;
  padding: .35rem .75rem;
  border: 1.5px solid var(--border);
  border-radius: 8px; background: none; cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.panel-topbar__logout:hover {
  color: #DC2626; border-color: rgba(220,38,38,.35);
  background: rgba(220,38,38,.05); text-decoration: none;
}
.panel-topbar__logout svg { width: 14px; height: 14px; }
@media (max-width: 900px) { .panel-topbar__logout { display: none !important; } }
.pe-logout-mobile-only { display: none !important; }
@media (max-width: 900px) { .pe-logout-mobile-only { display: flex !important; } }

/* Overlay mobile */
.sidebar-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45);
  z-index: 970; opacity: 0; transition: opacity .25s;
}
.sidebar-overlay.open { display: block; opacity: 1; }

.flash {
  padding: .8rem 1.25rem; border-radius: var(--radius, 10px);
  margin-bottom: 1.5rem; font-size: .875rem; font-weight: 500;
}
.flash--success { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }
.flash--error   { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.flash--warning { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.flash--info    { background: #EDE9FE; color: #4c1d95; border: 1px solid #ddd6fe; }

@media (max-width: 900px) {
  .main-content { padding: 0 1rem 1rem; }
  .panel-topbar { margin: 0 -1rem 1rem; }
}

/* No topbar do painel (mobile), o nome ao lado do avatar é redundante:
   já aparece em destaque dentro do popup/modal do avatar. */
@media (max-width: 900px) {
  .panel-topbar__right .pe-user-menu__name { display: none; }
}

/* ── Barra de navegação inferior do painel (mobile) — visual de aplicativo ── */
.pe-panel-mobile-nav { display: none; }
@media (max-width: 900px) {
  .pe-panel-mobile-nav {
    display: flex;
    align-items: stretch;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: calc(var(--pe-pnav-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background:var(--surface);
    border-top: 1px solid var(--border, var(--border));
    box-shadow: 0 -4px 20px rgba(0,0,0,.08);
    z-index: 960;
  }
  .pe-panel-mobile-nav__item {
    flex: 1;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: .2rem;
    text-decoration: none;
    color: var(--gray, #6B7280);
    font-size: .62rem; font-weight: 600;
    background: none; border: none; padding: 0; margin: 0; font-family: inherit; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .pe-panel-mobile-nav__item.is-active { color: var(--purple, #7304C3); }
  .pe-panel-mobile-nav__icon { position: relative; display: flex; }
  .pe-panel-mobile-nav__label { line-height: 1; text-align: center; }
  .pe-panel-mobile-nav__badge {
    position: absolute; top: -5px; right: -7px;
    background: var(--purple, #7304C3); color: #fff;
    font-size: .55rem; font-weight: 700;
    min-width: 16px; height: 16px;
    border-radius: 100px; padding: 0 3px;
    display: flex; align-items: center; justify-content: center;
    line-height: 1;
  }
  /* Espaço para o conteúdo não ficar escondido atrás da barra fixa */
  .main-content { padding-bottom: calc(var(--pe-pnav-h) + env(safe-area-inset-bottom, 0px) + 1.25rem) !important; }
  /* A antiga barra "Sair" do topbar deixa de ser necessária: já está em "Mais" */
  .panel-topbar__logout { display: none !important; }
}

/* ── Sensação de aplicativo em todo o site: sem "elástico" ao arrastar,
   sem flash azul ao tocar, sem seleção acidental de texto em botões ── */
html, body { overscroll-behavior-y: contain; }
a, button, .btn, .sidebar__link, .pe-mobile-nav__item, .pe-panel-mobile-nav__item {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
@media (max-width: 900px) {
  body.pe-panel-body { overscroll-behavior-y: contain; }
}

/* ── Banner "Instalar aplicativo" ── */
/* ── Banner de instalação PWA ── */
#pe-pwa-banner {
  position: fixed;
  bottom: 1.25rem; left: 50%; transform: translateX(-50%);
  z-index: 99999;
  display: flex; align-items: center; gap: .75rem;
  background: #18181B; color: #fff;
  padding: .85rem 1rem .85rem 1rem;
  font-size: .83rem; font-weight: 500;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.06);
  width: calc(100% - 2rem); max-width: 420px;
  animation: pe-pwa-slide-up .28s cubic-bezier(.34,1.56,.64,1);
}
@keyframes pe-pwa-slide-up { from { transform: translateX(-50%) translateY(20px); opacity:0; } to { transform: translateX(-50%) translateY(0); opacity:1; } }
#pe-pwa-banner .pe-pwa-banner__icon {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--pe-pwa-color, #7304C3);
}
#pe-pwa-banner .pe-pwa-banner__text { flex: 1; line-height: 1.35; }
#pe-pwa-banner .pe-pwa-banner__text strong { font-weight: 700; color: #fff; display: block; font-size: .85rem; }
#pe-pwa-banner .pe-pwa-banner__text span { font-size: .78rem; color:var(--gray-light); }
#pe-pwa-banner .pe-pwa-banner__btn {
  flex-shrink: 0;
  background: var(--pe-pwa-color, #7304C3); color: #fff;
  border: none; border-radius: 10px; padding: .5rem 1rem;
  font-size: .8rem; font-weight: 700; cursor: pointer;
  white-space: nowrap;
  transition: opacity .15s;
}
#pe-pwa-banner .pe-pwa-banner__btn:hover { opacity: .88; }
#pe-pwa-banner .pe-pwa-banner__close {
  flex-shrink: 0; background: none; border: none; color:var(--gray);
  font-size: 1.2rem; line-height: 1; cursor: pointer; padding: .2rem;
  border-radius: 6px; transition: background .15s;
}
#pe-pwa-banner .pe-pwa-banner__close:hover { background: rgba(255,255,255,.08); }

/* ── Modal de instruções (instalar no iOS / desktop) ── */
#pe-pwa-ios-modal {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(9,9,11,.6);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: flex-end; justify-content: center;
  animation: pe-pwa-fade-in .2s ease;
}
@keyframes pe-pwa-fade-in { from { opacity: 0; } to { opacity: 1; } }
#pe-pwa-ios-modal .pe-pwa-ios-modal__box {
  position: relative; width: 100%; max-width: 440px;
  background:var(--surface); border-radius: 20px 20px 0 0;
  padding: 2rem 1.75rem calc(2rem + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -4px 40px rgba(0,0,0,.18);
  animation: pe-pwa-sheet-up .28s cubic-bezier(.34,1.2,.64,1);
}
@keyframes pe-pwa-sheet-up { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@media (min-width: 640px) {
  #pe-pwa-ios-modal { align-items: center; }
  #pe-pwa-ios-modal .pe-pwa-ios-modal__box {
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,.22);
  }
}
#pe-pwa-ios-modal .pe-pwa-ios-modal__close {
  position: absolute; top: 1rem; right: 1rem;
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  background:var(--surface-2); border: none; border-radius: 50%;
  font-size: 1.1rem; line-height: 1; color:var(--gray); cursor: pointer;
  transition: background .15s;
}
#pe-pwa-ios-modal .pe-pwa-ios-modal__close:hover { background:var(--surface-3); }
#pe-pwa-ios-modal .pe-pwa-ios-modal__header {
  display: flex; align-items: center; gap: .9rem; margin-bottom: 1.25rem;
}
#pe-pwa-ios-modal .pe-pwa-ios-modal__app-icon {
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--pe-pwa-color, #7304C3);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
#pe-pwa-ios-modal .pe-pwa-ios-modal__title {
  font-size: 1.1rem; font-weight: 800; color:var(--text); margin: 0 0 .2rem;
}
#pe-pwa-ios-modal .pe-pwa-ios-modal__subtitle {
  font-size: .8rem; color:var(--gray); margin: 0;
}
#pe-pwa-ios-modal .pe-pwa-ios-modal__divider {
  border: none; border-top: 1px solid var(--border); margin: 0 0 1.25rem;
}
#pe-pwa-ios-modal .pe-pwa-ios-modal__steps {
  margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .85rem;
}
#pe-pwa-ios-modal .pe-pwa-ios-modal__steps li {
  display: flex; align-items: flex-start; gap: .75rem;
  font-size: .875rem; color:var(--text); line-height: 1.45;
}
#pe-pwa-ios-modal .pe-pwa-ios-modal__step-num {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  background: var(--pe-pwa-color, #7304C3); color: #fff;
  font-size: .72rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  margin-top: .05rem;
}

/* Scroll horizontal em tabelas dentro do painel (telas pequenas) */
.main-content .card,
.main-content > div {
  min-width: 0;
}
.main-content table {
  min-width: 600px;
}
.main-content .pe-table-wrap,
.main-content .card { overflow-x: auto; }
/* Wrapper automático para tabelas no painel */
.pe-panel-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── Catálogo de peças — porta fiel do original (product-grid/product-card) ── */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1rem;
}
.product-card {
  background:var(--surface);
  border-radius: var(--radius-lg, 12px);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: box-shadow .2s, transform .2s;
  text-decoration: none; color: inherit;
  display: block;
}
.product-card:hover {
  box-shadow: var(--shadow-md, 0 6px 20px rgba(0,0,0,.08));
  transform: translateY(-3px);
  text-decoration: none;
  color: inherit;
}
.product-card__img {
  width: 100%; aspect-ratio: 16/9;
  object-fit: cover;
  background: transparent;
  display: block;
}
.product-card__body { padding: .9rem 1rem; }
.product-card__brand {
  font-size: .75rem; font-weight: 600;
  color: var(--purple);
  text-transform: uppercase; letter-spacing: .05em;
  margin-bottom: .25rem;
}
.product-card__title {
  font-size: .92rem; font-weight: 600; color: var(--text);
  margin-bottom: .5rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.product-card__meta { display: flex; gap: .5rem; flex-wrap: wrap; }
.product-card__price {
  font-size: 1.05rem; font-weight: 700;
  color:var(--purple-text);
  margin-top: .6rem;
}
.product-card__location {
  font-size: .78rem; color: var(--gray);
  margin-top: .35rem;
  display: flex; align-items: center; gap: .25rem;
}
/* Números reais do produto (vendidas · views · contactos) nos cards */
.pe-pstats { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .6rem; margin-top: .4rem; font-size: .7rem; font-weight: 600; color: var(--gray, #71717A); line-height: 1.2; }
.pe-pstats__i { display: inline-flex; align-items: center; gap: .22rem; white-space: nowrap; }
.pe-pstats__i svg { flex: 0 0 auto; }
.pe-pstats__i--sold { color: #047857; }
.pe-pstats__i:last-child svg { color: #25D366; }
.product-card__views {
  font-size: .72rem; color: var(--gray-light);
  margin-top: .2rem;
  display: flex; align-items: center; gap: .25rem;
}

.badge {
  display: inline-flex; align-items: center;
  padding: .2rem .6rem; border-radius: 100px;
  font-size: .73rem; font-weight: 600;
}
.badge--new      { background: #d1fae5; color: #065f46; }
.badge--used     { background: #fef3c7; color: #92400e; }
.badge--active   { background: #EDE9FE; color: #5b21b6; }
.badge--green    { background: #d1fae5; color: #065f46; }
.badge--yellow   { background: #fef3c7; color: #92400e; }
.badge--purple   { background: #EDE9FE; color: #5b21b6; }
.badge--red      { background: #fee2e2; color: #991b1b; }
.badge--gray     { background:var(--surface-2); color:var(--gray); }
.badge--blue     { background: #dbeafe; color: #1d4ed8; }
.badge--warning  { background: #fef3c7; color: #92400e; }
.badge--error    { background: #fee2e2; color: #991b1b; }

.pagination { display: flex; gap: .35rem; align-items: center; margin-top: 2rem; flex-wrap: wrap; }
.pagination__btn {
  padding: .45rem .8rem; border-radius: 8px; font-size: .875rem;
  color: var(--text-muted, var(--gray)); background:var(--surface); border: 1px solid var(--border);
  transition: .15s; text-decoration: none;
}
.pagination__btn:hover { border-color: var(--purple); color: var(--purple); text-decoration: none; }
.pagination__btn--active { background: var(--purple); color: #fff; border-color: var(--purple); }

.filters {
  background:var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}
.filters__row { display: flex; gap: .75rem; flex-wrap: wrap; align-items: flex-end; }
.filters__item { flex: 1; min-width: 150px; }

@media (max-width: 768px) {
  .filters__row { flex-direction: column; align-items: stretch; }
  .filters__item { min-width: 0; }
}

/* ── Botão de favoritos (coração) ── */
.pe-fav-btn:hover { transform: scale(1.1); box-shadow: 0 4px 12px rgba(0,0,0,.18); }
.pe-fav-btn:active { transform: scale(.94); }
.pe-fav-btn svg { display: block; }
.pe-fav-btn.is-active { color: #DC2626; }
.pe-fav-btn:not(.is-active) { color:var(--gray-light); }
.pe-fav-btn:not(.is-active):hover { color: #DC2626; }
.pe-fav-btn:disabled { opacity: .6; cursor: default; transform: none; }

/* ── Página de produto individual — grid principal + sidebar sticky ── */
.product-single-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 2.5rem;
  align-items: start;
}
.product-single-sidebar {
  position: sticky;
  top: 80px;
  display: grid;
  gap: 1rem;
  min-width: 0;
}
@media (max-width: 900px) {
  .product-single-grid { grid-template-columns: 1fr; }
  .product-single-main { display: contents; }
  .ps-gallery { order: 1; }
  .product-single-sidebar { position: static; top: auto; order: 2; }
  .ps-desc, .ps-combo, .ps-reviews-summary, .ps-reviews-list, .ps-reviews-form { order: 3; }
}

/* ── Popup do avatar/utilizador (navbar pública + topbar do painel) ── */
.pe-user-menu { position: relative; display: inline-flex; align-items: center; }
.pe-user-menu__trigger {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: .25rem .4rem .25rem .25rem;
  border-radius: 100px;
  transition: background .15s;
  color: inherit;
  font: inherit;
}
.pe-user-menu__trigger:hover { background: rgba(0,0,0,.04); }
.pe-user-menu__avatar {
  width: 32px; height: 32px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--border, var(--border)); flex-shrink: 0; display: block;
}
.pe-user-menu__avatar--placeholder {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--purple-light, rgba(115,4,195,.1)); color: var(--purple, #7304C3);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pe-user-menu__name { font-size: .875rem; font-weight: 600; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-user-menu__caret { color: var(--gray, #71717A); transition: transform .15s; flex-shrink: 0; }
.pe-user-menu.is-open .pe-user-menu__caret { transform: rotate(180deg); }
.pe-user-menu__dropdown {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 210px;
  background:var(--surface); border: 1px solid var(--border, var(--border)); border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: .4rem; z-index: 200;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .15s, transform .15s, visibility .15s;
}
.pe-user-menu.is-open .pe-user-menu__dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.pe-user-menu__dropdown-name { padding: .55rem .75rem .4rem; font-size: .8rem; font-weight: 700; color: var(--text, #18181B); border-bottom: 1px solid var(--border, var(--border)); margin-bottom: .3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pe-user-menu__item {
  display: flex; align-items: center; gap: .55rem; width: 100%;
  padding: .55rem .75rem; border-radius: 8px; font-size: .85rem; font-weight: 500;
  color: var(--text, #18181B); background: none; border: none; text-align: left; cursor: pointer;
  text-decoration: none;
}
.pe-user-menu__item:hover { background: var(--bg, #F9F9FB); color: var(--purple, #7304C3); text-decoration: none; }
.pe-user-menu__item--danger { color: #DC2626; }
.pe-user-menu__item--danger:hover { background: rgba(220,38,38,.08); color: #DC2626; }

/* ── Capa da loja premium ── */
.pe-store-cover { height: 90px; }
@media (max-width: 768px) {
  .pe-store-cover { height: 60px; }
}


.navbar__fav-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--pe-header-text, var(--text, #18181B));
  background: transparent;
  transition: background .15s, color .15s, transform .15s;
  flex-shrink: 0;
}
.navbar__fav-btn:hover {
  background: color-mix(in srgb, var(--pe-header-hover, var(--pe-header-accent, #DC2626)) 8%, transparent);
  color: var(--pe-header-hover, var(--pe-header-accent, #DC2626));
  text-decoration: none;
  transform: scale(1.05);
}
.navbar__fav-btn.navbar__link--active {
  color: var(--pe-header-active, var(--pe-header-accent, #DC2626));
  background: color-mix(in srgb, var(--pe-header-active, var(--pe-header-accent, #DC2626)) 10%, transparent);
}
.navbar__fav-count {
  position: absolute;
  top: -2px;
  right: -2px;
  background: var(--pe-header-accent, #DC2626);
  color: #fff;
  font-size: .62rem;
  font-weight: 700;
  line-height: 1;
  min-width: 16px;
  height: 16px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  border: 2px solid var(--surface);
}

/* ── Dropdown de notificações (sino) — aparece ao passar o rato, sem sair
   da página. Mantém-se aberto também enquanto o rato está sobre o próprio
   dropdown (não só sobre o botão), para dar tempo de clicar nos botões. ── */
.pe-gate-notif-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 340px;
  max-width: calc(100vw - 2rem);
  background:var(--surface);
  border: 1px solid var(--border-light, var(--border));
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,.14);
  z-index: 200;
  overflow: hidden;
}
.pe-gate-notif-wrap:hover .pe-gate-notif-dropdown,
.pe-gate-notif-dropdown:hover,
.pe-gate-notif-dropdown.is-open {
  display: block;
}
.pe-gate-notif-dropdown__header {
  padding: .8rem 1rem;
  font-size: .82rem;
  font-weight: 700;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.pe-gate-notif-dropdown__list {
  max-height: 340px;
  overflow-y: auto;
}
.pe-gate-notif-dropdown__empty {
  padding: 1.5rem 1rem;
  text-align: center;
  font-size: .8rem;
  color:var(--gray-light);
}
.pe-gate-notif-dropdown__item {
  padding: .7rem 1rem;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: .6rem;
}
.pe-gate-notif-dropdown__item-img {
  width: 34px; height: 34px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background:var(--surface-2);
}
.pe-gate-notif-dropdown__item-body { flex: 1; min-width: 0; }
.pe-gate-notif-dropdown__item-title {
  font-size: .78rem; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pe-gate-notif-dropdown__item-sub { font-size: .7rem; color:var(--gray); margin-top: 1px; }
.pe-gate-notif-dropdown__item-actions { display: flex; gap: .3rem; flex-shrink: 0; }
.pe-gate-notif-dropdown__btn {
  border: none; border-radius: 7px; padding: .3rem .55rem; font-size: .68rem; font-weight: 700; cursor: pointer;
}
.pe-gate-notif-dropdown__btn--accept { background: var(--purple,#7304C3); color: #fff; }
.pe-gate-notif-dropdown__btn--reject { background:var(--surface-2); color:var(--text-muted); }
.pe-gate-notif-dropdown__btn--wa { background: #DCFCE7; color: #166534; text-decoration: none; display: inline-flex; align-items: center; gap: .2rem; }
.pe-gate-notif-dropdown__item-countdown { font-size: .66rem; font-weight: 700; color: var(--purple,#7304C3); flex-shrink: 0; }
.pe-gate-notif-dropdown__footer {
  display: block;
  text-align: center;
  padding: .7rem 1rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--purple, #7304C3);
  border-top: 1px solid var(--border);
  text-decoration: none;
}
@media (max-width: 480px) {
  .pe-gate-notif-dropdown { right: -1rem; width: calc(100vw - 1rem); }
}

/* ── Hero Slider (homepage) ── */
.pe-hero-slider {
  position: relative;
  width: 100%;
  height: 480px;
  overflow: hidden;
  background: var(--purple-dark);
}
.pe-hero-slider__track { position: relative; width: 100%; height: 100%; }
.pe-hero-slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1), filter .9s ease;
  transform: scale(1.04);
  filter: blur(6px);
  z-index: 0;
}
.pe-hero-slide.is-active   { opacity: 1; visibility: visible; z-index: 2; transform: scale(1); filter: blur(0); }
.pe-hero-slide.is-leaving  { opacity: 0; visibility: visible; z-index: 1; transform: scale(.97); filter: blur(2px); transition-duration: .7s; }
.pe-hero-slide__img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.02);
  transition: transform .65s cubic-bezier(.4,0,.2,1);
}
.pe-hero-slide.is-active .pe-hero-slide__img { animation: pe-hero-kenburns 6.5s ease-out forwards; }
@keyframes pe-hero-kenburns { from { transform: scale(1); } to { transform: scale(1.09); } }
.pe-hero-slide__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.2) 55%, rgba(0,0,0,0) 100%);
}
/* Conteúdo alinhado ao início do container (esquerda) */
.pe-hero-slide__content {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: 1.5rem;
  padding-bottom: 2rem;
  /* Alinha com o .container da home (largura total) */
  padding-left: var(--pe-gutter);
  padding-right: 2rem;
  max-width: none;
}
.pe-hero-slide__title {
  font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 800; line-height: 1.15;
  margin-bottom: .6rem;
  animation: peHeroFadeUp .6s cubic-bezier(.4,0,.2,1) both .1s;
  max-width: 600px;
}
.pe-hero-slide__subtitle {
  font-size: 1.05rem; max-width: 520px; margin-bottom: 1.25rem;
  animation: peHeroFadeUp .6s cubic-bezier(.4,0,.2,1) both .22s;
}
.pe-hero-slide__cta { width: fit-content; animation: peHeroFadeUp .6s cubic-bezier(.4,0,.2,1) both .35s; }
.pe-hero-slide--light .pe-hero-slide__title,
.pe-hero-slide--light .pe-hero-slide__subtitle { color: #fff; }
.pe-hero-slide--dark .pe-hero-slide__title,
.pe-hero-slide--dark .pe-hero-slide__subtitle { color: var(--text, #18181B); }
.pe-hero-slide--dark .pe-hero-slide__overlay { background: linear-gradient(90deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.15) 60%, rgba(255,255,255,0) 100%); }

@keyframes peHeroFadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

/* Setas: canto inferior DIREITO, lado a lado, alinhadas com o container */
.pe-hero-nav {
  position: absolute;
  bottom: 1.25rem;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.18); color: #fff; border: 1px solid rgba(255,255,255,.25);
  font-size: 1.4rem; cursor: pointer; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, transform .15s;
  backdrop-filter: blur(4px);
}
.pe-hero-nav:hover { background: rgba(255,255,255,.32); transform: scale(1.08); }
/* Canto inferior direito, alinhadas com o início do container (lado direito) */
.pe-hero-nav--next {
  right: var(--pe-gutter);
}
.pe-hero-nav--prev {
  right: calc(var(--pe-gutter) + 48px);
}
/* Dots: canto inferior esquerdo */
.pe-hero-dots {
  position: absolute; bottom: 1.85rem;
  left: var(--pe-gutter);
  display: flex; gap: .4rem; z-index: 3; align-items: left;
}
.pe-hero-dot {
  position: relative; width: 8px; height: 8px; border-radius: 100px; border: none;
  background: rgba(255,255,255,.4); cursor: pointer; transition: width .25s, background .25s;
  padding: 0; overflow: hidden;
}
.pe-hero-dot.is-active { background: rgba(255,255,255,.35); width: 34px; }
.pe-hero-dot__fill {
  position: absolute; inset: 0; width: 0%; background:var(--surface); border-radius: 100px;
  transform-origin: left;
}
.pe-hero-dot.is-active.is-running .pe-hero-dot__fill {
  animation: pe-hero-fill 5.5s linear forwards;
}
@keyframes pe-hero-fill { from { width: 0%; } to { width: 100%; } }

@media (max-width: 640px) {
  .pe-hero-slider { height: 360px; }
  /* Mobile: conteúdo na extremidade esquerda da tela com padding mínimo */
  .pe-hero-slide__content { padding-left: 0.875rem !important; padding-right: 1rem !important; padding-bottom: 2rem; }
  .pe-hero-nav--next { right: 1rem; }
  .pe-hero-nav--prev { right: 53px; }
  .pe-hero-dots { left: 0.875rem; }
}



/* ── Pesquisa em tempo real ── */
.pe-live-search { position: relative; }
.pe-live-search__results {
  display: none; position: absolute; top: calc(100% + .5rem); left: 0; right: 0;
  background:var(--surface); border-radius: var(--radius-lg,10px); box-shadow: var(--shadow-lg, 0 10px 40px rgba(0,0,0,.2));
  z-index: 50; overflow: hidden; max-height: 380px; overflow-y: auto;
}
.pe-live-search__results.is-open { display: block; }
.pe-live-search__item {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem .85rem; text-decoration: none; color: var(--text, #18181B);
  border-bottom: 1px solid var(--border, var(--border));
}
.pe-live-search__item:hover { background: var(--bg, #F9F9FB); text-decoration: none; }
.pe-live-search__item img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; flex-shrink: 0; background: var(--bg); }
.pe-live-search__item-title { font-size: .85rem; font-weight: 600; }
.pe-live-search__item-price { font-size: .78rem; color: var(--purple); font-weight: 700; }
.pe-live-search__more { display: block; text-align: center; padding: .6rem; font-size: .82rem; font-weight: 600; color: var(--purple); }
.pe-live-search__empty { padding: 1rem; text-align: center; font-size: .82rem; color: var(--gray); }

/* ── Card com mini-galeria (até 3 fotos, cicla ao passar o rato) ── */
.product-card__media { position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden; background: transparent; }
.product-card__media .product-card__img {
  position: absolute; inset: 0; opacity: 0; transition: opacity .3s ease;
}
.product-card__media .product-card__img.is-active { opacity: 1; }
.product-card__dots {
  position: absolute; bottom: .5rem; left: 50%; transform: translateX(-50%);
  display: flex; gap: .3rem; z-index: 2;
}
.product-card__dot { width: 5px; height: 5px; border-radius: 100px; background: rgba(255,255,255,.6); transition: .2s; }
.product-card__dot.is-active { background:var(--surface); width: 14px; }

/* ── Slideshow automático dos combos patrocinados: só apresenta as fotos,
   nunca navega para a página de produto (por isso o cartão de combo é
   um <div>, não um <a>). ── */
.pe-sponsor-card--combo { cursor: pointer; }
.pe-combo-slideshow {
  position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden; background: transparent;
}
.pe-combo-slideshow__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .6s ease;
}
.pe-combo-slideshow__img.is-active { opacity: 1; }
.pe-combo-slideshow__dots {
  position: absolute; bottom: .5rem; left: 50%; transform: translateX(-50%);
  display: flex; gap: .3rem; z-index: 2;
  padding: .28rem .45rem; border-radius: 100px; background: rgba(0,0,0,.35);
}
.pe-combo-slideshow__dot { width: 5px; height: 5px; border-radius: 100px; background: rgba(255,255,255,.6); transition: .2s; }
.pe-combo-slideshow__dot.is-active { background:var(--surface); width: 14px; }

/* ── Seletor de produtos da newsletter ── */
.nl-product-row:hover { background: var(--bg, #F9F9FB); }

/* ── Barra de publicidade fixa no fundo do ecrã (HOME_TOP + HOME_MIDDLE) ── */
.pe-home-ad-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(100%);
  transition: transform .45s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
.pe-home-ad-bar.is-visible { transform: translateY(0); }
/*
 * O recolher/mostrar é feito por max-height + overflow:hidden no painel (e não por
 * transform), para que o próprio contentor encolha de facto — assim o botão
 * "Mostrar anúncio" fica sempre encostado ao fundo do ecrã, nunca a flutuar no
 * meio da página.
 */
.pe-home-ad-bar.is-collapsed .pe-home-ad-bar__panel { max-height: 0; }
.pe-home-ad-bar.is-collapsed .pe-home-ad-bar__toggle svg { transform: rotate(180deg); }

/* Largura e altura fixas para o botão, para não "saltar" ao trocar o texto
   entre "Ocultar anúncio" / "Mostrar anúncio". */
.pe-home-ad-bar__toggle {
  pointer-events: auto;
  width: 172px;
  height: 34px;
  display: flex; align-items: center; justify-content: center; gap: .35rem;
  background:var(--surface); color: var(--text);
  border: 1px solid var(--border); border-bottom: none;
  border-radius: 100px 100px 0 0;
  font-size: .72rem; font-weight: 600;
  box-shadow: 0 -2px 10px rgba(0,0,0,.06);
  cursor: pointer;
  position: relative; z-index: 2;
  flex-shrink: 0;
}
.pe-home-ad-bar__toggle svg { transition: transform .3s ease; flex-shrink: 0; }

/* Painel: a altura máxima expandida é fixa (--pe-ad-bar-h), a mesma para todos os
   anúncios. Voltou a ter largura limitada e centrada (não ocupa o ecrã todo) e
   cantos arredondados/sombra no topo, como antes — mas sem padding interno, para
   o banner continuar a preencher o cartão de ponta a ponta e a timeline continuar
   sobreposta em cima dele. */
.pe-home-ad-bar__panel {
  --pe-ad-bar-h: 150px;
  pointer-events: auto;
  width: 100%;
  max-width: none;
  max-height: var(--pe-ad-bar-h);
  overflow: hidden;
  box-shadow: 0 -8px 28px rgba(0,0,0,.2);
  transition: max-height .35s ease;
}
.pe-home-ad-bar__inner {
  position: relative;
  height: var(--pe-ad-bar-h);
  width: 100%;
  background: var(--dark);
  box-sizing: border-box;
}

/* Linha de tempo segmentada (estilo "stories") — sobreposta em cima do banner,
   não ocupa espaço próprio (só o botão de revelar/ocultar fica fora do banner). */
.pe-home-ad-bar__timeline {
  position: absolute;
  top: .5rem; left: .6rem; right: .6rem;
  z-index: 2;
  display: flex; gap: 4px;
  pointer-events: none;
}
.pe-home-ad-bar__seg { flex: 1; height: 3px; border-radius: 100px; background: rgba(255,255,255,.35); overflow: hidden; box-shadow: 0 0 4px rgba(0,0,0,.4); }
.pe-home-ad-bar__seg i {
  display: block; height: 100%; width: 0;
  background:var(--surface); border-radius: 100px;
  animation-timing-function: linear; animation-fill-mode: forwards;
}
.pe-home-ad-bar__seg.is-active i { animation-name: pe-ad-seg-fill; animation-duration: var(--rotate-ms, 6000ms); }
.pe-home-ad-bar__seg.is-done i { width: 100%; }
@keyframes pe-ad-seg-fill { from { width: 0; } to { width: 100%; } }

.pe-home-ad-bar__track { position: relative; height: 100%; width: 100%; }
.pe-home-ad-bar__item { display: none; position: absolute; inset: 0; }
.pe-home-ad-bar__item.is-active { display: block; }
.pe-home-ad-bar__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Barra de publicidade fixa escondida em ecrãs móveis */
@media (max-width: 768px) {
  .pe-home-ad-bar { display: none; }
}

/* ── Múltiplos anúncios na mesma posição (carrossel) ── */
.pe-ad-slot__track { position: relative; }
.pe-ad-slot__item { display: none; }
.pe-ad-slot__item.is-active { display: block; }
.pe-ad-slot__dots { display: flex; gap: .3rem; justify-content: center; margin-top: .4rem; }
.pe-ad-slot__dot { width: 6px; height: 6px; border-radius: 100px; background: var(--border); transition: .2s; }
.pe-ad-slot__dot.is-active { background: var(--purple); width: 16px; }

/* ════════════════════════════════════════════════════════════════════════════
   CABEÇALHO MOBILE — aparece só em ecrãs ≤ 768 px
   ════════════════════════════════════════════════════════════════════════════ */
.pe-mobile-header {
  display: none; /* oculto em desktop */
}

@media (max-width: 768px) {
  /* Ocultar a navbar desktop */
  .pe-desktop-nav { display: none !important; }

  /* Mostrar cabeçalho mobile */
  .pe-mobile-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .65rem 1rem;
    background:var(--surface);
    border-bottom: 1px solid var(--border, var(--border));
    position: sticky;
    top: 0;
    z-index: 900;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
  }

  /* Logo mobile */
  .pe-mobile-header__logo { flex-shrink: 0; text-decoration: none; display: flex; align-items: center; }
  .pe-mobile-header__logo img { max-height: 34px; max-width: 120px; object-fit: contain; }
  .pe-mobile-header__logo-text {
    font-size: 1.15rem; font-weight: 800; color: var(--text, #18181B); line-height: 1;
  }
  .pe-mobile-header__logo-text em { color: var(--green, #1FF07A); font-style: normal; }

  /* Pesquisa mobile */
  .pe-mobile-header__search { flex: 1; position: relative; }
  .pe-mobile-search-wrap {
    display: flex; align-items: center; gap: .45rem;
    background: var(--bg, #F9F9FB);
    border: 1px solid var(--border, var(--border));
    border-radius: 100px;
    padding: .45rem .85rem;
  }
  .pe-mobile-search-icon { color: var(--gray, #6B7280); flex-shrink: 0; display: flex; }
  .pe-mobile-search-input {
    border: none; background: transparent; outline: none;
    font-size: .9rem; color: var(--text, #18181B);
    width: 100%; min-width: 0;
  }
  .pe-mobile-search-input::placeholder { color: var(--gray-light, #9CA3AF); }

  /* Dropdown de resultados da pesquisa mobile */
  .pe-live-results-m {
    position: absolute; top: calc(100% + .5rem); left: -1rem; right: -1rem;
    border-radius: 12px;
    z-index: 1000;
  }

  /* Corpo com padding inferior para a bottom nav */
  body { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
}


/* ── Botão de menu mobile (toggle) — REMOVIDO ──────────────────────────────── */
/* O toggle e o popup foram substituídos pelo novo header mobile + modal de pesquisa */
/* toggle: visível apenas no mobile, apenas na homepage */
.pe-mobile-menu-toggle {
  display: none;
}
@media (max-width: 768px) {
  .pe-mobile-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: .45rem;
    cursor: pointer;
    color: var(--text, #18181B);
    border-radius: 8px;
    flex-shrink: 0;
    transition: background .15s;
  }
  .pe-mobile-menu-toggle:hover { background: var(--bg, #F9F9FB); }
}

/* popup de navegação mobile */
.pe-mobile-menu-popup {
  display: none;
}
@media (max-width: 768px) {
  .pe-mobile-menu-popup {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 960;
    flex-direction: column;
    justify-content: flex-end;
  }
  .pe-mobile-menu-popup[hidden] { display: none; }
  .pe-mobile-menu-popup__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.55);
    opacity: 0;
    transition: opacity .3s;
  }
  .pe-mobile-menu-popup.is-open .pe-mobile-menu-popup__backdrop { opacity: 1; }
  .pe-mobile-menu-popup__sheet {
    position: relative;
    background: #111;
    border-radius: 20px 20px 0 0;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
    max-height: 85vh;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 -8px 40px rgba(0,0,0,.35);
  }
  .pe-mobile-menu-popup.is-open .pe-mobile-menu-popup__sheet { transform: translateY(0); }
  .pe-mobile-menu-popup__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.25rem .75rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
    color: #fff;
    position: sticky;
    top: 0;
    background: #111;
    z-index: 1;
  }
  .pe-mobile-menu-popup__close {
    background: none; border: none; padding: .4rem; cursor: pointer;
    color: rgba(255,255,255,.7); border-radius: 8px; display: flex; align-items: center;
  }
  .pe-mobile-menu-popup__close:hover { background: rgba(255,255,255,.07); }
  .pe-mobile-menu-popup__links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: .25rem 0;
  }
  .pe-mobile-menu-popup__links a {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .9rem 1.25rem;
    color: rgba(255,255,255,.8);
    text-decoration: none;
    font-size: .9rem;
    border-bottom: 1px solid rgba(255,255,255,.05);
    transition: background .15s, color .15s;
  }
  .pe-mobile-menu-popup__links a:hover { background: rgba(255,255,255,.05); }
  .pe-mobile-menu-popup__links a.is-active { color: var(--green, #1FF07A); font-weight: 600; }
  .pe-mobile-menu-popup__links a.pe-full,
  .pe-mobile-menu-popup__links a:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .pe-mobile-menu-popup__contact {
    display: flex;
    gap: .75rem;
    padding: .85rem 1.25rem 1rem;
    border-top: 1px solid rgba(255,255,255,.08);
  }
  .pe-mobile-menu-popup__contact-btn {
    display: flex; align-items: center; gap: .4rem;
    padding: .6rem 1rem; border-radius: 8px; font-size: .82rem; font-weight: 600;
    text-decoration: none; flex: 1; justify-content: center;
    background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.15);
    transition: background .15s;
  }
  .pe-mobile-menu-popup__contact-btn--wa {
    background: rgba(37,211,102,.15); border-color: rgba(37,211,102,.4); color: #25D366;
  }
}

/* ── Cabeçalho mobile — homepage ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .pe-mobile-header--home {
    justify-content: space-between;
  }
  .pe-mobile-header--home .pe-mobile-header__logo {
    flex: 1;
  }
  .pe-mobile-header__search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: .45rem;
    cursor: pointer;
    color: var(--text, #18181B);
    border-radius: 8px;
    flex-shrink: 0;
    transition: background .15s;
  }
  .pe-mobile-header__search-btn:hover { background: var(--bg, #F9F9FB); }

  .pe-mobile-header__user-icon {
    display: flex;
    align-items: center;
    color: var(--text, #18181B);
    padding: .45rem;
    border-radius: 8px;
    text-decoration: none;
    transition: background .15s;
  }
  .pe-mobile-header__user-icon:hover { background: var(--bg, #F9F9FB); }

  .pe-mobile-header__avatar-img {
    width: 30px; height: 30px;
    border-radius: 50%;
    border: 2px solid var(--border, var(--border));
    object-fit: cover;
  }

  .pe-user-menu--mobile-header {
    position: relative;
  }
  .pe-mobile-header__user-trigger {
    display: flex;
    align-items: center;
    background: none;
    border: none;
    padding: .35rem;
    cursor: pointer;
    border-radius: 8px;
  }
  /* Dropdown abre para baixo-direita no header */
  .pe-user-menu--mobile-header .pe-user-menu__dropdown--down-right {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: auto;
    min-width: 200px;
    max-width: calc(100vw - 16px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .15s, transform .15s, visibility .15s;
  }
  .pe-user-menu--mobile-header.is-open .pe-user-menu__dropdown--down-right {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

/* ── Cabeçalho mobile — páginas internas ───────────────────────────────────── */
@media (max-width: 768px) {
  .pe-mobile-header--inner {
    justify-content: flex-start;
    gap: .5rem;
  }
  .pe-mobile-header__back {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: .4rem;
    cursor: pointer;
    color: var(--text, #18181B);
    border-radius: 8px;
    flex-shrink: 0;
    transition: background .15s;
  }
  .pe-mobile-header__back:hover { background: var(--bg, #F9F9FB); }

  .pe-mobile-header--inner .pe-mobile-header__logo {
    flex: 1;
    justify-content: center;
  }
  .pe-mobile-header__spacer { flex: 1; }
}

/* ── Modal de pesquisa em tempo real (mobile) ──────────────────────────────── */
.pe-search-modal {
  display: none;
}
@media (max-width: 768px) {
  .pe-search-modal {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 970;
    background:var(--surface);
    flex-direction: column;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .25s, transform .25s;
  }
  .pe-search-modal[hidden] { display: none; }
  .pe-search-modal.is-open {
    opacity: 1;
    transform: translateY(0);
  }
  .pe-search-modal__inner {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
  }
  .pe-search-modal__bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .65rem 1rem;
    border-bottom: 1px solid var(--border, var(--border));
    background:var(--surface);
    flex-shrink: 0;
  }
  .pe-search-modal__back {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: .4rem;
    cursor: pointer;
    color: var(--text, #18181B);
    border-radius: 8px;
    flex-shrink: 0;
    transition: background .15s;
  }
  .pe-search-modal__back:hover { background: var(--bg, #F9F9FB); }
  .pe-search-modal__input-wrap {
    display: flex;
    align-items: center;
    gap: .45rem;
    background: var(--bg, #F9F9FB);
    border: 1px solid var(--border, var(--border));
    border-radius: 100px;
    padding: .45rem .85rem;
    flex: 1;
  }
  .pe-search-modal__icon { color: var(--gray, #6B7280); flex-shrink: 0; display: flex; }
  .pe-search-modal__input {
    border: none; background: transparent; outline: none;
    font-size: .95rem; color: var(--text, #18181B);
    width: 100%; min-width: 0;
  }
  .pe-search-modal__input::placeholder { color: var(--gray-light, #9CA3AF); }
  .pe-search-modal__clear {
    background: none; border: none; padding: .2rem; cursor: pointer;
    color: var(--gray, #6B7280); display: flex; align-items: center;
    border-radius: 50%; flex-shrink: 0;
  }
  .pe-search-modal__clear:hover { background: var(--border, #eee); }
  .pe-live-results-modal {
    position: absolute;
    top: calc(100% + .5rem);
    left: -3rem;
    right: -1rem;
    border-radius: 12px;
    z-index: 1000;
  }
}

/* ── Modal de notificações do sino (mobile) ────────────────────────────────── */
.pe-mobile-notif-modal {
  display: none;
}
@media (max-width: 768px) {
  .pe-mobile-notif-modal {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 970;
    background:var(--surface);
    flex-direction: column;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .25s, transform .25s;
  }
  .pe-mobile-notif-modal[hidden] { display: none; }
  .pe-mobile-notif-modal.is-open {
    opacity: 1;
    transform: translateY(0);
  }
  .pe-mobile-notif-modal__inner {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
  }
  .pe-mobile-notif-modal__bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .65rem 1rem;
    border-bottom: 1px solid var(--border, var(--border));
    background:var(--surface);
    flex-shrink: 0;
  }
  .pe-mobile-notif-modal__title {
    font-size: .95rem;
    font-weight: 700;
    color: var(--text);
  }
  .pe-mobile-notif-modal__list {
    flex: 1;
    max-height: none;
    overflow-y: auto;
  }
}

/* ── Rodapé do drawer de categorias — redes sociais + logo do developer, fundo branco — apenas mobile ── */
.pe-cat-drawer__mobile-footer {
  display: none; /* oculto no desktop */
}
@media (max-width: 768px) {
  .pe-cat-drawer__mobile-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .65rem;
    border-top: 1px solid var(--border, var(--border));
    padding: 1rem 1.1rem calc(env(safe-area-inset-bottom, 0px) + 1rem);
    background:var(--surface);
    flex-shrink: 0;
  }
  .pe-cat-drawer__mobile-social {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
  }
  .pe-cat-drawer__mobile-social-btn {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--bg, #F9F9FB);
    border: 1px solid var(--border, var(--border));
    color: var(--text, #18181B);
    transition: background .15s, color .15s, transform .15s;
  }
  .pe-cat-drawer__mobile-social-btn:hover {
    background: var(--purple, #7304C3);
    border-color: var(--purple, #7304C3);
    color: #fff;
    transform: translateY(-2px);
  }
  .pe-cat-drawer__mobile-dev {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .75rem;
    color: var(--gray, #6B7280);
  }
  .pe-cat-drawer__mobile-dev a {
    display: flex; align-items: center;
    color: var(--gray, #6B7280);
    text-decoration: none;
  }
  .pe-cat-drawer__mobile-dev img {
    max-height: 18px;
    vertical-align: middle;
  }
  /* O drawer precisa de scroll para mostrar o rodapé */
  #pe-cat-drawer {
    display: flex !important;
    flex-direction: column;
  }
  .pe-cat-drawer__body {
    flex: 1;
    overflow-y: auto;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   BARRA DE NAVEGAÇÃO INFERIOR MOBILE (fixa)
   ════════════════════════════════════════════════════════════════════════════ */
.pe-mobile-nav {
  display: none; /* oculto em desktop */
}

@media (max-width: 768px) {
  .pe-mobile-nav {
    display: flex;
    align-items: stretch;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 62px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background:var(--surface);
    border-top: 1px solid var(--border, var(--border));
    box-shadow: 0 -4px 20px rgba(0,0,0,.08);
    z-index: 950;
    overflow: visible; /* necessário para o popup do avatar aparecer acima */
  }

  .pe-mobile-nav__item {
    flex: 1;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: .2rem;
    text-decoration: none;
    color: var(--gray, #6B7280);
    font-size: .62rem; font-weight: 600;
    transition: color .15s;
    position: relative;
  }
  .pe-mobile-nav__item:hover,
  .pe-mobile-nav__item.is-active { color: var(--purple, #7304C3); text-decoration: none; }
  .pe-mobile-nav__item--fav:hover,
  .pe-mobile-nav__item--fav.is-active { color: #DC2626; }

  /* Reset para o item ser um <button> (ex.: gatilho do popup Info) em vez de <a> */
  .pe-mobile-nav__item--btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font-family: inherit;
    cursor: pointer;
  }

  .pe-mobile-nav__icon { position: relative; display: flex; }
  .pe-mobile-nav__label { line-height: 1; text-align: center; }

  /* Badge no ícone */
  .pe-mobile-nav__badge {
    position: absolute; top: -5px; right: -7px;
    background: var(--purple, #7304C3); color: #fff;
    font-size: .55rem; font-weight: 700;
    min-width: 16px; height: 16px;
    border-radius: 100px; padding: 0 3px;
    display: flex; align-items: center; justify-content: center;
    line-height: 1; border: 1.5px solid var(--surface);
  }
  .pe-mobile-nav__item--fav .pe-mobile-nav__badge { background: #DC2626; }

  /* Avatar com popup no item da barra inferior */
  .pe-mobile-nav__item--avatar {
    cursor: pointer;
    position: relative; /* âncora para o dropdown absoluto */
  }
  .pe-user-menu--mobile-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    position: static; /* herda o relative do item pai */
  }
  .pe-mobile-nav__avatar-trigger {
    padding: 0;
    border-radius: 50%;
    background: transparent;
    border: none;
    cursor: pointer;
  }
  .pe-mobile-nav__avatar-img {
    width: 30px; height: 30px;
    border: 2px solid var(--border, var(--border));
  }
  .pe-mobile-nav__avatar-placeholder {
    width: 30px; height: 30px;
  }
  /* Dropdown abre para cima, ancorado à direita do item (evita cortar fora da tela,
     já que o avatar é o último item da barra, junto à borda direita) */
  .pe-user-menu--mobile-nav .pe-user-menu__dropdown--up {
    position: absolute;
    top: auto;
    bottom: calc(100% + 8px); /* 8px acima do item */
    left: auto;
    right: 8px;
    max-width: calc(100vw - 16px);
    transform: translateY(6px);
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s, transform .15s, visibility .15s;
  }
  .pe-user-menu--mobile-nav.is-open .pe-user-menu__dropdown--up {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* Botão central destacado */
  .pe-mobile-nav__item--center {
    flex: 0 0 64px;
    position: relative;
  }
  .pe-mobile-nav__center-btn {
    width: 52px; height: 52px;
    background: var(--purple, #7304C3);
    color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin-top: -20px;
    box-shadow: 0 4px 16px rgba(115,4,195,.45);
    transition: transform .15s, box-shadow .15s;
  }
  .pe-mobile-nav__item--center:hover .pe-mobile-nav__center-btn {
    transform: scale(1.07);
    box-shadow: 0 6px 20px rgba(115,4,195,.55);
  }
}


/* ════════════════════════════════════════════════════════════════════════════
   HERO SLIDER — dimensões: Desktop 1366×240 / Mobile 580×240
   ════════════════════════════════════════════════════════════════════════════ */
.pe-hero-slider { height: 240px !important; }

.pe-hero-slide__content {
  justify-content: center;
  align-items: flex-start;
  padding: 1.5rem var(--pe-gutter) 1.5rem var(--pe-gutter);
}
.pe-hero-slide__subtitle {
  font-size: .9rem;
  margin-bottom: .4rem;
  order: -1; /* subtítulo antes do título */
  text-align: left;
}
.pe-hero-slide__title { font-size: clamp(1.3rem, 3vw, 2rem); margin-bottom: .5rem; text-align: left; }
.pe-hero-slide__cta.btn { font-size: .85rem; padding: .45rem 1.1rem; align-self: flex-start; }

@media (max-width: 768px) {
  .pe-hero-slider { height: 240px !important; }
  .pe-hero-slide__content {
    padding: 1rem 1rem 1rem 0.875rem !important;
    max-width: 100%;
    align-items: flex-start;
  }
  .pe-hero-slide__title { font-size: 1.15rem; text-align: left; }
  .pe-hero-slide__subtitle { font-size: .78rem; text-align: left; }
}


/* ════════════════════════════════════════════════════════════════════════════
   SECÇÕES COM SCROLL HORIZONTAL (Peças em destaque / Top peças / Novas peças)
   ════════════════════════════════════════════════════════════════════════════ */
.pe-section { padding: 1.75rem 0 0; }
.pe-section__header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1rem;
}
.pe-section__title { font-size: 1.25rem; font-weight: 700; }

/* Linha scrollável */
.pe-scroll-row {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  padding-bottom: .5rem;
  /* Em vez de cortar o último cartão parcialmente visível de forma abrupta,
     esbate-o suavemente na borda direita (e esquerda, quando já scrollado). */
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 94%, transparent 100%);
          mask-image: linear-gradient(to right, #000 0%, #000 94%, transparent 100%);
}
.pe-scroll-row::-webkit-scrollbar { display: none; } /* Chrome/Safari */

/* Cada card no scroll — 4 visíveis por vista (largura em % do contentor) */
.pe-scroll-row .pe-scroll-card {
  flex: 0 0 calc((100% - 3rem) / 4);
  width: calc((100% - 3rem) / 4);
  scroll-snap-align: start;
}

@media (max-width: 768px) {
  .pe-scroll-row .pe-scroll-card {
    flex: 0 0 calc((100% - 1rem) / 2);
    width: calc((100% - 1rem) / 2);
  }
}
@media (max-width: 480px) {
  .pe-scroll-row .pe-scroll-card {
    flex: 0 0 calc((100% - .75rem) / 2);
    width: calc((100% - .75rem) / 2);
  }
}

/* "Top peças" usa cartão horizontal (imagem + texto lado a lado), por isso
   fica apertado a 2 por vista no mobile — mostra apenas 1 peça de cada vez. */
@media (max-width: 768px) {
  .pe-scroll-row .pe-scroll-card.pe-scroll-card--rank {
    flex: 0 0 92%;
    width: 92%;
  }
}

/* Setas de navegação no cabeçalho da secção (substituem o botão "Ver todas") */
.pe-scroll-nav-group {
  display: flex;
  gap: .5rem;
  flex-shrink: 0;
}
.pe-scroll-nav {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background:var(--surface);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--text);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition), opacity var(--transition);
}
.pe-scroll-nav:hover { background: var(--purple); border-color: var(--purple); color: #fff; }
@media (max-width: 480px) {
  .pe-scroll-nav { width: 30px; height: 30px; font-size: 1rem; }
}

/* Card "Ver todas" removido da fila — mantém-se apenas o botão/seta de
   navegação no cabeçalho da secção para aceder ao arquivo completo. */

/* Padding lateral para estas 3 secções (Peças em destaque / Top peças / Novas peças),
   para que o primeiro e último card não sejam cortados pelo overflow-x:hidden do body */
.pe-section.container {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
@media (max-width: 768px) {
  .pe-section.container {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .container { padding: 1.25rem; }
}
@media (max-width: 480px) {
  .pe-section.container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .container { padding: 1rem; }
}

/* Cards de Top Vendedor e Produto Mais Solicitado — container clicável */
.pe-highlight-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  transition: transform .15s, box-shadow .15s;
}
.pe-highlight-card:hover { transform: translateY(-2px); text-decoration: none; }
.pe-highlight-card--seller {
  background: linear-gradient(135deg, var(--purple-dark), var(--purple));
  padding: 1.5rem;
}
.pe-highlight-card--product {
  background: linear-gradient(135deg, var(--dark, #18181B) 0%, #27272a 100%);
  padding: 1.5rem;
}

/* ═════════════════════════════════════════════════════════════════════════
   NAVBAR DE DUAS LINHAS — Layout Desktop
   ═════════════════════════════════════════════════════════════════════════ */

.pe-desktop-nav {
  display: none; /* Oculta em mobile */
}

@media (min-width: 769px) {
  .pe-desktop-nav {
    display: block;
    background:var(--surface);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    position: sticky;
    top: 0;
    z-index: 100;
  }

  /* LINHA 1: Logo + Pesquisa + Favoritos + Auth */
  .navbar__line-1 {
    background: var(--pe-header-bg, #120A24);
    padding: 12px 0;
    /* Sem borda entre a 1.ª e a 2.ª linha */
    border-bottom: 0;
  }

  .navbar__line-1-inner {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .navbar__logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    font-weight: 700;
    flex-shrink: 0;
    color: var(--pe-header-text, #fff); /* usado apenas no fallback de texto "Peças/Express" sem logo em imagem */
  }

  .navbar__logo img {
    height: auto;
  }

  /* Barra de pesquisa */
  .navbar__search-wrap {
    position: relative;
  }

  .navbar__search-inner {
    display: flex;
    align-items: center;
    background: var(--pe-header-search-bg, #120A24);
    border-radius: 6px;
    padding: 8px 12px;
    gap: 8px;
    border: 1px solid transparent;
    transition: background .2s, border-color .2s;
  }

  .navbar__search-inner:focus-within {
    background: var(--pe-header-search-bg, #1A0F35);
    border: 1px solid var(--pe-header-accent, var(--purple));
  }

  .navbar__search-icon {
    color: var(--pe-header-text-muted, rgba(255,255,255,.55));
    display: flex;
    align-items: center;
  }

  .navbar__search-input {
    border: none;
    background: transparent;
    outline: none;
    flex: 1;
    font-size: 14px;
    color: var(--pe-header-text, #fff);
  }

  .navbar__search-input::placeholder {
    color: var(--pe-header-text-muted, rgba(255,255,255,.45));
  }

  /* Botões de ação (Favoritos, Entrar, Vender) — o ícone usa a cor de
     destaque escolhida no admin (por omissão o roxo claro original).
     O fundo do círculo usa --pe-header-surface, uma tinta suave calculada
     a partir da cor de texto do cabeçalho (sempre com contraste, seja o
     cabeçalho claro ou escuro), em vez de um roxo fixo que ficava
     invisível contra o ícone quando o cabeçalho é claro. */
  .navbar__fav-btn,
  .navbar__auth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--pe-header-surface, var(--purple-dark));
    color: var(--pe-header-accent, #B653FF);
    text-decoration: none;
    transition: background .2s, color .2s;
    position: relative;
  }

  .navbar__fav-btn:hover,
  .navbar__auth-btn:hover {
    background: var(--pe-header-hover, var(--pe-header-accent, var(--purple)));
    color: #fff;
  }

  /* Botão "Entrar" (utilizador não autenticado) — precisa de contraste próprio
     na linha 1 escura, já que .btn--outline por defeito é pensado para fundos
     claros (borda/texto escuros ficariam invisíveis aqui). */
  .navbar__line-1 .btn--outline {
    background: transparent;
    border: 1.5px solid var(--pe-header-text, rgba(255,255,255,.35));
    color: var(--pe-header-text, #fff);
  }
  .navbar__line-1 .btn--outline:hover {
    border-color: var(--pe-header-accent, var(--purple));
    color: var(--pe-header-text, #fff);
    background: rgba(128,128,128,.15);
  }

  /* Menu do utilizador (avatar + nome + seta) na linha 1 escura */
  .navbar__line-1 .pe-user-menu__trigger:hover { background: rgba(128,128,128,.15); }
  .navbar__line-1 .pe-user-menu__caret { color: var(--pe-header-accent, var(--green)); }
  .navbar__line-1 .pe-user-menu__name { color: var(--pe-header-text, #fff); }
  .navbar__line-1 .pe-user-menu__avatar { border-color: var(--pe-header-accent, var(--green)); }

  .navbar__fav-count {
    position: absolute;
    top: -2px;
    right: -2px;
    background: var(--pe-header-accent, var(--red, #ff4444));
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 4px;
    border-radius: 50%;
    min-width: 18px;
    text-align: center;
    border: 2px solid var(--pe-header-bg, transparent);
  }

  /* LINHA 2: Menu de navegação */
  .navbar__line-2 {
    background: var(--pe-header-bg-2, #fff);
    padding: 12px 0;
  }

  .navbar__line-2-inner {
    display: flex;
    align-items: center;
    position: relative; /* ancora o botão Categorias */
  }

  .navbar__nav {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    justify-content: center; /* outros links centrados */
  }

  /* Categorias: ancorado à esquerda do container */
  .navbar__nav .navbar__megabtn {
    position: absolute;
    left: 0;
  }

  .navbar__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    color: var(--pe-header-text-2, #333);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color .2s;
    white-space: nowrap;
  }

  .navbar__link:hover {
    color: var(--pe-header-hover, var(--pe-header-accent, var(--purple, #7304C3)));
  }
  .navbar__link.is-active,
  .navbar__link--active {
    color: var(--pe-header-active, var(--pe-header-accent, var(--purple, #7304C3)));
  }

  .navbar__megabtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: none;
    border: none;
    color: var(--pe-header-text-2, #333);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: color .2s;
  }

  .navbar__megabtn:hover {
    color: var(--pe-header-hover, var(--pe-header-accent, var(--purple, #7304C3)));
  }

  .megabtn-chevron {
    display: inline-flex;
    transition: transform .2s;
  }

  .navbar__megabtn[aria-expanded="true"] .megabtn-chevron {
    transform: rotate(90deg);
  }
}

/* ── Filtros colapsáveis (archive) ── */
.pe-filters-header { display: none; } /* desktop: sempre visível */
.pe-filters-body { padding: 1rem 0; display: block; } /* desktop: sempre visível */
.pe-filters-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background:var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: .6rem 1rem; font-size: .9rem; font-weight: 600; cursor: pointer; color: var(--text);
}
.pe-filters-toggle.has-active { border-color: var(--purple); color: var(--purple); }
.pe-filters-toggle__chevron { transition: transform .25s; }
.pe-filters-toggle.is-open .pe-filters-toggle__chevron { transform: rotate(180deg); }
.pe-filters-badge {
  background: var(--purple); color: #fff; font-size: .7rem; font-weight: 700;
  padding: .1rem .45rem; border-radius: 100px; line-height: 1.4;
}
@media (max-width: 768px) {
  .pe-filters-header { display: block; margin-bottom: .5rem; }
  .pe-filters-body { padding: .75rem 0 0; display: none; } /* mobile: colapsado por defeito */
  .pe-filters-body.is-open { display: block; }
  .pe-filters-body .filters__row { flex-direction: column; }
  .pe-filters-body .filters__item { width: 100%; }
  .pe-filters-body .filters__item select,
  .pe-filters-body .filters__item input { width: 100%; }
}

/* ── Category Drawer (lateral esquerdo) ── */
.pe-cat-backdrop {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45);
  z-index: 490; opacity: 0; transition: opacity .25s;
}
.pe-cat-backdrop.is-visible { display: block; opacity: 1; }
.pe-cat-drawer {
  position: fixed; top: 0; left: 0; bottom: 0; width: 320px; max-width: 88vw;
  background:var(--surface); z-index: 500; display: flex; flex-direction: column;
  box-shadow: 4px 0 32px rgba(0,0,0,.18);
  transform: translateX(-100%); transition: transform .3s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
}
.pe-cat-drawer.is-open { transform: translateX(0); }
@media (max-width: 768px) {
  .pe-cat-drawer {
    width: 100vw;
    max-width: 100vw;
    z-index: 990; /* acima do search modal (970), popup info (960) e barra inferior (950) */
  }
  .pe-cat-backdrop {
    z-index: 985;
  }
}
.pe-cat-drawer__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--border);
  background: var(--purple-dark); color: #fff; flex-shrink: 0;
}
.pe-cat-drawer__close {
  background: none; border: none; color: #fff; cursor: pointer; padding: .25rem;
  display: flex; align-items: center; justify-content: center; border-radius: 6px;
  transition: background .15s;
}
.pe-cat-drawer__close:hover { background: rgba(255,255,255,.15); }
.pe-cat-drawer__body { overflow-y: auto; flex: 1; padding: .75rem 0; }
.pe-cat-drawer__body::-webkit-scrollbar { width: 4px; }
.pe-cat-drawer__body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }
.pe-cat-drawer__group { padding: .3rem 0; }
.pe-cat-drawer__group + .pe-cat-drawer__group { border-top: 1px solid var(--border); }
.pe-cat-drawer__group-heading {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: .65rem 1.25rem; font-size: .85rem; font-weight: 700;
  color: var(--text); background: none; border: none; cursor: pointer;
  text-align: left; transition: color .15s, background .15s;
}
.pe-cat-drawer__group-heading:hover { color: var(--purple); background: var(--bg); }
.pe-cat-drawer__group-chevron { display: flex; color: var(--gray-light); transition: transform .25s; flex-shrink: 0; }
.pe-cat-drawer__group-heading[aria-expanded="true"] .pe-cat-drawer__group-chevron { transform: rotate(90deg); }
.pe-cat-drawer__group-items {
  max-height: 0; overflow: hidden; transition: max-height .3s ease;
}
.pe-cat-drawer__group.is-open .pe-cat-drawer__group-items { max-height: 600px; }
.pe-cat-drawer__link {
  display: flex; align-items: center; gap: .4rem;
  padding: .45rem 1.25rem .45rem 2.5rem; font-size: .875rem; color: var(--text); text-decoration: none;
  transition: background .15s, color .15s;
}
.pe-cat-drawer__link:hover { background: var(--bg); color: var(--purple); }

/* ── Rodapé: oculto em mobile (substituído pela pe-nl-section + navbar) ── */
.footer { display: block; }
.footer__bottom--desktop { /* igual ao footer__bottom anterior */ }
@media (max-width: 768px) {
  .footer { display: none !important; }
}

/* ── Secção Newsletter (homepage + single produto, apenas mobile) ───── */
.pe-nl-section {
  display: none; /* oculta em desktop; só aparece em mobile */
  background: var(--purple-dark, #1a0033);
  color: #fff;
  padding: 2rem 0;
  margin-top: 2rem;
}
.pe-nl-section--single {
  margin-top: 0;
}
.pe-nl-section__inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.pe-nl-section__title {
  font-weight: 700;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: .25rem;
}
.pe-nl-section__text {
  font-size: .82rem;
  color: rgba(255,255,255,.55);
  margin: 0;
}
.pe-nl-section__form {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.pe-nl-section__input {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 8px;
  padding: .5rem .85rem;
  color: #fff;
  font-size: .82rem;
  width: 100%;
  box-sizing: border-box;
}
.pe-nl-section__input::placeholder { color: rgba(255,255,255,.4); }
@media (max-width: 768px) {
  .pe-nl-section { display: block; }
}

/* ── Correcções de responsividade (Dashboard / Painel / Sobre) ───────
   Grids e listas que usavam larguras fixas em inline-style e não se
   adaptavam a ecrãs pequenos. Ver CHANGELOG mais recente. ── */

/* Grids genéricos de formulário, usados no painel e no admin */
.pe-grid-2       { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.pe-grid-3       { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }
.pe-grid-2-auto  { display: grid; grid-template-columns: 1fr 1fr auto; gap: 1rem; align-items: end; }
.pe-grid-auto-1fr{ display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: start; }

/* Admin dashboard: gráfico de revenue + acções rápidas */
.pe-grid-chart-actions { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.5rem; }

/* Minha Conta: coluna do avatar + coluna dos formulários */
.pe-grid-sidebar { display: grid; grid-template-columns: 200px 1fr; gap: 1.5rem; align-items: start; }

/* Contentor com scroll horizontal por arrasto (Equipa / Meus Produtos) */
.pe-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.pe-scroll-x::-webkit-scrollbar { height: 6px; }
.pe-scroll-x::-webkit-scrollbar-thumb { background: var(--border); border-radius: 100px; }

/* Cards de estatísticas — página /sobre */
.pe-sobre-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }

/* Tipografia para conteúdo editado no editor de blocos do wp-admin
   (Sobre, Termos, Política de Privacidade) */
.pe-static-content h2 {
  font-size: 1.4rem; font-weight: 700; margin: 2rem 0 1rem;
  border-bottom: 3px solid var(--green,#1FF07A); display: inline-block; padding-bottom: .3rem;
}
.pe-static-content h2:first-child { margin-top: 0; }
.pe-static-content h3 { font-size: 1.15rem; font-weight: 700; margin: 1.5rem 0 .75rem; }
.pe-static-content p  { color: var(--text-muted); line-height: 1.7; margin-bottom: 1rem; }
.pe-static-content ul, .pe-static-content ol { color: var(--text-muted); line-height: 1.9; padding-left: 1.25rem; margin-bottom: 1.5rem; }
.pe-static-content li { margin-bottom: .35rem; }
.pe-static-content a  { color: var(--purple); font-weight: 600; }
.pe-static-content strong { color: var(--text); }

@media (max-width: 900px) {
  .pe-grid-2-auto  { grid-template-columns: 1fr 1fr; }
  .pe-grid-chart-actions { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .pe-grid-2, .pe-grid-3, .pe-grid-2-auto, .pe-grid-auto-1fr, .pe-grid-sidebar {
    grid-template-columns: 1fr;
  }
  .pe-sobre-stats { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .stat-card { padding: 1rem 1.1rem; }
  .stat-card__icon { width: 40px; height: 40px; }
  .stat-card__value { font-size: 1.4rem; }
}

@media (max-width: 480px) {
  .pe-sobre-stats { gap: .85rem; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
}

/* ════════════════════════════════════════════════════════════════════════════
   PATROCINADOS — Peças Patrocinadas / Combos Patrocinados
   Duas colunas lado a lado (como no layout de referência), cada uma com
   cabeçalho grande colorido e o seu próprio carrossel com slide
   (permite vários patrocínios em simultâneo).
   ════════════════════════════════════════════════════════════════════════════ */
.pe-sponsor-section { padding-top: 1.75rem; padding-bottom: 1.75rem; } /* sem isto o cartão ficava colado à secção seguinte */

.pe-sponsor-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: stretch; /* as duas colunas acabam à mesma altura */
}
@media (max-width: 900px) {
  .pe-sponsor-cols { grid-template-columns: 1fr; gap: 1.75rem; }
}

.pe-sponsor-col {
  background:var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  padding: 1.25rem;
  display: flex; flex-direction: column;
}

/* ── Cabeçalho da coluna: discreto, alinhado ao resto do site ───────────── */
.pe-sponsor-col__header {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding-bottom: 1.1rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--border);
}
.pe-sponsor-col__icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pe-sponsor-col--parts  .pe-sponsor-col__icon { background: rgba(217,119,6,.1); color: #B45309; }
.pe-sponsor-col--combos .pe-sponsor-col__icon { background: rgba(5,150,105,.1);  color: #047857; }
.pe-sponsor-col__heading { flex: 1; min-width: 0; }
.pe-sponsor-col__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  line-height: 1.3;
}
.pe-sponsor-col__sub {
  font-size: .8rem;
  color: var(--gray);
  margin: .2rem 0 0;
}
.pe-sponsor-col__tag {
  flex-shrink: 0;
  font-size: .66rem;
  font-weight: 600;
  padding: .3rem .6rem;
  border-radius: 100px;
  background: var(--bg);
  color: var(--gray);
  border: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: .1rem;
}
@media (max-width: 640px) {
  .pe-sponsor-col__title { font-size: .95rem; }
  .pe-sponsor-col__sub { font-size: .75rem; }
  .pe-sponsor-col__tag { display: none; }
}

/* ── Carrossel (slide) ────────────────────────────────────────────────── */
.pe-sponsor-carousel { position: relative; }
.pe-sponsor-carousel__viewport {
  overflow: hidden;
  border-radius: var(--radius-lg);
  transition: height .28s ease;
}
.pe-sponsor-carousel__track {
  display: flex;
  align-items: flex-start; /* cada slide mede a sua própria altura, sem "esticar" para igualar o vizinho */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.pe-sponsor-carousel__track::-webkit-scrollbar { display: none; }

.pe-sponsor-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: grid;
  /* auto-fit + 1fr: se o slide tiver menos cartões do que cabem na grelha
     (ex. o último grupo com 1 ou 3 peças), a coluna vazia colapsa e o(s)
     cartão(ões) existente(s) ocupam o espaço todo — sem buracos em branco */
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
  padding: .2rem;
}
/* Mobile: sempre 2 cartões por linha (um cartão sozinho ocupa só metade, não a largura toda) */
@media (max-width: 640px) {
  .pe-sponsor-slide { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
}

.pe-sponsor-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background:var(--surface);
  box-shadow: var(--shadow-lg);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--text);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
}
/* Só aparecem com o cursor dentro da coluna (peças/combos patrocinados) */
.pe-sponsor-col:hover .pe-sponsor-nav,
.pe-sponsor-col:focus-within .pe-sponsor-nav {
  opacity: 1;
  pointer-events: auto;
}
.pe-sponsor-nav:hover { background: var(--purple); border-color: var(--purple); color: #fff; }
.pe-sponsor-nav--prev { left: -14px; }
.pe-sponsor-nav--next { right: -14px; }
@media (max-width: 900px) {
  .pe-sponsor-nav { width: 34px; height: 34px; font-size: 1.05rem; }
  .pe-sponsor-nav--prev { left: 4px; }
  .pe-sponsor-nav--next { right: 4px; }
  .pe-sponsor-nav { background: rgba(255,255,255,.92); }
}
/* Ecrãs tácteis não têm :hover — mantém as setas sempre visíveis para não as esconder de vez */
@media (hover: none) {
  .pe-sponsor-nav { opacity: 1; pointer-events: auto; }
}

.pe-sponsor-dots {
  display: flex;
  justify-content: center;
  gap: .4rem;
  margin-top: 1.1rem;
}
.pe-sponsor-dot {
  width: 7px; height: 7px;
  border-radius: 100px;
  border: 0; padding: 0;
  background: var(--border);
  transition: width var(--transition), background var(--transition);
}
.pe-sponsor-col--parts  .pe-sponsor-dot.is-active { width: 22px; background: #F59E0B; }
.pe-sponsor-col--combos .pe-sponsor-dot.is-active { width: 22px; background: #059669; }

/* ── Cartão de produto patrocinado ────────────────────────────────────── */
.pe-sponsor-card { position: relative; }
.pe-sponsor-card__badge {
  position: absolute; top: .5rem; left: .5rem; z-index: 5;
  font-size: .65rem; font-weight: 700;
  padding: .2rem .55rem; border-radius: 100px;
  letter-spacing: .02em;
}
.pe-sponsor-card__badge--parts { background: #fef3c7; color: #92400e; }
.pe-sponsor-card__badge--combo { background: #d1fae5; color: #065f46; }
.pe-sponsor-card__play {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.pe-sponsor-card__play svg {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(0,0,0,.6); padding: 12px;
}
.pe-sponsor-card__video {
  position: absolute; top: .5rem; right: .5rem; z-index: 5;
  background: rgba(0,0,0,.62); border-radius: 5px;
  display: flex; align-items: center; gap: .3rem;
  padding: .18rem .45rem; pointer-events: none;
}
.pe-sponsor-card__video span { font-size: .65rem; font-weight: 700; color: #fff; line-height: 1; }

/* ── Estado vazio ─────────────────────────────────────────────────────── */
.pe-sponsor-empty {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 2.75rem 1.5rem;
  background:var(--surface);
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-lg);
  color: var(--gray);
}
.pe-sponsor-empty svg { margin: 0 auto .6rem; opacity: .5; }
.pe-sponsor-empty p { margin-bottom: 1rem; font-size: .9rem; }

/* ── Responsivo: colunas em ecrãs pequenos ───────────────────────────────
   (a maioria já está tratada em .pe-sponsor-cols / .pe-sponsor-col__header
   acima — isto só reduz o padding interno da coluna em telas muito
   pequenas para os cartões respirarem melhor) */
@media (max-width: 480px) {
  .pe-sponsor-col { padding: .85rem; border-radius: 14px; }
}
/* ── Logo picker (admin: Gateways / Parceiros) ── */
.pe-logo-picker-list {
  display: flex; flex-wrap: wrap; gap: .5rem; min-height: 2rem;
}
.pe-logo-picker-item {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface,#fff); border: 1px solid var(--border,var(--border));
  border-radius: 8px; padding: .4rem .6rem; cursor: grab;
}
.pe-logo-picker-thumb { display: flex; align-items: center; justify-content: center; min-width: 40px; }
.pe-logo-picker-remove {
  position: absolute; top: -6px; right: -6px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #EF4444; color: #fff; border: none;
  font-size: 12px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .15s;
}
.pe-logo-picker-item:hover .pe-logo-picker-remove { opacity: 1; }


/* Nos modelos Centrado/Minimal as duas linhas são escuras por padrão, por
   isso o texto dos links (herdado do modelo Clássico, pensado para uma
   linha 2 branca) precisa de um valor por omissão claro aqui — evita
   texto escuro sobre fundo escuro quando a cor não é personalizada no
   admin. Se o admin definir uma cor de texto, essa cor tem prioridade
   (é aplicada inline, por isso substitui este valor por omissão). */
.navbar--layout-centered,
.navbar--layout-minimal {
  --pe-header-text-2: rgba(255,255,255,.85);
}

/* ══════════════════════════════════════════════════════════
   NAVBAR — LAYOUT CENTERED
   Linha 1: search (esq) | logo (centro) | auth (dir)
   Linha 2: nav links (centrados)
   ══════════════════════════════════════════════════════════ */
.navbar--layout-centered .navbar__line-1--centered { background: var(--navbar-bg, #0d0d14); }
.navbar--layout-centered .navbar__line-1-inner--centered {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.25rem;
  padding: .75rem 1.5rem;
}
.navbar--layout-centered .navbar__logo {
  grid-column: 2;
  justify-self: center;
}
.navbar--layout-centered .navbar__centered-search {
  grid-column: 1;
  display: flex; align-items: center;
}
.navbar--layout-centered .navbar__centered-search .navbar__search-wrap { margin: 0; }
.navbar--layout-centered .navbar__centered-auth {
  grid-column: 3;
  display: flex; align-items: center; justify-content: flex-end; gap: .5rem;
}
.navbar--layout-centered .navbar__line-2--centered { background: var(--navbar-line2-bg, #161622); }
.navbar--layout-centered .navbar__line-2-inner--centered {
  display: flex; justify-content: center;
  padding: 0 1.5rem;
}
.navbar--layout-centered .navbar__nav--centered {
  display: flex; align-items: center; gap: 0;
  justify-content: center;
}

/* ══════════════════════════════════════════════════════════
   NAVBAR — LAYOUT MINIMAL
   1 linha: logo | nav links | search | auth
   ══════════════════════════════════════════════════════════ */
.navbar--layout-minimal .navbar__line-1--minimal { background: var(--navbar-bg, #0d0d14); }
.navbar--layout-minimal .navbar__line-1-inner--minimal {
  display: flex; align-items: center; gap: 1rem;
  padding: .6rem 1.5rem;
}
.navbar--layout-minimal .navbar__logo { flex-shrink: 0; }
.navbar--layout-minimal .navbar__nav--minimal {
  display: flex; align-items: center; gap: 0;
  flex: 1;
}
.navbar--layout-minimal .navbar__minimal-search {
  width: 220px; flex-shrink: 0;
}
.navbar--layout-minimal .navbar__minimal-search .navbar__search-wrap { margin: 0; }

/* altura reduzida no minimal */
.navbar--layout-minimal .navbar__search-inner { padding: .45rem .85rem; }
.navbar--layout-minimal .navbar__link { padding: .55rem .75rem; font-size: .82rem; }

/* ══════════════════════════════════════════════════════════
   ADMIN — Seletor de Layout do Cabeçalho
   ══════════════════════════════════════════════════════════ */
.pe-header-layout-picker {
  display: flex; gap: 1rem; flex-wrap: wrap;
}
.pe-header-layout-option {
  flex: 1; min-width: 160px; max-width: 220px;
  display: flex; flex-direction: column; gap: .4rem;
  cursor: pointer;
  border: 2px solid var(--border, var(--border));
  border-radius: 10px; padding: .75rem;
  transition: border-color .18s, box-shadow .18s;
  background: var(--surface, #fff);
  user-select: none;
}
.pe-header-layout-option:hover { border-color: var(--primary, #7304C3); }
.pe-header-layout-option.is-active {
  border-color: var(--primary, #7304C3);
  box-shadow: 0 0 0 3px rgba(115,4,195,.12);
}

/* mini-preview do layout */
.pe-header-layout-preview {
  border-radius: 6px; overflow: hidden;
  background: #0d0d14;
  padding: 6px 7px; display: flex; flex-direction: column; gap: 4px;
}
.pe-hlp__bar {
  display: flex; align-items: center; gap: 4px;
  background: #1a1a2a; border-radius: 4px; padding: 5px 6px;
}
.pe-hlp__bar--nav { background: #13131f; padding: 4px 6px; }
.pe-hlp__bar--nav-center { justify-content: center; }
.pe-hlp__bar--single { background: #1a1a2a; border-radius: 4px; padding: 5px 6px; }

.pe-hlp__logo  { display: block; width: 28px; height: 8px; border-radius: 3px; background: var(--primary,#7304C3); flex-shrink:0; }
.pe-hlp__logo--center { margin: 0 auto; }
.pe-hlp__logo--sm { width: 20px; height: 6px; }
.pe-hlp__search { display: block; flex: 1; height: 8px; border-radius: 10px; background: rgba(255,255,255,.12); }
.pe-hlp__search--sm { height: 7px; }
.pe-hlp__auth  { display: block; width: 20px; height: 8px; border-radius: 3px; background: rgba(255,255,255,.2); flex-shrink:0; }
.pe-hlp__auth--sm { width: 16px; height: 6px; }
.pe-hlp__dot   { display: block; width: 20px; height: 5px; border-radius: 2px; background: rgba(255,255,255,.18); flex-shrink:0; }

/* labels */
.pe-header-layout-label {
  font-size: .82rem; font-weight: 700; color: var(--text, #18181B); margin-top: .15rem;
}
.pe-header-layout-desc {
  font-size: .72rem; color: var(--gray, #71717A); line-height: 1.3;
}

/* ══════════════════════════════════════════════════════════════════════════
   HOME REFRESH — layout mais moderno (Set/2026)
   Apenas visual: não altera markup nem queries, só melhora hierarquia,
   espaçamento, hover states e o cabeçalho de secção da home.
   ══════════════════════════════════════════════════════════════════════════ */

/* Título e sub das secções com mais respiração e um risco de destaque */
.pe-section { padding-top: 1.75rem; padding-bottom: 0; }
.pe-section__header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1rem; gap: 1rem;
}
.pe-section__title {
  font-size: 1.4rem; font-weight: 800; letter-spacing: -.01em;
  position: relative; padding-left: .8rem;
}
.pe-section__title::before {
  content: ""; position: absolute; left: 0; top: .15em; bottom: .15em;
  width: 4px; border-radius: 4px;
  background: linear-gradient(180deg, var(--purple, #7304C3), var(--green, #1FF07A));
}

/* Navegação de scroll (‹ ›) mais discreta e circular */
.pe-scroll-nav-group { display: flex; gap: .4rem; }
.pe-scroll-nav {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--border, var(--border)); background:var(--surface);
  color: var(--text, #18181B); font-size: 1.1rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .15s, border-color .15s, transform .15s;
}
.pe-scroll-nav:hover { background: var(--purple, #7304C3); border-color: var(--purple, #7304C3); color: #fff; transform: scale(1.06); }

/* Cartões de produto: sombra mais suave, cantos maiores, imagem com zoom subtil */
.product-card {
  border-radius: 16px;
  border-color: var(--border-light, var(--border));
  box-shadow: 0 1px 3px rgba(24,24,27,.04);
}
.product-card:hover {
  box-shadow: 0 12px 28px rgba(24,24,27,.10);
  transform: translateY(-4px);
}
.product-card__img { transition: transform .35s ease; }
.product-card:hover .product-card__img { transform: scale(1.04); }

/* Cartões de destaque (Top Vendedor / Produto Mais Solicitado) com glassmorphism leve */
.pe-highlight-card {
  border-radius: 18px;
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.pe-highlight-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(0,0,0,.16); }

/* ── Cartões de produto (scroll horizontal da home) — modelo "editorial" ── */
.pe-card {
  display: block; text-decoration: none; color: inherit;
  background:transparent; border-radius: 18px; border: 1px solid var(--border, var(--border));
  overflow: hidden; height: 100%;
  box-shadow: 0 1px 2px rgba(24,24,27,.04);
  transition: box-shadow .25s, transform .25s, border-color .25s;
}
.pe-card:hover {
  text-decoration: none; color: inherit;
  box-shadow: 0 18px 34px rgba(24,24,27,.16);
  transform: translateY(-5px);
  border-color: transparent;
}
.pe-card__media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: transparent; }
.pe-card__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.22,.61,.36,1); }
.pe-card:hover .pe-card__img { transform: scale(1.1); }
.pe-card__img--empty { display: flex; align-items: center; justify-content: center; color: var(--gray-light, #A1A1AA); }
.pe-card__condition { position: absolute; top: .6rem; left: .6rem; z-index: 2; }
.pe-card__condition .badge {
  backdrop-filter: blur(4px); box-shadow: 0 1px 4px rgba(0,0,0,.12);
  font-size: .64rem; font-weight: 800; letter-spacing: .01em;
}
/* Selo de estoque — usado em todos os tipos de card e reforçado no anúncio */
.pe-stock-ribbon {
  display: inline-flex; align-items: center; font-size: .64rem; font-weight: 800;
  letter-spacing: .01em; padding: .2rem .5rem; border-radius: 100px;
  backdrop-filter: blur(4px); box-shadow: 0 1px 4px rgba(0,0,0,.12);
}
.pe-stock-ribbon--out { color: #fff; background: rgba(220,38,38,.92); }
.pe-stock-ribbon--low { color: #fff; background: rgba(217,119,6,.92); }
.pe-card__media--out .pe-card__img { filter: grayscale(.6) brightness(.75); }
.pe-rank-card__media--out img,
.pe-new-card__media--out img { filter: grayscale(.6) brightness(.75); }
.product-card__img--out { filter: grayscale(.6) brightness(.75); }
.pe-card__play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 2;
}
.pe-card__play svg { width: 40px; height: 40px; border-radius: 50%; background: rgba(0,0,0,.55); padding: 13px; box-sizing: border-box; backdrop-filter: blur(2px); }
.pe-card__video-tag {
  position: absolute; top: .55rem; right: .55rem; z-index: 2;
  background: rgba(0,0,0,.6); border-radius: 6px; display: flex; align-items: center; gap: .3rem;
  padding: .18rem .5rem;
}
.pe-card__video-tag span { font-size: .65rem; font-weight: 700; color: #fff; }
/* Scrim: título + preço directamente sobre a foto, sempre visível */
.pe-card__scrim {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 1.6rem .75rem .7rem;
  background: linear-gradient(180deg, transparent 0%, rgba(10,8,16,.35) 45%, rgba(10,8,16,.88) 100%);
}
.pe-card__brand { font-size: .62rem; color: rgba(255,255,255,.65); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; margin-bottom: .15rem; }
.pe-card__title {
  font-size: .82rem; line-height: 1.3; font-weight: 700; color: #fff; margin: 0 0 .3rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  text-shadow: 0 1px 6px rgba(0,0,0,.3);
}
.pe-card__price { font-weight: 800; color: var(--green, #1FF07A); font-size: .92rem; }
.pe-card__price--muted { font-weight: 600; color: rgba(255,255,255,.75); font-size: .76rem; }
.pe-card__meta-bar {
  display: flex; align-items: center; gap: .4rem; padding: .55rem .7rem;
  border-top: 1px solid var(--border-light, var(--border));
}
.pe-card__meta {
  display: inline-flex; align-items: center; gap: .25rem; font-size: .66rem; font-weight: 600;
  color: var(--gray, #71717A); background: var(--bg, #F4F4F5); border-radius: 100px; padding: .22rem .5rem;
}
.pe-card__seller { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; margin-left: auto; border: 1.5px solid var(--surface); box-shadow: 0 0 0 1px var(--border-light, #EEEEF1); }

/* ── Overlay ao passar o rato: fundo próprio com toda a info do produto ── */
.pe-card__hover-info {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: .9rem .8rem .8rem;
  background: linear-gradient(180deg, rgba(64,21,123,.15) 0%, rgba(35,11,68,.94) 60%, rgba(24,8,46,.98) 100%);
  opacity: 0; pointer-events: none;
  transform: translateY(6px);
  transition: opacity .28s ease, transform .28s ease;
}
.pe-card:hover .pe-card__hover-info,
.pe-card:focus-visible .pe-card__hover-info {
  opacity: 1; transform: translateY(0);
}
.pe-card:hover .pe-card__scrim { opacity: 0; }
.pe-card__scrim { transition: opacity .2s ease; }
.pe-card__hover-info .pe-card__brand { color: rgba(255,255,255,.6); }
.pe-card__hover-info .pe-card__title {
  -webkit-line-clamp: 3; margin-bottom: .4rem;
}
.pe-card__hover-info .pe-card__price { display: block; margin-bottom: .55rem; }
.pe-card__hover-info-row {
  display: flex; align-items: center; gap: .4rem; font-size: .68rem;
  color: rgba(255,255,255,.75); margin-bottom: .25rem;
}
.pe-card__hover-info-row svg { flex-shrink: 0; opacity: .8; }
.pe-card__hover-cta {
  margin-top: .5rem; display: inline-flex; align-items: center; justify-content: center;
  background: var(--green, #1FF07A); color:var(--text); font-weight: 700; font-size: .74rem;
  border-radius: 8px; padding: .45rem 0; text-align: center;
}
@media (hover: none) {
  /* Em ecrãs táteis não há hover: mantém sempre a informação essencial visível */
  .pe-card__hover-info { display: none; }
}

/* ── Faixa de marcas (Pesquisar por marca) ── */
.pe-brand-band { padding: 1.75rem 0 .5rem; }
.pe-brand-band__title { font-size: 1.15rem; font-weight: 800; margin-bottom: 1rem; }
.pe-brand-band__scroll {
  display: flex; gap: .6rem; overflow-x: auto; padding-bottom: .3rem;
  scrollbar-width: none;
}
.pe-brand-band__scroll::-webkit-scrollbar { display: none; }
.pe-brand-chip {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem 1rem; border-radius: 999px;
  border: 1px solid var(--border, var(--border)); background:var(--surface);
  font-size: .85rem; font-weight: 600; color: var(--text, #18181B);
  text-decoration: none; transition: background .15s, border-color .15s, color .15s;
}
.pe-brand-chip:hover { background: var(--purple, #7304C3); border-color: var(--purple, #7304C3); color: #fff; text-decoration: none; }
.pe-brand-chip__count { font-size: .72rem; font-weight: 500; color: var(--gray-light, #A1A1AA); }
.pe-brand-chip:hover .pe-brand-chip__count { color: rgba(255,255,255,.75); }

/* ── Top Vendedor / Produto Mais Solicitado ── */
.pe-highlight-row {
  padding-top: 1.5rem;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 1.25rem;
}
.pe-highlight-card__eyebrow {
  display: flex; align-items: center; gap: .5rem; font-weight: 700;
  font-size: .8rem; text-transform: uppercase; letter-spacing: .04em;
}
.pe-highlight-card--seller .pe-highlight-card__eyebrow { color: var(--green, #1FF07A); }
.pe-highlight-card--product .pe-highlight-card__eyebrow { color: #A78BFA; }
.pe-highlight-card__body { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; }
.pe-highlight-card__body--product { align-items: flex-start; }
.pe-highlight-card__avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid var(--green, #1FF07A); flex-shrink: 0; }
.pe-highlight-card__avatar--placeholder { display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.15); color: var(--green, #1FF07A); }
.pe-highlight-card__thumb { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.pe-highlight-card__name { font-weight: 700; font-size: 1.1rem; color: #fff; }
.pe-highlight-card__name--sm { font-size: 1rem; line-height: 1.3; }
.pe-highlight-card__meta { color: rgba(255,255,255,.7); font-size: .875rem; margin-top: .15rem; }
.pe-highlight-card__stat { color: var(--green, #1FF07A); font-size: .875rem; margin-top: .3rem; }
.pe-highlight-card--product .pe-highlight-card__stat { color: #A78BFA; }

/* ── CTA "É vendedor..." — banner com glow radial ── */
.pe-cta-sell {
  position: relative; overflow: hidden; margin-top: 1.75rem;
  padding: 3.5rem 0; color: #fff; text-align: center;
  background: linear-gradient(135deg, var(--purple-dark, #40157B), var(--purple, #7304C3));
}
.pe-cta-sell__glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 15% 20%, rgba(31,240,122,.25), transparent 45%),
              radial-gradient(circle at 85% 80%, rgba(255,255,255,.12), transparent 40%);
}
.pe-cta-sell__inner { position: relative; z-index: 1; }
.pe-cta-sell__badge {
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25);
  padding: .3rem .85rem; border-radius: 999px; font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--green, #1FF07A);
  margin-bottom: 1rem;
}
.pe-cta-sell__title { color: #fff; margin-bottom: .75rem; font-size: 1.75rem; font-weight: 800; }
.pe-cta-sell__text { color: rgba(255,255,255,.82); margin-bottom: 1.75rem; max-width: 520px; margin-left: auto; margin-right: auto; }
@media (max-width: 640px) {
  .pe-cta-sell { padding: 2.5rem 0; }
  .pe-cta-sell__title { font-size: 1.35rem; }
}

/* Slider hero: título com mais peso e sombra de texto para legibilidade sobre fotos */
.pe-hero-slide__title { text-shadow: 0 2px 12px rgba(0,0,0,.25); }
.pe-hero-slider { overflow: hidden; }

/* Secção Newsletter mais destacada */
.pe-nl-section { background: linear-gradient(135deg, var(--purple-dark, #40157B), var(--purple, #7304C3)); }
.pe-nl-section__title, .pe-nl-section__text { color: #fff; }
.pe-nl-section__text { color: rgba(255,255,255,.8); }

@media (max-width: 640px) {
  .pe-section { padding-top: 2rem; }
  .pe-section__title { font-size: 1.15rem; }
}

/* ==========================================================================
   REDESIGN DA HOME — camada final (prioridade de cascata sobre as regras
   anteriores). Não altera nenhuma classe usada pelo JS (carrosséis, dots,
   nav), só a aparência. Objectivo: mais respiração, hierarquia mais clara,
   menos "cartões genéricos iguais", acentos de cor usados com intenção.
   ========================================================================== */

/* Ritmo geral: secções alternam branco / cinza muito claro para criar
   blocos visuais sem precisar de linhas divisórias em todo o lado. */
.pe-section:nth-of-type(odd) { background:var(--surface); }
.pe-brand-band,
.pe-nl-section { background:var(--surface-2); }

/* Cabeçalhos de secção: título mais assertivo + link "Ver tudo" quando
   existir, régua verde curta como assinatura da marca em vez de eyebrow
   maiúsculas genérico. */
.pe-section__header {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 1.4rem; padding-top: .2rem;
}
.pe-section__title {
  font-size: 1.4rem; font-weight: 800; color: var(--text);
  letter-spacing: -.01em; position: relative; padding-left: 0;
}
.pe-section__title::before { display: none; }
.pe-section__title::after {
  content: ''; display: block; width: 30px; height: 4px; border-radius: 4px;
  background: var(--green, #1FF07A); margin-top: .5rem;
}
@media (max-width: 640px) { .pe-section__title { font-size: 1.15rem; } }

/* Botões de navegação dos carrosséis: unificados, discretos, com melhor
   estado de foco/hover — substituem as várias variantes duplicadas antes. */
.pe-scroll-nav-group { display: flex; gap: .5rem; }
.pe-scroll-nav {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--border, var(--border)); background:var(--surface);
  color: var(--text); font-size: 1.1rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.pe-scroll-nav:hover,
.pe-scroll-nav:focus-visible {
  background: var(--dark, #18181B); border-color: var(--dark, #18181B); color: #fff;
  transform: none;
}
@media (max-width: 640px) { .pe-scroll-nav { width: 32px; height: 32px; font-size: 1rem; } }

/* Marcas: pills mais refinados, sem sombra pesada, contraste maior no hover. */
.pe-brand-band { padding: 1.75rem 0; }
.pe-brand-band__title {
  font-size: 1.4rem; font-weight: 800; color: var(--text);
  letter-spacing: -.01em; margin-bottom: 1.25rem;
}
.pe-brand-chip {
  border: 1px solid var(--border, var(--border)); background:var(--surface); border-radius: 100px;
  padding: .5rem 1rem; font-size: .85rem; font-weight: 600; color: var(--text);
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.pe-brand-chip:hover {
  background: var(--dark, #18181B); border-color: var(--dark, #18181B); color: #fff;
}
.pe-brand-chip__count { color: var(--gray-light, #A1A1AA); }
.pe-brand-chip:hover .pe-brand-chip__count { color: rgba(255,255,255,.65); }

/* Cartões de destaque (Top Vendedor / Produto Mais Solicitado): fundo com
   textura subtil em vez de gradiente genérico, borda fina, tipografia mais
   sóbria. Mantém verde só para o vendedor e roxo claro para o produto,
   para diferenciar as duas colunas à primeira vista. */
.pe-highlight-row { gap: 1.1rem; }
.pe-highlight-card {
  border-radius: 18px; padding: 1.5rem 1.6rem; border: 1px solid transparent;
  background-image:
    radial-gradient(circle at 100% 0%, rgba(255,255,255,.08), transparent 55%);
}
.pe-highlight-card--seller {
  background-color: #0F3A25; background-image:
    radial-gradient(circle at 100% 0%, rgba(31,240,122,.18), transparent 55%);
}
.pe-highlight-card--product {
  background-color: #2A1049; background-image:
    radial-gradient(circle at 100% 0%, rgba(167,139,250,.22), transparent 55%);
}
.pe-highlight-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,.18); }
.pe-highlight-card__eyebrow {
  font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: none;
  display: flex; align-items: center; gap: .4rem; opacity: .9;
}
.pe-highlight-card__name { font-size: 1.05rem; }

/* Cartões de produto: radius e sombra consistentes, elevação só ao hover
   (nada de sombra permanente em todos os cartões). */
.product-card, .pe-sponsor-card {
  border-radius: 14px; border: 1px solid var(--border, var(--border));
  box-shadow: none; transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.product-card:hover {
  box-shadow: 0 10px 24px rgba(24,24,27,.1); border-color: transparent; transform: translateY(-3px);
}
.product-card__price { color: var(--text); font-weight: 800; }

/* CTA "Vender": bloco preto sólido com régua verde no topo e padrão de
   pontos subtil, em vez do glow roxo desfocado — assinatura mais discreta
   e legível. */
.pe-cta-sell {
  background: #0A0A0B; position: relative; overflow: hidden;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 18px 18px;
}
.pe-cta-sell::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--green, #1FF07A);
}
.pe-cta-sell__glow { display: none; }
.pe-cta-sell__inner { position: relative; text-align: center; padding: 3rem 1.5rem; }
.pe-cta-sell__badge {
  display: inline-flex; align-items: center; gap: .4rem; background: rgba(31,240,122,.12);
  color: var(--green, #1FF07A); border-radius: 100px; padding: .35rem .9rem;
  font-size: .78rem; font-weight: 700; margin-bottom: 1.1rem;
}
.pe-cta-sell__title {
  color: #fff; font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em;
  margin-bottom: .6rem; max-width: 30ch; margin-left: auto; margin-right: auto;
}
.pe-cta-sell__text { color: rgba(255,255,255,.6); font-size: .95rem; margin-bottom: 1.6rem; }
@media (max-width: 640px) { .pe-cta-sell__title { font-size: 1.4rem; } }

/* Newsletter da home: alinhado ao mesmo cartão sóbrio, sem gradiente roxo. */
.pe-nl-section__inner {
  background: #0A0A0B; border-radius: 18px; padding: 2rem 2.2rem;
}
.pe-nl-section__title { color: var(--green, #1FF07A); }
.pe-nl-section__text { color: rgba(255,255,255,.65); }

/* Patrocinados: cabeçalho de coluna mais limpo, etiqueta discreta. */
.pe-sponsor-col { border-radius: 16px; }
.pe-sponsor-col__tag {
  background: transparent; border: 1px solid var(--border, var(--border)); color: var(--gray, #71717A);
  font-weight: 600;
}

/* ── Badge de oferta/desconto nos combos patrocinados ── */
.pe-sponsor-card__discount {
  position: absolute; top: .6rem; right: .6rem; z-index: 2;
  background: var(--green, #1FF07A); color: #0A0A0B;
  font-size: .72rem; font-weight: 800; padding: .25rem .5rem; border-radius: 100px;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.product-card__price-old {
  display: inline-block; margin-left: .4rem; font-size: .78rem; font-weight: 600;
  color: var(--gray-light, #A1A1AA); text-decoration: line-through;
}

/* ==========================================================================
   Três apresentações distintas para as secções de produtos da home:
   "Peças em destaque" usa o .pe-card (grande, com overlay ao hover — já
   existente); "Top Peças" é uma lista numerada (ranking real, por cliques
   WhatsApp); "Novas Peças" é um cartão minimalista focado na recência.
   ========================================================================== */

/* Top Peças — ranking horizontal compacto (4 por vista, como as outras secções) */
.pe-rank-card {
  display: flex; align-items: center; gap: .7rem; height: 100%;
  background:var(--surface); border: 1px solid var(--border, var(--border)); border-radius: 14px;
  padding: .7rem .8rem; color: inherit; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.pe-rank-card:hover {
  border-color: transparent; box-shadow: 0 10px 24px rgba(24,24,27,.1);
  transform: translateY(-3px); text-decoration: none;
}
.pe-rank-card__media {
  flex-shrink: 0; width: 56px; height: 56px; border-radius: 10px; overflow: hidden;
  background: transparent; display: flex; align-items: center; justify-content: center;
}
.pe-rank-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pe-rank-card__media--empty { color: var(--gray-light, #A1A1AA); }
.pe-rank-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pe-rank-card__brand { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--gray-light, #A1A1AA); }
.pe-rank-card__title { font-size: .82rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pe-rank-card__price { font-size: .85rem; font-weight: 800; color: var(--purple, #7304C3); }
.pe-rank-card__stat {
  flex-shrink: 0; display: flex; align-items: center; gap: .25rem; font-size: .72rem; font-weight: 700;
  color: var(--purple-text, #40157B); background: rgba(115,4,195,.08); padding: .3rem .45rem; border-radius: 8px;
}
@media (max-width: 480px) {
  .pe-rank-card { gap: .5rem; padding: .55rem; }
  .pe-rank-card__media { width: 42px; height: 42px; border-radius: 8px; }
  .pe-rank-card__brand { display: none; }
  .pe-rank-card__title { font-size: .74rem; }
  .pe-rank-card__price { font-size: .76rem; }
  .pe-rank-card__stat { font-size: 0; padding: .3rem; gap: 0; }
  .pe-rank-card__stat svg { width: 13px; height: 13px; }
}

/* Novas Peças — cartão minimalista, vertical, focado na recência (4 por vista) */
.pe-new-card {
  display: block; color: inherit; height: 100%;
  background:var(--surface); border: 1px solid var(--border, var(--border)); border-radius: 14px;
  padding: .6rem; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.pe-new-card:hover {
  text-decoration: none; border-color: transparent;
  box-shadow: 0 10px 24px rgba(24,24,27,.1); transform: translateY(-3px);
}
.pe-new-card__tag { display: none; }
.pe-new-card__media {
  display: block; width: 100%; aspect-ratio: 1/1; border-radius: 10px; overflow: hidden;
  background: transparent; margin-bottom: .55rem;
}
.pe-new-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.pe-new-card:hover .pe-new-card__media img { transform: scale(1.05); }
.pe-new-card__media--empty { display: flex; align-items: center; justify-content: center; color: var(--gray-light, #A1A1AA); }
.pe-new-card__body { display: flex; flex-direction: column; gap: 1px; padding: 0 .1rem .1rem; }
.pe-new-card__brand { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--gray-light, #A1A1AA); }
.pe-new-card__title {
  font-size: .8rem; font-weight: 600; color: var(--text); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.1em; margin-bottom: 2px;
}
.pe-new-card__price { font-size: .84rem; font-weight: 800; color: var(--text); }
.pe-new-card__meta-bar {
  display: flex; align-items: center; gap: .4rem; margin-top: .5rem; padding-top: .5rem;
  border-top: 1px solid var(--border-light, var(--border));
}
.pe-new-card__views {
  display: inline-flex; align-items: center; gap: .25rem; font-size: .66rem; font-weight: 600;
  color: var(--gray, #71717A); background: var(--bg, #F4F4F5); border-radius: 100px; padding: .22rem .5rem;
}
.pe-new-card__seller { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; margin-left: auto; border: 1.5px solid var(--surface); box-shadow: 0 0 0 1px var(--border-light, #EEEEF1); }

/* Top Vendedor / Produto Mais Solicitado — no desktop a grid "auto-fit" faz
   o(s) cartão(ões) esticarem para preencher toda a largura, ficando
   encostados à esquerda quando há apenas um cartão (ex.: só Top Vendedor,
   sem Produto Mais Solicitado). Em vez de esticar, centra o(s) cartão(ões)
   como um bloco, com uma largura máxima confortável. */
@media (min-width: 769px) {
  .pe-highlight-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .pe-highlight-card {
    flex: 1 1 380px;
  }
  /* Só limita a largura quando há um único cartão (ex.: apenas Top Vendedor,
     sem Produto Mais Solicitado) — com 2 cartões, ambos crescem para
     preencher toda a largura da área de conteúdo, como as outras secções. */
  .pe-highlight-card:only-child {
    max-width: 480px;
  }
}


/* ==========================================================================
   HOME — layout de marketplace (categorias | banner | atalhos, faixa de
   confiança, grelhas de produtos densas). Prefixo .mk-
   ========================================================================== */
.mk-top { padding: 1rem 0 0; }
.mk-top__grid {
  display: grid; grid-template-columns: 250px minmax(0, 1fr) 270px; gap: 1rem; align-items: stretch;
}

/* Categorias (esquerda) */
.mk-cats { background:var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.mk-cats__head {
  display: flex; align-items: center; gap: .5rem; padding: .8rem 1rem;
  background: var(--purple-dark); color: #fff; font-weight: 700; font-size: .9rem;
}
.mk-cats__list { list-style: none; flex: 1; overflow-y: auto; max-height: 400px; }
.mk-cats__list a {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .55rem 1rem; font-size: .86rem; color: var(--text); border-bottom: 1px solid var(--border);
}
.mk-cats__list a:hover { background: rgba(115,4,195,.06); color: var(--purple); }
.mk-cats__list em { font-style: normal; font-size: .72rem; color: var(--gray); background:var(--surface-2); border-radius: 100px; padding: .05rem .5rem; }
.mk-cats__all a { font-weight: 700; color: var(--purple); border-bottom: 0; }

/* Banner (centro) — reaproveita o slider existente */
.mk-banner { position: relative; border-radius: 12px; overflow: hidden; min-height: 340px; background: var(--purple-dark); }
.mk-banner .pe-hero-slider { height: 100% !important; min-height: 340px; border-radius: 0; }
.mk-banner .pe-hero-slide__content { padding: 1.5rem 2.25rem !important; max-width: 100%; }
.mk-banner .pe-hero-slide__title { font-size: clamp(1.4rem, 2.6vw, 2.2rem); }
.mk-banner__fallback {
  height: 100%; min-height: 340px; padding: 2.5rem; display: flex; flex-direction: column; justify-content: center; gap: .9rem;
  background: linear-gradient(135deg, var(--purple-dark), var(--purple)); color: #fff;
}
.mk-banner__fallback h1 { font-size: clamp(1.5rem, 3vw, 2.3rem); font-weight: 800; line-height: 1.15; max-width: 18ch; }
.mk-banner__fallback p { max-width: 42ch; color: rgba(255,255,255,.8); }
.mk-banner__fallback .btn { align-self: flex-start; }

/* Atalhos (direita) */
.mk-side { display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
.mk-side__user, .mk-side__tile { background:var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: .9rem 1rem; }
.mk-side__user strong { display: block; font-size: .95rem; margin-bottom: .2rem; }
.mk-side__user p { font-size: .8rem; color: var(--text-muted); line-height: 1.4; }
.mk-side__btns { display: flex; gap: .5rem; margin-top: .7rem; }
.mk-side__btns .btn { flex: 1; justify-content: center; }
.mk-side__tile { display: flex; flex-direction: column; gap: .35rem; flex: 1; min-height: 0; color: var(--text); transition: border-color .15s; }
.mk-side__tile:hover { border-color: var(--purple); }
.mk-side__label { display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem; font-weight: 700; color: var(--purple); }
.mk-side__tile img { width: 100%; flex: 1; min-height: 0; max-height: 120px; object-fit: cover; border-radius: 8px; background: var(--bg); }
.mk-side__name { font-size: .88rem; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mk-side__meta { font-size: .76rem; color: var(--gray); }

/* Faixa de confiança */
.mk-trust { padding: 1rem 0 0; }
.mk-trust__box {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  background:var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
}
.mk-trust__box > div { display: flex; align-items: center; gap: .7rem; padding: .85rem 1.1rem; border-right: 1px solid var(--border); color: var(--purple); }
.mk-trust__box > div:last-child { border-right: 0; }
.mk-trust__box span { display: flex; flex-direction: column; font-size: .76rem; color: var(--text-muted); line-height: 1.3; }
.mk-trust__box strong { font-size: .86rem; color: var(--text); }
.mk-trust__icon { flex: 0 0 auto; width: 24px; height: 24px; color: var(--purple); }
.mk-trust__icon svg { width: 100%; height: 100%; }

/* Marcas */
.mk-brands { padding: .9rem 0 0; }
.mk-brands__scroll { display: flex; align-items: center; gap: .5rem; overflow-x: auto; scrollbar-width: none; padding-bottom: .15rem; }
.mk-brands__scroll::-webkit-scrollbar { display: none; }
.mk-brands__label { flex: 0 0 auto; font-weight: 800; font-size: .88rem; margin-right: .4rem; }
.mk-brand {
  flex: 0 0 auto; padding: .4rem .95rem; background:var(--surface); border: 1px solid var(--border);
  border-radius: 100px; font-size: .82rem; font-weight: 600; color: var(--text);
}
.mk-brand:hover { border-color: var(--purple); color: var(--purple); }

/* Secções de produtos */
.mk-section { padding-top: 1.75rem; padding-bottom: 0; }
.mk-section--last { padding-bottom: 2.5rem; }
.mk-section__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem 1rem; margin-bottom: .9rem; background:var(--surface); border: 1px solid var(--border);
  border-radius: 10px;
}
.mk-section__head h2 { display: flex; align-items: center; gap: .5rem; font-size: 1.1rem; font-weight: 800; letter-spacing: -.01em; }
.mk-section__head h2 svg { color: var(--purple); }
.mk-section__head--hot { background: linear-gradient(90deg, var(--purple-dark), var(--purple)); border-color: var(--purple-dark); }
.mk-section__head--hot h2, .mk-section__head--hot h2 svg { color: #fff; }
.mk-section__head--hot .mk-section__more { color: #fff; border-color: rgba(255,255,255,.4); }
.mk-section__more {
  display: inline-flex; align-items: center; gap: .2rem; flex: 0 0 auto;
  font-size: .82rem; font-weight: 700; color: var(--purple); padding: .3rem .8rem; border: 1px solid var(--border); border-radius: 100px;
}
.mk-section__more:hover { background: rgba(255,255,255,.12); border-color: currentColor; }
.mk-empty { color: var(--gray); padding: 1rem 0; }
.mk-more { text-align: center; margin-top: 1.5rem; }

.mk-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .75rem; }
/* Ecrãs grandes: mais colunas (cards mais pequenos). A home carrega 24 peças por
   secção e o CSS esconde as que sobram para a última linha ficar sempre completa. */
.mk-grid > .mk-card:nth-child(n+19) { display: none; }                 /* 6 col × 3 linhas */
@media (min-width: 1500px) {
  .mk-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .mk-grid > .mk-card:nth-child(n+19) { display: flex; }
  .mk-grid > .mk-card:nth-child(n+22) { display: none; }               /* 7 col × 3 linhas */
}
@media (min-width: 1800px) {
  .mk-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .mk-grid > .mk-card:nth-child(n+22) { display: flex; }
  .mk-grid > .mk-card:nth-child(n+25) { display: none; }               /* 8 col × 3 linhas */
}
@media (min-width: 2300px) {
  .mk-grid { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .mk-grid > .mk-card:nth-child(n+25) { display: flex; }
  .mk-grid > .mk-card:nth-child(n+31) { display: none; }               /* 10 col × 3 linhas */
}

/* Cartão de produto */
.mk-card {
  display: flex; flex-direction: column; background:var(--surface); border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; color: var(--text); transition: border-color .15s, box-shadow .15s;
}
.mk-card:hover, .mk-card:focus-visible { border-color: var(--purple); box-shadow: 0 6px 18px rgba(64,21,123,.14); outline: 0; }
.mk-card__media { position: relative; aspect-ratio: 1 / 1; background: transparent; overflow: hidden; }
.mk-card__media img { width: 100%; height: 100%; object-fit: cover; }
.mk-card__media.is-out img { filter: grayscale(.7) brightness(.8); }
.mk-card__empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--gray-light); }
.mk-card__stock { position: absolute; top: .5rem; right: .5rem; z-index: 2; }
.mk-card__rank {
  position: absolute; top: 0; left: 0; z-index: 2; min-width: 34px; text-align: center;
  padding: .2rem .55rem; font-size: .78rem; font-weight: 800; color: #fff; background: var(--dark); border-bottom-right-radius: 10px;
}
.mk-card__rank.is-top { background: var(--green); color: var(--dark); }
.mk-card__body { display: flex; flex-direction: column; gap: .4rem; padding: .7rem .8rem .8rem; flex: 1; }
.mk-card__title {
  font-size: .86rem; font-weight: 500; line-height: 1.35; min-height: 2.7em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mk-card__price { font-size: 1.28rem; font-weight: 800; letter-spacing: -.02em; color: var(--text); line-height: 1.1; }
.mk-card__price small { font-size: .68rem; font-weight: 700; margin-left: .2rem; color: var(--text-muted); letter-spacing: 0; }
.mk-card__price.is-muted { font-size: .92rem; font-weight: 700; color: var(--text-muted); letter-spacing: 0; }
.mk-card__tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.mk-tag { display: inline-flex; align-items: center; gap: .2rem; font-size: .66rem; font-weight: 700; padding: .12rem .45rem; border-radius: 4px; }
.mk-tag--new { background: rgba(31,240,122,.18); color: #046C33; }
.mk-tag--used { background:var(--surface-2); color: var(--text-muted); }
.mk-tag--fresh { background: rgba(115,4,195,.1); color: var(--purple); }
.mk-tag--verified { background: rgba(37,99,235,.1); color: #1D4ED8; }
.mk-card__foot { display: flex; align-items: center; justify-content: space-between; gap: .4rem; margin-top: auto; padding-top: .35rem; font-size: .72rem; color: var(--gray); }
.mk-card__foot span { display: inline-flex; align-items: center; gap: .25rem; min-width: 0; }
.mk-card__demand { color: #046C33; font-weight: 700; }
.mk-card__seller { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; overflow: hidden; background: var(--bg); border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; color: var(--gray); }
.mk-card__seller img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-card__foot .mk-card__seller svg { width: 12px; height: 12px; }

@media (max-width: 1100px) {
  .mk-top__grid { grid-template-columns: 230px minmax(0, 1fr); }
  .mk-side { display: none; }
  .mk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mk-grid > .mk-card:nth-child(n+17) { display: none; }               /* 4 col × 4 linhas */
}
@media (max-width: 820px) {
  .mk-top__grid { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
  /* categorias: removidas na versão mobile */
  .mk-finder { display: none; }
  .mk-banner { order: 1; min-height: 190px; border-radius: 12px; }
  .mk-banner .pe-hero-slider, .mk-banner__fallback { min-height: 190px; }
  .mk-banner .pe-hero-slide__content { padding: 1rem 1.25rem !important; }
  .mk-trust__box { grid-template-columns: repeat(2, 1fr); }
  .mk-trust__box > div { border-bottom: 1px solid var(--border); }
  .mk-trust__box > div:nth-child(2n) { border-right: 0; }
  .mk-trust__box > div:nth-last-child(-n+2) { border-bottom: 0; }
  .mk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mk-grid > .mk-card:nth-child(n+16) { display: none; }               /* 3 col × 5 linhas */
}
@media (max-width: 640px) {
  .mk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
  .mk-grid > .mk-card:nth-child(n+15) { display: none; }               /* 2 col × 7 linhas */
  .mk-card__body { padding: .55rem .6rem .65rem; }
  .mk-card__price { font-size: 1.1rem; }
  .mk-card__tags .mk-tag--verified { display: none; }
  .mk-section__head { padding: .6rem .8rem; }
  .mk-section__head h2 { font-size: .98rem; }
  .mk-trust__box > div { padding: .7rem .75rem; gap: .5rem; }
  .mk-trust__box span { font-size: .7rem; }
}
@media (prefers-reduced-motion: reduce) { .mk-card, .mk-side__tile { transition: none; } }


/* Cards clicáveis: nunca sublinhar texto ao passar o rato */
a.mk-card, a.mk-card:hover, a.mk-card:focus, a.mk-card *,
a.pe-card, a.pe-card:hover, a.pe-card *,
a.pe-rank-card, a.pe-rank-card:hover, a.pe-rank-card *,
a.pe-new-card, a.pe-new-card:hover, a.pe-new-card *,
a.product-card, a.product-card:hover, a.product-card *,
a.pe-sponsor-card, a.pe-sponsor-card:hover, a.pe-sponsor-card *,
a.seller-card, a.seller-card:hover, a.seller-card * { text-decoration: none !important; }
a.mk-card, a.pe-card, a.pe-rank-card, a.pe-new-card, a.pe-sponsor-card { cursor: pointer; }


/* ── Hero: localizador (esq.) e coluna lateral (dir.) ── */
.mk-finder { background:var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.mk-finder__head { display: flex; align-items: center; gap: .5rem; padding: .8rem 1rem; background: var(--purple-dark); color: #fff; font-weight: 700; font-size: .9rem; }
.mk-finder__body { display: flex; flex-direction: column; gap: .6rem; padding: .9rem 1rem; flex: 1; }
.mk-finder__field { display: flex; flex-direction: column; gap: .2rem; }
.mk-finder__field span { font-size: .7rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.mk-finder__field input, .mk-finder__field select {
  width: 100%; height: 36px; padding: 0 .65rem; font-size: .84rem; color: var(--text);
  background:var(--surface); border: 1px solid var(--border); border-radius: 8px; font-family: inherit;
}
.mk-finder__field input:focus, .mk-finder__field select:focus { outline: 0; border-color: var(--purple); box-shadow: 0 0 0 3px rgba(115,4,195,.1); }
.mk-finder__btn { width: 100%; justify-content: center; margin-top: auto; }
.mk-finder__foot {
  display: flex; align-items: center; gap: .55rem; padding: .7rem 1rem; background: rgba(115,4,195,.05);
  border-top: 1px solid var(--border); color: var(--purple); font-size: .76rem; line-height: 1.3;
}
.mk-finder__foot strong { display: block; color: var(--text); font-size: .8rem; }
.mk-finder__foot svg { flex-shrink: 0; }

.mk-side__user { padding: 1rem; }
.mk-side__tile { flex-direction: row; align-items: center; gap: .75rem; flex: 0 0 auto; padding: .7rem .8rem; }
.mk-side__tile img, .mk-side__thumb {
  flex: 0 0 60px; width: 60px; height: 60px; max-height: none; border-radius: 10px; object-fit: cover;
  background: var(--bg); display: flex; align-items: center; justify-content: center; color: var(--gray-light);
}
.mk-side__thumb--seller { background: linear-gradient(135deg, var(--purple), var(--purple-dark)); color: #fff; }
.mk-side__txt { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.mk-side__meta { display: inline-flex; align-items: center; gap: .25rem; font-size: .74rem; color: var(--gray); }
.mk-side__sell {
  display: flex; align-items: center; gap: .7rem; margin-top: auto; padding: .85rem 1rem; border-radius: 12px;
  background: linear-gradient(135deg, var(--purple), var(--purple-dark)); color: #fff;
}
.mk-side__sell:hover { color: #fff; filter: brightness(1.08); }
.mk-side__sell span { display: flex; flex-direction: column; font-size: .74rem; color: rgba(255,255,255,.8); line-height: 1.3; }
.mk-side__sell strong { font-size: .88rem; color: #fff; }
.mk-side__sell svg { flex-shrink: 0; }


/* Mobile: localizador escondido (declarado no fim para vencer o display:flex acima) */
@media (max-width: 820px) { .mk-finder { display: none !important; } }

/* Mobile: tipografia dos cards mais pequena */
@media (max-width: 640px) {
  .mk-card { border-radius: 8px; }
  .mk-card__body { gap: .3rem; padding: .5rem .55rem .6rem; }
  .mk-card__title { font-size: .74rem; line-height: 1.3; min-height: 2.6em; }
  .mk-card__price { font-size: .95rem; }
  .mk-card__price small { font-size: .58rem; }
  .mk-card__price.is-muted { font-size: .78rem; }
  .mk-tag { font-size: .58rem; padding: .08rem .35rem; }
  .mk-card__foot { font-size: .64rem; padding-top: .2rem; gap: .25rem; }
  .mk-card__foot svg { width: 11px; height: 11px; }
  .mk-card__rank { font-size: .68rem; min-width: 28px; padding: .15rem .45rem; }
  .mk-section__head h2 { font-size: .88rem; }
  .mk-section__more { font-size: .72rem; }
}


/* Sem sublinhado em hover, em nenhum link do tema */
a, a:hover, a:focus { text-decoration: none; }
.mk-section__more:hover { color: var(--purple); border-color: var(--purple); }
.mk-side__sell, .mk-finder__foot { transition: filter .15s, background .15s; }
.mk-finder__foot:hover { background: rgba(115,4,195,.1); }
.mk-side__thumb--seller { font-weight: 800; font-size: 1.3rem; }


/* ══════════════════════════════════════════════════════════════════════════
   HOME — filas com setas, benefícios (esq.), altura uniforme, avatar do vendedor
   ══════════════════════════════════════════════════════════════════════════ */

/* Filas de produtos com setas no cabeçalho; o último item é o card "Ver mais" */
.mk-rail {
  --mk-cols: 6; --mk-gap: .75rem;
  display: flex; align-items: stretch; gap: var(--mk-gap);
  overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x proximity;
  overscroll-behavior-x: contain; scrollbar-width: none;
  padding: 6px 2px; margin: -6px -2px;
}
.mk-rail::-webkit-scrollbar { display: none; }
.mk-rail > .mk-card {
  flex: 0 0 calc((100% - (var(--mk-cols) - 1) * var(--mk-gap)) / var(--mk-cols));
  min-width: 0; scroll-snap-align: start;
}
@media (min-width: 1500px) { .mk-rail { --mk-cols: 7; } }
@media (min-width: 1800px) { .mk-rail { --mk-cols: 8; } }
@media (min-width: 2300px) { .mk-rail { --mk-cols: 10; } }
@media (max-width: 1100px) { .mk-rail { --mk-cols: 4; } }
@media (max-width: 820px)  { .mk-rail { --mk-cols: 3; } }
@media (max-width: 640px)  { .mk-rail { --mk-cols: 2; --mk-gap: .55rem; } }

.mk-card--more {
  justify-content: center; align-items: center; text-align: center; gap: .6rem; padding: 1rem;
  background: rgba(115,4,195,.05); border: 1px dashed rgba(115,4,195,.35);
  color: var(--purple); font-weight: 700; font-size: .9rem;
}
.mk-card--more:hover { background: rgba(115,4,195,.1); border-color: var(--purple); }
.mk-card__more-arrow {
  width: 44px; height: 44px; border-radius: 50%; background: var(--purple); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem; line-height: 1; padding-bottom: 2px;
}

.mk-section__head .pe-scroll-nav-group { margin-left: auto; }
.pe-scroll-nav:disabled { opacity: .35; cursor: default; pointer-events: none; }
.mk-section__head--hot .pe-scroll-nav { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.45); color: #fff; }
.mk-section__head--hot .pe-scroll-nav:hover,
.mk-section__head--hot .pe-scroll-nav:focus-visible { background:var(--surface); border-color: var(--surface); color: var(--purple); }

/* Coluna esquerda do topo: benefícios (substitui o formulário "Encontre a sua peça") */
.mk-benefits {
  background:var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
  display: flex; flex-direction: column;
}
.mk-benefits__item {
  flex: 1; padding: .8rem 1.1rem; border-bottom: 1px solid var(--border);
  display: flex; flex-direction: row; align-items: center; gap: .65rem;
}
.mk-benefits__item:last-child { border-bottom: 0; }
.mk-benefits__item strong { font-size: .95rem; color: var(--text); line-height: 1.25; }
.mk-benefits__item span { font-size: .8rem; color: var(--text-muted); line-height: 1.3; }
.mk-benefits__icon { flex: 0 0 auto; width: 26px; height: 26px; color: var(--purple); }
.mk-benefits__icon svg { width: 100%; height: 100%; }
.mk-benefits__text { display: flex; flex-direction: column; }

/* Desktop/laptop: benefícios na coluna esquerda; a faixa de confiança fica só no mobile */
.mk-trust { display: none; }
@media (max-width: 820px) {
  .mk-benefits { display: none; }
  .mk-trust { display: block; }
}

/* Altura uniforme do topo (banner + colunas) em desktop e laptop */
@media (min-width: 821px) {
  .mk-top__grid { height: 360px; }
  .mk-banner { height: 100%; min-height: 0; }
  .mk-banner .pe-hero-slider,
  .mk-banner__fallback { height: 100% !important; min-height: 0; }
  .mk-benefits, .mk-side { min-height: 0; overflow: hidden; }
}

/* Patrocinados: em desktop/laptop todos os slides têm a mesma altura — as colunas
   vazias mantêm-se, por isso o último grupo (com menos cartões) não estica */
@media (min-width: 821px) {
  .pe-sponsor-slide { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
}

/* Vendedor do mês: imagem da loja no lugar da letra inicial */
.mk-side__tile img.mk-side__avatar {
  flex: 0 0 60px; width: 60px; height: 60px; max-height: none; border-radius: 10px; object-fit: cover; background: var(--bg);
}


/* ══════════════════════════════════════════════════════════════════════
   Estilo "marketplace" inspirado no AliExpress (2026-09-28)
   Cards limpos, preço a vermelho, pedidos, coração, categorias e feed denso.
   ══════════════════════════════════════════════════════════════════════ */
:root { --pe-price: #7304C3; }

/* Títulos de secção sem caixa (como no AliExpress) */
.mk-section__head:not(.mk-section__head--hot) { background: transparent; border: 0; padding: 0 .15rem; }
.mk-section__head:not(.mk-section__head--hot) h2 { font-size: 1.3rem; font-weight: 800; }
.mk-section__head--center { justify-content: center; }

/* Cards */
.mk-card { border-color: var(--border-light, var(--border)); border-radius: 16px; box-shadow: 0 1px 3px rgba(24,24,27,.04); }
.mk-card:hover, .mk-card:focus-visible { border-color: transparent; box-shadow: 0 8px 22px rgba(0,0,0,.14); transform: translateY(-2px); }
.mk-card__body { gap: .3rem; padding: .55rem .65rem .7rem; }
.mk-card__title { font-size: .84rem; font-weight: 400; }
.mk-card__price { color: var(--purple); font-size: 1.15rem; font-weight: 800; }
.mk-card__price small { color: var(--purple); font-size: .7rem; }
.mk-card__price.is-muted { color: var(--text-muted); }
.mk-card__sold { display: flex; align-items: center; gap: .28rem; font-size: .72rem; color: var(--gray); }
.mk-card__sold svg { flex: 0 0 auto; width: 13px; height: 13px; color: #25D366; }
.mk-card__stock { top: auto; right: auto; bottom: .4rem; left: .4rem; }
.mk-card__media .pe-fav-btn { opacity: 0; transition: opacity .15s, transform .15s; }
.mk-card:hover .pe-fav-btn, .mk-card .pe-fav-btn.is-active, .mk-card .pe-fav-btn:focus-visible { opacity: 1; }
@media (hover: none) { .mk-card__media .pe-fav-btn { opacity: 1; } }

/* Compre por categoria */
.mk-cats__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .75rem; }
.mk-cat {
  display: flex; flex-direction: column; gap: .15rem; padding: .85rem .9rem 0; min-height: 150px; overflow: hidden;
  background:var(--surface); border-radius: 10px; color: var(--text); transition: box-shadow .15s, transform .15s;
}
.mk-cat:hover { box-shadow: 0 8px 22px rgba(0,0,0,.14); transform: translateY(-2px); }
.mk-cat__name { font-weight: 800; font-size: .98rem; line-height: 1.25; }
.mk-cat__count { font-size: .74rem; color: var(--gray); }
.mk-cat__imgs { display: flex; gap: .4rem; margin-top: auto; padding-top: .6rem; }
.mk-cat__imgs img { flex: 1 1 0; min-width: 0; aspect-ratio: 1; object-fit: cover; border-radius: 8px 8px 0 0; background: var(--bg); }

/* Feed "Peças para si" */
.mk-feed-wrap { padding-bottom: 2.5rem; }
.mk-feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: .7rem; }
.mk-feed__more { text-align: center; margin-top: 1.4rem; }
.mk-feed__btn {
  min-width: 220px; padding: .75rem 2rem; border: 1px solid var(--dark); border-radius: 100px; background:var(--surface);
  font-weight: 700; font-size: .92rem; color: var(--text); transition: background .15s, color .15s;
}
.mk-feed__btn:hover { background: var(--dark); color: #fff; }
.mk-feed__btn:disabled { opacity: .55; cursor: default; }

@media (max-width: 1100px) { .mk-cats__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .mk-cats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
  .mk-cat { min-height: 130px; }
  .mk-feed { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
  .mk-section__head:not(.mk-section__head--hot) h2 { font-size: 1.1rem; }
}

/* ════════════════════════════════════════════════════════════════════════════
   PATROCINADOS — estrutura estilo "Ofertas do dia" (AliExpress)
   Título geral centrado · duas caixas com borda · título centrado + pílula
   com seta · 3 cartões por linha (imagem quadrada, título a 2 linhas,
   preço vermelho, etiqueta de desconto/contactos).
   ════════════════════════════════════════════════════════════════════════════ */
.pe-sponsor-main-title {
  text-align: center; font-size: 1.75rem; font-weight: 800;
  color: var(--text, #18181B); margin: 0 0 1.5rem; letter-spacing: -.01em;
}
.pe-sponsor-cols { gap: 2rem; }
.pe-sponsor-col { border-radius: 4px; padding: 1.5rem 1.5rem 1.75rem; }

.pe-sponsor-col__header {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: .7rem; border-bottom: 0; padding-bottom: 0; margin-bottom: 1.5rem;
}
.pe-sponsor-col__title { font-size: 1.3rem; font-weight: 700; text-align: center; }

.pe-sponsor-pill {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .4rem .9rem; border-radius: 100px; text-decoration: none;
  font-size: .85rem; font-weight: 500; color: var(--text, #18181B);
  transition: filter .15s ease;
}
.pe-sponsor-pill:hover { filter: brightness(.96); color: var(--text, #18181B); text-decoration: none; }
.pe-sponsor-col--parts  .pe-sponsor-pill { background: var(--pill-parts, #FFF1E0); }
.pe-sponsor-col--combos .pe-sponsor-pill { background: var(--pill-combos, #FDE8EC); }
.pe-sponsor-pill__icon {
  width: 22px; height: 22px; border-radius: 6px; display: inline-flex;
  align-items: center; justify-content: center; color: #fff;
}
.pe-sponsor-col--parts  .pe-sponsor-pill__icon { background: #F97316; }
.pe-sponsor-col--combos .pe-sponsor-pill__icon { background: #E11D48; }
.pe-sponsor-pill__chev { display: inline-flex; }

/* 3 cartões por slide */
.pe-sponsor-slide { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 640px) { .pe-sponsor-slide { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; } }

/* Cartões patrocinados: mesmo contorno leve e raio dos cartões de produto (stroke 1px + sombra subtil), imagem a sangrar até à borda */
.pe-sponsor-card.product-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 1px 3px rgba(24,24,27,.04); overflow: hidden;
}
.pe-sponsor-card.product-card:hover { transform: translateY(-3px); border-color: var(--border); box-shadow: 0 10px 24px rgba(24,24,27,.10); }
.pe-sponsor-card .product-card__img { aspect-ratio: 1 / 1; border-radius: 0; }
.pe-sponsor-card .product-card__body { padding: .7rem .8rem .8rem; }
.pe-sponsor-card .product-card__title {
  white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; font-size: .88rem; font-weight: 500; line-height: 1.4; margin-bottom: .35rem;
}
.pe-sponsor-card .product-card__price { color: #E11D48; font-weight: 800; font-size: 1rem; margin-top: .2rem; }
.pe-sponsor-card .product-card__price-old { margin-left: .35rem; font-size: .75rem; font-weight: 500; }
.pe-sponsor-card__off {
  display: inline-block; margin-top: .4rem; background: #E11D48; color: #fff;
  font-size: .75rem; font-weight: 700; padding: .1rem .4rem; border-radius: 2px;
}
.pe-sponsor-card__sold { display: block; margin-top: .4rem; font-size: .75rem; color: var(--gray, #71717A); }
@media (max-width: 480px) {
  .pe-sponsor-main-title { font-size: 1.35rem; }
  .pe-sponsor-col__title { font-size: 1.1rem; }
  .pe-sponsor-card .product-card__title { font-size: .8rem; }
}

/* ── Megamenu de categorias (desktop) ──
   Botão "Categorias" na 1.ª linha da navbar; painel com áreas à esquerda
   e, à direita, imagem da área (definida no admin) + links dos tipos de peça. */
.navbar__megabtn--line1 {
  flex-shrink: 0; white-space: nowrap;
  padding: .5rem .9rem; font-weight: 600;
  color: var(--pe-header-text, var(--text));
  border: 1px solid var(--pe-header-surface, var(--border));
  background: var(--pe-header-surface, transparent);
}
.navbar__megabtn--line1:hover { color: var(--pe-header-hover, var(--pe-header-accent, var(--purple))); background: var(--pe-header-surface, var(--bg)); }
.navbar--layout-centered .navbar__centered-search { display: flex; align-items: center; gap: .75rem; }
.navbar--layout-centered .navbar__centered-search .navbar__search-wrap { flex: 1; min-width: 0; }
.pe-megamenu {
  position: fixed; left: 0; right: 0; top: 0; z-index: 480;
  background:var(--surface); border: 0; box-shadow: none;
  opacity: 0; transform: translateY(-6px); transition: opacity .18s, transform .18s;
}
.pe-megamenu.is-open { opacity: 1; transform: none; }
.pe-megamenu__inner {
  /* Altura = a do contentor da imagem (+ padding do painel). Com muitas áreas, a coluna da esquerda faz scroll vertical. */
  --pe-mm-media: 260px;
  display: flex; align-items: stretch;
  height: calc(var(--pe-mm-media) + 2.5rem);
  max-height: var(--pe-mm-max, calc(100vh - 160px));
}
.pe-megamenu__areas {
  list-style: none; margin: 0; padding: .5rem 0; height: 100%; width: 260px; flex-shrink: 0; box-sizing: border-box;
  border-right: 1px solid var(--purple-dark); background: var(--purple-dark);
  overflow: hidden; /* sem scroll: os itens que não cabem ficam ocultos (.is-fit-hidden) atrás de "Ver todas" */
  display: flex; flex-direction: column;
}
.pe-megamenu__areas li { margin: 0; flex-shrink: 0; }
.is-fit-hidden { display: none !important; }
.pe-megamenu__all { margin-top: auto !important; padding-top: .25rem; border-top: 1px solid rgba(255,255,255,.15); }
.pe-megamenu__all a {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .55rem 1rem; font-size: .85rem; font-weight: 700; color: var(--green, #1ff37b); text-decoration: none;
}
.pe-megamenu__all a:hover { background: rgba(255,255,255,.08); }
.pe-megamenu__area {
  width: 100%; display: flex; align-items: center; gap: .6rem; text-align: left;
  padding: .5rem 1rem; background: none; border: none; cursor: pointer; font: inherit;
  font-size: .875rem; font-weight: 600; color: #fff;
}
.pe-megamenu__area > span:nth-child(2) { flex: 1; }
.pe-megamenu__area-chev { display: flex; color: rgba(255,255,255,.6); }
.pe-megamenu__area.is-active, .pe-megamenu__area:hover { background: var(--green); color:var(--purple-text); }
.pe-megamenu__area.is-active .pe-megamenu__area-chev, .pe-megamenu__area:hover .pe-megamenu__area-chev { color:var(--purple-text); }
.pe-megamenu__panes { flex: 1; min-width: 0; height: 100%; box-sizing: border-box; padding: 1.25rem 1.5rem; overflow: hidden; }
.pe-megamenu__pane { display: none; gap: 1.5rem; height: 100%; }
.pe-megamenu__pane.is-active { display: flex; }
.pe-megamenu__media {
  position: relative; order: 2; margin-left: auto; width: 260px; height: var(--pe-mm-media, 260px); flex-shrink: 0; border-radius: 12px; overflow: hidden;
  background: transparent; display: flex; align-items: center; justify-content: center; color: var(--gray-light);
}
.pe-megamenu__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pe-megamenu__media-title {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem .9rem .7rem;
  color: #fff; font-weight: 700; font-size: .95rem;
  background: linear-gradient(to top, rgba(0,0,0,.65), transparent);
}
.pe-megamenu__media-ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.pe-megamenu__links { order: 1; flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); column-gap: 1.5rem; align-content: start; align-items: start; overflow: hidden; }
.pe-megamenu__more { grid-column: 1 / -1; font-weight: 700 !important; color: var(--purple) !important; margin-top: .25rem; }
.pe-megamenu__links a {
  display: block; break-inside: avoid; padding: .4rem .5rem; border-radius: 6px;
  font-size: .875rem; color: var(--text); text-decoration: none;
}
.pe-megamenu__links a:hover { background: var(--bg); color: var(--purple); }
@media (max-width: 768px) { .pe-megamenu { display: none !important; } }


/* ── Páginas de categorias (/categorias/ e /categorias/<slug>/) ── */
.pe-catpage { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 1rem; }
.pe-catpage__card { display: flex; gap: 1rem; background:var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1rem; }
.pe-catpage__media { flex: 0 0 120px; height: 120px; border-radius: 10px; overflow: hidden; background: transparent; display: flex; align-items: center; justify-content: center; color: var(--gray-light); }
.pe-catpage__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pe-catpage__body { flex: 1; min-width: 0; }
.pe-catpage__body h2 { font-size: 1.05rem; margin: 0 0 .5rem; }
.pe-catpage__body h2 a { color: var(--text); text-decoration: none; }
.pe-catpage__types { list-style: none; margin: 0 0 .6rem; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem .9rem; }
.pe-catpage__types a { font-size: .85rem; color: var(--gray); text-decoration: none; }
.pe-catpage__types a:hover { color: var(--purple); }
.pe-catpage__body { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: .75rem; }
.pe-catpage__body h2 { margin: 0; }
.pe-catpage__all { display: inline-block; padding: .5rem 1.1rem; border-radius: 8px; background: var(--purple); color: #fff !important; font-size: .85rem; font-weight: 700; text-decoration: none; }
.pe-catpage__all:hover { background: var(--purple-dark); }
.pe-catchips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.25rem; }
.pe-catchip { padding: .35rem .8rem; border: 1px solid var(--border); border-radius: 100px; font-size: .82rem; color: var(--text); text-decoration: none; background:var(--surface); }
.pe-catchip:hover { border-color: var(--purple); color: var(--purple); }
.pe-catchip.is-active { background: var(--purple); border-color: var(--purple); color: #fff; }
@media (max-width: 480px) { .pe-catpage { grid-template-columns: 1fr; } .pe-catpage__media { flex-basis: 84px; height: 84px; } }

/* Chips de tipos de peça na página da categoria: uma só linha com scroll horizontal no mobile */
@media (max-width: 768px) {
  .pe-catchips {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: .5rem;
    scrollbar-width: none; scroll-snap-type: x proximity;
  }
  .pe-catchips::-webkit-scrollbar { display: none; }
  .pe-catchip { flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start; }
}


/* ── Página de Patrocinados (/pecas/patrocinados/): abas Destaques | Combos ── */
.pe-sptabs { display: flex; gap: .5rem; margin-bottom: 1.25rem; overflow-x: auto; scrollbar-width: none; }
.pe-sptabs::-webkit-scrollbar { display: none; }
.pe-sptab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .45rem; padding: .6rem 1.1rem; border: 1px solid var(--border); border-radius: 100px; background:var(--surface); color: var(--text); font-weight: 700; font-size: .9rem; text-decoration: none; }
.pe-sptab:hover { border-color: var(--purple); color: var(--purple); }
.pe-sptab.is-active { background: var(--purple); border-color: var(--purple); color: #fff; }
.pe-sptab__count { min-width: 1.4rem; padding: .05rem .45rem; border-radius: 100px; background: rgba(0,0,0,.08); font-size: .75rem; text-align: center; }
.pe-sptab.is-active .pe-sptab__count { background: rgba(255,255,255,.25); }
.pe-sppanel[hidden] { display: none; }
.pe-spgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; align-items: start; }
@media (max-width: 640px) { .pe-spgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; } }
.pe-sppager { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin-top: 1.5rem; }
.pe-sppager a { min-width: 36px; padding: .4rem .6rem; text-align: center; border: 1px solid var(--border); border-radius: 8px; color: var(--text); text-decoration: none; font-weight: 600; }
.pe-sppager a.is-active { background: var(--purple); border-color: var(--purple); color: #fff; }

/* ── Cartão de informação do anúncio (single-pe_product.php) ── */
.pe-pinfo{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem;box-shadow:0 1px 2px rgba(17,24,39,.04),0 8px 24px -12px rgba(115,4,195,.12)}
.pe-pinfo__badges{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.9rem}
.pe-pinfo__badges .badge{display:inline-flex;align-items:center;gap:.3rem;letter-spacing:.03em;font-weight:700;text-transform:uppercase;font-size:.68rem;padding:.28rem .6rem;border-radius:100px}
.pe-pinfo__title{font-size:1.45rem;line-height:1.25;font-weight:800;letter-spacing:-.01em;margin:0 0 1rem;color:var(--text);overflow-wrap:anywhere}
.pe-pinfo__price-wrap{padding:1rem 0 1.1rem;border-top:1px solid var(--border);margin-bottom:1.1rem;border-bottom:1px solid var(--border)}
.pe-pinfo__price{font-size:2.1rem;line-height:1.1;font-weight:800;letter-spacing:-.02em;color:var(--purple-text)}
.pe-pinfo__price--muted{font-size:1.35rem;color:var(--gray);letter-spacing:0}
.pe-pinfo__chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.75rem}
.pe-chip{display:inline-flex;align-items:center;gap:.3rem;font-size:.76rem;font-weight:700;padding:.3rem .65rem;border-radius:100px;line-height:1.2}
.pe-chip--green{color:#047857;background:rgba(5,150,105,.1)}
.pe-chip--gray{color:#4b5563;background:var(--surface-2)}
.pe-chip--stock-ok{color:#166534;background:rgba(31,240,122,.14)}
.pe-chip--stock-low{color:#b45309;background:rgba(234,179,8,.14)}
.pe-chip--stock-out{color:#dc2626;background:rgba(220,38,38,.08)}
.pe-pinfo__cta{display:flex;gap:.6rem;align-items:flex-start}
.pe-pinfo__cta--solo{display:block}
.pe-pinfo__cta .btn--whatsapp{box-shadow:0 6px 16px -6px rgba(22,163,74,.55);transition:transform .15s,box-shadow .15s}
.pe-pinfo__cta .btn--whatsapp:hover{transform:translateY(-1px);box-shadow:0 10px 20px -8px rgba(22,163,74,.6)}
.pe-pinfo__details{list-style:none;margin:1.25rem 0 0;padding:.35rem 1rem;background:var(--bg,#f9fafb);border-radius:12px}
.pe-pinfo__details li{display:flex;align-items:center;gap:.8rem;padding:.7rem 0}
.pe-pinfo__details li+li{border-top:1px solid var(--border)}
.pe-pinfo__ico{flex:0 0 32px;height:32px;border-radius:50%;background:var(--surface);color:var(--purple);display:flex;align-items:center;justify-content:center;border:1px solid var(--border)}
.pe-pinfo__details small{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--gray);font-weight:600;line-height:1.2}
.pe-pinfo__details strong{display:block;font-size:.9rem;font-weight:600;color:var(--text);line-height:1.35}
.pe-pinfo__foot{margin-top:1rem;text-align:center}
.pe-pinfo__stats{display:flex;justify-content:center;align-items:center;gap:.9rem;flex-wrap:wrap;font-size:.8rem;color:var(--gray)}
.pe-pinfo__stats span{display:inline-flex;align-items:center;gap:.3rem}
.pe-pinfo__stats strong{color:var(--text)}
.pe-pinfo__sep{width:1px;height:14px;background:var(--border)}
.pe-pinfo__report{display:inline-flex;align-items:center;gap:.3rem;margin-top:.7rem;background:none;border:none;font-size:.78rem;color:var(--gray-light,#9ca3af);cursor:pointer;padding:.25rem .5rem;border-radius:6px;transition:color .15s,background .15s}
.pe-pinfo__report:hover{color:#dc2626;background:rgba(220,38,38,.06)}
@media (max-width:900px){.pe-pinfo{padding:1.25rem}.pe-pinfo__title{font-size:1.25rem}.pe-pinfo__price{font-size:1.85rem}}


/* ── Pesquisa por foto (botão de câmara + menu + ecrã de análise) ───────── */
.pe-imgs { position: relative; display: inline-flex; flex-shrink: 0; }
.pe-imgs__btn {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer;
  color: var(--pe-header-text-muted, var(--gray, #71717A)); transition: background .15s, color .15s;
}
.pe-imgs__btn:hover, .pe-imgs__btn[aria-expanded="true"] { background: rgba(115,4,195,.14); color: var(--purple, #7304C3); }
.navbar__search-inner .pe-imgs__btn { color: var(--pe-header-text-muted, rgba(255,255,255,.7)); }
.navbar__search-inner .pe-imgs__btn:hover { color: #fff; background: rgba(255,255,255,.14); }
.pe-imgs--field { position: absolute; right: .4rem; top: 50%; transform: translateY(-50%); }
.pe-imgs__menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 1200; min-width: 210px;
  background:var(--surface); color: var(--text, #18181B); border: 1px solid var(--border, var(--border));
  border-radius: 14px; box-shadow: 0 14px 34px rgba(24,24,27,.18); padding: .4rem;
}
.pe-imgs__menu[hidden] { display: none; }
.pe-imgs__title { padding: .35rem .6rem .25rem; font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--gray, #71717A); }
.pe-imgs__menu button {
  display: flex; align-items: center; gap: .6rem; width: 100%; padding: .6rem .7rem; border: 0; background: none;
  border-radius: 10px; cursor: pointer; font: inherit; font-size: .88rem; font-weight: 600; color: inherit; text-align: left;
}
.pe-imgs__menu button svg { color: var(--purple, #7304C3); flex-shrink: 0; }
.pe-imgs__menu button:hover { background: var(--tint); }

.pe-imgs-overlay {
  position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center;
  padding: 1rem; background: rgba(24,24,27,.72); backdrop-filter: blur(4px);
}
.pe-imgs-overlay[hidden] { display: none; }
.pe-imgs-overlay__card {
  width: 100%; max-width: 340px; background:var(--surface); border-radius: 20px; padding: 1.1rem; text-align: center;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.pe-imgs-overlay__preview { position: relative; aspect-ratio: 1 / 1; border-radius: 14px; overflow: hidden; background: var(--bg, #F4F4F5); }
.pe-imgs-overlay__preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pe-imgs-overlay__scan {
  position: absolute; left: 0; right: 0; height: 3px; top: 0; background: var(--green, #1FF07A);
  box-shadow: 0 0 14px 3px rgba(31,240,122,.7); animation: pe-imgs-scan 1.6s ease-in-out infinite;
}
.pe-imgs-overlay.is-done .pe-imgs-overlay__scan { display: none; }
@keyframes pe-imgs-scan { 0% { top: 0; } 50% { top: calc(100% - 3px); } 100% { top: 0; } }
.pe-imgs-overlay__status { margin-top: .9rem; font-size: .95rem; font-weight: 600; color: var(--text, #18181B); }
.pe-imgs-overlay__status.is-error { color: #991B1B; font-weight: 500; font-size: .88rem; }
.pe-imgs-overlay__actions { display: flex; gap: .5rem; justify-content: center; margin-top: .9rem; }
.pe-imgs-overlay__actions[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .pe-imgs-overlay__scan { animation: none; top: 50%; } }

/* ── Resultados por semelhança (pesquisa por foto / sem resultados exatos) ── */
.pe-similar-note { margin: 0 0 1rem; padding: .75rem 1rem; border-radius: 12px; background: var(--tint); color: var(--purple-text); font-size: .9rem; font-weight: 500; }
.pe-similar-note--warn { background: #FEF3C7; color: #78350F; }
.pe-similar-note a { color: inherit; font-weight: 700; text-decoration: underline; }
.pe-similar-title { margin: 1.5rem 0 .75rem; font-size: 1.05rem; font-weight: 800; color: var(--text, #18181B); }


/* ═══════════════════════════════════════════════════════════════════
   TEMA ESCURO / CLARO / AUTOMÁTICO
   html[data-theme]      = tema aplicado ("light" | "dark")
   html[data-theme-pref] = escolha da pessoa ("light" | "dark" | "auto")
   O <head> define estes atributos antes de pintar (sem "flash").
   ═══════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] {
  --bg:#0E0E11; --surface:#17171B; --surface-2:#202026; --surface-3:#2C2C34;
  --border:#2E2E36; --text:#F4F4F5; --text-muted:#A8A8B3; --gray:#9A9AA4; --gray-light:#74747E;
  --purple:#9A4DEB; --purple-text:#CBAAF8; --pe-price:#C79BFF; --tint:rgba(154,77,235,.20);
  --pill-parts:rgba(249,115,22,.18); --pill-combos:rgba(225,29,72,.20);
  --shadow:0 1px 3px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 4px 12px rgba(0,0,0,.55); --shadow-lg:0 10px 40px rgba(0,0,0,.6);
  color-scheme: dark;
}
/* Sem JavaScript: segue o sistema */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
  --bg:#0E0E11; --surface:#17171B; --surface-2:#202026; --surface-3:#2C2C34;
  --border:#2E2E36; --text:#F4F4F5; --text-muted:#A8A8B3; --gray:#9A9AA4; --gray-light:#74747E;
  --purple:#9A4DEB; --purple-text:#CBAAF8; --pe-price:#C79BFF; --tint:rgba(154,77,235,.20);
  --pill-parts:rgba(249,115,22,.18); --pill-combos:rgba(225,29,72,.20);
  --shadow:0 1px 3px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 4px 12px rgba(0,0,0,.55); --shadow-lg:0 10px 40px rgba(0,0,0,.6);
  color-scheme: dark;
  }
}

/* Componentes com cores fixas que precisam de ajuste no escuro */
html[data-theme="dark"] .flash--success, html[data-theme="dark"] .alert--success,
html[data-theme="dark"] .badge--new, html[data-theme="dark"] .badge--active { color: #4ADE80; }
html[data-theme="dark"] .flash--error, html[data-theme="dark"] .alert--danger,
html[data-theme="dark"] .badge--error { color: #F87171; }
html[data-theme="dark"] .flash--warning, html[data-theme="dark"] .alert--warning,
html[data-theme="dark"] .badge--used, html[data-theme="dark"] .badge--pending { color: #FACC15; }
html[data-theme="dark"] .pe-similar-note--warn { background: rgba(245,158,11,.15); color: #FBBF24; }
/* Logo sem variante escura → caixa branca; com variante → troca de imagem */
html[data-theme="dark"] .navbar__logo--img img:not(.pe-logo--light):not(.pe-logo--dark),
html[data-theme="dark"] .pe-mobile-header__logo img:not(.pe-logo--light):not(.pe-logo--dark) { background: #fff; border-radius: 8px; padding: 3px 8px; }
.pe-logo--dark { display: none; }
html[data-theme="dark"] .pe-logo--dark { display: inline-block; }
html[data-theme="dark"] .pe-logo--light { display: none; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .pe-logo--dark { display: inline-block; }
  html:not([data-theme]) .pe-logo--light { display: none; }
}
html[data-theme="dark"] .footer { background: #050507; border-top: 1px solid var(--border); }
html[data-theme="dark"] .pe-imgs-overlay { background: rgba(0,0,0,.82); }
html[data-theme="dark"] :where(input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=submit],[type=button]), select, textarea) {
  background-color: var(--surface); color: var(--text); border-color: var(--border);
}
html[data-theme="dark"] ::placeholder { color: var(--gray-light); opacity: 1; }
html[data-theme="dark"] img { color-scheme: normal; }
/* QR codes têm de ficar sobre fundo branco para serem lidos */
html[data-theme="dark"] [class*="qr" i]:has(> canvas), html[data-theme="dark"] [class*="qr" i]:has(> img),
html[data-theme="dark"] [id*="qr" i]:has(> canvas), html[data-theme="dark"] [id*="qr" i]:has(> img) {
  background: #fff !important; padding: 8px; border-radius: 8px;
}
/* Textos coloridos em linha (sem fundo próprio) mais claros no escuro */
html[data-theme="dark"] [style*="#166534"]:not([style*="background"]), html[data-theme="dark"] [style*="#059669"]:not([style*="background"]), html[data-theme="dark"] [style*="#065f46"]:not([style*="background"]) { color: #4ADE80 !important; }
html[data-theme="dark"] [style*="#991b1b"]:not([style*="background"]), html[data-theme="dark"] [style*="#dc2626"]:not([style*="background"]), html[data-theme="dark"] [style*="#ef4444"]:not([style*="background"]) { color: #F87171 !important; }
html[data-theme="dark"] [style*="#92400e"]:not([style*="background"]), html[data-theme="dark"] [style*="#854d0e"]:not([style*="background"]), html[data-theme="dark"] [style*="#78350f"]:not([style*="background"]), html[data-theme="dark"] [style*="#b45309"]:not([style*="background"]) { color: #FBBF24 !important; }
html[data-theme="dark"] [style*="#1d4ed8"]:not([style*="background"]), html[data-theme="dark"] [style*="#2563eb"]:not([style*="background"]) { color: #60A5FA !important; }
/* Etiquetas em linha com fundo pastel: translúcidas e texto claro */
html[data-theme="dark"] [style*="background:#fef3c7"], html[data-theme="dark"] [style*="background: #fef3c7"] { background: rgba(245,158,11,.18) !important; color: #FBBF24 !important; }
html[data-theme="dark"] [style*="background:#fee2e2"], html[data-theme="dark"] [style*="background: #fee2e2"] { background: rgba(239,68,68,.20) !important; color: #F87171 !important; }
html[data-theme="dark"] [style*="background:#d1fae5"], html[data-theme="dark"] [style*="background:#dcfce7"] { background: rgba(31,240,122,.16) !important; color: #4ADE80 !important; }
html[data-theme="dark"] [style*="background:#ede9fe"], html[data-theme="dark"] [style*="background:#f3e8ff"], html[data-theme="dark"] [style*="background:#faf6ff"], html[data-theme="dark"] [style*="background:#fbf8ff"] { background: var(--tint) !important; color: var(--purple-text) !important; }
html[data-theme="dark"] [style*="background:#dbeafe"], html[data-theme="dark"] [style*="background:#e0f2fe"] { background: rgba(59,130,246,.20) !important; color: #93C5FD !important; }


/* Etiquetas/alertas com fundo pastel fixo → versão translúcida no escuro (gerado) */
html[data-theme="dark"] .pe-filter-bar__reset:hover { background: rgba(239,68,68,.20) !important; color: #F87171 !important; border-color: rgba(239,68,68,.35) !important; }
html[data-theme="dark"] .flash--success { background: rgba(31,240,122,.16) !important; color: #4ADE80 !important; border-color: rgba(31,240,122,.30) !important; }
html[data-theme="dark"] .flash--error { background: rgba(239,68,68,.20) !important; color: #F87171 !important; border-color: rgba(239,68,68,.35) !important; }
html[data-theme="dark"] .flash--warning { background: rgba(245,158,11,.18) !important; color: #FBBF24 !important; border-color: rgba(245,158,11,.35) !important; }
html[data-theme="dark"] .flash--info { background: rgba(154,77,235,.22) !important; color: #C4B5FD !important; border-color: rgba(154,77,235,.40) !important; }
html[data-theme="dark"] .badge--new { background: rgba(31,240,122,.16) !important; color: #4ADE80 !important; }
html[data-theme="dark"] .badge--used { background: rgba(245,158,11,.18) !important; color: #FBBF24 !important; }
html[data-theme="dark"] .badge--active { background: rgba(154,77,235,.22) !important; color: #C4B5FD !important; }
html[data-theme="dark"] .badge--green { background: rgba(31,240,122,.16) !important; color: #4ADE80 !important; }
html[data-theme="dark"] .badge--yellow { background: rgba(245,158,11,.18) !important; color: #FBBF24 !important; }
html[data-theme="dark"] .badge--purple { background: rgba(154,77,235,.22) !important; color: #C4B5FD !important; }
html[data-theme="dark"] .badge--red { background: rgba(239,68,68,.20) !important; color: #F87171 !important; }
html[data-theme="dark"] .badge--blue { background: rgba(59,130,246,.20) !important; color: #93C5FD !important; }
html[data-theme="dark"] .badge--warning { background: rgba(245,158,11,.18) !important; color: #FBBF24 !important; }
html[data-theme="dark"] .badge--error { background: rgba(239,68,68,.20) !important; color: #F87171 !important; }
html[data-theme="dark"] .pe-gate-notif-dropdown__btn--wa { background: rgba(31,240,122,.16) !important; color: #4ADE80 !important; }
html[data-theme="dark"] .pe-sponsor-card__badge--parts { background: rgba(245,158,11,.18) !important; color: #FBBF24 !important; }
html[data-theme="dark"] .pe-sponsor-card__badge--combo { background: rgba(31,240,122,.16) !important; color: #4ADE80 !important; }
html[data-theme="dark"] .pe-similar-note--warn { background: rgba(245,158,11,.18) !important; color: #FBBF24 !important; }

/* Ajustes 2026-10-03b: botões "contorno escuro" e hovers que usavam --dark como fundo */
html[data-theme="dark"] .mk-feed__btn { border-color: var(--border); }
html[data-theme="dark"] .mk-feed__btn:hover,
html[data-theme="dark"] .pe-scroll-nav:hover,
html[data-theme="dark"] .pe-brand-chip:hover { background: var(--purple); border-color: var(--purple); color: #fff; }
html[data-theme="dark"] .mk-card__rank:not(.is-top) { background: var(--surface-3); color: var(--text); }

/* Impressão: sempre em claro */
@media print {
  html[data-theme="dark"] {
    --bg:#F9F9FB; --surface:#FFFFFF; --surface-2:#F4F4F5; --surface-3:#E4E4E7; --border:#E4E4E7;
    --text:#18181B; --text-muted:#52525B; --gray:#71717A; --gray-light:#A1A1AA;
    --purple:#7304C3; --purple-text:#40157B; --pe-price:#7304C3; --tint:#F3E8FF; color-scheme: light;
  }
}

/* ── Seletor de tema ── */
.pe-theme-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border: 0; border-radius: 50%; background: transparent; color: var(--text); cursor: pointer;
  transition: background var(--transition);
}
.pe-theme-btn:hover { background: var(--surface-2); }
.pe-theme-btn > span { display: none; }
html[data-theme-pref="light"] .pe-theme-btn .pe-ti--light,
html[data-theme-pref="dark"]  .pe-theme-btn .pe-ti--dark,
html:not([data-theme-pref="light"]):not([data-theme-pref="dark"]) .pe-theme-btn .pe-ti--auto { display: inline-flex; }
.pe-theme-seg { display: flex; gap: .25rem; padding: .25rem; background: var(--surface-2); border-radius: 12px; }
.pe-theme-seg button {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  padding: .55rem .4rem; border: 0; border-radius: 9px; background: transparent; color: var(--text-muted);
  font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer;
}
.pe-theme-seg button[aria-pressed="true"] { background: var(--surface); color: var(--purple-text); box-shadow: var(--shadow); }
.pe-theme-seg-wrap { padding: .75rem 1rem 0; }
.pe-theme-seg-wrap > span { display: block; margin-bottom: .4rem; font-size: .75rem; font-weight: 700; color: var(--gray); text-transform: uppercase; letter-spacing: .04em; }

/* ── Cards da home sem fundo próprio: o fundo vem da imagem (3.0.33) ── */
.mk-card:not(.mk-card--more),
.product-card,
.pe-sponsor-card,
.mk-cat,
.mk-side__tile,
.mk-side__user,
.pe-rank-card,
.pe-new-card { background: transparent; }
.mk-cat__imgs img,
.mk-side__tile img,
.mk-side__thumb:not(.mk-side__thumb--seller),
.mk-side__tile img.mk-side__avatar { background: transparent; }

/* ── Elementos dos menus no escuro (3.0.35) ── */
/* Megamenu: texto sobre o verde do hover/ativo tem de ser roxo ESCURO fixo (--purple-text é claro no escuro) */
.pe-megamenu__area.is-active, .pe-megamenu__area:hover,
.pe-megamenu__area.is-active .pe-megamenu__area-chev, .pe-megamenu__area:hover .pe-megamenu__area-chev { color: #40157B; }
/* Botão de tema dentro do cabeçalho: segue a cor de texto do cabeçalho (antes usava --text e podia ficar invisível) */
.navbar .pe-theme-btn { color: var(--pe-header-text, #fff); }
.navbar .pe-theme-btn:hover { background: var(--pe-header-surface, rgba(255,255,255,.12)); color: var(--pe-header-hover, var(--pe-header-accent, var(--pe-header-text, #fff))); }
/* Menu do utilizador / notificações / pesquisa: realces e separadores */
html[data-theme="dark"] .pe-user-menu__dropdown,
html[data-theme="dark"] .pe-gate-notif-dropdown,
html[data-theme="dark"] .pe-live-search__results { border-color: var(--border); box-shadow: var(--shadow-lg); }
html[data-theme="dark"] .pe-user-menu__item:hover,
html[data-theme="dark"] .pe-live-search__item:hover,
html[data-theme="dark"] .pe-megamenu__links a:hover { background: var(--surface-2); }
html[data-theme="dark"] .pe-user-menu__item--danger,
html[data-theme="dark"] .pe-user-menu__item--danger:hover { color: #F87171; }
/* Barra inferior mobile e itens ativos */
html[data-theme="dark"] .pe-mobile-nav__item--fav:hover,
html[data-theme="dark"] .pe-mobile-nav__item--fav.is-active { color: #F87171; }

/* ══════════════════════════════════════════════════════════════
   Dashboard admin/editor v2 (.pd-*) — separadores, KPIs, gráficos
   Usa só variáveis do tema → funciona no claro e no escuro.
   ══════════════════════════════════════════════════════════════ */
.pd [hidden] { display: none !important; }
.pd.is-loading .pd-panel { opacity: .55; transition: opacity .15s; pointer-events: none; }
.pd-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .5rem; }
.pd-tabs { display: flex; gap: .25rem; overflow-x: auto; padding: .25rem; background: var(--surface-2); border-radius: 12px; max-width: 100%; scrollbar-width: none; }
.pd-tabs::-webkit-scrollbar { display: none; }
.pd-tab { border: 0; background: transparent; color: var(--text-muted); font: inherit; font-size: .85rem; font-weight: 600; padding: .5rem .95rem; border-radius: 9px; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
.pd-tab:hover { color: var(--text); }
.pd-tab.is-on { background: var(--surface); color: var(--purple-text, var(--purple)); box-shadow: var(--shadow); }
.pd-tools { display: flex; align-items: center; gap: .5rem; }
.pd-seg { display: inline-flex; background: var(--surface-2); border-radius: 10px; padding: .2rem; gap: .15rem; }
.pd-seg button { border: 0; background: transparent; color: var(--text-muted); font: inherit; font-size: .78rem; font-weight: 600; padding: .38rem .7rem; border-radius: 8px; cursor: pointer; }
.pd-seg button.is-on { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.pd-seg--sm button { padding: .28rem .6rem; font-size: .74rem; }
.pd-refresh { padding: .45rem .6rem; }
.pd.is-loading .pd-refresh svg { animation: pd-spin .8s linear infinite; }
@keyframes pd-spin { to { transform: rotate(360deg); } }
.pd-meta { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; font-size: .75rem; color: var(--gray); margin-bottom: 1.1rem; }
.pd-auto { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; }

/* Atenção */
.pd-att-wrap { margin-bottom: 1rem; }
.pd-att-title { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--gray); margin-bottom: .5rem; }
.pd-attention { display: flex; flex-wrap: wrap; gap: .5rem; }
.pd-att { display: inline-flex; align-items: center; gap: .55rem; padding: .5rem .85rem; border-radius: 999px; font-size: .8rem; text-decoration: none; border: 1px solid transparent; transition: transform .15s, box-shadow .15s; color: var(--text); }
.pd-att b { font-size: .95rem; font-weight: 800; }
.pd-att:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.pd-att--amber  { background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.35); }
.pd-att--rose   { background: rgba(244,63,94,.12);  border-color: rgba(244,63,94,.32); }
.pd-att--purple { background: var(--tint); border-color: rgba(115,4,195,.25); }
.pd-att--blue   { background: rgba(59,130,246,.12); border-color: rgba(59,130,246,.3); }
.pd-att--ok     { background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.3); color: var(--text); }
.pd-att--ok svg { color: #16A34A; }

/* KPIs */
.pd-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.pd-kpi { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: .9rem 1rem 3rem; }
.pd-kpi__top { display: flex; align-items: center; gap: .5rem; color: var(--text-muted); font-size: .76rem; font-weight: 600; }
.pd-kpi__ic { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: 8px; background: var(--tint); color: var(--purple-text, var(--purple)); }
.pd-kpi--green .pd-kpi__ic { background: rgba(34,197,94,.15); color: #16A34A; }
.pd-kpi--blue  .pd-kpi__ic { background: rgba(59,130,246,.15); color: #2563EB; }
.pd-kpi--amber .pd-kpi__ic { background: rgba(245,158,11,.16); color: #D97706; }
.pd-kpi__v { font-size: 1.3rem; font-weight: 800; color: var(--text); margin: .55rem 0 .25rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pd-kpi__foot { display: flex; align-items: center; gap: .4rem; font-size: .68rem; color: var(--gray); }
.pd-delta { font-weight: 800; padding: .1rem .4rem; border-radius: 6px; }
.pd-delta--up   { background: rgba(34,197,94,.15); color: #16A34A; }
.pd-delta--down { background: rgba(244,63,94,.14); color: #E11D48; }
.pd-delta--flat { background: var(--surface-2); color: var(--gray); }
.pd-kpi__spark { position: absolute; left: 0; right: 0; bottom: 0; height: 44px; pointer-events: none; }

/* Cartões e gráficos */
.pd-card { margin-bottom: 1rem; }
.pd-grid { display: grid; gap: 1rem; margin-bottom: 0; }
.pd-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pd-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pd-grid--21 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.pd-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .85rem; }
.pd-h { font-size: .92rem; font-weight: 700; margin: 0 0 .85rem; color: var(--text); }
.pd-head .pd-h { margin: 0; }
.pd-sec { font-size: 1rem; font-weight: 800; margin: .5rem 0 .75rem; color: var(--text); }
.pd-link { font-size: .8rem; color: var(--purple-text, var(--purple)); text-decoration: none; }
.pd-chart { position: relative; height: 250px; }
.pd-chart--lg { height: 320px; }
.pd-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--gray); font-size: .85rem; text-align: center; }
.pd-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .85rem; }
.pd-chip { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); font: inherit; font-size: .76rem; font-weight: 600; padding: .32rem .7rem; border-radius: 999px; cursor: pointer; transition: all .15s; }
.pd-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); opacity: .35; }
.pd-chip.is-on { color: var(--text); border-color: var(--c); background: var(--surface-2); }
.pd-chip.is-on i { opacity: 1; }

/* Mini-estatísticas */
.pd-minis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.pd-minis--sm { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.pd-mini { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: .8rem .95rem; }
.pd-mini__v { font-size: 1.15rem; font-weight: 800; color: var(--text); line-height: 1.15; word-break: break-word; font-variant-numeric: tabular-nums; }
.pd-mini__l { font-size: .72rem; color: var(--gray); margin-top: .25rem; }
.pd-mini--ok .pd-mini__v  { color: #16A34A; }
.pd-mini--bad .pd-mini__v { color: #E11D48; }

/* Listas */
.pd-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .6rem 0; border-bottom: 1px solid var(--border); }
.pd-row:last-child { border-bottom: 0; }
.pd-row__main { flex: 1; min-width: 0; }
.pd-row__t { display: block; font-size: .85rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.pd-row__side { text-align: right; flex-shrink: 0; }
.pd-price { font-weight: 800; color: var(--purple-text, var(--purple)); font-size: .9rem; margin-bottom: .25rem; }
.pd-sub { font-size: .75rem; color: var(--gray); }
.pd-quick { display: flex; flex-wrap: wrap; gap: .5rem; margin: .25rem 0 1rem; }
.pd-rank { list-style: none; margin: 0; padding: 0; }
.pd-rank li { display: flex; align-items: center; gap: .7rem; padding: .55rem 0; border-bottom: 1px solid var(--border); font-size: .84rem; }
.pd-rank li:last-child { border-bottom: 0; }
.pd-rank__n { width: 22px; height: 22px; border-radius: 50%; background: var(--tint); color: var(--purple-text, var(--purple)); font-size: .72rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pd-rank__t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.pd-rank__t a { color: inherit; text-decoration: none; }
.pd-rank__v { font-size: .76rem; color: var(--gray); flex-shrink: 0; }
.pd-rank__empty { color: var(--gray); }
.pd-tablewrap { overflow-x: auto; }
.pd-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.pd-table th { text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--gray); padding: .4rem .6rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
.pd-table td { padding: .6rem; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: top; }
.pd-table tr:last-child td { border-bottom: 0; }
.pd-table code { font-size: .74rem; background: var(--surface-2); padding: .1rem .35rem; border-radius: 5px; color: var(--text); }
.pd-pill { display: inline-block; font-size: .7rem; font-weight: 700; padding: .15rem .55rem; border-radius: 999px; background: var(--surface-2); color: var(--text-muted); }
.pd-pill--open    { background: rgba(245,158,11,.16); color: #B45309; }
.pd-pill--matched { background: rgba(34,197,94,.16); color: #15803D; }
.pd-pill--expired { background: rgba(244,63,94,.13); color: #BE123C; }
html[data-theme="dark"] .pd-pill--open { color: #FBBF24; }
html[data-theme="dark"] .pd-pill--matched { color: #4ADE80; }
html[data-theme="dark"] .pd-pill--expired { color: #FB7185; }

@media (max-width: 1300px) { .pd-kpis, .pd-minis, .pd-minis--sm { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1024px) { .pd-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pd-grid--21 { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
  .pd-grid--2, .pd-grid--3 { grid-template-columns: 1fr; }
  .pd-kpis, .pd-minis, .pd-minis--sm { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-chart { height: 220px; } .pd-chart--lg { height: 260px; }
  .pd-tools { width: 100%; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) { .pd-att, .pd-chip, .pd.is-loading .pd-refresh svg { transition: none; animation: none; } }


/* ═══ Painel: KPIs do topo (4 cartões iguais, a ocupar a largura toda) ═══ */
.pe-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-bottom:1.5rem}
.pe-kpi{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:1.1rem 1.25rem;display:flex;align-items:center;gap:.85rem;min-width:0}
.pe-kpi__icon{width:44px;height:44px;flex-shrink:0;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent)}
.pe-kpi__txt{min-width:0}
.pe-kpi__val{font-size:1.5rem;font-weight:800;line-height:1.15;color:var(--c)}
.pe-kpi__lbl{font-size:.75rem;color:var(--gray);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:900px){.pe-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:380px){.pe-kpi{padding:.9rem}.pe-kpi__icon{width:38px;height:38px}}

/* ═══ Login / registo / recuperar senha: cores legíveis no tema escuro ═══ */
:root{--auth-ok:#166534;--auth-err:#991B1B;--auth-warn:#92400E}
html[data-theme="dark"]{--auth-ok:#4ADE80;--auth-err:#F87171;--auth-warn:#FBBF24}
@media (prefers-color-scheme:dark){html:not([data-theme]){--auth-ok:#4ADE80;--auth-err:#F87171;--auth-warn:#FBBF24}}
html[data-theme="dark"] .auth-card{box-shadow:0 8px 32px rgba(0,0,0,.5)}
html[data-theme="dark"] .auth-menu-btn:hover .auth-menu-label,
html[data-theme="dark"] .auth-menu-btn:focus-visible .auth-menu-label{color:var(--text)}
html[data-theme="dark"] .auth-menu-badge{color:#4ADE80;background:rgba(31,240,122,.14)}
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .phone-input-group:focus-within{box-shadow:0 0 0 3px rgba(154,77,235,.25);border-color:var(--purple)}

/* ═══ Contabilidade: cartões do topo sem cortar nem quebrar valores ═══ */
.pe-kpi-grid--fit{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.pe-kpi-grid--fit .stat-card{min-width:0}
.pe-kpi-grid--fit .stat-card > div:last-child{min-width:0}
.pe-kpi-grid--fit .stat-card__value{font-size:1.25rem;white-space:nowrap;line-height:1.2}
.pe-kpi-grid--fit .stat-card__label{line-height:1.3}

/* ═══ Cartões de dados (todos os painéis): sem quebrar valores, grelha adaptável ═══ */
.stat-card > div:last-child{min-width:0}
.stat-card__value{white-space:nowrap;font-variant-numeric:tabular-nums}
.stat-card__label{line-height:1.3;overflow-wrap:anywhere}
.pe-kpi-grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.pe-kpi-grid .stat-card{min-width:0}
.pe-kpi-grid .stat-card__value{font-size:1.25rem;line-height:1.2}
html[data-theme="dark"] .stat-card__icon--green{color:#4ADE80}
html[data-theme="dark"] .stat-card__icon--blue{color:#60A5FA}
html[data-theme="dark"] .stat-card__icon--amber{color:#FBBF24}
@media (prefers-color-scheme:dark){
  html:not([data-theme]) .stat-card__icon--green{color:#4ADE80}
  html:not([data-theme]) .stat-card__icon--blue{color:#60A5FA}
  html:not([data-theme]) .stat-card__icon--amber{color:#FBBF24}
}

/* ═══ Cartões patrocinados: destaque e combo com a MESMA estrutura ═══
   media quadrada (imagem única ou slideshow) + título (2 linhas) + preço + linha final de desconto/contactos */
.pe-sponsor-card { display: flex; flex-direction: column; }
.pe-sponsor-card__media { position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background: var(--surface-2); flex-shrink: 0; }
.pe-sponsor-card__media > .product-card__img,
.pe-sponsor-card__media .pe-combo-slideshow__img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; display: block; }
.pe-sponsor-card__media .pe-combo-slideshow { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
.pe-sponsor-card .product-card__body { flex: 1; display: flex; flex-direction: column; }
.pe-sponsor-card .product-card__title { min-height: calc(2 * 1.4 * .88rem); }
.pe-sponsor-card__meta { min-height: 1.5rem; margin-top: auto; padding-top: .1rem; }
.pe-sponsor-card__off, .pe-sponsor-card__sold { margin-top: .35rem; }

/* ═══ Patrocinados: cartão mais compacto ═══ */
.pe-sponsor-card__media { aspect-ratio: 4 / 3; }
.pe-sponsor-card .product-card__body { padding: .6rem .7rem .7rem; }
.pe-sponsor-card .product-card__title { min-height: 0; margin-bottom: .2rem; }
.pe-sponsor-card .product-card__price { margin-top: 0; font-size: .98rem; line-height: 1.25; }
.pe-sponsor-card__meta { min-height: 0; margin-top: auto; padding-top: .35rem; display: flex; align-items: center; flex-wrap: wrap; gap: .1rem .45rem; }
.pe-sponsor-card__meta:empty { display: none; }
.pe-sponsor-card__meta .product-card__price-old { margin: 0; font-size: .74rem; }
.pe-sponsor-card__off, .pe-sponsor-card__sold { margin: 0; }
.pe-sponsor-card__off { padding: .05rem .4rem; font-size: .72rem; }

/* ═══ Megamenu: as 10 áreas visíveis + imagem 4/5 ═══ */
.pe-megamenu__inner { --pe-mm-media: 340px; height: calc(var(--pe-mm-media) + 2.5rem); }
.pe-megamenu__areas { padding: .4rem 0; }
.pe-megamenu__area { padding: .4rem 1rem; font-size: .85rem; line-height: 1.3; }
.pe-megamenu__all a { padding: .45rem 1rem; line-height: 1.3; }
.pe-megamenu__media { width: calc(var(--pe-mm-media, 340px) * .8); height: var(--pe-mm-media, 340px); aspect-ratio: 4 / 5; }
.pe-megamenu__media img { aspect-ratio: 4 / 5; }
.pe-megamenu__links { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

/* ═══ Cartões de categoria (home) ═══ */
.mk-cat {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: .9rem .9rem .9rem; gap: .2rem; min-height: 0; box-shadow: 0 1px 3px rgba(24,24,27,.04);
  transition: box-shadow .18s, transform .18s, border-color .18s;
}
.mk-cat:hover { transform: translateY(-3px); border-color: var(--purple); box-shadow: 0 10px 24px rgba(24,24,27,.10); }
.mk-cat__head { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.mk-cat__name { font-size: .95rem; }
.mk-cat__arrow { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--gray); transition: background .18s, color .18s, transform .18s; }
.mk-cat:hover .mk-cat__arrow { background: var(--purple); color: #fff; transform: translateX(2px); }
.mk-cat__imgs { gap: .45rem; padding-top: .7rem; }
.mk-cat__imgs img { aspect-ratio: 4 / 5; border-radius: 10px; background: var(--surface-2); }
@media (max-width: 640px) { .mk-cat { padding: .75rem; } }

/* ═══ Página de categorias ═══ */
.pe-catpage__card { align-items: stretch; border-radius: 14px; padding: .9rem; box-shadow: 0 1px 3px rgba(24,24,27,.04); transition: box-shadow .18s, transform .18s, border-color .18s; }
.pe-catpage__card:hover { transform: translateY(-2px); border-color: var(--purple); box-shadow: 0 10px 24px rgba(24,24,27,.10); }
.pe-catpage__media { flex: 0 0 112px; width: 112px; height: auto; aspect-ratio: 4 / 5; border-radius: 10px; background: var(--surface-2); }
.pe-catpage__body { gap: .55rem; justify-content: center; }
.pe-catpage__types { margin: 0; gap: .35rem; }
.pe-catpage__types a { display: inline-block; padding: .2rem .6rem; border: 1px solid var(--border); border-radius: 100px; font-size: .78rem; color: var(--gray); }
.pe-catpage__types a:hover { border-color: var(--purple); color: var(--purple); }
.pe-catpage__types .pe-catpage__more { font-weight: 700; }
@media (max-width: 480px) { .pe-catpage__media { flex-basis: 88px; width: 88px; height: auto; } }

/* ═══ Cartões de categoria v2 (substitui os blocos anteriores): imagem em cima, texto em baixo ═══ */
.mk-cats__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .8rem; }
.mk-cat { padding: 0; gap: 0; min-height: 0; overflow: hidden; border-radius: 14px; }
.mk-cat__imgs { display: grid; gap: 2px; margin: 0; padding: 0; aspect-ratio: 1 / 1; background: var(--border); }
.mk-cat__imgs img { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; object-fit: cover; display: block; background: var(--surface-2); min-width: 0; }
.mk-cat__imgs--n0, .mk-cat__imgs--n1 { grid-template-columns: 1fr; }
.mk-cat__imgs--n2 { grid-template-columns: 1fr 1fr; }
.mk-cat__imgs--n3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.mk-cat__imgs--n3 img:first-child { grid-row: 1 / span 2; }
.mk-cat__imgs--n4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.mk-cat__ph { display: flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--gray-light); }
.mk-cat__body { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .7rem .8rem .8rem; border-top: 1px solid var(--border); }
.mk-cat__text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.mk-cat__name { font-weight: 800; font-size: .92rem; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mk-cat__count { font-size: .74rem; color: var(--gray); }
@media (max-width: 1100px) { .mk-cats__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .mk-cats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; } .mk-cat__body { padding: .6rem .65rem .7rem; } .mk-cat__name { font-size: .85rem; } }

.pe-catpage { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem; }
.pe-catpage__card { flex-direction: column; gap: 0; padding: 0; overflow: hidden; align-items: stretch; }
.pe-catpage__media { position: relative; flex: none; width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: 0; background: var(--surface-2); }
.pe-catpage__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.6), transparent 55%); pointer-events: none; }
.pe-catpage__title { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: .9rem; color: #fff; font-weight: 800; font-size: 1rem; line-height: 1.25; text-align: left; }
.pe-catpage__body { padding: .8rem .9rem .9rem; align-items: stretch; gap: .7rem; flex: 1; justify-content: space-between; }
.pe-catpage__all { text-align: center; }
@media (max-width: 480px) { .pe-catpage { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; } .pe-catpage__media { flex-basis: auto; width: 100%; height: auto; } .pe-catpage__title { font-size: .9rem; padding: .7rem; } .pe-catpage__body { padding: .65rem; } }

/* ═══ Categorias: só imagem + título ═══ */
.mk-cat__body { display: block; padding: .65rem .8rem .75rem; }
.mk-cat__name { font-size: .92rem; }
.mk-cat:hover { border-color: var(--purple); }
.pe-catpage__card { color: var(--text); text-decoration: none; }
.pe-catpage__media::after { display: none; }
.pe-catpage__title { position: static; display: block; padding: .65rem .8rem .75rem; color: var(--text); font-weight: 800; font-size: .95rem; line-height: 1.25; border-top: 1px solid var(--border); }
.pe-catpage__card:hover .pe-catpage__title { color: var(--purple); }
@media (max-width: 480px) { .pe-catpage__title { font-size: .85rem; padding: .55rem .65rem .65rem; } }

/* ═══ Compre por categoria: div geral quadrada, mais respiro em baixo, carrossel com setas ═══ */
.mk-section.mk-cats { border-radius: 0; padding-bottom: 1.5rem; overflow: visible; }
.mk-rail--cats { --mk-cols: 6; --mk-gap: .8rem; }
.mk-rail--cats > .mk-cat { flex: 0 0 calc((100% - (var(--mk-cols) - 1) * var(--mk-gap)) / var(--mk-cols)); min-width: 0; scroll-snap-align: start; }
@media (max-width: 1100px) { .mk-rail--cats { --mk-cols: 4; } }
@media (max-width: 640px) { .mk-rail--cats { --mk-cols: 2.3; --mk-gap: .55rem; } .mk-section.mk-cats { padding-bottom: 1.25rem; } }

/* ═══ Menu lateral dos painéis: categorias recolhíveis (desktop e mobile) ═══ */
.sidebar__section-title { cursor: pointer; pointer-events: auto; border-radius: 8px; transition: background .15s, color .15s; }
.sidebar__section-title:hover { background: var(--bg); color: var(--text); }
.sidebar__section-title:focus-visible { outline: 2px solid var(--purple); outline-offset: -2px; }
.sidebar__section-caret { display: flex; width: 22px; height: 22px; align-items: center; justify-content: center; border-radius: 50%; transition: transform .25s, background .15s; flex-shrink: 0; }
.sidebar__section-title:hover .sidebar__section-caret { background: var(--surface-2); }
.sidebar__section-title[aria-expanded="true"] .sidebar__section-caret { transform: rotate(180deg); }
.sidebar__section-body { max-height: 0; overflow: hidden; transition: max-height .28s ease; padding-top: 0; padding-bottom: 0; }
.sidebar__section.is-open .sidebar__section-body { max-height: 1000px; padding-bottom: .35rem; }
/* antes de o JS correr: a categoria com o link activo já vem aberta (sem "salto") */
html:not(.pe-sb-ready) .sidebar__section:has(.sidebar__link--active) .sidebar__section-body { max-height: 1000px; padding-bottom: .35rem; }
html:not(.pe-sb-ready) .sidebar__section:has(.sidebar__link--active) .sidebar__section-caret { transform: rotate(180deg); }
.sidebar__section-title > span:first-child { min-width: 0; }
.sidebar__section-count { margin-left: .4rem; font-size: .65rem; font-weight: 700; padding: .05rem .4rem; border-radius: 100px; background: var(--surface-2); color: var(--gray); letter-spacing: 0; }
/* sidebar só com ícones (desktop): sem títulos nem setas, tudo visível */
@media (min-width: 901px) {
  .sidebar.collapsed .sidebar__section-caret { display: none; }
  .sidebar.collapsed .sidebar__section-body { padding-bottom: 0 !important; }
}

/* ═══ Menu lateral do admin: grupos com ícone, recolhíveis, em árvore ═══
   Reutiliza o acordeão existente (.sidebar__section + JS que guarda o estado). */
.sidebar__group { padding: .5rem .75rem .15rem; }
.sidebar__section--tree { border-top: none !important; padding: .1rem 0; }
.sidebar__section--tree .sidebar__section-title {
  text-transform: none; letter-spacing: 0; font-size: .9rem; font-weight: 600;
  color: var(--text); padding: .6rem 1.25rem; gap: .5rem;
}
.sidebar__section--tree .sidebar__section-main { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.sidebar__section--tree .sidebar__section-main svg { flex-shrink: 0; color: var(--gray); }
.sidebar__section--tree:has(.sidebar__link--active) .sidebar__section-title,
.sidebar__section--tree.has-active .sidebar__section-title { color: var(--purple-text, var(--purple)); }
.sidebar__section--tree:has(.sidebar__link--active) .sidebar__section-main svg,
.sidebar__section--tree.has-active .sidebar__section-main svg { color: var(--purple); }
.sidebar__section-end { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; }
.sidebar__section-end .sidebar__badge { margin-left: 0; }
.sidebar__section--tree.is-open .sidebar__badge--group { display: none; }

/* ramos da árvore: ├── e └── */
.sidebar__section--tree .sidebar__link { position: relative; margin-left: 1.95rem; padding: .5rem .7rem; font-size: .85rem; }
.sidebar__section--tree .sidebar__link::before {
  content: ""; position: absolute; left: -.9rem; top: -2px; bottom: 50%; width: .7rem;
  border-left: 1.5px solid var(--border); border-bottom: 1.5px solid var(--border);
  border-bottom-left-radius: 6px; pointer-events: none;
}
.sidebar__section--tree .sidebar__link:not(:last-child)::after {
  content: ""; position: absolute; left: -.9rem; top: 50%; bottom: -2px;
  border-left: 1.5px solid var(--border); pointer-events: none;
}
/* só ícones: sem árvore nem títulos, tudo visível */
.sidebar.collapsed .sidebar__section--tree .sidebar__link { margin-left: 0; }
.sidebar.collapsed .sidebar__section--tree .sidebar__link::before,
.sidebar.collapsed .sidebar__section--tree .sidebar__link::after { display: none; }
.sidebar.collapsed .sidebar__group { padding: .5rem .5rem .15rem; }
.sidebar.collapsed .sidebar__section--tree + .sidebar__section--tree { border-top: 1px solid var(--border) !important; margin-top: .3rem; padding-top: .3rem; }

/* grupos com um único link (ex.: Credencial, Marketplace, Conta do contabilista): link solto, sem cabeçalho nem ramo */
.sidebar__section--solo .sidebar__section-title { display: none; }
.sidebar__section--solo .sidebar__section-body { max-height: none; overflow: visible; padding: .25rem .75rem; }
.sidebar__section--solo .sidebar__link { margin-left: 0; padding: .6rem .75rem; font-size: .875rem; }
.sidebar__section--solo .sidebar__link::before,
.sidebar__section--solo .sidebar__link::after { display: none; }


/* ═══ Seletor da Biblioteca de Media (assets/js/media-picker.js) ═══ */
.pe-mp { position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.pe-mp[hidden] { display: none; }
.pe-mp__box { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 14px; width: 100%; max-width: 640px; max-height: 85vh; display: flex; flex-direction: column; overflow: hidden; }
.pe-mp__head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--border); }
.pe-mp__links { display: flex; align-items: center; gap: .9rem; font-size: .8rem; }
.pe-mp__links a { color: var(--purple, #7304C3); font-weight: 600; text-decoration: none; }
.pe-mp__x { background: none; border: 0; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--gray); }
.pe-mp__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .6rem; padding: 1rem; overflow: auto; flex: 1; }
.pe-mp__item { aspect-ratio: 1; border: 2px solid transparent; border-radius: 10px; overflow: hidden; padding: 0; background: var(--surface-2); cursor: pointer; }
.pe-mp__item:hover, .pe-mp__item:focus-visible { border-color: var(--purple, #7304C3); outline: none; }
.pe-mp__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pe-mp__empty { padding: 2rem 1rem; text-align: center; color: var(--gray); font-size: .85rem; }
.pe-mp__empty a { color: var(--purple, #7304C3); font-weight: 600; }
.pe-mp__foot { padding: .6rem 1rem; border-top: 1px solid var(--border); text-align: center; }
.pe-mp__foot:has(> [hidden]) { display: none; }