/** Shopify CDN: Minification failed

Line 1459:0 Expected "}" to go with "{"

**/
/* === FONTIT OTSIKOILLE (Poppins) === */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

/* Käytetään Poppins-fonttia kaikissa laskurin otsikoissa ja selitteissä */
.price_calculator label,
.price_calculator .label {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600;
  text-transform: none; /* poista jos haluat isoilla kirjaimilla */
  letter-spacing: 0.3px;
  color:rgb(255, 255, 255); /* voit vaihtaa väriä halutessasi */
}

.price_calculator {
    max-width: 800px;
    margin: 0 auto;
}

.offer__fields,
.calculator__fields {
  margin: 30px 0;
}
.calculator__field {
  position: relative;
}

.calculator__button {
  display: block;
  margin: 0 auto 20px auto; /* keskittää napin */
  padding: 15px 30px;
  background-color: rgba(var(--color-button));
  color: white;
  border: none;
  transition: all 0.1s ease-in;
}


.calculator__field.top-10 {
    margin-top: 10px;  
}

.price_calculator .label {  
  font-size: 20px;
  font-weight: 400;
}
.calculator__field .label.checkbox {
  visibility: hidden;
}
.calculator__field .input {
  padding: 12px;
  transition: border 0.4s ease-in-out;
  font-size: 17px;
  width: 100%;
}
.calculator__field select.input { 
  width: 100%;
  margin-top: 5px;
}
.input:focus-visible {
    outline: none;
    outline-offset: none;
    box-shadow: none;
}


.input {
  border-radius: 8px;
  color:  #4a4a4a;
}

.summary {
  padding: 20px;
  background: linear-gradient(5deg, rgb(65 82 129 / 70%) 0%, rgb(85 114 205 / 70%) 100%);
  margin-bottom: 30px;
  border-radius: 20px;
  color: #f2f2f2;
}

.summary.light {
  background: #ffffff !important;
  color: #333333;
  opacity: 1 !important;
}

