/**
 * ====================================================
 * Shopex Pro
 * NEW ARRIVAL CSS ENGINE v2.0
 *
 * Location :
 * assets/css/new-arrival.css
 *
 * Purpose :
 * • New Arrival Section Wrapper
 * • Section Container
 * • Section Header
 * • Product Grid
 * • Responsive Grid
 *
 * Components :
 * template-parts/home/new-arrival.php
 *
 * Author :
 * Charka Creative Design
 * ====================================================
 */


/* ====================================================
   23.01-A
   NEW ARRIVAL SECTION WRAPPER
   ==================================================== */


/* -----------------------------------------------
   01. Section Wrapper
   ----------------------------------------------- */

.shopex-new-arrival {

    position: relative;

    width: 100%;

    margin: 0;

    padding: 14px 0 25px;

    background: #ffffff;

    overflow: hidden;

}


/* -----------------------------------------------
   02. Section Container
   ----------------------------------------------- */

.shopex-new-arrival-container {

    width: min(100%, 1400px);

    max-width: 1400px;

    margin: 0 auto;

    padding-inline: clamp(16px, 2vw, 24px);

    box-sizing: border-box;

}


/* ====================================================
   23.01-E
   NEW ARRIVAL SECTION HEADER
   ==================================================== */


/* -----------------------------------------------
   03. Section Header
   ----------------------------------------------- */

.shopex-new-arrival .shopex-section-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    gap: 20px;

    width: 100%;

    margin: 0 0 28px;

}


/* -----------------------------------------------
   04. Header Left
   ----------------------------------------------- */

.shopex-new-arrival .shopex-section-header-left {

    min-width: 0;

}


/* -----------------------------------------------
   05. Section Title
   ----------------------------------------------- */

.shopex-new-arrival .shopex-section-title {

    margin: 0;

    padding: 0;

    font-size: 22px;

    font-weight: 600;

    line-height: 1.2;

    color: #222222;

}


/* -----------------------------------------------
   06. Title Icon
   ----------------------------------------------- */

.shopex-new-arrival .shopex-section-title i {

    margin-right: 5px;

    color: #ff9900;

}


/* -----------------------------------------------
   07. Section Subtitle
   ----------------------------------------------- */

.shopex-new-arrival .shopex-section-subtitle {

    margin: 6px 0 0;

    padding: 0;

    color: #777777;

    font-size: 13px;

    line-height: 1.5;

}


/* -----------------------------------------------
   08. Header Right
   ----------------------------------------------- */

.shopex-new-arrival .shopex-section-header-right {

    flex-shrink: 0;

}


/* -----------------------------------------------
   09. View All
   ----------------------------------------------- */

.shopex-new-arrival .shopex-view-all {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #ff9900;

    font-size: 15px;

    font-weight: 700;

    line-height: 1.2;

    text-decoration: none;

    white-space: nowrap;

    transition:
        color .3s ease,
        transform .3s ease;

}


/* -----------------------------------------------
   10. View All Hover
   ----------------------------------------------- */

.shopex-new-arrival .shopex-view-all:hover {

    color: #ff6b00;

    transform: translateX(3px);

}


/* ====================================================
   23.01-D
   NEW ARRIVAL PRODUCT GRID
   ==================================================== */


/* -----------------------------------------------
   11. Product Grid
   ----------------------------------------------- */

.shopex-new-arrival-slider {

    display: grid;

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

    gap: 8px;

    width: 100%;

    min-width: 0;

}


/* -----------------------------------------------
   12. Product Grid Items
   ----------------------------------------------- */

.shopex-new-arrival-slider > * {

    min-width: 0;

}


/* -----------------------------------------------
   13. Empty Products
   ----------------------------------------------- */

.shopex-new-arrival .shopex-empty-products {

    grid-column: 1 / -1;

    width: 100%;

    padding: 20px 20px;

    text-align: center;

    color: #777777;

    background: #fafafa;

    border: 1px dashed #dddddd;

    border-radius: 12px;

    box-sizing: border-box;

}


/* -----------------------------------------------
   14. Empty Products Paragraph
   ----------------------------------------------- */

.shopex-new-arrival .shopex-empty-products p {

    margin: 0;

}


/* ====================================================
   23.01-H
   NEW ARRIVAL RESPONSIVE GRID
   ==================================================== */


/* -----------------------------------------------
   15. Laptop
   ----------------------------------------------- */

@media (max-width: 1200px) {

    .shopex-new-arrival-slider {

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

        gap: 8px;

    }

}


/* -----------------------------------------------
   16. Tablet
   ----------------------------------------------- */

@media (max-width: 991px) {

    .shopex-new-arrival .shopex-section-header {

        gap: 8px;

    }


    .shopex-new-arrival-slider {

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

        gap: 18px;

    }

}


/* -----------------------------------------------
   17. Mobile
   ----------------------------------------------- */

