/* === GLOBÁLNE NASTAVENIE PRE ROZMEROVANIE === */


*, *::before, *::after {
  box-sizing: border-box;
}




/* ..................................................................................................... */
/* ..................................................................................................... */

/* TLACIDLA STARE, ktore uz nepouzivam, no BOLI pOUZIVANE NA easylight.sk   */

/* ..................................................................................................... */
/* ..................................................................................................... */




/* tlačidlo zaoblené priehľadné na NTB väčšie */

.button_JL_NTB_transparent {
  background-color: transparent;
  color: white;
  border: 2px solid #555555;
border-radius: 32px; 
  padding: 12px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}


.button_JL_NTB_transparent:hover {
  background-color: #555555;
  color: white;
}


/* tlačidlo zaoblené priehľadné na MOBIL menšie */

.button_JL_mobil_transparent {   background-color: rgb(0 0 0 / 10%);
  color: #555555;
  border: 2px solid #555555;
  border-radius: 18px; 
  padding: 8px 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.button_JL_mobil_transparen:hover {
  background-color: #555555;
  color: white;
}



.button_JL_blog_red { /* tlačidlo zaoblené ČERVENÉ na BLOG  */
  background-color: #f80120;
  color: #ffffff;
  border: none;
  border-radius: 32px; 
  padding: 12px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 15px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.button_JL_blog_red:hover {
  background-color: #bb0101;
  color: #ffffff;
}

.button_JL_blog_black { /* tlačidlo zaoblené ČIERNE s BIELYM hover na BLOG  */
  background-color: black;
  color: white;
  border: none;
  border-radius: 32px; 
  padding: 12px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 15px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.button_JL_blog_black:hover {
  background-color: #d8d5d9;
  color: black;
}

.button_JL_blog_black:hover {
  background-color: #d8d5d9;
  color: black;
}


/* Odstraňujem z tlačidla podčiarknutie  */

.button_JL_blog_black a:link {
  text-decoration: none;
}

.button_JL_blog_black a:visited {
  text-decoration: none;
}

.button_JL_blog_black a:hover {
  text-decoration: none;
}

.button_JL_blog_black a:active {
  text-decoration: underline;
}


.button_JL_blog_red a:link {
  text-decoration: none;
}

.button_JL_blog_red a:visited {
  text-decoration: none;
}

.button_JL_blog_red a:hover {
  text-decoration: none;
}

.button_JL_blog_red a:active {
  text-decoration: underline;
}



/*Maximálna šírka TEXTU (doprava/platba) v kontajner - šírka mobil MAX. 300 px*/
p.ex150 {
  max-width: 150px;
}

/*Maximálna šírka TEXTU (doprava/platba) v kontajner - šírka mobil MAX. 300 px*/
p.ex300 {
  max-width: 300px;
}

/*Maximálna šírka TEXTU (doprava/platba) v kontajner*/
p.ex75 {
  max-width: 75px;
}


/* TU KONCI CSS pre STARE TLACIDLA    */

/* ..................................................................................................... */
/* ..................................................................................................... */
/* ..................................................................................................... */

    

/* ..................................................................................................... */

/* ODTIAĽTO idú BANNERY s BORDER alebo ROUND_BORDER, ktore su PREDURCENE S OBRAZKOM DNU - "WARRANTY" alebo "SKIPPAY"    */

/* ..................................................................................................... */




.container_JL_responsive_skippay {
  width: 85%;
  min-height: 250px;
  height: 250px;
  background-image: url('https://www.mitochondriak.com/user/documents/upload/Bannery_contajner/Cotainer_skip_the_pay.jpg');
  background-size: cover;
  border: 1px transparent;
  border-radius: 25px;
  text-align: center;
  position: relative;
}


.container_JL_responsive_skippay .buttonNTBred {
      background-color: #f80120;
      color: white;
      border: 2px solid transparent;
      border-radius: 32px; 
      padding: 12px 32px;
      font-size: 16px;
      cursor: pointer;
      text-decoration: none;
      transition: 0.4s ease;
    }

.container_JL_responsive_skippay .buttonNTBred:hover {
      background-color: #bb0101;
    }

    @media (max-width: 600px) {
      .container_JL_responsive_skippay h1 {
        font-size: 15pt;
      }

      .container_JL_responsive_skippay p {
        font-size: 11pt;
      }

      .container_JL_responsive_skippay .buttonNTBred {
        padding: 10px 24px;
        font-size: 14px;
      }
    }


.container_JL_responsive_warranty {
  width: 85%;
  max-width: 900px;
  min-height: 260px;
  height: 260px;
  background-image: url('https://www.mitochondriak.com/user/documents/upload/Bannery_contajner/Contajner_responsive.jpg');
  background-size: cover;
  border: 1px transparent;
  border-radius: 25px;
  text-align: center;
  position: relative;
}

.container_JL_responsive_warranty .buttonNTBred {
      background-color: #f80120;
      color: white;
      border: 2px solid transparent;
      border-radius: 32px; 
      padding: 12px 32px;
      font-size: 16px;
      cursor: pointer;
      text-decoration: none;
      transition: 0.4s ease;
    }

.container_JL_responsive_warranty .buttonNTBred:hover {
      background-color: #bb0101;
    }

    @media (max-width: 600px) {
      .container_JL_responsive_warranty h1 {
        font-size: 15pt;
      }

      .container_JL_responsive_warranty p {
        font-size: 11pt;
      }

      .container_JL_responsive_warranty .buttonNTBred {
        padding: 10px 24px;
        font-size: 14px;
      }
    }




/* Zarovnanie TEXTU ZHORA a ZĽAVA (10percent ZHORA aj ZLAVA) */

.text_hore {  
  position: absolute;
  top: 10%;
  left: 10%;
  right: 10%;

}



/* ..................................................................................................... */

/* !!! TOTO je CSS pre container na 100% ŠÍRKY OBRAZOVKY !!! ktory som pouzival na EASYLIGHT DAVNEJSIE   */

/* ..................................................................................................... */




.container_JL {
  position: relative;
  width: 100%;
}

.container_JL img {
  width: 100%;
  max-height: 30%;
}


/* CSS TEXT v CONTAINERY, ktorý ide z hora a v strede a pod tým nadpisi a text*/

.center_text_hore {  
  margin: 0;
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -40%);
  -ms-transform: translate(-70%, -50%);
}


.container_JL h1 {
    text-align: center;
}

.container_JL h2 {
    text-align: center;
}

.container_JL h3 {
    text-align: center;
}

.container_JL h4 {
    text-align: center;
}

.container_JL h5 {
    text-align: center;
}

.container_JL h6 {
    text-align: center;
}

.container_JL p {
  text-align: center;
}


/* ODTIALTO idú TLAČIDLA v CONTAJNERY*/


/* CSS pre biele tlačidlo s black hover STRED v bannery */
.container_JL .btn_biele_stred { 
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translate(-45%, -50%);
  -ms-transform: translate(-70%, -50%);
  background-color: #ffffff;
  color: black;
  font-size: 14px;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  border-radius: 30px;
  text-align: center;
}
.container_JL .btn_biele_stred:hover {
  background-color: black;
  color: white;
}


.container_JL .btn_container_biele_vlavo {
  position: absolute;
  top: 80%;
  left: 20%;
  transform: translate(-45%, -50%);
  -ms-transform: translate(-70%, -50%);
  background-color: #ffffff;
  color: black;
  font-size: 14px;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  border-radius: 30px;
  text-align: center;
}
.container_JL .btn_container_biele_vlavo:hover {
  background-color: black;
  color: white;
}

.container_JL .btn_container_biele_vpravo {
  position: absolute;
  top: 80%;
  left: 80%;
  transform: translate(-45%, -50%);
  -ms-transform: translate(-5%, -50%);
  background-color: white;
  color: black;
  font-size: 14px;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  border-radius: 30px;
  text-align: center;
}
.container_JL .btn_container_biele_vpravo:hover {
  background-color: black;
  color: white;
}

/* ..................................................................................................... */
/* ..................................................................................................... */
/* ..................................................................................................... */





/* ..................................................................................................... */

/* CSS pre container-bannery kde je tlačidlo alebo text dnu a je na 100% ŠÍRKY OBRAZOVKY    */

/* ..................................................................................................... */



.container_JL_100 {
  position: relative;
  display: flex;
  width: 100%;
}

.container_JL_100 img {
  position: relative;
  max-width: 100%;
  min-height: 300px;
}


/* CSS TEXT v CONTAINERY, ktorý ide z hora a v strede a pod tým nadpisi a text*/

.center_text_hore {  
  margin: 0;
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -40%);
  -ms-transform: translate(-70%, -50%);
}


.container_JL_100 h1 {
    text-align: center;
}

.container_JL_100 h2 {
    text-align: center;
}

.container_JL_100 h3 {
    text-align: center;
}

.container_JL_100 h4 {
    text-align: center;
}

.container_JL_100 h5 {
    text-align: center;
}

.container_JL_100 h6 {
    text-align: center;
}

.container_JL_100 p {
  text-align: center;
}


/* ODTIALTO idú TLAČIDLA v CONTAJNERY*/


/* CSS pre biele tlačidlo s black hover STRED v bannery */
.container_JL_100 .btn_biele_stred { 
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translate(-45%, -50%);
  -ms-transform: translate(-70%, -50%);
  background-color: #ffffff;
  color: black;
  font-size: 14px;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  border-radius: 30px;
  text-align: center;
}
.container_JL_100 .btn_biele_stred:hover {
  background-color: black;
  color: white;
}


/* CSS pre biele tlačidlo s black hover VĽAVO v bannery */
.container_JL_100 .btn_biele_vlavo { 
  position: absolute;
  top: 80%;
  left: 20%;
  transform: translate(-45%, -50%);
  -ms-transform: translate(-70%, -50%);
  background-color: #ffffff;
  color: black;
  font-size: 14px;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  border-radius: 30px;
  text-align: center;
}
.container_JL_100 .btn_biele_vlavo:hover {
  background-color: black;
  color: white;
}

/* CSS pre biele tlačidlo s black hover VPRAVO v bannery */
.container_JL_100 .btn_biele_vpravo {
  position: absolute;
  top: 80%;
  left: 80%;
  transform: translate(-45%, -50%);
  -ms-transform: translate(-5%, -50%);
  background-color: white;
  color: black;
  font-size: 14px;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  border-radius: 30px;
  text-align: center;
}
.container_JL_100 .btn_biele_vpravo:hover {
  background-color: black;
  color: white;
}


/* ..................................................................................................... */
/* CSS pre container-bannery kde je tlačidlo alebo text dnu a je na 50% ŠÍRKY OBRAZOVKY    */
/* ..................................................................................................... */


.container_JL_50 {
  position: relative;
  max-width: 50%;
}

.container_JL_50 img {
  max-width: 100%;
  max-height: 30%;
}


/* CSS pre biele tlačidlo s black hover STRED v bannery */
.container_JL_50 .btn_biele_stred { 
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translate(-45%, -50%);
  -ms-transform: translate(-70%, -50%);
  background-color: #ffffff;
  color: black;
  font-size: 14px;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  border-radius: 30px;
  text-align: center;
}
.container_JL_50 .btn_biele_stred:hover {
  background-color: black;
  color: white;
}


/* CSS pre biele tlačidlo s black hover VĽAVO v bannery */
.container_JL_50 .btn_biele_vlavo { 
  position: absolute;
  top: 80%;
  left: 20%;
  transform: translate(-45%, -50%);
  -ms-transform: translate(-70%, -50%);
  background-color: #ffffff;
  color: black;
  font-size: 14px;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  border-radius: 30px;
  text-align: center;
}
.container_JL_50 .btn_biele_vlavo:hover {
  background-color: black;
  color: white;
}

/* CSS pre biele tlačidlo s black hover VPRAVO v bannery */
.container_JL_50 .btn_biele_vpravo {
  position: absolute;
  top: 80%;
  left: 80%;
  transform: translate(-45%, -50%);
  -ms-transform: translate(-5%, -50%);
  background-color: white;
  color: black;
  font-size: 14px;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  border-radius: 30px;
  text-align: center;
}
.container_JL_50 .btn_biele_vpravo:hover {
  background-color: black;
  color: white;
}



/* ..................................................................................................... */
/* CSS pre container-bannery kde je tlačidlo alebo text dnu a je na 33% ŠÍRKY OBRAZOVKY    */
/* ..................................................................................................... */


.container_JL_33 {
  position: relative;
  max-width: 33%;
}

.container_JL_33 img {
  max-width: 100%;
  max-height: 30%;
}


/* CSS pre biele tlačidlo s black hover STRED v bannery */
.container_JL_33 .btn_biele_stred { 
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translate(-45%, -50%);
  -ms-transform: translate(-70%, -50%);
  background-color: #ffffff;
  color: black;
  font-size: 14px;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  border-radius: 30px;
  text-align: center;
}
.container_JL_33 .btn_biele_stred:hover {
  background-color: black;
  color: white;
}


/* CSS pre biele tlačidlo s black hover VĽAVO v bannery */
.container_JL_33 .btn_biele_vlavo { 
  position: absolute;
  top: 80%;
  left: 20%;
  transform: translate(-45%, -50%);
  -ms-transform: translate(-70%, -50%);
  background-color: #ffffff;
  color: black;
  font-size: 14px;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  border-radius: 30px;
  text-align: center;
}
.container_JL_33 .btn_biele_vlavo:hover {
  background-color: black;
  color: white;
}

/* CSS pre biele tlačidlo s black hover VPRAVO v bannery */
.container_JL_33 .btn_biele_vpravo {
  position: absolute;
  top: 80%;
  left: 80%;
  transform: translate(-45%, -50%);
  -ms-transform: translate(-5%, -50%);
  background-color: white;
  color: black;
  font-size: 14px;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  border-radius: 30px;
  text-align: center;
}
.container_JL_33 .btn_biele_vpravo:hover {
  background-color: black;
  color: white;
}




/* CSS pre ČERVENÉ a TRANSPARENT TLAČIDLÁ HLAVNÉ zaoblené */
.buttonNTBtransparent { /* tlačidlo zaoblené priehľadné na NTB väčšie */
  background-color: white;
  color: black;
  border: 2px solid white;
  border-radius: 32px; 
  padding: 12px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.buttonNTBtransparent:hover {
  background-color: #000000;
  color: white;
  border: 2px solid black;
}

.buttonNTBred { /* tlačidlo zaoblené ČERVENÉ na NTB väčšie */
  background-color: #f80120;
  color: white;
  border: 2px solid transparent;
  border-radius: 32px; 
  padding: 12px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}


.buttonNTBred:hover {
  background-color: #bb0101;
  color: white;
}


.buttonMOBILtransparent {
background-color: white; /* tlačidlo zaoblené priehľadné na MOBIL menšie */
  color: black;
  border: 2px solid white;
  border-radius: 18px; 
  padding: 8px 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.buttonMOBILtransparent:hover {
  background-color: #555555;
  color: white;
}

.buttonMOBILred { /* tlačidlo zaoblené ČERVENÉ na MOBIL menšie */
  background-color: #f80120;
  color: #ffffff;
  border: 2px solid #f80120;
  border-radius: 18px; 
  padding: 8px 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.buttonMOBILred:hover {
  background-color: #bb0101;
  border: 2px solid #bb0101;
  color: #ffffff;
}

.buttonMOBILblack { /* tlačidlo zaoblené ČIERNE na MOBIL menšie */
  background-color: black;
  color: white;
  border: 2px solid black;
  border-radius: 18px; 
  padding: 8px 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.buttonMOBILblack:hover {
  background-color: gray;
  border: 2px solid gray;
  color: #ffffff;
}



/* ZAROVNANIE zľava a zdola pre tlačidlá napríklad */
.bottomleft {
  position: absolute;
  bottom: 15%;
  left: 10%;
}


/* Zarovnanie ZHORA a ZĽAVA (10percent ZHORA aj ZLAVA) */

.bottom_up {  
  position: absolute;
  top: 10%;
  left: 10%;

}


/* ..................................................................................................... */

/* KONIEC - Contajnerov JL alebo JL_100 a na !!! oboch eshopoch easylichg.sk aj mitochondriak.com treba VYUZIVAT UZ CONTAINER_JL !!!   */

/* ..................................................................................................... */



/* RESPONZIVNY BANNER, BEZ ZAOBLENIA ROHOV, do ktoreho vieme dat obrazok, nadpis, text aj tlacidla a meni sa na obrazovkach */


.responsive-banner_full {
  position: relative;
  margin: auto;
  width: 100%;
  max-width: 100%;
  min-height: 150px;   /* Minimum height for short content */
  max-height: 100%;
  height: auto;        /* Let height grow with content */
  overflow: hidden;
  border-radius: 0px;
  display: flex;
  flex-direction: column;
}

/* === IMAGE === */
.responsive-banner_full img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

/* === OVERLAY === */
.responsive-banner_full .overlay-content {
  position: relative;
  min-height: 150px;
  z-index: 2;
  padding: 40px 10%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;

}

    .responsive-banner_full h1 {
      font-size: 18pt;
      color: black;
      margin: 0;
    }

    .responsive-banner_full p {
      font-size: 14pt;
      color: black;
      margin: 10px 0;
    }

    .responsive-banner_full .buttonred {
      background-color: #f80120;
      color: white !important;
      border: 2px solid transparent;
      border-radius: 32px; 
      padding: 12px 32px;
      font-size: 16px;
      cursor: pointer;
      text-decoration: none !important;
      transition: 0.4s ease;
    }

    .responsive-banner_full .buttonred:hover {
      background-color: #bb0101;
    }

    .responsive-banner_full .buttonblack {
      background-color: black;
      color: white !important;
      border: 2px solid transparent;
      border-radius: 32px; 
      padding: 12px 32px;
      font-size: 16px;
      cursor: pointer;
      text-decoration: none !important;
      transition: 0.4s ease;
    }

    .responsive-banner_full .buttonblack:hover {
      background-color: gray !important;
      color: #ffffff !important;
    }



    @media (max-width: 600px) {
      .responsive-banner_full h1 {
        font-size: 16pt;
      }

      .responsive-banner_full p {
        font-size: 12pt;
      }

      .responsive-banner_full .buttonred {
        padding: 10px 24px;
        font-size: 14px;
      }

      .responsive-banner_full .buttonblack {
        padding: 10px 24px;
        font-size: 14px;
      }
    }


/* Wrapper around buttons to align them in a row- CSS nastavenie pre tlacidla, aby boli vedla seba a v strede*/

.responsive-banner_full .button-row {
  display: flex;
  gap: 16px; /* spacing between buttons */
  flex-wrap: wrap; /* optional: stack on very small screens */
  justify-content: center; /* center them horizontally */
  margin-top: 15px;
}



/* RESPONZIVNY BANNER, !!!ZAOBLENE ROHY!!!, do ktoreho vieme dat obrazok, nadpis, text aj tlacidla a meni sa na obrazovkach */


.responsive-banner_full_round {
  position: relative;
  margin: auto;
  width: 100%;
  max-width: 100%;
  min-height: 150px;   /* Minimum height for short content */
  max-height: 100%;
  height: auto;        /* Let height grow with content */
  overflow: hidden;
  border-radius: 30px;
  display: flex;
  flex-direction: column;
}

/* === IMAGE === */
.responsive-banner_full_round img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

/* === OVERLAY === */
.responsive-banner_full_round .overlay-content {
  position: relative;
  min-height: 150px;
  z-index: 2;
  padding: 40px 10%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;

}



/* === TEXT === */
.responsive-banner_full_round h1 {
  font-size: 18pt;
  color: black;
  margin: 0;
}

.responsive-banner_full_round p {
  font-size: 12pt;
  color: black;
  margin: 10px 0;
}

/* === BUTTONS === */
.responsive-banner_full_round .button-row_center {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 15px;
}

.responsive-banner_full_round .buttonred,
.responsive-banner_full_round .buttonblack {
  border-radius: 32px;
  padding: 12px 32px;
  font-size: 16px;
  cursor: pointer;
  text-decoration: none !important;
  transition: 0.4s ease;
  display: inline-block;
  text-align: center;
  border: 2px solid transparent;
}

.buttonred {
  background-color: #f80120;
  color: white !important;
}

.buttonred:hover {
  background-color: #bb0101;
}

.buttonblack {
  background-color: black !important;
  color: white !important;
}

.buttonblack:hover {
  background-color: gray !important;
  color: #ffffff !important;
}

/* === RESPONSIVE === */
@media (max-width: 600px) {
  .responsive-banner_full_round h1 {
    font-size: 16pt;
  }

  .responsive-banner_full_round p {
    font-size: 11pt;
  }

  .responsive-banner_full_round .buttonred,
  .responsive-banner_full_round .buttonblack {
    padding: 10px 24px;
    font-size: 13px;
  }

  .responsive-banner_full_round .banner-icon {
    width: 30px;
    margin-bottom: 10px;
  }
}





/* Wrapper around buttons to align them in a row- CSS nastavenie pre tlacidla, aby boli vedla seba a v strede*/

.responsive-banner_full_round .button-row_center {
  display: flex;
  gap: 16px; /* spacing between buttons */
  flex-wrap: wrap; /* optional: stack on very small screens */
  justify-content: center; /* center them horizontally */
  margin-top: 15px;
}



/* .......................................................................................................... */

/* Toto je tip containera, ktory prepise temu a spravi ho siroky na celu obrazovku   */

/* .......................................................................................................... */

.fullscreen-override_container {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  position: relative;
  left: 0;
  right: 0;
  max-width: none;
  border-radius: 0; /* optional: remove radius to flush edges */
}



/* .......................................................................................................... */

/* ODTIALTO IDE RESPONZIVNY BANNER, KTORY je na mobile POD SEBA a na NTB VEDLA SEBA   */

/* .......................................................................................................... */


  /* === BANNER CONTAINER === */
    .responsive-banner_split {
      position: relative;
      width: 100%;
      min-height: 400px;
      background-image: url('https://www.mitochondriak.com/user/documents/upload/Bannery_contajner/About_us.jpg');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      border-radius: 0px;
      display: flex;
      align-items: stretch;
    }

    /* === LOGO IN TOP-LEFT CORNER === */
    .banner-logo {
      position: absolute;
      top: 20px;
      left: 20px;
      height: 40px;
      z-index: 5;
      pointer-events: none;
    }

    @media (max-width: 768px) {
      .banner-logo {
        top: 15px;
        left: 15px;
        height: 30px;
      }
    }

    /* === OVERLAY CONTENT === */
    .responsive-banner_split .overlay-content {
      background: rgba(0, 0, 0, 0.4);
      padding: 20px 10%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      gap: 30px;
      width: 100%;
      flex-wrap: wrap;
      color: white;
      border-radius: 0px;
    }

    /* === COLUMNS === */
    .responsive-banner_split .column {
      flex: 1;
    }

    .responsive-banner_split .left h1 {
      font-size: 22pt;
      margin: 0;
      color: white;
    }

    .responsive-banner_split .right p {
      font-size: 14pt;
      margin: 0 0 12px 0;
      color: white;
    }

    /* === BUTTON ROW === */
    .responsive-banner_split .button-row {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
    }

    /* === BUTTON STYLES === */
    .buttonred,
    .buttonwhite,
    .buttonblack {
  box-sizing: border-box;
  padding: 12px 5vw; /* Responsive horizontal padding */
  font-size: 16px;
  border-radius: 32px;
  text-decoration: none !important;
  transition: 0.4s ease;
  cursor: pointer;
  display: inline-block;
  min-width: 120px;
  max-width: 100%;
  text-align: center;
  white-space: nowrap;
}

/* Red button */
.buttonred {
  background-color: #f80120;
  color: white !important;
  border: 2px solid transparent;
}

.buttonred:hover {
  background-color: #bb0101;
}

/* White button */
.buttonwhite {
  background-color: white !important;
  color: black !important;
  border: 2px solid transparent;
}

.buttonwhite:hover {
  background-color: black !important;
  color: white !important;
}

/* White black */
.buttonblack {
  background-color: black !important;
  color: white !important;
  border: 2px solid transparent;
}

.buttonblack:hover {
  background-color: grey !important;
  color: white !important;
}



@media (max-width: 600px) {
  .buttonred,
  .buttonwhite {
    padding: 10px 8vw;
    font-size: 14px;
  }
}

    /* === MOBILE RESPONSIVE === */
    @media (max-width: 768px) {
      .responsive-banner_split .overlay-content {
        flex-direction: column;
        text-align: center;
        padding: 30px 5%;
      }

      .responsive-banner_split .left,
      .responsive-banner_split .right {
        width: 100%;
      }

      .responsive-banner_split .left h1 {
        font-size: 18pt;
      }

      .responsive-banner_split .right p {
        font-size: 12pt;
      }

      .buttonred,
      .buttonwhite,
      .buttonblack {
        font-size: 14px;
        padding: 10px 24px;
      }

      .button-row {
        justify-content: center;
      }
    }


/* .......................................................................................................... */

/* KONIEC - RESPONZIVNY BANNER, KTORY je na mobile POD SEBA a na NTB VEDLA SEBA   */

/* ODTIALTO IDE - RESPONZIVNY BANNER PRE CATEGORY, KTORY je na mobile POD SEBA a na NTB VEDLA SEBA, a je na celu sirku OBRAZOVKY 100vW   */

/* .......................................................................................................... */




/* === SCHOVAM na SHOPTET-e NADPIS KATEGORIE  === */
.category-header,
.breadcrumb,
.page-heading,
.category-title {
  display: none !important;
}


.responsive-banner_split_category_textvlavo {
  position: relative;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  overflow: hidden;
  display: block;
  border-radius: 0 !important;
}

/* === IMAGE === */
.image-wrapper_category_textvlavo {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 0 !important;
}

.banner-image_category_textvlavo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0 !important;
}

/* === OVERLAY CONTENT === */
.overlay-content_category_textvlavo {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 40px 10%;
  flex-wrap: wrap;
  color: black;
  background: none;
}

/* === COLUMNS === */
.overlay-content_category_textvlavo .column_category_textvlavo {
  flex: 1;
}

.overlay-content_category_textvlavo .left {
  flex-basis: 70%;
  max-width: 70%;
  text-align: left;
}

.overlay-content_category_textvlavo .left h1,
.overlay-content_category_textvlavo .left h2,
.overlay-content_category_textvlavo .left p {
  color: black;
  margin: 0 0 15px 0;
}

.overlay-content_category_textvlavo .left h1 {
  font-size: 20pt;
}

.overlay-content_category_textvlavo .left h2 {
  font-size: 18pt;
}

.overlay-content_category_textvlavo .left p {
  font-size: 12pt;
  max-width: 600px;
}

/* === BUTTONS === */
.button-row_category_textvlavo {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}


/* === IKONKA ZOBRAZENA V TLACIDLACH === */

.buttonCATEGORYred .button-icon {
  height: 28px;
  width: auto;
  margin-right: 8px;
  vertical-align: middle;
}

.buttonCATEGORYwhite .button-icon {
  height: 28px;
  width: auto;
  margin-right: 8px;
  vertical-align: middle;
}

.buttonCATEGORYblack .button-icon {
  height: 28px;
  width: auto;
  margin-right: 8px;
  vertical-align: middle;
}



.buttonCATEGORYred,
.buttonCATEGORYwhite,
.buttonCATEGORYblack {
  box-sizing: border-box;
  padding: 12px 5vw;
  font-size: 16px;
  border-radius: 32px;
  text-decoration: none !important;
  transition: 0.4s ease;
  cursor: pointer;
  display: inline-block;
  min-width: 120px;
  max-width: 100%;
  text-align: center;
  white-space: nowrap;
}

.buttonCATEGORYred {
  background-color: #f80120;
  color: white !important;
  border: 2px solid transparent;
}

.buttonCATEGORYred:hover {
  background-color: #bb0101;
}

.buttonCATEGORYwhite {
  background-color: white !important;
  color: black !important;
  border: 2px solid transparent;
}

.buttonCATEGORYwhite:hover {
  background-color: black !important;
  color: white !important;
}

.buttonCATEGORYblack {
  background-color: black !important;
  color: white !important;
  border: 2px solid transparent;
}

.buttonCATEGORYblack:hover {
  background-color: grey !important;
  color: white !important;
}



/* === RESPONSIVE MOBILE === */
@media (max-width: 960px) and (min-width: 768px) {
  .overlay-content_category_textvlavo {
    flex-direction: column_category_textvlavo;
    text-align: left; /* ✅ ALIGNED LEFT ON MOBILE */
    align-items: flex-start;
    padding: 20px 5%;
  }

  .overlay-content_category_textvlavo .left {
    flex-basis: 100%;
    max-width: 100%;
    text-align: left;
  }

  .overlay-content_category_textvlavo .left h1 {
    font-size: 16pt;
  }

  .overlay-content_category_textvlavo .left h2 {
    font-size: 15pt;
  }

  .overlay-content_category_textvlavo .left p {
    font-size: 11pt;
  }

  .buttonCATEGORYred,
  .buttonCATEGORYwhite,
  .buttonCATEGORYblack {
    padding: 10px 8vw;
    font-size: 14px !important;
  }

  .button-row_category_textvlavo {
    justify-content: flex-start;
  }
}

@media (max-width: 767px) {
  .buttonCATEGORYred,
  .buttonCATEGORYwhite,
  .buttonCATEGORYblack {
    font-size: 12px !important;
  }

  .overlay-content_category_textvlavo .left {
    flex-basis: 100%;
    max-width: 100%;
    text-align: left;
  }

  .overlay-content_category_textvlavo .left h1 {
    font-size: 15pt;
  }

  .overlay-content_category_textvlavo .left h2 {
    font-size: 15pt;
  }

  .overlay-content_category_textvlavo .left p {
    font-size: 11pt;
  }
}



/* ..................................................................................................... */
/* ..................................................................................................... */

/* KONIEC - RESPONZIVNY BANNER pre CATEGORY na eshope   */

/* ZACIATOK ODTIALTO - pre RESPONZIVNY BANNER  pre PRODUCT GUIDE zlozeny z dvoch obrazkov a responzivny  */

/* ..................................................................................................... */
/* ..................................................................................................... */



/* === RESPONZÍVNY BANNER PRE PRODUCT GUIDE === */

/* === Pouzivame aktuálne pri Banner "floor stand a Maxi" === */


.responsive-banner_product_guide {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 70vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: stretch;
  border-radius: 0;
}

.banner-inner_product_guide {
  display: flex;
  width: 100%;
  position: relative;
  flex-direction: row;
  height: auto;
}

/* === OBRÁZKY === */
.img_ntb_product_guide,
.img_mobile_product_guide {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: none;
}

.img_ntb_product_guide {
  display: block;
}

@media (max-width: 550px) {
  .img_ntb_product_guide {
    display: none;
  }
  .img_mobile_product_guide {
    display: block;
  }
}

/* === OVERLAY CONTENT === */
.overlay-content_product_guide {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 15px 2%;
  box-sizing: border-box;
  height: 100%;
}


/* === COLUMNS === */
.column-left_product_guide {
  flex: 1;
}

.column-left_product_guide .banner-icon {
  display: block;
  height: auto;
  max-height: 300px;
  width: auto !important;
  max-width: 100%;
  margin-bottom: 20px;
  object-fit: contain;
}


.column-right_product_guide {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 10px;
}

.column-right_product_guide h1 {
  font-size: 15pt;
  color: black;
  margin: 0;
}

.column-right_product_guide p {
  font-size: 12pt;
  color: black;
  margin: 10px 0;
}

/* === BUTTONS === */
.button-row_product_guide {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 10px;
}

.buttonred_product_guide,
.buttonblack_product_guide {
  background-color: transparent;
  color: inherit !important;
  border-radius: 32px;
  padding: 12px 32px;
  font-size: 14px;
  text-decoration: none !important;
  cursor: pointer;
  transition: 0.4s ease;
  border: 2px solid transparent;
  display: inline-block;
}

.buttonred_product_guide {
  background-color: #f80120;
  color: white !important;
}

.buttonred_product_guide:hover {
  background-color: #bb0101;
}

.buttonblack_product_guide {
  background-color: black;
  color: white !important;
}

.buttonblack_product_guide:hover {
  background-color: gray !important;
  color: white !important;
}


/* === RESPONSIVE: MEDZI TABLET a MOBILE === */

@media (max-width: 960px) and (min-width: 551px) {
  .column-right_product_guide h1 {
    font-size: 13pt;
  }
  .column-right_product_guide p {
   font-size: 11pt;
  }
}


/* === RESPONSIVE: MOBILE === */
@media (max-width: 550px) {

.column-left_product_guide {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

  .column-left_product_guide .banner-icon {
    max-height: 120px;
    margin-bottom: 12px;
  }

  .responsive-banner_product_guide {
    aspect-ratio: auto;
    max-height: 80vh;
  }

  .overlay-content_product_guide {
    flex-direction: column;
    padding: 20px 8% 24px 8%;
    text-align: center;
    gap: 10px;
    height: 100%;
    justify-content: flex-end;
  }

  .column-left_product_guide,
  .column-right_product_guide {
    width: 100%;
  }

  .column-right_product_guide {
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
  }

  .column-right_product_guide h1 {
    font-size: 13pt;
  }

  .column-right_product_guide p {
    font-size: 11pt;
    margin: 5px 0;
  }

  .buttonred_product_guide,
  .buttonblack_product_guide {
    font-size: 12px;
    padding: 10px 24px;
  }

  .button-row_product_guide {
    justify-content: center;
  }
}


/* ..................................................................................................... */
/* ..................................................................................................... */

/* KONIEC - RESPONZIVNY BANNER pre PRODUCT GUIDE zlozeny z dvoch obrazkov a responzivny   */

/* ODTIALTO IDU ZAROVNANIA PRE TLACIDLA   */


/* ..................................................................................................... */
/* ..................................................................................................... */




.button-row_center,
.button-row_left,
.button-row_right {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.button-row_center {
  justify-content: center !important;
}

.button-row_left {
  justify-content: flex-start !important;
}

.button-row_right {
  justify-content: flex-end !important;
}


@media (max-width: 768px) {
  .button-row_center,
  .button-row_left,
  .button-row_right {
    justify-content: center;
    gap: 12px;
  }

  .button-row_center a,
  .button-row_left a,
  .button-row_right a {
    padding: 10px 8vw;
    font-size: 14px;
  }
}


/* .............................................................................. */

/* ...... TU KONCI ZAROVNANIA PRE TLACIDLA ......  */

/* ........................................................................... */