/*==================================================
  MARKETPLACE CATALOG
==================================================*/

.marketplace-catalog{

    position:relative;

    padding:130px 0 120px;

    overflow:hidden;

    isolation:isolate;

}


/*==================================================
  CONTAINER
==================================================*/

.marketplace-catalog-container{

    position:relative;

    width:100%;

    max-width:var(--container-width);

    margin:0 auto;

    padding:0 30px;

    z-index:2;

}


/*==================================================
  HEADER
==================================================*/

.marketplace-catalog-header{

    max-width:780px;

    margin:0 auto 65px;

    text-align:center;

}


.marketplace-catalog-title{

    margin:25px 0 20px;

    font-family:var(--heading-font);

    font-size:clamp(
        2.5rem,
        5vw,
        4.5rem
    );

    line-height:1.05;

    letter-spacing:-2px;

    font-weight:var(--fw-black);

}


.marketplace-catalog-intro{

    max-width:680px;

    margin:0 auto;

    color:var(--text-muted);

    font-size:1rem;

    line-height:1.85;

}


/*==================================================
  CATEGORY NAVIGATION
==================================================*/

.marketplace-category-nav{

    position:relative;

    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:8px;

    max-width:1000px;

    margin:0 auto 55px;

    padding:8px;

    border:1px solid var(--border-primary);

    border-radius:18px;

    background:var(--glass);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    box-shadow:
        0 15px 50px rgba(0,0,0,.18);

}


.marketplace-category-btn{

    position:relative;

    min-height:62px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:0 18px;

    border:1px solid transparent;

    border-radius:12px;

    background:transparent;

    color:var(--text-muted);

    font-family:var(--body-font);

    font-size:.65rem;

    font-weight:var(--fw-bold);

    letter-spacing:1.3px;

    cursor:pointer;

    transition:
        color .35s ease,
        background .35s ease,
        border-color .35s ease,
        box-shadow .35s ease,
        transform .35s ease;

}


.marketplace-category-btn i{

    color:var(--primary);

    font-size:.9rem;

    transition:
        transform .35s ease,
        filter .35s ease;

}


.marketplace-category-btn:hover{

    color:var(--text-light);

    border-color:var(--border-primary);

    background:var(--glass);

    transform:translateY(-2px);

}


.marketplace-category-btn:hover i{

    transform:scale(1.12);

    filter:
        drop-shadow(
            0 0 7px var(--primary)
        );

}


.marketplace-category-btn.active{

    color:var(--primary-light);

    border-color:var(--border-primary);

    background:
        linear-gradient(
            135deg,
            var(--glass-strong),
            var(--glass)
        );

    box-shadow:
        inset 0 0 20px var(--glass),
        0 0 22px var(--glass);

}


.marketplace-category-btn.active::after{

    content:"";

    position:absolute;

    left:20%;

    right:20%;

    bottom:0;

    height:2px;

    background:var(--primary);

    box-shadow:
        0 0 8px var(--primary),
        0 0 18px var(--primary);

}


.marketplace-category-btn.active i{

    color:var(--primary-light);

    filter:
        drop-shadow(
            0 0 8px var(--primary)
        );

}


/*==================================================
  CATEGORY CONTENT
==================================================*/

.marketplace-category-content{

    position:relative;

    min-height:400px;

}


.marketplace-category-panel{

    position:relative;

    animation:
        marketplacePanelIn
        .55s
        cubic-bezier(.16,1,.3,1);

}


/*==================================================
  HIDDEN CATEGORY PANELS
==================================================*/

.marketplace-category-panel[hidden]{

    display:none !important;

}


@keyframes marketplacePanelIn{

    from{

        opacity:0;

        transform:
            translateY(18px)
            scale(.985);

    }

    to{

        opacity:1;

        transform:
            translateY(0)
            scale(1);

    }

}


/*==================================================
  PANEL HEADER
==================================================*/

.marketplace-panel-header{

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:30px;

    margin-bottom:30px;

    padding-bottom:20px;

    border-bottom:1px solid var(--border);

}


.marketplace-panel-label{

    display:block;

    margin-bottom:10px;

    color:var(--primary);

    font-size:.58rem;

    font-weight:var(--fw-bold);

    letter-spacing:2px;

}


.marketplace-panel-header h3{

    margin:0;

    color:var(--text-light);

    font-family:var(--heading-font);

    font-size:clamp(
        1.5rem,
        3vw,
        2.2rem
    );

    line-height:1.15;

}


