/*
|--------------------------------------------------------------------------
| FTR Games - Hot Bundles Frontend V10
|--------------------------------------------------------------------------
*/

.ftr-hot-public{
    --ftr-hot-bg:#08060d;
    --ftr-hot-card:#12091b;
    --ftr-hot-line:rgba(255,255,255,.08);
    --ftr-hot-text:#fff;
    --ftr-hot-muted:#9f94aa;
    --ftr-hot-purple:#8b3dff;
    --ftr-hot-purple-light:#bd71ff;
    --ftr-hot-green:#42ec84;
    --ftr-hot-yellow:#ffd84d;
    --ftr-hot-danger:#ff7388;

    width:100%;
    box-sizing:border-box;
    padding:30px clamp(28px,4vw,70px) 50px;
    color:var(--ftr-hot-text);
    background:
        radial-gradient(
            circle at 15% 0%,
            rgba(121,37,198,.12),
            transparent 26%
        ),
        var(--ftr-hot-bg);
    font-family:inherit;
}

.ftr-hot-public *,
.ftr-hot-public *::before,
.ftr-hot-public *::after{
    box-sizing:border-box;
}

/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
*/

.ftr-hot-public__head{
    max-width:1600px;
    margin:0 auto 22px;
}

.ftr-hot-public__head h2{
    margin:0;
    color:#fff;
    font-size:clamp(30px,3vw,45px);
    line-height:1;
    font-weight:950;
    letter-spacing:-.04em;
}

.ftr-hot-public__description{
    margin:10px 0 7px;
    color:#d1c7d6;
    font-size:14px;
    line-height:1.5;
}

.ftr-hot-public__context{
    display:flex;
    align-items:center;
    gap:6px;
    color:#94899c;
    font-size:11px;
}

.ftr-hot-public__context strong{
    color:#fff;
    font-weight:800;
}

.ftr-hot-public__flag{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:17px;
    line-height:1;
}


.ftr-hot-public__context-platform{
    display:inline-flex;
    align-items:center;
    gap:4px;
}

.ftr-hot-public__platform-dot{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:9px;
    line-height:1;
}

/*
|--------------------------------------------------------------------------
| Status
|--------------------------------------------------------------------------
*/

.ftr-hot-public__status,
.ftr-hot-public__empty{
    max-width:1600px;
    margin:0 auto 16px;
    padding:12px 14px;
    border:1px solid var(--ftr-hot-line);
    border-radius:10px;
    background:rgba(255,255,255,.025);
    color:#d8cfe0;
    font-size:12px;
}

.ftr-hot-public__status.is-error{
    color:#ffbcc5;
    border-color:rgba(255,92,112,.35);
}

/*
|--------------------------------------------------------------------------
| Bundle Grid - EXACTLY 2 per row
|--------------------------------------------------------------------------
*/

.ftr-hot-public__grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px;
    max-width:1600px;
    margin:0 auto;
    align-items:stretch;
}

/*
|--------------------------------------------------------------------------
| Bundle Card
|--------------------------------------------------------------------------
*/

.ftr-hot-public__card{
    position:relative;
    display:flex;
    flex-direction:column;
    min-width:0;
    height:100%;
    padding:16px;
    border:1px solid rgba(177,76,255,.46);
    border-radius:14px;
    background:
        linear-gradient(
            145deg,
            rgba(29,13,42,.98),
            rgba(10,6,15,.99)
        );
    box-shadow:
        0 0 0 1px rgba(149,54,245,.06),
        0 0 22px rgba(128,40,230,.13),
        0 14px 32px rgba(0,0,0,.30);
    transition:
        border-color .15s ease,
        box-shadow .15s ease,
        transform .15s ease;
}

.ftr-hot-public__card:hover{
    transform:translateY(-2px);
    border-color:rgba(198,114,255,.70);
    box-shadow:
        0 0 0 1px rgba(163,70,255,.08),
        0 0 28px rgba(141,46,244,.19),
        0 18px 38px rgba(0,0,0,.36);
}


.ftr-hot-public__mobile-hero,
.ftr-hot-public__includes{
    display:none;
}

/*
|--------------------------------------------------------------------------
| Card Top
|--------------------------------------------------------------------------
*/

.ftr-hot-public__card-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    min-height:28px;
    margin-bottom:8px;
}

.ftr-hot-public__badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    min-height:22px;
    padding:0 8px;
    border:1px solid rgba(189,103,255,.40);
    border-radius:999px;
    background:rgba(137,47,213,.11);
    color:#dda9ff;
    font-size:8px;
    font-weight:900;
    letter-spacing:.08em;
}

.ftr-hot-public__badge > span{
    line-height:1;
}

.ftr-hot-public__top-actions{
    display:flex;
    align-items:center;
    gap:9px;
}

.ftr-hot-public__discount{
    padding:0;
    margin:0;
    border:0;
    background:transparent;
    color:var(--ftr-hot-green);
    font-size:14px;
    line-height:1;
    font-weight:950;
    text-shadow:0 0 12px rgba(66,236,132,.16);
}

/*
|--------------------------------------------------------------------------
| Favorite Placeholder
|--------------------------------------------------------------------------
*/

.ftr-hot-favorite{
    display:grid;
    width:30px;
    height:30px;
    padding:0;
    place-items:center;
    border:1px solid rgba(255,255,255,.13);
    border-radius:8px;
    background:transparent;
    color:#b9acbf;
    cursor:pointer;
    appearance:none;
    -webkit-appearance:none;
    transition:
        color .15s ease,
        border-color .15s ease,
        background .15s ease,
        transform .15s ease;
}

