/*logo slider*/

.gyartoi-logok .slide img:hover
{
 -webkit-filter: invert(100%);
}
.gyartoi-logok .slick-list
{
    border: 2px solid;
    border-color: #e9ebef;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 30px;
    margin-right: 30px;
}
.slider .parent-container .slick-arrow
{
border: 0px;
}
.slider .parent-container .slick-arrow .bg-wrapper
{
    width: 2px;
    height: 2px;
}
.slider .parent-container .slick-arrow .bg-wrapper .svg-wrapper >svg
{
    width: 16px;
    height: 22px;
    fill: #f6f6f6;
}
.slider .parent-container .slick-arrow .bg-wrapper .svg-wrapper
{
    background: transparent;
}
.slider .parent-container .slick-arrow.right
{
    right: 10px;
}
.slider .parent-container .slick-arrow.left
{
    left: 10px;
}

/*fő slide kerekítés*/
.kerek-kep .slick-slide img 
{
    border-radius: 20px;
}
.kerek-kep .slick-list
{
    border-radius: 20px;
    margin-top: 20px;
    margin-right: 5px;
    margin-left: 10px;
    border: 2px solid;
    border-color: #e9ebef;
    
}
.egyedi-banner .slick-slide img 
{
    border-radius: 20px;
}
.egyedi-banner .slick-list
{
    border-radius: 20px;
    margin-top: 20px;
    margin-right: 5px;
    margin-left: 10px;
    border: 2px solid;
    border-color: #e9ebef;
   
}
/* Alap konténer: slider + banner flex, egymás mellett */
.menu-block {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center !important; /* függőlegesen középre */
    gap: 10px !important;
    max-width: 100%;
}
/* Slider (bal oldal) - körülbelül 75% szélesség */
.slider.kerek-kep {
    flex: 0 1 66%;
    max-width: 661px !important;
    width: 68% !important;
    box-sizing: border-box;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 215px;
}
/* Banner (jobb oldal) - kb 25%, négyzet forma */
.slider.egyedi-banner {
    flex: 0 1 29%;
    max-width: 291px !important;
    width: 291px !important;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 90px;  
}
.slider.gyartoi-logok {
    flex: 1 1 100%;          /* teljes sort foglal el */
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
    margin-top: 20px;
    display: flex !important;
    justify-content: center;
    align-items: center;
}

/* Flex gyermekeknek ne legyen max-width: 100%, ellentmondva flex méretezés */
.slider.kerek-kep,
.slider.egyedi-banner {
    max-width: none !important;
    width: auto !important;
}
/* Mobil nézet */
@media (max-width: 900px) {
    .menu-block {
        flex-direction: column !important;
        gap: 10px !important;
        align-items: center !important;
    }
    .slider.kerek-kep,
    .slider.egyedi-banner,
    .slider.gyartoi-logok,
    .kerek-kep,
    .egyedi-banner,
    .gyartoi-logok {
        width: 90% !important;
        max-width: 500px !important;
        height: auto !important;
        padding: 10px;
    }  
       
    .egyedi-banner img {
        object-fit: contain !important;
        border-radius: 20px !important;
    }
}
.content-wrapper
{
    max-width: 1340px;
    width: 100%;  
}
.content-block
{
    padding-right: 20px !important;
    padding-left: 20px !important;
}
@media screen and (min-width: 1000px) {
    .content-wrapper {
        min-width: 1000px;
    }

}

/*szövegdoboz*/

