/*==================================================
  MARKETPLACE RESPONSIVE SYSTEM
==================================================*/


/*==================================================
  1200px — LARGE TABLETS / SMALL DESKTOP
==================================================*/

@media (max-width: 1200px){

    /*----------------------------------------------
      MARKETPLACE HERO
    ----------------------------------------------*/

    .marketplace-hero{
        min-height:760px;
        padding:120px 0 90px;
    }

    .marketplace-hero-grid{
        padding:0 25px;
        gap:10px;
    }

    .marketplace-hero-title{
        font-size:clamp(
            2.8rem,
            5vw,
            4.5rem
        );
    }

    .marketplace-network{
        width:min(620px,100%);
    }


    /*----------------------------------------------
      MARKETPLACE CATALOG
    ----------------------------------------------*/

    .marketplace-catalog{
        padding:110px 0 100px;
    }

    .marketplace-catalog-container{
        padding:0 25px;
    }

    .marketplace-product-grid{
        gap:18px;
    }


    /*----------------------------------------------
      MARKETPLACE PROCESS
    ----------------------------------------------*/

    .marketplace-process{
        padding:110px 0;
    }

    .marketplace-process-container{
        padding:0 25px;
    }

    .marketplace-process-system{
        gap:16px;
    }

    .marketplace-process-card{
        padding:24px;
    }

}


/*==================================================
  992px — TABLET
==================================================*/

@media (max-width: 992px){

    /*----------------------------------------------
      MARKETPLACE HERO
    ----------------------------------------------*/

    .marketplace-hero{
        min-height:auto;
        padding:120px 0 80px;
    }

    .marketplace-hero-grid{
        grid-template-columns:1fr;
        gap:60px;
        text-align:center;
    }

    .marketplace-hero-content{
        max-width:760px;
        margin:0 auto;
    }

    .marketplace-hero-title{
        font-size:clamp(
            2.8rem,
            7vw,
            4.5rem
        );
    }

    .marketplace-hero-text{
        margin:0 auto;
    }

    .marketplace-hero-status{
        justify-content:center;
    }

    .marketplace-network{
        width:min(620px,90vw);
        margin:0 auto;
    }


    /*----------------------------------------------
      NETWORK HUD
    ----------------------------------------------*/

    .market-hud-top{
        top:8%;
        right:2%;
    }

    .market-hud-bottom{
        bottom:7%;
        left:2%;
    }


    /*----------------------------------------------
      CATALOG HEADER
    ----------------------------------------------*/

    .marketplace-catalog{
        padding:100px 0 90px;
    }

    .marketplace-catalog-header{
        margin-bottom:55px;
    }

    .marketplace-catalog-title{
        font-size:clamp(
            2.5rem,
            6vw,
            4rem
        );
    }


    /*----------------------------------------------
      CATEGORY NAVIGATION
    ----------------------------------------------*/

    .marketplace-category-nav{
        max-width:850px;
    }


    /*----------------------------------------------
      PRODUCT GRID
      2 COLUMNS AT 992px
    ----------------------------------------------*/

    .marketplace-product-grid{
        grid-template-columns:repeat(2,1fr);
        gap:20px;
    }


    /*----------------------------------------------
      PRODUCT CARD
    ----------------------------------------------*/

    .marketplace-product-card{
        min-height:420px;
    }


    /*----------------------------------------------
      PROCESS
    ----------------------------------------------*/

    .marketplace-process{
        padding:100px 0;
    }

    .marketplace-process-header{
        margin-bottom:60px;
    }

    .marketplace-process-system{
        grid-template-columns:repeat(2,1fr);
        gap:20px;
    }

    .marketplace-process-system::before{
        display:none;
    }

}


/*==================================================
  768px — TABLET / LARGE MOBILE
==================================================*/

