/* ==========================================================================
01. PAGE BASE
========================================================================== */

.mfnxt-baskets-overview{
    width:100%;
    overflow-x:hidden;
    background:var(--c-white);
    color:var(--c-ink);
    font-family:var(--third-font);
}

.mfnxt-baskets-overview *,
.mfnxt-baskets-overview *::before,
.mfnxt-baskets-overview *::after{
    box-sizing:border-box;
}

.mfnxt-baskets-overview h1,
.mfnxt-baskets-overview h2,
.mfnxt-baskets-overview p{
    margin-top:0;
    font-family:var(--third-font);
}

.mfnxt-baskets-overview a{
    text-decoration:none;
}


/* ==========================================================================
02. BREADCRUMB
========================================================================== */

.mfnxt-baskets-overview .mfnxt-baskets-ov-breadcrumb{
    padding:32px 0 0;
    background:#fff;
    margin-bottom: 20px;
}

.mfnxt-baskets-overview .mfnxt-baskets-ov-breadcrumb ol{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    margin:0;
    padding:0;
    list-style:none;
    color:var(--c-muted);
    font-size:13px;
    line-height:1.4;
}

.mfnxt-baskets-overview .mfnxt-baskets-ov-breadcrumb li:not(:last-child)::after{
    content:"/";
    margin-left:8px;
    color:#94A3B8;
}

.mfnxt-baskets-overview .mfnxt-baskets-ov-breadcrumb a{
    color:var(--c-muted);
}

.mfnxt-baskets-overview .mfnxt-baskets-ov-breadcrumb a:hover,
.mfnxt-baskets-overview .mfnxt-baskets-ov-breadcrumb a:focus-visible{
    color:var(--primary-color);
    outline:none;
}

.mfnxt-baskets-overview .mfnxt-baskets-ov-breadcrumb li[aria-current="page"]{
    color:var(--c-ink);
    font-weight:600;
}


/* ==========================================================================
03. HERO
========================================================================== */

.mfnxt-baskets-overview .mfnxt-baskets-ov-hero{
    position:relative;
    width:100%;
    padding:28px 0 36px;
    overflow:hidden;
    isolation:isolate;
    background:#fff;
}

.mfnxt-baskets-overview .mfnxt-baskets-ov-hero::before{
    content:"";
    position:absolute;
    width:650px;
    height:650px;
    top:-230px;
    left:-260px;
    border-radius:50%;
    background:rgba(227,6,19,.075);
    filter:blur(120px);
    pointer-events:none;
    z-index:-2;
}

.mfnxt-baskets-overview .mfnxt-baskets-ov-hero::after{
    content:"";
    position:absolute;
    width:700px;
    height:700px;
    top:-220px;
    right:-300px;
    border-radius:50%;
    background:rgba(0,92,200,.10);
    filter:blur(120px);
    pointer-events:none;
    z-index:-2;
}

.mfnxt-baskets-overview .mfnxt-baskets-ov-hero-inner{
    position:relative;
    z-index:2;
    width:100%;
    max-width:850px;
    margin-inline:auto;
    text-align:center;
}

.mfnxt-baskets-overview .mfnxt-baskets-ov-eyebrow{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-bottom:20px;
    color:var(--secondary-color);
    font-size:11px;
    font-weight:700;
    letter-spacing:.10em;
    line-height:1.3;
    text-transform:uppercase;
}

.mfnxt-baskets-overview .mfnxt-baskets-ov-eyebrow::before{
    content:"";
    width:24px;
    height:2px;
    border-radius:var(--radius-pill);
    background:var(--secondary-color);
}

.mfnxt-baskets-overview .mfnxt-baskets-ov-title{
    margin:0 0 24px;
    color:var(--c-ink);
    font-size:clamp(32px,5.1vw,55px);
    font-weight:600;
    line-height:.98;
    letter-spacing:-2px;
}

.mfnxt-baskets-overview .mfnxt-baskets-ov-intro{
    max-width:760px;
    margin:0 auto 22px;
    color:var(--c-slate);
    font-size:clamp(15px,1.2vw,17px);
    font-weight:400;
    line-height:1.7;
}

.mfnxt-baskets-overview .mfnxt-baskets-ov-identity{
    display:inline-flex;
    flex-direction:column;
    gap:4px;
    margin-top:8px;
    padding:12px 18px;
    border:1px solid rgba(0,92,200,.12);
    border-radius:var(--radius-md);
    background:rgba(255,255,255,.84);
    box-shadow:var(--shadow-sm);
    color:var(--c-ink);
    font-size:13px;
    font-weight:600;
    line-height:1.5;
}