.ftr-hot-favorite svg{
    width:16px;
    height:16px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.ftr-hot-favorite:hover{
    color:#dc9cff;
    border-color:rgba(190,100,255,.55);
    background:rgba(143,54,230,.07);
    transform:translateY(-1px);
}

/*
|--------------------------------------------------------------------------
| Bundle Title
|--------------------------------------------------------------------------
*/

.ftr-hot-public__card h3{
    min-height:42px;
    margin:7px 0 13px;
    color:#fff;
    font-size:15px;
    line-height:1.35;
    font-weight:900;
    letter-spacing:-.01em;
}

/*
|--------------------------------------------------------------------------
| Products - MAX 4 per internal row
|--------------------------------------------------------------------------
*/

.ftr-hot-public__products{
    display:grid;
    grid-template-columns:none;
    grid-auto-flow:column;
    grid-auto-columns:minmax(0,1fr);
    gap:9px;
    align-items:stretch;
}

/*
|--------------------------------------------------------------------------
| Product Card
|--------------------------------------------------------------------------
*/

.ftr-hot-product{
    display:flex;
    flex-direction:column;
    min-width:0;
    min-height:158px;
    padding:10px 9px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:10px;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.04),
            rgba(255,255,255,.015)
        );
    transition:
        border-color .15s ease,
        background .15s ease;
}

.ftr-hot-product:hover{
    border-color:rgba(188,105,255,.26);
    background:rgba(255,255,255,.035);
}

.ftr-hot-product__main{
    display:flex;
    flex:1;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:8px;
    min-width:0;
}

.ftr-hot-product__visual{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    aspect-ratio:6 / 5;
}

.ftr-hot-product__main img{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
    filter:drop-shadow(0 7px 13px rgba(0,0,0,.42));
}

.ftr-hot-product__main strong{
    width:100%;
    min-width:0;
    color:#fff;
    font-size:10px;
    line-height:1.22;
    font-weight:850;
    text-align:center;
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    overflow-wrap:anywhere;
}


.ftr-hot-product__qty{
    position:absolute;
    left:50%;
    bottom:6px;
    transform:translateX(-50%);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:28px;
    padding:3px 8px;
    border:1px solid rgba(144,91,230,.28);
    border-radius:8px;
    background:rgba(24,15,45,.88);
    color:#fff;
    font-size:11px;
    line-height:1;
    font-weight:800;
    white-space:nowrap;
    box-shadow:0 4px 10px rgba(129,58,222,.18);
    z-index:2;
}

.ftr-hot-product__qty b{
    color:#fff;
    font-size:11px;
    font-weight:950;
}

/*
|--------------------------------------------------------------------------
| Bottom / Price
|--------------------------------------------------------------------------
*/

.ftr-hot-public__bottom{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:stretch;
    gap:16px;
    margin-top:auto;
    padding-top:16px;
    border-top:1px solid rgba(255,255,255,.07);
}

.ftr-hot-public__price-panel{
    display:grid;
    grid-template-columns:minmax(0,1.2fr) minmax(120px,.8fr);
    align-items:center;
    min-width:0;
    padding:14px;
    border:1px solid rgba(180,73,255,.35);
    border-radius:14px;
    background:linear-gradient(180deg,rgba(18,10,34,.96),rgba(9,7,18,.96));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.03), 0 0 18px rgba(149,54,245,.08);
}

.ftr-hot-public__price{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    min-width:0;
    padding-right:14px;
    border-right:1px solid rgba(255,255,255,.08);
}

.ftr-hot-public__price small,
.ftr-hot-public__store small{
    display:block;
    margin-bottom:4px;
    color:#ad9bb9;
    font-size:8px;
    line-height:1;
    font-weight:900;
    letter-spacing:.11em;
}

.ftr-hot-public__price strong{
    display:block;
    color:var(--ftr-hot-yellow);
    font-size:31px;
    line-height:1;
    font-weight:950;
    letter-spacing:-.035em;
    text-shadow:0 0 15px rgba(255,216,77,.18);
}

.ftr-hot-public__save{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-top:8px;
    padding:6px 9px;
    border:1px solid rgba(66,236,132,.26);
    border-radius:8px;
    background:rgba(40,167,110,.14);
    color:#54ef9f;
    font-size:10px;
    line-height:1;
    font-weight:900;
}

.ftr-hot-public__store{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    min-width:0;
    padding-left:14px;
}

.ftr-hot-public__store s{
    color:#9f93a5;
    font-size:21px;
    line-height:1.05;
    font-weight:800;
    text-decoration-thickness:2px;
}

/*
|--------------------------------------------------------------------------
| Add to Cart
|--------------------------------------------------------------------------
*/

.ftr-hot-button{
    cursor:pointer;
    font-family:inherit;
    transition:
        transform .15s ease,
        background .15s ease,
        border-color .15s ease,
        box-shadow .15s ease;
}

