/* Pamatstili visiem elementiem */
* {
  margin: 0; /* Izņem margin vērtības */
  padding: 0; /* Izņem padding vērtības */
  box-sizing: border-box; /* Pielieto "box-sizing" stilu visiem elementiem */
}

/* Vispārējie stili ķermeņa elementam */
body {
  font-family: 'Helvetica Neue', Arial, sans-serif; /* Tipa fonts */
  color: #333; /* Teksta krāsa */
  background-color: #f8f8f8; /* Fona krāsa */
  line-height: 1.6; /* Rindkopas augstums */
}

/* Stils tekstam, kas ir centrēts */
.text-center {
  text-align: center; /* Teksts ir centrēts */
}

/* Stiliem ar noteiktu apakšējo margin vērtību */
.mb-10 {
  margin-bottom: 10px; /* Margin apakšā */
}

.mb-20 {
  margin-bottom: 20px; /* Margin apakšā */
}

.mb-30 {
  margin-bottom: 30px; /* Margin apakšā */
}

.mt-20 {
  margin-top: 20px; /* Margin augšā */
}

/* Flexbox stili */
.flex {
  display: flex; /* Flexbox izkārtojums */
}

.flex-center {
  display: flex; /* Flexbox izkārtojums */
  justify-content: center; /* Centrē horizontāli */
  align-items: center; /* Centrē vertikāli */
}

.flex-wrap {
  flex-wrap: wrap; /* Atļauj elstīgus elementus ietinēties nākamajā rindā */
}

.gap-20 {
  gap: 20px; /* Attālums starp flex elementiem */
}

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

/* Galvenes stili */
.header {
  background-color: #111; /* Tumša galvene */
  color: #fff; /* Balts teksts */
  padding: 10px 0; /* Galvenes iekšējais atstarpe */
}

.header .logo {
  font-size: 24px; /* Logo izmērs */
  font-weight: bold; /* Logo svara iestatījums */
  letter-spacing: 1.5px; /* Starpburti */
}

.header .logo a {
  text-decoration: none; /* Noņem tekstu no apakšējās līnijas */
  color: inherit; /* Manto teksta krāsu */
}

/* Navigācijas stili */
.nav {
  display: flex; /* Flexbox izkārtojums */
  align-items: center; /* Centrē vertikāli */
  justify-content: space-between; /* Izlīdzina elementus pa malu */
}

.nav a {
  text-decoration: none; /* Noņem tekstu no apakšējās līnijas */
  color: #fff; /* Balta krāsa */
  margin: 0 15px; /* Margin starp saitēm */
  font-size: 14px; /* Fonta izmērs */
  transition: color 0.3s ease; /* Pāreja uz krāsas maiņu */
}

.nav a:hover {
  color: #ccc; /* Krāsa pārslēdzas uz pelēku, kad pele ir virs saites */
}

/* Pirkumu groza pogas stils */
.cart-button {
  padding: 10px 20px; /* Iekšējais atstarpe */
  font-size: 14px; /* Fonta izmērs */
  text-transform: uppercase; /* Teksta pārvēršana uz lielajiem burtiem */
  background-color: #000; /* Fona krāsa */
  color: #fff; /* Teksta krāsa */
  border: none; /* Bez apmales */
  border-radius: 4px; /* Noapaļotas malas */
  cursor: pointer; /* Peles kursoru pārveido par rādītāju */
  text-decoration: none; /* Noņem apakšējo līniju */
  transition: background-color 0.3s ease; /* Pāreja uz fona krāsas maiņu */
}

.cart-button:hover {
  background-color: #333; /* Pāreja uz tumšāku krāsu peles virsmai */
}

/* Nokrišņu izvēlnes stili */
.dropdown {
  position: relative; /* Pozicionē relatīvi */
  display: inline-block; /* Rādīt kā rindas elementu */
}

.dropdown-label {
  font-size: 16px; /* Fonta izmērs */
  color: #fff; /* Teksta krāsa */
  text-transform: uppercase; /* Teksts lielajiem burtiem */
  padding: 10px 15px; /* Iekšējais atstarpe */
  cursor: default; /* Kursors parasts */
}

.dropdown-content {
  display: none; /* Paslēpt izvēlni pēc noklusējuma */
  position: absolute; /* Pozicionēt absolūti */
  top: 100%; /* Izvēlne parādīsies zem izvēlnes nosaukuma */
  left: 0; /* Iestatīt sākuma punktu uz kreiso malu */
  background-color: #fff; /* Fona krāsa */
  min-width: 200px; /* Minimālais platums */
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); /* Noēnojums */
  z-index: 1000; /* Nodrošina, ka izvēlne parādīsies virs pārējiem elementiem */
  border: 1px solid #ddd; /* Robeža */
}

.dropdown-content a {
  color: #111; /* Krāsa saitēm */
  text-decoration: none; /* Noņem apakšējo līniju */
  padding: 10px 15px; /* Iekšējais atstarpe */
  display: block; /* Displejs kā bloks */
  font-size: 14px; /* Fonta izmērs */
  transition: background-color 0.3s ease; /* Pāreja uz fona krāsas maiņu */
}

.dropdown-content a:hover {
  background-color: #f4f4f4; /* Pāreja uz pelēku fonu */
  color: #000; /* Krāsa pārslēdzas uz melnu */
}

