.elementor-106099 .elementor-element.elementor-element-70e8d201{--spacer-size:50px;}.elementor-106099 .elementor-element.elementor-element-f6ee23b > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-106099 .elementor-element.elementor-element-f6ee23b img{width:100%;max-width:100%;height:0%;}.elementor-106099 .elementor-element.elementor-element-4bf1ddc1{--spacer-size:0px;}.elementor-106099 .elementor-element.elementor-element-42da5577{--spacer-size:100px;}.elementor-106099 .elementor-element.elementor-element-3be7a61a{--spacer-size:100px;}.elementor-106099 .elementor-element.elementor-element-6f807ceb.elementor-skin-slideshow .elementor-main-swiper:not(.elementor-thumbnails-swiper){margin-bottom:0px;}.elementor-106099 .elementor-element.elementor-element-6f807ceb .elementor-main-swiper{height:400px;}.elementor-106099 .elementor-element.elementor-element-6f807ceb .elementor-main-swiper .swiper-slide{border-radius:0px;}.elementor-106099 .elementor-element.elementor-element-6f807ceb .elementor-swiper-button{font-size:20px;}.elementor-106099 .elementor-element.elementor-element-1b47f9c4{--spacer-size:100px;}.elementor-106099 .elementor-element.elementor-element-12f9090{text-align:center;}.elementor-106099 .elementor-element.elementor-element-585b7e6 img{width:42%;}.elementor-106099 .elementor-element.elementor-element-40742176{--spacer-size:50px;}.elementor-106099 .elementor-element.elementor-element-7a5a71c1.elementor-skin-slideshow .elementor-main-swiper:not(.elementor-thumbnails-swiper){margin-bottom:50px;}.elementor-106099 .elementor-element.elementor-element-7a5a71c1 .elementor-main-swiper{height:400px;}.elementor-106099 .elementor-element.elementor-element-7a5a71c1 .elementor-main-swiper .swiper-slide{border-radius:30px;}.elementor-106099 .elementor-element.elementor-element-7a5a71c1 .elementor-swiper-button{font-size:20px;}.elementor-106099 .elementor-element.elementor-element-6e46998c{--spacer-size:100px;}.elementor-106099 .elementor-element.elementor-element-a26f495{--spacer-size:100px;}.elementor-106099 .elementor-element.elementor-element-673c4ad{--spacer-size:50px;}@media(max-width:1024px){.elementor-106099 .elementor-element.elementor-element-6f807ceb.elementor-skin-slideshow .elementor-main-swiper:not(.elementor-thumbnails-swiper){margin-bottom:10px;}.elementor-106099 .elementor-element.elementor-element-7a5a71c1.elementor-skin-slideshow .elementor-main-swiper:not(.elementor-thumbnails-swiper){margin-bottom:10px;}}@media(max-width:767px){.elementor-106099 .elementor-element.elementor-element-70e8d201{--spacer-size:50px;}.elementor-106099 .elementor-element.elementor-element-4bf1ddc1{--spacer-size:50px;}.elementor-106099 .elementor-element.elementor-element-42da5577{--spacer-size:50px;}.elementor-106099 .elementor-element.elementor-element-3be7a61a{--spacer-size:50px;}.elementor-106099 .elementor-element.elementor-element-6f807ceb.elementor-skin-slideshow .elementor-main-swiper:not(.elementor-thumbnails-swiper){margin-bottom:10px;}.elementor-106099 .elementor-element.elementor-element-1b47f9c4{--spacer-size:50px;}.elementor-106099 .elementor-element.elementor-element-585b7e6 img{width:100%;}.elementor-106099 .elementor-element.elementor-element-40742176{--spacer-size:50px;}.elementor-106099 .elementor-element.elementor-element-7a5a71c1.elementor-skin-slideshow .elementor-main-swiper:not(.elementor-thumbnails-swiper){margin-bottom:10px;}.elementor-106099 .elementor-element.elementor-element-6e46998c{--spacer-size:30px;}.elementor-106099 .elementor-element.elementor-element-a26f495{--spacer-size:30px;}.elementor-106099 .elementor-element.elementor-element-673c4ad{--spacer-size:30px;}}/* Start custom CSS for image, class: .elementor-element-f6ee23b */<!-- SANKA HERO – sandboxattu tyyli, jotta live == preview -->
<section id="sanka-hero" data-hero="sanka">
  <h1 class="eyebrow">SANKA</h1>
  <h2 class="headline">Sinfonia korvillesi</h2>

  <ul class="features">
    <li><span class="ic">🛡️</span><b>–45 dB Hybrid ANC</b></li>
    <li><span class="ic">🔋</span><b>75 h akku</b> <em>/ 1,5 h lataus</em></li>
    <li><span class="ic">🎵</span><b>Hi-Res Audio Wireless</b> <em>(LHDC 24-bit / 96 kHz)</em></li>
    <li><span class="ic">🔗</span><b>Langaton & langallinen</b></li>
  </ul>
