/* =========================================================
   HERO SECTION — DESIGN 1
   Fashion Split Hero
========================================================= */


/* =========================================================
   MAIN SECTION
========================================================= */

.hero-design-1{

    width:100%;

    position:relative;

    padding:40px 0 80px;

    background:var(--white);

    overflow:hidden;
}


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

.hero-design-1
.hero-design-1-container{

    width:100%;

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

    min-height:580px;

    margin:0 auto;

    padding:75px 60px;

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:60px;

    position:relative;

    overflow:hidden;

    box-sizing:border-box;

    background:

        radial-gradient(
            circle at top left,
            var(--extra-light),
            transparent 45%
        ),

        radial-gradient(
            circle at bottom right,
            rgba(31,122,91,.10),
            transparent 45%
        ),

        var(--background);

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

    border-radius:var(--radius-xl);

    box-shadow:var(--shadow-lg);
}


/* =========================================================
   DECORATIVE CIRCLE — TOP LEFT
========================================================= */

.hero-design-1
.hero-design-1-container::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    top:-220px;

    left:-180px;

    border-radius:50%;

    background:rgba(31,122,91,.05);

    pointer-events:none;
}


/* =========================================================
   DECORATIVE CIRCLE — BOTTOM RIGHT
========================================================= */

.hero-design-1
.hero-design-1-container::after{

    content:"";

    position:absolute;

    width:320px;

    height:320px;

    right:-120px;

    bottom:-180px;

    border-radius:50%;

    background:rgba(31,122,91,.06);

    pointer-events:none;
}


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

.hero-design-1
.hero-design-1-content{

    position:relative;

    z-index:2;
}


/* =========================================================
   HEADING
========================================================= */

.hero-design-1
.hero-design-1-content h1{

    margin:0 0 20px;

    color:var(--text-dark);

    font-size:72px;

    font-weight:900;

    line-height:1.08;

    letter-spacing:-2px;
}


