/*TÄSSÄ IHAN ALUSSA PELKÄSTÄÄN VERKKOKAUPPAAN KOSKEVAA TYYLITTELYÄ, ALEMPAA LÖYTYY SUORAAN SISUSTUSLUOTO.FI TYYLIT KUN RULLAILET */

select#billing-country,
.wc-block-components-select__select {
    background-color: #202020 !important;
    color: #ffffff !important;
    border: 1px solid #000000 !important;
}

/*tämä laittaa otsikkotekstin "VERKKOKAUPPA" skaalautumaan näytön mukaan kun se tuli vähän turhan leveänä puhelimella */
p[style*="font-size:58px"] {
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    max-width: 100% !important;
}

/* Mobiilille pienempi ja skaalautuva fontti */
@media (max-width: 600px) {
    p[style*="font-size:58px"] {
        font-size: 10vw !important; /* skaalautuu näytön mukaan */
        line-height: 1.1 !important;
    }
}
/* Kaikki 36px inline-fontit rivittyvät ja pysyvät ruudussa */
p[style*="font-size:36px"] {
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    max-width: 100% !important;
}

/* Mobiilissa skaalautuva fontti */
@media (max-width: 600px) {
    p[style*="font-size:36px"] {
        font-size: 6vw !important; /* sopiva mobiilille */
        line-height: 1.1 !important;
    }
}

/*-------tässä evästeilmoitukseen värejä-----*/
/* Piilota alkuperäinen sininen SVG-kuvake */
.cky-btn-revisit img {
    display: none !important;
}

