/* ======================================================
   SEAN B SHOP
   GLOBAL RESPONSIVE SYSTEM
   assets/css/base/responsive.css
====================================================== */


/* ======================================================
   GLOBAL RESPONSIVE RULES
====================================================== */


html{

    width:100%;

    max-width:100%;

    overflow-x:hidden;

    scroll-behavior:smooth;

}



body{

    width:100%;

    max-width:100%;

    overflow-x:hidden;

}




*,
*::before,
*::after{

    box-sizing:border-box;

}





img,
video{

    max-width:100%;

    height:auto;

    display:block;

}





.container{

    width:100%;

    max-width:1280px;

    margin:0 auto;

    padding-left:20px;

    padding-right:20px;

}





/* ======================================================
   RESPONSIVE GRID HELPERS
====================================================== */


.row{

    display:flex;

    flex-wrap:wrap;

}



.col{

    flex:1;

}





/* ======================================================
   DESKTOP DEFAULT
====================================================== */


.mobile-only{

    display:none!important;

}



.desktop-only{

    display:block;

}







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


@media(max-width:1200px){


.container{

    padding-left:18px;

    padding-right:18px;

}



}





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


@media(max-width:991px){



.container{

    padding-left:15px;

    padding-right:15px;

}





.desktop-only{

    display:none!important;

}



.mobile-only{

    display:block!important;

}




.row{

    gap:20px;

}





}



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


@media(max-width:768px){



html{

    font-size:15px;

}




body{

    overflow-x:hidden;

}





.container{

    padding-left:12px;

    padding-right:12px;

}





/* STACK FLEX ITEMS */


.flex-responsive{

    flex-direction:column!important;

}





/* HIDE LARGE ELEMENTS */


.hide-mobile{

    display:none!important;

}





/* FULL WIDTH MOBILE */


.full-mobile{

    width:100%!important;

}





/* BUTTONS */


button,
.btn{

    min-height:42px;

}





/* FORMS */


input,
textarea,
select{

    width:100%;

    max-width:100%;

}





}





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


@media(max-width:480px){



.container{

    padding-left:10px;

    padding-right:10px;

}




h1{

    font-size:26px;

    line-height:1.25;

}





h2{

    font-size:22px;

}





h3{

    font-size:18px;

}





.section{

    padding-top:35px;

    padding-bottom:35px;

}





}





/* ======================================================
   EXTRA SMALL DEVICES
====================================================== */


@media(max-width:360px){



html{

    font-size:14px;

}





.container{

    padding-left:8px;

    padding-right:8px;

}





h1{

    font-size:23px;

}





}





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


.table-responsive{

    width:100%;

    overflow-x:auto;

    -webkit-overflow-scrolling:touch;

}





.table-responsive table{

    min-width:650px;

}







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


@media(max-width:768px){



.card-grid,
.product-grid,
.category-grid,
.brand-grid{

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

    gap:12px;

}





}



@media(max-width:480px){



.card-grid,
.product-grid,
.category-grid,
.brand-grid{

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

    gap:10px;

}



}





/* ======================================================
   MOBILE SPACING FIXES
====================================================== */


@media(max-width:768px){



.section-header{

    flex-direction:column;

    align-items:flex-start;

    gap:15px;

}




.section-title{

    text-align:left;

}





}



 
/* ======================================================
   MOBILE NAVIGATION SUPPORT
====================================================== */


@media(max-width:991px){



body{

    padding-bottom:70px;

}





}





/* ======================================================
   ACCESSIBILITY
====================================================== */


@media(prefers-reduced-motion:reduce){


*{

    scroll-behavior:auto!important;

    transition:none!important;

    animation:none!important;

}


}