.summary .link {
  color: #626262;
  text-decoration: underline;
}
.summary__title {
  font-size: 1.5em;
  line-height: 1;
  font-weight: bold;
  margin-bottom: 15px;
}
.summary__item  {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.summary__offer {
  padding: 40px;
  display: flex;
  align-items: center;
  max-height: 250px;
}
.summary__offer .link {
  color: rgb(208, 208, 208);
}
.summary__total {
  font-weight: bold;
  font-size: 1.5em;
  line-height: 1.3em;
}
.summary__price {
  font-size: 60px;
  font-weight: bold;
  color: #fff;
}
.summary__note {
  color: #d0d0d0;
}

.summary__field {
  margin-bottom: 15px;
}
.summary__field .label {
  display: block;
  font-size: 18px;
  font-weight: bold;
  padding: 3px 0;
}
.summary__field .input {
  display: block;
  width: 100%;
  padding: 10px;
  border-color: #000;
  border-radius: 10px;
  box-shadow: 0px 2px 10px 5pxrgba(0, 0, 0, 0.5);  
}
.summary__field  input[type="radio"] {
  appearance: none;        /* Poistaa oletustyylin */
  -webkit-appearance: none;
  -moz-appearance: none;
  position: absolute;
  opacity: 0;              /* Piilottaa, mutta säilyttää klikkauksen labelin kautta */
}
/* Toimitusvaihtoehtojen kortit (uusi tyyli) */
.summary__field .radio {
  display: block;
  padding: 18px 20px;
  margin-bottom: 15px;
  border-radius: 16px;
  background: #f5f5f5;            /* vaalea laatikko */
  border: 2px solid #e0e0e0;      /* ohut harmaa reuna */
  cursor: pointer;
  transition: all 0.2s ease;
  color: #222;
}

/* Valittu kortti – korostettu reuna ja valkoinen tausta */
.summary__field .radio:has(input[type="radio"]:checked) {
  border-color: #835bbd;          /* violetti reuna */
  background: #ffffff;            /* valkoinen tausta */
  box-shadow: 0 0 0 2px rgba(131, 91, 189, 0.15);
  color: #222;
}

/* Kortin otsikko (b-tag) isommaksi */
.summary__field .radio b {
  display: block;
  font-size: 1.1rem;     /* isompi otsikko */
  margin-bottom: 4px;
}

/* Kortin seliteteksti pienempi ja hillitympi */
.summary__field .radio > div {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #444;
}

/* Hover-efekti kortille (valinnainen mutta kiva) */
.summary__field .radio:hover {
  background: #ffffff;
  border-color: #cfcfcf;
}

.calculator__field select.input.input--error {
    box-shadow: 0px 0px 9px 3px #ff49cd;
}
/* --- Kaksi saraketta oletuksena kaikille --- */
.two__columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* --- Varmistetaan että laskurin kentät pysyvät vierekkäin myös mobiilissa --- */
.price-calculator .calculator__fields .two__columns {
  grid-template-columns: 1fr 1fr !important;
}

/* --- Yhteystietojen (offer-osio) kentät menevät mobiilissa allekkain --- */
@media screen and (max-width: 768px) {
  .price-calculator .offer__fields .two__columns {
    grid-template-columns: 1fr !important;
    gap: 10px;
  }
}





.labels_two__columns {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 10px;
  margin-top: 30px;
}

.checkbox {
  grid-column-start: 2;
  color: #fff;
}

@media screen and (min-width: 768px) {
  .calculator__fields  {
    padding-right: 150px;
  }
  .input.checkbox {
    position: absolute;
    right: -141px;
    top: -69px;
    width: 130px;
    display: grid;
  }
}

.offer__title {
  font-size: 1.3rem;
  margin-top: 30px;
  margin-bottom: 10px;
}

.price_calculator .button {
  margin-top: 20px;
}

@media (max-width: 768px) {
  .checkbox {
    grid-column-start: 1; 
  }
  .labels_two__columns {
    grid-template-columns: 1fr;    
    gap: 0;
  }
  .calculator__field .label,
  .calculator__field .input {
    float: none;
    width: 100%;
  }
  .calculator__fields .calculator__field,
  .summary__field {
    margin-bottom: 10px;    
  }
    /* Tee Tallennustila / Kotelo / Virtalähde -blokit saman levyisiksi kuin muut kentät mobiilissa */
  .price_calculator .labels_two__columns {
    width: 95% !important;
    margin: 0 auto 10px auto !important;  /* keskitys ja sama väli kuin muissa */
  }
}

/* Fancy checkbox styles */
.checkbox-wrapper-6 {
  float: left;
  margin-right: 2px;
}

.checkbox-wrapper-6 .tgl {
  display: none;
}
.checkbox-wrapper-6 .tgl,
.checkbox-wrapper-6 .tgl:after,
.checkbox-wrapper-6 .tgl:before,
.checkbox-wrapper-6 .tgl *,
.checkbox-wrapper-6 .tgl *:after,
.checkbox-wrapper-6 .tgl *:before,
.checkbox-wrapper-6 .tgl + .tgl-btn {
  box-sizing: border-box;
}
.checkbox-wrapper-6 .tgl::-moz-selection,
.checkbox-wrapper-6 .tgl:after::-moz-selection,
.checkbox-wrapper-6 .tgl:before::-moz-selection,
.checkbox-wrapper-6 .tgl *::-moz-selection,
.checkbox-wrapper-6 .tgl *:after::-moz-selection,
.checkbox-wrapper-6 .tgl *:before::-moz-selection,
.checkbox-wrapper-6 .tgl + .tgl-btn::-moz-selection,
.checkbox-wrapper-6 .tgl::selection,
.checkbox-wrapper-6 .tgl:after::selection,
.checkbox-wrapper-6 .tgl:before::selection,
.checkbox-wrapper-6 .tgl *::selection,
.checkbox-wrapper-6 .tgl *:after::selection,
.checkbox-wrapper-6 .tgl *:before::selection,
.checkbox-wrapper-6 .tgl + .tgl-btn::selection {
  background: none;
}
/* ============================= */
/* ✅ UUSI PREMIUM-KYTKIN */
/* ============================= */

.checkbox-wrapper-6 {
  display: flex;
  align-items: center;
}

.checkbox-wrapper-6 .tgl {
  display: none;
}

/* Kytkimen tausta */
.checkbox-wrapper-6 .tgl + .tgl-btn {
  width: 54px;
  height: 28px;
  background: #2e3440;
  border-radius: 999px;
  position: relative;
  cursor: pointer;
  transition: background 0.25s ease, box-shadow 0.25s ease;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.12);
}

/* Valkoinen liukuva nuppi */
.checkbox-wrapper-6 .tgl + .tgl-btn::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  background: #ffffff;
  border-radius: 50%;
  top: 4px;
  left: 4px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 3px 10px rgba(0,0,0,0.35);
}

