/* นำเข้า Font 'Prompt' จาก Google Fonts สำหรับภาษาไทย */
@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;500;600;700&display=swap');

body {
    font-family: 'Prompt', sans-serif;
    background-color: #f8f9fa; /* สีพื้นหลังเว็บอ่อนๆ สบายตา */
}

/* เอฟเฟกต์เวลาเอาเมาส์ไปชี้ที่การ์ดสินค้า (ที่เราใส่คลาส transition-hover ไว้ในหน้า index) */
.transition-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.transition-hover:hover {
    transform: translateY(-5px); /* ขยับการ์ดลอยขึ้นนิดนึง */
    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important; /* เพิ่มเงาให้ดูมีมิติ */
}

/* ปรับแต่ง Navbar เล็กน้อย */
.navbar-brand {
    font-size: 1.5rem;
    letter-spacing: 1px;
}

/* ปรับแต่งปุ่มตะกร้าสินค้า ให้ตัวเลข Badge ดูเด่นขึ้น */
.nav-link .badge {
    position: relative;
    top: -2px;
    font-size: 0.75rem;
}

/* ปรับแต่งช่องกรอกข้อมูล (Input Focus) */
.form-control:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* ปรับแต่งภาพสินค้าในหน้า Product Detail ให้ขนาดพอดีกรอบ */
.product-image-main {
    max-height: 400px;
    object-fit: contain;
}