@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');

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

/* ===== SLIDER/HERO ===== */
.slider-container { width: 100%; }
.slider {
    position: relative; width: 100%; height: 60vh; margin-top: 40px;
}
.slider img {
    width: 100%; height: 100%; object-fit: cover; opacity: 0.5;
}

/* ===== PAGE CONTENT ===== */
.content { padding: 20px; }
.content h1 {
    text-align: center; font-size: 50px; color: #c68247; margin: 20px 0;
}
.content p {
    text-align: center; color: #e0a771; margin: 20px 0; font-size: 32px;
}

/* ===== FILTER DROPDOWN ===== */
.filter-container {
    display: flex; justify-content: center; align-items: center;
    margin: 20px auto; gap: 10px; font-size: 18px;
}
.filter-container label { font-weight: bold; color: #c68247; }
#productFilter {
    background: #fff; color: #000; border: 1px solid #c68247;
    padding: 8px 12px; border-radius: 8px; font-size: 16px; cursor: pointer;
    transition: all 0.3s;
}
#productFilter:hover, #productFilter:focus { border-color: #a35f2f; outline: none; }
@media (max-width: 768px) {
    #productFilter { width: 100%; margin-top: 10px; font-size: 18px; padding: 10px 14px; }
    .filter-container label { display: none; }
}

/* ===== PRODUCT LISTING ===== */
.listing-container {
    display: grid;
    grid-template-columns: repeat(3, min-content);
    gap: 20px;
    justify-content: center;
    padding: 20px;
}
@media (max-width: 768px) {
    .listing-container { grid-template-columns: repeat(2, 1fr); gap: 15px; }
}
.listing-item {
    background: #fff; color: #000;
    display: flex; flex-direction: column; align-items: center;
    box-shadow: 0 8px 12px #e0a771;
    border-radius: 10px; overflow: hidden; text-align: center;
    height: 400px; width: 300px; position: relative;
}
@media (max-width: 768px) {
    .listing-item { height: 430px; width: 100%; }
}
.listing-item img {
    width: 100%; height: 300px; object-fit: cover; transition: opacity 0.3s;
}
.listing-item img:hover { opacity: 0.5; }
.listing-content { width: 100%; padding: 10px; box-sizing: border-box; }
.listing-content p, .listing-content .price {
    color: #000; text-align: left; margin: 0; direction: ltr;
}

/* ===== ADD TO CART BUTTON ===== */
.add-to-cart-button {
    background: #e0a771; color: #fff; border: none;
    padding: 10px 20px; margin-top: 10px; cursor: pointer;
    border-radius: 5px; width: 100%; opacity: 0;
    position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
    transition: opacity 0.3s;
}
.listing-item:hover .add-to-cart-button { opacity: 1; }
.add-to-cart-button:hover { background: #c68247; }
@media (max-width: 768px) {
    .add-to-cart-button {
        opacity: 1; position: static; transform: none; margin-top: 10px;
    }
}

/* ===== POPUP ===== */
.popup {
    display: none; position: fixed; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: #fff; box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    padding: 20px; z-index: 1000; text-align: center; border-radius: 10px;
}
.popup button {
    margin: 10px; padding: 10px 20px; background: #000; color: #fff;
    border: none; cursor: pointer; border-radius: 5px;
}
.popup button:hover { background: #5b6369; }
.popup-overlay {
    display: none; position: fixed; top: 0; left: 0;
    width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 999;
}