/* ✅ PÄÄLLÄ-TILA */
.checkbox-wrapper-6 .tgl:checked + .tgl-btn {
  background: linear-gradient(135deg, #7c3aed, #8b5cf6);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.35);
}

.checkbox-wrapper-6 .tgl:checked + .tgl-btn::after {
  transform: translateX(26px);
  box-shadow: 0 4px 12px rgba(124,58,237,0.55);
}

/* Hover-efekti desktopissa */
@media (hover: hover) {
  .checkbox-wrapper-6 .tgl + .tgl-btn:hover {
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.35);
  }
}

/* Tekstin ja kytkimen väli kuntoon */
.input.checkbox {
  display: flex;
  align-items: center;
  gap: 12px;
}




/* Poistaa sinisen laatikon vain tämän laskurin lähetyksen jälkeen näytettävästä summary-elementistä */
.price_calculator > .summary {
  background: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  color: inherit !important; /* säilyttää tekstiin perusvärin */
}

/* Jos haluat myös poistaa ison otsikon tyylityksen */
.price_calculator > .summary .summary__title {
  font-size: 1rem !important;
  font-weight: 600 !important;
  margin: 0 0 8px 0 !important;
  color: inherit !important;
}
/* === Kiitos-tekstin tyyli === */
.price_calculator > .summary {
  text-align: center;           /* keskittää kaiken sisällön */
  padding: 20px 0 !important;   /* pieni pystymarginaali */
}

/* Otsikon fonttikoko takaisin */
.price_calculator > .summary .summary__title {
  font-size: 2rem !important;   /* sama koko kuin laskurissa */
  font-weight: 700 !important;
  margin-bottom: 10px;
}

/* Tekstin fonttikoko takaisin */
.price_calculator > .summary > div {
  font-size: 1.2rem !important;
  line-height: 1.6;
}


/* --- Toimitusvaihtoehtojen ikonit --- */

/* Tehdään tilaa ikonille vasemmalle */
.summary__field .radio {
  position: relative;
  padding-left: 80px;  /* lisää tilaa ikonille */
}

.summary__field .radio::before {
  content: "📦";
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 40px;          /* hieman suurempi emoji */
  line-height: 1;
  box-shadow: none;
  background: none;
  border-radius: 0;
  width: auto;
  height: auto;
}


/* --- ISO laatikko VAIN toimitusvaihtoehdoille --- */
/* summary__field, joka sisältää .radio-elementtejä (= toimitusvaihtoehdot) */
.summary__field:has(.radio) {
  background: transparent;   /* poistaa valkoisen taustan */
  border-radius: 20px;
  padding: 0;                /* poistaa valkoisen reuna-alueen */
  box-shadow: none;          /* poistaa varjon */
  margin-bottom: 30px;
}


/* Korttien väli laatikon SISÄLLÄ */
.summary__field:has(.radio) .radio {
  margin-bottom: 15px;
}

.summary__field:has(.radio) .radio:last-of-type {
  margin-bottom: 0;
}


/* --- Mobiilissa: näytä seliteteksti vain valitussa vaihtoehdossa --- */
@media (max-width: 768px) {
  /* piilota kaikkien vaihtoehtojen seliteteksti */
  .summary__field .radio > div {
    display: none;
  }

  /* näytä seliteteksti vain valitussa vaihtoehdossa */
  .summary__field .radio:has(input[type="radio"]:checked) > div {
    display: block;
  }
}

/* --- Keskitetään "Vahvista kaupat" -nappi --- */
.price_calculator button[type="submit"] {
  display: block;
  margin: 30px auto 0 auto; /* yläväli 30px, automaattinen keskitys */
  padding: 12px 35px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 8px;
  text-align: center;
}

/* Varmistetaan että keskitys säilyy mobiilissa */
@media (max-width: 768px) {
  .price_calculator button[type="submit"] {
    width: auto; /* ei vie koko riviä */
    margin: 25px auto;
  }
}

#PriceCalculator-calculate {
  display: inline-flex; /* mahdollistaa täydellisen keskityksen */
  justify-content: center;
  align-items: center;
  margin: 50px auto 0 auto; /* siirtää hieman alemmaksi */
  padding: 14px 45px; /* vähän enemmän pystysuunnassa tilaa */
  font-size: 1rem;
  font-weight: 600;
  border-radius: 8px;
  background-color: #3f2fbf;
  color: white;
  text-align: center;
  transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
  cursor: pointer;
  position: relative;
  left: 50%;
  transform: translateX(-50%) translateY(0);
}

#PriceCalculator-calculate:hover {
  background-color: #33259e;
  transform: translateX(-50%) translateY(-2px);
}



#PriceCalculator-calculate:hover {
  background-color: #33259e;
  transform: translateX(-50%) translateY(-2px); /* ei pomppaa enää */
}


