/* =========================================================
   HOUSE OF WOVNLY - RESPONSIVE OVERRIDES
========================================================= */

/*
|--------------------------------------------------------------------------
| Responsive styles will be added section-by-section while matching
| the approved Figma mobile/tablet layouts.
|--------------------------------------------------------------------------
*/

@media (max-width: 991px) {

    .wovnly-container {
        width: calc(100% - 40px);
    }

}

@media (max-width: 767px) {

    .wovnly-container {
        width: calc(100% - 30px);
    }

}

@media (max-width: 575px) {

    .wovnly-container {
        width: calc(100% - 24px);
    }

}

/* =========================================================
   SHOP BY COLLECTION - RESPONSIVE
========================================================= */

@media (max-width: 1600px) {

    .wovnly-collections {
        height: auto;
        min-height: 850px;
    }

    .wovnly-collection-grid {
        position: relative;

        top: auto;
        left: auto;

        padding: 250px 5% 80px;

        display: grid;
        grid-template-columns:
            repeat(5, minmax(250px, 1fr));

        gap: 35px;

        height: auto;
    }

    .wovnly-collection-card {
        position: relative;

        left: auto ;
        top: auto ;

        width: 100%;
        height: auto;

        min-height: 380px;
    }



/* =========================================================
   FIGMA CARD POSITIONS
========================================================= */

/*
|--------------------------------------------------------------------------
| Bedding
| X = 79px
| Y = 2383px
|--------------------------------------------------------------------------
*/

.wovnly-card-bedding {
    
    top: 58px;
}


/*
|--------------------------------------------------------------------------
| Pillows
| X = 429.91px
| Y = 2336.88px
|--------------------------------------------------------------------------
*/

.wovnly-card-pillows {
    
    top: 11.88px;
}


/*
|--------------------------------------------------------------------------
| Cushions
| X = 780.82px
| Y = 2383.31px
|--------------------------------------------------------------------------
*/

.wovnly-card-offset {
    
    top: 58px;
}



.wovnly-collection-grid {   /* the parent wrapper of the cards */
    display: flex;
    align-items: flex-start; /* important, so offset cards can drop down */
    gap: 20px;
}

.wovnly-collection-card {
    flex: 1;
    transition: margin-top 0.3s ease;
}

/* Every even card gets pushed down */
.wovnly-collection-card:nth-child(even) {
    margin-top: 40px;
}

/*
|--------------------------------------------------------------------------
| Bath
| X = 1131.73px
| Y = 2325px
|--------------------------------------------------------------------------
*/

.wovnly-card-bath {
    
    top: 0;
}


/*
|--------------------------------------------------------------------------
| Duvet
| X = 1483.72px
| Y = 2383.31px
|--------------------------------------------------------------------------
*/

.wovnly-card-duvet {
    
    top: 58px;
}

}


@media (max-width: 1200px) {

    .wovnly-collections {
        min-height: 1200px;
    }

    .wovnly-collection-grid {
        grid-template-columns:
            repeat(3, minmax(230px, 1fr));

        padding-left: 5%;
        padding-right: 5%;
    }

}


@media (max-width: 991px) {

    .wovnly-collections {
        min-height: auto;

        padding-bottom: 70px;
    }

    .wovnly-collections-heading {
        position: relative;

        top: auto;
        left: auto;

        transform: none;

        width: calc(100% - 40px);

        margin: 0 auto;

        padding-top: 60px;
    }

    .wovnly-collections-heading h2 {
        font-size: 44px;
    }

    .wovnly-collections-heading p {
        font-size: 17px;
        line-height: 27px;
    }

    .wovnly-collection-grid {
        padding: 50px 30px 0;

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

        gap: 30px;
    }

    .wovnly-collection-card {
        min-height: 370px;
    }

    .wovnly-collection-image {
        height: 300px;
    }

}


@media (max-width: 575px) {

    .wovnly-collections-heading {
        padding-top: 50px;
    }

    .wovnly-collections-heading h2 {
        font-size: 36px;
    }

    .wovnly-collections-heading p {
        font-size: 14px;
        line-height: 23px;
    }

    .wovnly-collection-grid {
        padding: 40px 20px 0;

        grid-template-columns: 1fr;

        gap: 25px;
    }

    .wovnly-collection-card {
        width: 100%;
    }

    .wovnly-collection-image {
        height: 320px;
    }

    .wovnly-collection-name {
        font-size: 21px;
    }

}