.dropdown:hover .dropdown-content {
  display: block; /* Parāda izvēlni, kad peli virzās virs izvēlnes */
}

/* Hero sadaļa */
.hero {
  background: #fff; /* Fona krāsa */
  padding: 100px 0; /* Iekšējais atstarpe augšā un apakšā */
  text-align: center; /* Centrē tekstu */
}

.hero h1 {
  font-size: 48px; /* Fonta izmērs */
  font-weight: 300; /* Svars */
  letter-spacing: 1.5px; /* Starpburti */
  color: #111; /* Krāsa */
  margin-bottom: 20px; /* Margin apakšā */
}

.hero p {
  font-size: 20px; /* Fonta izmērs */
  color: #666; /* Krāsa */
  margin-bottom: 30px; /* Margin apakšā */
}

/* Poga ar klasēm */
.btn {
  display: inline-block; /* Attēlo pogu kā inline-elementu */
  padding: 12px 30px; /* Iekšējais atstarpe */
  font-size: 14px; /* Fonta izmērs */
  text-transform: uppercase; /* Teksts lielajiem burtiem */
  border-radius: 4px; /* Noapaļotas malas */
  cursor: pointer; /* Kursors kā pirksts */
  transition: all 0.3s ease; /* Pāreja uz visām īpašībām */
  text-align: center; /* Centrē tekstu */
  text-decoration: none; /* Noņem apakšējo līniju */
}

.btn-primary {
  background-color: #111; /* Fona krāsa */
  color: #fff; /* Teksta krāsa */
  border: none; /* Bez apmales */
}

.btn-primary:hover {
  background-color: #333; /* Tumšāka krāsa peles virsmai */
}

/* Produktu izkārtojums */
.product-grid {
  display: grid; /* Izkārtojums kā tīkls */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Kolonnu skaits mainās atkarībā no platuma */
  gap: 20px; /* Attālums starp produktiem */
  padding: 20px; /* Iekšējais atstarpe */
}

.product {
  background-color: #fff; /* Fona krāsa */
  border: 1px solid #ddd; /* Robeža */
  border-radius: 8px; /* Noapaļotas malas */
  overflow: hidden; /* Paslēpt pārsniegtos elementus */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Viegls noēnojums */
  text-align: center; /* Centrē tekstu */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Pārejas efekti */
}

.product:hover {
  transform: translateY(-5px); /* Produkti pacelsies uz augšu peles virsmai */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Tumšāks noēnojums */
}

.product img {
  width: 100%; /* Attēla platums 100% no produkta platuma */
  height: 350px; /* Augstums */
  object-fit: cover; /* Attēls pielāgojas bez izstiepšanās */
}

.product p {
  padding: 10px; /* Iekšējais atstarpe */
  font-size: 16px; /* Fonta izmērs */
  color: #333; /* Teksta krāsa */
}

/* Pēdējā kārtā - kājenes stils */
.footer {
  background-color: #111; /* Tumšs fons */
  color: #fff; /* Balts teksts */
  text-align: center; /* Centrē tekstu */
  padding: 20px 0; /* Iekšējais atstarpe */
  margin-top: 50px; /* Margin virs kājenes */
}

/* Pieteikšanās forma */
.auth-container {
  padding: 50px 0; /* Iekšējais atstarpe augšā un apakšā */
  background-color: #f8f8f8; /* Fona krāsa */
}

.auth-title {
  text-align: center; /* Centrē tekstu */
  font-size: 24px; /* Fonta izmērs */
  margin-bottom: 20px; /* Margin apakšā */
}

/* Pieteikšanās formu stili */
.auth-form {
  max-width: 400px; /* Maksimālais platums */
  margin: 0 auto; /* Centrē formu */
}

.form-group {
  margin-bottom: 20px; /* Margin apakšā */
}

.form-group input {
  width: 100%; /* Platums 100% */
  padding: 10px; /* Iekšējais atstarpe */
  font-size: 16px; /* Fonta izmērs */
  border: 1px solid #ddd; /* Robeža */
  border-radius: 4px; /* Noapaļotas malas */
}

/* Pieteikšanās pogas stils */
.btn-auth {
  width: 100%; /* Platums 100% */
  padding: 12px; /* Iekšējais atstarpe */
  background-color: #111; /* Fona krāsa */
  color: #fff; /* Teksta krāsa */
  text-transform: uppercase; /* Teksts lielajiem burtiem */
  font-size: 16px; /* Fonta izmērs */
  border: none; /* Bez apmales */
  border-radius: 4px; /* Noapaļotas malas */
  cursor: pointer; /* Kursors kā pirksts */
}

.btn-auth:hover {
  background-color: #333; /* Tumšāka krāsa peles virsmai */
}

/* Dalīšanas līnija */
.divider {
  border: 0; /* Bez apmales */
  height: 1px; /* Augstums */
  background: #ddd; /* Krāsa */
  margin: 40px 0; /* Margin virs un apakšā */
}

/* Aizmirstā paroli saite */
.forgot-password {
  display: block; /* Attēlot saiti */
  text-align: center; /* Centrē tekstu */
  margin-top: 10px; /* Margin virs */
  font-size: 14px; /* Fonta izmērs */
  color: #666; /* Krāsa */
  text-decoration: none; /* Noņem apakšējo līniju */
}

.forgot-password:hover {
  color: #111; /* Krāsa mainās, kad pele ir virs saites */
}