/* Keskitys mobiilissa */
@media (max-width: 768px) {
  #PriceCalculator-calculate {
    width: auto;
    margin: 25px auto;
  }
}


/* --- HUPS! virheilmoituksen tyyli --- */
.price-calculator-error {
  color: #1a4d2e; /* hillitty vihreä */
  text-align: center;
  font-weight: 600;
  margin-bottom: 12px;
  font-size: 18px;
}

.price-calculator-error.hidden {
  display: none;
}



/* --- Viimeistelty toimitusikonien tyyli --- */
.summary__field .radio::before {
  content: "";
  display: inline-block;
  width: 48px; /* vähän suurempi */
  height: 48px;
  margin-right: 18px;
  vertical-align: middle;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.95;
  filter: grayscale(100%) brightness(0.75);
  transition: all 0.25s ease-in-out;
}

/* 📦 1. Lähetyspaketti – hienovarainen 3D-laatikko */
.summary__field .radio:nth-of-type(1)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238c8c8c' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7l9-4 9 4v10l-9 4-9-4V7z'/%3E%3Cpath d='M3 7l9 5 9-5'/%3E%3C/svg%3E");
}

/* 🚚 2. Postitus Helposti-koodilla – modernimpi pakettiauto */
.summary__field .radio:nth-of-type(2)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238c8c8c' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1.5' y='3.5' width='13' height='11' rx='2'/%3E%3Cpath d='M14.5 8h4.5l2.5 3v3.5H14.5V8z'/%3E%3Ccircle cx='6' cy='18' r='1.6'/%3E%3Ccircle cx='18' cy='18' r='1.6'/%3E%3C/svg%3E");
}

/* 📍 3. Toimisto – minimalistinen pin-merkki */
.summary__field .radio:nth-of-type(3)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238c8c8c' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2a7 7 0 00-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 00-7-7z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E");
}

/* Hover tai valittu tila – tyylikäs korostus (violetti sävy PCMASTER-henkinen) */
.summary__field .radio:hover::before,
.summary__field .radio:has(input[type='radio']:checked)::before {
  filter: brightness(1.15) grayscale(0%);
  stroke: #8a6df0;
}






/* --- Korjaa input-kenttien varjot ja reunat normaaliksi --- */
.summary__field .input,
.price_calculator input[type="text"],
.price_calculator input[type="email"],
.price_calculator input[type="tel"],
.price_calculator input[type="number"],
.price_calculator select {
  box-shadow: none !important;          /* poistaa varjon */
  border: 1.5px solid #ccc !important;  /* perus harmaa reuna */
  border-radius: 8px !important;        /* kevyt kulman pyöristys */
  background-color: #eef0f4 !important;    /* valkoinen tausta */
  color: #222;
  transition: border-color 0.2s ease-in-out;
}

/* Korostus kun kenttä on valittuna (focus) */
.price_calculator input:focus,
.price_calculator select:focus {
  border-color: #8a6df0 !important; /* kevyt violetti korostus */
  outline: none;
  box-shadow: none !important;
}









/* --- Toimitusvaihtoehdot ilman ikoneita --- */
.offer__fields .offer__title {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  text-align: center;
}

/* Kortit */
.summary__field label.radio {
  display: flex;
  flex-direction: column;
  align-items: center;          /* 🔹 Keskittää sisällön vaakasuunnassa */
  justify-content: center;      /* 🔹 Keskittää sisällön pystysuunnassa */
  text-align: center;           /* 🔹 Keskittää tekstin */
  gap: 0.4rem;
  padding: 1.8rem 2rem;
  border-radius: 18px;
  border: 2px solid transparent;
  background: #f6f7fb;
  transition: all 0.25s ease;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  color: #1e1e1e;
}

/* Väli korttien väliin */
.summary__field label.radio + label.radio {
  margin-top: 1rem;
}

/* Hover */
.summary__field label.radio:hover {
  background: #ffffff;
  border-color: #8c7af3;
  transform: translateY(-2px);
}

/* Valittu tila */
.summary__field label.radio:has(input[type="radio"]:checked) {
  border-color: #8c7af3;
  background: #3b3a4a;
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(140, 122, 243, 0.25);
}

/* Tekstit */
.summary__field b {
  font-size: 1.1rem;
  display: block;
  margin-bottom: 0.3rem;
  font-weight: 700;
  color: inherit !important;
}

/* Kuvausteksti myös valkoiseksi valitussa tilassa */
.summary__field label.radio:has(input[type="radio"]:checked) div {
  color: #ffffff !important;
  opacity: 1 !important;
}