.ftr-hot-button--add{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:10px;
    flex:0 0 auto;
    min-width:165px;
    min-height:56px;
    margin-left:auto;
    padding:0 18px;
    border:1px solid rgba(181,78,255,.70);
    border-radius:14px;
    background:linear-gradient(135deg,#7318d5,#c23ef0) !important;
    color:#fff;
    font-size:14px;
    line-height:1;
    font-weight:900;
    box-shadow:0 0 18px rgba(139,43,240,.24);
}

.ftr-hot-button__icon,
.ftr-hot-button__arrow{
    font-size:20px;
    line-height:1;
}

.ftr-hot-button__label{
    min-width:0;
    text-align:center;
}

.ftr-hot-button--add:hover{
    transform:translateY(-1px);
    border-color:rgba(204,129,255,.90);
    background:linear-gradient(135deg,#8423e6,#d14cff) !important;
    box-shadow:0 0 24px rgba(154,52,255,.38);
}

/*
|--------------------------------------------------------------------------
| Cart
|--------------------------------------------------------------------------
*/

.ftr-hot-cart{
    position:relative;
    max-width:1600px;
    margin:0 auto 20px;
    padding:14px;
    border:1px solid rgba(176,78,255,.28);
    border-radius:12px;
    background:
        linear-gradient(
            145deg,
            rgba(29,13,42,.98),
            rgba(10,6,15,.99)
        );
    box-shadow:0 12px 30px rgba(0,0,0,.25);
}

.ftr-hot-cart__head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding-bottom:10px;
    border-bottom:1px solid var(--ftr-hot-line);
}

.ftr-hot-cart__head>div{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.ftr-hot-cart__head span:first-child{
    color:#c073ff;
    font-size:9px;
    font-weight:900;
    letter-spacing:.12em;
}

.ftr-hot-cart__head strong{
    color:#fff;
    font-size:14px;
}

.ftr-hot-cart__count{
    display:grid;
    width:30px;
    height:30px;
    place-items:center;
    border:1px solid rgba(188,98,255,.42);
    border-radius:999px;
    background:transparent;
    color:#dfaeff !important;
    font-size:11px !important;
    font-weight:900;
}

.ftr-hot-cart__items{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    padding:12px 0;
}

.ftr-hot-cart-item{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:250px;
    padding:7px 8px;
    border:1px solid var(--ftr-hot-line);
    border-radius:8px;
    background:rgba(255,255,255,.02);
}

.ftr-hot-cart-item img{
    width:38px;
    height:46px;
    object-fit:contain;
}

.ftr-hot-cart-item__name{
    min-width:0;
    flex:1;
    color:#fff;
    font-size:10px;
    font-weight:800;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/*
 * Cart quantity controls stay available.
 * Product-card +/- controls were removed.
 */

.ftr-hot-cart-item__qty{
    display:flex;
    align-items:center;
    gap:4px;
}

.ftr-hot-cart-item__qty button{
    display:grid;
    width:25px;
    height:25px;
    padding:0;
    place-items:center;
    border:1px solid rgba(255,255,255,.18);
    border-radius:5px;
    background:transparent !important;
    color:#fff;
    cursor:pointer;
    font-size:12px;
    font-weight:900;
}

.ftr-hot-cart-item__qty button:hover{
    border-color:rgba(192,110,255,.65);
    background:rgba(140,50,220,.08) !important;
}

.ftr-hot-cart-item__qty span{
    min-width:18px;
    text-align:center;
    font-size:10px;
    font-weight:900;
}

.ftr-hot-cart-item__remove{
    color:#ff7f90 !important;
}

.ftr-hot-cart__actions{
    display:flex;
    justify-content:flex-end;
    gap:8px;
}

.ftr-hot-button--ghost,
.ftr-hot-button--primary{
    min-height:36px;
    padding:0 13px;
    border-radius:7px;
    font-size:10px;
    font-weight:900;
}

.ftr-hot-button--ghost{
    border:1px solid rgba(255,255,255,.11);
    background:transparent;
    color:#ccc0d3;
}

.ftr-hot-button--primary{
    border:1px solid rgba(181,77,255,.65);
    background:
        linear-gradient(
            135deg,
            #7218d4,
            #a12ce9
        );
    color:#fff;
}

/*
|--------------------------------------------------------------------------
| Purchase Plan
|--------------------------------------------------------------------------
*/

.ftr-hot-plan{
    max-width:1600px;
    margin:24px auto 0;
}

.ftr-hot-plan__hero{
    padding:18px;
    border:1px solid rgba(169,77,255,.28);
    border-radius:13px;
    background:
        linear-gradient(
            145deg,
            #1e0d2a,
            #0d0713
        );
}

.ftr-hot-plan__head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:15px;
    margin-bottom:15px;
}

.ftr-hot-plan__head small{
    color:#ba6dff;
    font-size:8px;
    font-weight:900;
    letter-spacing:.11em;
}

.ftr-hot-plan__head h2{
    margin:3px 0 0;
    color:#fff;
    font-size:22px;
    line-height:1.15;
}

.ftr-hot-plan__valid{
    padding:5px 8px;
    border:1px solid rgba(65,236,132,.25);
    border-radius:999px;
    color:var(--ftr-hot-green);
    font-size:8px;
    font-weight:900;
}

.ftr-hot-plan__metrics{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px;
}

.ftr-hot-plan__metric{
    padding:11px;
    border:1px solid var(--ftr-hot-line);
    border-radius:9px;
    background:rgba(255,255,255,.025);
}

.ftr-hot-plan__metric span{
    display:block;
    margin-bottom:4px;
    color:#94889d;
    font-size:8px;
    font-weight:900;
}

.ftr-hot-plan__metric strong{
    color:#fff;
    font-size:17px;
}

.ftr-hot-plan__metric.is-good strong{
    color:var(--ftr-hot-green);
}

.ftr-hot-plan__section{
    margin-top:9px;
    padding:12px;
    border:1px solid var(--ftr-hot-line);
    border-radius:9px;
    background:rgba(255,255,255,.02);
}

.ftr-hot-plan__section h3{
    margin:0 0 9px;
    font-size:12px;
}

.ftr-hot-plan__list{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
}

.ftr-hot-plan__item{
    padding:8px;
    border-radius:7px;
    background:rgba(255,255,255,.035);
    color:#d8cfdf;
    font-size:9px;
    line-height:1.4;
}

/*
|--------------------------------------------------------------------------
| Laptop
|--------------------------------------------------------------------------
*/

@media (max-width:1250px){
    .ftr-hot-public__products{
        grid-template-columns:none;
        grid-auto-flow:column;
        grid-auto-columns:minmax(0,1fr);
    }

    .ftr-hot-product__main img{
        width:68px;
        height:77px;
    }
}

/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width:950px){
    .ftr-hot-public__grid{
        grid-template-columns:1fr;
    }

    .ftr-hot-public__products{
        grid-template-columns:none;
        grid-auto-flow:column;
        grid-auto-columns:minmax(0,1fr);
    }

    .ftr-hot-plan__metrics{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .ftr-hot-plan__list{
        grid-template-columns:1fr;
    }
}

/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width:650px){
    .ftr-hot-public{
        padding:20px 10px 32px;
    }

    .ftr-hot-public__grid{
        grid-template-columns:1fr;
        gap:14px;
    }

    .ftr-hot-public__card{
        padding:12px;
        border-radius:22px;
        overflow:hidden;
    }

    .ftr-hot-public__card-top,
    .ftr-hot-public__card > h3[data-ftr-hot-bundle-title]{
        display:none;
    }

    .ftr-hot-public__mobile-hero{
        position:relative;
        display:flex;
        min-height:170px;
        flex-direction:column;
        justify-content:space-between;
        padding:12px;
        border:1px solid rgba(190,96,255,.28);
        border-radius:16px;
        background-color:#0d0715;
        background-position:center;
        background-repeat:no-repeat;
        background-size:100% 100%;
        overflow:hidden;
        box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
    }

    .ftr-hot-public__mobile-hero::before{
        content:"";
        position:absolute;
        inset:0;
        background:linear-gradient(180deg,rgba(7,5,15,.18) 0%,rgba(7,5,15,.24) 32%,rgba(7,5,15,.80) 100%);
    }

    .ftr-hot-public__mobile-hero-top,
    .ftr-hot-public__mobile-title{
        position:relative;
        z-index:1;
    }

    .ftr-hot-public__mobile-hero-top{
        display:flex;
        align-items:flex-start;
        justify-content:space-between;
        gap:10px;
    }

    .ftr-hot-public__mobile-hero .ftr-hot-public__badge{
        min-height:31px;
        padding:0 11px;
        border-color:rgba(226,62,205,.62);
        border-radius:12px;
        background:linear-gradient(180deg,rgba(151,21,119,.30),rgba(83,16,83,.20));
        color:#f9dcff;
        font-size:10px;
        box-shadow:0 0 18px rgba(230,33,206,.14);
    }

    .ftr-hot-public__mobile-hero .ftr-hot-public__discount{
        display:flex;
        min-height:31px;
        align-items:center;
        justify-content:center;
        padding:0 11px;
        border:1px solid rgba(59,223,145,.25);
        border-radius:12px;
        background:linear-gradient(180deg,rgba(16,89,55,.68),rgba(9,53,34,.72));
        color:#42ec84;
        font-size:13px;
        font-weight:950;
    }

    .ftr-hot-public__mobile-title{
        width:82%;
        margin:0;
        color:#fff;
        font-size:16px;
        line-height:1.14;
        font-weight:900;
        letter-spacing:-.03em;
        text-shadow:0 2px 12px rgba(0,0,0,.42);
    }

    .ftr-hot-public__includes{
        display:block;
        margin:12px 0 10px;
        color:#8f67ff;
        font-size:10px;
        line-height:1;
        font-weight:900;
        letter-spacing:.10em;
        text-align:center;
    }

    .ftr-hot-public__products{
        grid-template-columns:none;
        grid-auto-flow:column;
        grid-auto-columns:minmax(0,1fr);
        gap:6px;
        padding:0;
    }

    .ftr-hot-product{
        min-height:0;
        padding:0;
        border:0;
        background:transparent;
    }

    .ftr-hot-product:hover{
        background:transparent;
        border-color:transparent;
    }

    .ftr-hot-product__main{
        gap:6px;
    }

    .ftr-hot-product__visual{
        aspect-ratio:6 / 5;
    }

    .ftr-hot-product__main img{
        width:100%;
        height:100%;
        border:1px solid rgba(177,93,255,.44);
        border-radius:10px;
        background:linear-gradient(180deg,rgba(16,12,36,.92),rgba(8,7,18,.96));
        object-fit:contain;
        object-position:center;
        box-shadow:0 10px 16px rgba(0,0,0,.18);
    }

    .ftr-hot-product__main strong{
        display:block;
        min-height:0;
        font-size:8.5px;
        line-height:1.2;
        font-weight:800;
        text-align:center;
        white-space:normal;
        overflow:visible;
        text-overflow:clip;
        overflow-wrap:anywhere;
    }

    .ftr-hot-product__qty{
        bottom:5px;
        min-width:24px;
        padding:3px 7px;
        border:1px solid rgba(133,91,221,.30);
        border-radius:7px;
        background:rgba(24,15,45,.88);
        color:#e4d4ff;
        font-size:9px;
    }

    .ftr-hot-product__qty b{
        font-size:9px;
        color:#e4d4ff;
    }

    .ftr-hot-public__bottom{
        grid-template-columns:1fr;
        gap:12px;
        margin-top:16px;
        padding-top:0;
        border-top:0;
    }

    .ftr-hot-public__price-panel{
        grid-template-columns:minmax(0,1fr) auto;
        gap:12px;
        padding:14px;
        border-radius:16px;
        border-color:rgba(224,56,201,.36);
        box-shadow:0 0 20px rgba(197,58,255,.10);
    }

    .ftr-hot-public__price{
        padding-right:12px;
    }

    .ftr-hot-public__price strong{
        font-size:26px;
    }

    .ftr-hot-public__save{
        margin-top:9px;
        padding:7px 10px;
        font-size:10px;
    }

    .ftr-hot-public__store{
        align-items:flex-start;
        padding-left:12px;
    }

    .ftr-hot-public__store s{
        font-size:16px;
    }

    .ftr-hot-button--add{
        width:100%;
        min-height:56px;
        margin-left:0;
        padding:0 16px;
        border-radius:16px;
        font-size:14px;
    }

    .ftr-hot-button__icon{
        display:grid;
        width:34px;
        height:34px;
        place-items:center;
        border-radius:10px;
        background:rgba(255,255,255,.12);
        font-size:18px;
    }

    .ftr-hot-cart__items{
        flex-direction:column;
    }

    .ftr-hot-cart-item{
        width:100%;
        min-width:0;
    }

    .ftr-hot-cart__actions{
        display:grid;
        grid-template-columns:1fr 1.4fr;
    }

    .ftr-hot-plan__head{
        flex-direction:column;
    }
}

@media (max-width:430px){
    .ftr-hot-public__mobile-hero{
        min-height:156px;
        padding:10px;
    }

    .ftr-hot-public__mobile-title{
        width:86%;
        font-size:15px;
    }

    .ftr-hot-public__products{
        gap:5px;
    }

    .ftr-hot-product__main strong{
        min-height:0;
        font-size:8px;
        line-height:1.18;
    }

    .ftr-hot-public__price-panel{
        grid-template-columns:1fr;
    }

    .ftr-hot-public__price{
        padding-right:0;
        padding-bottom:12px;
        border-right:0;
        border-bottom:1px solid rgba(255,255,255,.08);
    }

    .ftr-hot-public__store{
        padding-left:0;
    }
}

/*
|--------------------------------------------------------------------------
| HOT BUNDLES — DESKTOP PREMIUM LAYOUT
| Desktop only. Mobile <=650px remains untouched.
|--------------------------------------------------------------------------
*/

@media (min-width:651px){

    .ftr-hot-public__grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:24px;
        max-width:1540px;
    }

    .ftr-hot-public__card{
        padding:8px;
        overflow:hidden;
        border:1px solid rgba(190,72,255,.58);
        border-radius:24px;
        background:
            radial-gradient(circle at 82% 0%,rgba(124,34,255,.12),transparent 30%),
            linear-gradient(145deg,rgba(19,10,31,.99),rgba(7,5,13,.995));
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.035),
            0 0 0 1px rgba(163,56,255,.05),
            0 0 32px rgba(126,38,230,.15),
            0 18px 44px rgba(0,0,0,.32);
    }

    .ftr-hot-public__card-top,
    .ftr-hot-public__card > h3[data-ftr-hot-bundle-title]{
        display:none;
    }

    .ftr-hot-public__mobile-hero{
        position:relative;
        display:flex;
        min-height:240px;
        flex-direction:column;
        justify-content:space-between;
        padding:22px 24px;
        margin:0;
        overflow:hidden;
        border:0;
        border-radius:18px 18px 0 0;
        background-color:#090611;
        background-position:center;
        background-repeat:no-repeat;
        background-size:100% 100%;
        box-shadow:none;
    }

    .ftr-hot-public__mobile-hero::before{
        content:"";
        position:absolute;
        inset:0;
        background:
            linear-gradient(
                90deg,
                rgba(5,4,10,.92) 0%,
                rgba(5,4,10,.72) 30%,
                rgba(5,4,10,.20) 58%,
                rgba(5,4,10,.08) 100%
            ),
            linear-gradient(
                180deg,
                rgba(5,4,10,.06) 52%,
                rgba(5,4,10,.30) 100%
            );
    }

    .ftr-hot-public__mobile-hero-top,
    .ftr-hot-public__mobile-title{
        position:relative;
        z-index:1;
    }

    .ftr-hot-public__mobile-hero-top{
        display:flex;
        align-items:flex-start;
        justify-content:space-between;
        gap:16px;
    }

    .ftr-hot-public__mobile-hero .ftr-hot-public__badge{
        min-height:36px;
        gap:8px;
        padding:0 14px;
        border:1px solid rgba(227,73,211,.58);
        border-radius:14px;
        background:linear-gradient(180deg,rgba(144,20,116,.32),rgba(78,14,80,.23));
        color:#fff;
        font-size:12px;
        letter-spacing:.035em;
        box-shadow:0 0 20px rgba(220,34,205,.12);
    }

    .ftr-hot-public__mobile-hero .ftr-hot-public__badge > span{
        font-size:16px;
    }

    .ftr-hot-public__mobile-hero .ftr-hot-public__discount{
        display:flex;
        min-height:52px;
        align-items:center;
        justify-content:center;
        padding:0 18px;
        border:1px solid rgba(62,232,144,.42);
        border-radius:16px;
        background:linear-gradient(180deg,rgba(18,103,65,.88),rgba(8,49,32,.90));
        color:#45ef92;
        font-size:24px;
        font-weight:950;
        box-shadow:0 0 18px rgba(55,225,139,.10);
    }

    .ftr-hot-public__mobile-title{
        width:70%;
        max-width:360px;
        margin:0;
        color:#fff;
        font-size:clamp(18px,1.55vw,29px);
        line-height:1.18;
        font-weight:900;
        letter-spacing:-.025em;
        text-shadow:0 4px 20px rgba(0,0,0,.48);
    }

    .ftr-hot-public__includes{
        position:relative;
        display:block;
        margin:0;
        padding:14px 18px 16px;
        color:#a677ff;
        font-size:12px;
        line-height:1;
        font-weight:950;
        letter-spacing:.15em;
        text-align:center;
    }

    .ftr-hot-public__includes::before,
    .ftr-hot-public__includes::after{
        content:"";
        display:inline-block;
        width:34px;
        height:1px;
        margin:0 12px 4px;
        background:linear-gradient(90deg,transparent,#9b66ff);
        vertical-align:middle;
    }

    .ftr-hot-public__includes::after{
        background:linear-gradient(90deg,#9b66ff,transparent);
    }

    .ftr-hot-public__products{
        grid-template-columns:none;
        grid-auto-flow:column;
        grid-auto-columns:minmax(0,1fr);
        gap:8px;
        padding:0 14px 16px;
    }

    .ftr-hot-product{
        min-height:0;
        padding:10px 7px 9px;
        border:1px solid rgba(148,120,210,.28);
        border-radius:12px;
        background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.014));
    }

    .ftr-hot-product__main{
        gap:8px;
    }

    .ftr-hot-product__visual{
        aspect-ratio:6 / 5;
    }

    .ftr-hot-product__main img{
        width:100%;
        max-width:none;
        height:100%;
        object-fit:contain;
        filter:drop-shadow(0 10px 16px rgba(0,0,0,.38));
    }

    .ftr-hot-product__main strong{
        width:100%;
        min-height:0;
        display:block;
        overflow:visible;
        color:#fff;
        font-size:11px;
        line-height:1.2;
        font-weight:850;
        text-align:center;
        white-space:normal;
        text-overflow:clip;
        overflow-wrap:anywhere;
    }

    .ftr-hot-product__qty{
        bottom:6px;
        min-width:26px;
        padding:3px 8px;
        border:1px solid rgba(144,91,230,.30);
        border-radius:8px;
        background:rgba(24,15,45,.88);
        color:#fff;
        font-size:10px;
    }

    .ftr-hot-product__qty b{
        color:#fff;
        font-size:10px;
    }

    .ftr-hot-public__bottom{
        display:grid;
        grid-template-columns:minmax(0,1fr) 210px;
        align-items:stretch;
        gap:12px;
        margin:0;
        padding:2px 16px 16px;
        border-top:0;
    }

    .ftr-hot-public__price-panel{
        display:grid;
        grid-template-columns:minmax(0,1.18fr) minmax(120px,.82fr);
        align-items:center;
        min-width:0;
        min-height:120px;
        padding:16px 18px;
        border:1px solid rgba(203,60,224,.43);
        border-radius:16px;
        background:radial-gradient(circle at 85% 30%,rgba(95,43,163,.08),transparent 38%),linear-gradient(180deg,rgba(17,11,31,.98),rgba(8,7,16,.98));
        box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 0 18px rgba(180,45,217,.07);
    }

    .ftr-hot-public__price{
        padding-right:16px;
        border-right:1px solid rgba(255,255,255,.10);
    }

    .ftr-hot-public__price small,
    .ftr-hot-public__store small{
        margin-bottom:8px;
        color:#a68cbf;
        font-size:8px;
        letter-spacing:.13em;
    }

    .ftr-hot-public__price strong{
        color:#fff;
        font-size:clamp(28px,2.25vw,44px);
        line-height:1.02;
        letter-spacing:-.04em;
        text-shadow:none;
    }

    .ftr-hot-public__save{
        margin-top:12px;
        padding:7px 10px;
        border:1px solid rgba(58,236,143,.36);
        border-radius:8px;
        background:rgba(24,118,76,.13);
        color:#49ec94;
        font-size:10px;
    }

    .ftr-hot-public__store{
        padding-left:16px;
    }

    .ftr-hot-public__store s{
        color:#80778c;
        font-size:18px;
        line-height:1.1;
        text-decoration-thickness:2px;
    }

    .ftr-hot-button--add{
        width:100%;
        min-width:0;
        min-height:120px;
        margin-left:0;
        grid-template-columns:auto minmax(0,1fr) auto;
        gap:12px;
        padding:0 20px;
        border:1px solid rgba(224,111,255,.88);
        border-radius:16px;
        background:linear-gradient(135deg,#7629e8,#be2fe9) !important;
        color:#fff;
        font-size:18px;
        box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 0 24px rgba(180,45,255,.28);
    }

    .ftr-hot-button__icon{
        display:grid;
        width:34px;
        height:34px;
        place-items:center;
        border-radius:10px;
        background:rgba(255,255,255,.10);
        font-size:16px;
    }

    .ftr-hot-button__arrow{
        font-size:24px;
    }

    .ftr-hot-button--add:hover{
        transform:translateY(-2px);
        box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 0 32px rgba(190,56,255,.38);
    }
}


