body {
font-family: sans-serif;

  max-width: 1200px;
  margin: 0 auto;
 padding: 5px;
}

.red {
background-color: #FFCCCC;
}



h1 {
  font-size: 32px;
  color: #B22222;
}

h2 {
  font-size: 24px;
  color: #B22222;
}



.product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}


a {
  display: inline;
  white-space: nowrap;
}


.h1-container {
  display: flex;
  align-items: center;
  gap: 10px; /* medzera medzi nadpisom a obrázkom */
}


.nadpis {
    font-size: 20px;
    font-weight: bold;
}


.nadpis2 {
    font-weight: bold;
}


.produkty {
  display: flex;
  justify-content: flex-start; /* Produkty začínajú zľava */
flex-wrap: wrap;        /* Zalamuje produkty na nový riadok */
  gap: 20px; /* Medzera medzi produktami */
}

.produkt {
  flex: 0 1 220px; /* Zabezpečí rovnakú šírku a zabráni roztiahnutiu */
  text-align: center;
}

.header-base {
  padding: 10px;
  text-align: center;
}


.styled-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.styled-table td {
  padding: 10px;
}


.cena {
  font-size: 20px;
  font-weight: bold;
}



/*produkty*/

.obrazok-s-textom {
  display: flex;
  align-items:  flex-start; /* Text bude pri vrchu */
  gap: 10px; /* Medzera medzi obrazkom a textom */
}

.obrazok {
  width: auto; /* Nastavte požadovanú šírku */
  height: 387px; /* Ponechá pomer strán */
}

.obrazok2 {
  width: auto; /* Nastavte požadovanú šírku */
}


.popis {
  margin: 0;
  font-size: 16px;
}



@media (max-width: 768px) {
  .obrazok-s-textom {
    flex-direction: column; /* Obrazok hore, text pod ním */
  }
  .obrazok {
    width: 100%; /* Obrazok na plnú šírku */
    height: auto;
  }
}


/*tlacidlo kúpiť*/
.tlacidlo-kupit {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007BFF;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  font-size: 16px;
  text-align: center;
  border: none;
  cursor: pointer;
}

.tlacidlo-kupit:hover {
  background-color: #0056b3;
}


/*kontakt*/


.kontakt-container {
  display: flex;
  align-items: flex-start; /* Zarovnanie na vrch */
  gap: 20px; /* Medzera medzi obrázkom a textom */
}

@media (max-width: 768px) {
  .kontakt-container {
    flex-direction: column;
  }
}

.image-left {
  flex: none;
  width: auto;
  height: auto;
}

.image-left-signal {
  width: 128px !important;
  height: 128px !important;
}

.image-left-simplex {
  width: 192px !important;
  height: 192px !important;
}


/*
.description-right {
  min-width: 0; /* Dôležité pre zabránenie pretečenia */
  font-size: 16px;
  line-height: 1.5;
  overflow-wrap: break-word; /* Zalamovanie dlhých slov */
vertical-align: top;
}
*/


.description-right {
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* zarovná obsah na vrch */
  min-width: 0;
  font-size: 16px;
  line-height: 1.5;
  overflow-wrap: break-word;
}


.email {
  font-size: 20px;
}

.odporucane {
  background-color: #B2F2B2; /*very light green*/
}

.kontakt-cena {
   font-size: 24px;
    font-weight: bold;
}

/*galery*/
.image-gallery {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex-shrink: 0; /* Prevents shrinking */
}

.main-image {
  width: 300px;
  height: auto;
  border-radius: 10px;
}

.thumbnails {
  display: flex;
  gap: 5px;
}

.thumb {
  width: 80px;
  height: auto;
  cursor: pointer;
  border-radius: 5px;
  transition: transform 0.2s;
}

.thumb:hover {
  transform: scale(1.1);
}



/*lightbox*/
.lightbox {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.9);
  text-align: center;
  padding: 30px;
}

.lightbox-img {
  max-width: 90%;
  max-height: 90%;
  margin-top: 2%;
  border: 3px solid white;
  border-radius: 10px;
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: white;
  font-size: 50px;
  cursor: pointer;
}


/* Zmení kurzor na ruku pri prejdení nad veľkým obrázkom */
.main-image {
  cursor: pointer;
}

/* Alternatívne: použiť ikonu lupy (špecifická pre zväčšovanie) */
.main-image:hover {
  cursor: zoom-in;
}