/* Lisää oma taustakuvake napille (valkoinen versio) */
.cky-btn-revisit {
    background-color: #18191B !important;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM11 17L6 12L7.41 10.59L11 14.17L16.59 8.58L18 10L11 17Z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 20px !important;

    border: none !important;
    padding: 10px !important;
    border-radius: 4px !important;
    width: 45px !important;
    height: 45px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Hover */
.cky-btn-revisit:hover {
    background-color: #000000 !important;
}

/* Poista kaikki focus-efektit */
.cky-btn-revisit:focus,
.cky-btn-revisit:focus-visible,
.cky-btn-revisit:focus-within,
.cky-btn-revisit-wrapper:focus,
.cky-btn-revisit-wrapper:focus-visible,
.cky-btn-revisit-wrapper:focus-within,
.cky-overlay:focus,
.cky-overlay:focus-visible,
.cky-overlay:focus-within {
    outline: none !important;
    box-shadow: none !important;
}


/* Save My Preferences -nappi samaan tyyliin */
.cky-btn-preferences {
    background-color: transparent !important;
    color: #18191B !important;        /* sama väri kuin muissa */
    border-color: #18191B !important;
}

/* Hover-tila */
.cky-btn-preferences:hover {
    background-color: #A19181 !important;
    color: #ffffff !important;
    border-color: #A19181 !important;
}

/* Asetukset / Salli vain välttämättömät (läpinäkyvät napit) */
.cky-btn-customize,
.cky-btn-reject {
    background-color: transparent !important;
    color: #18191B !important;
    border-color: #18191B !important;
}

/* Hover näille kahdelle */
.cky-btn-customize:hover,
.cky-btn-reject:hover {
    background-color: #A19181 !important;
    color: #ffffff !important;
    border-color: #A19181 !important;
}

/* Hyväksy kaikki -nappi */
.cky-btn-accept {
    background-color: #18191B !important;
    color: #ffffff !important;
    border-color: #18191B !important;
}

/* Hover hyväksy kaikki */
.cky-btn-accept:hover {
    background-color: #000000 !important;
    border-color: #000000 !important;
    color: #ffffff !important;
}
/*------evästeiden tyylit loppuu tähän*/



/*seuraavat lisäävät klarna maksutapaan lisää selitteitä
/* Asetetaan label flexiksi, jotta teksti ja kuva näkyvät vierekkäin */
#radio-control-wc-payment-method-options-klarna_payments__label 
.wc-block-components-payment-method-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Teksti perään */
#radio-control-wc-payment-method-options-klarna_payments__label 
.wc-block-components-payment-method-label::after {
    content: " – kortti, MobilePay ja verkkopankki";
    font-weight: 500;
}

/* Kuva tekstin jälkeen */
#radio-control-wc-payment-method-options-klarna_payments__label 
.wc-block-components-payment-method-label::before {
    content: "";
    width: 90px;
    height: 16px;
    background-image: url("https://sisustusluoto.fi/kauppa/wp-content/uploads/2026/05/maksutavat.png");
    background-size: contain;
    background-repeat: no-repeat;
		 /* Pyöristetyt kulmat tähän */
    border-radius: 6px;
		
}




/*Tässä tuotesivulle fonttimäärityksiä kun ei näkynyt jostain syystä samalla fontilla */
.woocommerce-Tabs-panel--description p {
    font-size: 19px !important;
    letter-spacing: 0 !important;
    line-height: 1.32 !important;
    color: #f1ede5 !important;
    font-family: inherit !important;
}

/*hinta vähän isommaksi*/
.woocommerce-Price-amount.amount {
    font-size: 30px !important;
    font-weight: 700 !important;
		border-bottom: none;
}



/* Piilota tyhjä sivupalsta */
.col-lg-4.col-md-4.col-sm-12 {
    display: none !important;
}

/* Laajenna sisältö koko rivin leveydelle */
.col-lg-8.col-md-8.col-sm-12 {
 		width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}

/*sama tausta myös tuotesivulle */
.col-lg-8.col-md-8.col-sm-12.wow.animate.fadeInUp {
		padding-top: 15px !important;  /* jättää tuotesivun yläreunaankin rakoa että kuva ei ole ihan yläpalkissa kiinni*/
    background-color: #a19181 !important;
    border: 1px solid #000 !important;
}

.post-content p span[style] {
    font-size: 19px !important;
    letter-spacing: 0 !important;
    line-height: 1.32 !important;
    font-family: inherit !important;
    color: inherit !important;
}




/*klarna logosta reunus pois*/
.woocommerce-checkout img[src*="klarna-logo"] {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/*klarna painikkeeseen värit
/* Perusvärit */
button.wc-block-components-checkout-place-order-button {
    background-color: #000000;
    color: #18191B;
    transition: background-color 0.2s ease, color 0.2s ease;
}
/* Hover-värit (ei disabled-napille) */
button.wc-block-components-checkout-place-order-button:hover:not(:disabled):not([aria-disabled="true"]) {
    background-color: #e8dfd0 !important;  /* hover-tausta */
    color: #A19181 !important;             /* hover-teksti */
}



/* tällä klarna suomeksi */
.wc-block-components-checkout-place-order-button {
    font-size: 0 !important;
}

.wc-block-components-checkout-place-order-button::after {
    content: "\00A0Maksa Klarnalla\00A0";
    font-size: 16px;
    color: #fff; /* tai mikä väri napissa on */
}


/*tämä laittaa myös tuotesivun samalla lailla kuin muut leveyden puolesta*/
.single-product .container > .row {
		padding-left: 0px !important;
    padding-right: 0px !important;
		margin-left: 0px !important;
    margin-right: 0px !important;
		
}

/* poistaa marginaalit post ja entry contentin välistä page id 164, eli kaupan sivulta, jotta saadaan banneri levitettyä koko sivun leveydelle*/
.page-id-164 .post-content {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

/* ja tämä taas lisää marginaalit tuoteluettelon kohtaan kyseiselle sivulle, koska sitä ei ole tarkoitus saada pois */
.page-id-164 .woocommerce {
  margin-left: 20px;
  margin-right: 20px;
}

/* Siirtää tuoteluettelon sivun alaspäin*/
/*.single-product .product_title { margin-top: 20px !important; }*/
.single-product .site-content, .single-product .content-area, .single-product .product { padding-top: 20px !important; }

/* Tuoteluettelo */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price {
    font-family: 'Cormorant Garamond', serif !important;
}

/* Tuotesivu */
.woocommerce div.product .product_title,
.woocommerce div.product .price,
.woocommerce div.product .woocommerce-product-details__short-description,
.woocommerce div.product .woocommerce-tabs .panel,
.woocommerce div.product form.cart,
.woocommerce div.product .product_meta {
    font-family: 'Cormorant Garamond', serif !important;
}

/* Yleinen WooCommerce-typografia */
.woocommerce,
.woocommerce-page {
    font-family: 'Cormorant Garamond', serif !important;
}

/* Piilota sidebar */
#secondary,
.sidebar {
    display: none !important;
}



@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&display=swap');

.navbar-header-wrap .nav-link { font-weight: 700 !important; }

.theme-separator-line-horrizontal-full.wow.animate.fadeInUpBig {
  display: none;
}

.theme-services .service-content {
  background-color: #425870;
}

.theme-services .service-content {
  background-color: #202020;
}

.wp-block-list {
  line-height: 1.2;
}

li {
  line-height: 1.2;
}

ul {
  line-height: 1.2;
}

.navbar-header-wrap.classic-header.not-sticky {
  /*background-color: #425870;*/
  opacity: 100%;
  /*height: 1.7cm;*/
  background-color: #171717;
}

/*.navbar.navbar-header-wrap.classic-header .nav .menu-item .nav-link {
  height: 1.5cm;
}*/

.navbar.navbar-header-wrap.classic-header .nav .menu-item .nav-link {
  font-size: 0.54cm;
}

.font-icon-18.fa.fa-map-marker {
  font-size: 1cm;
}

.fa {
  font-size: 1cm;
}

p:last-child {
  font-family: cormorant garamond;
  font-size: 0.5cm;
  line-height: 1.3;
}

#navbarNavDropdown {
  background-color: #171717;
}

.theme-project .theme-project-content p {
  font-size: 0.5cm;
}


body {
    font-family: "Cormorant Garamond", serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Cormorant Garamond", serif !important;
    font-weight: 600;
}

.navbar-header-wrap a {
    font-family: "Cormorant Garamond", serif;
}
















/*ALLAOLEVA SUORAA KOPIOTA SISUSTUSLUOTO.FI PERUSSIVUN CUSTOMCSS:STÄ


/* TÄMÄ ON TIEDOSTO JOHON ON TEHTY VALTAOSA VÄRIMUOKKAUKSISTA */

/*tässä lisätään musta reunus kaikkiin kuviin*/
img {
    border: 1px solid #000;
    border-radius: 4px;
}
/*paitsi otsikkokuvaan*/
.theme-section-title img {
    border: none !important;
    border-radius: 0 !important;
}
/*paitsi etusivun keskellä olevaan kuvaan joka on service content osiossa (koska siinä on reunus jo siinä laatikossa johon se tulee)*/
.service-content-thumbnail img {
    border: none !important;
    border-radius: 0 !important;
}

/*paitsi etusivun palveluruuduista, koska yläreuna näyttää typerältä jos molemmissa on musta reunus*/
.portfolio-thumbnail img {
    border-top: none;                 /* Ei reunusta yläreunaan */
    border-left: 1px solid #000;      /* Musta reunus vasemmalle */
    border-right: 1px solid #000;     /* Musta reunus oikealle */
    border-bottom: 1px solid #000;    /* Musta reunus alas */
    border-bottom-left-radius: 4px;  /* Snadi pyöristys vasempaan alanurkkaan */
    border-bottom-right-radius: 4px; /* Snadi pyöristys oikeaan alanurkkaan */
    border-top-left-radius: 0;        /* Ei pyöristystä yläkulmiin */
    border-top-right-radius: 0;
}


/*päävalikkon asetuksia 
.main-navigation ul {
    display: flex !important;
    justify-content: center !important;
    width: 100%;
} */

/*tämä muuttaa hampurilaisvalikon hampurilaisen mustaksi*/
.navbar-toggler-icon {
    filter: brightness(0) !important;
}

/*tämä lisää mustan viivan päävalikon alle*/
.navbar-header-wrap {
    border-bottom: 1px solid #000 !important;
}

/*tämän pitäisi keskittää päävalikko*/
.navbar-header-wrap .navbar-nav {
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
}


body {
    color: #f1ede5; /* vaihda tähän haluamasi väri perus teksteihin joille ei ole muuta määritetty */
   }

/* Teksti kentissä */
.control-group input.form-control,
.control-group textarea.form-control,
.form-group input.form-control,
.form-group textarea.form-control {
    color: #f1ede5 !important;
}

/* Placeholderit */
.control-group input.form-control::placeholder,
.control-group textarea.form-control::placeholder,
.form-group input.form-control::placeholder,
.form-group textarea.form-control::placeholder {
    color: #f1ede5 !important;
    opacity: 1;
}

/* Label-tekstit */
.control-group label,
.form-group label {
    color: #f1ede5 !important;
}




/* Seuraavassa määritellään asiakaskokemuksen tyylit */
.asiakasquote {
  font-family: "Cormorant Garamond", serif;
  /*font-family: "Inter", sans-serif;*/
  font-size: 1.25rem;
  font-style: italic;
  line-height: 1.5;
  color: #ffffff;
  border-left: 4px solid #999;
  padding-left: 1rem;
  margin: 1.5rem 0;
}

.asiakasquote-nimi {
  font-family: "Cormorant Garamond", serif;
	display: block;
  margin-top: 0.5rem;
  font-size: 1rem;
  font-style: normal;
  color: #ffffff;
}

/* Asiakaskokemusten tyylin määrittely loppuu */

/* Yhtenäinen fontti normaalille tekstille etusivun tekstilaatikoissa */
.service-content p:not(.asiakasquote):not(.asiakasquote-nimi) {
  font-family: "Cormorant Garamond", serif;
  font-size: 0.55cm;
  line-height: 1.35;
  color: #ffffff;
}

/* Asiakasquote säilyttää oman fonttinsa */
.service-content .asiakasquote,
.service-content .asiakasquote-nimi {
  font-family: "Inter", sans-serif;
  font-size: 1.25rem;
  line-height: 1.5;
  font-style: italic;
  color: #ffffff;
}




/*Määritellään päävalikon tekstin väri */
.navbar.navbar-header-wrap.classic-header .nav .menu-item .nav-link {
  color: #000000 !important; /* vaihda haluamaksesi */
}
/*Valikon värimäärittely loppuu */


/* tässä määritellään etusivun tekstilaatikot saman korkuisiksi ja keskitetyiksi:*/
/* --- 1. Laatikot saman korkuisiksi --- */
.theme-services-content {
  display: flex;
  align-items: stretch;
}

.theme-services-content .col-lg-4 {
  display: flex;
}

.theme-services-content .service-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 80%;
}


/* Keskimmäisen laatikon kuva täyttämään koko sarake */
.theme-services-content .service-content-thumbnail {
  height: 80%;
  margin: 0;
  padding: 0;
}

.theme-services-content .service-content-thumbnail img {
  width: 90%;
  height: 90%;
  object-fit: cover;      /* täyttää koko laatikon */
  object-position: center; /* keskittää kuvan */
  display: block;          /* poistaa ylimääräiset välit */
  margin: 0;
  padding: 0;
}

/* Poistetaan kaikki paddingit ja marginaalit keskimmäisestä laatikosta */
.theme-services-content .col-lg-4:nth-child(2) .service-content {
  padding: 0;
  margin: 0;
}

.theme-services-content .col-lg-4:nth-child(2) .service-content-thumbnail {
  padding: 0;
  margin: 0;
  height: 100%;
}

.theme-services-content .col-lg-4:nth-child(2) .service-content-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  padding: 0;
  margin: 0;
}

