/* 1. GRID LAYOUT */
    .coffee-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 25px;
        margin-top: 20px;
    }

    @media (max-width: 600px) {
        .coffee-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
        }
    }

    /* 2. CARD DESIGN */
    .coffee-card {
        background: #ffffff;
        border: 1px solid #f0f0f0;
        border-radius: 12px;
        overflow: hidden;
        transition: transform 0.2s, box-shadow 0.2s;
        box-shadow: 0 4px 6px rgba(0,0,0,0.02);
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    .coffee-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 24px rgba(0,0,0,0.08);
        border-color: #d35400;
    }

    /* 3. IMAGE PLACEHOLDER */
    .coffee-img {
        height: 180px;
        background-color: #f8f9fa;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
    .coffee-img img {
        max-height: 90%; 
        max-width: 90%;
        opacity: 0.8;
        transition: transform 0.5s ease;
    }
    .coffee-card:hover .coffee-img img {
        transform: scale(1.50);
        opacity: 1;
    }

    /* 4. TEXT CONTENT */
    .coffee-body {
        padding: 15px;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }
    .store-name {
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #999;
        font-weight: 700;
        margin-bottom: 5px;
    }
    .prod-name, .prod-name:visited {
        font-size: 1.05rem;
        font-weight: 700;
        color: #2c3e50;
        margin-bottom: 15px;
        line-height: 1.4;
        text-decoration: none;
        flex-grow: 1;
    }
    .price-area {
        margin-top: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 15px;
        border-top: 1px solid #f0f0f0;
    }
    .price-tag {
        font-size: 1.25rem;
        font-weight: 800;
        color: #27ae60;
    }
    .buy-btn, .buy-btn:visited {
        background: #222;
        color: #fff;
        padding: 8px 16px;
        border-radius: 6px;
        font-size: 0.85rem;
        font-weight: 600;
        text-decoration: none;
    }
    .buy-btn:hover { background: #d35400; }

    /* 5. MODERN SEARCH BAR */
    .search-container {
        background: #ffffff;
        padding: 15px;
        border-radius: 12px;
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        box-shadow: 0 4px 20px rgba(0,0,0,0.04);
        border: 1px solid #f0f0f0;
        margin-bottom: 30px;
    }
    .search-input, .sort-select {
        padding: 12px;
        border: 1px solid #eee;
        border-radius: 8px;
        font-size: 0.85rem;
        background: #fcfcfc;
        transition: all 0.2s;
    }
    .search-input:focus, .sort-select:focus {
        background: #fff;
        border-color: #d35400;
        outline: none;
        box-shadow: 0 0 0 3px rgba(211, 84, 0, 0.1);
    }

    /* 6. SKELETON LOADER */
    .skeleton {
        background: #eee;
        background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
        border-radius: 5px;
        background-size: 200% 100%;
        animation: 1.5s shine linear infinite;
    }
    @keyframes shine {
        to { background-position-x: -200%; }
    }

    /* 7. UTILITIES & STATUS */
    .search-input-grow { flex-grow: 1; }
    .search-input-price { width: 110px; }
    .search-input-location { width: 140px; }
    
    .status-msg {
        padding: 40px; 
        text-align: center; 
        color: #888;
    }
    .sentinel {
        height: 50px; 
        margin: 20px 0; 
        text-align: center; 
        color: #888;
    }

    /* 8. SKELETON SPECIFIC */
    .skeleton-card { pointer-events: none; }
    .skeleton-img-bg { background-color: #f8f9fa; }
    .skeleton-t1 { height: 15px; width: 50%; margin-bottom: 10px; }
    .skeleton-t2 { height: 20px; width: 90%; margin-bottom: 10px; }
    .skeleton-t3 { height: 20px; width: 70%; margin-bottom: auto; }
    .skeleton-area { border: none; padding-top: 15px; }
    .skeleton-p1 { height: 25px; width: 80px; }
    .skeleton-p2 { height: 35px; width: 60px; border-radius: 6px; }

    /* 9. CARD DETAILS */
    .location-info { font-size: 0.8rem; color: #7f8c8d; margin-bottom: 5px; }
    .price-eur { color: #27ae60; }
    .price-other { color: #999; font-size: 1rem; }
    .price-approx { color: #27ae60; font-weight: 800; font-size: 1.25rem; }
    .currency-small { font-size: 0.6em; }

    /* 10. MULTI-SELECT DROPDOWN */
    .multi-select-container {
        position: relative;
        cursor: pointer;
        user-select: none;
    }
    .multi-select-trigger {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 100%;
        width: 100%;
    }
    .multi-select-dropdown {
        position: absolute;
        top: 105%;
        left: 0;
        min-width: 220px;
        max-height: 300px;
        overflow-y: auto;
        background: white;
        border: 1px solid #eee;
        border-radius: 8px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        z-index: 100;
        padding: 10px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    /* 11. FILTER TOGGLE BUTTON */
    .filter-toggle-btn {
        background: #ffffff;
        color: #2c3e50;
        border: 1px solid #e0e0e0;
        padding: 14px 24px;
        border-radius: 12px;
        font-size: 0.95rem;
        font-weight: 600;
        cursor: pointer;
        width: 100%;
        text-align: center;
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        box-shadow: 0 4px 6px rgba(0,0,0,0.02);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        letter-spacing: 0.3px;
    }
    .filter-toggle-btn:hover {
        border-color: #d35400;
        color: #d35400;
        box-shadow: 0 8px 15px rgba(211, 84, 0, 0.1);
        transform: translateY(-2px);
    }
    .filter-toggle-btn:active {
        transform: translateY(0);
        box-shadow: 0 4px 6px rgba(0,0,0,0.02);
    }