* {
  margin: 0; /* Noņem visus noklusējuma margi */
  padding: 0; /* Noņem visus noklusējuma aizpildījumus */
  box-sizing: border-box; /* Iestata box modelu, lai platums un augstums ietver aizpildījumus un apmales */
}

body {
  font-family: 'Helvetica Neue', Arial, sans-serif; /* Norāda fontu visam ķermenim */
  color: #333; /* Teksta krāsa */
  background-color: #f4f4f4; /* Fona krāsa */
  line-height: 1.6; /* Rindkopu augstuma attiecība */
}

.container {
  width: 90%; /* Platums 90% no vecāka elementa */
  max-width: 1200px; /* Maksimālais platums 1200px */
  margin: 0 auto; /* Centrē konteineru */
}

.header {
  display: flex; /* Iestata elastīgo izkārtojumu galvenei */
  justify-content: center; /* Centrē saturu horizontāli */
  padding: 20px 0; /* Augšējais un apakšējais aizpildījums */
}

.header .container {
  display: flex; /* Iestata elastīgo izkārtojumu konteineram galvenē */
  align-items: center; /* Vertikāli centrē saturu */
  width: 100%; /* Platums 100% */
  max-width: 1200px; /* Maksimālais platums 1200px */
}

.header .logo {
  font-size: 24px; /* Logo teksta izmērs */
  font-weight: bold; /* Logo teksta svarīgums */
  letter-spacing: 2px; /* Atstarpe starp burtiem */
  color: #111; /* Logo krāsa */
  margin-right: 20px; /* Atstarpe labajā pusē */
}

.header .logo a {
  text-decoration: none; /* Noņem zemsvītru no saites */
  color: inherit; /* Mantot krāsu no vecāka elementa */
}

.header .nav {
  display: flex; /* Iestata elastīgo izkārtojumu navigācijai */
  align-items: center; /* Vertikāli centrē elementus */
}

.header .nav a {
  text-decoration: none; /* Noņem zemsvītru no saites */
  color: #111; /* Teksta krāsa saitiem */
  margin: 0 15px; /* Horizontālā atstarpe starp saitēm */
  font-size: 16px; /* Teksta izmērs */
  transition: color 0.3s ease; /* Pāreja krāsas izmaiņām */
}

.header .nav a:hover {
  color: #555; /* Krāsa, kad pele ir virs saites */
}

.header .nav a.collections {
  font-weight: bold; /* Svara palielināšana kolekciju saitei */
  color: #555; /* Krāsa kolekciju saitei */
}

.nav .dropdown {
  position: relative; /* Pozīcijas iestatīšana attiecībā pret vecāku elementu */
}

.nav .dropdown:hover .dropdown-content {
  display: block; /* Rāda noklikšķināmo saturu, kad pele ir virs tā */
}

.dropdown-content {
  display: none; /* Noklikšķināmā satura sākotnējā stāvokļa slēpšana */
  position: absolute; /* Pozīcija attiecībā pret vecāku elementu */
  background-color: #fff; /* Fona krāsa noklikšķināmajam saturam */
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2); /* Ēnas efekts */
  padding: 10px 0; /* Aizpildījums 10px augšā un apakšā */
  min-width: 160px; /* Minimālais platums */
  z-index: 1; /* Slāņa secība */
  font-size: 14px; /* Teksta izmērs */
  color: #666; /* Teksta krāsa */
}

.dropdown-content a {
  color: #333; /* Krāsa saites iekšējos elementos */
  text-decoration: none; /* Noņem zemsvītru no saites */
  display: block; /* Rāda katru saiti kā bloku */
  padding: 8px 16px; /* Aizpildījums 8px augšā un apakšā, 16px pa malām */
  transition: background-color 0.3s ease; /* Pāreja fona krāsas izmaiņām */
}

.dropdown-content a:hover {
  background-color: #f4f4f4; /* Fona krāsa, kad pele ir virs saites */
}

.hero {
  background: #fff; /* Fona krāsa varoņa sadaļai */
  padding: 100px 0; /* Aizpildījums augšā un apakšā */
  text-align: center; /* Horizontāla centrēšana */
}

.hero h1 {
  font-size: 48px; /* Galvenā virsraksta izmērs */
  font-weight: 300; /* Galvenā virsraksta svarīgums */
  letter-spacing: 1.5px; /* Atstarpe starp burtiem */
  color: #111; /* Krāsa */
  margin-bottom: 20px; /* Apakšējā atstarpe */
}

.hero p {
  font-size: 20px; /* Apraksta teksta izmērs */
  margin-bottom: 30px; /* Apakšējā atstarpe */
  color: #666; /* Krāsa */
}

.btn-explore {
  padding: 10px 30px; /* Aizpildījums 10px augšā un apakšā, 30px pa malām */
  font-size: 16px; /* Pogu teksta izmērs */
  color: #fff; /* Pogu teksta krāsa */
  background-color: #111; /* Pogu fona krāsa */
  border: none; /* Bez apmales */
  text-transform: uppercase; /* Teksts lielajiem burtiem */
  transition: background 0.3s ease; /* Pāreja fona krāsas izmaiņām */
  text-decoration: none; /* Noņem zemsvītru no pogas */
}

.btn-explore:hover {
  background-color: #333; /* Fona krāsa, kad pele ir virs pogas */
}