/*ja tässä vielä levitetään keskimmäisen laatikon kuva koko leveydelle myös mobiilissa*/
@media (max-width: 768px) {
  .theme-services-content .col-sm-12:nth-child(2) .service-content-thumbnail img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover;
    display: block;
  }
}

/* --- MOBIILI: tasainen väli elementtien väliin --- */
@media (max-width: 768px) {
  .theme-services-content .col-sm-12 {
    margin-bottom: 25px; /* voit säätää 15–40px */
  }
}
/* --- MOBIILI: Poista ylälaatikon ylimääräinen padding, jotta kuva nousee ylemmäs --- */
@media (max-width: 768px) {
  .theme-services-content .col-sm-12:nth-child(1) .service-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}

/* --- 3. Tekstilaatikoiden yhtenäinen fontti --- */
.service-content p,
.service-content strong,
.service-content em,
.service-content .asiakasquote,
.service-content .asiakasquote-nimi {
  font-family: "Cormorant Garamond", serif;
  font-size: 0.55cm;
  line-height: 1.35;
  color: #ffffff;
}

/*tässä lopetetaan etusivun tekstilaatikoiden määrittelyt*/



.theme-separator-line-horrizontal-full.wow.animate.fadeInUpBig {
  display: none;
}

.theme-services .service-content {
  background-color: #a19181;
}

