/* Free Fire accounts: compact hero card (test, 2026-10-01) */
.catalog-hero.ffh{position:relative;width:auto!important;max-width:1180px;margin:22px auto 8px!important;min-height:0!important;height:clamp(170px,19vw,220px);display:flex!important;align-items:center;padding:0 28px!important;border-radius:22px!important;overflow:hidden;isolation:isolate;background:#0f0b24!important;border:1px solid transparent!important;background:linear-gradient(#0f0b24,#0f0b24) padding-box,linear-gradient(135deg,rgba(124,92,255,.75),rgba(255,90,122,.45) 55%,rgba(124,92,255,.2)) border-box!important;box-shadow:0 16px 40px rgba(0,0,0,.35)}
.catalog-hero.ffh::before,.catalog-hero.ffh::after{content:none!important;display:none!important}
.catalog-hero.ffh>.ffh-bg{position:absolute!important;inset:0;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;object-position:center 28%;z-index:-2;opacity:1!important;transform:none!important;border-radius:0!important;box-shadow:none!important;filter:none!important;-webkit-mask-image:none!important;mask-image:none!important}
.ffh-copy{position:relative;z-index:2;display:flex;flex-direction:column;gap:6px;max-width:520px;background:none!important;padding:0!important;margin:0!important;backdrop-filter:none!important}
.catalog-hero.ffh .ffh-copy::before{content:"";position:absolute;inset:-60px -40px -60px -160px;z-index:-1;background:linear-gradient(270deg,rgba(15,11,36,.96) 35%,rgba(15,11,36,.75) 60%,transparent)}
[dir=ltr] .catalog-hero.ffh .ffh-copy::before{inset:-60px -160px -60px -40px;background:linear-gradient(90deg,rgba(15,11,36,.96) 35%,rgba(15,11,36,.75) 60%,transparent)}
.ffh-crumbs{display:flex;align-items:center;gap:6px;font-size:.74rem;color:#a9a3d4}
.ffh-crumbs a{color:#cfc3ff}
.ffh-crumbs a:hover{color:#fff}
.catalog-hero.ffh h1{margin:0!important;font-size:clamp(1.35rem,2.6vw,1.9rem)!important;font-weight:900;color:#fff;text-shadow:none!important;line-height:1.25}
.catalog-hero.ffh p{margin:0!important;color:#c9c3ec!important;font-size:.86rem;text-shadow:none!important;max-width:44ch}
.ffh-stats{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.ffh-stats li{padding:4px 10px;border-radius:999px;border:1px solid rgba(169,163,212,.28);background:rgba(255,255,255,.05);color:#ddd8ff;font-size:.74rem;font-weight:600}
.ffh-stats b{color:#ffc04d;font-weight:800;font-family:Inter,Cairo,sans-serif}
.catalog-hero.ffh>.ffh-mark{position:absolute!important;inset:auto auto 16px 18px;width:54px!important;height:54px!important;max-width:none!important;border-radius:14px!important;z-index:2;box-shadow:0 8px 22px rgba(0,0,0,.45)!important;border:1px solid rgba(255,255,255,.18);transform:none!important;-webkit-mask-image:none!important;mask-image:none!important;opacity:1!important;object-fit:cover}
[dir=ltr] .catalog-hero.ffh>.ffh-mark{inset:auto 18px 16px auto}
@media(max-width:680px){
  .catalog-hero.ffh{margin:14px 12px 6px!important;height:auto;min-height:150px!important;padding:18px 16px!important;align-items:flex-end}
  .catalog-hero.ffh>.ffh-bg{object-position:30% 25%}
  .catalog-hero.ffh .ffh-copy::before{inset:-40px -20px -30px -60px;background:linear-gradient(0deg,rgba(15,11,36,.96) 45%,rgba(15,11,36,.6) 75%,transparent)}
  .catalog-hero.ffh p{font-size:.78rem}
  .catalog-hero.ffh>.ffh-mark{width:40px!important;height:40px!important;inset:12px auto auto 12px;border-radius:11px!important}
}
.catalog-hero.ffh .ffh-copy::before{inset:-90px -40px -90px -300px;background:linear-gradient(270deg,rgba(15,11,36,.97) 40%,rgba(15,11,36,.82) 62%,rgba(15,11,36,.35) 85%,transparent)}
[dir=ltr] .catalog-hero.ffh .ffh-copy::before{inset:-90px -300px -90px -40px;background:linear-gradient(90deg,rgba(15,11,36,.97) 40%,rgba(15,11,36,.82) 62%,rgba(15,11,36,.35) 85%,transparent)}
.catalog-hero.ffh>.ffh-mark{display:none!important}
@media(max-width:680px){.catalog-hero.ffh .ffh-copy::before{inset:-40px -20px -30px -60px;background:linear-gradient(0deg,rgba(15,11,36,.96) 45%,rgba(15,11,36,.6) 75%,transparent)}}

/* Sort chips (2026-10-01) */
.ffs-sort{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:-10px 0 18px}
.ffs-label{color:#a9a3d4;font-size:.78rem;font-weight:700;margin-inline-end:2px}
.ffs-sort button{padding:5px 12px;border-radius:999px;border:1px solid rgba(169,163,212,.28);background:transparent;color:#ddd8ff;font:inherit;font-size:.76rem;font-weight:700;cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.ffs-sort button:hover{border-color:rgba(124,92,255,.7)}
.ffs-sort button.active{background:rgba(124,92,255,.2);border-color:#7c5cff;color:#fff}
.ffs-sort button:focus-visible{outline:2px solid #7c5cff;outline-offset:2px}

/* Compact filter bar: price chips + sort in one row (2026-10-01) */
.ffx{padding-top:14px!important}
.ffx-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin:0 0 16px}
.ffx-bar .budget-filter{margin:0!important;gap:6px!important;flex-wrap:wrap}
.ffx-bar .budget-filter button{padding:5px 10px!important;gap:6px!important;font-size:.76rem!important;border-radius:999px!important;border:1px solid rgba(169,163,212,.28)!important;background:transparent!important;color:#ddd8ff!important;transition:border-color .2s,background .2s}
.ffx-bar .budget-filter button span{font-size:.8rem}
.ffx-bar .budget-filter button b{font-weight:700}
.ffx-bar .budget-filter button small{padding:0 6px!important;font-size:.66rem;background:rgba(255,255,255,.08)!important;color:#a9a3d4!important}
.ffx-bar .budget-filter button:hover{border-color:rgba(124,92,255,.7)!important}
.ffx-bar .budget-filter button.active{background:rgba(124,92,255,.22)!important;border-color:#7c5cff!important;color:#fff!important}
.ffx-bar .budget-filter button.active small{background:rgba(124,92,255,.45)!important;color:#fff!important}
.ffx-bar .budget-filter button[data-empty]:not(.active){opacity:.5}
.ffx-sort{display:flex;align-items:center;gap:6px;color:#a9a3d4;font-size:.76rem;font-weight:700}
.ffx-sort select{height:30px;padding:0 10px;border-radius:999px;border:1px solid rgba(169,163,212,.28);background:#161233;color:#fff;font:inherit;font-size:.76rem;cursor:pointer}
.ffx-sort select:focus-visible{outline:2px solid #7c5cff;outline-offset:2px}
@media(max-width:680px){
  .ffx-bar .budget-filter{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;width:100%;padding-bottom:2px}
  .ffx-bar .budget-filter::-webkit-scrollbar{display:none}
  .ffx-bar .budget-filter button{flex:0 0 auto}
}
.ffx .ffx-bar .budget-filter button{min-height:0!important;height:auto!important;line-height:1.4!important;box-shadow:none!important}
@media(max-width:680px){.ffx .ffx-bar .budget-filter button{padding:5px 10px!important;font-size:.74rem!important}.ffx-sort{margin-inline-start:auto}}

/* Sort dropdown like a context menu (2026-10-01) */
.ffx-sort{position:relative}
.ffx-sort-btn{display:flex;align-items:center;gap:6px;height:30px;padding:0 10px;border-radius:999px;border:1px solid rgba(169,163,212,.28);background:transparent;color:#a9a3d4;font:inherit;font-size:.76rem;font-weight:700;cursor:pointer;transition:border-color .2s}
.ffx-sort-btn:hover,.ffx-sort.is-open .ffx-sort-btn{border-color:#7c5cff;color:#ddd8ff}
.ffx-sort-btn b{color:#fff}
.ffx-sort-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ffx-sort-btn .ffx-chev{width:13px;height:13px;transition:transform .2s}
.ffx-sort.is-open .ffx-chev{transform:rotate(180deg)}
.ffx-menu{position:absolute;top:calc(100% + 6px);inset-inline-end:0;z-index:50;min-width:170px;padding:5px;border-radius:12px;background:#1a1538;border:1px solid #2b2458;box-shadow:0 16px 40px rgba(0,0,0,.5);animation:ffxIn .14s ease-out}
.ffx-menu[hidden]{display:none}
@keyframes ffxIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.ffx-menu button{position:relative;display:block;width:100%;padding:7px 30px 7px 12px;border:0;border-radius:8px;background:transparent;color:#e7e3ff;font:inherit;font-size:.8rem;font-weight:600;text-align:start;cursor:pointer}
[dir=rtl] .ffx-menu button{padding:7px 30px 7px 12px}
.ffx-menu button:hover,.ffx-menu button:focus-visible{background:rgba(124,92,255,.18);outline:none}
.ffx-menu button[aria-checked=true]::before{content:"";position:absolute;inset-inline-start:12px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#b9a8ff}
.ffx-menu button{padding-inline-start:30px!important;padding-inline-end:12px!important}
.ffx-menu hr{border:0;border-top:1px solid #2b2458;margin:5px 4px}
@media(prefers-reduced-motion:reduce){.ffx-menu{animation:none}}