@media (max-width: 768px){

    /*----------------------------------------------
      MARKETPLACE HERO
    ----------------------------------------------*/

    .marketplace-hero{
        padding:105px 0 70px;
    }

    .marketplace-hero-grid{
        padding:0 20px;
        gap:45px;
    }

    .marketplace-hero-title{
        font-size:clamp(
            2.5rem,
            9vw,
            3.8rem
        );
        letter-spacing:-1.5px;
    }

    .marketplace-hero-text{
        font-size:.95rem;
        line-height:1.75;
    }

    .marketplace-network{
        width:min(560px,92vw);
    }


    /*----------------------------------------------
      NETWORK HUD
    ----------------------------------------------*/

    .marketplace-network-hud{
        padding:8px 11px;
        font-size:.48rem;
        letter-spacing:1.2px;
    }

    .market-hud-top{
        top:7%;
        right:1%;
    }

    .market-hud-bottom{
        bottom:6%;
        left:1%;
    }


    /*----------------------------------------------
      CATALOG
    ----------------------------------------------*/

    .marketplace-catalog{
        padding:90px 0 80px;
    }

    .marketplace-catalog-container{
        padding:0 20px;
    }

    .marketplace-catalog-header{
        margin-bottom:45px;
    }

    .marketplace-catalog-title{
        font-size:clamp(
            2.3rem,
            8vw,
            3.5rem
        );
        letter-spacing:-1.5px;
    }

    .marketplace-catalog-intro{
        font-size:.92rem;
        line-height:1.75;
    }


    /*----------------------------------------------
      CATEGORY NAVIGATION
      2 COLUMNS
    ----------------------------------------------*/

    .marketplace-category-nav{
        grid-template-columns:repeat(2,1fr);
        margin-bottom:45px;
    }

    .marketplace-category-btn{
        min-height:56px;
        padding:0 12px;
        font-size:.58rem;
        letter-spacing:1px;
    }


    /*----------------------------------------------
      PANEL HEADER
    ----------------------------------------------*/

    .marketplace-panel-header{
        align-items:flex-start;
        flex-direction:column;
        gap:10px;
        margin-bottom:25px;
        padding-bottom:16px;
    }

    .marketplace-panel-header h3{
        font-size:1.7rem;
    }


    /*----------------------------------------------
      PRODUCT GRID
      1 COLUMN FROM 768px
    ----------------------------------------------*/

    .marketplace-product-grid{
        grid-template-columns:1fr;
        gap:20px;
    }

    .marketplace-product-card{
        min-height:400px;
    }


    /*----------------------------------------------
      PRODUCT VISUAL
    ----------------------------------------------*/

    .marketplace-product-visual{
        height:220px;
    }

    .marketplace-product-content{
        padding:24px;
    }


    /*----------------------------------------------
      PROCESS
    ----------------------------------------------*/

    .marketplace-process{
        padding:90px 0;
    }

    .marketplace-process-container{
        padding:0 20px;
    }

    .marketplace-process-header{
        margin-bottom:50px;
    }

    .marketplace-process-title{
        font-size:clamp(
            2.3rem,
            8vw,
            3.5rem
        );
        letter-spacing:-1.5px;
    }

    .marketplace-process-intro{
        font-size:.92rem;
        line-height:1.75;
    }

    .marketplace-process-system{
        grid-template-columns:1fr;
        gap:18px;
    }

    .marketplace-process-card{
        min-height:300px;
        padding:24px;
    }

    .marketplace-process-icon{
        margin-bottom:45px;
    }

}


/*==================================================
  576px — MOBILE
==================================================*/