.summary__field div {
  font-size: 0.95rem;
  line-height: 1.5;
  color: inherit;
  opacity: 0.9;
}

/* Ei ikoneita */
.summary__field label.radio::before {
  content: none !important;
}

/* Mobiilissa */
@media (max-width: 768px) {
  .summary__field label.radio {
    padding: 1.4rem 1.2rem;
    max-width: 100%;
  }
}







/* --- Tyylikkäämpi focus-efekti inputeille ja dropdowneille --- */
.price_calculator select,
.price_calculator input[type="text"],
.price_calculator input[type="email"],
.price_calculator input[type="tel"],
.price_calculator input[type="number"],
.summary__field select,
.summary__field input[type="text"],
.summary__field input[type="email"],
.summary__field input[type="tel"],
.summary__field input[type="number"] {
  border: 2px solid #b3b8c7;
  border-radius: 8px;
  background: #e1e3ec;
  transition: all 0.25s ease;
  outline: none;
}

/* Hieno violetin sävyinen focus glow ilman valkoista reunan highlightia */
.price_calculator select:focus,
.price_calculator input:focus,
.summary__field select:focus,
.summary__field input:focus {
  outline: none !important;           /* 🔹 Poistaa selaimen valkoisen reunan */
  border-color: #8c7af3;
  box-shadow: 0 0 10px rgba(140, 122, 243, 0.6);
  background: #ffffff;
  transform: scale(1.01);
}


/* Hover pieni korostus */
.price_calculator select:hover,
.price_calculator input:hover,
.summary__field select:hover,
.summary__field input:hover {
  border-color: #a394f8;
}


/* Levennetään vain toimitusvaihtoehtojen kortit desktopilla */
@media screen and (min-width: 1024px) {
  .offer__fields .summary__field .radio {
    max-width: 1000px;      /* kasvattaa laatikoiden leveyttä */
    margin: 0 auto 1.6rem auto; /* keskittää ja lisää väliä */
    display: block;
    padding: 2rem 3rem;     /* lisää sisätilaa */
    font-size: 1.05rem;
    border-radius: 18px;    /* pyöristetymmät kulmat */
    transition: all 0.3s ease;
  }

  .offer__fields .summary__field .radio b {
    font-size: 1.25rem;     /* otsikko hieman isommaksi */
    display: block;
    margin-bottom: 0.5rem;
  }
}


/* Lisää eri värilliset emojit toimitusvaihtoehtoihin */
.offer__fields .summary__field .radio {
  position: relative;
  padding-left: 3rem; /* tila ikonille vasemmalle */
}

/* Yleinen emoji-tyyli */
.offer__fields .summary__field .radio b::before {
  position: absolute;
  left: 1rem;
  top: 1.2rem;
  font-size: 1.6rem;
}

/* Ensimmäinen kortti – paketti */
.offer__fields .summary__field .radio:first-of-type b::before {
  content: "📦";
}

/* Toinen kortti – kuorma-auto */
.offer__fields .summary__field .radio:nth-of-type(2) b::before {
  content: "🚚";
}

/* Kolmas kortti – sijainti */
.offer__fields .summary__field .radio:nth-of-type(3) b::before {
  content: "📍";
}


/* Suuremmat emojit vain työpöydällä */
@media screen and (min-width: 1024px) {
  .offer__fields .summary__field .radio b::before {
    font-size: 2.4rem;  /* suurennetaan emojien kokoa */
    top: 1rem;          /* hienosäätö pystysuuntaan */
    left: 1.2rem;       /* pieni sivusiirto */
  }

  .offer__fields .summary__field .radio {
    padding-left: 3.8rem; /* lisätään tilaa ikonille */
  }
}








/* --- Suuremmat ja vasempaan keskitetyt emojit vain työpöydällä --- */
@media screen and (min-width: 1024px) {
  .offer__fields .summary__field .radio {
    padding-left: 4.5rem; /* lisää tilaa ikonille vasemmalle */
    display: flex;
    align-items: center; /* keskittää pystysuunnassa kaiken */
  }

  .offer__fields .summary__field .radio b::before {
    font-size: 3rem; /* suurempi koko */
    position: absolute;
    left: 1rem; /* pysyy vasemmassa reunassa */
    top: 50%;
    transform: translateY(-50%); /* keskitys pystysuunnassa */
  }
}




