/* ---------- HEADER ---------- */
  .topbar{
    background:linear-gradient(160deg,#0a1209 0%, #102415 55%, #0d1f0d 100%);
    padding:64px 16px 40px;
    text-align:center;
    position:relative;
    overflow:hidden;
  }
  .topbar::before{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 20% 20%, rgba(82,208,23,.14), transparent 45%),
               radial-gradient(circle at 85% 75%, rgba(82,208,23,.10), transparent 40%);
    pointer-events:none;
  }
  .brand{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    position:relative;
    z-index:2;
  }


  .brand img{
    width:150px;
    height:150px;
    border-radius:50%;
    object-fit:cover;
    object-position:40% 48%;
    box-shadow:0 6px 20px rgba(60,20,90,.55), 0 0 0 4px rgba(60,20,90,.25);
    background:var(--surface);
    border:4px solid #4a1a6e;
  }
  .brand-name{
    color:var(--white);
    font-weight:800;
    font-size:1.5rem;
    letter-spacing:.5px;
    margin:0;
  }
  .brand-tag{
    color:rgba(255,255,255,.85);
    font-size:.8rem;
    letter-spacing:3px;
    font-weight:700;
    margin:0;
  }
  /* ---------- MOLDURA DE SELOS (estilo referência) ---------- */
  .perks-frame-row{
    display:flex;flex-wrap:nowrap;align-items:center;
    max-width:1000px;margin:12px auto 0;
    border:1.5px solid var(--green-bright);
    border-radius:12px;
    background:rgba(0,0,0,.35);
    box-shadow:0 0 10px rgba(82,208,23,.18);
    padding:8px 10px;
    position:relative;
    z-index:2;
    overflow-x:auto;
    -ms-overflow-style:none;scrollbar-width:none;
  }
  .perks-frame-row::-webkit-scrollbar{ display:none; }
  .pfr-item{
    display:flex;align-items:center;gap:6px;
    padding:2px 10px;
    border-right:1px solid rgba(82,208,23,.35);
    flex:none;
    white-space:nowrap;
  }
  .pfr-item:last-child{ border-right:none; }
  .pfr-icon{ width:18px;height:18px;flex:none;color:var(--green-bright); }
  .pfr-icon svg{ width:100%;height:100%; }
  .pfr-text{ display:flex;flex-direction:column;line-height:1.05;text-align:left; }
  .pfr-text strong{ font-size:.6rem;font-weight:800;color:#fff;letter-spacing:.2px; }
  .pfr-text .pfr-green{ font-size:.66rem;font-weight:900;color:var(--green-bright);letter-spacing:.2px; }

  .brand-since-tag{
    color:rgba(255,255,255,.92);
    font-family:'Playfair Display', Georgia, 'Times New Roman', serif;
    font-style:italic;
    font-weight:600;
    font-size:.8rem;
    letter-spacing:.4px;
    margin:4px 0 0;
    text-align:center;
    text-shadow:0 1px 6px rgba(82,208,23,.35);
  }

  .search-wrap{
    max-width:640px;
    margin:22px auto 0;
    position:relative;
    /* CORREÇÃO DEFINITIVA: .search-wrap precisa ter z-index MAIOR que seus
       irmãos (.home-btn-wrap, .social-icons-row), que também têm
       position:relative. Como antes os três tinham o mesmo z-index:2, a
       ordem no HTML decidia quem ficava em cima — e os irmãos vêm depois
       no documento, então sempre cobriam o dropdown de sugestões, não
       importa quão alto fosse o z-index do dropdown (ele ficava "preso"
       dentro do contexto de empilhamento do próprio .search-wrap, sem
       conseguir competir com os irmãos por fora). */
    z-index:50;
    padding:0 12px;
  }
  .home-btn-wrap{
    display:flex;flex-direction:column;align-items:center;
    gap:4px;margin:14px auto 0;position:relative;z-index:2;
  }
  .social-icons-row{
    display:flex;gap:32px;justify-content:center;flex-wrap:wrap;
    margin:14px auto 0;position:relative;z-index:2;
  }
  .social-icons-row .home-btn-wrap{ margin:0; }
  .ip-security-badge{
    display:flex;align-items:center;justify-content:center;gap:8px;
    margin:14px auto 0;
    max-width:300px;
  }
  .ip-badge-icon{
    width:26px;height:26px;border-radius:50%;
    flex:none;
    border:1px solid rgba(82,208,23,.35);
  }
  .ip-badge-text{
    font-size:.7rem;color:var(--muted);line-height:1.3;
  }
  .ip-badge-text strong{ color:var(--ink); }
  .home-btn-circle{
    width:52px;height:52px;border-radius:50%;
    background:#8b2fd6;
    border:2.5px solid #fff;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;transition:.15s ease;
    box-shadow:0 3px 10px rgba(0,0,0,.18);
  }
  .home-btn-circle svg{ width:25px;height:25px; }
  .home-btn-circle img{ width:25px;height:25px;object-fit:contain; }
  .home-btn-circle:hover, .home-btn-circle.active{
    background:#9b45e0;
  }
  .home-btn-circle.social-circle-wp,
  .home-btn-circle.social-circle-ig,
  .home-btn-circle.social-circle-fb{
    width:42px;height:42px;
  }
  .home-btn-circle.social-circle-wp svg, .home-btn-circle.social-circle-wp img,
  .home-btn-circle.social-circle-ig svg, .home-btn-circle.social-circle-ig img,
  .home-btn-circle.social-circle-fb svg, .home-btn-circle.social-circle-fb img{
    width:20px;height:20px;
  }
  .home-btn-circle.social-circle-wp{ background:#25D366; }
  .home-btn-circle.social-circle-wp:hover{ background:#1ebc59; }
  .home-btn-circle.social-circle-ig{ background:linear-gradient(135deg,#f9ce34,#ee2a7b,#6228d7); }
  .home-btn-circle.social-circle-ig:hover{ filter:brightness(1.1); }
  .home-btn-circle.social-circle-fb{ background:#1877f2; }
  .home-btn-circle.social-circle-fb:hover{ background:#1465d1; }
  .home-btn-label{
    color:#fff;font-size:.72rem;font-weight:700;
    letter-spacing:.3px;
  }
  .search-box{
    display:flex;
    align-items:center;
    gap:10px;
    background:var(--surface);
    border-radius:50px;
    padding:14px 22px;
    box-shadow:0 8px 24px rgba(0,0,0,.18);
    border:2px solid transparent;
    transition:.2s ease;
  }
  .search-box:focus-within{
    border-color:var(--green-bright);
    box-shadow:0 8px 24px rgba(0,0,0,.18), 0 0 0 4px rgba(82,208,23,.18);
  }
  .search-box svg{flex:none;color:var(--green-2);width:24px;height:24px;}
  .search-box input{
    flex:1;
    border:none;
    outline:none;
    font-size:1rem;
    color:var(--ink);
    background:transparent;
    min-width:0;
  }
  .search-box input::placeholder{color:#9ab69a;}
  .search-suggestions{
    position:absolute;top:calc(100% + 8px);left:12px;right:12px;
    background:var(--surface);border:1.5px solid var(--line);
    border-radius:16px;box-shadow:var(--shadow-lg);
    overflow:hidden;z-index:1001;
    display:flex;flex-direction:column;
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .18s ease,transform .18s cubic-bezier(.25,.8,.4,1),visibility .18s;
  }
  .search-suggestions.open{ opacity:1;visibility:visible;transform:translateY(0); }
  .search-suggestion-item{
    position:relative;
    display:flex;align-items:flex-start;gap:10px;
    width:100%;box-sizing:border-box;
    padding:9px 14px;cursor:pointer;
    border-bottom:1px solid var(--line);
  }
  .search-suggestion-item:last-child{ border-bottom:none; }
  .search-suggestion-item:hover{ background:rgba(82,208,23,.1); }
  .search-suggestion-thumb{
    width:30px;height:40px;flex:none;border-radius:5px;overflow:hidden;background:var(--bg);
  }
  .search-suggestion-cover{ width:100%;height:100%;object-fit:cover;display:block; }
  .search-suggestion-info{ display:flex;flex-direction:column;gap:4px;min-width:0;flex:1; }
  .search-suggestion-name{
    font-size:.8rem;font-weight:700;color:var(--ink);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .search-suggestion-name mark{ background:none;color:var(--green-bright);font-weight:900; }
  .search-suggestion-meta-row{ display:flex;align-items:center;gap:6px;flex-wrap:wrap; }
  .search-suggestion-console-badge{
    display:flex;align-items:center;justify-content:center;flex:none;
    padding:2px 5px;border-radius:4px;line-height:0;
  }
  .search-suggestion-console-badge img{ height:12px;width:auto;display:block; }
  .search-suggestion-console-badge svg{ height:10px;width:auto;display:block; }
  .search-suggestion-price{ font-size:.72rem;font-weight:700;color:var(--green-1);white-space:nowrap; }
  .search-suggestion-tag{
    font-size:.62rem;font-weight:700;padding:1px 6px;border-radius:20px;white-space:nowrap;
  }
  .search-suggestion-tag.promo{ background:rgba(255,107,0,.15);color:#ff6b00; }
  .search-suggestion-tag.gamepass{ background:rgba(16,124,16,.15);color:#107C10; }
  .search-clear{
    border:none;background:var(--line);color:var(--green-1);
    width:26px;height:26px;border-radius:50%;
    display:none;align-items:center;justify-content:center;
    cursor:pointer;font-size:.85rem;flex:none;
  }
  .search-clear.show{display:flex;}