</section>

<style>
/* --- SANDBOX RESET: vain #sanka-hero sisällä --- */
#sanka-hero[data-hero="sanka"] * { box-sizing: border-box; }
#sanka-hero[data-hero="sanka"] {
  all: revert;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif !important;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  color:#111; background:transparent; margin:0 auto; padding:0 0 0.5rem;
  max-width:1200px;
}

/* Otsikot lukkoon (ettei teema skaalaa) */
#sanka-hero .eyebrow{
  all: unset; display:block; font-weight:800; letter-spacing:.02em;
  font-size: clamp(24px, 3.2vw, 42px); line-height:1.05; margin: 0 0 .25rem;
}
#sanka-hero .headline{
  all: unset; display:block; font-weight:500;
  font-size: clamp(34px, 6.2vw, 88px); line-height:1.02; letter-spacing:.005em;
  margin: 0 0 1rem;
}

/* Lista ilman teemabulletteja + ikonit riveillä */
#sanka-hero .features{
  all: unset; display:grid; grid-template-columns: repeat(2, minmax(220px,1fr));
  gap: .8rem 2.2rem; margin-top:.6rem;
}
@media (max-width:900px){ #sanka-hero .features{ grid-template-columns:1fr; } }

#sanka-hero .features li{
  all: unset; display:flex; align-items:center; gap:.65rem;
  font-size: clamp(15px, 1.6vw, 22px); line-height:1.35; color:#2b2b2b;
}

/* Emojit yhdenmukaisiksi (ilman että selain vaihtaa fonttia lennossa) */
#sanka-hero .features .ic{
  font-size:1.05em; line-height:1; display:inline-flex; align-items:center; opacity:.95;
  transform: translateY(1px);
}

/* Lihavoinnin ja harmaan sävyn lukitus */
#sanka-hero .features b{ font-weight:700; color:#111; }
#sanka-hero .features em{ font-style:normal; color:#6b7280; }

/* Poista ympäriltä mahdolliset teema-marginit tämän osion alla/yllä */
#sanka-hero + * { margin-top: 0 !important; }
</style>/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-6b94b816 */:root{
  --xfi-max: 980px;
  --xfi-radius: 14px;
  --xfi-border: #ececec;
  --xfi-muted: #6b6b6b;
}

.xfi-hero-benefits{
  max-width: var(--xfi-max);
  margin: 12px auto 8px;
  padding: 12px 14px;
  border: 1px solid var(--xfi-border);
  border-radius: var(--xfi-radius);
  background: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}

.xfi-hero-benefits ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 8px;
}

.xfi-hero-benefits li{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--xfi-border);
}
.xfi-hero-benefits li:last-child{
  border-bottom: 0;
}

.xfi-hero-benefits .ic{
  font-size: 18px;
  line-height: 1;
  opacity: .9;
}

.xfi-hero-benefits .txt{
  font-size: clamp(14px, 3.6vw, 16px);
  line-height: 1.25;
  letter-spacing: .1px;
}

.xfi-hero-benefits .txt small{
  color: var(--xfi-muted);
  margin-left: 6px;
  font-size: .92em;
}

@media (max-width: 360px){
  .xfi-hero-benefits{ padding: 10px 12px; }
  .xfi-hero-benefits .ic{ font-size: 16px; }
  .xfi-hero-benefits .txt{ font-size: 14px; }
}

@media (min-width: 420px){
  .xfi-hero-benefits ul{
    grid-template-columns: 1fr 1fr;
    column-gap: 12px;
  }
}

@media (min-width: 768px){
  .xfi-hero-benefits{
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
  }
  .xfi-hero-benefits ul{
    display: flex;
    justify-content: center;
    gap: 28px;
  }
  .xfi-hero-benefits li{
    border: 0;
    padding: 0;
  }
}

/* Piilota puhelimessa */
@media (max-width: 768px){
  .xfi-hero-benefits{
    display: none !important;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-3ac1c14d *//* ----------------------------------------------------
   VÄRINVALINTA – SCROLL STOP FIX (EI JS)
---------------------------------------------------- */
#sanka-picker {
  scroll-margin-top: 160px; /* tämän voi säätää sopivaksi */
}

@media (max-width: 480px){
  #sanka-picker {
    scroll-margin-top: 120px;
  }
}