.hero-design-1
.hero-design-1-content h1 span{

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


/* =========================================================
   DESCRIPTION
========================================================= */

.hero-design-1
.hero-design-1-content p{

    max-width:500px;

    margin:0 0 35px;

    color:var(--text-light);

    font-size:19px;

    line-height:1.8;
}


/* =========================================================
   BUTTONS
========================================================= */

.hero-design-1
.hero-design-1-buttons{

    display:flex;

    align-items:center;

    gap:12px;
}


.hero-design-1
.hero-design-1-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:48px;

    padding:14px 30px;

    background:var(--primary-color);

    color:var(--white);

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

    border-radius:50px;

    font-size:14px;

    font-weight:700;

    text-decoration:none;

    letter-spacing:.5px;

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


.hero-design-1
.hero-design-1-button:hover{

    background:var(--primary-hover);

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

    color:var(--white);

    transform:translateY(-3px);

    box-shadow:var(--shadow);
}


/* =========================================================
   IMAGE AREA
========================================================= */

.hero-design-1
.hero-design-1-image{

    position:relative;

    z-index:2;

    display:flex;

    align-items:center;

    justify-content:center;

    min-width:0;
}


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

.hero-design-1
.hero-design-1-image img{

    position:relative;

    z-index:2;

    display:block;

    width:100%;

    max-width:520px;

    height:auto;

    object-fit:contain;

    transition:transform .7s ease;
}


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

.hero-design-1
.hero-design-1-container:hover
.hero-design-1-image img{

    transform:scale(1.04);
}


/* =========================================================
   HERO ARROWS
========================================================= */

.hero-design-1
.hero-design-1-arrow{

    position:absolute;

    top:50%;

    width:55px;

    height:55px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:0;

    transform:translateY(-50%);

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

    border-radius:50%;

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

    color:var(--primary-color);

    font-size:27px;

    cursor:pointer;

    z-index:10;

    box-shadow:var(--shadow);

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


.hero-design-1
.hero-design-1-arrow:hover{

    background:var(--primary-color);

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

    color:var(--white);

    transform:translateY(-50%) scale(1.08);

    box-shadow:var(--shadow-lg);
}


/* =========================================================
   LEFT ARROW
========================================================= */

.hero-design-1
.hero-design-1-arrow-left{

    left:20px;
}


/* =========================================================
   RIGHT ARROW
========================================================= */

.hero-design-1
.hero-design-1-arrow-right{

    right:20px;
}


/* =========================================================
   992px — SMALL LAPTOP / TABLET
========================================================= */

@media (max-width:992px){

    .hero-design-1{

        padding:30px 0 65px;
    }


    .hero-design-1
    .hero-design-1-container{

        min-height:auto;

        grid-template-columns:1fr;

        gap:35px;

        padding:55px 35px;

        text-align:center;
    }


    /* Image comes first */

    .hero-design-1
    .hero-design-1-image{

        order:1;
    }


    /* Content comes second */

    .hero-design-1
    .hero-design-1-content{

        order:2;
    }


    .hero-design-1
    .hero-design-1-image img{

        max-width:430px;
    }


    .hero-design-1
    .hero-design-1-content h1{

        font-size:52px;

        letter-spacing:-1.3px;
    }


    .hero-design-1
    .hero-design-1-content p{

        max-width:600px;

        margin-left:auto;

        margin-right:auto;

        font-size:17px;
    }


    .hero-design-1
    .hero-design-1-buttons{

        justify-content:center;
    }


    .hero-design-1
    .hero-design-1-arrow{

        width:45px;

        height:45px;

        font-size:22px;
    }


    .hero-design-1
    .hero-design-1-arrow-left{

        left:10px;
    }


    .hero-design-1
    .hero-design-1-arrow-right{

        right:10px;
    }
}


/* =========================================================
   768px — TABLET
========================================================= */

@media (max-width:768px){

    .hero-design-1{

        padding:25px 0 55px;
    }


    .hero-design-1
    .hero-design-1-container{

        margin-left:10px;

        margin-right:10px;

        width:calc(100% - 20px);

        padding:45px 25px;

        gap:28px;

        border-radius:var(--radius-lg);

        box-shadow:var(--shadow);
    }


    .hero-design-1
    .hero-design-1-image img{

        max-width:350px;
    }


    .hero-design-1
    .hero-design-1-content h1{

        font-size:43px;

        line-height:1.08;

        letter-spacing:-1px;

        margin-bottom:16px;
    }


    .hero-design-1
    .hero-design-1-content p{

        font-size:16px;

        line-height:1.7;

        margin-bottom:25px;
    }


    .hero-design-1
    .hero-design-1-arrow{

        width:40px;

        height:40px;

        font-size:19px;
    }


    .hero-design-1
    .hero-design-1-arrow-left{

        left:7px;
    }


    .hero-design-1
    .hero-design-1-arrow-right{

        right:7px;
    }
}


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

@media (max-width:480px){

    .hero-design-1{

        padding:15px 0 45px;
    }


    .hero-design-1
    .hero-design-1-container{

        margin-left:8px;

        margin-right:8px;

        width:calc(100% - 16px);

        padding:35px 18px 40px;

        gap:20px;

        border-radius:var(--radius-md);
    }


    .hero-design-1
    .hero-design-1-image img{

        max-width:280px;
    }


    .hero-design-1
    .hero-design-1-content h1{

        font-size:35px;

        line-height:1.07;

        letter-spacing:-.7px;

        margin-bottom:14px;
    }


    .hero-design-1
    .hero-design-1-content p{

        font-size:14px;

        line-height:1.7;

        margin-bottom:22px;
    }


    .hero-design-1
    .hero-design-1-button{

        min-height:44px;

        padding:12px 23px;

        font-size:12px;
    }


    .hero-design-1
    .hero-design-1-arrow{

        width:34px;

        height:34px;

        font-size:16px;

        box-shadow:var(--shadow-sm);
    }


    .hero-design-1
    .hero-design-1-arrow-left{

        left:5px;
    }


    .hero-design-1
    .hero-design-1-arrow-right{

        right:5px;
    }


    .hero-design-1
    .hero-design-1-container::before{

        width:350px;

        height:350px;

        top:-180px;

        left:-170px;
    }


    .hero-design-1
    .hero-design-1-container::after{

        width:230px;

        height:230px;

        right:-100px;

        bottom:-130px;
    }
}

/* =========================================================
   CATEGORY PRODUCTS — DESIGN 2
   Horizontal Product Collection Slider
========================================================= */


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

.category-products-2{

    width:100%;

    padding:80px 0;

    background:var(--background);

    position:relative;
}


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

.category-products-2
.category-products-container{

    width:100%;

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

    margin:0 auto;

    padding-left:20px;
    padding-right:20px;

    box-sizing:border-box;
}


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

.category-products-2
.category-products-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    margin-bottom:28px;
}


/* =========================================================
   TITLE
========================================================= */

.category-products-2
.category-products-title{

    margin:0;

    color:var(--text-dark);

    font-size:32px;

    font-weight:700;

    line-height:1.2;

    letter-spacing:-.4px;
}


/* =========================================================
   ARROWS
========================================================= */

.category-products-2
.category-products-arrows{

    display:flex;

    align-items:center;

    gap:10px;

    flex-shrink:0;
}


.category-products-2
.category-products-arrow{

    width:44px;

    height:44px;

    display:flex;

    align-items:center;

    justify-content:center;

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

    border-radius:50%;

    background:var(--white);

    color:var(--primary-color);

    cursor:pointer;

    box-shadow:var(--shadow-sm);

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


.category-products-2
.category-products-arrow i{

    font-size:18px;

    line-height:1;
}


.category-products-2
.category-products-arrow:hover{

    background:var(--primary-color);

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

    color:var(--white);

    transform:translateY(-2px);

    box-shadow:var(--shadow);
}


/* =========================================================
   PRODUCT SLIDER
========================================================= */

.category-products-2
.category-products-slider{

    width:100%;

    display:flex;

    align-items:stretch;

    gap:20px;

    overflow-x:auto;

    overflow-y:hidden;

    scroll-behavior:smooth;

    padding:5px 2px 18px;

    scrollbar-width:none;

    -webkit-overflow-scrolling:touch;
}


/* Chrome / Edge / Safari */

.category-products-2
.category-products-slider::-webkit-scrollbar{

    display:none;

    width:0;

    height:0;
}


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

.category-products-2
.category-products-card{

    flex:0 0 250px;

    min-width:250px;

    background:var(--white);

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

    border-radius:var(--radius-lg);

    overflow:hidden;

    box-shadow:var(--shadow-sm);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}


.category-products-2
.category-products-card:hover{

    transform:translateY(-5px);

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

    box-shadow:var(--shadow-lg);
}


/* =========================================================
   PRODUCT IMAGE
========================================================= */

.category-products-2
.category-products-image{

    width:100%;

    height:320px;

    overflow:hidden;

    background:var(--extra-light);
}


.category-products-2
.category-products-image a{

    width:100%;

    height:100%;

    display:block;
}


.category-products-2
.category-products-image img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    object-position:center;

    transition:transform .6s ease;
}


.category-products-2
.category-products-card:hover
.category-products-image img{

    transform:scale(1.06);
}


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

.category-products-2
.category-products-content{

    padding:16px;
}


.category-products-2
.category-products-content h4{

    margin:0 0 9px;

    height:52px;

    overflow:hidden;

    color:var(--text-dark);

    font-size:16px;

    font-weight:600;

    line-height:1.5;
}


.category-products-2
.category-products-content p{

    margin:0 0 14px;

    color:var(--primary-color);

    font-size:18px;

    font-weight:700;

    line-height:1.3;
}


/* =========================================================
   VIEW COLLECTION
========================================================= */

.category-products-2
.category-products-content a{

    display:inline-flex;

    align-items:center;

    gap:7px;

    color:var(--primary-color);

    font-size:13px;

    font-weight:700;

    line-height:1.2;

    text-decoration:none;

    transition:color .25s ease;
}


.category-products-2
.category-products-content a:hover{

    color:var(--primary-hover);
}


/* =========================================================
   EMPTY PRODUCTS
========================================================= */

.category-products-2
.category-products-empty{

    width:100%;

    margin:0;

    padding:30px;

    color:var(--text-muted);

    text-align:center;

    background:var(--white);

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

    border-radius:var(--radius-lg);

}


/* =========================================================
   992px
========================================================= */

@media (max-width:992px){

    .category-products-2{

        padding:70px 0;
    }


    .category-products-2
    .category-products-title{

        font-size:29px;
    }


    .category-products-2
    .category-products-slider{

        gap:18px;
    }


    .category-products-2
    .category-products-card{

        flex:0 0 220px;

        min-width:220px;
    }


    .category-products-2
    .category-products-image{

        height:285px;
    }
}


/* =========================================================
   768px
========================================================= */

@media (max-width:768px){

    .category-products-2{

        padding:60px 0;
    }


    .category-products-2
    .category-products-container{

        padding-left:18px;

        padding-right:18px;
    }


    .category-products-2
    .category-products-header{

        margin-bottom:22px;
    }


    .category-products-2
    .category-products-title{

        font-size:25px;
    }


    .category-products-2
    .category-products-arrow{

        width:38px;

        height:38px;
    }


    .category-products-2
    .category-products-arrow i{

        font-size:16px;
    }


    .category-products-2
    .category-products-slider{

        gap:14px;

        padding-bottom:12px;
    }


    .category-products-2
    .category-products-card{

        flex:0 0 190px;

        min-width:190px;

        border-radius:var(--radius-md);
    }


    .category-products-2
    .category-products-image{

        height:245px;
    }


    .category-products-2
    .category-products-content{

        padding:13px;
    }


    .category-products-2
    .category-products-content h4{

        height:46px;

        font-size:14px;
    }


    .category-products-2
    .category-products-content p{

        font-size:16px;

        margin-bottom:12px;
    }


    .category-products-2
    .category-products-content a{

        font-size:12px;
    }
}


/* =========================================================
   480px
========================================================= */

@media (max-width:480px){

    .category-products-2{

        padding:50px 0;
    }


    .category-products-2
    .category-products-container{

        padding-left:15px;

        padding-right:15px;
    }


    .category-products-2
    .category-products-header{

        gap:12px;

        margin-bottom:18px;
    }


    .category-products-2
    .category-products-title{

        font-size:22px;
    }


    .category-products-2
    .category-products-arrows{

        gap:6px;
    }


    .category-products-2
    .category-products-arrow{

        width:34px;

        height:34px;
    }


    .category-products-2
    .category-products-arrow i{

        font-size:14px;
    }


    .category-products-2
    .category-products-slider{

        gap:11px;

        padding-bottom:10px;
    }


    .category-products-2
    .category-products-card{

        flex:0 0 165px;

        min-width:165px;

        border-radius:var(--radius);
    }


    .category-products-2
    .category-products-image{

        height:210px;
    }


    .category-products-2
    .category-products-content{

        padding:11px;
    }


    .category-products-2
    .category-products-content h4{

        height:42px;

        margin-bottom:7px;

        font-size:13px;

        line-height:1.4;
    }


    .category-products-2
    .category-products-content p{

        margin-bottom:10px;

        font-size:15px;
    }


    .category-products-2
    .category-products-content a{

        font-size:11px;
    }
}


/* =========================================================
   FEATURED PRODUCTS / NEW ARRIVALS / BEST SELLERS
========================================================= */

.featured-products,
.new-arrivals,
.best-sellers{
    width:100%;
    padding:90px 0;
}

.featured-products,
.best-sellers{
    background:var(--white);
}

.new-arrivals{
    background:var(--background);
}


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

.featured-products .container,
.new-arrivals .container,
.best-sellers .container{
    width:100%;
    max-width:var(--max-width);

    margin:0 auto;

    padding:0 20px;
}


/* =========================================================
   SECTION HEADING
========================================================= */

.section-heading{
    text-align:center;
    margin-bottom:48px;
}

.section-heading span{
    display:inline-block;

    margin-bottom:10px;

    color:var(--primary-color);

    font-size:13px;
    font-weight:700;

    line-height:1.4;

    text-transform:uppercase;
    letter-spacing:2px;
}

.section-heading h2{
    margin:0;

    color:var(--text-dark);

    font-size:36px;
    font-weight:700;

    line-height:1.2;

    letter-spacing:-.5px;
}


/* =========================================================
   FEATURED PRODUCTS GRID
========================================================= */

.featured-products .product-grid{
    display:grid;

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

    gap:24px;
}


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

.featured-products .product-card{

    position:relative;

    overflow:hidden;

    background:var(--white);

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

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-sm);

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

.featured-products .product-card:hover{

    transform:translateY(-7px);

    border-color:transparent;

    box-shadow:var(--shadow-lg);
}


/* =========================================================
   PRODUCT IMAGE
========================================================= */

.featured-products .product-image{

    position:relative;

    width:100%;

    aspect-ratio:4 / 5;

    overflow:hidden;

    background:var(--extra-light);
}

.featured-products .product-image a{

    display:block;

    width:100%;
    height:100%;
}

.featured-products .product-image img{

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    transition:transform .6s ease;
}

.featured-products .product-card:hover
.product-image img{

    transform:scale(1.06);
}


/* =========================================================
   BEST SELLER BADGE
========================================================= */

.featured-products .product-badge{

    position:absolute;

    top:14px;
    left:14px;

    z-index:3;

    padding:7px 12px;

    background:var(--primary-color);

    color:var(--white);

    border-radius:50px;

    font-size:10px;
    font-weight:700;

    line-height:1;

    text-transform:uppercase;

    letter-spacing:.8px;

    box-shadow:var(--shadow-sm);
}


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

.featured-products .product-content{

    padding:20px 18px 22px;

    text-align:center;
}

.featured-products .product-content h3{

    margin:0 0 9px;

    color:var(--text-dark);

    font-size:17px;
    font-weight:600;

    line-height:1.4;
}

.featured-products .product-content h3 a{

    color:inherit;

    text-decoration:none;

    transition:color .25s ease;
}

.featured-products .product-content h3 a:hover{

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


/* =========================================================
   RATING
========================================================= */

.featured-products .rating{

    margin-bottom:9px;

    color:var(--primary-color);

    font-size:13px;

    letter-spacing:2px;

    line-height:1;
}


/* =========================================================
   FEATURED PRICE
========================================================= */

.featured-products .price{

    color:var(--primary-color);

    font-size:17px;
    font-weight:700;
}


/* =========================================================
   NEW ARRIVALS GRID
========================================================= */

.new-arrivals .arrival-wrapper{

    display:grid;

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

    gap:24px;
}


/* =========================================================
   ARRIVAL CARD
========================================================= */

.new-arrivals .arrival-card{

    position:relative;

    overflow:hidden;

    background:var(--white);

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

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-sm);

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

.new-arrivals .arrival-card:hover{

    transform:translateY(-7px);

    border-color:transparent;

    box-shadow:var(--shadow-lg);
}


/* =========================================================
   ARRIVAL IMAGE
========================================================= */

.new-arrivals .arrival-card > a{

    display:block;

    width:100%;

    aspect-ratio:4 / 5;

    overflow:hidden;

    background:var(--extra-light);
}

.new-arrivals .arrival-card img{

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    transition:transform .6s ease;
}

.new-arrivals .arrival-card:hover img{

    transform:scale(1.06);
}


/* =========================================================
   ARRIVAL CONTENT
========================================================= */

.new-arrivals .arrival-info{

    padding:20px 18px 22px;

    text-align:center;
}

.new-arrivals .arrival-info h3{

    margin:0 0 8px;

    color:var(--text-dark);

    font-size:17px;
    font-weight:600;

    line-height:1.4;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;
}

.new-arrivals .arrival-info span{

    color:var(--primary-color);

    font-size:17px;
    font-weight:700;
}


/* =========================================================
   BEST SELLERS GRID
========================================================= */

.best-sellers .best-grid{

    display:grid;

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

    gap:24px;
}


/* =========================================================
   BEST SELLER CARD
========================================================= */

.best-sellers .best-card{

    position:relative;

    overflow:hidden;

    background:var(--white);

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

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-sm);

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

.best-sellers .best-card:hover{

    transform:translateY(-7px);

    border-color:transparent;

    box-shadow:var(--shadow-lg);
}


/* =========================================================
   BEST SELLER IMAGE
========================================================= */

.best-sellers .best-image{

    width:100%;

    aspect-ratio:4 / 5;

    overflow:hidden;

    background:var(--extra-light);
}

.best-sellers .best-image img{

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    transition:transform .6s ease;
}

.best-sellers .best-card:hover
.best-image img{

    transform:scale(1.07);
}


/* =========================================================
   BEST SELLER CONTENT
========================================================= */

.best-sellers .best-content{

    padding:20px 18px 22px;

    text-align:center;
}

.best-sellers .best-content h3{

    margin:0 0 10px;

    color:var(--text-dark);

    font-size:17px;
    font-weight:600;

    line-height:1.4;
}


/* =========================================================
   BEST PRICE
========================================================= */

.best-sellers .best-price{

    margin-bottom:17px;

    color:var(--primary-color);

    font-size:17px;
    font-weight:700;
}


/* =========================================================
   BUY BUTTON
========================================================= */

.best-sellers .buy-btn{

    display:inline-flex;

    align-items:center;
    justify-content:center;

    min-width:130px;
    min-height:42px;

    padding:10px 18px;

    background:var(--primary-color);

    color:var(--white);

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

    border-radius:var(--radius);

    font-size:13px;
    font-weight:600;

    text-decoration:none;

    text-transform:uppercase;

    letter-spacing:.6px;

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

.best-sellers .buy-btn:hover{

    background:var(--primary-hover);

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

    transform:translateY(-2px);

    box-shadow:var(--shadow-sm);
}


/* =========================================================
   992px
========================================================= */

@media (max-width:992px){

    .featured-products,
    .new-arrivals,
    .best-sellers{

        padding:75px 0;
    }

    .featured-products .container,
    .new-arrivals .container,
    .best-sellers .container{

        padding:0 18px;
    }

    .section-heading{

        margin-bottom:38px;
    }

    .section-heading span{

        font-size:12px;

        letter-spacing:1.7px;
    }

    .section-heading h2{

        font-size:31px;
    }


    .featured-products .product-grid,
    .new-arrivals .arrival-wrapper,
    .best-sellers .best-grid{

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

        gap:22px;
    }
}


/* =========================================================
   768px
========================================================= */

@media (max-width:768px){

    .featured-products,
    .new-arrivals,
    .best-sellers{

        padding:65px 0;
    }

    .featured-products .container,
    .new-arrivals .container,
    .best-sellers .container{

        padding:0 16px;
    }

    .section-heading{

        margin-bottom:32px;
    }

    .section-heading span{

        margin-bottom:8px;

        font-size:11px;

        letter-spacing:1.5px;
    }

    .section-heading h2{

        font-size:28px;
    }


    .featured-products .product-grid,
    .new-arrivals .arrival-wrapper,
    .best-sellers .best-grid{

        gap:18px;
    }


    .featured-products .product-content,
    .new-arrivals .arrival-info,
    .best-sellers .best-content{

        padding:18px 16px 20px;
    }


    .featured-products .product-content h3,
    .new-arrivals .arrival-info h3,
    .best-sellers .best-content h3{

        font-size:16px;
    }


    .featured-products .price,
    .new-arrivals .arrival-info span,
    .best-sellers .best-price{

        font-size:16px;
    }
}


/* =========================================================
   480px
========================================================= */

@media (max-width:480px){

    .featured-products,
    .new-arrivals,
    .best-sellers{

        padding:52px 0;
    }

    .featured-products .container,
    .new-arrivals .container,
    .best-sellers .container{

        padding:0 12px;
    }


    /* Section Heading */

    .section-heading{

        margin-bottom:26px;
    }

    .section-heading span{

        font-size:10px;

        letter-spacing:1.3px;
    }

    .section-heading h2{

        font-size:24px;

        letter-spacing:-.2px;
    }


    /* 2 Column Mobile */

    .featured-products .product-grid,
    .new-arrivals .arrival-wrapper,
    .best-sellers .best-grid{

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

        gap:12px;
    }


    /* Featured */

    .featured-products .product-content{

        padding:13px 8px 15px;
    }

    .featured-products .product-content h3{

        margin-bottom:6px;

        font-size:14px;

        display:-webkit-box;

        -webkit-line-clamp:2;

        -webkit-box-orient:vertical;

        overflow:hidden;
    }

    .featured-products .rating{

        margin-bottom:7px;

        font-size:10px;

        letter-spacing:1px;
    }

    .featured-products .price{

        font-size:14px;
    }


    /* Badge */

    .featured-products .product-badge{

        top:8px;
        left:8px;

        padding:5px 8px;

        font-size:8px;

        letter-spacing:.5px;
    }


    /* New Arrivals */

    .new-arrivals .arrival-info{

        padding:13px 8px 15px;
    }

    .new-arrivals .arrival-info h3{

        margin-bottom:6px;

        font-size:14px;
    }

    .new-arrivals .arrival-info span{

        font-size:14px;
    }


    /* Best Sellers */

    .best-sellers .best-content{

        padding:13px 8px 15px;
    }

    .best-sellers .best-content h3{

        margin-bottom:6px;

        font-size:14px;
    }

    .best-sellers .best-price{

        margin-bottom:11px;

        font-size:14px;
    }

    .best-sellers .buy-btn{

        width:100%;

        min-width:0;

        min-height:36px;

        padding:8px;

        font-size:10px;

        letter-spacing:.4px;
    }
}


/* =========================================================
   360px
========================================================= */

@media (max-width:360px){

    .featured-products,
    .new-arrivals,
    .best-sellers{

        padding:45px 0;
    }

    .section-heading h2{

        font-size:22px;
    }

    .featured-products .product-grid,
    .new-arrivals .arrival-wrapper,
    .best-sellers .best-grid{

        gap:10px;
    }
}



/*==================================
        FLASH SALE
==================================*/
/* =========================================================
   OFFER / PROMO / SHOWCASE / WHY US / REVIEWS /
   INSTAGRAM / NEWSLETTER
   PREMIUM GREEN ECOMMERCE THEME
========================================================= */


/* =========================================================
   GLOBAL SECTION SYSTEM
========================================================= */

.flash-sale,
.promo-banner,
.product-showcase,
.why-us,
.reviews,
.instagram,
.newsletter{
    width:100%;
    position:relative;
}

.flash-sale .container,
.promo-banner .container,
.product-showcase .container,
.why-us .container,
.reviews .container,
.instagram .container,
.newsletter .container{

    width:100%;
    max-width:var(--max-width);

    margin:0 auto;

    padding-left:20px;
    padding-right:20px;
}


/* =========================================================
   COMMON BUTTON
========================================================= */

.flash-sale .btn-primary,
.promo-banner .hero-btn,
.product-showcase .hero-btn{

    display:inline-flex;

    align-items:center;
    justify-content:center;

    min-height:46px;

    padding:12px 24px;

    background:var(--primary-color);
    color:var(--white);

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

    border-radius:var(--radius);

    font-size:13px;
    font-weight:700;

    line-height:1;

    text-decoration:none;

    text-transform:uppercase;

    letter-spacing:.6px;

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

.flash-sale .btn-primary:hover,
.promo-banner .hero-btn:hover,
.product-showcase .hero-btn:hover{

    background:var(--primary-hover);

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

    transform:translateY(-2px);

    box-shadow:var(--shadow);
}


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

.flash-sale{

    padding:85px 0;

    background:var(--extra-light);
}


/* Main flash container */

.flash-container{

    display:grid;

    grid-template-columns:1.05fr .95fr;

    align-items:stretch;

    gap:45px;

    overflow:hidden;

    background:var(--white);

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

    border-radius:var(--radius-xl);

    box-shadow:var(--shadow);
}


/* Content */

.flash-content{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:flex-start;

    padding:55px 20px 55px 55px;
}

.flash-tag{

    display:inline-flex;

    align-items:center;

    margin-bottom:16px;

    padding:7px 13px;

    background:var(--extra-light);

    color:var(--primary-color);

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

    border-radius:50px;

    font-size:11px;

    font-weight:700;

    line-height:1;

    text-transform:uppercase;

    letter-spacing:1.2px;
}

.flash-content h2{

    margin:0 0 14px;

    color:var(--text-dark);

    font-size:42px;

    font-weight:700;

    line-height:1.12;

    letter-spacing:-.8px;
}

.flash-content p{

    max-width:550px;

    margin:0 0 25px;

    color:var(--text-light);

    font-size:15px;

    line-height:1.8;
}


/* =========================================================
   FLASH TIMER
========================================================= */

.timer{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:28px;
}

.timer-box{

    min-width:68px;

    padding:12px 8px;

    text-align:center;

    background:var(--background);

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

    border-radius:var(--radius);

}

.timer-box strong{

    display:block;

    margin-bottom:5px;

    color:var(--primary-color);

    font-size:24px;

    font-weight:700;

    line-height:1;
}

.timer-box span{

    display:block;

    color:var(--text-muted);

    font-size:9px;

    font-weight:700;

    line-height:1;

    text-transform:uppercase;

    letter-spacing:.6px;
}


/* =========================================================
   FLASH IMAGE
========================================================= */

.flash-image{

    min-height:480px;

    overflow:hidden;

    background:var(--extra-light);
}

.flash-image img{

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    transition:transform .7s ease;
}

.flash-container:hover .flash-image img{

    transform:scale(1.04);
}


/* =========================================================
   PROMO BANNER
========================================================= */

.promo-banner{

    padding:85px 0;

    background:var(--white);
}

.promo-box{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:space-between;

    min-height:390px;

    overflow:hidden;

    padding:55px 60px;

    background:var(--primary-color);

    border-radius:var(--radius-xl);

    box-shadow:var(--shadow-lg);
}

.promo-box > div{

    position:relative;

    z-index:2;

    width:52%;
}

.promo-box h2{

    margin:0 0 10px;

    color:var(--white);

    font-size:40px;

    font-weight:700;

    line-height:1.15;

    letter-spacing:-.5px;
}

.promo-box h4{

    margin:0 0 13px;

    color:rgba(255,255,255,.88);

    font-size:15px;

    font-weight:600;

    line-height:1.5;
}

.promo-box p{

    max-width:520px;

    margin:0 0 24px;

    color:rgba(255,255,255,.78);

    font-size:15px;

    line-height:1.8;
}

.promo-box .hero-btn{

    background:var(--white);

    color:var(--primary-color);

    border-color:var(--white);
}

.promo-box .hero-btn:hover{

    background:var(--extra-light);

    color:var(--primary-hover);

    border-color:var(--extra-light);
}

.promo-box img{

    position:absolute;

    right:0;
    top:0;

    width:48%;
    height:100%;

    object-fit:cover;

    opacity:.92;

    transition:transform .7s ease;
}

.promo-box:hover img{

    transform:scale(1.04);
}


/* =========================================================
   PRODUCT SHOWCASE
========================================================= */

.product-showcase{

    padding:90px 0;

    background:var(--background);
}

.showcase-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:65px;
}

.showcase-image{

    width:100%;

    aspect-ratio:1 / 1;

    overflow:hidden;

    background:var(--extra-light);

    border-radius:var(--radius-xl);

    box-shadow:var(--shadow);
}

.showcase-image img{

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    transition:transform .7s ease;
}

.showcase-image:hover img{

    transform:scale(1.05);
}


/* Showcase content */

.showcase-content h2{

    margin:0 0 10px;

    color:var(--text-dark);

    font-size:40px;

    font-weight:700;

    line-height:1.15;
}

.showcase-content h4{

    margin:0 0 15px;

    color:var(--primary-color);

    font-size:16px;

    font-weight:600;
}

.showcase-content p{

    margin:0 0 22px;

    color:var(--text-light);

    font-size:15px;

    line-height:1.8;
}


/* Feature list */

.feature-list{

    display:flex;

    flex-direction:column;

    gap:11px;

    margin-bottom:5px;
}

.feature-list div{

    color:var(--text-dark);

    font-size:14px;

    font-weight:600;

    line-height:1.5;
}

.feature-list div::first-letter{

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


/* =========================================================
   WHY CHOOSE US
========================================================= */

.why-us{

    padding:90px 0;

    background:var(--white);
}

.why-grid{

    display:grid;

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

    gap:22px;
}

.why-card{

    padding:30px 22px;

    text-align:center;

    background:var(--white);

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

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-sm);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.why-card:hover{

    transform:translateY(-6px);

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

    box-shadow:var(--shadow);
}

.why-icon{

    width:62px;
    height:62px;

    display:flex;

    align-items:center;
    justify-content:center;

    margin:0 auto 18px;

    background:var(--extra-light);

    color:var(--primary-color);

    border-radius:50%;

    font-size:25px;

    transition:
        background .3s ease,
        transform .3s ease;
}

.why-card:hover .why-icon{

    background:var(--primary-color);

    transform:scale(1.06);
}

.why-card h3{

    margin:0 0 9px;

    color:var(--text-dark);

    font-size:17px;

    font-weight:700;
}

.why-card p{

    margin:0;

    color:var(--text-light);

    font-size:13px;

    line-height:1.7;
}


/* =========================================================
   REVIEWS
========================================================= */

.reviews{

    padding:90px 0;

    background:var(--background);
}

.review-grid{

    display:grid;

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

    gap:24px;
}

.review-card{

    padding:30px 26px;

    background:var(--white);

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

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-sm);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.review-card:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow);
}

.review-stars{

    margin-bottom:15px;

    color:var(--primary-color);

    font-size:15px;

    letter-spacing:2px;
}

.review-card > p{

    margin:0 0 22px;

    color:var(--text-light);

    font-size:14px;

    line-height:1.8;
}


/* Customer */

.customer{

    display:flex;

    align-items:center;

    gap:12px;

    padding-top:17px;

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

.customer img{

    width:44px;
    height:44px;

    flex-shrink:0;

    object-fit:cover;

    border-radius:50%;

    border:2px solid var(--extra-light);
}

.customer h4{

    margin:0;

    color:var(--text-dark);

    font-size:14px;

    font-weight:700;
}


/* =========================================================
   INSTAGRAM
========================================================= */

.instagram{

    padding:90px 0;

    background:var(--white);
}

.instagram-grid{

    display:grid;

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

    gap:12px;
}

.instagram-grid img{

    width:100%;

    aspect-ratio:1 / 1;

    display:block;

    object-fit:cover;

    border-radius:var(--radius);

    transition:
        transform .35s ease,
        opacity .35s ease;
}

.instagram-grid img:hover{

    transform:scale(1.04);

    opacity:.9;
}


/* =========================================================
   NEWSLETTER
========================================================= */

.newsletter{

    padding:0 0 90px;

    background:var(--white);
}

.newsletter-box{

    padding:65px 30px;

    text-align:center;

    background:var(--extra-light);

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

    border-radius:var(--radius-xl);

    box-shadow:var(--shadow-sm);
}

.newsletter-box h2{

    margin:0 0 10px;

    color:var(--text-dark);

    font-size:34px;

    font-weight:700;

    line-height:1.2;
}

.newsletter-box p{

    margin:0 0 28px;

    color:var(--text-light);

    font-size:14px;

    line-height:1.6;
}


/* Newsletter form */

.newsletter-form{

    display:flex;

    max-width:560px;

    margin:0 auto;

    gap:10px;
}

.newsletter-form input{

    flex:1;

    min-width:0;

    height:48px;

    padding:0 17px;

    background:var(--white);

    color:var(--text-dark);

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

    border-radius:var(--radius);

    outline:none;

    font-family:inherit;

    font-size:13px;

    transition:
        border-color .25s ease,
        box-shadow .25s ease;
}

.newsletter-form input::placeholder{

    color:var(--text-muted);
}

.newsletter-form input:focus{

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

    box-shadow:0 0 0 3px rgba(31,122,91,.10);
}

.newsletter-form button{

    height:48px;

    padding:0 25px;

    background:var(--primary-color);

    color:var(--white);

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

    border-radius:var(--radius);

    font-family:inherit;

    font-size:13px;

    font-weight:700;

    cursor:pointer;

    text-transform:uppercase;

    letter-spacing:.5px;

    transition:
        background .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}

.newsletter-form button:hover{

    background:var(--primary-hover);

    transform:translateY(-2px);

    box-shadow:var(--shadow);
}


/* =========================================================
   992px
========================================================= */

@media (max-width:992px){

    .flash-sale,
    .promo-banner,
    .product-showcase,
    .why-us,
    .reviews,
    .instagram{

        padding:75px 0;
    }

    .newsletter{

        padding-bottom:75px;
    }


    /* Flash */

    .flash-container{

        grid-template-columns:1fr 1fr;

        gap:0;
    }

    .flash-content{

        padding:40px 25px;
    }

    .flash-content h2{

        font-size:34px;
    }

    .flash-image{

        min-height:400px;
    }


    /* Promo */

    .promo-box{

        min-height:350px;

        padding:45px;
    }

    .promo-box h2{

        font-size:34px;
    }


    /* Showcase */

    .showcase-grid{

        gap:40px;
    }

    .showcase-content h2{

        font-size:34px;
    }


    /* Why */

    .why-grid{

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

        gap:18px;
    }


    /* Reviews */

    .review-grid{

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

        gap:16px;
    }

    .review-card{

        padding:25px 20px;
    }


    /* Instagram */

    .instagram-grid{

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

        gap:12px;
    }
}


/* =========================================================
   768px
========================================================= */

@media (max-width:768px){

    .flash-sale,
    .promo-banner,
    .product-showcase,
    .why-us,
    .reviews,
    .instagram{

        padding:65px 0;
    }

    .newsletter{

        padding-bottom:65px;
    }

    .flash-sale .container,
    .promo-banner .container,
    .product-showcase .container,
    .why-us .container,
    .reviews .container,
    .instagram .container,
    .newsletter .container{

        padding-left:16px;
        padding-right:16px;
    }


    /* Flash */

    .flash-container{

        grid-template-columns:1fr;

        border-radius:var(--radius-lg);
    }

    .flash-content{

        padding:40px 30px;
    }

    .flash-content h2{

        font-size:32px;
    }

    .flash-content p{

        font-size:14px;
    }

    .flash-image{

        min-height:360px;

        max-height:430px;
    }


    /* Promo */

    .promo-box{

        min-height:420px;

        padding:40px 30px;

        align-items:flex-start;

        border-radius:var(--radius-lg);
    }

    .promo-box > div{

        width:65%;
    }

    .promo-box h2{

        font-size:30px;
    }

    .promo-box img{

        width:55%;

        opacity:.35;
    }


    /* Showcase */

    .showcase-grid{

        grid-template-columns:1fr;

        gap:35px;
    }

    .showcase-image{

        max-width:600px;

        margin:0 auto;
    }

    .showcase-content h2{

        font-size:31px;
    }


    /* Why */

    .why-grid{

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

        gap:16px;
    }


    /* Reviews */

    .review-grid{

        grid-template-columns:1fr;

        gap:16px;

        max-width:650px;

        margin:0 auto;
    }


    /* Instagram */

    .instagram-grid{

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

        gap:10px;
    }


    /* Newsletter */

    .newsletter-box{

        padding:50px 25px;
    }

    .newsletter-box h2{

        font-size:29px;
    }
}


/* =========================================================
   480px
========================================================= */

@media (max-width:480px){

    .flash-sale,
    .promo-banner,
    .product-showcase,
    .why-us,
    .reviews,
    .instagram{

        padding:52px 0;
    }

    .newsletter{

        padding-bottom:52px;
    }

    .flash-sale .container,
    .promo-banner .container,
    .product-showcase .container,
    .why-us .container,
    .reviews .container,
    .instagram .container,
    .newsletter .container{

        padding-left:12px;
        padding-right:12px;
    }


    /* =====================================================
       FLASH SALE MOBILE
    ===================================================== */

    .flash-container{

        border-radius:var(--radius-lg);
    }

    .flash-content{

        padding:30px 20px;
    }

    .flash-tag{

        margin-bottom:12px;

        padding:6px 10px;

        font-size:9px;
    }

    .flash-content h2{

        margin-bottom:10px;

        font-size:26px;

        letter-spacing:-.3px;
    }

    .flash-content p{

        margin-bottom:20px;

        font-size:13px;

        line-height:1.7;
    }

    .timer{

        width:100%;

        gap:7px;

        margin-bottom:22px;
    }

    .timer-box{

        flex:1;

        min-width:0;

        padding:10px 5px;
    }

    .timer-box strong{

        font-size:19px;
    }

    .timer-box span{

        font-size:7px;

        letter-spacing:.3px;
    }

    .flash-sale .btn-primary{

        width:100%;

        min-height:43px;

        padding:11px 15px;

        font-size:11px;
    }

    .flash-image{

        min-height:270px;

        max-height:320px;
    }


    /* =====================================================
       PROMO MOBILE
    ===================================================== */

    .promo-banner{

        padding-top:52px;
    }

    .promo-box{

        min-height:390px;

        padding:30px 20px;

        border-radius:var(--radius-lg);
    }

    .promo-box > div{

        width:100%;

        position:relative;

        z-index:3;
    }

    .promo-box h2{

        font-size:27px;

        line-height:1.2;
    }

    .promo-box h4{

        font-size:13px;
    }

    .promo-box p{

        font-size:13px;

        line-height:1.7;
    }

    .promo-box img{

        width:100%;

        opacity:.20;
    }

    .promo-box .hero-btn{

        min-height:42px;

        padding:10px 18px;

        font-size:11px;
    }


    /* =====================================================
       PRODUCT SHOWCASE MOBILE
    ===================================================== */

    .product-showcase{

        padding:52px 0;
    }

    .showcase-grid{

        gap:25px;
    }

    .showcase-image{

        border-radius:var(--radius-lg);
    }

    .showcase-content h2{

        font-size:27px;

        line-height:1.2;
    }

    .showcase-content h4{

        font-size:14px;
    }

    .showcase-content p{

        font-size:13px;

        line-height:1.7;
    }

    .feature-list{

        gap:9px;
    }

    .feature-list div{

        font-size:13px;
    }

    .product-showcase .hero-btn{

        width:100%;

        min-height:43px;

        font-size:11px;
    }


    /* =====================================================
       WHY CHOOSE US MOBILE
    ===================================================== */

    .why-grid{

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

        gap:10px;
    }

    .why-card{

        padding:22px 10px;

        border-radius:var(--radius);
    }

    .why-icon{

        width:48px;
        height:48px;

        margin-bottom:13px;

        font-size:20px;
    }

    .why-card h3{

        margin-bottom:6px;

        font-size:14px;
    }

    .why-card p{

        font-size:11px;

        line-height:1.6;
    }


    /* =====================================================
       REVIEWS MOBILE
    ===================================================== */

    .review-grid{

        gap:12px;
    }

    .review-card{

        padding:22px 17px;

        border-radius:var(--radius);
    }

    .review-stars{

        margin-bottom:11px;

        font-size:13px;

        letter-spacing:1.5px;
    }

    .review-card > p{

        margin-bottom:17px;

        font-size:12px;

        line-height:1.7;
    }

    .customer{

        padding-top:13px;
    }

    .customer img{

        width:38px;
        height:38px;
    }

    .customer h4{

        font-size:12px;
    }


    /* =====================================================
       INSTAGRAM MOBILE
    ===================================================== */

    .instagram-grid{

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

        gap:6px;
    }

    .instagram-grid img{

        border-radius:6px;
    }


    /* =====================================================
       NEWSLETTER MOBILE
    ===================================================== */

    .newsletter-box{

        padding:38px 15px;

        border-radius:var(--radius-lg);
    }

    .newsletter-box h2{

        font-size:24px;

        line-height:1.25;
    }

    .newsletter-box p{

        margin-bottom:20px;

        font-size:12px;
    }

    .newsletter-form{

        flex-direction:column;

        gap:8px;
    }

    .newsletter-form input{

        width:100%;

        height:45px;

        font-size:12px;
    }

    .newsletter-form button{

        width:100%;

        height:45px;

        font-size:11px;
    }
}


/* =========================================================
   360px EXTRA SMALL
========================================================= */

@media (max-width:360px){

    .flash-content h2,
    .promo-box h2,
    .showcase-content h2{

        font-size:24px;
    }

    .timer{

        gap:5px;
    }

    .timer-box{

        padding:9px 3px;
    }

    .timer-box strong{

        font-size:17px;
    }

    .timer-box span{

        font-size:6px;
    }

    .why-card{

        padding:18px 7px;
    }

    .why-card h3{

        font-size:13px;
    }

    .why-card p{

        font-size:10px;
    }
}


/*==================================
        NEWSLETTER
==================================*/


.newsletter{

padding:80px 0;

background:var(--primary-color);

}



.newsletter-box{

text-align:center;

color:var(--white);

}



.newsletter-box h2{

font-size:40px;

margin-bottom:15px;

}



.newsletter-box p{

margin-bottom:30px;

opacity:.9;

}



.newsletter-form{

display:flex;

justify-content:center;

gap:10px;

}



.newsletter-form input{

width:350px;

padding:15px 20px;

border:none;

border-radius:var(--radius);

}



.newsletter-form button{

padding:15px 30px;

border:none;

background:var(--white);

color:var(--primary-color);

font-weight:700;

border-radius:var(--radius);

}




@media(max-width:600px){

.newsletter-form{

flex-direction:column;

}


.newsletter-form input{

width:100%;

}

}

/* =========================================================
   CATEGORY SHOWCASE — DESIGN 1
   Simple Overlay Category Cards
========================================================= */


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

.category-showcase-1{
    width:100%;

    padding:85px 0;

    background:var(--background);

    position:relative;
}


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

.category-showcase-1 .category-showcase-container{

    width:100%;

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

    margin:0 auto;

    padding-left:20px;
    padding-right:20px;

    box-sizing:border-box;
}


/* =========================================================
   SECTION HEADING
========================================================= */

.category-showcase-1 .category-showcase-heading{

    text-align:center;

    margin-bottom:42px;
}


.category-showcase-1 .category-showcase-eyebrow{

    display:inline-block;

    margin-bottom:10px;

    color:var(--primary-color);

    font-size:12px;

    font-weight:700;

    line-height:1.2;

    text-transform:uppercase;

    letter-spacing:1.5px;
}


.category-showcase-1 .category-showcase-title{

    margin:0;

    color:var(--text-dark);

    font-size:36px;

    font-weight:700;

    line-height:1.2;

    letter-spacing:-.5px;
}


/* =========================================================
   CATEGORY GRID
========================================================= */

.category-showcase-1 .category-showcase-grid{

    display:grid;

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

    gap:22px;
}


/* =========================================================
   CATEGORY CARD
========================================================= */

.category-showcase-1 .category-showcase-card{

    display:block;

    position:relative;

    min-width:0;

    aspect-ratio:4 / 5;

    overflow:hidden;

    background:var(--extra-light);

    border-radius:var(--radius-lg);

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

    text-decoration:none;

    box-shadow:var(--shadow-sm);

    isolation:isolate;
}


/* =========================================================
   CATEGORY IMAGE
========================================================= */

.category-showcase-1 .category-showcase-image{

    position:absolute;

    inset:0;

    overflow:hidden;

    z-index:-2;
}


.category-showcase-1 .category-showcase-image img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    object-position:center;

    transition:
        transform .7s ease,
        filter .5s ease;
}


/* =========================================================
   DARK IMAGE OVERLAY
========================================================= */

.category-showcase-1 .category-showcase-overlay{

    position:absolute;

    inset:0;

    display:flex;

    align-items:flex-end;

    justify-content:center;

    padding:25px 20px;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.70) 0%,
            rgba(0,0,0,.35) 35%,
            rgba(0,0,0,0) 70%
        );

    z-index:1;

    transition:
        background .4s ease;
}