.mfnxt-baskets-overview .mfnxt-baskets-ov-identity span:last-child{
    color:var(--c-muted);
    font-size:12px;
    font-weight:500;
}


/* ==========================================================================
04. GRID ADJUSTMENT
========================================================================== */

.mfnxt-baskets-overview .mfnxt-baskets-ov-grid{
    padding:12px 0 40px;
}

.mfnxt-baskets-overview .mfnxt-basket-card h2{
    margin:0 0 10px;
    color:var(--c-ink);
    font-family:var(--primary-font);
    font-size:22px;
    font-weight:700;
    line-height:1.2;
}

.mfnxt-baskets-overview .mfnxt-baskets-ov-empty{
    margin:0;
    color:var(--c-muted);
    font-size:15px;
    line-height:1.6;
}


/* ==========================================================================
05. HOW IT WORKS
========================================================================== */

.mfnxt-baskets-overview .mfnxt-baskets-ov-how{
    padding:20px 0 40px;
    background:var(--c-cream);
}

.mfnxt-baskets-overview .mfnxt-baskets-ov-how-inner{
    max-width:820px;
    margin-inline:auto;
    padding:32px 28px;
    border:1px solid var(--c-line);
    border-radius:20px;
    background:#fff;
    box-shadow:var(--shadow-sm);
    text-align:center;
}

.mfnxt-baskets-overview .mfnxt-baskets-ov-how h2{
    margin:0 0 16px;
    color:var(--c-ink);
    font-size:clamp(24px,3vw,34px);
    font-weight:600;
    letter-spacing:-.8px;
    line-height:1.15;
}

.mfnxt-baskets-overview .mfnxt-baskets-ov-how p{
    margin:0 0 14px;
    color:var(--c-slate);
    font-size:clamp(15px,1.1vw,16px);
    line-height:1.7;
}

.mfnxt-baskets-overview .mfnxt-baskets-ov-how p:last-of-type{
    margin-bottom:22px;
}

.mfnxt-baskets-overview .mfnxt-baskets-ov-links{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:12px;
}

.mfnxt-baskets-overview .mfnxt-baskets-ov-links a{
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:44px;
    padding:0 16px;
    border:1px solid var(--c-line);
    border-radius:12px;
    background:#fff;
    color:var(--primary-color);
    font-size:14px;
    font-weight:600;
}

.mfnxt-baskets-overview .mfnxt-baskets-ov-links a:hover,
.mfnxt-baskets-overview .mfnxt-baskets-ov-links a:focus-visible{
    border-color:rgba(0,92,200,.35);
    outline:none;
}


/* ==========================================================================
06. DISCLAIMER
========================================================================== */

.mfnxt-baskets-overview .mfnxt-baskets-ov-disclaimer{
    padding:8px 0 110px;
    background:var(--c-cream);
}

.mfnxt-baskets-overview .mfnxt-baskets-ov-disclaimer p{
    max-width:920px;
    margin:0 auto 10px;
    color:#7A8798;
    font-size:clamp(12px,.75vw,14px);
    line-height:1.7;
}

.mfnxt-baskets-overview .mfnxt-baskets-ov-disclaimer p:last-child{
    margin-bottom:0;
}

.mfnxt-baskets-overview .mfnxt-baskets-ov-disclaimer strong{
    color:var(--c-ink);
    font-weight:700;
}


/* ==========================================================================
07. RESPONSIVE
========================================================================== */

@media (max-width:991px){
    .mfnxt-baskets-overview .mfnxt-baskets-ov-breadcrumb{
        padding-top:34px;
    }

    .mfnxt-baskets-overview .mfnxt-baskets-ov-title{
        letter-spacing:-1.5px;
    }
}

@media (max-width:575px){
    .mfnxt-baskets-overview .mfnxt-baskets-ov-hero{
        padding:18px 0 24px;
    }

    .mfnxt-baskets-overview .mfnxt-baskets-ov-title{
        font-size:clamp(28px,11vw,38px);
        letter-spacing:-1.5px;
    }

    .mfnxt-baskets-overview .mfnxt-baskets-ov-intro{
        font-size:14px;
    }

    .mfnxt-baskets-overview .mfnxt-baskets-ov-how-inner{
        padding:22px 16px;
    }

    .mfnxt-baskets-overview .mfnxt-baskets-ov-disclaimer{
        padding-bottom:80px;
    }
}