@font-face {
  font-family: 'sen';
  src: url('sen.ttf');
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'sen', sans-serif;
  background-color: #f2f2f2; /* Barva pozadí stránky */
  position: relative; /* Nastavení relativní pozice pro body */
}

#box {
  width: 100%;
  height: auto;
}

#header {
  position: relative; /* Nastavení relativní pozice pro záhlaví */
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #ffffff;
  padding: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.logo {
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo img {
  max-width: 200px;
  height: auto;
  transition: transform 0.3s ease;
}

.logo:hover img {
  transform: scale(1.1);
}

nav ul {
  list-style-type: none;
  display: flex;
}

nav ul li {
  margin: 0 15px;
}

nav ul li a {
  font-family: 'sen', sans-serif;
  font-weight: bold;
  text-decoration: none;
  color: #333;
  font-size: 20px;
  padding: 10px 15px;
  border-radius: 5px;
  transition: 0.3s ease;
}

nav ul li a:hover {
  background-color: #ddd;
}

.search {
  display: flex;
  align-items: center;
  position: relative; /* Přidání relativní pozice pro pozdější umístění ikony vyhledávání */
}

.search input[type="text"] {
  padding: 10px; /* Zvýšení polštářování pro lepší vzhled */
  border-radius: 5px;
  border: 1px solid #ccc;
  width: 300px; /* Zvětšení šířky pole pro lepší použitelnost */
  margin-right: 10px; /* Odsazení mezi polem a tlačítkem */
}

.search button {
  padding: 10px 20px; /* Zvýšení polštářování pro lepší vzhled */
  border: none;
  background-color: #333;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease; /* Plynulý přechod při najetí myší */
}

.search button:hover {
  background-color: #555; /* Změna barvy pozadí při najetí myší */
}

.user-options {
  position: absolute; /* Nastavení absolutní pozice pro odkazy "Košík" a "Můj účet" */
  top: 20px; /* Umístění od horní hrany záhlaví */
  right: 20px; /* Umístění od pravého okraje záhlaví */
  display: flex;
}

.user-options a {
  font-family: 'sen', sans-serif;
  text-decoration: none;
  color: #333;
  font-size: 16px;
  padding: 8px 12px;
  border: 2px solid #333;
  border-radius: 5px;
  transition: 0.3s ease;
  margin-left: 10px; /* Mezera mezi Košíkem a Můj účet */
}

.user-options a:hover {
  background-color: #333;
  color: #fff;
}
/* Styly pro nadpis */
.nadpis {
  text-align: center;
  margin-bottom: 20px;
  font-size: 150px;
}

.produkty-container {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  background-color: rgb(255, 255, 255);
}

.filtration {
  position: absolute;
  left: 20px;
  margin-top: 10px;
}

.sorting {
  position: absolute;
  right: 20px;
  margin-top: 10px;
}

.filtration button,
.sorting button {
  padding: 10px 20px;
  background-color: #ffffff;
  color: #777;
  border: 1px solid #777;
  border-radius: 5px;
  cursor: pointer;
  transition:  0.3s ease;
}

.filtration button:hover,
.sorting button:hover {
  background-color: #777;
  color: #fff;;
} 

.produkty div {
  position: relative;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 10px;
  box-sizing: border-box;
  z-index: 999; /* Nastavil jsem z-index, aby overlay byl nad ostatními prvky */
  transform: translateY(-100%);
  transition: 0.3s ease;
  font-size: 10px;
  opacity: 0; /* Overlay bude výchozím stavem skrytý */
  visibility: hidden; /* Overlay bude výchozím stavem skrytý */
}


.produkty div:hover .overlay {
  transform: translateY(0);
  opacity: 1; /* Overlay se zobrazí při najetí myší */
  visibility: visible; /* Overlay se zobrazí při najetí myší */
}

.sizes {
  margin-bottom: 5px;
}

.sizes p {
  margin: 0;
  font-weight: bold;
}

.sizes ul {
  list-style: none;
  padding: 0;
  margin: 5px 0 0;
}

.sizes ul li {
  display: inline-block;
  background-color: #333;
  color: white;
 padding: 10px 10px; 
  margin-right: 5px;
  border-radius: 5px;
  font-size: 10px;
}

.overlay a {
  display: block;
  text-decoration: none;
  color: white;
  padding: 0px 10px;
  background-color: #333;
  border-radius: 10px;
  text-align: center;
  font-size: 15px;
}

.overlay a:hover {
  background-color: #555;
}

.produkty {
  width: 1350px;
  height: 1800px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  background-color: rgb(255, 255, 255);
  margin-top: 50px;
}

.produkt1,
.produkt2,
.produkt3,
.produkt4,
.produkt5,
.produkt6,
.produkt7,
.produkt8,
.produkt9,
.produkt10,
.produkt11,
.produkt12,
.produkt13,
.produkt14,
.produkt15,
.produkt16,
.produkt17,
.produkt18,
.produkt19,
.produkt20 {
  width: 230px;
  height: 230px;
  transition: 0.3s ease;
  cursor: pointer;
}

.produkt1:hover,
.produkt2:hover,
.produkt3:hover,
.produkt4:hover,
.produkt5:hover,
.produkt6:hover,
.produkt7:hover,
.produkt8:hover,
.produkt9:hover,
.produkt10:hover,
.produkt11:hover,
.produkt12:hover,
.produkt13:hover,
.produkt14:hover,
.produkt15:hover,
.produkt16:hover,
.produkt17:hover,
.produkt18:hover,
.produkt19:hover,
.produkt20:hover {
  transform: scale(1.03); /* Zvětšení po najetí myší */
}

.produkt1 {
  background-image: url(photos/nabidkaphoto1.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.produkt2 {
  background-image: url(photos/nabidkaphoto2.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.produkt3 {
  background-image: url(photos/nabidkaphoto3.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.produkt4 {
  background-image: url(photos/nabidkaphoto4.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.produkt5 {
  background-image: url(photos/nabidkaphoto5.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.produkt6 {
  background-image: url(photos/nabidkaphoto6.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.produkt7 {
  background-image: url(photos/nabidkaphoto7.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.produkt8 {
  background-image: url(photos/nabidkaphoto8.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.produkt9 {
  background-image: url(photos/nabidkaphoto9.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.produkt10 {
  background-image: url(photos/nabidkaphoto10.png);
  background-repeat: no-repeat;
  background-size: cover;
}
.produkt11 {
  background-image: url(photos/nabidkaphoto11.png);
  background-repeat: no-repeat;
  background-size: cover;
}
.produkt12 {
  background-image: url(photos/nabidkaphoto12.png);
  background-repeat: no-repeat;
  background-size: cover;
}
.produkt13 {
  background-image: url(photos/nabidkaphoto13.png);
  background-repeat: no-repeat;
  background-size: cover;
}
.produkt14 {
  background-image: url(photos/nabidkaphoto14.png);
  background-repeat: no-repeat;
  background-size: cover;
}
.produkt15 {
  background-image: url(photos/nabidkaphoto15.png);
  background-repeat: no-repeat;
  background-size: cover;
}
.produkt16 {
  background-image: url(photos/nabidkaphoto16.png);
  background-repeat: no-repeat;
  background-size: cover;
}
.produkt17 {
  background-image: url(photos/nabidkaphoto17.png);
  background-repeat: no-repeat;
  background-size: cover;
}
.produkt18 {
  background-image: url(photos/nabidkaphoto18.png);
  background-repeat: no-repeat;
  background-size: cover;
}
.produkt19 {
  background-image: url(photos/nabidkaphoto19.png);
  background-repeat: no-repeat;
  background-size: cover;
}
.produkt20 {
  background-image: url(photos/nabidkaphoto20.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.produkt1 h1,
.produkt1 h2,
.produkt2 h1,
.produkt2 h2,
.produkt3 h1,
.produkt3 h2,
.produkt4 h1,
.produkt4 h2,
.produkt5 h1,
.produkt5 h2,
.produkt6 h1,
.produkt6 h2,
.produkt7 h1,
.produkt7 h2,
.produkt8 h1,
.produkt8 h2,
.produkt9 h1,
.produkt9 h2,
.produkt10 h1,
.produkt10 h2,
.produkt11 h1,
.produkt11 h2,
.produkt12 h1,
.produkt12 h2,
.produkt13 h1,
.produkt13 h2,
.produkt14 h1,
.produkt14 h2,
.produkt15 h1,
.produkt15 h2,
.produkt16 h1,
.produkt16 h2,
.produkt17 h1,
.produkt17 h2,
.produkt18 h1,
.produkt18 h2,
.produkt19 h1,
.produkt19 h2,
.produkt20 h1,
.produkt20 h2 {
  font-size: 14px;
}

.produkt1 h1,
.produkt2 h1,
.produkt3 h1,
.produkt4 h1,
.produkt5 h1,
.produkt6 h1,
.produkt7 h1,
.produkt8 h1,
.produkt9 h1,
.produkt10 h1,
.produkt11 h1,
.produkt12 h1,
.produkt13 h1,
.produkt14 h1,
.produkt15 h1,
.produkt16 h1,
.produkt17 h1,
.produkt18 h1,
.produkt19 h1,
.produkt20 h1  {
  margin-top: 230px;
  color: #333;
}

.produkt1 h3,
.produkt2 h3,
.produkt3 h3,
.produkt4 h3,
.produkt5 h3,
.produkt6 h3,
.produkt7 h3,
.produkt8 h3,
.produkt9 h3,
.produkt10 h3,
.produkt11 h3,
.produkt12 h3,
.produkt13 h3,
.produkt14 h3,
.produkt15 h3,
.produkt16 h3,
.produkt17 h3,
.produkt18 h3,
.produkt19 h3,
.produkt20 h3 {
  font-size: 20px;
  color: #777;
}

.produkt1 h2,
.produkt2 h2,
.produkt3 h2,
.produkt4 h2,
.produkt5 h2,
.produkt6 h2,
.produkt7 h2,
.produkt8 h2,
.produkt9 h2,
.produkt10 h2,
.produkt11 h2,
.produkt12 h2,
.produkt13 h2,
.produkt14 h2,
.produkt15 h2,
.produkt16 h2,
.produkt17 h2,
.produkt18 h2,
.produkt19 h2,
.produkt20 h2 {
  margin-left: 5px;
  color: #555;
}

.cara {
  width: 100%;
  height: 1px; 
  background-color: #ccc; 
  margin: 5px 0; 
}
.old-price {
  text-decoration: line-through; /* Přeškrtnutí původní ceny */
}


/* Styly pro newsletter */
.newsletter-container {
  background-color: #333;
  color: #fff;
  padding: 50px;
}

.newsletter-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.newsletter-text {
  flex: 1;
  max-width: 400px;
}

.newsletter-form {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.newsletter-section h4 {
  font-size: 24px;
  margin-bottom: 20px;
}

.newsletter-section p {
  font-size: 16px;
  line-height: 1.5;
}

form {
  display: flex;
  align-items: center;
}

label {
  display: none;
}

input {
  padding: 12px;
  border: none;
  border-radius: 5px;
  width: 250px;
  margin-right: 10px;
}

button {
  padding: 12px 24px;
  background-color: #fff;
  color: #333;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-left: 10px;
}

button:hover {
  background-color: #555;
  color: #fff;
}

/* Styly pro patičku */
.footer-container {
  background-color: #222;
  color: #fff;
  padding: 50px;
  font-size: 15px
}

.footer-section {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-bottom: 30px;
}

.about-converse,
.support,
.contact-us {
  flex-basis: calc(33.33% - 20px);
  margin: 10px;
}

.about-converse h1,
.support h1,
.contact-us h1 {
  font-size: 20px;
  margin-bottom: 10px;
}

.additional-links {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.additional-links h1 {
  font-size: 20px;
  margin-bottom: 10px;
  margin-right: 20px;
}

.additional-links p {
  margin-right: 20px;
}

.additional-links a {
  color: #fff;
  text-decoration: none;
  transition: color 0.3s;
}

.additional-links a:hover {
  color: #bbb;
}