﻿/* ---------------------------------------------------------------------- */
/* SLICK CAROUSEL EGYEDI STÍLUSOK ÉS IGAZÍTÁS */
/* ---------------------------------------------------------------------- */

/* 1. Általános konténer igazítás: Minden szöveges tartalom (név, ár) középre igazítása */
/* A .pad15 a legbelsőbb wrapper a termék itemben */
.product-slide-item .pad15 {
    /* Szöveges tartalom középre igazítása */
    text-align: center;
}

/* 2. Termékkép középre igazítása */
/* Mivel a .imgCont egy block szintű elem, a benne lévő képet így tudjuk igazítani */
.product-slide-item .imgCont {
    /* Mivel az imgContImg egy <img> tag, a text-align: center működik a kép linkjére (<a>) és a képre is. */
    text-align: center;
    /* Opcionális: Ha mégis blokk elemet használsz, ez segít (bár a fenti elég) */
    display: flex;
    justify-content: center;
    align-items: center; /* Ha vertikálisan is középre akarod tenni, ehhez fix magasság kell! */
    /* Érdemes lehet a kép konténerének magasságát is fixálni a layout elcsúszás elkerülése érdekében */
    /* pl: height: 180px; */
}

/* 3. Fix magasság az ár mezőnek */
/* Ez megakadályozza, hogy az ár körüli tartalom "ugráljon" ha a fölötte lévő név sorai változnak */
.product-slide-item .pCarouselDiscounted {
    /* Állíts be egy magasságot. 
       A példában 50px-et használok, ami általában elfér egy vagy két soros árnak. */
    min-height: 50px;
    /* A szöveg vertikális igazítása (ha 1 soros) */
    line-height: 50px;
    /* Ha a line-height nem megoldható, használhatsz padding-et is */
    padding-top: 5px; /* Példa */
}

/* 4. Termék cím kiemelése (opcionális, de ajánlott) */
.product-slide-item .pad15 .lead {
    /* Esetlegesen fix magasság a termék nevének, ha pl. 2 sorban is elfér a leghosszabb. */
    /* Pl. 2 soros szöveg esetén 40px */
    min-height: 40px;
    font-size: 1rem;
    line-height: 1.2;
}

/* 5. A tényleges kép stílusa */
.product-slide-item .imgContImg {
    /* Biztosítja, hogy a kép ne legyen nagyobb a konténerénél, de középen maradjon */
    max-width: 100%;
    height: auto;
}
/* ---------------------------------------------------------------------- */
/* SLICK CAROUSEL KÁRTYA STÍLUSOK (cvCarouselCard prefix) */
/* Cél: Stabil, középre igazított, minimalista megjelenés fix ármagassággal */
/* ---------------------------------------------------------------------- */

/* 1. Fő konténer (A kártya) */
.cvCarouselCard-container {
    padding: 20px 10px; /* Kicsit nagyobb vertikális térköz, kisebb horizontális */
    background-color: #f0f0f0; /* Világosszürke háttér (mint a képen) */
    border-radius: 8px;
    /* Minden tartalmat középre igazít */
    text-align: center;
}

/* 2. Termék neve */
.cvCarouselCard-name {
    font-size: 1.25rem; /* Nagyobb betűméret, mint az előző verzióban */
    font-weight: 600;
    color: #888; /* Világosabb, de kontrasztos szürke szöveg */
    margin-bottom: 20px; /* Több hely a kép előtt */
    padding: 0 5px; /* Kisebb belső térköz, hogy szélesebb lehessen a szöveg */
    /* FIX MAGASSÁG: Megakadályozza a szétcsúszást (pl. 2 soros magasság) */
    min-height: 50px;
    line-height: 1.2;
    overflow: hidden;
}

/* 3. Kép konténere */
.cvCarouselCard-image-container {
    margin: 0 auto 20px auto; /* Több hely az ár előtt */
    /* FIX MAGASSÁG: Stabilizálja a kép területét */
    height: 150px;
    /* Flexbox a kép pontos középre igazításához (vertikálisan is) */
    display: flex;
    justify-content: center; /* Horizontális középre */
    align-items: center; /* Vertikális középre */
    overflow: hidden;
}

/* 4. Termék kép */
.cvCarouselCard-image {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    border-radius: 4px;
    /* A kép körül fehér tér lehet, ami a szürke háttérrel kontrasztos. 
       A képen látható termék képe nem tölti ki a teljes konténert, 
       de a konténer magassága fix. */
}

/* 5. Ár konténer fix magassággal (KRITIKUS A STABILITÁSHOZ) */
.cvCarouselCard-price-container {
    /* FIX MAGASSÁG: Ez a legfontosabb a layout stabilizálásához */
    min-height: 40px;
    margin-top: 5px;
    /* Flexbox az ár vertikális középre igazításához a fix magasságú konténeren belül */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 6. Ár stílus */
.cvCarouselCard-price {
    font-size: 1.6rem; /* Még nagyobb betűméret az árnak */
    font-weight: 700;
    color: darkgreen;
}

/* 7. Részletek gomb konténerét és stílusát ELTÁVOLÍTOTTUK, 
   mivel a kérés szerint nincs rá szükség. */
.cvCarouselCard-details-button-container {
    display: none; /* Biztos, ami biztos, elrejtjük */
}