/* ===============================
   GLOBAL RESPONSIVE SETTINGS
=============================== */

*{
box-sizing:border-box;
}

body{
overflow-x:hidden;
font-family:Arial, sans-serif;
}

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

.container{
padding-left:15px;
padding-right:15px;
}

/* ===============================
   NAVBAR
=============================== */

.logo-img{
height:60px;
max-width:100%;
}

@media (max-width:576px){
.logo-img{
height:45px;
}
}

.navbar{
flex-wrap:wrap;
}

.nav-action-wrap{
display:flex;
flex-wrap:wrap;
gap:8px;
}

/* ===============================
   GRID SYSTEM FIX
=============================== */

/* Force better spacing */
.row{
margin-left:0;
margin-right:0;
}

/* ===============================
   PRODUCT CARDS
=============================== */

.product-card{
width:100%;
height:100%;
padding:15px;
border-radius:12px;
}

.product-img{
width:100%;
height:clamp(140px, 25vw, 220px);
object-fit:contain;
}

/* ===============================
   TEXT RESPONSIVE
=============================== */

h1{ font-size:clamp(22px, 4vw, 32px); }
h2{ font-size:clamp(20px, 3.5vw, 28px); }
h3{ font-size:clamp(18px, 3vw, 24px); }
h6{ font-size:clamp(14px, 2.5vw, 16px); }

p{
font-size:clamp(13px, 2.5vw, 16px);
}

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

.btn{
width:100%;
}

@media (min-width:576px){
.btn{
width:auto;
}
}

/* ===============================
   FORMS (LOGIN / REGISTER)
=============================== */

.login-container,
.register-container{
width:100%;
max-width:420px;
margin:auto;
padding:20px;
}

/* ===============================
   IMAGES
=============================== */

img{
max-width:100%;
height:auto;
}

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

@media (max-width:576px){

.product-card{
padding:12px;
}

.price{
font-size:18px;
}

.navbar{
padding:10px;
}

}

/* ===============================
   TABLE RESPONSIVE (if used)
=============================== */

.table-responsive{
overflow-x:auto;
}

/* ===============================
   FLEX FIXES
=============================== */

.flex-wrap{
flex-wrap:wrap !important;
}

/* ===============================
   SPACING FIX
=============================== */

.mt-5{
margin-top:2rem !important;
}

.mb-5{
margin-bottom:2rem !important;
}