.box{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;padding:28px;max-width:1200px;margin:0 auto}

.box2{background:#ffffff;border-radius:12px;padding:14px;box-shadow:0 8px 24px rgba(15,23,42,0.06);transition:transform .18s ease,box-shadow .18s ease;overflow:hidden;text-align:center}

.box2:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(15,23,42,0.12)}

.box2 .image{width:100%;height:260px;overflow:hidden;border-radius:8px;margin-bottom:12px}

.image img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;display:block}

.box2:hover .image img{transform:scale(1.06)}

.box2 h3{font-size:1.05rem;margin:8px 0 6px;color:#0f172a}

.price{color:var(--accent,#e74c3c);font-weight:700;margin-bottom:6px}

@media (max-width:520px){
    .box{padding:16px;gap:14px}
    .box2 .image{height:200px}
}

/* Banner / hero */
.banner{display:block;max-width:1200px;margin:18px auto;border-radius:12px;height:340px;object-fit:cover}

.box{gap:28px}

.box2 h3{font-size:1rem;line-height:1.2;min-height:2.4em;overflow:hidden;text-overflow:ellipsis}

.box2 .card-body{display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px 4px}

.box2 .image{background:#f3f6f9}

/* Ensure images keep aspect and don't push layout */
.image img{max-width:100%;height:100%;display:block}

@media (min-width:1000px){
    .box{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:700px){
    .banner{height:200px}
}

.site-footer{
    margin-top:32px;
    padding:24px 16px;
    background:linear-gradient(90deg,var(--nav-start,#0f172a),var(--nav-end,#081226));
    color:#fff;
}

.footer-inner{
    max-width:1200px;
    margin:0 auto;
    text-align:center;
}

.footer-brand{
    font-size:1.1rem;
    font-weight:700;
    margin-bottom:6px;
}

.footer-text,
.footer-copy{
    color:rgba(255,255,255,0.82);
    font-size:.95rem;
}

.footer-copy{
    margin-top:6px;
}