/* Product Intro Section Styles (Desktop-first) */
.product-intro-wrapper {
  width: 100%; /* Muudetud 100vw-st 100%-ks, et vältida horisontaalset kerimist */
  height: auto;
  aspect-ratio: var(--aspect-ratio);
  position: relative;
  display: block;
  box-sizing: border-box; /* Lisatud, et polster ei mõjutaks laiust */
}

.product-intro-background-color {
  background: linear-gradient(to top, #ab619e 0%, #8b5bb0 40%, #5f5cc5 100%);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.product-intro-image {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain; /* 'contain' tagab, et pilt on tervenisti nähtav, kuid see võib jätta tühja ruumi. Kui soovid, et pilt täidaks kogu ala (ja lõikaks vajadusel servi), kasuta 'cover'. */
  display: block;
}

.product-intro-image img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Sama kommentaar nagu ülal */
  display: block;
}

.product-intro-container {
  position: absolute;
  display:flex; /* Kasutame flexboxi sisu tsentreerimiseks */
  flex-direction: column; /* Veergude suund */
  top: 61%; /* Vertikaalselt tsentreeritud */
  left: 67%; /* Horisontaalselt tsentreeritud */
  transform: translate(-50%, -50%); /* Tsentreerimine */
  z-index: 2;
  max-width: 50%; /* Suurendatud lauaarvuti vaates */
  width: 100%; /* Tagab, et konteiner võtab maksimaalse lubatud laiuse */
  color: white;
  text-align: center; /* Tekst keskele */
  box-sizing: border-box; /* Oluline, et polster ei mõjutaks laiust */
  padding: 1.5rem; /* Lisa vaikimisi polster */
}

.product-intro-container strong {
    font-size: 1.125rem;
    font-weight: bold;
}

.product-intro-title {
  font-size: 2rem; /* Kasutame rem ühikut */
  margin-bottom: 1rem;
  text-align: center;
}

.product-intro-content {
  text-align: center;
}

.product-intro-content p {
  font-size: 1.25rem; /* Kasutame rem ühikut */
}


/* Peida tühjad <p> sildid AINULT "landing-page" klassiga main-elemendi sees */
.landing-page p:empty:not([contenteditable]):not([data-wp-block]) {
  display: none !important;
}

/* Mobiilispetsiifilised ülekirjutused (max-width: 767px) */
@media (max-width: 767px) {
  .product-intro-wrapper {
    aspect-ratio: var(--aspect-ratio-mobile, var(--aspect-ratio));
  }

  .product-intro-container {
    max-width: 90%; /* Mobiilis laiem */
    left: 50%; /* Horisontaalselt tsentreeritud */
    top: 52%; /* Vertikaalselt tsentreeritud */
    transform: translate(-50%, -50%); /* Tsentreerimine */
    text-align: center; /* Tekst keskele */
    padding: 1rem; /* Mobiilis väiksem polster */
  }

  .product-intro-title {
    font-size: 1.5rem; /* Mobiilis väiksem font */
  }


  .product-intro-content p {
  font-size: var(--landing-paragraph); /* Kasutame rem ühikut */
}

}

/* Tahvelarvuti ja väiksemate sülearvutite ülekirjutused (min-width: 768px ja max-width: 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  
  .product-intro-container {
    max-width: 75%; /* Suurendatud tahvelarvutitel */
    left: 50%; /* Horisontaalselt tsentreeritud */
    top: 126%; /* Vertikaalselt tsentreeritud */
    transform: translate(-50%, -50%); /* Tsentreerimine */
    text-align: center; /* Tekst keskele */
    padding: 1.5rem; /* Tahvelarvutitel kohandatud polster */
  }

  .product-intro-title {
    font-size: 1.75rem; /* Tahvelarvutitel kohandatud font */
  }

  .product-intro-content {
    font-size: 1.1rem; /* Tahvelarvutitel kohandatud font */
  }
}

.product-highlight-container {
  display: flex; /* Muudab .product-highlight-container flex konteineriks */
  flex-direction: row; /* Asetab pildi ja sisu horisontaalselt (lauaarvuti vaade) */
  align-items: center; /* Vertikaalne tsentreerimine paindliitide sees */
  gap: 3rem; /* Tühik pildi ja sisu vahel */
  max-width: 1200px; /* Piirab maksimaalset laiust */
  width: 100%; /* Tagab, et konteiner täidab lubatud laiuse */
  flex-wrap: wrap; /* Lubab elementidel järgmisele reale minna, kui ruumi napib */
  justify-content: center; /* Horisontaalne tsentreerimine, kui sisu läheb uuele reale */
}

.product-highlight-image {
  flex: 1; /* Lubab pildil võtta saadaolevat ruumi */
  min-width: 300px; /* Minimaalne laius pildile, enne kui see murdub */
  max-width: 50%; /* Piirab pildi maksimaalset laiust lauaarvuti vaates */
  text-align: center; /* Tsentreerib pildi elemendi sees */
}

.product-highlight-image img {
  max-width: 100%; /* Tagab, et pilt ei lähe oma konteinerist välja */
  height: auto; /* Säilitab pildi proportsioonid */
  display: block; /* Eemaldab pildi all oleva tühja ruumi */
}

.product-highlight-content {
  flex: 1; /* Lubab sisul võtta saadaolevat ruumi */
  min-width: 400px; /* Minimaalne laius sisule */
  max-width: 100%; /* Piirab sisu maksimaalset laiust lauaarvuti vaates */
  text-align: center; /* Muudame teksti vasakule joondatuks, et see oleks loetavam */
}

/* Mobiilivaade Product Highlight sektsioonile */
@media (max-width: 767px) {
  .product-highlight-container {
    flex-direction: column; /* Mobiilis asetame pildi ja sisu vertikaalselt */
    gap: 1.5rem; /* Väiksem tühik mobiilis */
  }

  .product-highlight-image,
  .product-highlight-content {
    max-width: 100%; /* Mobiilis võtavad pilt ja sisu kogu laiuse */
    min-width: unset; /* Eemaldame min-width piirangu mobiilis */
  }

  .product-highlight-content {
    text-align: center;
  }
}

/* CTA nupu stiilid */
.product-highlight-cta-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 2rem;
  text-align: center;
}

.product-highlight-cta-text {
  margin-bottom: 1rem;
}

.landing-store-button.heading {
    font-size: 1rem;
    font-weight: 300;
    color: white;
    margin-bottom: 0.5rem;
    text-align: center;
    width: 100%;
}

.landing-terms-wrapper a {
    font-size: 1.125rem; /* Kasutame rem ühikut */
}




/* Peidab tühjad <p> sildid, välja arvatud teatud tingimustel */
.landing-page p:not([contenteditable]):not([data-wp-block]) {
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
  height: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  display: block !important;
}

/* Näitab mittetühje <p> sildid */
.landing-page p:not(:empty):not([data-empty]) {
  margin: revert !important;
  padding: revert !important;
  line-height: revert !important;
  height: auto !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Erand stiil nupu väliskonteinerile */
.landing-page .storyteller-button-outer p:has(a.storyteller-button-inner) {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
  padding: 0 !important;
  line-height: normal !important;
  height: auto !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}