body{
    margin:0;
    font-family:Arial, Helvetica, sans-serif;
    background:#f5f6fa;
}



/* NAVBAR */

.navbar{

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:15px 100px;

    background:white;

    box-shadow:0px 2px 6px rgba(0,0,0,0.1);

}

.logo-img {
    height: 100px;
    width: auto;
}


.logo img,
.logo-footer img {
    display: block;
}




.search-box{

    width:40%;

}

.search-box input{

    width:100%;

    padding:10px;

    border-radius:8px;

    border:1px solid #ccc;

}



.user-icon{

    font-size:24px;

    cursor:pointer;

}



/* TITULO */

.title-section{

    text-align:center;

    margin-top:40px;

}

.title-section h1{

    font-size:36px;

    color:#333;

}



/* PRODUCTOS */

.products-container{

    width:90%;
    margin:auto;
    margin-top:30px;

}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}



/* CARD */

.product-card {
    background: white;
    border-radius: 12px;
    padding: 18px;
    text-align: center;
    box-shadow: 0px 4px 10px rgba(0,0,0,0.1);
    transition: 0.3s;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    height: 320px; /* 🔥 igual que en WordPress */
}

.product-card:hover{

    transform:translateY(-5px);

}



/* IMAGEN */

.product-image {
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-image img {
    height: 100%;
    width: 100%;
    object-fit: contain; /* 🔥 mantiene proporción */
}



/* INFO */
.product-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
}

.product-info h3 {
    font-size: 15px;
    font-weight: 600;
    height: 40px; /* 🔥 todos iguales */
    overflow: hidden;
}



.barcode{

    color:#777;

    font-size:14px;

}



.price {
    margin-top: auto;
    font-size: 22px;
    color: #1E5B2E;
    font-weight: bold;
}



@media(max-width:1024px){
    .products-grid{
        grid-template-columns: repeat(3,1fr);
    }
    
}

@media(max-width:768px){
    .products-grid{
        grid-template-columns: repeat(2,1fr);
    }
    .navbar {
        flex-direction: column;
        gap: 15px;
        padding: 15px;
    }

    .search-box {
        width: 100%;
    }

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

.footer-container{

flex-direction:column;

gap:30px;

text-align:center;

}
@media(max-width:600px){

.navbar{

padding:15px;

}

.search-box{

width:50%;

}

.title-section h1{

font-size:28px;

}

}


}
@media(max-width:480px){
    .products-grid{
        grid-template-columns: 1fr;
    }
    .footer-branches ul{

        margin-left: 25%;
        justify-content:flex-start !important;

    }
  
}
@media(max-width:380px){
    .products-grid{
        grid-template-columns: 1fr;
    }
    .footer-branches ul{

        margin-left: 20%;

    }
  
}


/* FOOTER */

.footer{

    margin-top:80px;
    background:white;
    box-shadow: 0px -2px 6px rgba(0,0,0,0.1);
    color:#777;
    text-align:center;

}


.footer-container{

    width:90%;
    margin:auto;
    padding:40px 0;

}

.logo-footer{
    display: flex;
    justify-content: center;
}

.logo-footer-img {
    height: 100px;
    width: auto;
}


/* SUCURSALES EN FILA */

.footer-branches ul{

    list-style:none;
    padding:0;

    display:flex;
    justify-content:center;
    gap:50px;

    flex-wrap:wrap;

}


/* LINKS */

.footer-branches a{

    text-decoration:none;
    color:#1E5B2E;
    font-size:18px;

    transition:0.2s;

}


.footer-branches a:hover{

    color:#F4D03F;
    transform:scale(1.05);

}



/* RESPONSIVE */