/* ==========================================================
   HOT BUNDLES — PRODUCT THUMBNAILS FULL BLEED (1200x1000)
   ========================================================== */
.ftr-hot-product__visual{
    overflow:hidden !important;
    border-radius:10px !important;
}

.ftr-hot-product__main img{
    display:block !important;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:cover !important;
    object-position:center !important;
}


/* ==========================================================
   HOT BUNDLES — MOVE QTY BELOW IMAGE, TITLE BELOW QTY
   ========================================================== */
.ftr-hot-product__visual{
    position:relative !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    width:100% !important;
    aspect-ratio:auto !important;
    gap:8px !important;
}

.ftr-hot-product__main img{
    order:1 !important;
    width:100% !important;
    height:auto !important;
    aspect-ratio:1200 / 1000 !important;
}

.ftr-hot-product__qty{
    order:2 !important;
    position:static !important;
    left:auto !important;
    bottom:auto !important;
    transform:none !important;
    margin-top:0 !important;
}

.ftr-hot-product__main strong{
    order:3 !important;
}

/* ==========================================================
   HOT BUNDLES — FAVORITES
   ========================================================== */

.ftr-hot-favorite.is-favorite{
    color:#d66cff;
    border-color:rgba(205,112,255,.72);
    background:rgba(151,48,229,.17);
    box-shadow:
        0 0 0 1px rgba(190,91,255,.05),
        0 0 18px rgba(170,60,245,.18);
}