@media (max-width: 767px) {

    .shopex-new-arrival {

        padding: 20px 0;

    }


    .shopex-new-arrival-container {

        padding-inline: 16px;

    }


    .shopex-new-arrival .shopex-section-header {

        align-items: flex-start;

        flex-direction: column;

        gap: 14px;

        margin-bottom: 22px;

    }


    .shopex-new-arrival .shopex-section-title {

        font-size: 26px;

    }


    .shopex-new-arrival .shopex-section-subtitle {

        font-size: 14px;

    }


    .shopex-new-arrival .shopex-section-header-right {

        width: 100%;

    }


    .shopex-new-arrival .shopex-view-all {

        font-size: 14px;

    }


    .shopex-new-arrival-slider {

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

        gap: 16px;

    }

}


/* -----------------------------------------------
   18. Small Mobile
   ----------------------------------------------- */

@media (max-width: 480px) {

    .shopex-new-arrival {

        padding: 20px 0;

    }


    .shopex-new-arrival-container {

        padding-inline: 14px;

    }


    .shopex-new-arrival .shopex-section-title {

        font-size: 23px;

    }


    .shopex-new-arrival .shopex-section-header {

        margin-bottom: 20px;

    }


    .shopex-new-arrival-slider {

        grid-template-columns: 1fr;

        gap: 14px;

    }

}


/* ====================================================
   END OF NEW ARRIVAL CSS
   ==================================================== */
   
   
   
   /* ====================================================
   23.02-E
   HOME PRODUCT ROW — FULL WIDTH DESKTOP ENGINE
==================================================== */

/*
 * Full available width for the Home Product Section.
 * This overrides the narrow global container only
 * for New Arrival + Flash Sale area.
 */

.shopex-homepage .shopex-home-product-section > .shopex-container {

    width: 100%;
    max-width: 1400px;

    margin-left: auto;
    margin-right: auto;

    padding-left: clamp(16px, 2vw, 30px);
    padding-right: clamp(16px, 2vw, 30px);

    box-sizing: border-box;
}


/* ====================================================
   NEW ARRIVAL + FLASH SALE ROW
==================================================== */

.shopex-homepage .shopex-home-product-row {

    display: grid;

    /*
     * New Arrival takes all remaining space.
     * Flash Sale keeps a fixed desktop width.
     */
    grid-template-columns:
        minmax(0, 1fr)
        320px;

    gap: 20px;

    width: 100%;
    max-width: none;

    margin: 0;
    padding: 0;

    box-sizing: border-box;
}


/* ====================================================
   NEW ARRIVAL COLUMN
==================================================== */

.shopex-homepage .shopex-home-new-arrival {

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;

    box-sizing: border-box;
}


/* ====================================================
   NEW ARRIVAL SECTION
==================================================== */

.shopex-homepage .shopex-home-new-arrival .shopex-new-arrival {

    width: 100%;
    max-width: none;

    margin: 0;
    box-sizing: border-box;
}


/* ====================================================
   NEW ARRIVAL CONTAINER
==================================================== */

.shopex-homepage .shopex-home-new-arrival
.shopex-new-arrival-container {

    width: 100%;
    max-width: none;

    margin: 0;
    padding-left: clamp(16px, 2vw, 24px);
    padding-right: clamp(16px, 2vw, 24px);

    box-sizing: border-box;
}


/* ====================================================
   FLASH SALE COLUMN
==================================================== */

.shopex-homepage .shopex-home-flash-sale {

    width: 320px;
    max-width: 320px;
    min-width: 0;

    margin: 0;
    padding: 0;

    box-sizing: border-box;
}


/* ====================================================
   FLASH SALE INNER CONTAINER
==================================================== */

.shopex-homepage .shopex-home-flash-sale
.shopex-flash-sale-container {

    width: 100%;
    max-width: 100%;

    margin: 0;
    padding: 0;

    box-sizing: border-box;
}


/* ====================================================
   TABLET
==================================================== */

@media (max-width: 991px) {

    .shopex-homepage .shopex-home-product-row {

        grid-template-columns:
            minmax(0, 1fr)
            300px;

        gap: 18px;

    }


    .shopex-homepage .shopex-home-flash-sale {

        width: 300px;
        max-width: 300px;

    }

}


/* ====================================================
   MOBILE
   Keep existing mobile layout
==================================================== */

@media (max-width: 767px) {

    .shopex-homepage .shopex-home-product-row {

        display: block;

        width: 100%;

    }


    .shopex-homepage .shopex-home-new-arrival,
    .shopex-homepage .shopex-home-flash-sale {

        width: 100%;
        max-width: 100%;

    }


    .shopex-homepage .shopex-home-flash-sale {

        margin-top: 20px;

    }

}



/* ====================================================
   NEW ARRIVAL HEADER — INLINE TITLE + DESCRIPTION
==================================================== */

.shopex-homepage .shopex-home-new-arrival
.shopex-section-header-left {

    display: flex;
    align-items: baseline;
    gap: 14px;

}


.shopex-homepage .shopex-home-new-arrival
.shopex-section-title {

    margin: 0;
    white-space: nowrap;

}


.shopex-homepage .shopex-home-new-arrival
.shopex-section-subtitle {

    margin: 0;

    white-space: nowrap;

    font-size: 14px;

}