/* =========================================================
   CATEGORY NAME
========================================================= */

.category-showcase-1 .category-showcase-name{

    margin:0;

    color:var(--white);

    font-size:20px;

    font-weight:700;

    line-height:1.25;

    text-align:center;

    text-transform:capitalize;

    letter-spacing:.1px;

    transform:translateY(4px);

    transition:
        transform .35s ease;
}


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

.category-showcase-1 .category-showcase-card:hover{

    box-shadow:var(--shadow-lg);

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


.category-showcase-1 .category-showcase-card:hover
.category-showcase-image img{

    transform:scale(1.07);
}


.category-showcase-1 .category-showcase-card:hover
.category-showcase-overlay{

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.78) 0%,
            rgba(0,0,0,.40) 40%,
            rgba(0,0,0,.08) 75%
        );
}


.category-showcase-1 .category-showcase-card:hover
.category-showcase-name{

    transform:translateY(0);
}


/* =========================================================
   992px — TABLET / SMALL LAPTOP
========================================================= */

@media (max-width:992px){

    .category-showcase-1{

        padding:70px 0;
    }


    .category-showcase-1
    .category-showcase-heading{

        margin-bottom:34px;
    }


    .category-showcase-1
    .category-showcase-title{

        font-size:32px;
    }


    .category-showcase-1
    .category-showcase-grid{

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

        gap:18px;
    }


    .category-showcase-1
    .category-showcase-name{

        font-size:18px;
    }


    .category-showcase-1
    .category-showcase-overlay{

        padding:22px 15px;
    }
}