.ftr-hot-favorite.is-favorite svg{
    fill:currentColor;
    stroke:currentColor;
}

.ftr-hot-favorite:disabled{
    opacity:.58;
    cursor:wait;
}

.ftr-hot-public__mobile-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
}


@media (max-width:650px){

    .ftr-hot-public__mobile-actions{
        position:relative;
        z-index:2;
        flex:0 0 auto;
        gap:8px;
    }

    .ftr-hot-public__mobile-hero .ftr-hot-favorite--mobile{
        display:grid;
        width:52px;
        height:52px;
        flex:0 0 52px;
        place-items:center;
        padding:0;
        border:1px solid rgba(205,116,255,.48);
        border-radius:16px;
        background:rgba(21,11,31,.78);
        color:#e0c8ed;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.04),
            0 8px 24px rgba(0,0,0,.24);
        backdrop-filter:blur(6px);
        -webkit-backdrop-filter:blur(6px);
    }

    .ftr-hot-public__mobile-hero .ftr-hot-favorite--mobile svg{
        width:22px;
        height:22px;
    }

    .ftr-hot-public__mobile-hero .ftr-hot-favorite--mobile.is-favorite{
        color:#e27aff;
        border-color:rgba(219,118,255,.78);
        background:rgba(126,29,194,.32);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.06),
            0 0 20px rgba(183,66,255,.22);
    }

}