.text-container {
    margin: 5px 0 5px 0;
    
}
.tiszta
{
    background-color: transparent !important;
    color: #000000 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
h4, .h4 {
    font-size: 16px;
    line-height: 1.5em;
    padding-bottom: 10px;
}
h1 {
    line-height: 1.3em;
    font-weight: 600;
}
h2
{
    font-size: 2.8vh !important;
    line-height: 1.3em !important;
    font-weight: 600 !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}
.dd-menu
{
   background-color: #072d4b;
   border-radius: 10px;
}
.dd-button
{  
   color:  #ffc846;
   padding: 5px;
}
.top
{
    height: 90px;
    max-height: auto;
    display: flex !important;
    align-items: center;
}
.dd-menu .dd-menu-wrapper .dropdown-content
{
    background: #072d4b !important;
    box-shadow: none;
    border: none;
    border-radius: 10px;
}
/* Megamenu háttérkék */
.cikkcsoport-megamenu {
    background: #072d4b !important;
}

/* Szöveg színe fehér */
.cikkcsoport-megamenu .megamenu-box,
.cikkcsoport-megamenu .megamenu-box ul,
.cikkcsoport-megamenu .megamenu-box ul li,
.cikkcsoport-megamenu .megamenu-box ul li a {
    color: #fff !important;
}

/* Szöveg hover-re sárga */
.cikkcsoport-megamenu .megamenu-box ul li a:hover,
.cikkcsoport-megamenu .megamenu-box ul li:hover > a {
    color: #fcbf33 !important;
}

.cikkcsoport-megamenu > ul.depth-1 > li a,
.cikkcsoport-megamenu > ul.depth-1 > li > a {
    color: #fff !important;            /* fehér szöveg */
    text-transform: uppercase;         /* nagybetűs */
    text-decoration: none;
    white-space: normal;
    font-size: 13px;
    padding: 7px 5px;
    float: left;
    font-weight: 700;
}
svg.nav-right {
    fill: #fff !important;
}

#mainmenu a.link
{
    margin-right: 5px;
    margin-left: 5px;
}

#mainmenu a.link:hover {
    background: #072d4b !important;
    color: #fcbf33 !important;
    border-radius: 10px;
}

/* Csak ezen a termék-slideren (ahol van mozaik) lesz grid! */
.products-carousel.slider-content.mozaik {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr); /* 4 termék egysorban */
  gap: 10px; 
  width: 100% !important;
  box-sizing: border-box;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}

.products-carousel.slider-content.mozaik .slick-track:before,
.products-carousel.slider-content.mozaik .slick-track:after {
    display: none !important;
    content: none !important;
}

.products-carousel.slider-content.mozaik .slick-arrow,
.products-carousel.slider-content.mozaik .slick-prev,
.products-carousel.slider-content.mozaik .slick-next {
    display: none !important;
}

/* A slick-slide termékkártyák normalizálása */
.products-carousel.slider-content.mozaik > *,
.products-carousel.slider-content.mozaik .slick-slide {
  display: block !important;
  width: 100% !important;
  float: none !important;
  box-sizing: border-box;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
  height: auto !important;
}

.products-carousel.slider-content.mozaik .slick-track,
.products-carousel.slider-content.mozaik .slick-list {
  display: contents !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  height: auto !important;
}

.products-carousel.slider-content.mozaik .slick-slide.slick-cloned {
    display: none !important;
}

/* Mobil/tablet reszponzív grid */
@media (max-width: 1024px) {
  .products-carousel.slider-content.mozaik {
    grid-template-columns: repeat(2, 1fr) !important; /* tablet */
  }
}
@media (max-width: 600px) {
  .products-carousel.slider-content.mozaik {
    grid-template-columns: 1fr !important; /* mobilon mindig 1 elem/sor */
  }
}

/* 1. Grid-cell: minden termékkártya teljes magasságot kitölt, flex */
.products-carousel.slider-content.mozaik > * {
    display: flex !important;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
    background: #fff; /* opcionális */
}

/* 2. Fő tartalom – rugalmas, nőhet, min. padding */
.products-carousel.slider-content.mozaik .product_content {
    flex: 1 1 auto;
    display: block;
}

.products-carousel.slider-content.mozaik .product_content .product-name {
    display: -webkit-box;
    -webkit-line-clamp: 4;        
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 100px;              /* 3 sorhoz: 3 x line-height */
    max-height: 100px;              /* ugyanaz! Így fix méretű lesz a hely! */
    line-height: 25px;             /* ezt érdemes fixen tartani */
    /* opcionális: vertikális középre igazítás, ha csak max. 1 soros, de általában a min-height megoldja */
    box-sizing: border-box;
    width: 100%;
}

