.product{
    padding:10px 50px;
}

.productList {
    display: flex; 
    gap: 40px; 
    margin-top: 10px; 
    margin-bottom: 20px;
}
.navSide { 
    flex:0 0 320px; 
}

.productList>div{
    flex:1;
}


.listHeader{
    display: flex;
    gap:30px;
}

.logo{
    width: 250px;
    display: block;
}
h1 { 
    font-size:2rem; 
    font-weight:700; 
}
.desc { 
    color:#666; 
    line-height:1.6; 
}
.cta-btn { 
    display:inline-block; 
    padding:10px 20px; 
    background:#ff8a3d;
    color:#fff; 
    border-radius:999px; 
    font-weight:600; 
    text-decoration:none; 
}
.product-grid { 
    display:grid; 
    grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); 
    gap:20px; 
    margin-top:30px; 
}
.product-card { 
    background-color:#ddd; 
    padding:16px 16px 60px 16px; 
    border-radius:16px; 
    box-shadow:0 10px 25px rgba(0,0,0,0.06); 
    position: relative;
}
.product-image { 
    width:100%;
    aspect-ratio:4/3; 
    background:#fff; 
    overflow:hidden;
    border-radius:8px; 
}
.product-image img{
    height: 100%;
    width: 100%;
    object-fit:cover;
}
.title { 
    font-weight:700; 
    font-size:1.7rem; 
    margin:4px 0 6px; 
    color: black;
}
.meta { 
    font-size:1.1rem; 
    color:#666; 
    line-height:1.5; 
    min-height:40px; 
}

.footer { 
    text-align:right;
}
.detailTag { 
    color:white; 
    font-weight:400; 
    font-size:1rem; 
    text-decoration:none; 
    background-color:var(--primary);
    border-radius: 20px;
    padding: 0 12px;;
    position: absolute;
    bottom:20px;
    right:15px;
}


@media screen and (max-width: 768px) {
    .breadcrumb{
        font-size: 0.9em;
    }
    .productList{
        flex-direction:column;
        gap:0;
        margin-top: 0;
    }
    .listHeader{
        flex-direction:column;
        gap:0;
        text-align: center;
    }
    .listHeader img{
        display: block;
        margin: 0 auto;
    }
    .listHeader p{
        text-align: left;
    }
    
}