/* Diese Datei regelt das Styling für die Produktübersicht, also das Sortiment. */

.pcimg {
    /* Ein allgemeiner Stil für die Bilder auf der Kategorieseite. */
    margin: 0px;
    height: 10em;
    width: 10em;
    background-color: white;
    padding: 30px;
    border-radius: 30px;
}

.grid {
    /* Ein bisschen Außenabstand für das gesamte Grid, damit es nicht am Rand klebt. */
    margin: 0 30px 0px 30px;
    
    display: grid;
    /* Das ist das Herzstück des responsiven Layouts.
       - "repeat" erstellt so viele Spalten wie möglich.
       - "auto-fit" sorgt dafür, dass sich die Spalten an den verfügbaren Platz anpassen.
       - "minmax(400px, 1fr)" bedeutet: Jede Spalte ist mindestens 400px breit, aber wenn mehr Platz da ist,
         teilen sich alle Spalten den verfügbaren Raum (1fr) fair auf.
       So umbrechen die Karten automatisch in die nächste Zeile, wenn der Bildschirm schmaler wird. */
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    grid-row-gap: 10px;
    grid-column-gap: 10px;
}

/* Styling für die einzelne Produktkarte im Grid */
.grid .pc {
    display: flex;
    flex-direction: column; /* Stellt sicher, dass die Elemente (Bild, Text, Button) untereinander angeordnet werden. */
    background-color: #111136;
    border: 2px solid #1f1f64;
    border-radius: 30px;
    padding: 30px;
}

.pc img {
    /* Zentriert das Produktbild horizontal in der Karte. */
    align-self: center;
    margin-bottom: 30px; /* Etwas Abstand zum nachfolgenden Text. */
}

.pc h3 {
    font-family: "Roboto", sans-serif;
    margin: 0px;
}

/* Wir stylen hier die zweite (und letzte) h3-Überschrift anders.
   Das ist ideal, um z.B. den Preis hervorzuheben. */
.pc h3:last-of-type {
    font-style: italic;
    color: red;
    margin: 0px;
    margin-bottom: 10px;
}

.pc p {
    font-family: "Roboto", sans-serif;
    margin: 0px;
}

/* Der Container für den "In den Warenkorb"-Button. */
.cart {
    display: flex;
    margin-top: 30px; /* Schiebt den Button nach unten, damit er bündig abschließt, falls die Beschreibung unterschiedlich lang ist. */
    justify-content: center; /* Zentriert den Button horizontal. */
    margin-bottom: 0px;
}

.cart button {
    cursor: pointer; /* Zeigt eine Hand, wenn man mit der Maus darüberfährt. */
    padding: 10px;
    border-radius: 30px;
    display: flex; /* Nötig, um Icon und Text nebeneinander auszurichten. */
    align-items: center; /* Richtet Icon und Text vertikal mittig aus. */
    background-color: white;
    border-color: transparent;
}

.cart button p {
    font-family: "Roboto", sans-serif;
}

/* Das kleine Warenkorb-Icon im Button */
.cart img {
    margin: 0px;
    height: 1.5em;
    width: 1.5em;
    background-color: transparent;
}

/* Entfernt die standardmäßige Unterstreichung von Links, hier für den Warenkorb-Button. */
.cart a {
    text-decoration: none;
}