/* =========================================================
   MAGIC iCREATIVE
   VISITOR DAY - HOME
   HOME = DIGITAL MARKETPLACE
   ========================================================= */


/* =========================================================
   HOME
   ========================================================= */

.home-main {

    width: 100%;

    padding-bottom: 60px;

}


/* =========================================================
   HOME HERO
   ========================================================= */

.home-hero {

    width: min(1600px, 94%);

    min-height: 260px;

    margin: 30px auto 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: 45px 25px;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #fbf7ff,
            #eef6ff
        );

    border:
        1px solid
        rgba(123, 60, 230, 0.08);

    border-radius: 28px;

    box-shadow:
        0 12px 35px
        rgba(76, 50, 124, 0.08);

}


.home-hero-content {

    width: 100%;

    max-width: 900px;

    margin: auto;

}


.home-hero h1 {

    margin:
        0 0 12px;

    color:
        #4c327c;

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

    line-height: 1.05;

}


.home-hero h2 {

    margin:
        0 0 12px;

    color:
        #8a4de8;

    font-size:
        clamp(
            1.25rem,
            2.5vw,
            2rem
        );

}


.home-hero p {

    margin:
        0;

    color:
        #7c6a99;

    font-size:
        1.05rem;

    line-height:
        1.6;

}


/* =========================================================
   HOME CATALOG
   ========================================================= */

.home-catalog {

    width:
        min(1600px, 94%);

    margin:
        45px auto 0;

}


.home-catalog > h2 {

    margin:
        0 0 8px;

    color:
        #4c327c;

    font-size:
        clamp(
            2rem,
            4vw,
            3rem
        );

}


.home-catalog > p {

    margin:
        0 0 25px;

    color:
        #7c6a99;

    font-size:
        1rem;

}


/* =========================================================
   SEARCH PANEL
   ========================================================= */

.home-search-panel {

    width:
        100%;

    display:
        grid;

    grid-template-columns:
        minmax(280px, 2fr)
        minmax(150px, 1fr)
        minmax(150px, 1fr)
        minmax(150px, 1fr)
        auto;

    gap:
        12px;

    margin:
        0 0 45px;

    padding:
        20px;

    background:
        #ffffff;

    border:
        1px solid
        #e7d9f3;

    border-radius:
        22px;

    box-shadow:
        0 12px 35px
        rgba(76, 50, 124, 0.08);

}


.home-search-panel input,
.home-search-panel select {

    width:
        100%;

    min-height:
        48px;

    padding:
        11px 15px;

    border:
        1px solid
        #e7d9f3;

    border-radius:
        14px;

    background:
        #ffffff;

    color:
        #40255f;

    outline:
        none;

}


.home-search-panel input:focus,
.home-search-panel select:focus {

    border-color:
        #8a4de8;

    box-shadow:
        0 0 0 4px
        rgba(138, 77, 232, 0.08);

}


.home-search-panel button {

    min-height:
        48px;

    padding:
        11px 22px;

    border:
        0;

    border-radius:
        14px;

    background:
        linear-gradient(
            135deg,
            #8a4de8,
            #d94aa5
        );

    color:
        #ffffff;

    font-weight:
        800;

    cursor:
        pointer;

    white-space:
        nowrap;

}


/* =========================================================
   PRODUCTS SECTION
   ========================================================= */

.marketplace-products {

    width:
        100%;

}


.product-grid {

    width:
        100%;

    display:
        grid;

    grid-template-columns:
        repeat(
            5,
            minmax(0, 1fr)
        );

    gap:
        22px;

}


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

.product-card {

    min-width:
        0;

    overflow:
        hidden;

    background:
        #ffffff;

    border:
        1px solid
        #e7d9f3;

    border-radius:
        22px;

    box-shadow:
        0 12px 35px
        rgba(76, 50, 124, 0.08);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;

}


.product-card:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 18px 42px
        rgba(76, 50, 124, 0.14);

}


/* =========================================================
   PRODUCT COVER
   ========================================================= */

.product-cover {

    position:
        relative;

    width:
        100%;

    height:
        280px;

    overflow:
        hidden;

    background:
        linear-gradient(
            135deg,
            #f3e9ff,
            #fdebf4,
            #eef6ff
        );

}


.product-cover img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

}


.product-cover-placeholder {

    width:
        100%;

    height:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #8a4de8;

    font-size:
        3rem;

}


/* =========================================================
   PRODUCT TYPE
   ========================================================= */

.product-type-badge {

    position:
        absolute;

    left:
        12px;

    bottom:
        12px;

    padding:
        6px 10px;

    border-radius:
        999px;

    background:
        rgba(
            255,
            255,
            255,
            .92
        );

    color:
        #7143d9;

    font-size:
        .72rem;

    font-weight:
        800;

}


/* =========================================================
   PRODUCT BODY
   ========================================================= */

.product-card-body {

    padding:
        18px;

}


.product-category {

    display:
        inline-block;

    margin-bottom:
        8px;

    color:
        #d04a9f;

    font-size:
        .72rem;

    font-weight:
        800;

    text-transform:
        uppercase;

}


.product-card-body h3 {

    margin:
        0 0 7px;

    color:
        #4c327c;

    font-size:
        1.05rem;

    line-height:
        1.3;

}


.product-theme {

    margin:
        0 0 9px;

    color:
        #8a4de8;

    font-size:
        .85rem;

    font-weight:
        700;

}


.product-description {

    margin:
        0 0 13px;

    color:
        #7c6a99;

    font-size:
        .84rem;

    line-height:
        1.5;

    display:
        -webkit-box;

    -webkit-line-clamp:
        3;

    -webkit-box-orient:
        vertical;

    overflow:
        hidden;

}


.product-meta {

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;

    margin-bottom:
        14px;

    padding-top:
        10px;

    border-top:
        1px solid
        #eee4f4;

    color:
        #9486aa;

    font-size:
        .74rem;

}


.product-price {

    margin-bottom:
        14px;

    color:
        #4c327c;

    font-size:
        1.25rem;

    font-weight:
        900;

}


.full-button {

    width:
        100%;

}


/* =========================================================
   EMPTY STATE
   ========================================================= */

.marketplace-empty-state {

    padding:
        60px 25px;

    text-align:
        center;

    background:
        #ffffff;

    border:
        1px dashed
        #d9c8e8;

    border-radius:
        24px;

}


.marketplace-empty-icon {

    margin-bottom:
        12px;

    font-size:
        2.8rem;

}


.marketplace-empty-state h2 {

    margin:
        0 0 8px;

    color:
        #4c327c;

}


.marketplace-empty-state p {

    margin:
        0 0 8px;

    color:
        #7c6a99;

}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1300px) {

    .product-grid {

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

    }

}


@media (max-width: 1050px) {

    .home-search-panel {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

    }


    .home-search-panel button {

        width:
            100%;

    }


    .product-grid {

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

    }

}


@media (max-width: 750px) {

    .home-hero {

        min-height:
            220px;

        padding:
            35px 20px;

    }


    .home-hero h1 {

        font-size:
            2.5rem;

    }


    .home-search-panel {

        grid-template-columns:
            1fr;

    }


    .product-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

    }

}


@media (max-width: 500px) {

    .home-catalog {

        width:
            92%;

    }


    .product-grid {

        grid-template-columns:
            1fr;

    }


    .product-cover {

        height:
            300px;

    }

}