/* ----------------------------------------------------
   FLOATING CTA BUTTON
---------------------------------------------------- */
.floating-cta-link {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  text-decoration: none;
  color: inherit;
}

/* CTA box */
.floating-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #111111;
  color: #ffffff;
  padding: 14px 18px;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  cursor: pointer;
}

/* Hinta */
.floating-price {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.floating-price .price-current {
  font-size: 18px;
  font-weight: 700;
}

.floating-price .price-old {
  font-size: 13px;
  opacity: 0.65;
  margin-top: -2px;
}

/* Button text */
.floating-btn {
  background: #ffffff;
  color: #111111;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, transform 0.1s ease;
}

.floating-cta-link:hover .floating-btn {
  background: #f3f3f3;
  transform: translateY(-1px);
}

/* ----------------------------------------------------
   Mobile responsiveness
---------------------------------------------------- */
@media (max-width: 480px){
  .floating-cta-link {
    left: 16px;
    right: 16px;
    bottom: 16px;
  }

  .floating-cta {
    justify-content: space-between;
    width: 100%;
    padding: 12px 14px;
  }

  .floating-price .price-current {
    font-size: 17px;
  }

  .floating-btn {
    font-size: 13px;
    padding: 9px 10px;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-292d40a6 *//* SIIVOTUT VARJOT: ei box-shadowia kuvalle, maavarjo figuuriin */
#sanka-picker .slide { 
  position: relative; 
  opacity:.95; 
  transition: transform .3s, opacity .3s; 
}

/* Poista kuvan kehysvarjo kokonaan */
#sanka-picker .slide img { 
  box-shadow: none !important; 
  transition: transform .3s, opacity .25s;
}

/* Maavarjo: pehmeä ellipsi figuurin alle */
#sanka-picker .slide::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:6px;
  width:70%;
  height:14px;
  transform:translateX(-50%) scale(1);
  pointer-events:none;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.20) 0%, rgba(0,0,0,0) 70%);
  filter: blur(6px);
  opacity:.55;
  transition: opacity .3s, transform .3s;
  z-index:0;
}

/* Korostus keskimmäiselle ilman ylimääräistä varjoa */
#sanka-picker .slide.is-center img{
  transform: scale(1.04);
}

/* Vahvempi maavarjo vain keskitetylle */
#sanka-picker .slide.is-center::after{
  opacity:.70;
  transform: translateX(-50%) scale(1.06);
}

/* Varmista kerrosjärjestys (kuva yli varjon) */
#sanka-picker .slide img{ position:relative; z-index:1; }

/* Mobiilissa hieman pienempi varjo */
@media (max-width:768px){
  #sanka-picker .slide::after{ opacity:.45; filter: blur(5px); height:12px; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-67d2cbcd *//* TRUST BADGE -osio */
:root{
  --xfi-max: 980px;
  --xfi-radius: 14px;
  --xfi-border: #ececec;
  --xfi-muted: #6b6b6b;
}

.xfi-trust-badges{
  max-width: var(--xfi-max);
  margin: 14px auto 12px;
  padding: 12px 14px;
  border: 1px solid var(--xfi-border);
  border-radius: var(--xfi-radius);
  background: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
  font-family: -apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  color: #111;
}

.xfi-trust-badges ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 8px;
}

.xfi-trust-badges li{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--xfi-border);
}

.xfi-trust-badges li:last-child{
  border-bottom: 0;
}

.xfi-trust-badges .ic{
  font-size: 18px;
  line-height: 1;
  opacity: .9;
}

.xfi-trust-badges .txt{
  font-size: clamp(14px, 3.6vw, 16px);
  line-height: 1.25;
  letter-spacing: .1px;
  color: #111;
}

/* Pienet puhelimet */
@media (max-width: 360px){
  .xfi-trust-badges{ padding: 10px 12px; }
  .xfi-trust-badges .ic{ font-size: 16px; }
  .xfi-trust-badges .txt{ font-size: 14px; }
}

/* ≥420px: kaksi saraketta */
@media (min-width: 420px){
  .xfi-trust-badges ul{
    grid-template-columns: 1fr 1fr;
    column-gap: 12px;
  }
}