/* =========================================================
   768px — TABLET
========================================================= */

@media (max-width:768px){

    .category-showcase-1{

        padding:60px 0;
    }


    .category-showcase-1
    .category-showcase-container{

        padding-left:18px;
        padding-right:18px;
    }


    .category-showcase-1
    .category-showcase-heading{

        margin-bottom:30px;
    }


    .category-showcase-1
    .category-showcase-eyebrow{

        font-size:11px;
    }


    .category-showcase-1
    .category-showcase-title{

        font-size:29px;
    }


    .category-showcase-1
    .category-showcase-grid{

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

        gap:16px;
    }


    .category-showcase-1
    .category-showcase-card{

        aspect-ratio:1 / 1.18;

        border-radius:var(--radius-md);
    }


    .category-showcase-1
    .category-showcase-name{

        font-size:17px;
    }
}


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

@media (max-width:480px){

    .category-showcase-1{

        padding:50px 0;
    }


    .category-showcase-1
    .category-showcase-container{

        padding-left:15px;
        padding-right:15px;
    }


    .category-showcase-1
    .category-showcase-heading{

        margin-bottom:25px;
    }


    .category-showcase-1
    .category-showcase-eyebrow{

        margin-bottom:8px;

        font-size:10px;

        letter-spacing:1.2px;
    }


    .category-showcase-1
    .category-showcase-title{

        font-size:25px;

        letter-spacing:-.3px;
    }


    .category-showcase-1
    .category-showcase-grid{

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

        gap:12px;
    }


    .category-showcase-1
    .category-showcase-card{

        aspect-ratio:1 / 1.25;

        border-radius:var(--radius);
    }


    .category-showcase-1
    .category-showcase-overlay{

        padding:17px 10px;

        background:
            linear-gradient(
                to top,
                rgba(0,0,0,.72) 0%,
                rgba(0,0,0,.30) 45%,
                rgba(0,0,0,0) 75%
            );
    }


    .category-showcase-1
    .category-showcase-name{

        font-size:15px;

        line-height:1.2;
    }
}


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

