/* --- General & Grid Layout --- */
.wpmg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 15px; padding: 10px 0; }
.wpmg-card { border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.05); transition: opacity 0.2s ease; }
.wpmg-img { position: relative; padding-top: 100%; overflow: hidden; cursor: pointer; }
.wpmg-img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.wpmg-card:hover .wpmg-img img { transform: scale(1.05); }
.wpmg-info { padding: 12px; display: flex; flex-direction: column; flex-grow: 1; text-align: center; }
.wpmg-title { margin: 0 0 5px; font-size: 1em; font-weight: 600; cursor: pointer; color: #333; }
.wpmg-title:hover { color: #4CAF50; }
.wpmg-price { margin: auto 0 10px; font-size: 1.1em; font-weight: bold; color: #333; }
.wpmg-price ins { text-decoration: none; color: #dc3545; } /* Style for sale price */
.wpmg-price del { font-size: 0.8em; opacity: 0.7; } /* Style for regular price when on sale */

/* --- Actions & Quantity Controls (Shared) --- */
.wpmg-actions { position: relative; }
.wpmg-actions .wpmg-add { width: 100%; padding: 10px; background-color: #4CAF50; color: white; border: none; border-radius: 5px; cursor: pointer; font-weight: bold; transition: background-color 0.2s; }
.wpmg-actions .wpmg-add:hover { background-color: #45a049; }
.wpmg-qty-controls { display: none; align-items: center; justify-content: space-between; width: 100%; border: 1px solid #4CAF50; border-radius: 5px; }
.wpmg-qty-controls button { background: transparent; border: none; color: #4CAF50; font-size: 1.5em; width: 35px; cursor: pointer; line-height: 1; }
.wpmg-qty { font-size: 1.2em; font-weight: bold; }

/* --- Updating State & Popups --- */
.wpmg-updating { opacity: 0.6; pointer-events: none; }
.wpmg-category-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; border-bottom: 1px solid #eee; padding-bottom: 10px; }
.wpmg-category { padding: 8px 15px; background: #f1f1f1; border-radius: 20px; cursor: pointer; transition: all 0.2s ease-in-out; }
.wpmg-category:hover { background: #e0e0e0; }
.wpmg-category.active { background: #4CAF50; color: white; font-weight: bold; }
#wpmg-cart-bar { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: #333; color: white; border-radius: 30px; padding: 10px 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); cursor: pointer; z-index: 1000; }
.wpmg-cart-bar-content { display: flex; align-items: center; gap: 10px; }
.wpmg-cart-text { font-weight: bold; }
.wpmg-cart-count { background: #4CAF50; border-radius: 50%; min-width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-weight: bold; }
.wpmg-modal { display: none; position: fixed; z-index: 1001; left: 0; top: 0; width: 100%; height: 100%; overflow-y: auto; background-color: rgba(0,0,0,0.6); }
.wpmg-modal-content { background-color: #fefefe; margin: 10vh auto; padding: 20px; border: 1px solid #888; width: 90%; max-width: 500px; border-radius: 8px; position: relative; box-shadow: 0 5px 20px rgba(0,0,0,0.3); }
.wpmg-close { position: absolute; top: 10px; right: 15px; color: #aaa; font-size: 28px; font-weight: bold; border: none; background: transparent; cursor: pointer; }
.wpmg-close:hover, .wpmg-close:focus { color: black; }

/* --- Popup Cart Specific Styles --- */
.wpmg-cart-items { max-height: 60vh; overflow-y: auto; margin-bottom: 20px; }
.wpmg-cart-item { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; border-bottom: 1px solid #f1f1f1; padding-bottom: 15px; transition: opacity 0.2s ease; }
.wpmg-cart-thumb img { width: 60px; height: 60px; border-radius: 5px; object-fit: cover; }
.wpmg-cart-details { flex-grow: 1; text-align: left; }
.wpmg-cart-name { font-weight: bold; }
.wpmg-cart-price { color: #555; }
.wpmg-cart-qty { display: flex; align-items: center; margin: 5px 0; }
.wpmg-cart-qty button { width: 25px; height: 25px; border: 1px solid #ddd; background: #f9f9f9; cursor: pointer; }
.wpmg-cart-qty-num { padding: 0 10px; }
.wpmg-cart-remove { background: transparent; border: none; color: #f44336; cursor: pointer; font-size: 0.9em; padding: 5px 0; }
.wpmg-checkout-btn { width: 100%; padding: 15px; background-color: #4CAF50; color: white; border: none; border-radius: 5px; font-size: 1.1em; cursor: pointer; }

/* --- Product Detail Modal --- */
.wpmg-modal-product-content { max-height: 70vh; overflow-y: auto; padding-right: 10px; }
.wpmg-modal-product-content .wpmg-loader { text-align: center; padding: 40px; font-size: 1.2em; color: #888; }
.wpmg-popup-product-details { display: flex; flex-direction: column; }
.wpmg-popup-image { text-align: center; margin-bottom: 20px; }
.wpmg-popup-image img { max-width: 100%; height: auto; border-radius: 8px; }
.wpmg-popup-info { text-align: left; }
.wpmg-popup-title { margin: 0 0 10px; font-size: 1.5em; }
.wpmg-popup-price { font-size: 1.3em; color: #4CAF50; margin-bottom: 15px; font-weight: bold; }
.wpmg-popup-description { margin-bottom: 20px; color: #666; line-height: 1.6; }
.wpmg-popup-actions { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-top: 20px; }
.wpmg-popup-qty { display: flex; align-items: center; border: 1px solid #ddd; border-radius: 5px; }
.wpmg-popup-qty button { background: #f5f5f5; border: none; font-size: 1.5em; width: 40px; height: 40px; cursor: pointer; }
.wpmg-popup-qty span { width: 40px; text-align: center; font-size: 1.2em; }
.wpmg-modal-add-to-cart { flex-grow: 1; padding: 12px 20px; background-color: #28a745; color: white; border: none; border-radius: 5px; font-size: 1em; cursor: pointer; text-align: center; transition: background-color 0.2s; }
.wpmg-modal-add-to-cart:hover { background-color: #218838; }

/* --- NEW: Sale Badge --- */
.wpmg-sale-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #dc3545; /* A standard sale red */
    color: #fff;
    padding: 5px 8px;
    border-radius: 4px;
    font-size: 0.8em;
    font-weight: bold;
    z-index: 2;
    line-height: 1;
}