/* Basis */
body {
  margin: 0;
  font-family: 'Cormorant Garamond', sans-serif;
  background-color: #FAF8F3;
  color: #2b2b2b;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Cormorant Garamond', serif;
}
.nav-links a.active {
  position: relative;
  color: #000; /* Fremhæv farven på det aktive link */
  font-weight: bold; /* Gør teksten fed for at fremhæve */
}

.nav-links a.active::after {
  content: ""; /* Tilføjer en streg under teksten */
  position: absolute;
  bottom: -5px; /* Placerer stregen lige under teksten */
  left: 0;
  width: 100%; /* Stregen fylder hele bredden af teksten */
  height: 0.5px; /* Tykkelsen af stregen */
  background-color: #000; /* Farven på stregen */
}
.nav-links a {
font-family: 'Cormorant Garamond', serif; /* Behold skrifttypen for menupunkterne */
}
p, li {
font-family: 'Mulish', sans-serif; /* Sikrer Mulish på brødtekst */
font-size: 1rem; /* Standard tekststørrelse */
margin-bottom: 1rem; /* Tilføjer afstand mellem tekstblokke */
}

/* Logo */
/* Standard: Vis kun det store logo */
.logo-desktop {
    display: block; /* Vis det store logo */
  }
  
  .logo-mobile {
    display: none; /* Skjul det lille logo */
  }
  
  /* På mindre skærme: Vis kun det lille logo */
  @media (max-width: 768px) {
    .logo-desktop {
      display: none; /* Skjul det store logo */
    }
  
    .logo-mobile {
      display: block; /* Vis det lille logo */
    }
  }
  /* Hero Sektion */
/* Styling for hero-billedet og teksten */
.hero {
  position: relative; /* Gør det muligt at placere tekst oven på billedet */
  width: 100%; /* Sørger for, at hero-sektionen fylder hele bredden af skærmen */
  height: 500px; /* Fast højde for konsistens */
  overflow: hidden; /* Skjuler eventuelle dele af billedet, der går uden for containeren */
  margin-bottom: 30px; /* Tilføjer afstand under hero-sektionen */
}

.hero-image {
  width: 100%; /* Sørger for, at billedet fylder hele bredden af hero-sektionen */
  height: 100%; /* Sørger for, at billedet fylder hele højden af hero-sektionen */
  object-fit: cover; /* Bevarer billedets proportioner og beskærer det for at fylde containeren */
}

.hero-text {
  position: absolute; /* Placerer teksten oven på billedet */
  top: 50%; /* Centrerer teksten vertikalt */
  left: 50%; /* Centrerer teksten horisontalt */
  transform: translate(-50%, -50%); /* Justerer teksten, så den er præcist centreret */
  color: #FFECCE; /* Lys tekstfarve for at skabe kontrast mod baggrunden */
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); /* Tilføjer en skygge for bedre læsbarhed */
  text-align: center; /* Centrerer teksten horisontalt */
  font-size: 2rem; /* Gør teksten stor nok til at være iøjnefaldende */
  font-weight: bold; /* Gør teksten mere fremtrædende */
}
  .hero-text h1 {
    font-size: 2rem; /* Standard fontstørrelse */
    text-align: center;
    margin: 0;
}

.hero-text h1.mobile-text {
    display: none; /* Skjul mobilteksten som standard */
}

.hero-text h1.desktop-text {
    display: block; /* Vis desktopteksten som standard */
}

/* Vinkategorier Sektion */
/* Styling for sektionen med vinkategorier */
.vinkategrorier-section {
  text-align: center; /* Centrerer teksten og indholdet */
  padding: 60px; /* Tilføjer indvendig afstand for bedre layout */
}

.vinkategrorier-section h2 {
  font-family: "playfair-display"; /* Elegant skrifttype til overskriften */
  font-weight: 500; /* Medium vægt for en balanceret stil */
  font-size: 32px; /* Gør overskriften fremtrædende */
  margin-top: 50px; /* Tilføjer afstand over overskriften */
  margin-bottom: 20px; /* Tilføjer afstand under overskriften */
  color: #000000; /* Sort farve for god kontrast */
}
  
  .vinkategrorier-menu {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    font-weight: 300;
    font-size: 16px;
  }
  
  .vinkategrorier-menu a {
    text-decoration: none;
    color: #000000;
    border-bottom: 1px solid transparent;
  }
  
  .vinkategrorier-menu a.active,
  .vinkategrorier-menu a:hover {
    border-color: #000000;
  }
  