@media (max-width:360px){

    .category-showcase-1
    .category-showcase-grid{

        gap:10px;
    }


    .category-showcase-1
    .category-showcase-name{

        font-size:14px;
    }
}

/* =========================================================
   FOOTER — DESIGN 1
   Fashion Store Footer
========================================================= */


/* =========================================================
   FOOTER SECTION
========================================================= */

.footer-design-1{

    width:100%;

    position:relative;

    background:var(--text-dark);

    color:var(--white);

    overflow:hidden;
}


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

.footer-design-1
.footer-design-1__container{

    width:100%;

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

    margin:0 auto;

    padding:70px 20px 60px;

    display:grid;

    grid-template-columns:
        1.35fr
        1fr
        1fr
        1fr;

    gap:55px;

    box-sizing:border-box;
}


/* =========================================================
   FOOTER COLUMN
========================================================= */

.footer-design-1
.footer-design-1__column{

    min-width:0;
}


/* =========================================================
   LOGO
========================================================= */

.footer-design-1
.footer-design-1__logo{

    margin-bottom:18px;
}


.footer-design-1
.footer-design-1__logo a{

    display:inline-block;

    color:var(--white);

    font-size:28px;

    font-weight:900;

    line-height:1;

    letter-spacing:2px;

    text-decoration:none;

    transition:
        color .25s ease;
}