.featured {
  background: #f4f4f4; /* Fona krāsa izceltajai sadaļai */
  padding: 50px 0; /* Aizpildījums augšā un apakšā */
}

.featured h2 {
  font-size: 32px; /* Apakšvirsraksta izmērs */
  text-align: center; /* Horizontāla centrēšana */
  margin-bottom: 40px; /* Apakšējā atstarpe */
  color: #111; /* Krāsa */
}

.product-grid {
  display: flex; /* Elastīgā izkārtojuma izmantošana produktiem */
  justify-content: space-around; /* Atstarpe starp produktiem */
  flex-wrap: wrap; /* Iespējojiet līniju pārrakstīšanu */
  gap: 20px; /* Atstarpe starp produktiem */
}

.product {
  width: calc(33.333% - 20px); /* Platums, ņemot vērā atstarpi */
  text-align: center; /* Horizontāla centrēšana */
}

.product img {
  width: 100%; /* Attēla platums 100% */
  height: auto; /* Automātiska augstuma iestatīšana */
  display: block; /* Attēls kā bloks */
  margin-bottom: 10px; /* Apakšējā atstarpe */
  transition: transform 0.3s ease; /* Pāreja transformācijas izmaiņām */
}

.product img:hover {
  transform: scale(1.05); /* Palielinājums, kad pele ir virs attēla */
}

.product p {
  font-size: 16px; /* Teksta izmērs */
  color: #333; /* Krāsa */
  text-transform: uppercase; /* Teksts lielajiem burtiem */
  margin-top: 10px; /* Augšējā atstarpe */
}

.gallery {
  padding: 20px; /* Aizpildījums visām pusēm */
}

.gallery-container {
  display: grid; /* Izmanto režģa izkārtojumu galerijai */
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* Automātiska kolonnu izveide */
  gap: 15px; /* Atstarpe starp attēliem */
}

.gallery-container img {
  width: 100%; /* Attēla platums 100% */
  height: auto; /* Automātiska augstuma iestatīšana */
  border-radius: 8px; /* Stūru noapaļojums */
  transition: transform 0.3s ease; /* Pāreja transformācijas izmaiņām */
}

.gallery-container img:hover {
  transform: scale(1.05); /* Palielinājums, kad pele ir virs attēla */
}

.auth-container {
  display: flex; /* Elastīgā izkārtojuma izmantošana autentifikācijas sadaļā */
  justify-content: center; /* Centrēšana horizontāli */
  align-items: center; /* Centrēšana vertikāli */
  padding: 100px 0; /* Aizpildījums augšā un apakšā */
  background-color: #fff; /* Fona krāsa */
}

.auth-title {
  font-size: 24px; /* Nosaukuma teksta izmērs */
  text-align: center; /* Horizontāla centrēšana */
  margin-bottom: 20px; /* Apakšējā atstarpe */
  color: #111; /* Krāsa */
  text-transform: uppercase; /* Teksts lielajiem burtiem */
}

.auth-form {
  display: flex; /* Elastīgā izkārtojuma izmantošana formas sadaļā */
  flex-direction: column; /* Vertikāla izkārtojuma iestatīšana */
  align-items: center; /* Centrēšana horizontāli */
}

.form-group {
  margin-bottom: 20px; /* Apakšējā atstarpe starp formu grupām */
  width: 100%; /* Platums 100% */
}

.form-group input {
  width: 100%; /* Ievades lauka platums 100% */
  padding: 10px; /* Aizpildījums 10px visām pusēm */
  font-size: 16px; /* Teksta izmērs */
  border: 1px solid #ddd; /* Apmale */
  border-radius: 4px; /* Stūru noapaļojums */
  color: #333; /* Teksta krāsa */
  outline: none; /* Noņem fokusa kontūru */
  transition: border-color 0.3s ease; /* Pāreja apmales krāsas izmaiņām */
}

.form-group input:focus {
  border-color: #111; /* Apmales krāsa, kad lauks ir fokusēts */
}

.btn-auth {
  display: inline-block; /* Izmanto inline-bloku pogai */
  width: 100%; /* Platums 100% */
  padding: 12px; /* Aizpildījums 12px visām pusēm */
  text-align: center; /* Horizontāla centrēšana */
  color: #111; /* Krāsa */
  background-color: #fff; /* Fona krāsa */
  border: 1px solid #111; /* Apmale */
  text-transform: uppercase; /* Teksts lielajiem burtiem */
  cursor: pointer; /* Rādīt, ka ir klikšķināma */
  transition: background-color 0.3s ease; /* Pāreja fona krāsas izmaiņām */
}

.btn-auth:hover {
  background-color: #f4f4f4; /* Fona krāsa, kad pele ir virs pogas */
}

.forgot-password {
  display: block; /* Rāda aizmirstās paroles saiti kā bloku */
  margin-top: 15px; /* Augšējā atstarpe */
  font-size: 14px; /* Teksta izmērs */
  color: #666; /* Krāsa */
  text-decoration: none; /* Noņem zemsvītru */
}

.divider {
  margin: 30px 0; /* Augšējā un apakšējā atstarpe */
  border-top: 1px solid #ddd; /* Augšējā robeža */
}

.register {
  background-color: #fff; /* Fona krāsa reģistrācijas pogai */
  border: 1px solid #111; /* Apmale */
  color: #111; /* Teksta krāsa */
}