.bf-icon-field{display:grid;gap:.42rem;min-width:0}.bf-icon-field>input{display:none!important}.bf-icon-trigger{width:100%;min-height:78px;display:grid;grid-template-columns:58px minmax(0,1fr) auto;align-items:center;gap:.75rem;padding:.6rem .7rem;border:1px solid rgba(255,255,255,.08);border-radius:15px;background:rgba(17,28,51,.82);color:var(--text-1);font-family:inherit;text-align:left;cursor:pointer;transition:border-color .18s ease,background .18s ease,transform .18s ease}.bf-icon-trigger:hover{border-color:rgba(255,159,28,.34);background:rgba(22,35,61,.94);transform:translateY(-1px)}.bf-icon-trigger__preview{width:58px;height:58px;display:grid;place-items:center;border-radius:13px;background:linear-gradient(145deg,rgba(5,11,24,.92),rgba(15,27,51,.82));border:1px solid rgba(255,255,255,.06);overflow:hidden}.bf-icon-trigger__image{width:48px;height:48px;object-fit:contain}.bf-icon-trigger__image.bf-stored-icon--emoji{font-size:1.6rem}.bf-icon-trigger__copy{min-width:0;display:grid;gap:.12rem}.bf-icon-trigger__copy small{color:#ffad35;font-size:.58rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.bf-icon-trigger__copy strong{font-size:.82rem;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bf-icon-trigger__copy em{color:#7888a1;font-style:normal;font-size:.64rem;line-height:1.35}.bf-icon-trigger__action{display:inline-flex;align-items:center;gap:.42rem;padding:.48rem .62rem;border-radius:10px;background:rgba(255,159,28,.1);border:1px solid rgba(255,159,28,.16);color:#ffb54b;font-size:.62rem;font-weight:800;white-space:nowrap}.bf-icon-field__hint{display:flex;align-items:flex-start;gap:.38rem;color:#65758d;font-size:.58rem;line-height:1.45}.bf-icon-field__hint i{margin-top:.08rem;color:#ff9f1c}.bf-stored-icon{width:100%;height:100%;object-fit:contain;display:block}.bf-stored-icon--emoji{display:grid;place-items:center}.listing-icon .bf-stored-icon,.listing-placeholder-icon .bf-stored-icon,.order-icon .bf-stored-icon{width:54px;height:54px;margin:auto;object-fit:contain}.author-role .bf-stored-icon,.chat-list-product .bf-stored-icon,.chat-header-product .bf-stored-icon{display:inline-block;width:22px;height:22px;vertical-align:middle;margin-right:.25rem}.bf-icon-modal[hidden]{display:none!important}.bf-icon-modal{position:fixed;inset:0;z-index:10050;display:grid;place-items:center;padding:1rem;opacity:0;transition:opacity .18s ease}.bf-icon-modal.is-open{opacity:1}.bf-icon-modal__backdrop{position:absolute;inset:0;background:rgba(2,7,18,.78);backdrop-filter:blur(8px)}.bf-icon-dialog{position:relative;width:min(1100px,96vw);max-height:min(820px,92vh);display:grid;grid-template-rows:auto auto auto minmax(0,1fr) auto;border:1px solid rgba(255,255,255,.09);border-radius:24px;background:linear-gradient(160deg,#0b1427,#050b18);box-shadow:0 35px 90px rgba(0,0,0,.55);overflow:hidden;transform:translateY(10px) scale(.99);transition:transform .18s ease}.bf-icon-modal.is-open .bf-icon-dialog{transform:none}.bf-icon-dialog__head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1.05rem 1.15rem .9rem;border-bottom:1px solid rgba(255,255,255,.06);background:linear-gradient(100deg,rgba(255,159,28,.07),transparent 60%)}.bf-icon-dialog__head>div>span{color:#ffad35;font-size:.62rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.bf-icon-dialog__head h2{margin:.22rem 0 .16rem;font-size:1.18rem}.bf-icon-dialog__head p{margin:0;color:#7b8ba3;font-size:.68rem;line-height:1.5}.bf-icon-dialog__head>button{width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.07);border-radius:11px;background:rgba(255,255,255,.035);color:#9bacbf;cursor:pointer}.bf-icon-dialog__tools{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 1rem}.bf-icon-dialog__tools label{flex:1;display:flex;align-items:center;gap:.55rem;padding:0 .75rem;border:1px solid rgba(255,255,255,.08);border-radius:13px;background:#091225;color:#73839c}.bf-icon-dialog__tools input{width:100%;height:42px;border:0;background:transparent;color:#f5f7fb;font:inherit;outline:0}.bf-icon-dialog__count{color:#72819a;font-size:.62rem;white-space:nowrap}.bf-icon-groups{display:flex;gap:.45rem;overflow-x:auto;padding:0 1rem .75rem;scrollbar-width:thin}.bf-icon-groups button{flex:0 0 auto;display:flex;align-items:center;gap:.4rem;padding:.48rem .65rem;border:1px solid rgba(255,255,255,.065);border-radius:999px;background:rgba(255,255,255,.025);color:#8998ae;font-family:inherit;font-size:.62rem;font-weight:750;cursor:pointer}.bf-icon-groups button b{padding:.12rem .3rem;border-radius:999px;background:rgba(255,255,255,.05);font-size:.52rem}.bf-icon-groups button.is-active{border-color:rgba(255,159,28,.25);background:rgba(255,159,28,.11);color:#ffbd5c}.bf-icon-grid{min-height:260px;overflow:auto;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.55rem;padding:.2rem 1rem 1rem;align-content:start}.bf-icon-option{position:relative;min-width:0;display:grid;grid-template-rows:76px auto auto;gap:.22rem;padding:.55rem;border:1px solid rgba(255,255,255,.065);border-radius:15px;background:rgba(7,14,29,.75);color:#cbd5e4;font-family:inherit;text-align:left;cursor:pointer;transition:transform .16s ease,border-color .16s ease,background .16s ease}.bf-icon-option:hover{transform:translateY(-2px);border-color:rgba(255,159,28,.25);background:rgba(14,25,46,.92)}.bf-icon-option>span{display:grid;place-items:center;border-radius:11px;background:radial-gradient(circle,rgba(255,159,28,.08),transparent 70%),#071020;overflow:hidden}.bf-icon-option img{width:68px;height:68px;object-fit:contain}.bf-icon-option strong{font-size:.66rem;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bf-icon-option small{color:#697a94;font-size:.54rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bf-icon-option>i{display:none;position:absolute;right:.45rem;top:.45rem;width:22px;height:22px;place-items:center;border-radius:999px;background:#1fd48c;color:#042016;font-size:.55rem}.bf-icon-option.is-selected{border-color:#1fd48c}.bf-icon-option.is-selected>i{display:grid}.bf-icon-empty{grid-column:1/-1;min-height:260px;display:grid;place-items:center;align-content:center;gap:.4rem;color:#6f8098;text-align:center}.bf-icon-empty i{font-size:1.5rem;color:#ff9f1c}.bf-icon-empty strong{color:#dce5f2}.bf-icon-empty span{font-size:.65rem}.bf-icon-dialog__footer{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.72rem 1rem;border-top:1px solid rgba(255,255,255,.06);color:#6f8098;font-size:.58rem}.bf-icon-dialog__footer a{color:#ffad35;text-decoration:none}.bf-icon-modal-open{overflow:hidden}.listing-manage-media.no-image .listing-icon{width:76px;height:76px}.listing-image-empty .listing-icon{width:88px;height:88px}.listing-placeholder-icon{display:grid;place-items:center}.listing-placeholder-icon .bf-stored-icon{width:92px;height:92px}
@media(max-width:900px){.bf-icon-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.bf-icon-trigger{grid-template-columns:54px minmax(0,1fr)}.bf-icon-trigger__action{grid-column:1/-1;justify-content:center}.bf-icon-dialog__footer{align-items:flex-start;flex-direction:column}}
@media(max-width:600px){.bf-icon-modal{padding:.35rem}.bf-icon-dialog{width:100%;max-height:96vh;border-radius:19px}.bf-icon-dialog__head{padding:.85rem}.bf-icon-dialog__head p{display:none}.bf-icon-dialog__tools{align-items:stretch;flex-direction:column;padding:.65rem .75rem}.bf-icon-dialog__count{white-space:normal}.bf-icon-groups{padding:0 .75rem .65rem}.bf-icon-grid{grid-template-columns:repeat(3,minmax(0,1fr));padding:.15rem .65rem .75rem;gap:.42rem}.bf-icon-option{grid-template-rows:64px auto auto;padding:.45rem}.bf-icon-option img{width:58px;height:58px}.bf-icon-dialog__footer{padding:.65rem .75rem}.bf-icon-trigger{grid-template-columns:50px minmax(0,1fr);min-height:72px}.bf-icon-trigger__preview{width:50px;height:50px}.bf-icon-trigger__image{width:42px;height:42px}}

/* 2026-08-02: remove the harsh orange inner focus frame from icon search. */
.bf-icon-dialog__tools label{transition:border-color .18s ease,background .18s ease,box-shadow .18s ease}
.bf-icon-dialog__tools label:focus-within{border-color:rgba(148,163,184,.22);background:#0b1529;box-shadow:0 0 0 3px rgba(96,165,250,.045)}
.bf-icon-dialog__tools input,
.bf-icon-dialog__tools input:hover,
.bf-icon-dialog__tools input:focus,
.bf-icon-dialog__tools input:focus-visible{border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important}


/* 2026-08-03: explicit source and copyright attribution for Blox Fruits icons. */
.bf-icon-field__hint span{min-width:0}
.bf-icon-field__hint a{color:#d99a43;text-decoration:underline;text-decoration-color:rgba(217,154,67,.35);text-underline-offset:2px}
.bf-icon-field__hint a:hover{color:#ffc46c;text-decoration-color:currentColor}
.bf-icon-dialog__footer{align-items:flex-start;padding:.82rem 1rem;gap:1rem}
.bf-icon-attribution{display:grid;grid-template-columns:28px minmax(0,1fr);gap:.65rem;min-width:0;max-width:760px}
.bf-icon-attribution>i{width:28px;height:28px;display:grid;place-items:center;border-radius:9px;background:rgba(255,159,28,.09);border:1px solid rgba(255,159,28,.16);color:#ffad35}
.bf-icon-attribution strong,.bf-icon-attribution span,.bf-icon-attribution small{display:block}
.bf-icon-attribution strong{color:#dce5f2;font-size:.61rem;line-height:1.35}
.bf-icon-attribution span{margin-top:.18rem;color:#8291a8;font-size:.56rem;line-height:1.48}
.bf-icon-attribution small{margin-top:.16rem;color:#65758e;font-size:.52rem;line-height:1.45}
.bf-icon-attribution__links{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.45rem;flex:0 0 auto}
.bf-icon-attribution__links a{display:inline-flex;align-items:center;gap:.38rem;min-height:32px;padding:0 .6rem;border-radius:10px;border:1px solid rgba(255,159,28,.14);background:rgba(255,159,28,.055);color:#ffb54b!important;font-size:.55rem;font-weight:750;text-decoration:none!important;white-space:nowrap}
.bf-icon-attribution__links a:hover{background:rgba(255,159,28,.1);border-color:rgba(255,159,28,.25);color:#ffd18a!important}
@media(max-width:900px){.bf-icon-dialog__footer{flex-direction:column}.bf-icon-attribution__links{justify-content:flex-start}}
@media(max-width:600px){.bf-icon-attribution{grid-template-columns:24px minmax(0,1fr)}.bf-icon-attribution>i{width:24px;height:24px}.bf-icon-attribution__links{display:grid;grid-template-columns:1fr;width:100%}.bf-icon-attribution__links a{justify-content:center}}

/* 2026-08-09: mobile icon picker attribution overlap fix. */
.bf-icon-grid{
    min-height:0;
    position:relative;
    z-index:1;
}
.bf-icon-option{
    overflow:hidden;
}
.bf-icon-option>span{
    min-width:0;
    min-height:0;
}
.bf-icon-option img{
    max-width:100%;
    max-height:100%;
}
.bf-icon-dialog__footer{
    position:relative;
    z-index:5;
    isolation:isolate;
    background:linear-gradient(180deg,rgba(8,17,34,.99),#050b18);
}
.bf-icon-attribution>div{
    min-width:0;
}

@media(max-width:600px){
    .bf-icon-dialog{
        grid-template-rows:auto auto auto minmax(0,1fr) auto;
    }
    .bf-icon-grid{
        min-height:0;
        overflow-x:hidden;
        overflow-y:auto;
        overscroll-behavior:contain;
        padding-bottom:.9rem;
    }
    .bf-icon-option{
        contain:paint;
    }
    .bf-icon-dialog__footer{
        z-index:20;
        flex:0 0 auto;
        max-height:38vh;
        overflow-x:hidden;
        overflow-y:auto;
        overscroll-behavior:contain;
        background:#071020;
        border-top:1px solid rgba(255,255,255,.09);
        box-shadow:0 -14px 30px rgba(2,7,18,.92);
    }
    .bf-icon-attribution{
        width:100%;
        max-width:none;
        grid-template-columns:24px minmax(0,1fr);
        align-items:start;
    }
    .bf-icon-attribution strong,
    .bf-icon-attribution span,
    .bf-icon-attribution small{
        max-width:100%;
        overflow-wrap:anywhere;
        word-break:normal;
    }
    .bf-icon-attribution__links{
        position:relative;
        z-index:2;
    }
}

@media(max-width:380px){
    .bf-icon-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .bf-icon-dialog__footer{
        max-height:42vh;
    }
}

/* ========================================================================== */
/* 2026-08-09: mobile Blox Fruits icon sizing / aspect-ratio correction       */
/* ========================================================================== */
@media(max-width:600px){
    /* Creation form: keep the currently selected item large and undistorted. */
    .bf-icon-trigger{
        grid-template-columns:66px minmax(0,1fr)!important;
        min-height:88px!important;
        gap:.72rem!important;
        padding:.65rem!important;
    }
    .bf-icon-trigger__preview{
        width:66px!important;
        height:66px!important;
        min-width:66px!important;
        min-height:66px!important;
        aspect-ratio:1/1;
    }
    .bf-icon-trigger__image{
        width:58px!important;
        height:58px!important;
        max-width:58px!important;
        max-height:58px!important;
        object-fit:contain!important;
        object-position:center!important;
    }
    .bf-icon-trigger__action{grid-column:1/-1!important;min-height:40px;justify-content:center}

    /* Picker: two roomy columns instead of three cramped columns. */
    .bf-icon-grid{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        gap:.58rem!important;
        padding:.25rem .65rem .8rem!important;
    }
    .bf-icon-option{
        grid-template-rows:96px auto auto!important;
        gap:.28rem!important;
        padding:.55rem!important;
        min-width:0;
    }
    .bf-icon-option>span{
        width:100%;
        min-height:96px;
        aspect-ratio:1/1;
        place-items:center;
    }
    .bf-icon-option img,
    .bf-icon-option .bf-stored-icon{
        width:84px!important;
        height:84px!important;
        max-width:90%!important;
        max-height:90%!important;
        object-fit:contain!important;
        object-position:center!important;
        flex:none!important;
    }
    .bf-icon-option strong{font-size:.7rem!important;text-align:center}
    .bf-icon-option small{font-size:.57rem!important;text-align:center}

    /* Listing cards: do not inherit the generic 70px mobile product media squash. */
    .listing-showcase-card .listing-showcase-media{
        height:118px!important;
        min-height:118px!important;
    }
    .listing-showcase-card .listing-placeholder-icon{
        width:94px!important;
        height:94px!important;
        display:grid!important;
        place-items:center!important;
    }
    .listing-showcase-card .listing-placeholder-icon .bf-stored-icon{
        width:90px!important;
        height:90px!important;
        max-width:90px!important;
        max-height:90px!important;
        object-fit:contain!important;
        object-position:center!important;
    }
    .listing-card-premium .listing-image-empty{
        height:168px!important;
        min-height:168px!important;
    }
    .listing-card-premium .listing-image-empty .listing-icon{
        width:104px!important;
        height:104px!important;
        min-width:104px!important;
        min-height:104px!important;
    }
    .listing-card-premium .listing-image-empty .listing-icon .bf-stored-icon{
        width:98px!important;
        height:98px!important;
        max-width:98px!important;
        max-height:98px!important;
        object-fit:contain!important;
    }
}

@media(max-width:380px){
    .bf-icon-option{grid-template-rows:86px auto auto!important}
    .bf-icon-option>span{min-height:86px}
    .bf-icon-option img,.bf-icon-option .bf-stored-icon{width:76px!important;height:76px!important}
    .home-listings-grid .listing-showcase-media{height:124px!important;min-height:124px!important}
    .home-listings-grid .listing-placeholder-icon{width:82px!important;height:82px!important}
    .home-listings-grid .listing-placeholder-icon .bf-stored-icon{width:78px!important;height:78px!important;max-width:78px!important;max-height:78px!important}
}

/* ========================================================================== */
/* 2026-08-10: icon picker layout stabilization v6                            */
/* Prevent CSS Grid auto rows from collapsing and clipping every item icon.   */
/* Applies to every Blox Fruits category while keeping responsive sizing.      */
/* ========================================================================== */
.bf-icon-grid{
    align-items:stretch!important;
    grid-auto-flow:row!important;
    grid-auto-rows:minmax(124px,max-content)!important;
}
.bf-icon-option{
    width:100%!important;
    min-width:0!important;
    min-height:124px!important;
    height:auto!important;
    align-self:stretch!important;
    grid-template-rows:78px minmax(16px,auto) minmax(14px,auto)!important;
    align-content:start!important;
    overflow:hidden!important;
}
.bf-icon-option>span{
    width:100%!important;
    height:78px!important;
    min-height:78px!important;
    max-height:78px!important;
    display:grid!important;
    place-items:center!important;
    overflow:hidden!important;
}
.bf-icon-option img,
.bf-icon-option .bf-stored-icon{
    display:block!important;
    width:70px!important;
    height:70px!important;
    max-width:92%!important;
    max-height:92%!important;
    object-fit:contain!important;
    object-position:center!important;
    flex:none!important;
}
.bf-icon-option strong,
.bf-icon-option small{
    display:block!important;
    min-width:0!important;
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
}

@media(max-width:900px){
    .bf-icon-grid{
        grid-template-columns:repeat(4,minmax(0,1fr))!important;
        grid-auto-rows:minmax(126px,max-content)!important;
    }
    .bf-icon-option{min-height:126px!important;}
}

@media(max-width:600px){
    .bf-icon-grid{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        grid-auto-rows:minmax(142px,max-content)!important;
        gap:.58rem!important;
        padding:.3rem .65rem .85rem!important;
        align-items:stretch!important;
    }
    .bf-icon-option{
        min-height:142px!important;
        height:auto!important;
        grid-template-rows:94px minmax(17px,auto) minmax(15px,auto)!important;
        gap:.28rem!important;
        padding:.55rem!important;
        border-radius:15px!important;
    }
    .bf-icon-option>span{
        height:94px!important;
        min-height:94px!important;
        max-height:94px!important;
        aspect-ratio:auto!important;
    }
    .bf-icon-option img,
    .bf-icon-option .bf-stored-icon{
        width:84px!important;
        height:84px!important;
        max-width:90%!important;
        max-height:90%!important;
    }
    .bf-icon-option strong{
        font-size:.7rem!important;
        line-height:1.35!important;
        text-align:left!important;
    }
    .bf-icon-option small{
        font-size:.56rem!important;
        line-height:1.3!important;
        text-align:left!important;
    }
}

@media(max-width:380px){
    .bf-icon-grid{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        grid-auto-rows:minmax(134px,max-content)!important;
        gap:.48rem!important;
        padding-left:.55rem!important;
        padding-right:.55rem!important;
    }
    .bf-icon-option{
        min-height:134px!important;
        grid-template-rows:86px minmax(17px,auto) minmax(14px,auto)!important;
        padding:.48rem!important;
    }
    .bf-icon-option>span{
        height:86px!important;
        min-height:86px!important;
        max-height:86px!important;
    }
    .bf-icon-option img,
    .bf-icon-option .bf-stored-icon{
        width:76px!important;
        height:76px!important;
    }
}

/* Keep the category strip scrollable without the bright native desktop bar. */
.bf-icon-groups{
    scrollbar-width:thin;
    scrollbar-color:rgba(137,152,174,.34) transparent;
}
.bf-icon-groups::-webkit-scrollbar{height:5px;}
.bf-icon-groups::-webkit-scrollbar-track{background:transparent;}
.bf-icon-groups::-webkit-scrollbar-thumb{
    background:rgba(137,152,174,.28);
    border-radius:999px;
}
.bf-icon-groups::-webkit-scrollbar-thumb:hover{background:rgba(255,173,53,.4);}
.bf-icon-option{text-align:center!important;}
.bf-icon-option strong,.bf-icon-option small{text-align:center!important;}