@media (max-width: 768px) {
    .hero-text h1.mobile-text {
        display: block; /* Vis mobilteksten på mindre skærme */
        font-size: 2rem; /* Mindre fontstørrelse til mobil */
    }

    .hero-text h1.desktop-text {
        display: none; /* Skjul desktopteksten på mindre skærme */
    }
    .hero {
        height: 300px; /* Reducer højden på mindre skærme */
        margin-bottom: 20px; /* Mindre afstand på små skærme */
    }
        .kontakt-container {
          flex-direction: column;
          padding: 0 20px; /* Reducer padding på små skærme */
        }
        .vinkategrorier-menu {
            flex-direction: column; /* Stabler links vertikalt */
            gap: 10px; /* Reducerer afstanden mellem links */
          }
        
          .vinkategrorier-menu a {
            width: 100%; /* Gør links fuldbredde */
            text-align: center; /* Centrerer teksten */
          }
          .produkt-detaljer {
            flex-direction: column; /* Stabler billede og tekst */
            gap: 20px;
            padding: 20px;
        }
    
        .produkt-billede img {
            max-width: 100%; /* Gør billedet fuldbredde */
            position: relative;
            left: 50px; /* Flytter billedet mod højre på små skærme */  
        }
    
        .produkt-info {
            text-align: center; /* Centrerer teksten */
        }
        .varer-grid {
            flex-direction: column; /* Stabler produkterne */
            gap: 10px;
            align-items: center; /* Centrerer produkterne */
        }
    
        .vare img {
            max-width: 100px; /* Reducer billedstørrelsen */
        }
        .tilfoej-til-oenskeliste i {
            font-size: 20px; /* Reducer størrelsen på små skærme */
        }
        .vare:nth-child(n+5) {
            display: none; /* Skjul vine efter de første 4 */
          }
        
          .varer-grid {
    grid-template-columns: repeat(2, 1fr); /* Skift til 2 kolonner på mindre skærme */
    gap: 15px; /* Reducer afstanden mellem elementerne */
  }
}
         
    .produkt-detaljer {
        display: flex;
        gap: 40px;
        padding: 40px;
      }
      
      .produkt-billede img {
        width: 100%;
        max-width: 400px;
        border-radius: 5px;
        position: relative;
        left: 20px; /* Flytter billedet 20px mod højre */
      }
      
      .produkt-info {
        max-width: 600px;
      }
      
      .produkt-info h2 {
        font-size: 2.5rem;
        margin-bottom: 10px;
      }
      
      .produkt-info .pris {
        font-size: 1.5rem;
        color: #C2A476;
        margin-bottom: 20px;
      }
      
      .produkt-info p {
        line-height: 1.6;
        margin-bottom: 20px;
      }
      
      button {
        background-color: #C2A476;
        color: rgb(10, 10, 10);
        border: none;
        padding: 10px 20px;
        font-size: 1rem;
        cursor: pointer;
        border-radius: 0px;
        margin-right: 10px;
      }
      
      button:hover {
        background-color: #FAF8F3;
      }
      
    
    .varer-grid {
        display: flex;
        justify-content: center; /* Centrerer produkterne horisontalt */
        flex-wrap: wrap; /* Tillader produkterne at bryde til næste linje */
        gap: 20px; /* Tilføjer afstand mellem produkterne */
    }
    
    .vare {
        text-align: center; /* Centrerer teksten under hvert produkt */
        flex: 1 1 calc(25% - 20px); /* Gør hvert produkt 25% bred minus afstand */
        max-width: 200px; /* Begrænser bredden af hvert produkt */
    }
    
    .vare img {
        width: 100%;
        border-radius: 5px; /* Tilføjer afrundede hjørner til billederne */
    }
    
    .vare p {
        margin-top: 10px; /* Tilføjer afstand mellem billedet og teksten */
        font-size: 1rem; /* Justerer tekststørrelsen */
    }
    /* ønskeliste-section */
      .tilfoej-til-oenskeliste {
        background: none; /* Fjern baggrund */
        border: none; /* Fjern kant */
        cursor: pointer; /* Gør det tydeligt, at det er klikbart */
        padding: 0; /* Fjern indvendig afstand */
      }
      
      .tilfoej-til-oenskeliste img {
        width: 24px; /* Juster størrelsen på ikonet */
        height: 24px;
      }
      
      .tilfoej-til-oenskeliste i {
        font-size: 24px; /* Juster størrelsen på Font Awesome-ikonet */
        color: #C2A476; /* Giv ikonet en passende farve */
        transition: color 0.3s ease; /* Tilføj en hover-effekt */
      }
      
      .tilfoej-til-oenskeliste:hover i {
        color: #e63a3a; /* Ændrer farve ved hover */
      }
/* Styling for relaterede varer */
.relaterede-varer {
  text-align: center; /* Centrerer teksten og indholdet */
  margin: 40px auto; /* Tilføjer afstand over og under sektionen */
  max-width: 1200px; /* Begrænser bredden af sektionen */
}

.relaterede-varer h3 {
  font-size: 2rem; /* Gør overskriften mere fremtrædende */
  margin-bottom: 20px; /* Tilføjer afstand under overskriften */
}

.relaterede-varer-grid {
  display: grid; /* Brug CSS Grid til layout */
  grid-template-columns: repeat(4, 1fr); /* Fire kolonner som standard */
  gap: 20px; /* Tilføjer afstand mellem elementerne */
}

.relaterede-varer-grid .vare {
  text-align: center; /* Centrerer teksten under hvert produkt */
}

.relaterede-varer-grid img {
  width: 100%; /* Sørger for, at billederne fylder deres container */
  max-width: 200px; /* Begrænser billedets bredde */
  border-radius: 5px; /* Tilføjer afrundede hjørner */
}

/* Responsiv styling */
@media (max-width: 768px) {
  .relaterede-varer-grid {
    grid-template-columns: repeat(2, 1fr); /* Skift til to kolonner på mindre skærme */
  }
}

@media (max-width: 480px) {
  .relaterede-varer-grid {
    grid-template-columns: 1fr; /* Skift til én kolonne på meget små skærme */
  }
}