/** Product Highlight Section Styles **/
.product-highlight-wrapper {
  background: linear-gradient(to top, #37389a 0%, #2631a3 50%, #B07387 100%);
  padding: 5rem 1rem 2rem;
  height: 100%; /* See võib vajada kohandamist, kui sisu on pikem */
  box-sizing: border-box; /* Tagab, et polster ei suurenda elemendi laiust/kõrgust */
}

.product-highlight-container {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  box-sizing: border-box; /* Lisatud */
  padding: 0 1rem; /* Lisa horisontaalne polster */
  margin-top: 4rem;
}

.product-highlight-wrapper .category-filter-card {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.product-highlight-container h2 {
  font-size: 1.8rem; /* Kasutame rem ühikut */
  color: #fff;
  margin-bottom: 1rem;
}

.product-highlight-container p {
  font-size: 1rem; /* Kasutame rem ühikut */
  color: #fff;
  line-height: 1.6;
}

.landing-product-highlight-cards {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin: 2rem auto 1rem;
  padding: 0;
  list-style: none;
  flex-wrap: wrap; /* Lubab kaartidel reavahetust, kui ruumi napib */
}

.landing-product-highlight-card {
  display: flex;
  flex-direction: column; /* Kaardi sisu vertikaalselt */
  align-items: center; /* Kaardi sisu horisontaalselt keskele */
  flex: 1; /* Lubab kaardil painduda */
  width: 100%; /* Vaikimisi laius, mis kohandub flex-i alusel */
  min-width: 200px; /* Säilitame paindlikkuse väiksematel lauaarvuti ekraanidel */
  max-width: 240px; /* Uus maksimaalne laius desktopil */
  aspect-ratio: 240 / 460; /* Hoiab proportsiooni 240x460 (laius / kõrgus) */
  height: auto; /* Tagab, et kõrgus kohandub vastavalt suhtarvule */
  border: 1px solid #ccc;
  padding: 1rem;
  border-radius: 8px;
  background-color: var(--card-bg, #a9699f);
  transition: background-color 1s ease;
  text-align: center;
  box-sizing: border-box; /* Lisatud */
}

.hidden-card {
  display: none !important;
}

.landing-product-highlight-card img {
  max-width: 100%;
  height: auto;
  max-height: var(--product-card-img-height, 200px); /* See võib vajada kohandamist, kui kaardi kõrgus muutub drastiliselt */
  object-fit: contain;
  border-radius: 15px;
  margin-bottom: 0.5rem;
}

.landing-product-highlight-card h3 {
  font-size: 1.1rem; /* Kasutame rem ühikut */
  margin: 0.5rem 0 0;
  color: #fff;
}

/*
 * Stiilid tooteesilehe jaotise nupule
 */
.product-highlight-cta-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1rem; /* Lihtsustatud polsterdus */
    text-align: center;
    width: 100%; /* Vaikimisi võtab 100% vanema elemendi laiusest */
    max-width: 550px; /* Piirab maksimaalset laiust lauaarvutil - SUURENDATUD */
    margin: 2rem auto 0; /* Kohandatud marginaal, et eraldada kaartidest */
    border: 1.5px solid white;
    border-radius: 15px;
    box-sizing: border-box; /* Tagab, et polster ei suurenda laiust */
}

.product-highlight-cta-text {
  margin-bottom: 1rem; /* Lisab tühiku teksti ja nupu vahele */
  font-size: 1.1rem; /* Kasutame rem ühikut */
  line-height: 1.5;
}

/* Peamine nupu stiil */
.e-store-cta-button {
  /* --- SIIN SAAD SEADISTADA MÕÕTE --- */
  --button-width: 140px; /* Nupu laius */
  --button-height: 45px;  /* Nupu kõrgus */

  /* Nupu välimus */
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: var(--button-width);
  height: var(--button-height);
  padding: 0 25px; /* Polsterdus külgedel */
  font-size: 1.25rem; /* Kasutame rem ühikut */
  font-weight: 900; /* Rasvane tekst */
  text-decoration: none; /* Eemaldab lingi allakriipsutuse */
  border: none; /* Eemaldab vaikimisi piirjoone */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Lisab kerge varju */
  cursor: pointer; /* Muudab kursori käeks */
  transition: background-color 0.3s ease, transform 0.2s ease; /* Sujuv üleminek */
  box-sizing: border-box; /* Lisatud */
}

/* Mobiilivaate muudatused (max-width: 768px) */
@media (max-width: 767px) { /* Kasutan 767px, et olla kooskõlas eelmiste murdepunktidega */
  .product-highlight-wrapper {
    height: auto; /* Laseb kõrgusel kohanduda sisuga */
    padding: 2rem 1rem 1rem; /* Väiksem polster mobiilis */
  }

  .product-highlight-container {
    padding: 0 0.5rem; /* Väiksem horisontaalne polster */
  }

  .product-highlight-container h2 {
    font-size: 1.5rem; /* Mobiilis väiksem font */
  }

  .product-highlight-container p {
    font-size: 0.9rem; /* Mobiilis väiksem font */
  }

  .product-highlight-wrapper .category-filter-card {
    width: 100%; /* Mobiilis võtab kogu laiuse */
    min-height: auto; /* Eemaldab fikseeritud kõrguse */
    max-width: none; /* Eemaldab maksimaalse laiuse piirangu */
    flex-direction: column; /* Mobiilis vertikaalne paigutus */
    align-items: center; /* Tsentreerib elemendid veergu */
  }

  .landing-product-highlight-cards {
    flex-direction: column; /* Kaardid vertikaalselt üksteise alla */
    gap: 0.8rem; /* Väiksem vahe kaartide vahel */
    max-width: 260px;
  }

  .landing-product-highlight-card {
    width: 85%; /* Mobiilis veidi kitsam kaart */
    max-width: 300px; /* Piirab mobiilis kaardi maksimaalset laiust */
    aspect-ratio: 240 / 460; /* Hoiab sama proportsiooni ka mobiilis */
    margin: 0.5rem auto; /* Annab kaartidele veidi vertikaalset marginaali */
  }

  .product-highlight-cta-wrapper {
    width: 90%; /* Mobiilis laiem */
    max-width: 350px; /* Piirab maksimaalset laiust mobiilis */
    padding: 0.8rem; /* Väiksem polster mobiilis */
    margin-top: 1.5rem; /* Kohandatud marginaal */
  }

  .product-highlight-cta-text {
    font-size: 1rem; /* Mobiilis väiksem font */
  }

  .e-store-cta-button {
    --button-width: 120px; /* Mobiilis väiksem nupu laius */
    --button-height: 40px; /* Mobiilis väiksem nupu kõrgus */
    font-size: 1.1rem; /* Mobiilis väiksem nupu font */
  }
}

/* Tahvelarvuti ja väiksemate sülearvutite muudatused (min-width: 768px and max-width: 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .product-highlight-wrapper {
    height: auto; /* Laseb kõrgusel kohanduda sisuga */
    padding: 4rem 1.5rem 1.5rem; /* Kohandatud polster */
  }

  .product-highlight-container {
    max-width: 90%; /* Tahvelarvutitel laiem konteiner */
    margin-bottom: 1.5rem;
  }

  .product-highlight-container h2 {
    font-size: 1.6rem;
  }

  .product-highlight-container p {
    font-size: 0.95rem;
  }

  .landing-product-highlight-cards {
    gap: 0.8rem; /* Väiksem vahe kaartide vahel */
  }

  .landing-product-highlight-card {
    min-width: 180px; /* Kohandatud min-laius */
    max-width: 200px; /* Kohandatud max-laius */
    aspect-ratio: 240 / 460; /* Hoiab sama proportsiooni ka tahvelarvutis */
    padding: 0.8rem;
  }

  .product-highlight-cta-wrapper {
    width: 80%; /* Tahvelarvutitel laiem */
    max-width: 400px; /* Piirab maksimaalset laiust tahvelarvutitel */
    padding: 1rem;
    margin-top: 1.5rem;
  }

  .product-highlight-cta-text {
    font-size: 1.05rem;
  }

  .e-store-cta-button {
    --button-width: 130px;
    --button-height: 42px;
    font-size: 1.15rem;
  }
}