@media (max-width: 576px){

    /*----------------------------------------------
      MARKETPLACE HERO
    ----------------------------------------------*/

    .marketplace-hero{
        padding:95px 0 60px;
    }

    .marketplace-hero-grid{
        padding:0 15px;
        gap:35px;
    }

    .marketplace-hero-title{
        font-size:clamp(
            2.2rem,
            10vw,
            3.2rem
        );
    }

    .marketplace-hero-text{
        font-size:.88rem;
    }

    .marketplace-hero-status{
        flex-wrap:wrap;
        font-size:.52rem;
    }

    .marketplace-network{
        width:94vw;
        max-width:500px;
    }


    /*----------------------------------------------
      NETWORK HUD
    ----------------------------------------------*/

    .marketplace-network-hud{
        padding:7px 9px;
        font-size:.43rem;
        letter-spacing:1px;
    }


    /*----------------------------------------------
      CATALOG
    ----------------------------------------------*/

    .marketplace-catalog{
        padding:80px 0 70px;
    }

    .marketplace-catalog-container{
        padding:0 15px;
    }

    .marketplace-catalog-header{
        margin-bottom:40px;
    }

    .marketplace-catalog-title{
        font-size:clamp(
            2.1rem,
            10vw,
            3rem
        );
    }

    .marketplace-catalog-intro{
        font-size:.86rem;
    }


    /*----------------------------------------------
      CATEGORY NAVIGATION
    ----------------------------------------------*/

    .marketplace-category-nav{
        gap:6px;
        padding:6px;
        border-radius:14px;
        margin-bottom:40px;
    }

    .marketplace-category-btn{
        min-height:52px;
        padding:0 8px;
        gap:7px;
        font-size:.5rem;
        letter-spacing:.8px;
    }

    .marketplace-category-btn i{
        font-size:.75rem;
    }


    /*----------------------------------------------
      PANEL
    ----------------------------------------------*/

    .marketplace-panel-header h3{
        font-size:1.5rem;
    }

    .marketplace-panel-count{
        font-size:.48rem;
    }


    /*----------------------------------------------
      PRODUCT CARD
    ----------------------------------------------*/

    .marketplace-product-card{
        min-height:390px;
    }

    .marketplace-product-visual{
        height:200px;
    }

    .marketplace-product-content{
        padding:22px 20px;
    }

    .marketplace-product-content h4{
        font-size:1.2rem;
    }

    .marketplace-product-content p{
        font-size:.78rem;
        line-height:1.7;
    }

    .marketplace-product-footer{
        gap:10px;
        padding-top:20px;
    }

    .marketplace-product-btn{
        min-height:40px;
        padding:0 13px;
        font-size:.52rem;
    }

    .marketplace-product-index{
        top:14px;
        right:16px;
        font-size:1.5rem;
    }

    .marketplace-image-type{
        left:17px;
        bottom:16px;
        padding:6px 9px;
        font-size:.45rem;
    }

    .marketplace-image-frame{
        inset:11px;
    }


    /*----------------------------------------------
      PROCESS
    ----------------------------------------------*/

    .marketplace-process{
        padding:80px 0;
    }

    .marketplace-process-container{
        padding:0 15px;
    }

    .marketplace-process-title{
        font-size:clamp(
            2.1rem,
            10vw,
            3rem
        );
    }

    .marketplace-process-intro{
        font-size:.86rem;
    }

    .marketplace-process-card{
        min-height:290px;
        padding:22px;
    }

    .marketplace-process-number{
        top:15px;
        right:17px;
        font-size:1.5rem;
    }

    .marketplace-process-icon{
        width:65px;
        height:65px;
        margin-bottom:40px;
        border-radius:17px;
        font-size:1.25rem;
    }

    .marketplace-process-content h3{
        font-size:1.2rem;
    }

    .marketplace-process-content p{
        font-size:.78rem;
        line-height:1.7;
    }

    .marketplace-process-status{
        align-items:flex-start;
        flex-direction:column;
        gap:12px;
        margin-top:40px;
    }

}


/*==================================================
  480px — SMALL MOBILE
==================================================*/

@media (max-width: 480px){

    /*----------------------------------------------
      HERO
    ----------------------------------------------*/

    .marketplace-hero{
        padding:85px 0 55px;
    }

    .marketplace-hero-grid{
        padding:0 12px;
    }

    .marketplace-hero-title{
        font-size:clamp(
            2rem,
            11vw,
            2.8rem
        );
        letter-spacing:-1px;
    }

    .marketplace-hero-text{
        font-size:.82rem;
        line-height:1.7;
    }

    .marketplace-network{
        width:96vw;
    }


    /*----------------------------------------------
      NETWORK HUD
    ----------------------------------------------*/

    .marketplace-network-hud{
        padding:6px 8px;
        font-size:.38rem;
        letter-spacing:.8px;
    }

    .market-hud-top{
        top:5%;
        right:0;
    }

    .market-hud-bottom{
        bottom:5%;
        left:0;
    }


    /*----------------------------------------------
      CATALOG
    ----------------------------------------------*/

    .marketplace-catalog{
        padding:70px 0 60px;
    }

    .marketplace-catalog-container{
        padding:0 12px;
    }

    .marketplace-catalog-title{
        font-size:clamp(
            1.9rem,
            11vw,
            2.7rem
        );
        letter-spacing:-1px;
    }


    /*----------------------------------------------
      CATEGORY NAV
      1 COLUMN
    ----------------------------------------------*/

    .marketplace-category-nav{
        grid-template-columns:1fr;
        gap:5px;
        padding:5px;
    }

    .marketplace-category-btn{
        min-height:48px;
        justify-content:flex-start;
        padding:0 15px;
    }


    /*----------------------------------------------
      PRODUCT
    ----------------------------------------------*/

    .marketplace-product-grid{
        gap:16px;
    }

    .marketplace-product-card{
        min-height:380px;
    }

    .marketplace-product-visual{
        height:185px;
    }

    .marketplace-product-content{
        padding:20px 18px;
    }

    .marketplace-product-content h4{
        font-size:1.1rem;
    }

    .marketplace-product-content p{
        font-size:.75rem;
    }

    .marketplace-product-footer{
        align-items:flex-end;
    }

    .marketplace-product-footer strong{
        font-size:.8rem;
    }

    .marketplace-product-btn{
        min-height:38px;
        padding:0 11px;
        font-size:.48rem;
    }


    /*----------------------------------------------
      PROCESS
    ----------------------------------------------*/

    .marketplace-process{
        padding:70px 0;
    }

    .marketplace-process-container{
        padding:0 12px;
    }

    .marketplace-process-title{
        font-size:clamp(
            1.9rem,
            11vw,
            2.7rem
        );
    }

    .marketplace-process-card{
        min-height:280px;
        padding:20px;
    }

    .marketplace-process-icon{
        width:60px;
        height:60px;
        margin-bottom:35px;
    }

    .marketplace-process-content h3{
        font-size:1.1rem;
    }

}