/*
|--------------------------------------------------------------------------
| REGIONAL FALLBACK — NO HOT BUNDLES FOR CURRENT SETUP
|--------------------------------------------------------------------------
*/

.ftr-hot-fallback{
    max-width:1600px;
    margin:0 auto 26px;
    padding:22px;
    border:1px solid rgba(177,76,255,.28);
    border-radius:18px;
    background:
        radial-gradient(circle at 0% 0%,rgba(142,48,232,.13),transparent 31%),
        linear-gradient(145deg,rgba(29,13,42,.92),rgba(11,7,17,.96));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 18px 42px rgba(0,0,0,.16);
}

.ftr-hot-fallback__intro{
    max-width:900px;
}

.ftr-hot-fallback__eyebrow,
.ftr-hot-fallback-products__head > div > span,
.ftr-hot-fallback-bundles-intro > span{
    display:block;
    color:var(--ftr-hot-yellow);
    font-size:8px;
    line-height:1;
    font-weight:950;
    letter-spacing:.13em;
}

.ftr-hot-fallback__intro h3,
.ftr-hot-fallback-bundles-intro h3{
    margin:7px 0 0;
    color:#fff;
    font-size:22px;
    line-height:1.15;
    font-weight:950;
    letter-spacing:-.025em;
}

.ftr-hot-fallback__intro p,
.ftr-hot-fallback-bundles-intro p{
    margin:8px 0 0;
    color:#a99eaf;
    font-size:11px;
    line-height:1.55;
}