/* --- Levennä vain TOIMITUS- ja YHTEYSTIEDOT-vaihe (ei laskuria) työpöydällä --- */
@media screen and (min-width: 1024px) {
  /* Poistetaan Shopifyn kapea leveysrajoitus vain tästä vaiheesta */
  .price-calculator.page-width.page-width--narrow .offer__fields {
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    background: transparent !important; /* säilytetään tumma tausta */
  }

  /* Keskitetään sisältö ja annetaan sopiva max-leveys */
  .price-calculator .offer__fields .contact__fields {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 40px;
  }

  /* Levennä myös toimitusvaihtoehtojen iso laatikko */
  .price-calculator .offer__fields .summary__field:has(.radio) {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }
}


/* Hintalaskurin otsikko ja alateksti */
#price_calculator_heading {
  text-align: center;
  font-size: 2.6rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 0.5rem;
  letter-spacing: 0.5px;
}

.price_calculator p {
  text-align: center;
  font-size: 1.3rem;
  color: #d1d5db;
  margin-bottom: 2rem;
  line-height: 1.6;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* --- Suuremmat fontit vain konenäkymässä --- */
@media screen and (min-width: 1024px) {
  #price_calculator_heading {
    font-size: 3.4rem;     /* Isompi otsikko koneella */
  }

  .price_calculator p {
    font-size: 1.6rem;     /* Isompi selite koneella */
    max-width: 800px;
  }
}








/* --- Tyylipäivitys: alkuperäinen värimaailma säilyy --- */
.price_calculator select.input {
  background-color:#e1e3ec; /* alkuperäisen vaalea sävy */
  color: #111; /* selkeä teksti */
  border: 1px solid #b3b8c7;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 16px;
  width: 100%;
  transition: all 0.25s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%237c3aed' viewBox='0 0 20 20'><path d='M5.23 7.21a.75.75 0 0 1 1.06.02L10 10.94l3.71-3.71a.75.75 0 1 1 1.06 1.06l-4.24 4.25a.75.75 0 0 1-1.06 0L5.21 8.27a.75.75 0 0 1 .02-1.06z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1rem;
}

.price_calculator select.input:hover {
  transform: translateY(-1px);
  border-color: #a78bfa; /* hienovarainen violetti vivahde */
  box-shadow: 0 4px 10px rgba(167, 139, 250, 0.15);
}

.price_calculator select.input:focus {
  outline: none;
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.2);
}

/* Avattu valikko: säilytä vaalea tyyli */
.price_calculator select.input option {
  background-color:#ffffff; /* sama kuin laatikko */
  color: #111;
  font-size: 15px;
  padding: 8px 10px;
}

/* Hover avatussa listassa */
.price_calculator select.input option:hover {
  background-color: #eceafc; /* kevyt violetti hover */
}

/* Placeholder (CPU, GPU jne.) hieman harmaampi */
.price_calculator select.input option[disabled] {
  color: #777;
}

/* Varmistetaan että laskurin sisältö ja nappi ovat erillään */
.price-calculator {
  position: relative;
}







/* --- VAIN LISÄLOMAKKEEN väliotsikoiden säätö --- */
.offer__title {
  font-size: 1.8rem !important;   /* isompi fontti */
  margin-top: 40px !important;    /* tilaa yläpuolelle */
  margin-bottom: 15px !important; /* lähemmäs laatikoita */
  text-align: center;
}

/* Myyjän henkilötiedot / Maksutiedot / Myyjän osoitetiedot */
.contact__fields h2,
.contact__fields .section-heading {
  font-size: 1.8rem !important;
  margin-top: 40px !important;
  margin-bottom: 15px !important;
  text-align: center;
}




.price_calculator input.input.select {
  background-color: #f8f9fb !important;
  color: #111;
  border: 1px solid #ccc !important;
  border-radius: 10px;
  padding: 12px 14px !important;
  font-size: 16px !important;
  width: 100%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
}

.price_calculator input.input.select:focus {
  border-color: #7c3aed !important;
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.2) !important;
}


.price_calculator input.input.select {
  height: 50px !important; /* joissain teemoissa 50 */
  line-height: 50px !important;
  padding: 0 14px !important;
}
.calculator__field input.input {
  margin-top: 5px;
}





#ssd_gb {
  height: 50px !important;
  line-height: 50px !important;
  padding: 0 14px !important;
  font-size: 16px !important;
}




/* Yhteenveto-kortti */
.summary {
  background: #ffffff10;
  padding: 28px 32px;
  border-radius: 18px;
  backdrop-filter: blur(8px);
  border: 1px solid #ffffff15;
}

/* Otsikko */
.summary__title {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 18px;
}

/* Yhteenvetolista */
.summary__item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #ffffff15;
  font-size: 1rem;
}

.summary__item:last-child {
  border-bottom: none;
}

/* Vasemman puolen label */
.summary__label {
  color: #ddd;
}

