/* ===== ALAP GRID ÉS KONTÉNER ===== */
.products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 oszlop */
    grid-auto-rows: 1fr; /* Minden kártya ugyanakkora magas */
    gap: 20px;
    width: 100%;
}

/* ===== PRODUCT CARD (Egységes szélesség) ===== */
.product-card {
display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  background: rgba(216, 179, 179, 0.13);
  border-radius: 12px;
  padding: 15px;
  box-sizing: border-box;
  border: 1px solid rgba(255, 252, 252, 0.76);
  transition: transform 0.3s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}


/* A kép tárolója (konténer) */
.product-img {
    display: flex;          /* Flexbox a tökéletes középre igazításhoz */
    justify-content: center;
    align-items: center;
    width: 100%;            /* Kitölti a kártya szélességét */
    margin-bottom: 20px;    /* Távolság a szövegtől */
}

/* Maga a képfájl */
.product-img img {
    width: 150px;           /* Fix szélesség */
    height: 150px;          /* Fix magasság (ugyanakkora, mint a szélesség!) */
    border-radius: 50%;     /* Tökéletes kör */
    
    /* A CSAVAR: Ez akadályozza meg az összenyomást */
    object-fit: cover;      
    object-position: center;
    
    border: 3px solid #c08d5d;
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
    
    /* Biztosítjuk, hogy ne legyen alapértelmezett margó, ami eltolja */
    display: block;
    margin: 0 auto; 
}

/* Információs rész */
.product-info {
    flex-grow: 1;          /* Kitölti az üres helyet */
    display: flex;
    flex-direction: column;
    align-items: center;    
    text-align: center;
}

.product-name {
    font-weight: 700;
    font-family: 'Dancing Script', cursive;
    font-weight: 600; /* Egy kis vastagság segít az olvashatóságon */
    margin-bottom: 5px;
    font-size: 1.5rem; /* Cirádásnál nagyobb méret kell */
}

.product-description {
    font-size: 0.85rem;

    line-height: 1.4;
    margin-bottom: 15px;
}

/* Árazás mindig a kártya alján */
.product-pricing {
    margin-top: auto;      /* Ez tolja az aljára az árat */
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.btn-order {
    width: 100%;
    padding: 10px;
    background-color: #5291aa;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    transition: 0.3s;
}

/* TABLET (1200px alatt fokozatosan csökken az oszlopszám) */
@media (max-width: 1100px) {
    .products-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 992px) {
    .products-grid { grid-template-columns: repeat(2, 1fr); }
}

/* MOBIL (768px alatt) */
@media (max-width: 768px) {
    .products-layout { flex-direction: column; }
    
    .products-grid {
        grid-template-columns: 1fr !important; /* Egy oszlop */
        gap: 20px;
    }

    .product-card {
        max-width: 500px; /* Ne legyen túl széles mobilon */
        margin: 0 auto;
        padding: 20px;
        
    }

    .category-hero {
        height: 120px;
    }

    /* Itt a trükk: 400px alatt CSAK a betűméretet és apróságokat állítjuk */
    .category-hero-title {
        font-size: 1.3rem;
    }
}

/* MINI MOBIL (400px alatt - CSAK finomhangolás) */
@media (max-width: 400px) {
    .product-card {
        padding: 15px;
    }
    
    .product-name {
        font-size: 1rem;
    }

    .btn-order {
        font-size: 1rem;
    }
}
@media (max-width: 768px) {
    .products-grid { 
        grid-template-columns: 1fr !important; /* Mobilon 1 oszlop */
        grid-auto-rows: auto;                 /* Mobilon nem kell egyforma magasság */
    }
    .product-card {
        max-width: 100%;
    }
    }
    .products-right-panel{
        width:100%;
    }
    /* --- NÉZETEK KEZELÉSE --- */

/* 1. Alapeset (Asztali nézet): Minden mobil cuccot elrejtünk */
.mobile-only {
    display: none !important;
}

/* 2. Asztali oldalsáv megjelenítése */
.desktop-only {
    display: block !important;
}

/* 3. MOBIL NÉZET (768px alatt) */
@media (max-width: 768px) {
    /* Mobilon elrejtjük az asztali oldalsávot és kategóriákat */
    .desktop-only {
        display: none !important;
    }

    /* Megjelenítjük a mobil selecteket és szűrőket */
    .mobile-only {
        display: flex !important; /* flex, hogy a belső elemek (gap) működjenek */
        flex-direction: column;
    }

    /* Biztosítjuk, hogy a jobb panel (ahol a termékek vannak) 100% széles legyen */
    .products-right-panel {
        width: 100% !important;
        flex: none;
    }
    
    .products-layout {
        flex-direction: column;
        gap: 15px;
    }
}

#categorySelect{
    width: 100%;
     padding: 12px; 
     background: rgba(255, 255, 255, 0.6);
     color: rgb(0, 0, 0); 
     border: 1px solid #444; 
     border-radius: 8px;
}
#mobileFilterToggle{
    
    width: 100%; 
    padding: 12px; 
     background: rgba(255, 255, 255, 0.6);
    color: rgb(0, 0, 0); 
    border: 1px solid #444; 
    border-radius: 8px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; cursor: 
    pointer;

}
/* 1. A tároló label legyen teljes szélességű blokk */
.sidebar-filter-label {
    display: block;      /* Így egymás alá kerülnek */
    width: 100%;         /* Kitölti a sidebar szélességét */
    cursor: pointer;
    margin-bottom: 8px;  /* Távolság a gombok között */
}

/* 2. A rejtett checkbox */
.diet-filter-cb {
    display: none !important;
}

/* 3. A gomb (szöveg) formázása */
.filter-text {
    display: block;      /* Fontos: blokként viselkedjen a szélességhez */
    width: 100%;         /* Kényszerített teljes szélesség */
    padding: 12px 10px;  /* Kényelmes kattintási felület */
    background: rgba(255, 255, 255, 0.6); 
    color: #000000 !important;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 700;
    text-align: center;  /* Középre zárt szöveg */
    transition: all 0.2s ease;
    box-sizing: border-box; /* Hogy a padding ne nyomja ki a szélességet */
}

/* 4. Hover és Kijelölt állapot */
.sidebar-filter-label:hover .filter-text {
    background: rgba(255, 255, 255, 0.9);
}

.diet-filter-cb:checked + .filter-text {
background-color: #d05e88 !important;
  color: #fff !important;
  border-color: #eac4d1;
  box-shadow: 0 4px 10px rgb(190, 166, 168);
}