@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Prompt:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

.container {
    font-family: "Poppins", sans-serif;
    max-width: 1200px;
    margin: auto;
    padding: 0 20px;
}
.product-title { margin: 40px 0 40px; }
.product-title-thai { font-family: "Prompt", sans-serif; margin: 40px 0 40px; }

.product-con {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}
.product-item {
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
    transition: 0.3s;
    outline: 1px solid rgba(0,0,0,0.1);
    overflow: hidden;
}
.product-item:hover { box-shadow: 0 0 15px rgba(0,0,0,0.3); }

.product-item img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    display: block;
}
.product-info { margin: 10px 0; padding: 15px; font-size: 14px; }
.product-info-thai { margin: 10px 0; padding: 15px; font-size: 14px; font-family: "Prompt", sans-serif; }
.product-info p { padding: 5px 5px 0 0; font-size: 14px; }
.product-details { padding: 10px; }
.product-price {
    font-family: "Poppins", sans-serif;
    font-size: 16px; font-weight: 600;
    color: #7c2220; margin: 10px 0; padding: 0 10px;
}

a { color: black; text-decoration: none; }
a:hover { color: #5f2119; }

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .product-con { grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .product-item img { height: 280px; }
}

@media (max-width: 768px) {
    .product-con { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .product-item img { height: 220px; }
    .product-info { font-size: 13px; padding: 10px; }
    .product-info-thai { font-size: 13px; padding: 10px; }
    .product-title { margin: 24px 0 16px; font-size: 20px; }
    .product-title-thai { margin: 24px 0 16px; font-size: 20px; }
}

@media (max-width: 480px) {
    .product-con { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .product-item img { height: 180px; }
    .product-info { font-size: 12px; padding: 8px; }
    .product-info-thai { font-size: 12px; padding: 8px; }
    .product-price { font-size: 14px; }
}