/* Oikean puolen value */
.summary__value {
  font-weight: 600;
  color: #fff;
}

/* Muokkaa linkki */
#PriceCalculator-modify {
  margin-top: 20px;
  display: inline-block;
  text-decoration: underline;
  cursor: pointer;
  color: #a0c4ff;
}


/* ✅ Vasen yhteenveto samaksi kuin oikea */
.summary.light {
  background: #ffffff10 !important;   /* sama tumma harmaa */
  color: #ffffff !important;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.08);
}

/* Rivien tekstit valkoisiksi */
.summary.light .summary__label,
.summary.light .summary__value,
.summary.light div,
.summary.light a {
  color: #ffffff !important;
}

/* Rivien erotus tummalla viivalla */
.summary.light .summary__item {
  border-bottom: 1px solid rgba(255,255,255,0.12) !important;
}

/* Linkki hieman vaaleammaksi */
.summary.light a {
  color: #c7bfff !important;
}










/* --- Mobiilin siisti kahden sarakkeen layout --- */
@media (max-width: 600px) {

  .summary__item {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
  }

  .summary__label {
    flex-shrink: 0;
    min-width: 44%;
    max-width: 44%;
    word-break: break-word;
  }

  .summary__value {
    text-align: right;
    flex-grow: 1;
    max-width: 56%;
    word-break: break-word;
    white-space: normal;
  }
}




@media (max-width: 600px) {
  .summary__title {
    font-size: 1.3rem !important;
    white-space: nowrap !important; /* pakottaa yhdelle riville */
  }
}
@media (max-width: 600px) {
  .summary__title {
    font-size: 1.45rem !important;   /* hieman isompi */
    text-align: center !important;   /* keskitys */
    white-space: nowrap !important;  /* pysyy yhdellä rivillä */
    width: 100%;
    display: block;
  }
}





/* --- POISTA KAIKKI HOVER-LIIKKEET DROPDOWNISTA --- */
.price_calculator select.input,
.price_calculator select {
  transform: none !important;
  transition: none !important;
}

/* Poista hover-efekti kokonaan */
.price_calculator select.input:hover,
.price_calculator select:hover {
  transform: none !important;
  box-shadow: none !important;
  border-color: #ccc !important; /* palautetaan neutraali */
}


/* --- POISTA LIKKEET JA HOVER-EFEKTIT KOKO SIVUN KAIKISTA INPUTEISTA --- */
.price_calculator input:hover,
.price_calculator select:hover,
.summary__field input:hover,
.summary__field select:hover,
.offer__fields input:hover,
.offer__fields select:hover {
  transform: none !important;
  box-shadow: none !important;
  border-color: #ccc !important; /* perusreuna */
}

/* Estä hover-efekti kokonaan */
.summary__field input,
.summary__field select,
.offer__fields input,
.offer__fields select {
  transform: none !important;
  transition: none !important;
}




/* --- Yhteenvetolaatikosta matalampi versio --- */
.summary.light {
  padding: 18px 22px !important;   /* pienempi sisäpadding → matalampi laatikko */
}

.summary__item {
  padding: 7px 0 !important;       /* pienemmät rivivälit */
  margin-bottom: 4px !important;   /* vähemmän tyhjää */
}

.summary__item:last-child {
  margin-bottom: 0 !important;
}

.summary__title {
  margin-bottom: 12px !important;  /* vähemmän tilaa otsikon ja listan välissä */
}

#PriceCalculator-modify {
  margin-top: 10px !important;     /* muokkaa-linkille vähemmän väliä */
}









/* GAP vain konenäkymässä */
@media (min-width: 768px) {
  .two__columns.mobile--one__column {
    gap: 30px !important;   /* säädä tarpeen mukaan */
  }
}


/* Siirretään tarjouslaatikkoa oikealle vain konenäkymässä */
@media (min-width: 1024px) {
  .summary__offer {
    margin-right: 60px !important;   /* Säädä etäisyys tähän */
  }
}

.summary.light {
  padding: 32px !important; /* voit säätää 16–32 välillä */
}