.theme-services .service-content {
  background-color: #a19181;
}

.wp-block-list {
  line-height: 1.2;
}

li {
  line-height: 1.2;
}

ul {
  line-height: 1.2;
}

.navbar-header-wrap.classic-header.not-sticky {
  /*background-color: #f1ede5;*/
  opacity: 100%;
  /*height: 1.7cm;*/
  background-color: #e6dfd6;
}

/*.navbar.navbar-header-wrap.classic-header .nav .menu-item .nav-link {
  height: 1.5cm;
}*/

.navbar.navbar-header-wrap.classic-header .nav .menu-item .nav-link {
  font-size: 0.54cm;
}

.font-icon-18.fa.fa-map-marker {
  font-size: 1cm;
}

.fa {
  font-size: 1cm;
}

p:last-child {
  font-family: cormorant garamond;
  font-size: 0.5cm;
  line-height: 1.3;
}

#navbarNavDropdown {
  background-color: #e6dfd6;
}

.theme-project .theme-project-content p {
  font-size: 0.5cm;
}

/* Hover-tila (hiiren alla oleva linkki) */
.navbar-header-wrap.classic-header.not-sticky .nav .menu-item .nav-link:hover {
  background-color: #d8cfc4; /* aavistuksen tummempi beige */
}

/* Aktiivinen sivu (valittu sivu) */
.navbar-header-wrap.classic-header.not-sticky .nav .menu-item.current-menu-item .nav-link {
  background-color: #dfd7cd; /* hieman vaaleampi, erottuu hoverista */
}