.marketplace-panel-count{

    color:var(--primary-light);

    font-size:.55rem;

    font-weight:var(--fw-bold);

    letter-spacing:2px;

    white-space:nowrap;

}


/*==================================================
  PRODUCT GRID
==================================================*/

.marketplace-product-grid{

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:22px;

}


/*==================================================
  PRODUCT CARD
==================================================*/

.marketplace-product-card{

    position:relative;

    min-height:430px;

    display:flex;

    flex-direction:column;

    overflow:hidden;

    border:1px solid var(--border);

    background:
        linear-gradient(
            145deg,
            var(--glass-strong),
            var(--glass)
        );

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    transition:
        transform .45s cubic-bezier(.16,1,.3,1),
        border-color .4s ease,
        box-shadow .45s ease;

}


.marketplace-product-card::before{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    top:-110px;

    right:-80px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            var(--primary),
            transparent 70%
        );

    opacity:.07;

    pointer-events:none;

    transition:
        opacity .45s ease,
        transform .45s ease;

}


.marketplace-product-card:hover{

    transform:translateY(-10px);

    border-color:var(--border-primary);

    box-shadow:
        0 25px 70px rgba(0,0,0,.25),
        0 0 30px var(--glass);

}


.marketplace-product-card:hover::before{

    opacity:.16;

    transform:scale(1.35);

}


/*==================================================
  PRODUCT VISUAL
==================================================*/

.marketplace-product-visual{

    position:relative;

    height:210px;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    border-bottom:1px solid var(--border);

    background:
        radial-gradient(
            circle at center,
            var(--glass-strong),
            var(--glass) 48%,
            transparent 85%
        );

}


/*==================================================
  COURSE IMAGE
==================================================*/

.marketplace-product-visual img{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    display:block;

    opacity:.88;

    filter:
        saturate(.9)
        contrast(1.05);

    transform:scale(1.015);

    transition:
        transform .7s cubic-bezier(.16,1,.3,1),
        opacity .5s ease,
        filter .5s ease;

}


/*==================================================
  IMAGE CINEMATIC OVERLAY
==================================================*/

.marketplace-image-overlay{

    position:absolute;

    inset:0;

    z-index:1;

    background:

        linear-gradient(
            180deg,
            rgba(0,0,0,.08),
            transparent 35%,
            rgba(0,0,0,.72)
        ),

        linear-gradient(
            90deg,
            var(--glass-strong),
            transparent 28%,
            transparent 72%,
            var(--glass-strong)
        );

    pointer-events:none;

}


/*==================================================
  IMAGE GRID
==================================================*/

.marketplace-product-visual::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:2;

    background-image:
        linear-gradient(
            var(--border) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            var(--border) 1px,
            transparent 1px
        );

    background-size:
        28px 28px;

    opacity:.16;

    mask-image:
        radial-gradient(
            circle,
            black,
            transparent 78%
        );

    pointer-events:none;

}


/*==================================================
  IMAGE FRAME
==================================================*/

.marketplace-image-frame{

    position:absolute;

    inset:14px;

    z-index:3;

    border:1px solid var(--border-primary);

    pointer-events:none;

    opacity:.65;

}


.marketplace-image-frame::before,
.marketplace-image-frame::after{

    content:"";

    position:absolute;

    width:18px;

    height:18px;

    border-color:var(--primary);

    border-style:solid;

}


.marketplace-image-frame::before{

    top:-1px;

    left:-1px;

    border-width:2px 0 0 2px;

}


.marketplace-image-frame::after{

    right:-1px;

    bottom:-1px;

    border-width:0 2px 2px 0;

}


/*==================================================
  IMAGE TYPE HUD
==================================================*/

.marketplace-image-type{

    position:absolute;

    left:22px;

    bottom:20px;

    z-index:4;

    display:flex;

    align-items:center;

    gap:8px;

    padding:7px 11px;

    border-left:2px solid var(--primary);

    background:var(--glass-strong);

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

    color:var(--primary-light);

    font-size:.5rem;

    font-weight:var(--fw-bold);

    letter-spacing:1.5px;

    box-shadow:
        0 0 18px var(--glass);

}


.marketplace-image-type i{

    color:var(--primary);

    filter:
        drop-shadow(
            0 0 6px var(--primary)
        );

}