.ftr-hot-fallback__intro em,
.ftr-hot-fallback-bundles-intro em{
    color:#bfb2c7;
}


/*
|--------------------------------------------------------------------------
| REGIONAL PRODUCT STRIP — MAX 4
|--------------------------------------------------------------------------
*/

.ftr-hot-fallback-products{
    margin-top:20px;
    padding:16px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:15px;
    background:rgba(7,5,11,.46);
}

.ftr-hot-fallback-products__head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:16px;
    margin-bottom:13px;
}

.ftr-hot-fallback-products__head h4{
    margin:5px 0 0;
    color:#fff;
    font-size:16px;
    line-height:1.15;
    font-weight:900;
}

.ftr-hot-fallback-products__browse{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:34px;
    padding:0 11px;
    border:1px solid rgba(255,216,77,.38);
    border-radius:9px;
    background:rgba(255,216,77,.06);
    color:#ffe683 !important;
    text-decoration:none !important;
    font-size:9px;
    font-weight:900;
    white-space:nowrap;
}

.ftr-hot-fallback-products__browse:hover{
    background:rgba(255,216,77,.10);
    transform:translateY(-1px);
}

.ftr-hot-fallback-products__grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
    align-items:stretch;
}

.ftr-hot-fallback-product{
    min-width:0;
    display:flex;
    height:100%;
    flex-direction:column;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.09);
    border-radius:12px;
    background:
        linear-gradient(180deg,rgba(38,17,51,.96),rgba(18,9,27,.98));
}

.ftr-hot-fallback-product__visual{
    position:relative;
    display:block;
    width:100%;
    aspect-ratio:6 / 5;
    overflow:hidden;
    border-bottom:1px solid rgba(255,255,255,.07);
    background:#0d0712;
}

.ftr-hot-fallback-product__visual img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
}

.ftr-hot-fallback-product__placeholder{
    width:100%;
    height:100%;
    display:grid;
    place-items:center;
    color:#cda5ec;
    font-size:16px;
    font-weight:950;
}

.ftr-hot-fallback-product__body{
    flex:1;
    display:flex;
    min-width:0;
    flex-direction:column;
    padding:11px;
}

.ftr-hot-fallback-product__type{
    color:#bc77ed;
    font-size:7px;
    line-height:1;
    font-weight:950;
    letter-spacing:.11em;
}

.ftr-hot-fallback-product__name{
    min-height:32px;
    display:-webkit-box;
    margin-top:6px;
    overflow:hidden;
    color:#fff;
    font-size:12px;
    line-height:1.28;
    font-weight:900;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}

.ftr-hot-fallback-product__context{
    display:block;
    margin-top:5px;
    color:#8f8497;
    font-size:8px;
    line-height:1.3;
}

.ftr-hot-fallback-product__prices{
    display:grid;
    gap:4px;
    margin-top:auto;
    padding-top:11px;
}

.ftr-hot-fallback-product__prices > strong{
    color:#fff;
    font-size:17px;
    line-height:1;
    font-weight:950;
    letter-spacing:-.03em;
}

.ftr-hot-fallback-product__save{
    color:var(--ftr-hot-green);
    font-size:8px;
    line-height:1.2;
    font-weight:900;
}