.navbar-header-wrap.classic-header.not-sticky .nav .menu-item .nav-link::before {
  background-color: #d8cfc4; /* hover-väri */
}

/* footerin linkkien Hover-väri */
.site-footer a:hover,
.site-footer .widget a:hover,
.site-footer .footer-menu a:hover,
.site-footer .social-icons a:hover {
  color: #c1b8ad !important; /* hover-väri */
}

/* Sisältöalueen linkkien värit  */
.theme-project .theme-project-content a:hover,
.entry-content a:hover,
.page-content a:hover {
  color: #cec6bb !important; /* uusi hover-väri */
}

.theme-project .theme-project-content a,
.entry-content a,
.page-content a {
  color: #3C3B39 !important; /* perusväri */
}

/* Sisältölaatikon taustaväri (post-content) */
.post-content {
  background-color: #A19181 !important;  /* vaihda haluamaksesi */

/*ja tässä sisältölaatikon reunus pois, otettukin takaisin!
}

article.post {
    border: none !important;
} */

/*perustekstin koko ja säädöt*/
.post-content p {
  font-size: 1.2rem;
  line-height: 1.32;
  letter-spacing: 0.2px;
}

/*listaustekstien koko ja säädöt*/
.wp-block-group .wp-block-list li {
  color: #000000;
  font-size: 20px;
  line-height: 1.3;
}