/* ==========================================================
   BabyChoice Nappies
   RESPONSIVE CSS
========================================================== */


/* ==========================================================
   TABLETS
========================================================== */


@media (max-width: 1024px){


.container{

padding:0 20px;

}


/* HERO */

.hero-slide .container{

grid-template-columns:1fr;

gap:30px;

text-align:center;

}


.hero-copy p{

margin-left:auto;

margin-right:auto;

}


.hero-actions{

justify-content:center;

}


.hero-visual{

margin-top:20px;

}


/* PRODUCT DETAIL */

.pd-layout{

grid-template-columns:1fr;

}


/* FOOTER */

.footer-grid{

gap:30px;

}



}




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


@media (max-width:768px){



/* GENERAL */

.section{

padding:55px 0;

}



h1{

font-size:34px!important;

}



h2{

font-size:28px!important;

}



/* HEADER */

.nav-wrap{

padding:14px 18px;

}



.logo-img{

height:38px;

}



/* HERO */


.hero-slider{

min-height:600px;

}


.hero-slide{

padding:40px 0;

}



.hero-copy h1{

font-size:34px;

}



.hero-copy p{

font-size:16px;

}



.hero-features{

grid-template-columns:1fr;

}



.hero-actions{

flex-direction:column;

align-items:center;

}


.hero-actions .btn{

width:90%;

justify-content:center;

}



.hero-visual{

display:none;

}



/* HIDE ARROWS */

.hero-arrow{

display:none;

}




/* SIZE CARDS */


.size-card{

max-width:none;

flex:1 1 100%;

}




/* PRODUCTS */


.product-card,
.shop-product-card{

max-width:none;

flex:1 1 100%;

}



.product-grid,
.shop-product-grid{

gap:20px;

}




/* WHY CARDS */


.why-card{

max-width:none;

flex:1 1 100%;

}




/* REVIEWS */


.review-card{

max-width:none;

flex:1 1 100%;

}




/* CTA */


.cta-band{


padding:35px 20px;


margin:0;


}


.cta-band h2{

font-size:26px!important;

}




/* PRODUCT PAGE */


.gallery-main{

height:300px;

}



.pd-info h1{

font-size:32px;

}



/* CART */


.cart-summary-wrap{

justify-content:stretch;

}



.cart-summary{

width:100%;

min-width:0;

}



.cart-table{

min-width:650px;

}




/* FORMS */


.form-wrapper{

padding:25px;

}




/* FOOTER */


.site-footer{

padding:50px 0 20px;

}


.footer-grid{

flex-direction:column;

}


.footer-grid > div{

width:100%;

}


.footer-social{

justify-content:flex-start;

}



}





/* ==========================================================
   SMALL PHONES
========================================================== */


@media (max-width:480px){



.container{

padding:0 16px;

}



.logo-img{

height:34px;

}



.hero-copy h1{

font-size:30px!important;

}



.btn{

padding:12px 22px;

font-size:15px;

}



.section-head h2{

font-size:25px!important;

}



.pack-pill{

width:100%;

}



.qty-area{

flex-direction:column;

align-items:flex-start;

}



.cart-product img{

width:55px;

height:55px;

}



.footer-social a{

width:38px;

height:38px;

}



}