/*==================================================
  360px — VERY SMALL MOBILE
==================================================*/

@media (max-width: 360px){

    /*----------------------------------------------
      HERO
    ----------------------------------------------*/

    .marketplace-hero{
        padding:75px 0 50px;
    }

    .marketplace-hero-grid{
        padding:0 10px;
        gap:30px;
    }

    .marketplace-hero-title{
        font-size:2rem;
    }

    .marketplace-hero-text{
        font-size:.78rem;
    }

    .marketplace-network{
        width:98vw;
    }


    /*----------------------------------------------
      NETWORK HUD
    ----------------------------------------------*/

    .marketplace-network-hud{
        padding:5px 7px;
        font-size:.34rem;
    }


    /*----------------------------------------------
      CATALOG
    ----------------------------------------------*/

    .marketplace-catalog{
        padding:60px 0 50px;
    }

    .marketplace-catalog-container{
        padding:0 10px;
    }

    .marketplace-catalog-title{
        font-size:1.9rem;
    }

    .marketplace-catalog-intro{
        font-size:.78rem;
    }


    /*----------------------------------------------
      CATEGORY NAV
    ----------------------------------------------*/

    .marketplace-category-btn{
        min-height:46px;
        padding:0 12px;
        font-size:.46rem;
    }


    /*----------------------------------------------
      PRODUCT
    ----------------------------------------------*/

    .marketplace-product-card{
        min-height:370px;
    }

    .marketplace-product-visual{
        height:175px;
    }

    .marketplace-product-content{
        padding:18px 16px;
    }

    .marketplace-product-content h4{
        font-size:1rem;
    }

    .marketplace-product-content p{
        font-size:.72rem;
    }

    .marketplace-product-footer{
        gap:7px;
    }

    .marketplace-product-footer strong{
        font-size:.72rem;
    }

    .marketplace-product-btn{
        min-height:36px;
        padding:0 9px;
        font-size:.44rem;
    }

    .marketplace-product-index{
        top:12px;
        right:13px;
        font-size:1.3rem;
    }

    .marketplace-image-type{
        left:13px;
        bottom:12px;
        padding:5px 7px;
        font-size:.4rem;
    }

    .marketplace-image-frame{
        inset:9px;
    }


    /*----------------------------------------------
      PROCESS
    ----------------------------------------------*/

    .marketplace-process{
        padding:60px 0;
    }

    .marketplace-process-container{
        padding:0 10px;
    }

    .marketplace-process-title{
        font-size:1.9rem;
    }

    .marketplace-process-intro{
        font-size:.78rem;
    }

    .marketplace-process-card{
        min-height:270px;
        padding:18px;
    }

    .marketplace-process-number{
        top:12px;
        right:14px;
        font-size:1.3rem;
    }

    .marketplace-process-icon{
        width:56px;
        height:56px;
        margin-bottom:30px;
        border-radius:15px;
        font-size:1.1rem;
    }

    .marketplace-process-content h3{
        font-size:1rem;
    }

    .marketplace-process-content p{
        font-size:.72rem;
        line-height:1.65;
    }

    .marketplace-process-status{
        font-size:.45rem;
        letter-spacing:1px;
    }

}