.ftr-hot-fallback-product__prices s{
    color:#756b7c;
    font-size:8px;
    line-height:1.1;
}

.ftr-hot-fallback-product__cta{
    min-height:36px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin-top:10px;
    padding:0 10px;
    border-radius:9px;
    background:linear-gradient(135deg,#ffd84d,#ffe77c);
    color:#160d1d !important;
    text-decoration:none !important;
    font-size:9px;
    font-weight:950;
}

.ftr-hot-fallback-product__cta:hover{
    filter:brightness(1.04);
}

.ftr-hot-fallback-products__status{
    margin:10px 0 0;
    color:#83788b;
    font-size:8px;
    line-height:1.4;
    font-style:italic;
}

.ftr-hot-fallback-products__empty{
    grid-column:1 / -1;
    padding:24px 14px;
    border:1px dashed rgba(255,255,255,.10);
    border-radius:11px;
    color:#998fa0;
    text-align:center;
    font-size:10px;
}

.ftr-hot-fallback-product-skeleton{
    min-height:250px;
    border:1px solid rgba(255,255,255,.07);
    border-radius:12px;
    background:
        linear-gradient(
            100deg,
            rgba(255,255,255,.025) 25%,
            rgba(255,255,255,.065) 42%,
            rgba(255,255,255,.025) 60%
        ),
        #12091b;
    background-size:220% 100%;
    animation:ftr-hot-fallback-pulse 1.25s linear infinite;
}

@keyframes ftr-hot-fallback-pulse{
    to{
        background-position:-120% 0;
    }
}


/*
|--------------------------------------------------------------------------
| FALLBACK HOT BUNDLES INTRO
|--------------------------------------------------------------------------
*/

.ftr-hot-fallback-bundles-intro{
    max-width:1600px;
    margin:0 auto 16px;
    padding:17px 18px;
    border-left:3px solid rgba(255,216,77,.72);
    border-radius:0 12px 12px 0;
    background:rgba(255,216,77,.035);
}

.ftr-hot-fallback-bundles-intro h3{
    font-size:18px;
}

.ftr-hot-fallback-bundles-intro p{
    max-width:920px;
}


/*
|--------------------------------------------------------------------------
| RESPONSIVE FALLBACK
|--------------------------------------------------------------------------
*/

@media (max-width:760px){

    .ftr-hot-fallback{
        padding:15px;
        border-radius:15px;
    }

    .ftr-hot-fallback__intro h3{
        font-size:18px;
    }

    .ftr-hot-fallback-products{
        padding:12px;
    }

    .ftr-hot-fallback-products__head{
        align-items:flex-start;
        flex-direction:column;
        gap:10px;
    }

    .ftr-hot-fallback-products__browse{
        min-height:32px;
    }

    .ftr-hot-fallback-products__grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px;
    }

    .ftr-hot-fallback-product__name{
        min-height:30px;
        font-size:11px;
    }

    .ftr-hot-fallback-product__prices > strong{
        font-size:15px;
    }

    .ftr-hot-fallback-product-skeleton{
        min-height:230px;
    }

    .ftr-hot-fallback-bundles-intro{
        margin-bottom:13px;
        padding:14px;
    }

    .ftr-hot-fallback-bundles-intro h3{
        font-size:16px;
    }

}

/*
|--------------------------------------------------------------------------
| FALLBACK PRODUCT META — FLAG + PLATFORM DOT
|--------------------------------------------------------------------------
*/

.ftr-hot-fallback-product__context{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:5px;
}

.ftr-hot-fallback-product__country,
.ftr-hot-fallback-product__platform{
    display:inline-flex;
    align-items:center;
    gap:5px;
    min-width:0;
}

.ftr-hot-fallback-product__flag{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:10px;
    line-height:1;
}

.ftr-hot-fallback-product__separator{
    color:#72677a;
    line-height:1;
}

.ftr-hot-fallback-product__platform-dot{
    width:7px;
    height:7px;
    flex:0 0 7px;
    border-radius:999px;
    background:#2f8cff;
    box-shadow:0 0 0 1px rgba(255,255,255,.08);
}

.ftr-hot-fallback-product__platform.is-playstation .ftr-hot-fallback-product__platform-dot{
    background:#2f8cff;
}

.ftr-hot-fallback-product__platform.is-xbox .ftr-hot-fallback-product__platform-dot{
    background:#4fd36f;
}

.ftr-hot-fallback-product__platform.is-pc .ftr-hot-fallback-product__platform-dot{
    background:#ff9a3d;
}


/* ==========================================================
   HOT BUNDLES — ONE PRODUCT ROW / SAME CARD SIZE ACROSS A ROW
   Desktop only:
   - 1/2/3/4/5 products use the SAME product-card width.
   - Smaller groups are centered.
   - 6+ products shrink only when needed so all stay on one row.
   ========================================================== */
@media (min-width:651px){
    .ftr-hot-public__products{
        display:flex !important;
        flex-wrap:nowrap !important;
        align-items:stretch !important;
        justify-content:center !important;
        gap:8px !important;
        overflow:visible !important;
        --ftr-hot-product-row-gap:8px;
        --ftr-hot-product-card-width:calc((100% - (4 * var(--ftr-hot-product-row-gap))) / 5);
    }

    .ftr-hot-public__products > .ftr-hot-product{
        flex:0 0 var(--ftr-hot-product-card-width) !important;
        width:var(--ftr-hot-product-card-width) !important;
        max-width:var(--ftr-hot-product-card-width) !important;
        min-width:0 !important;
        grid-column:auto !important;
    }

    .ftr-hot-public__products:has(> .ftr-hot-product:nth-child(6)) > .ftr-hot-product{
        flex:1 1 0 !important;
        width:auto !important;
        max-width:none !important;
    }
}