/* Keskitetään kaksi ylintä laatikkoa (vain desktop) */
@media screen and (min-width: 1024px) {
  .offer__fields .two__columns {
    justify-content: center !important; /* keskittää kokonaisuuden */
  }

  /* Varmistetaan että molemmat laatikot asettuvat tiiviisti keskelle */
  .summary.light,
  .summary.summary__offer {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Säädetään gap edelleen toimimaan oikein */
  .offer__fields .two__columns {
    gap: 40px; /* sama arvo mitä käytit aiemmin */
  }
}


/* Pienennetään tarjoushinnan kokoa mobiilissa */
@media screen and (max-width: 600px) {
  .summary__offer .summary__price {
    font-size: 45px !important;   /* aiemmin 60px → pienempi */
    line-height: 1.1 !important;
  }

  /* Otsikko hieman pienemmäksi, ettei rivity turhaan */
  .summary__offer .summary__total {
    font-size: 20px !important;
  }
}



/* Virhetyyli dropdownille */
select.input--error {
  border: 2px solid #ff4d4d !important;
  background-color: #fff0f0 !important;
}

/* Sama myös checkboxien tapauksessa (jos haluat) */
input[type="checkbox"].input--error {
  outline: 2px solid #ff4d4d !important;
  outline-offset: 2px;
}



 
/* VAIN mobiili — nappi täyteen leveyteen ilman siirtymistä */
@media (max-width: 768px) {
  #PriceCalculator-calculate,
  #PriceCalculator-calculate:hover,
  #PriceCalculator-calculate:focus {
    transform: none !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block;
    margin: 25px auto 0;
    box-sizing: border-box;
  }
}


/* Kone-/desktop-näkymä — tee napista hieman leveämpi */
@media (min-width: 769px) {
  #PriceCalculator-calculate {
    padding: 16px 40px; /* enemmän tilaa ympärille */
    font-size: 18px; /* hitusen isompi teksti */
    min-width: 230px; /* sopivan leveä mutta ei ylikoko */
    margin-top: 30px;
  }
}

/* Lisää tilaa napin yläpuolelle kaikilla laitteilla */
#PriceCalculator-calculate {
  margin-top: 50px;
}

/* Desktopille vielä vähän lisää tilaa */
@media screen and (min-width: 750px) {
  #PriceCalculator-calculate {
    margin-top: 60px;
  }
}

.button {
  transition: background-color 0.2s ease-in-out;
}

/* Poistaa hover-siirtymän */
.button:hover {
  transform: none;
}

/* Mobiilin lisäetäisyys dropdown-laatikoihin */
@media (max-width: 749px) {
  #PriceCalculator-calculate.button {
    margin-top: 30px; /* Säilytetään mobiilin sopiva etäisyys */
    width: 100%;
  }
}

/* Desktopissa lisää tilaa mutta ei liikettä hoverilla */
@media (min-width: 750px) {
  #PriceCalculator-calculate.button {
    margin-top: 10px; /* Säilytetään suurempi väli */
    width: 260px; /* Sopivan kokoinen, ei liian leveä */
  }
}


/* Mobiilinapin fontti isommaksi */
@media screen and (max-width: 768px) {
  #PriceCalculator-calculate {
    font-size: 18px !important;
  }
}




/* Mobiilissa dropdown-kentät korkeammiksi ja hieman kapeammiksi */
@media screen and (max-width: 768px) {
  .calculator__field select {
    height: 55px !important; /* korkeampi */
    font-size: 16px !important;
    padding: 0 14px !important;
  }

  /* Kapeampi leveys – jätetään hieman marginaalia reunoille */
  .calculator__field {
    width: 95% !important;
    margin: 0 auto !important;
  }
}

/* Korjataan marginaalit mobiilissa */
@media (max-width: 768px) {

  /* Dropdownit — lisää väliä */
  .calculator__field select.input {
    margin-bottom: 20px !important;
  }


@media (max-width: 768px) {
  .checkbox-wrapper-6 {
    margin-top: -25px !important;
  }

  .toggle-text {
    margin-top: -25px !important;
    display: inline-block !important;
    vertical-align: middle !important;
  }
}

/* === Mobiili: yhtenäinen väli kaikkiin 2-sarakkeisiin kenttiin === */
@media (max-width: 768px) {

  /* Vain laskurin kentille */
  .price_calculator .calculator__fields .two__columns {
    gap: 5px !important; /* sama gap kuin yläkentissä */
  }



/* Lisää väli tarjousotsikon ja hinnan väliin */
.summary__offer .summary__total {
  margin-bottom: 5px !important; /* säädä esim. 10–18 välillä */
}
/* Mobiilissa pienennetään väli yhteenvetolaatikon ja tarjouslaatikon välillä */
@media (max-width: 768px) {
  .summary.light {
    margin-bottom: 15px !important; /* pienempi väli */
  }
}





/* 🔥 PAKOTUS: poista Tyyppi, Kuntoluokitus, Laatu, Wattia (W) DESKTOPILLA */
@media screen and (min-width: 750px) {
  .calculator__field .label {
    display: none !important;
  }
}