/*==================================================
  PRODUCT INDEX
==================================================*/

.marketplace-product-index{

    position:absolute;

    top:18px;

    right:20px;

    z-index:4;

    color:var(--text-light);

    font-family:var(--heading-font);

    font-size:1.8rem;

    font-weight:var(--fw-black);

    text-shadow:
        0 0 12px var(--body);

}


/*==================================================
  IMAGE HOVER
==================================================*/

.marketplace-product-card:hover
.marketplace-product-visual img{

    transform:scale(1.07);

    opacity:1;

    filter:
        saturate(1.05)
        contrast(1.08);

}


.marketplace-product-card:hover
.marketplace-image-frame{

    opacity:1;

    box-shadow:
        inset 0 0 20px var(--glass);

}


.marketplace-product-card:hover
.marketplace-image-type{

    box-shadow:
        0 0 22px var(--glass),
        var(--glow-primary);

}


/*==================================================
  NON-IMAGE VISUALS
==================================================*/

.marketplace-product-visual > i{

    position:relative;

    z-index:2;

    width:82px;

    height:82px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid var(--border-primary);

    border-radius:22px;

    background:var(--glass);

    color:var(--primary-light);

    font-size:1.8rem;

    box-shadow:
        0 0 25px var(--glass),
        inset 0 0 20px var(--glass);

    filter:
        drop-shadow(
            0 0 10px var(--primary)
        );

    transition:
        transform .45s ease,
        box-shadow .45s ease;

}


.marketplace-product-card:hover
.marketplace-product-visual > i{

    transform:
        translateY(-5px)
        scale(1.06);

    box-shadow:
        0 0 35px var(--glass-strong),
        inset 0 0 25px var(--glass);

}


/*==================================================
  PRODUCT CONTENT
==================================================*/

.marketplace-product-content{

    position:relative;

    z-index:2;

    flex:1;

    display:flex;

    flex-direction:column;

    padding:26px;

}


.marketplace-product-category{

    margin-bottom:10px;

    color:var(--primary);

    font-size:.55rem;

    font-weight:var(--fw-bold);

    letter-spacing:1.8px;

}


.marketplace-product-content h4{

    margin:0 0 12px;

    color:var(--text-light);

    font-family:var(--heading-font);

    font-size:1.3rem;

    line-height:1.2;

}


.marketplace-product-content p{

    margin:0;

    color:var(--text-muted);

    font-size:.82rem;

    line-height:1.75;

}


/*==================================================
  PRODUCT FOOTER
==================================================*/

.marketplace-product-footer{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

    margin-top:auto;

    padding-top:25px;

}


.marketplace-product-footer strong{

    color:var(--primary-light);

    font-family:var(--heading-font);

    font-size:.9rem;

    letter-spacing:.5px;

    text-shadow:
        0 0 8px var(--primary);

}


/*==================================================
  PRODUCT BUTTON
==================================================*/

.marketplace-product-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:9px;

    min-height:42px;

    padding:0 16px;

    border:1px solid var(--border-primary);

    border-radius:10px;

    background:var(--glass);

    color:var(--primary-light);

    font-size:.58rem;

    font-weight:var(--fw-bold);

    letter-spacing:1px;

    transition:
        background .35s ease,
        color .35s ease,
        transform .35s ease,
        box-shadow .35s ease;

}


.marketplace-product-btn i{

    transition:
        transform .35s ease;

}


.marketplace-product-btn:hover{

    background:var(--primary);

    color:var(--body);

    transform:translateY(-3px);

    box-shadow:
        0 10px 25px var(--glass),
        var(--glow-primary);

}


.marketplace-product-btn:hover i{

    transform:translateX(4px);

}


/*==================================================
  MARKETPLACE STATUS
==================================================*/

.marketplace-catalog-status{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    margin-top:60px;

    padding-top:22px;

    border-top:1px solid var(--border);

    color:var(--text-muted);

    font-size:.55rem;

    letter-spacing:1.5px;

}


.marketplace-catalog-status span{

    display:flex;

    align-items:center;

    gap:8px;

}


.marketplace-catalog-status span i{

    color:var(--primary);

    font-size:.42rem;

    filter:
        drop-shadow(
            0 0 6px var(--primary)
        );

}


.marketplace-catalog-status strong{

    color:var(--primary-light);

    font-size:.55rem;

    letter-spacing:1.5px;

}