/* 4. Az alsó ár/gomb rész mindig a cella legalján, oldalt szellős */
.products-carousel.slider-content.mozaik .content-bottom {
    margin-top: auto;
    width: 100%;
    box-sizing: border-box;
}

.mozaik .nopad
{
    padding-right: 10px !important;
    padding-left: 10px !important;
}

.mozaik .button-cart
{
    margin-top: 10px;
    margin-bottom: 10px;
}

.menu_csempe.type4 .csempe {
    display: flex;
    flex-wrap: wrap; /* ha kell, hogy kisebb képernyőn is jól viselkedjen */
}

#imgHolder {
    flex: 0 0 40%; /* vagy amennyi helyet adhat a képnek */
    display: flex;
    justify-content: center;
    align-items: center;
}

.content {
    flex: 1; /* maradék hely a szövegnek */
}
.menu_csempe.type4 .csempe {
    display: flex;
    align-items: center; /* függőleges középrehozás */
}

.menu_csempe.type4 .csempe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

@media (max-width: 1000px) {
    .menu_csempe.type4 .csempe {
        flex-direction: column;
    }
}

.menu_csempe.type4 .content .title
{
    background-color: #0f599c;
    border-radius: 10px;
    font-size: 3vh;
    color: #ffffff;
    font-weight: 600;
    line-height: 1em !important;
    min-height: auto;
    padding-left: 20px !important;
    padding-top: 10px;
    padding-bottom: 10px;
}

.menu_csempe.type4.set-content-style .content .description, .menu_csempe.type4.set-content-style .content .description *
{
    color: #080808 !important;
}

.button-secondary
{
    margin-bottom: 10px;
    border: none;
}

.button-cart:hover
{
    background: #125592;
    border: none;
    color: #fff;
}

.button-cart:hover .icon
{
 fill: #fff;
}

.product-name h2
{
    font-size: 2.3vh !important;
    line-height: 1.3em !important;
    font-weight: 600 !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}

.cikkcsoport-menu h2
{
    font-size: 2vh !important;
    line-height: 1em !important;
    font-weight: 600 !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}







/* Csak a .details-bottom-container belső left és right elemeire vonatkozik */
.details-bottom-container .left,
.details-bottom-container .right,
.details-bottom-container .product-ratings-details {
  width: 100%;
  margin-bottom: 20px;
  float: none !important;
  display: block;
}

/* Szülő konténer, oszlopos elrendezés */
.details-bottom-container {
  display: flex;
  flex-direction: column;
}

/* Értékelés belső elrendezése két oszlopra - csak ebben a konténerben */
.details-bottom-container .product-ratings-details {
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
}

/* Az értékelés bal oldali oszlopa */
.details-bottom-container .product-ratings-details > div.col-xxs-120.col-xs-50.nopad {
  flex-basis: 40%;
  max-width: 40%;
  box-sizing: border-box;
  padding-right: 15px;
}

/* Az értékelés jobb oldali oszlopa */
.details-bottom-container .product-ratings-details > div.col-xxs-120.col-xs-70.nopad {
  flex-basis: 58%;
  max-width: 58%;
  box-sizing: border-box;
}

.product-ratings-details {
  display: none !important;
}

div.col-xs-60 {
  width: 50% !important;
  padding-left: 5px; /* ha kell távolság */
  padding-right: 5px;
  box-sizing: border-box;
}

.details-bottom-container .right.col-sm-55 {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0px;
  padding-right: 0px; /* ha kell egy kis belső távolság */
  box-sizing: border-box;
}

.details-bottom-container .left.col-xs-120
{
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0px;
  padding-right: 0px; /* ha kell egy kis belső távolság */
  box-sizing: border-box;
}