/* === PANGEA E-SHOP PRODUKTY === */
.produkty-grid { /* Trieda pre kontajner všetkých produktov */
    display: grid; /* Zapne CSS Grid layout */
    grid-template-columns: repeat(3, 1fr); /* Vytvorí 3 rovnaké stĺpce, každý 1 diel šírky */
    gap: 30px; /* Medzera 30px medzi kartami produktov */
    margin: 40px auto; /* Hore/dole 40px odstup, vľavo/vpravo auto = vycentruje */
    max-width: 1200px; /* Maximálna šírka gridu 1200px */
    padding: 0 20px; /* Vnútorný odstup 0 hore/dole, 20px vľavo/vpravo */
}

.produkt { /* Trieda pre jednu kartu produktu */
    display: flex; /* Zapne Flexbox pre obsah karty */
    flex-direction: column; /* Prvky v karte zoradí pod seba */
    background: #f8f8f8; /* Svetlo sivé pozadie karty */
    padding: 15px; /* Vnútorný odstup 15px zo všetkých strán */
    border-radius: 8px; /* Zaoblené rohy 8px */
    box-shadow: 0 2px 8px rgba(0,0,0,0.08); /* Jemný tieň: 0 doprava, 2px dole, 8px rozmazanie */
    transition: transform 0.2s ease; /* Plynulá animácia 0.2s pri zmene transform */
}

.produkt:hover { /* Štýly keď prejdeš myšou na kartu */
    transform: translateY(-5px); /* Posunie kartu o 5px hore */
}

.produkt img { /* Obrázok vnútri karty produktu */
    width: 100%; /* Šírka 100% rodiča */
    max-width: 300px; /* Ale max 300px */
    height: 300px; /* Pevná výška 300px */
    object-fit: cover; /* Obrázok oreže aby vyplnil 300x300 bez deformácie */
    margin: 0 auto 15px auto; /* Hore 0, boky auto = center, dole 15px */
    border-radius: 4px; /* Zaoblené rohy 4px */
}

.produkt .text h3 { /* Nadpis h3 v texte produktu */
    margin: 0 0 10px 0; /* Hore/vľavo/vpravo 0, dole 10px odstup */
    font-size: 1.1rem; /* Veľkosť písma 1.1 násobok základnej */
    color: #222; /* Tmavo sivá farba textu */
}

.produkt .text p { /* Odstavec v texte produktu */
    margin: 0; /* Zruší všetky vonkajšie odstupy */
    line-height: 1.5; /* Riadkovanie 1.5 násobok výšky písma */
    color: #444; /* Stredne sivá farba textu */
    font-size: 0.95rem; /* Veľkosť písma 0.95 násobok základnej */
}

/* Tablet - 2 v riadku */
@media (max-width: 1024px) { /* Ak je šírka okna 1024px a menej */
    .produkty-grid { /* Uprav grid produktov */
        grid-template-columns: repeat(2, 1fr); /* Zmeň na 2 stĺpce */
        gap: 25px; /* Zmenši medzeru na 25px */
    }
}

/* Mobil - 1 v riadku */
@media (max-width: 600px) { /* Ak je šírka okna 600px a menej */
    .produkty-grid { /* Uprav grid produktov */
        grid-template-columns: 1fr; /* Len 1 stĺpec */
        gap: 20px; /* Medzera 20px */
    }
    
    .produkt img { /* Obrázok produktu na mobile */
        height: 250px; /* Zmenši výšku na 250px */
    }
}

/* Základné štýly */
.main-content-wrapper { /* Obal hlavného obsahu */
    max-width: 1000px; /* Maximálna šírka 1000px */
    margin: 0 auto; /* Hore/dole 0, boky auto = vycentruje */
    padding: 20px; /* Vnútorný odstup 20px zo všetkých strán */
}

.text-section { /* Sekcia s textom */
    max-width: 1200px; /* Maximálna šírka 1200px */
    margin: 40px auto; /* Hore/dole 40px, boky auto = center */
    padding: 0 20px; /* Hore/dole 0, boky 20px odstup */
}

.text-section h1 { /* Nadpis h1 v textovej sekcii */
    text-align: center; /* Text na stred */
    margin-bottom: 20px; /* Odstup dole 20px */
}

.single-main-image-wrapper img { /* Hlavný obrázok e-shopu */
    width: 70%; /* Šírka 70% = zmenšený o 30% */
    height: auto; /* Výška sa dopočíta podľa pomeru strán */
    display: block; /* Zmení na block element */
    margin: 0 auto; /* Hore/dole 0, boky auto = vycentruje */
}

header { /* Horná lišta stránky */
    background: #222; /* Tmavé pozadie */
    color: white; /* Biely text */
    padding: 15px 0; /* Hore/dole 15px, boky 0 */
}

.header-content { /* Obsah hlavičky */
    max-width: 1400px; /* Maximálna šírka 1400px */
    margin: 0 auto; /* Vycentruje na stred */
    display: flex; /* Flexbox layout */
    justify-content: space-between; /* Logo vľavo, menu vpravo */
    align-items: center; /* Vertikálne na stred */
    padding: 0 20px; /* Boky 20px odstup */
}

.logo { /* Blok s logom */
    font-weight: bold; /* Tučné písmo */
    font-size: 1.2rem; /* Veľkosť 1.2 násobok základnej */
}

nav ul { /* Zoznam položiek menu */
    display: flex; /* Položky vedľa seba */
    list-style: none; /* Zruší odrážky zoznamu */
    gap: 20px; /* Medzera 20px medzi položkami */
    margin: 0; /* Zruší vonkajší odstup */
    padding: 0; /* Zruší vnútorný odstup */
}

nav a { /* Odkazy v menu */
    color: white; /* Biela farba textu */
    text-decoration: none; /* Zruší podčiarknutie */
}

nav a:hover { /* Odkaz pri prejdení myšou */
    text-decoration: underline; /* Pridá podčiarknutie */
}

footer { /* Pätička stránky */
    background: #222; /* Tmavé pozadie */
    color: white; /* Biely text */
    text-align: center; /* Text na stred */
    padding: 20px; /* Vnútorný odstup 20px */
    margin-top: 60px; /* Odstup zhora 60px */
}

.img-center { /* Trieda pre centrovanie obrázka */
    display: block; /* Zmení na block */
    margin: 20px auto; /* Hore/dole 20px, boky auto = center */
}