*{box-sizing:border-box}html,body{margin:0;padding:0;background:#050505;color:#f4f0ea;font-family:Arial,Helvetica,sans-serif}
body{background:#050505 none}
a{color:inherit;text-decoration:none}.page{width:min(1280px,calc(100% - 36px));margin:auto}
.nav .ico{font-size:19px;line-height:1}.main{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:16px;padding:16px 0 40px}
.box{background:linear-gradient(#111,#090909);border:1px solid #3d352e;border-radius:4px;box-shadow:0 2px 9px #000}
.titlebar{height:43px;padding:0 13px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(#241b14,#120e0b);border-bottom:1px solid #5c4028;font-family:Impact,'Arial Narrow',Arial,sans-serif;letter-spacing:.5px;font-size:17px;color:#f0bd58;text-transform:uppercase}
.hero{height:276px;position:relative;overflow:hidden;border-radius:3px;background:#111}
.hero img{width:100%;height:100%;object-fit:cover;display:block}.hero:after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,191,74,.25),inset 0 -35px 50px rgba(0,0,0,.25)}
.heroArrow{position:absolute;z-index:2;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background:#050505;border:2px solid #fff;color:#fff;font-size:25px;display:grid;place-items:center}.heroArrow.left{left:9px}.heroArrow.right{right:9px}
.dots{position:absolute;z-index:3;bottom:9px;left:50%;transform:translateX(-50%);display:flex;gap:8px}.dots i{width:10px;height:10px;border-radius:50%;background:#ddd;border:1px solid #555}.dots i.on{background:#ed1d24;border-color:#ed1d24}
.filters{display:flex;justify-content:space-between;align-items:center;margin:11px 0 10px}.tabs{display:flex;gap:5px}.tabs button,.view button{height:36px;padding:0 18px;background:linear-gradient(#15191b,#0a0c0d);border:1px solid #3a4145;border-radius:3px;color:#eee;font-family:Impact,'Arial Narrow',Arial,sans-serif;font-size:11px;text-transform:uppercase;cursor:pointer}.tabs button.active,.view button.active{background:#a71916;border-color:#f02a24;color:#fff}.view{display:flex;gap:5px}.view button{padding:0 12px}
.feed{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.card{overflow:hidden;background:#0c0d0e;border:1px solid #30363a;border-radius:4px;box-shadow:0 2px 5px #000}.thumb{position:relative;aspect-ratio:1/1;background:#181818;overflow:hidden}.thumb img{width:100%;height:100%;object-fit:cover;display:block}.memeText{position:absolute;z-index:2;left:7px;right:7px;top:6px;color:#fff;text-align:center;font-family:Impact,'Arial Narrow',Arial,sans-serif;font-size:18px;line-height:1;text-transform:uppercase;text-shadow:3px 3px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000}.play{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);width:42px;height:42px;border-radius:50%;display:grid;place-items:center;border:2px solid #fff;background:rgba(0,0,0,.65);font-size:17px}.duration{position:absolute;z-index:3;right:6px;bottom:6px;padding:3px 5px;background:#050505;color:#fff;font-size:10px;border-radius:2px}.cardbody{padding:7px 7px 8px}.ctitle{font-size:11px;font-weight:800;height:28px;overflow:hidden}.meta{display:flex;gap:8px;color:#aaa;font-size:9px;margin-top:5px;white-space:nowrap}.heart{color:#ef1b27}.sidebar{display:flex;flex-direction:column;gap:12px}.sidebody{padding:8px 11px}.cat{display:flex;align-items:center;gap:10px;height:36px;border-bottom:1px solid #252525;font-size:12px}.cat:last-child{border:0}.cat .ci{width:22px;text-align:center;color:#f5bd59;font-size:18px}.cat .arr{margin-left:auto;color:#888}.trend{display:grid;grid-template-columns:32px 50px 1fr;gap:7px;align-items:center;padding:7px 0;border-bottom:1px solid #252525}.trend:last-child{border:0}.rank{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#a71916;font-weight:900}.trend img{width:50px;height:50px;object-fit:cover;border-radius:3px}.trend strong{font-size:10px}.trend small{display:block;color:#aaa;margin-top:5px;font-size:9px}.adsticky{position:sticky;top:15px;z-index:10;display:flex;flex-direction:column;gap:12px}.promo{border:1px solid #6e4a28;border-radius:4px;overflow:hidden;background:#111}.promo img{width:100%;display:block}.share{padding:11px;display:flex;gap:7px;justify-content:center}.share i{font-style:normal;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:1px solid #555;background:#111;color:#fff;font-weight:900}.load{margin:16px auto 0;max-width:570px;height:50px;display:flex;align-items:center;justify-content:center;gap:10px;background:#0e1011;border:1px solid #222;border-radius:3px;color:#ddd}.load b{font-size:29px;font-weight:400}.footer{min-height:155px;margin-top:20px;background:#080808 url('/homepage-v1-test/wms-assets/footer.jpg') center bottom/100% auto no-repeat;border-top:1px solid #5c4028;display:flex;align-items:flex-end;justify-content:center;padding:0 20px 22px}.footlinks{background:rgba(0,0,0,.72);padding:8px 18px;font-size:10px}.footlinks a{margin:0 8px}.footlinks a:hover{color:#f1b94f}
@media(max-width:1050px){.main{grid-template-columns:1fr}.sidebar{display:grid;grid-template-columns:1fr 1fr}.feed{grid-template-columns:repeat(3,1fr)}}
/* FINAL TARGET PROPORTIONS */
.page,.navin{width:min(1540px,calc(100% - 36px))}
.main{grid-template-columns:minmax(0,1fr) 390px;gap:20px;padding:16px 0 35px}
.hero{height:160px!important}
.feed{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.thumb{aspect-ratio:1.65/1}
.cardbody{padding:8px 10px 9px}
.ctitle{font-size:12px;height:30px}
.meta{font-size:10px}
.titlebar{height:43px}



/* FINAL POLISH */
.memeText{display:none!important}
.main{grid-template-columns:minmax(0,1fr) 310px!important}



/* CATEGORY + TYPOGRAPHY POLISH */
body,.nav a,.titlebar,.tabs button,.view button,.memeText{
    font-family:Arial,Helvetica,sans-serif!important;
}
.titlebar{
    font-weight:800;
    letter-spacing:.4px;
}
.cat{
    height:46px!important;
    padding:0 7px!important;
    gap:12px!important;
    font-size:15px!important;
    font-weight:700!important;
    color:#f2f2f2!important;
    border-bottom:1px solid #302a24!important;
    border-radius:3px;
    transition:background .15s ease,color .15s ease;
}
.cat .ci{
    width:27px!important;
    font-size:21px!important;
}
.cat .arr{
    font-size:22px!important;
    color:#888!important;
}
.cat:hover{
    background:#24140f!important;
    color:#f5bd59!important;
}
.cat:hover .arr{
    color:#ef2b24!important;
}






/* FEED TITLE FIX */
.ctitle{
    height:auto!important;
    min-height:36px!important;
    overflow:visible!important;
    font-family:Arial,Helvetica,sans-serif!important;
    font-size:14px!important;
    font-weight:700!important;
    line-height:1.3!important;
    color:#f2f2f2!important;
}
.cardbody{
    padding:9px 10px 10px!important;
}



/* KEEP SHARE BOX VISIBLE WHILE SCROLLING */
.sidebar > .box:last-child{
    position:sticky;
    top:15px;
    z-index:9;
}



/* SHARE BOX ABOVE STICKY PROMOS */
.sidebar > .box:last-child{
    position:sticky!important;
    top:15px!important;
    z-index:20!important;
    background:#0b0b0b!important;
}



/* SHARE BOX: NORMAL POSITION BELOW STICKY ADS */
.sidebar > .box:last-child{
    position:relative!important;
    top:auto!important;
    z-index:1!important;
    background:#0b0b0b!important;
}
.adsticky{
    z-index:10!important;
}



/* SHARE BOX STAYS BELOW THE STICKY ADVERTS */
.sidebar > .box:last-child{
    position:sticky!important;
    top:420px!important;
    z-index:9!important;
    background:#0b0b0b!important;
}
.adsticky{
    position:sticky!important;
    top:15px!important;
    z-index:10!important;
}



/* WMS2 MOBILE FOUNDATION
 * Single mobile layout. Keep desktop CSS above this section untouched.
 */
@media (max-width:700px), (hover:none) and (pointer:coarse) and (orientation:landscape){

    html,
    body{
        width:100%;
        max-width:100%;
        margin:0;
        padding:0;
        overflow-x:hidden;
    }

    .page{
        width:100%!important;
        max-width:none!important;
        box-sizing:border-box;
        padding-left:10px!important;
        padding-right:10px!important;
    }


    /* Public sidebar disappears on mobile */
    .sidebar{
        display:none!important;
    }

    /* Main content */
    .main{
        display:block!important;
        width:100%!important;
        box-sizing:border-box!important;
        padding:10px 0 25px!important;
    }

    /* Homepage feed */
    .feed{
        display:grid!important;
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        gap:7px!important;
        width:100%!important;
    }

    .card{
        min-width:0!important;
        width:100%!important;
    }

    .thumb{
        width:100%!important;
        max-width:100%!important;
    }

    .thumb img{
        width:100%!important;
        max-width:100%!important;
        height:100%!important;
        display:block!important;
    }

    .cardbody{
        min-width:0!important;
        box-sizing:border-box!important;
    }

    .ctitle{
        min-width:0!important;
        overflow:hidden!important;
    }

    .meta{
        max-width:100%!important;
        overflow:hidden!important;
    }

    /* Homepage filters */
    .filters{
        display:flex!important;
        flex-direction:column!important;
        align-items:stretch!important;
        gap:7px!important;
        width:100%!important;
        box-sizing:border-box!important;
    }

    .tabs{
        display:grid!important;
        grid-template-columns:repeat(3,minmax(0,1fr))!important;
        gap:4px!important;
        width:100%!important;
        overflow:hidden!important;
    }

    .tabs button{
        min-width:0!important;
        width:100%!important;
        padding:0 3px!important;
        font-size:9px!important;
        white-space:nowrap!important;
        overflow:hidden!important;
        text-overflow:ellipsis!important;
    }

    .view{
        width:100%!important;
        margin-left:0!important;
        justify-content:flex-end!important;
    }

    /* Footer */
    .footer{
        width:100%!important;
        min-height:120px!important;
        margin-top:20px!important;
        box-sizing:border-box!important;
        padding:0 10px 18px!important;
        display:flex!important;
        align-items:flex-end!important;
        justify-content:center!important;
    }

    .footlinks{
        width:100%!important;
        box-sizing:border-box!important;
        text-align:center!important;
        line-height:1.8!important;
    }

    .footlinks a{
        display:inline-block!important;
        margin:0 5px!important;
    }



}

@media (min-width:701px){
    .sidebar > .box:last-child{
        position:relative!important;
        top:auto!important;
        z-index:1!important;
    }
    .sidebar{
        position:relative;
    }
    .sidebar > .adsticky{
        position:sticky!important;
        top:15px!important;
        bottom:auto!important;
        transform:none!important;
        z-index:10!important;
        display:flex;
        flex-direction:column;
        gap:12px;
        margin:0;
    }
    .sidebar > .adsticky .wms-network-sidebar-promo img{
        width:100%;
        height:auto;
        display:block;
    }
}
/* WMS2 MOBILE FOOTER OVERLAP FIX */
@media (max-width:700px), (hover:none) and (pointer:coarse) and (orientation:landscape){
    .main{
        display:block!important;
        width:100%!important;
        height:auto!important;
        min-height:0!important;
        overflow:visible!important;
        padding-bottom:35px!important;
        box-sizing:border-box!important;
    }

    .footer{
        position:relative!important;
        clear:both!important;
        height:auto!important;
        min-height:120px!important;
        margin-top:20px!important;
        overflow:visible!important;
    }
}

/* WMS2: Item/category full-width layout on short landscape phones */
@media (orientation:landscape) and (max-height:600px) {
    html body .page.main {
        display:block!important;
        width:100%!important;
        max-width:none!important;
        margin:0!important;
        padding:10px 10px 35px!important;
        grid-template-columns:minmax(0,1fr)!important;
        gap:0!important;
        box-sizing:border-box!important;
    }

    html body .page.main > section {
        display:block!important;
        width:100%!important;
        max-width:none!important;
        min-width:0!important;
    }

    html body .page.main > .sidebar {
        display:none!important;
    }
}