.footer-design-1
.footer-design-1__logo a:hover{

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


/* =========================================================
   DESCRIPTION
========================================================= */

.footer-design-1
.footer-design-1__description{

    max-width:290px;

    margin:0;

    color:rgba(255,255,255,.65);

    font-size:14px;

    line-height:1.8;
}


/* =========================================================
   SOCIAL ICONS
========================================================= */

.footer-design-1
.footer-design-1__socials{

    display:flex;

    align-items:center;

    gap:10px;

    margin:25px 0 0;

    padding:0;

    list-style:none;
}


.footer-design-1
.footer-design-1__socials li{

    margin:0;

    padding:0;
}


.footer-design-1
.footer-design-1__socials a{

    width:38px;

    height:38px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid rgba(255,255,255,.16);

    border-radius:50%;

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

    color:rgba(255,255,255,.75);

    font-size:17px;

    text-decoration:none;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .25s ease;
}


.footer-design-1
.footer-design-1__socials a:hover{

    background:var(--primary-color);

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

    color:var(--white);

    transform:translateY(-3px);
}


/* =========================================================
   COLUMN HEADING
========================================================= */

.footer-design-1
.footer-design-1__heading{

    margin:3px 0 22px;

    color:var(--white);

    font-size:13px;

    font-weight:700;

    line-height:1.3;

    text-transform:uppercase;

    letter-spacing:1px;
}


/* =========================================================
   LINKS LIST
========================================================= */

.footer-design-1
.footer-design-1__links{

    margin:0;

    padding:0;

    list-style:none;
}


.footer-design-1
.footer-design-1__links li{

    margin:0 0 12px;

    padding:0;
}


.footer-design-1
.footer-design-1__links li:last-child{

    margin-bottom:0;
}


.footer-design-1
.footer-design-1__links a{

    display:inline-block;

    color:rgba(255,255,255,.62);

    font-size:13px;

    line-height:1.7;

    text-decoration:none;

    transition:
        color .25s ease,
        transform .25s ease;
}


.footer-design-1
.footer-design-1__links a:hover{

    color:var(--primary-color);

    transform:translateX(3px);
}


/* =========================================================
   FOOTER BOTTOM
========================================================= */

.footer-design-1
.footer-design-1__bottom{

    width:100%;

    border-top:1px solid rgba(255,255,255,.10);

    padding:20px;

    text-align:center;

    box-sizing:border-box;
}


.footer-design-1
.footer-design-1__bottom p{

    margin:0;

    color:rgba(255,255,255,.48);

    font-size:12px;

    line-height:1.5;
}


/* =========================================================
   992px — SMALL LAPTOP / TABLET
========================================================= */

@media (max-width:992px){

    .footer-design-1
    .footer-design-1__container{

        grid-template-columns:
            1.3fr
            1fr
            1fr;

        gap:40px;

        padding-top:60px;

        padding-bottom:50px;
    }


    /*
     * Brand takes first row naturally.
     */

    .footer-design-1
    .footer-design-1__column:first-child{

        grid-column:span 3;
    }


    .footer-design-1
    .footer-design-1__description{

        max-width:420px;
    }
}


/* =========================================================
   768px — TABLET
========================================================= */

@media (max-width:768px){

    .footer-design-1
    .footer-design-1__container{

        grid-template-columns:
            1fr
            1fr;

        gap:38px 30px;

        padding:55px 20px 45px;
    }


    .footer-design-1
    .footer-design-1__column:first-child{

        grid-column:span 2;

        text-align:center;
    }


    .footer-design-1
    .footer-design-1__description{

        max-width:450px;

        margin-left:auto;

        margin-right:auto;
    }


    .footer-design-1
    .footer-design-1__socials{

        justify-content:center;
    }


    .footer-design-1
    .footer-design-1__heading{

        margin-bottom:17px;

        font-size:12px;
    }


    .footer-design-1
    .footer-design-1__links a{

        font-size:13px;
    }
}


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

@media (max-width:480px){

    .footer-design-1
    .footer-design-1__container{

        grid-template-columns:1fr;

        gap:30px;

        padding:45px 18px 38px;
    }


    .footer-design-1
    .footer-design-1__column:first-child{

        grid-column:auto;

        padding-bottom:8px;
    }


    .footer-design-1
    .footer-design-1__logo{

        margin-bottom:15px;
    }


    .footer-design-1
    .footer-design-1__logo a{

        font-size:25px;

        letter-spacing:1.7px;
    }


    .footer-design-1
    .footer-design-1__description{

        font-size:13px;

        line-height:1.7;
    }


    .footer-design-1
    .footer-design-1__socials{

        margin-top:20px;

        gap:8px;
    }


    .footer-design-1
    .footer-design-1__socials a{

        width:36px;

        height:36px;

        font-size:16px;
    }


    .footer-design-1
    .footer-design-1__heading{

        margin:0 0 14px;

        font-size:12px;

        letter-spacing:.8px;
    }


    .footer-design-1
    .footer-design-1__links li{

        margin-bottom:9px;
    }


    .footer-design-1
    .footer-design-1__links a{

        font-size:12px;

        line-height:1.65;
    }


    .footer-design-1
    .footer-design-1__bottom{

        padding:17px 15px;
    }


    .footer-design-1
    .footer-design-1__bottom p{

        font-size:11px;

        line-height:1.6;
    }
}