/* ≥768px: riviksi, ilman korttia */
@media (min-width: 768px){
  .xfi-trust-badges{
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
  }
  .xfi-trust-badges ul{
    display: flex;
    justify-content: center;
    gap: 28px;
  }
  .xfi-trust-badges li{
    border: 0;
    padding: 0;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-c1d8ce0 *//* Ei taustaa koko osiolla */
.sanka-why{
  background: transparent !important;
  padding: 40px 0 48px;
}

.sanka-why-inner{
  max-width: 980px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Otsikko */
.sanka-why-title{
  font-size: 22px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-align: center;
  color: #1d1d1f;
  margin: 0 0 8px;
}

.sanka-why-sub{
  text-align: center;
  font-size: 15px;
  color: #555;
  margin: 0 0 28px;
}

/* Grid (käytetään flexiä, jotta 3 + 2 layout toimii siististi) */
.sanka-why-grid{
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
}

/* Ylärivi (1–3): kolmasosa */
.sanka-why-card:nth-child(-n+3){
  flex: 0 0 calc((100% - 40px) / 3);
}

/* Alarivi (4–5): puolikas */
.sanka-why-card:nth-child(n+4){
  flex: 0 0 calc((100% - 20px) / 2);
}

/* Kortit */
.sanka-why-card{
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid #e5e5ea;
  padding: 18px 18px 14px;
  transition: background .2s ease, box-shadow .2s ease;
}

.sanka-why-card:hover{
  background: #ffffff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

/* Korttien otsikot */
.sanka-why-card h6{
  font-size: 16px;
  font-weight: 600;
  color: #1d1d1f;
  margin: 0 0 8px;
}

/* Korttitekstit */
.sanka-why-card p{
  font-size: 14px;
  line-height: 1.55;
  color: #3a3a3c;
  margin: 0;
}

/* Desktop: leveämpi */
@media (min-width: 900px){
  .sanka-why-inner{
    max-width: 1040px;
  }

  .sanka-why-card{
    padding: 20px 20px 16px;
  }

  .sanka-why-card h6{
    font-size: 15px;
  }
}

/* Mobiili: kaikki täysleveydelle siististi */
@media (max-width: 700px){
  .sanka-why-card{
    flex: 0 0 100% !important;
  }
}

/* Pienempi mobiili */
@media (max-width: 480px){
  .sanka-why{
    padding: 30px 0 36px;
  }

  .sanka-why-title{
    font-size: 18px;
    margin-bottom: 22px;
  }

  .sanka-why-card{
    border-radius: 14px;
    padding: 16px 14px 12px;
  }

  .sanka-why-card h6{
    font-size: 15px;
  }

  .sanka-why-card p{
    font-size: 13.5px;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-10b9fb37 *//* Ei taustaa koko osiolla */
.sanka-specs{
  background: transparent !important;
  padding: 40px 0 48px;
}

.sanka-specs-inner{
  max-width: 980px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Otsikko keskelle */
.sanka-specs-title{
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: center;
  color: #1d1d1f;
  margin: 0 0 28px;
}

/* Grid-kokonaisuus */
.sanka-specs-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

/* Yksittäiset kortit */
.sanka-specs-group{
  background: #ffffff;          /* kortit säilyvät valkoisina */
  border-radius: 18px;
  padding: 18px 18px 14px;
  border: 1px solid #e5e5ea;
}

/* Otsikot */
.sanka-specs-group h4{
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px;
  color: #1d1d1f;
}

/* Lista */
.sanka-specs-group ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

.sanka-specs-group li{
  font-size: 14px;
  line-height: 1.5;
  color: #3a3a3c;
  padding: 3px 0 3px 14px;
  position: relative;
}

/* Apple-tyylinen bullet */
.sanka-specs-group li::before{
  content: "•";
  position: absolute;
  left: 0;
  top: 3px;
  font-size: 14px;
  color: #9c9c9f;
}

/* Desktop: 2 kolumnia */
@media (min-width: 900px){
  .sanka-specs-inner{
    max-width: 1040px;
  }

  .sanka-specs-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 24px;
  }

  .sanka-specs-group:last-child{
    grid-column: 1 / -1;   /* akunkesto koko rivin leveydelle */
  }

  .sanka-specs-group{
    padding: 20px 20px 16px;
  }

  .sanka-specs-group h4{
    font-size: 15px;
  }

  .sanka-specs-group li{
    font-size: 14px;
  }
}

/* Mobile */
@media (max-width: 480px){
  .sanka-specs{
    padding: 30px 0 36px;
  }
  .sanka-specs-title{
    font-size: 18px;
    margin-bottom: 22px;
  }
  .sanka-specs-group{
    border-radius: 14px;
    padding: 16px 14px 12px;
  }
  .sanka-specs-group h4{
    font-size: 15px;
  }
  .sanka-specs-group li{
    font-size: 13.5px;
  }
}/* End custom CSS */