/*
Theme Name: Ecomall Child
Theme URI: https://demo.theme-sky.com/ecomall/
Template: ecomall
Author: Theme Sky Team
Author URI: https://theme-sky.com/
Description: A Premium and Responsive WordPress theme, designed for E-Commerce websites
Tags: two-columns,left-sidebar,custom-background,custom-colors,custom-header,custom-menu,editor-style,featured-images,microformats,post-formats,rtl-language-support,sticky-post,threaded-comments,translation-ready
Version: 1.3.7.1760553509
Updated: 2025-10-15 21:38:29
*/
 





/* --- Yleiset asetukset --- */
html, body {
    overflow-x: hidden;
}

body {
    position: relative; 
    overflow-x: hidden; 
}

* {
    box-sizing: border-box;
}

/* --- Tekstin tavutus ja rivinvaihdot --- */
html, h1, h2, h3, h4, h5, h6 {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

h1 {
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    hyphenate-limit-chars: 6 3 2;
    hyphenate-limit-lines: 2;
    hyphenate-limit-last: always;
    hyphenate-limit-zone: 8%;
    word-wrap: break-word;
    overflow-wrap: break-word; 
}

p, div {
    word-break: break-word;
    hyphens: auto;
    overflow-wrap: break-word;
}


 






 
  
 
 
 /* 1) Grid-gap isommaksi kaikilla kategoriasivuilla */
body.tax-product_cat ul.products {
  --gap: 28px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px,1fr));
  gap: var(--gap);
}

/* 2) Piilota “Add to cart” tietyssä kategoriassa */
body.tax-product_cat.term-binaariset-kytkimet .products .product .add_to_cart_button {
  display: none;
}

/* 3) Muuta hintojen väri vain kategorian 49 sivulla */
body.term-49 .products .price {
  /*color: #0ea5e9;*/
}

 
 




/* ============================
   GTranslate mobiilipaikkaus
   ============================ */
   
.gtranslate_wrapper #gt_float_wrapper { 
	bottom: 65px !important;
	z-index:9000 !important;
}

/* ============================
   GTranslate – mobiilikoossa pienennetty + siirretty
   ============================ */
@media (max-width: 768px) {

  .gtranslate_wrapper #gt_float_wrapper {
    bottom: auto !important;
    top: 115px !important;
    right: 15px !important; 
    left: auto !important; 
    transform-origin: top right;
    border-radius: 8px !important;
    overflow: hidden; 
  } 

  /* Jos lippu + teksti näkyvät liian isoina, pakotetaan pienet fontit */
  .gtranslate_wrapper #gt_float_wrapper .gt_float_switcher,
  .gtranslate_wrapper #gt_float_wrapper .gt-selected {
    font-size: 12px !important;
    line-height: 1.1 !important;
    padding: 4px 6px !important; 
  } 

  /* Pienempi lippu */
  .gtranslate_wrapper #gt_float_wrapper img {
    width: 14px !important;
    height: auto !important;
  }
  
  .gt_float_switcher .gt-selected .gt-current-lang {
		padding: 0px 5px !important;
		color: #333;
		font-weight: bold;
	} 
  
} 









 
/* Faded slide switch – ei koske Elementor-tyylejä */
.slider-wrapper-custom > ._layer {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.slider-wrapper-custom > ._layer._active {
  opacity: 1;
}


/* Yleiset nuolipainikkeet */
.slider-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 64px;      /* nuolen koko */
  line-height: 1;
  color: #000;          /* nuolen väri */
  cursor: pointer;
  z-index: 10;
  user-select: none;
  transition: transform .25s ease, opacity .25s ease;
  opacity: .5;
}

/* Hover-efekti */
.slider-nav:hover {
  transform: translateY(-50%) scale(1.2);
  opacity: 1; 
}

/* Vasemman ja oikean puolen asemointi */
.slider-nav.left { left: 25px; }
.slider-nav.right { right: 25px; }


  
 
 
 
 

 /* Piilota "Add to wishlist" vain yksittäiseltä tuotesivulta */
.single-product .ts-add-to-wishlist,
.single-product a.add_to_wishlist,
.single-product button.ts-add_to_wishlist,
.single-product .button-in.wishlist,
.archive .woocommerce .product .button-in.wishlist {
  display: block !important;
}
    
.single-product .ts-social-sharing li.twitter,
.single-product .ts-social-sharing li.pinterest,
.single-product .ts-social-sharing li.facebook {
	display: none;
}  
 
.ts-stick-compare-button,
a.link-to-compare,
.add-to-cart-popup-content a.button.checkout  { 
    background-color: #111 !important;
    border-color: #000 !important;
} 
 
.ts-stick-compare-button:hover,
a.link-to-compare:hover, 
.add-to-cart-popup-content a.button.checkout:hover { 
    color: #fff !important;  
	opacity: 0.8;
}   

 
.add-to-cart-popup-content a.button.view-cart  { 
    background-color: #666 !important;
    border-color: #555 !important;
	color:#fff;
}  
 
.add-to-cart-popup-content a.button.view-cart:hover { 
    color: #fff !important; 
	opacity: 0.8;
} 

  


 

/* Hintahyllyn peruslinjaus – pitää */
.single-product div.product .summary .price{
  display: inline-flex !important;
  align-items: flex-end !important;
  gap: 10px;                /* väli alv-tekstin ja listahinnan väliin */
  margin-right: 8px;        /* pieni väli ennen -% */
  vertical-align: bottom;   /* suht. ulkoiseen linjaan */
  margin-left: 0px;
  gap: 0px;
  font-size: 28px;
}

/* Varmistetaan, että kaikki osaelementit käyttäytyvät linjassa */
.single-product .summary .price * {
    line-height: 1 !important;
    vertical-align: bottom !important;
}

/* netto, alv 0% */
.single-product .summary .price .woocommerce-price-suffix {
    margin-left: 5px;
	margin-right: 15px;
    color: #555;
}
 
.single-product .summary .price .rrp-price {
	display: none;
}
 
/* Listahinta (del) ja alennus % */
.single-product .summary .price del {
    color: #555;
    text-decoration: line-through;
}

/* Tee -%:stä “linjassa alareunaan” oleva inline-flex -elementti */
.single-product div.product .summary .ts-discount-percent{
  display: inline-flex !important;
  align-items: flex-end !important;  /* bottom-tasaus */
  line-height: 1 !important;
  vertical-align: bottom !important;
  color: #555;
  margin-left: 0px;
  
  transform: translateY(8px);
  
}



.single-product .summary .price .woocommerce-price-suffix,
.single-product div.product .summary .ts-discount-percent,
.single-product .summary .price del,
.single-product .summary .price del .woocommerce-Price-amount bdi {
	  font-size: 22px !important;
} 
  
 
 
 
 
 
 
 
 
.single-product .swiper-wrapper .product-wrapper .product-name {
	font-weight: bold;
}

.single-product .swiper-wrapper .product-wrapper .price {
	gap: 5px 0px;
} 
 
.single-product .swiper-wrapper .product-wrapper .price ins .amount bdi {
	font-size: 22px !important;
} 

.related-products .swiper-wrapper .product .product-wrapper .product-group-button-meta .short-description .attribute {
	padding-left: 0px;
	padding-right: 0px;
} 


  
.woocommerce div.product .woocommerce-tabs ul.tabs li.active > a {
    background: #111;
    border-color: #111;
    color: var(--ts-text-in-primary-color);
} 
 
  
 
 
 
 
 
 
.breadcrumb-title-wrapper .page-title + .breadcrumbs {
  margin-bottom: 25px;
}
.breadcrumb-title-wrapper h1 {
  margin-top: 20px; 
}
 
.single .breadcrumb-title-wrapper,
.page .breadcrumb-title-wrapper,
.breadcrumb-title-wrapper {
	margin-bottom: 50px;
}
 
  
 
 
 
 
.header-cont .elementor-widget-search .e-search-input-wrapper {
  flex-direction: inherit !important;
}
.header-cont .elementor-element .e-search-input {
	
}
 
 
 
 
 
  
 
 
 
 
 
 
/* =====================================
   Contact Form 7 – Clean UI (.form--contact)
   ===================================== */

.form--contact label {
  display: block;
  font-weight: 600;
  color: #0f172a;
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 12px; /* Label → Input väli */
}

/* Kentät */
.form--contact input[type="text"],
.form--contact input[type="email"],
.form--contact input[type="tel"],
.form--contact textarea {
  width: 100%;
  border: 1px solid #e5e7eb;
  background: #f7f7f7;
  border-radius: 6px;
  padding: 12px 15px;
  font-size: 15px;
  color: #111;
  transition: all .2s ease;
  outline: none;
}

/* Jotta kenttä ja label eivät ole liimautuneet */
.form--contact .wpcf7-form-control-wrap {
  margin-top: 6px;
}

/* Placeholder haaleammaksi */
.form--contact ::placeholder {
  color: #9ca3af;
}

/* Focus */
.form--contact input:focus,
.form--contact textarea:focus {
  border-color: #0f172a;
  background: #fff;
}

/* Jokaisen kentän väli */
.form--contact p {
  margin-bottom: 22px;
}

/* Textarea */
.form--contact textarea {
  min-height: 180px;
  resize: vertical;
}

/* Submit button */
.form--contact .wpcf7-submit {
  background: #111;
  color: #fff;
  border: none;
  font-weight: 700;
  padding: 14px 28px;
  border-radius: 6px;
  font-size: 15px;
  cursor: pointer;
  transition: background .25s ease, opacity .25s ease;
}

.form--contact .wpcf7-submit,
.form--contact input[type="submit"],
.form--contact button.wpcf7-submit {
  background:#111 !important;
  color:#fff !important;
  border:none !important; 
}


/* Hover / Active */
.form--contact .wpcf7-submit:hover {
  background: #000;
  opacity: 0.85;
}
.form--contact .wpcf7-submit:active {
  opacity: 0.75;
}

/* Spinner */
.form--contact .wpcf7-spinner {
  margin-left: 10px;
  width: 18px;
  height: 18px;
}

/* CF7 error + success states */
.form--contact .wpcf7-not-valid {
  border-color: #dc2626 !important;
}
.form--contact .wpcf7-not-valid-tip {
  margin-top: 6px;
  font-size: 13px;
  color: #b91c1c;
}

.form--contact .wpcf7-response-output {
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 14px;
  margin: 0;
}

.form--contact .wpcf7 form.sent .wpcf7-response-output {
  background: #ecfdf5;
  border-color: #10b981;
  color: #065f46;
}

.form--contact .wpcf7 form.invalid .wpcf7-response-output,
.form--contact .wpcf7 form.failed .wpcf7-response-output {
  background: #fef2f2;
  border-color: #ef4444;
  color: #7f1d1d;
}

/* Mobile */
@media (max-width: 480px) {
  .form--contact .wpcf7-submit {
    width: 100%;
    text-align: center;
  }
}

 
 




 








 
 
 
 
 
 
 
.ts-summary-custom-content,
.wc_payment_methods .woocommerce-info,
.checkout-login-coupon-wrapper .woocommerce-info {
  background: #f4f4f4 !important;
  color: #111; 
  list-style-type: disc;
}

.ts-summary-custom-content li {
  color: #111 !important;
}

/* Tämä varmistaa, että listamerkin väri on myös tummanharmaa */
.ts-summary-custom-content li::marker {
  color: #111 !important;
}
.ts-summary-custom-content ul li::before {
  background: #111; 
}
 
/* WooCommerce-napit */
.single_add_to_cart_button,
.checkout-button,
#place_order,
.single_add_to_cart_button.button.alt {
  background: #333 !important;
  color: #fff !important;
  border: 1px solid #444 !important;
}

.single_add_to_cart_button:hover,
.checkout-button:hover,
#place_order:hover,  
.single_add_to_cart_button.button.alt:hover {
  background: #030303 !important;
  border-color: #555 !important;
  color: #fff !important; 
} 







/* ============================
   Tyhjennä kori -nappi
   ============================ */

.woocommerce-cart-form .button.empty-cart-button {
  background: #e6e6e6 !important;   /* vaalea harmaa */
  color: #111 !important;            /* tumma teksti */
  border: 1px solid #d0d0d0 !important;
  border-radius: 6px;
  font-weight: 500; 
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

/* Hover-tila */
.woocommerce-cart-form .button.empty-cart-button:hover {
  background: #d5d5d5 !important;   /* hieman tummempi harmaa hoverina */
  border-color: #c0c0c0 !important;
  color: #000 !important;
  transform: translateY(-1px);      /* kevyt hover-efekti */
}








/* ============================
   WooCommerce disabled-napit
 ============================ */

.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled] {
  background: #f0f0f0 !important;   /* vaalea harmaa tausta */
  color: #999 !important;           /* harmaa teksti */
  border: 1px solid #d0d0d0 !important;
  border-radius: 6px;
  opacity: 0.7;                     /* hieman läpinäkyvyyttä */
  cursor: not-allowed !important;   /* estetään hover ja klikkaus */
  transform: none !important;
  box-shadow: none !important;
  pointer-events: none;             /* ei hover-efektejä */
} 

/* Jos haluat vielä hoverin eston varmuudeksi */
.woocommerce button.button:disabled:hover,
.woocommerce button.button:disabled[disabled]:hover {
  background: #f0f0f0 !important;
  border-color: #d0d0d0 !important;
  color: #999 !important;
}

  
  
  
  
  
  
/* TUOTEKATEOGORIASIVU */  
 
  
 
/* ======================================
   Tuotekategorian kuvaus – tyylikäs infolaatikko
   ====================================== */


.woocommerce.grid .product-category .product-wrapper { 
	background: #f6f6f6; 
} 
.woocommerce.main-products > .products .product-category a img,
.list-categories.thumbnail .products .product-category a img {
    max-width: 140px; 
} 

.product-category-intro {
  background: #f8f8f8;               /* pehmeä vaaleanharmaa tausta */
  border: 1px solid #e3e3e3;         /* kevyt rajaus */
  border-radius: 8px;                /* pehmeät kulmat */
  padding: 10px 15px 0px 15px;                /* sopivasti ilmaa ympärille */
  margin: 0px 0 30px;               /* väli otsikon ja tuotelistan välillä */
  color: #222;                       /* tumma mutta ei täysin musta */
  font-size: 1em;
  line-height: 1.4;                  
}

/* Kappaleet ja sisäiset elementit */
.product-category-intro p {
  margin: 0 0 0.7em;
}

.product-category-intro a {
  color: #0073aa;
  text-decoration: underline;
}
.product-category-intro a:hover {
  color: #005f8c;
  text-decoration: none;
}

/* Jos haluat otsikon korostetuksi (esim. jos kategoriassa on h2 tms.) */
.product-category-intro h2,
.product-category-intro h3 {
  font-size: 18px;
  margin-bottom: 8px;
  color: #111;
}

/* Responsiivinen hienosäätö */
@media (max-width: 768px) {
  .product-category-intro {
    padding: 14px 16px;
    font-size: 15px;
	margin-top: 0px;
  }
}


.woocommerce-page :is(#left-sidebar, #right-sidebar) .widget-container ul {
    gap: 12px;
}
 
 
  
 
 
 
/* 1) Mobiilissa vaihdetaan sarakkeet päällekkäin */
@media (max-width: 767px) {
	.woocommerce-shop #left-sidebar,
	.woocommerce-shop .before-loop-wrapper {
		display: none !important;
	}
}

  
 
     
 
 
 
  
 
 /* ============================
   Grid/List -toggle (WooCommerce tuotelistan yläpuolella)
   ============================ */

.gridlist-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
}

.gridlist-toggle span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 5px;
  background: #e5e5e5;        /* vaalea harmaa, ei-aktiivinen */
  color: #333; 
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: "themify", "Font Awesome 5 Free", "dashicons", sans-serif; /* määritä ikonifontti */
}

/* Hover-efekti ei-aktiivisille */
.gridlist-toggle span:hover {
  background: #d5d5d5;
}

/* Aktiivinen tila */
.gridlist-toggle span.active {
  background: #333;           /* tummempi, aktiivinen */
  color: #fff;
  cursor: default;
}

/* Hover-efekti aktiiviseen (vain pieni kirkastus) */
.gridlist-toggle span.active:hover {
  background: #444;
}

/* Ikonien koko ja väri */
.gridlist-toggle span svg {
  fill: currentColor;
  width: 12px;
  height: 12px;
}

/* List & Grid ikonit */
.gridlist-toggle > span.list::before {
  content: "\e987"; /* list-ikoni */
}

.gridlist-toggle > span.grid::before {
  content: "\e986"; /* grid-ikoni */
}

/* Ikonin tyyli */
.gridlist-toggle > span::before {
  display: inline-block;
  font-size: 20px;
  line-height: 1;
}

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/* SIDECART */
/* Elementor Menu Cart – nosta kaikki kerrokset */
.elementor-menu-cart__overlay,
.elementor-menu-cart__main,
.elementor-menu-cart__close-button {
                   /* varmistaa että irtoaa header-konteista */
  z-index: 3000 !important;  /* erittäin korkea */
}

/* Kontti headerissa ei tarvitse omaa z-indexiä */
.elementor-menu-cart__container {
  
  z-index: auto;
  z-index: 3000 !important;
}

/* Teeman omat drawerit */
.ts-mini-cart,
.side-cart,
.mini-cart-drawer,
.ts-mini-cart .overlay,
.ts-mini-cart .drawer {
  
  z-index: 3000 !important;
} 

 /* Varmista, että klikit menevät overlaylle ja drawerille */
.elementor-menu-cart__overlay,
.elementor-menu-cart__main { pointer-events: auto; }


 /* Näytä minikorin kuvat aina */
.elementor-menu-cart__product-image img { 
  opacity: 1 !important; 
  visibility: visible !important;
}

/* Jos teema kohdistaa lightboxin sisään, voita sekin */
body .elementor-lightbox .elementor-menu-cart__product-image img:not(.swiper-lazy-loaded) {
  opacity: 1 !important;
}

 
 
 
 
 
 /* —— Layout: left sidebar + main content rinnakkain —— */

/* Aseta vanhemmalle kontille flex-layout */
.page-container.has-1-sidebar {
  display: flex;
  align-items: flex-start;
  column-gap: 32px;          /* väli sivupalkin ja sisällön väliin */
}

/* Varmuuden vuoksi nollaa vanhat kellut ja absoluuttiset positioinnit */
#left-sidebar,
#main-content {
  float: none !important;
  position: static !important;
  width: auto;
  clear: none !important;
}

/* Sivupalkki vasemmalle, kiinteä leveys */
#left-sidebar.ts-sidebar {
  flex: 0 0 280px;           /* sivupalkin leveys (muuta makusi mukaan) */
  max-width: 320px;
  padding-right: 25px;
}

/* Pääsisältö täyttää loput */
#main-content {
  flex: 1 1 auto;
  min-width: 0;              /* estää sisällön pakottamasta riviä rikki */
}

/* Jos joskus teema laittaa ne väärään järjestykseen, pakota orderit */
.page-container.has-1-sidebar #left-sidebar { order: 0; }
.page-container.has-1-sidebar #main-content { order: 1; }


/* Responsiivinen: pinotaan mobiilissa */
@media (max-width: 1024px) {
  .page-container.has-1-sidebar {
    flex-direction: column;
    row-gap: 24px;
  }
  #left-sidebar.ts-sidebar { flex-basis: auto; width: 100%; max-width: none; }
}

/* (Valinnainen) tee sivupalkista sticky, jos haluat */
@media (min-width: 1025px) {
  #left-sidebar.ts-sidebar.sticky,
  .ts-sidebar.sticky {
    position: sticky !important;
    top: 100px;              /* säädä headerin korkeuden mukaan */
  }
}

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 /* ===== WooCommerce suodattimet / Sidebar filter styles ===== */
#left-sidebar,
.ts-sidebar,
.widget-area,
.widget.woocommerce {
  font-size: 12px; /* pienempi yleiskoko */
  line-height: 1.4;
  color: #111827; /* tumma teksti */
}

.widget.woocommerce .widget-title,
.widget.woocommerce h2,
.widget.woocommerce h3 {
  font-size: 12px;
  font-weight: 400;
  margin-bottom: 10px;
  text-transform: none;
  letter-spacing: 0;
  color: #111;
}

/* Checkboxit ja labelit */
.widget.woocommerce li,
.widget.woocommerce ul li {
  font-size: 12px;
  padding: 3px 0; 
}

.widget.woocommerce li label,
.widget.woocommerce ul li label {
  cursor: pointer;
  color: #222;
  transition: color 0.2s ease;
}

.widget.woocommerce li label:hover {
  color: #000;
}

/* Numerot sulkeissa – hieman kevyemmäksi */
.widget.woocommerce li span.count {
  color: #777;
  font-size: 12px;
}

/* Pieni väli kategoriaotsikoiden ja filttereiden välillä */
#left-sidebar .widget {
  margin-bottom: 24px;
} 

/* Aktiivinen valinta korostettuna */
.widget.woocommerce li.chosen > label,
.widget.woocommerce li.chosen > a {
  color: #000;
  font-weight: 600;
}

/* Valintaruudut siistiksi */
.widget.woocommerce input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-right: 6px;
  accent-color: #000; /* moderni selaintuki mustalle tehosteelle */
}

/* Pienennetään hinnanfiltterin fonttia */
.widget_price_filter .price_label {
  font-size: 13px;
  color: #444;
}

 
 
 
 
 
 
 
 
 
 
 

 
 
  
 
 
 
 
 
 
 
 
 
 
 

/* --- Tuotteiden hinnat mustiksi --- */
/* --- Hinnat mustiksi --- */
.elementor-widget-mas-woocommerce-product-price .price,
.elementor-widget-mas-woocommerce-product-price .price ins,
.elementor-widget-mas-woocommerce-product-price .price del {
  color: #000 !important;   /* musta hinta */
}

/* --- Tuotteen otsikon jälkeinen kuvausteksti tummemmaksi --- */
.elementor-widget-multipurpose-text .mas-elementor-multipurpose-text__title + p,
.elementor-widget-multipurpose-text .mas-elementor-multipurpose-text__desc,
.elementor-widget-multipurpose-text p {
  color: #222 !important;   /* tummahko harmaa */
  opacity: 0.9;
}

/* --- Vanha hinta (yliviivattu) vaaleanharmaaksi --- */
.elementor-widget-mas-woocommerce-product-price .price del {
  color: #777 !important;
}

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 /* YKSITTÄINEN TUOTE */
 
.meta-content .sku-wrapper span.sku {
	color: #111 !important;
}
 
 
 
 
 
 
 /* --- Cart cross-sells -otsikko & välistys --- */
.woocommerce-cart .cross-sells > h2,
.woocommerce-cart .cross-sells .section-title,
.woocommerce-cart .cross-sells .woocommerce-loop-heading {
  font-size: 20px;          /* pienempi otsikko */
  line-height: 1.25;
  font-weight: 700;
  margin: 18px 0 12px;      /* väli otsikon ympärille */
  text-transform: none;     /* varmuuden vuoksi pois capsit */
    border-bottom: 0px;
}

/* Väliä ostoskoritaulukon ja suositusten väliin */
.woocommerce-cart .cross-sells {
  margin-top: 22px;         /* väli taulukon jälkeen */
  padding-top: 12px;
  border-top: 0px solid rgba(0,0,0,.06); /* kevyt jako */

}

/* Korttien pikku typografia (tarvittaessa) */
.woocommerce-cart .cross-sells .product .woocommerce-loop-product__title {
  font-size: 14px;
}
.woocommerce-cart .cross-sells .price {
  font-size: 14px;
}

/* Ecomall-varmistus: jos teema kääntää otsikon eri elementtiin */
.page-template-cart .cross-sells h2 { font-size: 20px; margin: 18px 0 12px; }

 
 
 
  /* Ostoskori: otsikko pienemmäksi + väliä */
.woocommerce-cart h1.page-title,
.page-template-cart h1.page-title {
  font-size: 26px;       /* esim. 26–32px */
  line-height: 1.2;
  margin: 10px 0 18px;   /* yläväli / alaväli */
  font-weight: 700;
}

/* Väliä otsikon ja taulukon väliin */
.woocommerce-cart .cart table.shop_table {
  margin-top: 10px;
}

/* Jos haluat vielä tiiviimmän rivivälin otsikon yläpuolelle breadcrumbin jälkeen */
.breadcrumb + .site-content h1.page-title {
  margin-top: 6px;
}

 
 
/* Ostoskorin yhteenveto – tyylin hienosäätö */
.woocommerce-cart .woocommerce .cart-collaterals {
  border: 2px solid rgba(0, 0, 0, 0.55); /* aiemman 2px sijaan ohuempi */
  border-radius: 8px;
  background-color: #fff;                 /* varmistetaan vaalea tausta */
  padding: 30px 35px;
  box-shadow: none;                       /* poistetaan mahdollinen varjo */
}

/* Jos haluat vielä tyylikkäämmän erottelun yläpuolelle */
.woocommerce-cart .woocommerce .cart-collaterals {
  margin-top: 30px;
}

/* Pienennetään sisäisiä rivejä (Subtotal / Total) */
.woocommerce-cart .woocommerce .cart_totals th,
.woocommerce-cart .woocommerce .cart_totals td {
  padding: 8px 0;
}

 
 
.woocommerce-cart .cart-collaterals,
.woocommerce-cart .cart-collaterals .shipping #shipping_method li label {
	font-size: 0.9em;
}

 
.woocommerce-cart .cart-collaterals .shipping #shipping_method li label bdi {
	font-size: 0.8em;
}  

.woocommerce-cart .cart-collaterals .woocommerce-shipping-estimate-html {
	font-size: 0.8em;
}
 
.woocommerce-cart .cart-collaterals .cart_totals table th {
    width: 30%;
} 
 
.woocommerce-cart .cart-collaterals .cart_totals table td {
	line-height: 1.2em;
} 
 
 
/* --- WooCommerce: Laske toimituskulut -lomakkeen tyylit --- */

/* Yleinen koko ja spacing */
.woocommerce .shipping-calculator-form p.form-row {
    margin-bottom: 10px !important;
}

.woocommerce .shipping-calculator-form input.input-text,
.woocommerce .shipping-calculator-form select {
    font-size: 14px !important;
    padding: 6px 8px !important;
    height: 30px !important;
    border-radius: 4px !important; 
	line-height: 1.3em;
}
.woocommerce .shipping-calculator-form .country_select + span span span span {
	font-size: 14px !important;
    padding: 6px 10px !important;
	line-height: 1.2em;
}  

/* Placeholder & label pienemmäksi */
.woocommerce .shipping-calculator-form label {
    font-size: 13px !important;
    font-weight: 500;
    margin-bottom: 2px;
    display: inline-block;
	padding-bottom: 5px !important; 
}
.woocommerce .shipping-calculator-form .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 20px;
    width: 20px;
    top: 4px;
    right: 15px;
    text-align: center;
} 
/* Postinumero & kaupunki vierekkäin (valinnainen) */
/*
.woocommerce .shipping-calculator-form #calc_shipping_city_field,
.woocommerce .shipping-calculator-form #calc_shipping_postcode_field {
    width: 48%;
    display: inline-block;
}
*/

/* Painike */
.woocommerce .shipping-calculator-form button.button,
.woocommerce .shipping-calculator-form button[type="submit"] {
    background: #000 !important;
    color: #fff !important;
    font-size: 14px !important;
    padding: 8px 14px !important;
    border-radius: 4px !important;
    border: none !important;
    text-transform: none !important;
    font-weight: 600;
    transition: 0.2s ease-in-out;
}

/* Hover */
.woocommerce .shipping-calculator-form button.button:hover {
    background: #111 !important;
}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/* Piilota toimitustavat ostoskorissa 
.woocommerce-cart .woocommerce-shipping-totals,
.woocommerce-cart .shipping {
    display: none !important;
}
 */
 
/* Ostoskorissa: piilota toimitustapojen valinta */
.woocommerce-cart ul#shipping_method {
    display: none !important;
}

/* Piilota postinumeron / toimituksen laskuri */
.woocommerce-cart .woocommerce-shipping-calculator {
    display: none !important;
}

.woocommerce-cart .woocommerce-shipping-destination::after {
    content: "Toimitustapa ja lopulliset toimitusvalinnat tehdään kassalla. Hintaan sisältyy tällä hetkellä 9,90 € toimituskulu.";
    display: block;
    margin-top: 6px;
    font-size: 0.9em; 
    color: #666;
}


 
 
 
 
 
 
  
 
 
 
 
 
 
 
 
/* ===============================
   Asiakastyyppi (checkout)
   =============================== */

.woocommerce-checkout #billing_customer_type_field {
  margin-bottom: 24px;
}

.woocommerce-checkout #billing_customer_type_field > label {
  display: block;
  font-weight: 600;
  margin-bottom: 10px;
  color: #222;
}

/* Radiosäiliö (desktop: rinnakkain) */
.woocommerce-checkout #billing_customer_type_field .woocommerce-input-wrapper{
  display: flex;
  gap: 12px;
  flex-wrap: wrap; 
}

/* Yksittäinen vaihtoehto (kortti) */
.woocommerce-checkout #billing_customer_type_field .woocommerce-input-wrapper label{
  position: relative;
  flex: 1 1 220px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  cursor: pointer;
  font-weight: 500;
}

/* Custom radio */
.woocommerce-checkout #billing_customer_type_field input[type="radio"]{
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border-radius: 50%;
  border: 2px solid #cbd5e1;
  position: relative;
  flex-shrink: 0;
}

.woocommerce-checkout #billing_customer_type_field input[type="radio"]:checked{
  border-color: #111827;
}

.woocommerce-checkout #billing_customer_type_field input[type="radio"]:checked::after{
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #111827;
}

/* Hover (desktop) */
@media (hover: hover) {
  .woocommerce-checkout #billing_customer_type_field .woocommerce-input-wrapper label:hover{
    border-color: #9ca3af;
  }
}

/* Valittu kortti */
.woocommerce-checkout #billing_customer_type_field label:has(input[type="radio"]:checked){
  border-color: #111827;
  background: #f9fafb;
  box-shadow: 0 0 0 1px rgba(17,24,39,.04);
}

/* Virhetila */
.woocommerce-checkout #billing_customer_type_field.woocommerce-invalid .woocommerce-input-wrapper label{
  border-color: #dc2626;
}

/* Mobiili */
@media (max-width: 768px){
  .woocommerce-checkout #billing_customer_type_field{
    margin-bottom: 20px;
  }

  .woocommerce-checkout #billing_customer_type_field > label{
    margin-bottom: 8px;
  }

  .woocommerce-checkout #billing_customer_type_field .woocommerce-input-wrapper{
    flex-direction: row;
    gap: 15px; 
  }

  .woocommerce-checkout #billing_customer_type_field .woocommerce-input-wrapper label{
    flex: 1 1 auto;
	border: 0px solid #ddd;
  }
  

  
}
 
  
 
 
 
 
 
  
  
  
 
 
  
  
 

 
 







/* ====== Kassasivun hinnat punaiseksi ====== */

/* Tuotekohtaiset täysihinnat ja alennushinnat (del/ins elementit) */
.woocommerce-checkout-review-order td.product-total del span bdi,
.woocommerce-checkout-review-order td.product-total ins span bdi,
.woocommerce-checkout-review-order td.product-total .product-quantity {
  color: #111 !important; /* kirkas punainen */
  font-weight: normal !important;
}  
   
/* Tuotekohtaiset hinnat (amount elementit) */
.woocommerce-checkout-review-order td.product-total .amount bdi {
  color: #111 !important; /* kirkas punainen */
  font-weight: 800; 
}  

/* Tuotekohtaiset hinnat, jotka ovat 'bdi'-elementissä (usein tämä on se lopullinen hinta) */
.woocommerce-checkout-review-order .woocommerce-Price-amount bdi,
.woocommerce-checkout-review-order td.product-total .woocommerce-Price-amount bdi {
  color: #111 !important; /* kirkas punainen */
}

/* Välisumma */
.woocommerce-checkout .woocommerce .cart-subtotal .amount bdi {
  color: #111 !important; /* kirkas punainen */
  font-weight: 800;   
}

/* ALV-summa */
.woocommerce-checkout .woocommerce .tax-total .amount, /* Yleinen alv-summan luokka */
.woocommerce-checkout .woocommerce .woocommerce-Price-amount.tax-total bdi { /* Joskus alv on omassa luokassaan ja bdi-elementissä */
  color: #111 !important; /* kirkas punainen */
}
/* Suora kohdistus kuvan ALV-summaan, jos yllä olevat eivät toimi */
.woocommerce-checkout-review-order tfoot .tax-total td {
    color: #e60023 !important; 
}

  
/* Yhteensä-summa */
.woocommerce-checkout .woocommerce .order-total .amount bdi {
  color: #e60023 !important; /* kirkas punainen */
  font-weight: 800; 
}
/* Tarkempi kohdistus yhteensä-summaan review-order taulukossa */
.woocommerce-checkout-review-order tfoot .order-total td {
  color: #e60023 !important; /* kirkas punainen */
 
}
/* Joskus yhteensä-summa on myös bdi-elementissä */
.woocommerce-checkout-review-order .order-total .woocommerce-Price-amount bdi {
  color: #e60023 !important;
}


/* ====== Infotekstien typografia kevyemmäksi ====== */
.woocommerce-checkout .woocommerce form .woocommerce-terms-and-conditions-wrapper,
.woocommerce-checkout .woocommerce .woocommerce-privacy-policy-text,
.woocommerce-checkout .woocommerce .woocommerce-notice,
.woocommerce-checkout .woocommerce .woocommerce-info,
.woocommerce-checkout .woocommerce .woocommerce-error,
.woocommerce-checkout .woocommerce .woocommerce-message {
  font-weight: 400 !important;   /* normaali paino */
  color: #333;                   /* pehmeämpi väri */
}

/* Pienennetään ja kevennetään pienet info-tekstit */
.woocommerce-checkout .woocommerce .woocommerce-privacy-policy-text p,
.woocommerce-checkout .woocommerce .woocommerce-form__label-for-checkbox span {
  font-weight: 400;
  color: #555;
}
 
/* Info-bannerin taustaväri ja väri */
.woocommerce form.checkout_coupon, .woocommerce .checkout-login-coupon-wrapper form.login, body .wc-block-components-notice-banner.is-info, .woocommerce-info, .woocommerce .woocommerce-info {
  background-color: #e8f3fe;
  color: #111; 
}

/* Kassasivun maksutavat info-boksien padding */
.woocommerce-checkout #payment ul.payment_methods .woocommerce-info {
  padding: 10px;
}
 
 
 
/* ================================
   WooCommerce – Checkout compact UI (final)
   ================================ */

/* 0) Perustaulukko */
.woocommerce-checkout-review-order table.shop_table{
  width:100%;             /* sarakeleveydet pitävät */
  border-radius:10px;
  overflow:hidden;
}
.woocommerce-checkout-review-order table.shop_table th{
  font-weight:800;
  color:#0f172a;
}
.woocommerce-checkout-review-order table.shop_table td{
  padding: 8px 10px;
  vertical-align: top; 
  font-weight:800;
} 

/* 1) Sarakejaot: nimi vasemmalle (auto), hinnat oikealle (kiinteä) */
.woocommerce-checkout-review-order table.shop_table th.product-name,
.woocommerce-checkout-review-order table.shop_table td.product-name{
  display:table-cell !important;   /* pidä td soluna */
  width:auto;
  padding-right:10px;
  word-break:break-word;
}
.woocommerce-checkout-review-order table.shop_table th.product-total,
.woocommerce-checkout-review-order table.shop_table td.product-total{
  display: table-cell !important;   /* pidä td soluna */
  width: 170px;                     /* säädä 150–200px */
  min-width: 160px;
  text-align: right;
  vertical-align: top;
  white-space: normal;
}

/* 2) Tuotenimi – kompakti metateksti (ei grid/flex soluun) */
.woocommerce-checkout-review-order .product-name {
  font-weight: 700 !important;  
}
.woocommerce-checkout-review-order .product-name .variation,
.woocommerce-checkout-review-order .product-name .wc-item-meta,
.woocommerce-checkout-review-order .product-name .ts-product-ratings-stock,
.woocommerce-checkout-review-order .product-name .ts-attributes{
  display:block;
  color:#666;
  line-height:1.25;
  margin-top:2px;
}

/* 3) Hinnat oikealla päällekkäin — pinoa SISÄLLÄ, ei td:lle */
.woocommerce-checkout-review-order td.product-total del,
.woocommerce-checkout-review-order td.product-total ins,
.woocommerce-checkout-review-order td.product-total .amount,
.woocommerce-checkout-review-order td.product-total small,
.woocommerce-checkout-review-order td.product-total .woocommerce-price-suffix,
.woocommerce-checkout-review-order td.product-total .quantity,
.woocommerce-checkout-review-order td.product-total .multiplier{
  display:block;
  line-height:1.15;  
}

/* Typografia (kompakti) */
.woocommerce-checkout-review-order td.product-total del{
  color:#8a8a8a;
  font-size:12px;
  text-decoration:line-through;
}

/* Tämän selektorin tyylit ylikirjoittavat mahdollisesti aiempia */
.woocommerce-checkout-review-order td.product-total ins,
.woocommerce-checkout-review-order td.product-total .amount{
  color:#e60023 !important; /* Kirkas punainen */
  text-decoration:none;
}
.woocommerce-checkout-review-order td.product-total small,
.woocommerce-checkout-review-order td.product-total .woocommerce-price-suffix{
  font-size:11px;
  color:#666;
}
.woocommerce-checkout-review-order td.product-total .quantity,
.woocommerce-checkout-review-order td.product-total .multiplier{
  color:#444;
}

/* 4) Välisummat / alv / toimitus */
.woocommerce-checkout-review-order tfoot th,
.woocommerce-checkout-review-order tfoot td{
  
}
/* Tässä on usein yhteensä-summa */
.woocommerce-checkout-review-order tfoot .order-total th,
.woocommerce-checkout-review-order tfoot .order-total td{
  font-weight:800; 
  color: #e60023 !important; /* Yhteensä-hinta varmasti punaiseksi */
} 

/* 5) Toimitustavat sirommaksi */
.woocommerce-checkout .woocommerce-shipping-methods li{
  display:flex;
  align-items:center;
  gap:8px;
  padding:4px 0;
}
/* Toimituksen hintojen (esim. 8.00 €) pitäisi myös olla punaisia kuvan perusteella */
.woocommerce-checkout .woocommerce-shipping-methods .amount {
    color: #e60023 !important;
    font-weight: 800;
} 

/* 6) Maksut – radio + laatikot kompaktiksi */
.woocommerce-checkout .wc_payment_methods{
  border:1px solid #e5e7eb;
  border-radius:10px;
  padding:10px;
  background:#fafafa;
}
.woocommerce-checkout .wc_payment_methods>li{
  padding:6px 4px;
  border-bottom:1px dashed #e5e7eb;
}
.woocommerce-checkout .wc_payment_methods>li:last-child{ border-bottom:0; }
.woocommerce-checkout .wc_payment_methods>li>label{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:600;
  cursor:pointer; 
} 
.woocommerce-checkout .payment_box{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:8px;
  padding:10px 12px;
  margin:8px 0 6px 26px;
  color:#444;
}

/* 7) Lähetä tilaus -nappi */
.woocommerce #place_order,
.woocommerce-page #place_order{
  padding:12px 18px;
  border-radius:8px;
  font-weight:800; 
}

/* Lisäkorjauksia maksutapoihin */
.woocommerce-checkout #payment div.payment_box {
	padding: 15px;
} 
 
.woocommerce-checkout #payment div.payment_box .paytrail-provider-group {
	padding: 0px 10px;
}

.woocommerce-checkout #payment ul.payment_methods li {
    padding: 10px !important; 
}
 
.woocommerce-checkout #payment ul.payment_methods {
    padding: 0px 0;
}  
 


/* Asettelu: Asiakastiedot ja tilausarvostelu */
.woocommerce > form.checkout #customer_details {
    width: calc(100% - 480px);
}
 
.woocommerce > form.checkout #order_review_heading,
.woocommerce > form.checkout #order_review {
    width: 480px; 
}


.woocommerce > form.checkout #order_review { 
    border: 2px solid #555;
	border-top: 0px;
} 
.woocommerce > form.checkout #order_review_heading {
	border: 2px solid #555;
	border-bottom:0px;
}  


.woocommerce-checkout .woocommerce .woocommerce-privacy-policy-text,
.woocommerce-checkout .woocommerce .woocommerce-notice,
.woocommerce-checkout .woocommerce .woocommerce-info,
.woocommerce-checkout .woocommerce .woocommerce-error,
.woocommerce-checkout .woocommerce .woocommerce-message {
    font-weight: 400 !important;
    color: #222;
}
.woocommerce-checkout .woocommerce .woocommerce-privacy-policy-text a,
.woocommerce-checkout .woocommerce .woocommerce-notice a,
.woocommerce-checkout .woocommerce .woocommerce-info a,
.woocommerce-checkout .woocommerce .woocommerce-error a,
.woocommerce-checkout .woocommerce .woocommerce-message a {
    color: #111;
} 

.woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text {
	color: #222;
}
.woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text a {
	color: #111;
}

  
 


/* =========================================
   Checkout – mobiili/tablet layout + order review fix
   ========================================= */

/* Tablet & mobiili – checkout pinoksi ja täysi leveys */
@media (max-width: 992px){

  .woocommerce > form.checkout{
    display:block;
  }

  .woocommerce > form.checkout #customer_details,
  .woocommerce > form.checkout #order_review_heading,
  .woocommerce > form.checkout #order_review{
    width:100% !important;
    min-width:0 !important; 
    margin:0 0 16px 0;
  }

  /* Halutessa pienempi fontti order review -taulukossa */
  #order_review .woocommerce-checkout-review-order-table{
    font-size: 13px;
  }

  /* Maksulaatikon sisennys pois mobiilissa */
  .woocommerce-checkout .payment_box{
    margin: 8px 0 6px 0 !important;
  }



  /* -------------------------------
     Order review table: tee blockiksi
     ------------------------------- */

  /* Piilota header mobiilissa (Tuote / Välisummaa) */
  #order_review .woocommerce-checkout-review-order-table thead{
    display:none !important;
  }

  /* Taulukon "table-layout" sotkut pois mobiilissa */
  #order_review .woocommerce-checkout-review-order-table{
    width:100% !important;
    table-layout:auto !important;
    border-collapse: separate !important;
  }

  /* TBODY tuotteet */
  #order_review .woocommerce-checkout-review-order-table tbody{
    
    width:100% !important;
  }

  #order_review .woocommerce-checkout-review-order-table tbody tr.cart_item{
    width:100% !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid rgba(0,0,0,.08) !important;
  }

  #order_review .woocommerce-checkout-review-order-table tbody tr.cart_item td{
    
  }

  #order_review .woocommerce-checkout-review-order-table tbody tr.cart_item td.product-name{
    font-weight: 600 !important;
    margin: 0 0 6px 0 !important;
  }

  /* Tuotteen meta pienemmäksi ja selkeämmäksi */
  #order_review .woocommerce-checkout-review-order-table tbody tr.cart_item td.product-name small,
  #order_review .woocommerce-checkout-review-order-table tbody tr.cart_item td.product-name .variation,
  #order_review .woocommerce-checkout-review-order-table tbody tr.cart_item td.product-name .product-quantity{

    margin-top: 4px;
    font-weight: 400;
    opacity: .8;
    line-height: 1.3;
  }

  /* Hinta omalle rivilleen, oikealle */
  #order_review .woocommerce-checkout-review-order-table tbody tr.cart_item td.product-total{
    margin-top: 6px !important;
    text-align: right !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }

  #order_review .woocommerce-checkout-review-order-table tbody tr.cart_item td.product-total .amount{
    white-space: nowrap !important;
  }

  /* -------------------------------
     TFOOT summary-rivit (Välisummaa/Toimitus/ALV/Yhteensä/Säästö)
     ------------------------------- */

  #order_review .woocommerce-checkout-review-order-table tfoot{
    width:100% !important;
  }

	.woocommerce-checkout-review-order-table tfoot tr { 
		width:100% !important;
	} 
	
	#order_review .shop_table.woocommerce-checkout-review-order-table tfoot th, 
	#order_review .shop_table.woocommerce-checkout-review-order-table tfoot td { 
		width: 50%; 
	}

  #order_review .woocommerce-checkout-review-order-table tfoot th{
    font-weight: 600 !important;
    margin-bottom: 6px !important;
  }

  #order_review .woocommerce-checkout-review-order-table tfoot td{
    text-align: right !important;
    white-space: nowrap !important;
  }

  /* Shipping list siistiksi */
  #order_review .woocommerce-checkout-review-order-table #shipping_method{
    margin: 6px 0 0 0;
    padding: 0;
    list-style: none;
  }

  #order_review .woocommerce-checkout-review-order-table #shipping_method li{
    margin: 0 0 10px 0;
  }

  #order_review .woocommerce-checkout-review-order-table #shipping_method li label{
    display:flex;
    align-items:flex-start;
    gap: 10px;
    line-height: 1.3;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  #order_review .woocommerce-checkout-review-order-table #shipping_method li input[type="radio"]{
    margin-top: 2px;
    flex: 0 0 auto;
  }

  /* Varmuuden vuoksi: poista teeman mahdolliset sivupaddingit */
  #order_review .woocommerce-checkout-review-order-table td,
  #order_review .woocommerce-checkout-review-order-table th{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  
  

  
  
}

/* Pienet puhelimet (valinnainen): pidä hinta luettavana */
@media (max-width: 480px){
  #order_review .woocommerce-checkout-review-order-table .amount{
    font-size: 13px;
  }
}






 
 
 
 
 
 
 
 
 
 
 
 





/* MYACCOUNT */


.woocommerce .woocommerce-MyAccount-content .woocommerce-info {
    background-color: #efefef;
    color: #111;
}
.woocommerce .woocommerce-MyAccount-content a.button,
.woocommerce .woocommerce-MyAccount-content button {
	background: #222;
	border: 1px solid #111;
}
.woocommerce .woocommerce-MyAccount-content a.button:hover,
.woocommerce .woocommerce-MyAccount-content button:hover {
	background: #000;
	color: #fff; 
} 

.woocommerce .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link {
	color: #777;   
}
.woocommerce .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link:hover {
	color: #000; 
}

.woocommerce .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link.is-active {
	color: #000;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active:after {
    border-color: #000;
}

 

 

 

   
  
   
  
  
  
  
  
/* --- Tuotesivun tab-napit (Product details, Specifications, Arviot) --- */
.woocommerce div.product .woocommerce-tabs ul.tabs li a,
.mas-tabs .nav-tabs .nav-link {
  font-size: 14px !important;        /* pienempi fontti */
  font-weight: 500;
  padding: 8px 18px !important;      /* vähemmän sisätilaa */
  border-radius: 24px;               /* säilytä pyöreys mutta hillitympi */
  transition: all 0.2s ease-in-out;
}

/* Hover-efekti maltilliseksi */
.mas-tabs .nav-tabs .nav-link:hover {
  background-color: #f4f4f4;
  color: #111;
}

/* Aktiivinen nappi (esim. Arviot) */
.mas-tabs .nav-tabs .nav-link.active {
  background-color: #000;
  color: #fff;
}

/* Vähennetään tab-rivin välistyksiä ja marginaaleja */
.mas-tabs .nav-tabs {
  gap: 8px;                    /* pienempi väli nappejen välissä */
  margin-bottom: 1.2rem !important; /* vähemmän tilaa tabien alla */
  justify-content: center;     /* jos haluat keskitetyn rivin */
}

/* Pieni säätö mobiilille */
@media (max-width: 768px) {
  .mas-tabs .nav-tabs .nav-link {
    font-size: 13px !important;
    padding: 7px 14px !important;
  }
}

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
 
 

 
 
/* =========================================================
   TUOTTEIDEN hover-efektit + ANYSELL + ECOMALL
   ========================================================= */
@media only screen and (min-width: 1279px) {

  /* --- NORMAALI TILA --- */
  .woocommerce .product:not(.product-category) .product-wrapper {
    border-color: rgba(0, 0, 0, 0.1);
    transform: scale(1);
    will-change: transform, box-shadow, border-color;
    transition:
      border-color 0.15s ease,
      box-shadow 0.15s ease;
  }

  /* --- HOVER: bounce-efekti --- */
  .woocommerce .product:not(.product-category) .product-wrapper:hover {
    border-color: rgba(0, 0, 0, 0.15) !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15) !important; 
    animation: productBounce 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
	z-index: 2000;
  }

  /* --- Keyframes: kevyt bounce (1 → 1.03 → 1.02) --- */
  @keyframes productBounce {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.01); }
    100% { transform: scale(1.01); }   
  }

  /* --- TEEMAN border-show --- */
  .woocommerce.border-show.border-primary 
  .product:not(.product-category) .product-wrapper {
    border-color: rgba(0, 0, 0, 0.05) !important;
  }

  /* --- TUOTEKORTIN ALAOSA (product-group-button-meta) --- */
  .woocommerce .products .product:not(.product-category) 
  .product-wrapper:hover .product-group-button-meta > .short-description,
  .woocommerce.ts-product.list .products .product:not(.product-category) 
  .product-wrapper:hover .product-group-button-meta {
    box-shadow: 0 8px 12px rgba(0,0,0,0.15) !important;
    border-color: rgba(0,0,0,0.15) !important;
    transition: all 0.15s ease;
  }

  /* Fade-in alaosalle */
  .woocommerce .product:not(.product-category) 
  .product-wrapper .product-group-button-meta { 
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease; 
  }

  .woocommerce .product:not(.product-category) 
  .product-wrapper:hover .product-group-button-meta {
    opacity: 1;
    visibility: visible;
  }
}
 


/* --- Normaali kortti ilman hoveria --- */
.woocommerce .product:not(.product-category) .product-wrapper {
  border-color: rgba(0, 0, 0, 0.08);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}





/* Poistaa vasemman ja oikean marginaalin ja paddingin kaikilta
   elementor-containereilta tuotteiden sisällä */
.mas-products .elementor-element.e-con-full.e-flex.e-con.e-child {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* vaihtoehtoisesti lyhyemmin: */
.mas-products .elementor-element.e-con-full.e-flex.e-con.e-child {
  margin-inline: 0 !important;
  padding-inline: 0 !important;
}


 

.ts-product-wrapper .products .product .product-wrapper .product-group-button-meta .short-description,
.ts-product-wrapper .products .product .product-wrapper .product-group-button-meta .short-description p,
.woocommerce .products .product:not(.product-category) .product-wrapper:hover .product-group-button-meta > .short-description,
.woocommerce.ts-product.list .products .product:not(.product-category) .product-wrapper:hover .product-group-button-meta {
	font-weight: 400;
	color: #222;  
	font-size: 12px;    
}
 



 








/* ============================
   HELVIS POSTS – kuva vasemmalla, teksti oikealla
   ============================ */

.helvis-posts .elementor-posts-container{
  display: grid;
  gap: 18px; /* väli korttien väliin */
}

/* Kortti – ilman taustaa */
.helvis-posts .elementor-post{
  display: grid;
  grid-template-columns: 120px 1fr; /* kuva | sisältö */
  align-items: start;
  gap: 14px;
  padding: 10px 0;
  border: none;
  background: transparent;
  color: #fff; /* oletustekstit valkoisina */
}

/* Thumbnail – vasemmalle, pienempi */
.helvis-posts .elementor-post__thumbnail{
  margin: 0 !important;
  line-height: 0;
}
.helvis-posts .elementor-post__thumbnail img{
  width: 120px;
  height: 86px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  opacity: 0.95;
  transition: transform .2s ease, opacity .2s ease;
}
.helvis-posts .elementor-post__thumbnail img:hover{
  transform: scale(1.03);
  opacity: 1;
}

/* Tekstipuoli */
.helvis-posts .elementor-post__text{
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Otsikko */
.helvis-posts .elementor-post__title{
  font-size: 18px;
  line-height: 1.3;
  margin: 0 0 6px;
}
.helvis-posts .elementor-post__title a{
  color: #fff;
  text-decoration: none;
}
.helvis-posts .elementor-post__title a:hover{
  text-decoration: underline;
}

/* Ote / excerpt */
.helvis-posts .elementor-post__excerpt{
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255,255,255,.8);
}

/* Piilota meta jos et tarvi */
.helvis-posts .elementor-post__meta-data{
  display: none;
}

/* Lue lisää */
.helvis-posts .elementor-post__read-more{
  display: inline-block;
  margin-top: 6px;
  font-weight: 600;
  text-decoration: none;
  color: #fff;
  opacity: 0.9;
}
.helvis-posts .elementor-post__read-more:hover{
  opacity: 1;
}

/* Hover-efekti koko riville */
.helvis-posts .elementor-post:hover{
  transform: translateY(-2px);
  transition: transform .15s ease;
}

/* ============================
   Mobiili (kuva ylös)
   ============================ */
@media (max-width: 768px){
  .helvis-posts .elementor-post{
    grid-template-columns: 1fr;  /* kuva ylös */
    gap: 10px;
  }
  .helvis-posts .elementor-post__thumbnail img{
    width: 100%;
    height: 180px;
    border-radius: 10px;
  }
  .helvis-posts .elementor-post__title{
    font-size: 17px;
    margin-top: 4px;
  }
  .helvis-posts .elementor-post__excerpt{
    font-size: 14px;
  }
}

/* Isot näytöt – vähän suurempi kuva */
@media (min-width: 1280px){
  .helvis-posts .elementor-post{
    grid-template-columns: 140px 1fr;
  }
  .helvis-posts .elementor-post__thumbnail img{
    width: 140px;
    height: 100px;
  }
}


















  

 /* =========================================================
   MAS product card: border highlight + image bounce (grid + swiper)
   ========================================================= */

/* Kortin runko */
.mas-product .e-con-inner{
  background:#fff;
  /*border:1px solid rgba(0,0,0,.08); */
  border-radius:12px;
  overflow:hidden;
  transition:border-color .15s ease, box-shadow .15s ease;
  will-change:border-color, box-shadow;
}

/* Hoverissa vain reunus korostuu (ei kortin skaalausta) */
.mas-product:hover .e-con-inner{
  border-color:rgba(0,0,0,.18);
  box-shadow:none; /* pidä kortti litteänä – poista teeman varjo */
}

/* Nollaa mahdolliset teeman varjot näissä wrapeissa */
.mas-product .e-con-boxed:hover,
.swiper-slide .mas-product:hover .e-con-full{
  box-shadow:none !important;
}

/* Kuva: perus-tila */
.mas-product .e-con-inner img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
  border-radius:10px;     /* matchaa kortin kaarevuuden */
  transform:scale(1);
  transition:transform .35s cubic-bezier(.25,.46,.45,.94);
  will-change:transform;
}

/* Kuva: hover – pehmeä bounce */
.mas-product:hover .e-con-inner img{
  animation:masImageBounce .32s cubic-bezier(.25,.46,.45,.94) forwards;
}

/* 1 → 1.05 → 1.02 */
@keyframes masImageBounce{
  0%   { transform:scale(1); }
  50%  { transform:scale(1.05); }
  100% { transform:scale(1.02); }
}

 
 
  
 
 
 
 
 
 
 
 
 
/* --- Swiper nuolinapit: musta tausta + valkoinen ikoni, reunoille --- */

/* Sijoittelu reunoille */
.mas-swiper-arrows .swiper-button-prev { left: 0; }
.mas-swiper-arrows .swiper-button-next { right: 0; }

/* Nappi (ylikirjoitetaan Elementor/teema) */
.mas-swiper-arrows a.elementor-button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;

  background: #000 !important;          /* musta tausta */
  color: #fff !important;                /* valkoinen ikoni/teksti */
  fill: #fff !important;                 /* jos ikoni lukee filliä */

  border: none !important;
  border-color: transparent !important;
  border-radius: 999px !important;
  padding: 0 !important;                 /* poistetaan Elementor-padding */

  box-shadow: 0 4px 12px rgba(0,0,0,.25);
  transition: transform .15s ease, box-shadow .15s ease;
}




/* Hover/focus – pidetään värit samana, vain kevyt efekti */
.mas-swiper-arrows a.elementor-button-link:hover,
.mas-swiper-arrows a.elementor-button-link:focus-visible {
  background: #000 !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,.3);
  outline: none;
}

/* Disabled */
.mas-swiper-arrows .btn-wrapper[aria-disabled="true"] a.elementor-button-link {
  opacity: .4;
  cursor: default;
  pointer-events: none;
}


.mas-swiper-arrows .elementor-button-content-wrapper .elementor-button-icon svg { 
  height: 24px !important;
    fill: currentColor !important;
  stroke: currentColor !important;
} 
 


/* Mobiilissa vedetään pikkuisen sisään */
@media (max-width: 768px){
  .mas-swiper-arrows .swiper-button-prev { left: 4px; }
  .mas-swiper-arrows .swiper-button-next { right: 4px; }
  .mas-swiper-arrows a.elementor-button-link { width: 42px; height: 42px; }
}

 
 
 
 
 
 
 
  









 

 /* ============================
   FiboSearch – Dark header refined (v6.4 - FINAL PRICE FIX)
   ============================ */

:root{
  --fs-bg:    #0c0c0d;
  --fs-txt:   #ffffff;
  --fs-muted: #a4a4a4;
  --fs-bd:    #1e1f22;
  --fs-bd-h:  #2c2d31;
  --fs-hover: #141416;
  --fs-icon:  #a0a0a0;
}

/* Wrapper */
.dgwt-wcas-sf-wrapp{
  position: relative;
  z-index: 100;
  display: flex;
  align-items: center;
  background: transparent !important;
}

/* Hakukenttä */
.dgwt-wcas-search-input{
  width: 100%;
  height: 44px !important;
  background: var(--fs-bg) !important;
  color: var(--fs-txt) !important;
  border: 1px solid var(--fs-bd) !important;
  border-radius: 8px !important;
  padding: 10px 48px 10px 44px !important;
  line-height: 1.3;
  box-shadow: none !important; 
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.dgwt-wcas-search-input::placeholder{
  color: var(--fs-muted) !important;
}


/* ============================
   Hakukentän tekstityyli – pienempi ja kevyempi
   ============================ */
.dgwt-wcas-search-input {
  font-size: 14px !important;   /* tai esim. 14px */
  font-weight: 400 !important;  /* 400 = normaali, 300 = kevyt */
  letter-spacing: 0.1px; 
}
 

/* Hover + focus-within + focus-ring */
.dgwt-wcas-search-input:hover,
.dgwt-wcas-sf-wrapp:focus-within .dgwt-wcas-search-input{
  border-color: var(--fs-bd-h) !important;
  background: var(--fs-hover) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,.10),
              0 0 0 4px rgba(255,255,255,.04) !important;
}
.dgwt-wcas-search-input:focus-visible{
  outline: 1px solid rgba(255,255,255,.35) !important;
  outline-offset: 2px !important;
}
 
/* Autofill fix (Chrome/Safari) */
.dgwt-wcas-search-input:-webkit-autofill {
  -webkit-text-fill-color: var(--fs-txt) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--fs-bg) inset !important;
  caret-color: var(--fs-txt) !important;
  transition: background-color 600s ease-in-out 0s;
}
 
/* Hakukuvake (submit) */
.dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit {
  position: absolute;
  left: 15px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fs-bg);
  color: var(--fs-icon);
  border: none;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
  box-shadow: none;
  transition: color .15s ease, transform .15s ease;
}
.dgwt-wcas-sf-wrapp .dgwt-wcas-search-submit svg {
  width: 16px !important;
  height: 16px !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  pointer-events: none; 
}
.dgwt-wcas-sf-wrapp .dgwt-wcas-search-submit svg [fill]{ fill: currentColor !important; }
.dgwt-wcas-sf-wrapp .dgwt-wcas-search-submit svg [stroke]{ stroke: currentColor !important; }
.dgwt-wcas-sf-wrapp .dgwt-wcas-search-submit:hover {
  color: #d1d1d1;
  transform: translateY(-50%) scale(1.05);
}
 
 
 
 
/* Pienet näytöt */
@media (max-width: 768px){
  .dgwt-wcas-search-input{
    height: 40px !important;
    padding-left: 48px !important;
    padding-right: 38px !important;
  }
  .dgwt-wcas-sf-wrapp .dgwt-wcas-search-submit{
    width: 40px; height: 40px; left: 4px;
  }
}

/* Ikonit + a11y fokus */
.dgwt-wcas-preloader,
.dgwt-wcas-sf-wrapp .dgwt-wcas-close,
.dgwt-wcas-sf-wrapp .dgwt-wcas-voice-search {
  color: var(--fs-muted) !important;
  fill:  var(--fs-muted) !important;
  transition: opacity .15s ease, outline-color .15s ease;
}
.dgwt-wcas-sf-wrapp .dgwt-wcas-close:hover,
.dgwt-wcas-sf-wrapp .dgwt-wcas-voice-search:hover {
  opacity: .9;
}
.dgwt-wcas-sf-wrapp .dgwt-wcas-close:focus-visible,
.dgwt-wcas-sf-wrapp .dgwt-wcas-voice-search:focus-visible {
  outline: 2px solid rgba(255,255,255,.25);
  outline-offset: 2px;
  border-radius: 6px;
}
.dgwt-wcas-preloader:after {
  border-color: var(--fs-muted) transparent var(--fs-muted) transparent !important;
}

/* Poistetaan aiemmat pseudo-elementit (jos jää näkyviin) */
.dgwt-wcas-sf-wrapp::before,
.dgwt-wcas-sf-wrapp::after{
  display: none !important;
  content: none !important;
}



 
 
 
 
 
 
 
 
 
 
 
 /* ================================
   FiboSearch dropdown – Scrollbar + Colors
   ================================ */

.dgwt-wcas-suggestions-wrapp{
  --bg:#0f1013;
  --row:#121317;
  --hover:#17191e;
  --bd:#1d1f25;
  --txt:#fff;
  --muted:#fff; 
  --price:#ff4d4f; /* PUNAINEN (alennettu hinta) */
  --sale:#d3d3d3; /* harmaa viittauksille tms. */

  background:var(--bg) !important;
  border:1px solid var(--bd) !important;
  border-radius:12px !important;
  box-shadow:0 22px 48px rgba(0,0,0,.45) !important;
  margin-top:10px !important;
  overflow: visible !important;
  z-index: 9999 !important;
}





/* Otsikot (OSASTOT/TUOTTEET) */
.dgwt-wcas-st-header {
  color: var(--txt) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .4px;
  padding: 20px 12px 8px 10px !important;
  background: var(--bg) !important;
   
  /* LOPULLINEN KORJAUS: Asetetaan suoraan läpinäkyvä valkoinen viiva, joka näyttää himmeältä harmaalta */
  opacity: 1 !important; 
  background-image: none !important;
}
.dgwt-wcas-st-header:first-of-type { border-top: 0 !important; }




.dgwt-wcas-suggestion::after {
  display: none;
}

.dgwt-wcas-has-headings .dgwt-wcas-suggestion-headline .dgwt-wcas-st {
  border-bottom: 0px solid #333;
  padding-bottom: 5px;
  text-transform: uppercase;
  margin-top: 16px;
  font-size: 10px; 
}

 
.dgwt-wcas-has-headings .dgwt-wcas-suggestion.dgwt-wcas-suggestion-headline {
	min-height: 20px;
	padding-top: 15px !important;
	padding-bottom: 10px; 
	font-size: 12px; 
	background: #090909;
}
 
.dgwt-wcas-suggestion.dgwt-wcas-suggestion-tax,
.dgwt-wcas-suggestion.dgwt-wcas-suggestion-cat { 
	min-height: 20px;
	padding-top: 25px !important;
	padding-bottom: 25px !important;
	padding-left: 15px !Important;
	font-size: 12px;   
} 

/* Rivien tyyli */
.dgwt-wcas-suggestion {
  display:flex;
  align-items:center;
  gap:8px;
  padding: 10px 12px !important;
  background:var(--row); 
  color: #fff !important;
  border-top:1px solid rgba(255,255,255,.05);
  transition:background .12s ease, color .12s ease;
  min-height: 50px; 
}



.dgwt-wcas-suggestion-nores {
	
	color: #fff !important;
}



.dgwt-wcas-suggestion .dgwt-wcas-suggestion-product,
.dgwt-wcas-has-img .dgwt-wcas-suggestion.dgwt-wcas-suggestion-product {
	padding: 10px 12px !important;
	min-height: 50px; 
}


.dgwt-wcas-suggestion:first-child{ border-top:0; }
.dgwt-wcas-suggestion a{ text-decoration: none !important; }
.dgwt-wcas-suggestion:hover,
.dgwt-wcas-suggestion.dgwt-wcas-suggestion-selected{
  background:var(--hover) !important;
} 
.dgwt-wcas-suggestion a:focus-visible{
  outline: 2px solid rgba(255,255,255,.2);
  outline-offset: 2px;
  border-radius: 6px;
}


/* Oletus: kaikki hinnat valkoisina, ei yliviivausta */
.dgwt-wcas-meta .dgwt-wcas-sp bdi,
.dgwt-wcas-meta .dgwt-wcas-sp .woocommerce-Price-amount bdi,
.dgwt-wcas-meta .dgwt-wcas-sp .amount,
.dgwt-wcas-meta .dgwt-wcas-price,
.dgwt-wcas-meta .dgwt-wcas-price .amount {
  color: #eee !important;
  text-decoration: none !important;
  font-weight: 500;
}

.dgwt-wcas-meta .dgwt-wcas-sp bdi:hover,
.dgwt-wcas-meta .dgwt-wcas-sp .woocommerce-Price-amount bdi:hover,
.dgwt-wcas-sp:hover,
.dgwt-wcas-sp:hover .amount,
.dgwt-wcas-price:hover,
.dgwt-wcas-price:hover .amount {
  text-decoration: none !important;
}
 
 
.dgwt-wcas-meta .dgwt-wcas-sp {
	padding-left: 0px !important;
}
 
 
 
/* Kuva */
.dgwt-wcas-si{ flex:0 0 auto; }
.dgwt-wcas-si img {
  width:55px !important; height:55px !important;
  object-fit: cover; border-radius: 10px !important;
  background: #0b0c0f;
  border: none !important;  
}

/* Nimi */
.dgwt-wcas-st,
.dgwt-wcas-suggestion-title{
  color: var(--txt) !important;
  font-size: 14px !important;
  line-height:1.35;
  margin:0 !important;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}





/* ================================
   FiboSearch – Full-width mobile dropdown
   ================================ */

/* Perustyylit jo olemassa – lisätään vain mobiilipoikkeus */
@media (max-width: 768px){
  /* Venytys koko näytön leveydelle ja kiinnitys viewporttiin */
  .dgwt-wcas-suggestions-wrapp{
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: none !important;

    /* Asetetaan yläreuna dynaamisesti CSS-muuttujasta (ks. JS alla) */
    top: var(--fs-top, 64px) !important;

    margin-top: 0 !important;         /* älä lisää väliä fixed-tilassa */
    border-radius: 0 0 14px 14px !important;
    z-index: 99999 !important;         /* headerien yläpuolelle */
    box-shadow: 0 18px 42px rgba(0,0,0,.5) !important;
  }

  /* Riveille vähän tiiviimpi padding pienessä näytössä */
  .dgwt-wcas-suggestion{ padding: 10px 12px !important; }
  .dgwt-wcas-si img{ width:52px !important; height:52px !important; }

  /* Poista mahdolliset klippaukset sisäelementeistä */
  .dgwt-wcas-suggestions-wrapp *{
    overflow: visible;
  }
}

/* Kun dropdown on auki, voi olla mukavaa lukita tausta scrollilta */
@media (max-width: 768px){
  html.fs-lock, body.fs-lock{
    overflow: hidden;
    overscroll-behavior: contain;
    touch-action: pan-down;
  }
}







/* Hakutuloksen rivi */
.dgwt-wcas-suggestion-product {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* Sisältöalue (nimi + hinta + nappi) */
.dgwt-wcas-content-wrapp {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    flex: 1;
}

/* Hintatiedot ja nappi-container */
.dgwt-wcas-meta {
    display: flex !important;
    flex-direction: row !important; /* Hinta ja nappi vierekkäin */
    align-items: center !important;
    gap: 15px !important;
    margin-left: auto !important; /* Työntää nipun oikealle */
    text-align: right;
}

/* Estetään hinnan rivittyminen oudosti */
.dgwt-wcas-price {
    display: block !important;
    min-width: 80px;
}

/* Napit ja syötekenttä */
.fibo-cart-actions {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    visibility: visible !important;
    opacity: 1 !important;
}

input.fibo-qty {
    width: 40px !important;
    height: 30px !important;
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #ccc !important;
    text-align: center;
    border-radius: 4px;
    font-size: 12px;
}

.fibo-add-btn {
    background: #cc0000 !important;
    color: #fff !important;
    border: none !important;
    padding: 6px 12px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-size: 11px !important;
    font-weight: bold !important;
    white-space: nowrap;
}


 






 


 


:root {
  --fs-bg: #0f1013;
  --fs-row: #121317;
  --fs-hover: #17191e;
  --fs-bd: #1d1f25;
  --fs-txt: #ffffff;
  --fs-price: #ff4d4f;
  --fs-muted: #a4a4a4;
  --fs-success: #28a745;
  --fs-success-h: #218838;
}

/* =====================================
   1. HAKUKENTTÄ (INPUT)
   ===================================== */
.custom-live-search {
    position: relative;
    width: 100%;
    max-width: 600px;
}

.search-input-wrapper {
    position: relative;
    width: 100%;
}

#custom-search-input {
    width: 100% !important;
    height: 44px; 
    background: var(--fs-bg) !important;
    color: var(--fs-txt) !important;
    border: 1px solid var(--fs-bd) !important;
    border-radius: 10px !important;
    padding: 0 40px !important; 
    font-size: 14px !important;
    outline: none !important;
    box-shadow: none !important;
    transition: all 0.2s ease;
	margin-bottom: 0px; 
}

#custom-search-input:focus {
    border-color: var(--fs-muted) !important;
    background: var(--fs-row) !important;
}

.search-icon {
    position: absolute;
    left: 14px;
    top: 50%; 
    transform: translateY(-50%); 
    color: var(--fs-muted);
    pointer-events: none;
    display: flex;
    align-items: center;
}

/* Spinneri */
.search-loader {
    display: none;
    position: absolute;
    right: 14px;
    top: 50%;
    margin-top: -9px;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.1); 
    border-top-color: var(--fs-txt);
    border-radius: 50%;
    animation: custom-spin 0.6s linear infinite;
    z-index: 5;
}

@keyframes custom-spin { to { transform: rotate(360deg); } }
.search-input-wrapper.is-loading .search-loader { display: block; }

/* =====================================
   2. TULOKSET (DROPDOWN)
   ===================================== */
.custom-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--fs-bg);
    border: 1px solid var(--fs-bd);
    border-radius: 12px;
    box-shadow: 0 22px 48px rgba(0,0,0,.6);
    margin-top: 8px;
    z-index: 9999;
    max-height: 60vh;
    overflow-y: auto;
    display: none;
}

/* Skrollauspalkin tyyli */
.custom-search-results::-webkit-scrollbar { width: 6px; }
.custom-search-results::-webkit-scrollbar-track { background: var(--fs-bg); }
.custom-search-results::-webkit-scrollbar-thumb { background: var(--fs-bd); border-radius: 10px; }

.custom-search-header {
    color: var(--fs-muted);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 16px 15px 8px;
    background: #090909;
}

.custom-search-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    background: var(--fs-row);
    border-bottom: 1px solid rgba(255,255,255,0.03);
    transition: background 0.15s ease;
}

.custom-search-item:hover { background: var(--fs-hover); }

.custom-search-link {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0; /* Mahdollistaa nimen katkeamisen */
    text-decoration: none !important;
}

.custom-search-img img {
    width: 48px !important;
    height: 48px !important;
    object-fit: cover;
    border-radius: 8px;
    background: #0b0c0f;
    margin-right: 15px;
    flex-shrink: 0;
}

.custom-search-title {
    color: var(--fs-txt);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =====================================
   3. OIKEA LOHKO (HINTA JA OSTOSKORI)
   ===================================== */
.custom-search-right-block {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    margin-left: 15px;
    flex-shrink: 0;
}

/* Hinnan asettelu */
.custom-search-meta {
    text-align: right;
    min-width: 90px;
}

.custom-search-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
}

.custom-search-price del { color: #666 !important; font-size: 11px; }
.custom-search-price ins, 
.custom-search-price .amount {
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

/* Suffix (alv-tekstit) */
.custom-search-meta .woocommerce-price-suffix,
.netto-text {
    display: block !important;
    color: var(--fs-muted) !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    margin-top: 3px !important;
    line-height: 1.2 !important;
}

/* =====================================
   4. MÄÄRÄ JA NAPPI
   ===================================== */
.fibo-cart-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Määräkentän wrapper */
.fibo-qty-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

input.fibo-qty {
    width: 54px !important; /* Riittävä leveys nuolille + numerolle */
    height: 36px !important;
    background: #1a1b1f !important;
    color: #fff !important;
    border: 1px solid var(--fs-bd) !important;
    text-align: left !important;
    padding: 0 22px 0 8px !important; /* Tilaa nuolille oikealla */
    border-radius: 6px !important;
    font-size: 13px !important;
    margin: 0 !important;
    -moz-appearance: textfield;
}

input.fibo-qty::-webkit-outer-spin-button,
input.fibo-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Mukautetut nuolet */
.fibo-qty-nav {
    position: absolute;
    right: 1px;
    top: 1px;
    height: calc(100% - 2px);
    width: 18px;
    display: flex;
    flex-direction: column; 
    border-left: 1px solid var(--fs-bd);
    background: #1a1b1f;
    border-radius: 0 5px 5px 0;
}

.fibo-qty-up, .fibo-qty-down {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50%;
    cursor: pointer;
    color: var(--fs-muted);
    font-size: 11px; 
    user-select: none;
    transition: all 0.2s;
}

.fibo-qty-up { border-bottom: 1px solid var(--fs-bd); border-radius: 0 5px 0 0; }
.fibo-qty-up:hover, .fibo-qty-down:hover { background: var(--fs-hover); color: #fff; }

/* Ostoskori-nappi */
.fibo-add-btn {
    background: var(--fs-success) !important;
    color: #fff !important;
    border: none !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.fibo-add-btn:hover { background: var(--fs-success-h) !important; transform: scale(1.05); }
.fibo-add-btn:active { transform: scale(0.95); }
.fibo-add-btn svg { pointer-events: none; }

/* =====================================
   5. FOOTER JA SIIVOUS
   ===================================== */
.custom-search-view-all {
    display: block;
    width: 100%;
    padding: 14px;
    background: #090909;
    color: #ffffff;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    border-top: 1px solid var(--fs-bd);
    transition: background 0.2s;
}

.custom-search-view-all:hover { background: #111; }

/* Piilotetaan häiriötekijät */
.fibo-cart-actions .added_to_cart,
.woocommerce-notices-wrapper,
.ecomall-notice-wrapper,
.woocommerce-message,
.mfp-wrap { display: none !important; }

/* =====================================
   6. MOBIILI
   ===================================== */
@media (max-width: 768px) {
    
	#custom-search-input {
		height: 35px; 
		margin-right: 5px; 
	}
	
	
	.custom-search-results {
        position: fixed;
        top: 80px;  
        left: 0;
        right: 0;
        bottom: 0;
        width: 100vw;
        height: calc(100vh - 60px);
        border-radius: 0;
        margin-top: 0;
    }
    .custom-search-item { padding: 10px; }
    .custom-search-right-block { gap: 10px; margin-left: 10px; }
    body.fs-lock { overflow: hidden; }
}



 



 











.woocommerce .related > h2,
.woocommerce .upsells > h2,
.woocommerce-cart .cross-sells > h2 {
  font-size: 22px;
  font-weight: 600;
  color: #111;
} 






















/* ==============================
   Active Filters -alue (WooCommerce)
   ============================== */

/* Jos filtterit on aktivoitu, muotoillaan tämä alue */
.archive .ts-active-filters .widget_layered_nav_filters {
  background: #f4f4f4 !important;              /* vaaleansininen tausta */
  color: #111;                   /* tumma sininen teksti */
  border-radius: 6px;                /* pyöristetyt kulmat */
  margin-bottom: 20px;               /* väli seuraaville elementeille */
  font-size: 14px;                   /* sopiva koko */
  font-weight: 600;                  /* korostetaan tekstiä */
}

/* Tekstin korostaminen "Active Filters" */
.archive .ts-active-filters .widget_layered_nav_filters strong {
  color: #0d47a1;                    /* tumma sininen, jos haluat sen erottuvan */
  font-weight: bold;
}

/* Jos ei ole aktiivisia suodattimia, ei näy mitään */
.archive .ts-active-filters .widget_layered_nav_filters:empty {
  display: none;
}

/* Filtterit ja linkit, jotka näkyvät aktiivisina */
.archive .ts-active-filters .widget_layered_nav_filters ul li a {
  color: #111;                    /* sama sininen väri */
  text-decoration: none;         /* alleviivataan linkkejä */
  background: #cacaca;
}

.archive .ts-active-filters .widget_layered_nav_filters ul li a:hover {
  color: #1976d2;                    /* hover väri tummempi sininen */
}

  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

 
 
/* ===== Lisää ostoskoriin -napit (yleinen tyyli) ===== */
a.add_to_cart_button,
a.ajax_add_to_cart,
a.product_type_simple.add_to_cart_button,
a.elementor-button.add_to_cart_button,
.elementor-widget-container .mas-add-to-cart .add_to_cart_button,
.elementor-widget-container .mas-add-to-cart .elementor-button-icon {
  background-color: #f2f2f2 !important;   /* vaaleanharmaa tausta */
  color: #000;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  transition: all 0.25s ease;
  font-weight: 500;
  position: relative;
  z-index: 2;
}

/* — IKONI — älä anna nappityylejä ikonille, vain koko ja väri — */
a.add_to_cart_button .elementor-button-icon,
a.ajax_add_to_cart .elementor-button-icon,
a.elementor-button.add_to_cart_button .elementor-button-icon,
.elementor-widget-container .mas-add-to-cart .add_to_cart_button .elementor-button-icon,
.elementor-widget-container .mas-add-to-cart .elementor-button-icon {
  display: inline-flex;             /* keskitys */
  align-items: center;
  justify-content: center;
  width: 18px;                      /* haluttu koko */
  height: 18px;
  line-height: 1;
  margin: 0; padding: 0;            /* nollaa mahdolliset perityt paddit */
}

/* SVG-ikonin väri normaalitilassa: musta */
a.add_to_cart_button svg path,
a.ajax_add_to_cart svg path,
a.elementor-button.add_to_cart_button svg path,
.elementor-widget-container .mas-add-to-cart .add_to_cart_button .elementor-button-icon svg path {
  fill: #000 !important;
  transition: fill 0.25s ease;
}

/* HOVER: tausta musta, teksti ja ikoni valkoiseksi */
a.add_to_cart_button:hover,
a.ajax_add_to_cart:hover,
a.product_type_simple.add_to_cart_button:hover,
a.elementor-button.add_to_cart_button:hover,
.elementor-widget-container .mas-add-to-cart .add_to_cart_button:hover,
.elementor-widget-container .mas-add-to-cart:hover .elementor-button-icon {
  background-color: #000 !important;
  color: #fff !important;
}

a.add_to_cart_button:hover svg path,
a.ajax_add_to_cart:hover svg path,
a.elementor-button.add_to_cart_button:hover svg path,
.elementor-widget-container .mas-add-to-cart .add_to_cart_button:hover .elementor-button-icon svg path {
  fill: #fff !important;
}

/* Varmistus että nappi on klikattavissa */
a.add_to_cart_button,
a.ajax_add_to_cart {
  pointer-events: auto !important;
  z-index: 5;
}

/* Mobiili */
@media (max-width: 768px){
  a.add_to_cart_button,
  a.ajax_add_to_cart { width: 100%; justify-content: center; }
}

 
 
 
  
  
  
  
  
  
  
  
  

   
  
  
  
  

   
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
/* =========================================================
   SINGLE POST – Ecomall tidy
   ========================================================= */

/* Kontti + sivupalkki (kumpi tahansa id) */
.single-post .page-container.has-1-sidebar #left-sidebar.ts-sidebar,
.single-post .page-container.has-1-sidebar #right-sidebar.ts-sidebar {
  flex: 0 0 300px;
  max-width: 320px;
  padding-right: 36px;
  border: 0 !important; /* Poistetaan borderi */
}

.single-post .page-container p,
.single-post .page-container .elementor-widget-container {
	color: #222;
}

@media (max-width: 1024px) {
  .single-post .page-container.has-1-sidebar #left-sidebar.ts-sidebar,
  .single-post .page-container.has-1-sidebar #right-sidebar.ts-sidebar {
    flex-basis: 260px;
    padding-right: 15px;
	padding-left: 10px;
  }
} 
@media (max-width: 768px) {
  .single-post .page-container {
    padding: 24px 16px 60px;
	padding-top: 0px;
	margin-top: 0px;
  }
  .single-post .page-container.has-1-sidebar #left-sidebar.ts-sidebar,
  .single-post .page-container.has-1-sidebar #right-sidebar.ts-sidebar {

    margin-bottom: 22px;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 16px;
  }
}

/* Yläotsikko / breadcrumbs-alue */
.single-post .breadcrumb-title-wrapper {
  margin-bottom: 24px;
}
.single-post .breadcrumb-title-wrapper .page-title { 
  margin: 0 0 6px;
  font-size: 36px; /* Isompi otsikko single-sivulla */
  line-height: 1.2;
  font-weight: 800;
  color: #0f172a;
}
@media (max-width: 768px) {
  .single-post .breadcrumb-title-wrapper .page-title {
    font-size: 28px; /* Pienempi otsikko mobiilissa */
  }
}

/* ======= Artikkelirunko ======= */
.single-post .type-post {
  background: #fff;
}

/* Feature-kuva: täysleveänä otsikon yläpuolelle */
.single-post .type-post .entry-thumb,
.single-post .type-post .post-thumbnail {
  float: none !important;
  width: 100% !important;
  margin: 0 0 14px !important;
  line-height: 0;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .06);
}
.single-post .type-post .entry-thumb img,
.single-post .type-post .post-thumbnail img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Meta-juoksu (kategoria, kirjoittaja, pvm) */
.single-post .type-post .entry-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px; /* Vähennetty hieman */
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 8px;
}
.single-post .type-post .cat-links a {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  text-decoration: none;
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* Otsikko (artikkelin sisällä) */
.single-post .type-post .entry-title {
  font-size: 36px; /* Säilytetään isompi otsikko */
  line-height: 1.2;
  font-weight: 800;
  color: #0f172a;
  margin: 8px 0 14px;
}
@media (max-width: 768px) {
  .single-post .type-post .entry-title {
    font-size: 28px;
  }
}

/* Leipäteksti – luettavuus */
.single-post .type-post .entry-content {
  font-size: 17px;
  line-height: 1.75;
  color: #111827;
  max-width: 820px; /* ettei veny liian leveäksi isoilla näytöillä */
}
.single-post .type-post .entry-content > *:first-child {
  margin-top: 0;
}
.single-post .type-post .entry-content p {
  margin: 0 0 1.1em;
}
.single-post .type-post .entry-content h2 {
  font-size: 28px;
  margin: 1.4em 0 .6em;
}
.single-post .type-post .entry-content h3 {
  font-size: 22px;
  margin: 1.2em 0 .5em;
}
.single-post .type-post .entry-content ul,
.single-post .type-post .entry-content ol {
  padding-left: 1.2em;
  margin: .3em 0 1.1em;
}

/* Kuvien ja figure-elementtien siistiminen */
.single-post .type-post .entry-content img {
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .06);
}
.single-post .type-post .entry-content figure {
  margin: 1.1em 0;
  text-align: center;
}
.single-post .type-post .entry-content figcaption {
  font-size: 13px;
  color: #6b7280;
  margin-top: 6px;
}

/* Blockquote */
.single-post .type-post blockquote {
  margin: 1.2em 0;
  padding: 12px 16px;
  border-left: 4px solid #0f172a;
  background: #f8fafc;
  border-radius: 8px;
  color: #111827;
}

/* Koodiblokit */
.single-post .type-post pre,
.single-post .type-post code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}
.single-post .type-post pre {
  background: #0b1020;
  color: #e6edf3;
  padding: 14px 16px;
  border-radius: 10px;
  overflow: auto;
}
.single-post .type-post code:not(pre code) {
  background: #f1f5f9;
  padding: 2px 6px;
  border-radius: 6px;
}

/* Taulukot responsiiviseksi */
.single-post .type-post .entry-content table {
  width: 100%;
  border-collapse: collapse;
}
.single-post .type-post .entry-content table th,
.single-post .type-post .entry-content table td {
  border: 1px solid #e5e7eb;
  padding: 10px 12px;
}
.single-post .type-post .entry-content .table-wrapper {
  width: 100%;
  overflow-x: auto;
}

/* Edellinen / Seuraava artikkeli */
.single-post .post-navigation {
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  gap: 16px; /* Vähennetty hieman */
  justify-content: space-between;
  flex-wrap: wrap;
}
.single-post .post-navigation a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #e5e7eb;
  color: #111;
  text-decoration: none;
  font-weight: 600;
  transition: background .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.single-post .post-navigation a:hover {
  background: #0f172a;
  color: #fff;
  border-color: #0f172a;
  box-shadow: 0 6px 16px rgba(15, 23, 42, .18);
  transform: translateY(-1px);
}

/* Related posts -grid */
.single-post .related-posts,
.single-post .related {
  margin-top: 40px;
}
.single-post .related-posts h2,
.single-post .related h2 {
  font-size: 20px;
  margin-bottom: 14px;
  font-weight: 800;
  color: #0f172a;
}
.single-post .related-posts .products,
.single-post .related .posts,
.single-post .related .items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px; /* Vähennetty hieman */
}
@media (max-width: 1024px) {
  .single-post .related-posts .products,
  .single-post .related .posts,
  .single-post .related .items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .single-post .related-posts .products,
  .single-post .related .posts,
  .single-post .related .items {
    grid-template-columns: 1fr;
  }
}

/* Kommentit */
.single-post #comments {
  margin-top: 36px;
}
.single-post #comments .comment-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.single-post #comments .comment {
  padding: 14px 0;
  border-bottom: 1px solid #f1f5f9;
}
.single-post #comments .comment-author img {
  border-radius: 999px;
}
.single-post #respond input[type="text"],
.single-post #respond input[type="email"],
.single-post #respond textarea {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 15px;
  margin-bottom: 12px; /* Lisätty väli lomakekenttien alle */
}
.single-post #respond input[type="submit"] {
  background: #0f172a;
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 10px 16px;
  font-weight: 700;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.single-post #respond input[type="submit"]:hover {
  background: #000;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, .18);
}

.single-post #content {
  margin-bottom: 70px;
}

.single-post .related-posts .heading-title {
  font-size: 1.8em;
}


































/* ===========================================================
   Ecomall – Blog Template (page-template .blog-template)
   Ja Archive Template (archive.php tai vastaava)
   Siisti, ilmava ja yhteensopiva myös #right-sidebar-versioon
   =========================================================== */

/* 1) Page container peruslayout */
.page-template .blog-template .page-container, /* Korjattu luokka */
.archive .archive-template .page-container { /* Lisätty archive-luokka */
  max-width: 1260px;
  margin: 0 auto;
  padding: 10px 0px 80px; /* Vähennetty yläpaddingia */
  background: #fff;
  display: flex;       /* Flexbox layout */
  flex-wrap: wrap;     /* Sallii elementtien rivittymisen */
  gap: 20px;           /* Väli elementtien välille */
}

/* 2) Otsikko ylhäällä */
.page-template .blog-template .breadcrumb-title-wrapper, /* Korjattu luokka */
.archive .archive-template .breadcrumb-title-wrapper { /* Lisätty archive-luokka */
  margin-bottom: 24px; /* Pienempi väli kuin single-postissa */
  width: 100%; /* Otsikko vie koko leveyden */
}
.page-template .blog-template .breadcrumb-title-wrapper .page-title, /* Korjattu luokka */
.archive .archive-template .breadcrumb-title-wrapper .page-title { /* Lisätty archive-luokka */
  font-size: 32px;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}

/* 3) Sivupalkki (voi olla #left-sidebar tai #right-sidebar) */
/* Yhdistetty archiven ja blog-templaten sivupalkin tyylit */
.page-template .blog-template #left-sidebar.ts-sidebar, /* Korjattu luokka */
.page-template .blog-template #right-sidebar.ts-sidebar, /* Korjattu luokka */
.archive .archive-template #left-sidebar.ts-sidebar, /* Lisätty archive-luokka */
.archive .archive-template #right-sidebar.ts-sidebar { /* Lisätty archive-luokka */
  flex: 0 0 300px;
  max-width: 320px;
  padding-right: 36px;
  border: 0 !important; /* Poistetaan borderit */
  border-width: 0px 0px 0px 0px !important;
}
@media (max-width: 1024px) {
  .page-template .blog-template #left-sidebar.ts-sidebar, /* Korjattu luokka */
  .page-template .blog-template #right-sidebar.ts-sidebar, /* Korjattu luokka */
  .archive .archive-template #left-sidebar.ts-sidebar, /* Lisätty archive-luokka */
  .archive .archive-template #right-sidebar.ts-sidebar { /* Lisätty archive-luokka */
    flex-basis: 260px;
    padding-right: 28px;
  }
}
@media (max-width: 768px) {
  .page-template .blog-template .page-container, /* Korjattu luokka */
  .archive .archive-template .page-container { /* Lisätty archive-luokka */
    padding: 24px 16px 60px;
    flex-direction: column; /* Asetetaan allekkain */
  }
  .page-template .blog-template #left-sidebar.ts-sidebar, /* Korjattu luokka */
  .page-template .blog-template #right-sidebar.ts-sidebar, /* Korjattu luokka */
  .archive .archive-template #left-sidebar.ts-sidebar, /* Lisätty archive-luokka */
  .archive .archive-template #right-sidebar.ts-sidebar { /* Lisätty archive-luokka */
    flex-basis: auto;
    max-width: 100%;
    width: 100%;
    padding-right: 0;
    margin-bottom: 22px;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 16px;
  }
}

/* 4) Poista turhat viivat ja borderit widgeteistä */
/* Yhdistetty archive ja blog template */
.page-template .blog-template #left-sidebar .widget, /* Korjattu luokka */
.page-template .blog-template #right-sidebar .widget, /* Korjattu luokka */
.archive .archive-template #left-sidebar .widget, /* Lisätty archive-luokka */
.archive .archive-template #right-sidebar .widget, /* Lisätty archive-luokka */
.page-template .blog-template #left-sidebar .widget ul li, /* Korjattu luokka */
.page-template .blog-template #right-sidebar .widget ul li, /* Korjattu luokka */
.archive .archive-template #left-sidebar .widget ul li, /* Lisätty archive-luokka */
.archive .archive-template #right-sidebar .widget ul li, /* Lisätty archive-luokka */
.page-template .blog-template #right-sidebar.ts-sidebar .widget-container, /* Korjattu luokka */
.archive .archive-template #right-sidebar.ts-sidebar .widget-container { /* Poistettu myös widget-containerin borderi */
  border: 0 !important;
}

/* 5) Widget-otsikot ja listat */
/* Yhdistetty archive ja blog template */
.page-template .blog-template #left-sidebar .widgettitle, /* Korjattu luokka */
.page-template .blog-template #right-sidebar .widgettitle, /* Korjattu luokka */
.page-template .blog-template #left-sidebar .widget .widget-title, /* Korjattu luokka */
.page-template .blog-template #right-sidebar .widget .widget-title, /* Korjattu luokka */
.archive .archive-template #left-sidebar .widgettitle, /* Lisätty archive-luokka */
.archive .archive-template #right-sidebar .widgettitle, /* Lisätty archive-luokka */
.archive .archive-template #left-sidebar .widget .widget-title, /* Lisätty archive-luokka */
.archive .archive-template #right-sidebar .widget .widget-title { /* Lisätty archive-luokka */
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 10px;
  color: #111;
  border: 0;
}
.page-template .blog-template #left-sidebar ul, /* Korjattu luokka */
.page-template .blog-template #right-sidebar ul, /* Korjattu luokka */
.archive .archive-template #left-sidebar ul, /* Lisätty archive-luokka */
.archive .archive-template #right-sidebar ul { /* Lisätty archive-luokka */
  list-style: none;
  margin: 0;
  padding: 0;
}
.page-template .blog-template #left-sidebar ul li, /* Korjattu luokka */
.page-template .blog-template #right-sidebar ul li, /* Korjattu luokka */
.archive .archive-template #left-sidebar ul li, /* Lisätty archive-luokka */
.archive .archive-template #right-sidebar ul li { /* Lisätty archive-luokka */
  margin: 4px 0;
}

/* Tähän lisätty kategorioiden välistystä muuttava tyyli */
.page-template .blog-template .widget-container ul li, /* Korjattu luokka */
.archive .archive-template .widget-container ul li { /* Lisätty archive-luokka */
  line-height: 10px; /* Vähennetty välistystä */
}

/* 6) Linkit selkeiksi */
/* Yhdistetty archive ja blog template */
.page-template .blog-template #left-sidebar .widget a, /* Korjattu luokka */
.page-template .blog-template #right-sidebar .widget a, /* Korjattu luokka */
.archive .archive-template #left-sidebar .widget a, /* Lisätty archive-luokka */
.archive .archive-template #right-sidebar .widget a { /* Lisätty archive-luokka */
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #334155;
  text-decoration: none;
  padding: 6px 0;
  border-radius: 6px;
  transition: background .15s ease, color .15s ease;
}
.page-template .blog-template #left-sidebar .widget a:hover, /* Korjattu luokka */
.page-template .blog-template #right-sidebar .widget a:hover, /* Korjattu luokka */
.archive .archive-template #left-sidebar .widget a:hover, /* Lisätty archive-luokka */
.archive .archive-template #right-sidebar .widget a:hover { /* Lisätty archive-luokka */
  background: #f3f4f6;
  color: #000;
}

/* 7) Recent posts pienet thumbit */
/* Yhdistetty archive ja blog template */
.page-template .blog-template #left-sidebar .widget_recent_entries li, /* Korjattu luokka */
.page-template .blog-template #right-sidebar .widget_recent_entries li, /* Korjattu luokka */
.archive .archive-template #left-sidebar .widget_recent_entries li, /* Lisätty archive-luokka */
.archive .archive-template #right-sidebar .widget_recent_entries li { /* Lisätty archive-luokka */
  display: flex;
  align-items: center;
  gap: 10px; /* Pienempi väli */
  padding: 6px 0;
}
.page-template .blog-template #left-sidebar .widget_recent_entries img, /* Korjattu luokka */
.page-template .blog-template #right-sidebar .widget_recent_entries img, /* Korjattu luokka */
.archive .archive-template #left-sidebar .widget_recent_entries img, /* Lisätty archive-luokka */
.archive .archive-template #right-sidebar .widget_recent_entries img { /* Lisätty archive-luokka */
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 6px;
}

/* 8) Postilistat */
.page-template .blog-template .list-posts .hentry, /* Korjattu luokka */
.archive .archive-template .list-posts .hentry { /* Lisätty archive-luokka */
  background: #fff;
  border: 1px solid #e6e9ee;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(16, 24, 40, .06);
  overflow: hidden;
  margin-bottom: 40px; /* Säilytetty */
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.page-template .blog-template .list-posts .hentry:hover, /* Korjattu luokka */
.archive .archive-template .list-posts .hentry:hover { /* Lisätty archive-luokka */
  border-color: #dfe4ea;
  box-shadow: 0 14px 36px rgba(16, 24, 40, .10);
  transform: translateY(-1px);
}

/* 9) Postikuva */
.page-template .blog-template .list-posts .hentry .entry-thumb, /* Korjattu luokka */
.page-template .blog-template .list-posts .hentry .post-thumbnail, /* Korjattu luokka */
.archive .archive-template .list-posts .hentry .entry-thumb, /* Lisätty archive-luokka */
.archive .archive-template .list-posts .hentry .post-thumbnail { /* Lisätty archive-luokka */
  margin: 0 !important;
  line-height: 0;
}
.page-template .blog-template .list-posts .hentry .entry-thumb img, /* Korjattu luokka */
.page-template .blog-template .list-posts .hentry .post-thumbnail img, /* Korjattu luokka */
.archive .archive-template .list-posts .hentry .entry-thumb img, /* Lisätty archive-luokka */
.archive .archive-template .list-posts .hentry .post-thumbnail img { /* Lisätty archive-luokka */
  width: 100%;
  height: auto;
  display: block;
  border-bottom: 1px solid #f1f5f9;
}

/* 10) Postitekstit ja meta */
.page-template .blog-template .list-posts .hentry .entry-content, /* Korjattu luokka */
.page-template .blog-template .list-posts .hentry .entry-summary, /* Korjattu luokka */
.page-template .blog-template .list-posts .hentry .entry-main, /* Korjattu luokka */
.archive .archive-template .list-posts .hentry .entry-content, /* Lisätty archive-luokka */
.archive .archive-template .list-posts .hentry .entry-summary, /* Lisätty archive-luokka */
.archive .archive-template .list-posts .hentry .entry-main { /* Lisätty archive-luokka */
  padding: 18px 22px 24px;
}
.page-template .blog-template .list-posts .hentry .cat-links a, /* Korjattu luokka */
.archive .archive-template .list-posts .hentry .cat-links a { /* Lisätty archive-luokka */
  display: inline-block;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #475569;
  background: #f1f5f9;
  text-decoration: none;
  margin-bottom: 8px;
}
.page-template .blog-template .list-posts .hentry .entry-title, /* Korjattu luokka */
.archive .archive-template .list-posts .hentry .entry-title { /* Lisätty archive-luokka */
  font-size: 24px;
  line-height: 1.3;
  font-weight: 800;
  margin: 6px 0 8px;
}
.page-template .blog-template .list-posts .hentry .entry-title a, /* Korjattu luokka */
.archive .archive-template .list-posts .hentry .entry-title a { /* Lisätty archive-luokka */
  color: #0f172a;
  text-decoration: none;
}
.page-template .blog-template .list-posts .hentry .entry-title a:hover, /* Korjattu luokka */
.archive .archive-template .list-posts .hentry .entry-title a:hover { /* Lisätty archive-luokka */
  text-decoration: underline;
}
.page-template .blog-template .list-posts .hentry .entry-summary p, /* Korjattu luokka */
.archive .archive-template .list-posts .hentry .entry-summary p { /* Lisätty archive-luokka */
  margin: 0 0 10px;
  font-size: 15px;
  color: #374151;
  line-height: 1.55;
}
.page-template .blog-template .list-posts .hentry .entry-meta, /* Korjattu luokka */
.archive .archive-template .list-posts .hentry .entry-meta { /* Lisätty archive-luokka */
  margin-top: 6px;
  font-size: 13px;
  color: #6b7280;
}

/* 11) Lue lisää -linkki */
.page-template .blog-template .list-posts .hentry .more-link, /* Korjattu luokka */
.page-template .blog-template .list-posts .hentry .read-more a, /* Korjattu luokka */
.page-template .blog-template .list-posts .hentry a.read-more, /* Korjattu luokka */
.archive .archive-template .list-posts .hentry .more-link, /* Lisätty archive-luokka */
.archive .archive-template .list-posts .hentry .read-more a, /* Lisätty archive-luokka */
.archive .archive-template .list-posts .hentry a.read-more { /* Lisätty archive-luokka */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 10px;
  background: #0f172a;
  color: #fff !important;
  text-decoration: none;
  font-weight: 600;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  margin-top: 8px;
}
.page-template .blog-template .list-posts .hentry .more-link:hover, /* Korjattu luokka */
.page-template .blog-template .list-posts .hentry .read-more a:hover, /* Korjattu luokka */
.page-template .blog-template .list-posts .hentry a.read-more:hover, /* Korjattu luokka */
.archive .archive-template .list-posts .hentry .more-link:hover, /* Lisätty archive-luokka */
.archive .archive-template .list-posts .hentry .read-more a:hover, /* Lisätty archive-luokka */
.archive .archive-template .list-posts .hentry a.read-more:hover { /* Lisätty archive-luokka */
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, .25);
  background: #000;
}

/* 12) Pagination */
.page-template .blog-template .pagination, /* Korjattu luokka */
.page-template .blog-template .page-numbers, /* Korjattu luokka */
.archive .archive-template .pagination, /* Lisätty archive-luokka */
.archive .archive-template .page-numbers { /* Lisätty archive-luokka */
  margin-top: 36px;
  display: flex;
  gap: 8px; /* Pienempi väli */
  flex-wrap: wrap;
  justify-content: center;
}
.page-template .blog-template .page-numbers a, /* Korjattu luokka */
.page-template .blog-template .page-numbers span, /* Korjattu luokka */
.archive .archive-template .page-numbers a, /* Lisätty archive-luokka */
.archive .archive-template .page-numbers span { /* Lisätty archive-luokka */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  color: #111;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}
.page-template .blog-template .page-numbers .current, /* Korjattu luokka */
.page-template .blog-template .page-numbers a:hover, /* Korjattu luokka */
.archive .archive-template .page-numbers .current, /* Lisätty archive-luokka */
.archive .archive-template .page-numbers a:hover { /* Lisätty archive-luokka */
  background: #0f172a;
  border-color: #0f172a;
  color: #fff;
}

/* 13) Mobiilissa spacing ja borderit */
@media (max-width: 768px) {
  .page-template .blog-template .page-container, /* Korjattu luokka */
  .archive .archive-template .page-container { /* Lisätty archive-luokka */
    padding: 24px 16px 60px;
  }
  .page-template .blog-template #left-sidebar.ts-sidebar, /* Korjattu luokka */
  .page-template .blog-template #right-sidebar.ts-sidebar, /* Korjattu luokka */
  .archive .archive-template #left-sidebar.ts-sidebar, /* Lisätty archive-luokka */
  .archive .archive-template #right-sidebar.ts-sidebar { /* Lisätty archive-luokka */
    padding-right: 0;
    margin-bottom: 24px;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 16px;
  }
  .page-template .blog-template .list-posts .hentry, /* Korjattu luokka */
  .archive .archive-template .list-posts .hentry { /* Lisätty archive-luokka */
    margin-bottom: 28px;
  }
}

/* -----------------------------------------------------------------------------
   TABLETTI: Rajat ja asettelut (Oikea sivupalkki)
   ----------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  /* Nämä tyylit kohdistuvat oikeaan sivupalkkiin ja koskevat vain tabletti-kokoluokkaa */
  .page-template.blog-template #right-sidebar,
  .page-template .blog-template #right-sidebar.ts-sidebar, /* Korjattu luokka */
  .single .container-post #right-sidebar,
  .archive .archive-template #right-sidebar, /* Lisätty archive-luokka */
  .archive .archive-template #right-sidebar.ts-sidebar { /* Lisätty archive-luokka */
    max-width: 100% !important;
    width: 100% !important;
    flex-basis: 100% !important;
    /* Tässä voit lisätä haluamasi border-tyylit tabletti-versioon */
    /* Esimerkiksi: */
    /* border-top: 1px solid #e0e0e0; */
    /* border-bottom: 1px solid #e0e0e0; */
    /* padding-top: 20px; */
    /* padding-bottom: 20px; */
    /* margin-top: 20px; */
    /* margin-bottom: 20px; */
  }
  /* Jos haluat rajata yksittäisiä widgettejä tablettina */
  .page-template .blog-template #right-sidebar.ts-sidebar .widget-container, /* Korjattu luokka */
  .archive .archive-template #right-sidebar.ts-sidebar .widget-container { /* Lisätty archive-luokka */
     /* border: 1px solid #d1d5db; */ /* Poistettu kommentti, jos haluat lisätä */
     /* border-radius: 10px; */
     /* padding: 15px; */
     /* margin-bottom: 15px; */
  }
  .page-template .blog-template #right-sidebar.ts-sidebar .widget-container:last-child, /* Korjattu luokka */
  .archive .archive-template #right-sidebar.ts-sidebar .widget-container:last-child { /* Lisätty archive-luokka */
     /* margin-bottom: 0; */
  }
}

/* -----------------------------------------------------------------------------
   PUHELIN: Rajat ja asettelut (Oikea sivupalkki)
   ----------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Nämä tyylit kohdistuvat oikeaan sivupalkkiin ja koskevat vain puhelin-kokoluokkaa */
  .page-template.blog-template #right-sidebar,
  .page-template .blog-template #right-sidebar.ts-sidebar, /* Korjattu luokka */
  .single .container-post #right-sidebar,
  .archive .archive-template #right-sidebar, /* Lisätty archive-luokka */
  .archive .archive-template #right-sidebar.ts-sidebar { /* Lisätty archive-luokka */
    max-width: 100%;
    width: 100%;
    /* Tässä voit lisätä haluamasi borderi-tyylit puhelin-versioon */
    border-top: 1px solid #e0e0e0; /* Raja yläreunaan */
    border-bottom: 1px solid #e0e0e0; /* Raja alareunaan */
    padding-top: 20px;
    padding-bottom: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: #f9fafb; /* Kevyt taustaväri erottamaan sivupalkin */
  }

  /* Widgetien rajat mobiilissa */
  .page-template .blog-template #right-sidebar.ts-sidebar .widget-container, /* Korjattu luokka */
  .archive .archive-template #right-sidebar.ts-sidebar .widget-container { /* Lisätty archive-luokka */
    display: block !important; /* Pakota block-asetus */
    width: 100% !important;
    margin-bottom: 0px;
    border: 1px solid #d1d5db; /* Borderi jokaiselle widgetille */
    border-radius: 10px;
    padding: 15px;
  }
  .page-template .blog-template #right-sidebar.ts-sidebar .widget-container:last-child, /* Korjattu luokka */
  .archive .archive-template #right-sidebar.ts-sidebar .widget-container:last-child { /* Lisätty archive-luokka */
    margin-bottom: 0; /* Poistetaan viimeisen widgetin marginaali */
  }
  
    /* Widgetien rajat mobiilissa */
  .page-template .blog-template #right-sidebar.ts-sidebar .widget_categories .widget-title, /* Korjattu luokka */
  .archive .archive-template #right-sidebar.ts-sidebar .widget_categories .widget-title{ /* Lisätty archive-luokka */
    margin-bottom: 15px;
  }
  
}  
   
  
 

 


/* Blogi / Ajankohtaista – kiinteä thumbnail-korkeus + contain */
.page-template-blog-template .list-posts .thumbnail figure,
.archive .list-posts .thumbnail figure,
.category .list-posts .thumbnail figure {
  height: 480px;           /* <-- Aseta selkeä korkeus (esim. 180–240px) */
  max-height: 480px; 
  display: flex; 
  align-items: center;
  justify-content: center;
  overflow: hidden;        /* varmuuden vuoksi */
  background: #fff;        /* valinnainen tausta, jos kuva ei täytä koko alaa */
} 

/* Kuva näkyy aina kokonaan */
.page-template-blog-template .list-posts .thumbnail figure img,
.archive .list-posts .thumbnail figure img,
.category .list-posts .thumbnail figure img {
  width: 100% !important;    /* voittaa teeman img {width:100%} yms. */
  height: 100% !important;   /* tärkeä: jotta object-fit toimii molempiin suuntiin */
  object-fit: contain;       /* koko kuva näkyy */
  object-position: center;   /* keskitys */
  display: block;
}

/* Mobiilissa pienempi korkeus */
@media (max-width: 768px) {
  .page-template-blog-template .list-posts .thumbnail figure,
  .archive .thumbnail figure,
  .category .thumbnail figure {
    height: 150px;
    max-height: 150px;
  } 
}

 





/* =========================
   Single artikkeli – selkeä typografia
   ========================= */

/* Perusasetukset artikkelitekstille */
.single-post .entry-content {
  font-size: 17px;
  line-height: 1.7;
  color: #0f172a;
}

/* Kappaleiden väli */
.single-post .entry-content p {
  margin: 0 0 18px;
}

/* Otsikoiden hierarkia + spacing */
.single-post .entry-content h1,
.single-post .entry-content h2,
.single-post .entry-content h3,
.single-post .entry-content h4,
.single-post .entry-content h5,
.single-post .entry-content h6 {
  line-height: 1.3;
  font-weight: 800;
  color: #0b1220;
  margin: 28px 0 12px;
}

.single-post .entry-content h2 { font-size: clamp(22px, 3vw, 28px); }
.single-post .entry-content h3 { font-size: clamp(19px, 2.4vw, 24px); }
.single-post .entry-content h4 { font-size: clamp(17px, 2vw, 20px); }

/* Ensimmäinen otsikko ei tarvitse isoa yläväliä */
.single-post .entry-content > h2:first-child,
.single-post .entry-content > h3:first-child,
.single-post .entry-content > h4:first-child {
  margin-top: 0;
}

/* Listat: sisennys ja riviväli siistiksi */
.single-post .entry-content ul,
.single-post .entry-content ol {
  margin: 0 0 18px 1.25em;
  padding: 0;
}
.single-post .entry-content li { margin: 6px 0; }
.single-post .entry-content ul { list-style: disc; }
.single-post .entry-content ol { list-style: decimal; }

/* Lainaukset */
.single-post .entry-content blockquote {
  margin: 22px 0;
  padding: 14px 16px;
  border-left: 4px solid #3b82f6;
  background: #f8fafc;
  color: #111827;
}
.single-post .entry-content blockquote p:last-child { margin-bottom: 0; }

/* Linkit */
.single-post .entry-content a {
  text-underline-offset: 2px;
} 
.single-post .entry-content a:hover { color: #0846a3; }

/* Kuvien/figure-välit */
.single-post .entry-content figure,
.single-post .entry-content img {
  margin: 18px 0;
  height: auto;
}

/* Väli ennen ja jälkeen HR */
.single-post .entry-content hr {
  margin: 28px 0;
  border: 0;
  border-top: 1px solid #e5e7eb;
}

/* Koodilohkot ja monospace */
.single-post .entry-content code,
.single-post .entry-content pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
.single-post .entry-content pre {
  background: #0f172a;
  color: #e5e7eb;
  padding: 14px 16px;
  border-radius: 8px;
  overflow: auto;
  margin: 18px 0;
}

/* Elementor Text Editorin sisällä – varmista sama spacing */
.single-post .elementor .elementor-widget-text-editor p { margin: 0 0 18px; }
.single-post .elementor .elementor-widget-text-editor h2,
.single-post .elementor .elementor-widget-text-editor h3,
.single-post .elementor .elementor-widget-text-editor h4 {
  margin: 28px 0 12px;
  line-height: 1.3;
  font-weight: 800;
}




 











   
  
  
  

  
  
  
  
  
  
  
  
  
  
 
 
 
 
a.add_to_cart_button.elementor-button,
a.product_type_simple.add_to_cart_button {
  background-color: #f2f2f2;         /* vaaleanharmaa tausta */
  color: #000;                       /* musta teksti ja ikonit */
  border: 0px !important;
  border-color: transparent !important;
  border-radius: 8px;                /* voit säätää kulmien pyöristystä */
  padding: 10px 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  transition: all 0.15s ease;
}

a.add_to_cart_button.elementor-button .elementor-button-icon,
a.product_type_simple.add_to_cart_button .elementor-button-icon {
	border: 0px !important;
	border-color: transparent !important;
	
}

/* Ikoni mustaksi normaalitilassa */
a.add_to_cart_button.elementor-button svg path,
a.product_type_simple.add_to_cart_button svg path {
  fill: #000 !important;
  transition: fill 0.15s ease;
}

/* Hover-tila: tausta musta, teksti ja ikoni valkoiseksi */
a.add_to_cart_button.elementor-button:hover,
a.product_type_simple.add_to_cart_button:hover {
  background-color: #000 !important; 
  color: #fff !important;
}

a.add_to_cart_button.elementor-button:hover svg path,
a.product_type_simple.add_to_cart_button:hover svg path {
  fill: #fff !important;
}

 
 
 
 
 
.elementor-element .cart-count {
  font-size: 10px !important;
  line-height: 1.2 !important;
} 
 
 
 
 
 
 
 
 
 
 
 
 
  
/* ============ Vertical Categories – card look (light, click-safe) ============ */
.johe-vertmenu{
  --vm-z: 2000;          /* erittäin korkea z-index */
  --vm-radius: 14px;
  --vm-header-bg: #020202;
  --vm-header-text: #e9eef7;
  --vm-card-bg: #ffffff;
  --vm-card-border: #e6e9ee;
  --vm-item-text: #1f2937;
  --vm-item-hover: #f2f4f8;
  --vm-chevron: #9aa3af; 
  --vm-shadow: 0 18px 48px rgba(20,24,30,.16);

  position: relative;
  z-index: var(--vm-z);        /* koko komponentti omalle tasolleen */
  isolation: isolate;          /* tee oma stacking-context */
  width: 320px; max-width: 100%;
  font-size: 14px;
}

/* Header / toggle */
.johe-vertmenu__toggle{
  position: relative; z-index: 1;  /* jää varmasti paneelin alle kun paneeli auki */
  display:flex; align-items:center; gap:.6rem; width:100%;
  padding: 10px 15px;
  background: var(--vm-header-bg); color: var(--vm-header-text);
  border: 1px solid var(--vm-header-bg);
  border-bottom: none;
  border-top-left-radius: var(--vm-radius);
  border-top-right-radius: var(--vm-radius);
  cursor:pointer; line-height:1; min-height:46px;
}
.johe-vertmenu__toggle:focus-visible{ outline:1px solid #fff; outline-offset:2px; }
.johe-vertmenu__icon{ width:18px;height:2px;display:inline-block;box-shadow:0 6px 0 0 currentColor,0 -6px 0 0 currentColor;background:currentColor}
.johe-vertmenu__title{ font-weight:700; }
.johe-vertmenu__chev{ 
  margin-left:auto; width:.55rem; height:.55rem;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg); opacity:.9;
}

/* Paneeli / kortti */
.johe-vertmenu__panel{
  display:none; position:absolute; left:0; top:calc(100% - 0px);
  width:100%;
  background:var(--vm-card-bg); color:var(--vm-item-text);
  border:1px solid var(--vm-card-border);
  border-bottom-left-radius: var(--vm-radius);
  border-bottom-right-radius: var(--vm-radius);
  box-shadow: var(--vm-shadow);
  overflow: visible;               /* älä leikkaa alavalikkoja */
  z-index: calc(var(--vm-z) + 1);  /* paneeli togglea korkeammalle */
  pointer-events: auto;            /* varmistetaan klikattavuus */
}
.johe-vertmenu.is-open .johe-vertmenu__panel,
.johe-vertmenu.hover-open:hover .johe-vertmenu__panel{
  display:block;
}

/* Jos ympärillä on Elementor-section tms., pidä kaikki näkyvissä */
.johe-vertmenu,
.johe-vertmenu *{
  pointer-events: auto;           /* kumoa mahdolliset pointer-events:none -overlayt */
}
.elementor .johe-vertmenu__panel{ z-index: calc(var(--vm-z) + 2); } /* varmuuskerros */

.johe-vertmenu__nav{ max-height: 70vh; overflow: auto; }
.johe-vertmenu__list{ list-style: none; margin: 0; padding: 5px; }

/* Rivit */
.johe-vertmenu__list > li{ list-style:none; }
.johe-vertmenu__list > li > a{
  display:flex; align-items:center; gap: 0px;
  padding: 0px 10px;
  border-radius: 10px; 
  text-decoration:none;
  color:var(--vm-item-text);
  position:relative;
}
.johe-vertmenu__list > li > a:hover,
.johe-vertmenu__list > li > a:focus-visible{
  background: var(--vm-item-hover);
  outline: none;
}

/* Ikonipaikka (valinnainen) */
.johe-vertmenu__list > li > a .cat-ico{
  width:20px; height:20px; display:inline-block; opacity:.8;
}

/* Chevron vain niille, joilla on alavalikko */
.johe-vertmenu__list > li.menu-item-has-children > a::after{
  content:""; position:absolute; right:14px; top:50%; transform:translateY(-50%) rotate(-45deg);
  width:.45rem; height:.45rem; border-right:1px solid var(--vm-chevron); border-bottom:1px solid var(--vm-chevron);
}

/* Alavalikko alle */
.johe-vertmenu__list li .sub-menu{
  list-style:none; margin:0;
  padding: 6px 0 6px 44px;          /* fiksu sisennys (ei 200px) */
  display:none;
  position: relative;
  z-index: calc(var(--vm-z) + 3);   /* yli kaiken muun */
}
.johe-vertmenu__list li.is-open > .sub-menu{ display:block; }   /* mobiili */
.johe-vertmenu__list li:hover > .sub-menu{ display:block; }      /* desktop hover */

.johe-vertmenu__list .sub-menu > li > a{
  display:block; padding:8px 14px; border-radius:8px; color:var(--vm-item-text);
}
.johe-vertmenu__list .sub-menu > li > a:hover,
.johe-vertmenu__list .sub-menu > li > a:focus-visible{
  background: var(--vm-item-hover);
}

.johe-vertmenu__toggle {
  transition: border-color 0.2s ease, color 0.2s ease;
}

/* Hover & focus: valkoinen reunus, teksti pysyy valkoisena */
.johe-vertmenu__toggle:hover,
.johe-vertmenu__toggle:focus-visible {
  border-color: transparent !important;
  color: #fff !important;
  background-color: #111 !important; /* kevyt tummennus */
}





/* Mobiili */
@media (max-width: 1024px){
  .johe-vertmenu{ width:100%; }
  .johe-vertmenu__panel{
    position:static; width:100%; box-shadow:none; border-radius:0 0 var(--vm-radius) var(--vm-radius);
  }
}








 
 




/* =========================
   Mobile hamburger + panel (clean)
   ========================= */

/* Nappi */
.mnav .mnav-toggle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;            /* ankkuri viivoille */
  width: 35px;
  height: 35px;
  border-radius: 999px;
  background: #000 !important;   /* teemojen yli */
  color: #fff;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
  overflow: visible;              /* älä leikkaa viivoja */
  z-index: 10000;                 /* napin yli kaiken */
  box-sizing: border-box;
  cursor: pointer;
}

/* SR-only label */
.mnav .mnav-label{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Poista teeman ikonikerrokset napista (yksi paikka riittää) */
.mnav .mnav-toggle::before,
.mnav .mnav-toggle::after,
.mnav .mnav-toggle i,
.mnav .mnav-toggle svg,
.mnav .mnav-toggle .elementor-icon,
.mnav .mnav-toggle .ts-icon,
.mnav .mnav-toggle [class*="icon"],
.mnav .mnav-toggle [class*="fa-"],
.mnav .mnav-toggle [class*="ti-"]{
  display: none !important;
  content: none !important;
}

/* Kolme viivaa: absolute + keskitys */
.mnav .mnav-toggle .mnav-bun{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  display: block;
  opacity: 1;
  pointer-events: none;
  box-shadow: none;
  filter: none;
}

/* Sijoittelu 48px napissa */
.mnav .mnav-toggle .mnav-bun:nth-of-type(1){ top: 10px; }
.mnav .mnav-toggle .mnav-bun:nth-of-type(2){ top: 16px; }
.mnav .mnav-toggle .mnav-bun:nth-of-type(3){ top: 22px; }

/* Risti-animointi */
.mnav.is-open .mnav-bun:nth-of-type(1){ transform: translateX(-50%) translateY(6px) rotate(45deg); }
.mnav.is-open .mnav-bun:nth-of-type(2){ opacity: 0; visibility: hidden; }
.mnav.is-open .mnav-bun:nth-of-type(3){ transform: translateX(-50%) translateY(-6px) rotate(-45deg); }

/* Varmista ettei bunien päälle piirretä pseudoja */
.mnav .mnav-bun::before,
.mnav .mnav-bun::after{ content: none !important; }

/* ===========================
   Paneeli – koko näytön leveys (fixed)
   top asetetaan JS:llä
   =========================== */
.mnav-panel{
  display: none;        /* JS näyttää .is-open -luokalla */
  position: fixed;
  left: 0; 
  right: 0;
  width: 100vw;
  max-width: none;

  background: #0f0f10;
  color: #e9eef7;
  border-top: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 22px 48px rgba(0,0,0,.45);
  padding: 18px 16px 24px;

  max-height: 78vh;
  overflow-y: auto;

  border-radius: 0 0 14px 14px;
  z-index: 20000;       /* paneeli napin yläpuolelle */
  box-sizing: border-box;
}

/* Auki-tila */
.mnav.is-open .mnav-panel{ display: block; }

/* Taustalukko */
body.mnav-open{ overflow: hidden; }

/* Osio + otsikko */
.mnav-section{ margin-top: 10px; }
.mnav-section + .mnav-section{
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.mnav-heading{
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #aab2bd;
  margin: 6px 2px 8px;
}

/* Linkkilista reset */
.mnav .mnav-ul,
.mnav .mnav-ul li{
  list-style: none !important;
  margin: 0;
  padding: 0;
}
.mnav .mnav-ul li::marker{ content: none; }

.mnav-ul > li > a{
  display: block;
  padding: 8px 10px;
  color: #e9eef7;
  text-decoration: none;
  border-radius: 8px;
}
.mnav-ul > li > a:hover{ background: rgba(255,255,255,.06); }

/* Alavalikko (accordion) */
.mnav-ul li.menu-item-has-children{ position: relative; }
.mnav-ul li.menu-item-has-children > .mnav-caret{
  position: absolute; right: 6px; top: 6px;
  padding: 8px; border: 0; background: transparent;
  color: #c9d0d8; cursor: pointer;
}
.mnav-ul li.menu-item-has-children > .mnav-caret:after{
  content:""; display:block; width:.5rem; height:.5rem;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform: rotate(45deg); transition: transform .15s ease;
}
.mnav-ul li.is-open > .mnav-caret:after{ transform: rotate(-135deg); }

.mnav-ul li .sub-menu{
  display: none;
  list-style: none !important;
  margin: 4px 0 6px 0;
  padding-left: 8px;
  border-left: 1px dashed rgba(255,255,255,.12);
}
.mnav-ul li.is-open > .sub-menu{ display: block; }
.mnav-ul li .sub-menu a{ padding: 6px 10px; font-size: 15px; }

/* Näytä vain mobiilissa */
@media (min-width: 1025px){
  .mnav{ display: none; }
}
@media (max-width: 768px){
  .mnav-panel{ border-radius: 0 0 16px 16px; }
}

















 

/* ===== Horizontal top level + dropdown (for class=is-row) ===== */
.vstack.is-row { width: 100%; position: relative; z-index: 2000; font-size: 12px; line-height: 1.2; }
.vstack.is-row .vstack__nav { width: 100%; }

/* Reset: poista marginaalit ja pallurat */
.vstack.is-row .vstack__list,
.vstack.is-row .vstack__list ul {
  margin: 0;
  padding: 0;
  list-style: none !important;
}

/* Ylätaso vierekkäin ja keskitettynä */
.vstack.is-row .vstack__list {
  display: flex;
  gap: 3px;
  align-items: center; 
}

.vstack.is-row .vstack__list > li { 
  position: relative;
  list-style: none !important;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

/* Ylätason linkit: padding 8/15, hover musta + valkoinen teksti */
.vstack.is-row .vstack__list > li > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 5px 10px;
  color: #e5e7eb;
  text-decoration: none;
  background: transparent;
  border-radius: 5px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.vstack.is-row .vstack__list > li > a:hover,
.vstack.is-row .vstack__list > li > a:focus-visible {
  background: #000;
  color: #fff; 
  outline: none;
  border-radius: 5px;
}

.vstack.is-row .vstack__list > li.current-menu-item {
	background: #000;
	border-radius: 5px;
} 

/* Caret oikealle, vertikaalisesti keskellä */
.vstack.is-row .vstack__caret {
  margin-left: 0.4rem;
  width: 0.5rem;
  height: 0.5rem;
  flex: 0 0 auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  display: inline-block;
  vertical-align: middle;
  align-self: center;
}

/* Dropdown alas */
.vstack.is-row .vstack__list > li > .sub-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  min-width: 220px;
  background: #000;
  color: #fff;
  border: 1px solid #111;
  border-radius: 10px;
  padding: 5px 0;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
  z-index: 2000; 
  display: none;
}

.vstack.is-row .vstack__list > li:hover > .sub-menu,
.vstack.is-row .vstack__list > li.is-open > .sub-menu {
  display: block;
}

/* Alavalikon rivit */
.vstack.is-row .sub-menu > li {
  margin: 0;
  padding: 0;
  list-style: none !important;
}

.vstack.is-row .sub-menu > li > a {
  display: block;
  padding: 5px 12px;
  color: #fff;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.vstack.is-row .sub-menu > li > a:hover,
.vstack.is-row .sub-menu > li > a:focus-visible {
  background: rgba(255, 255, 255, 0.08);
}

/* Kolmas taso – rivitetään alle (ei flyout) */
.vstack.is-row .sub-menu .sub-menu {
  position: static;
  border: 0;
  box-shadow: none;
  padding-left: 10px; 
}

/* Fonttikoko ja linjakorkeus varmistavat keskityksen */
.vstack.is-row,
.vstack.is-row .vstack__list > li > a {
  font-size: 14px;
  line-height: 1.2;
}








/* =========================================
   Footerin navit: aina auki mobiilissa
   (Elementor Nav Menu widget)
   ========================================= */
@media (max-width: 768px){
  /* 1) Näytä desktop/main-versio myös mobiilissa */
  .elementor-location-footer .elementor-nav-menu--main{
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    pointer-events: auto !important;           /* ohita e--pointer-none */
  }

  /* 2) Piilota mobiilidropdown + burger-nappi */
  .elementor-location-footer .elementor-nav-menu--dropdown,
  .elementor-location-footer .elementor-menu-toggle{
    display: none !important;
  }

  /* 3) Tee listasta pystysuuntainen ja ilmava */
  .elementor-location-footer .elementor-nav-menu--main .elementor-nav-menu{
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }

  /* 4) Linkkien “hit area” ja väri (säädä halutuksi) */
  .elementor-location-footer .elementor-nav-menu a{
    padding: 6px 0;
    color: #fff;                  /* jos footer on tumma */
    text-decoration: none;
  }
  .elementor-location-footer .elementor-nav-menu a:hover{
    text-decoration: underline;
  }
}






 



/* ============================
   SHOP & KATEGORIAT – 2/rivi mobiilissa (ei koske Swiperiä)
   ============================ */
@media (max-width: 768px){
  /* Rajataan vain varsinaisiin listakontteihin (UL tai DIV),
     ei osuta SECTION.related/upsells/cross-sells -konteihin */
  .woocommerce :is(ul.products, div.products):not(.swiper),
  .woocommerce-page :is(ul.products, div.products):not(.swiper){
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .woocommerce :is(ul.products, div.products):not(.swiper) .product,
  .woocommerce-page :is(ul.products, div.products):not(.swiper) .product{
    width: auto;
    float: none;
    margin: 0;
  }

  /* Varmista: related/upsells/cross-sells -SECTIONit eivät muutu gridiksi */
  section.related.products,
  section.upsells.products,
  section.cross-sells.products{
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
  }
}

@media (max-width: 430px){
  .woocommerce :is(ul.products, div.products):not(.swiper),
  .woocommerce-page :is(ul.products, div.products):not(.swiper){
    grid-template-columns: 1fr;
  }
}

/* ============================
   SWIPER-tuotesliderit – 2/rivi mobiilissa (wrap, ei liukua)
   ============================ */
@media (max-width: 768px){
  /* Suojakaide: container EI ole grid */
  .woocommerce .products.swiper,
  .woocommerce-page .products.swiper{
    display: block !important;
  }

  /* Rivittele kortit kahteen */
  .woocommerce .products.swiper .swiper-wrapper,
  .woocommerce-page .products.swiper .swiper-wrapper{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    transform: none !important;   /* poista liuku */
    width: 100% !important;
  }

  .woocommerce .products.swiper .swiper-slide,
  .woocommerce-page .products.swiper .swiper-slide{
    box-sizing: border-box;
    flex: 0 0 calc(50% - 6px) !important;
    width: calc(50% - 6px) !important;
    margin: 0 !important;
  }

  /* Piilota nuolinapit kun ei liu’uteta */
  .woocommerce .products.swiper .swiper-button-prev,
  .woocommerce .products.swiper .swiper-button-next{
    display: none !important;
  }
}

@media (max-width: 430px){
  .woocommerce .products.swiper .swiper-slide,
  .woocommerce-page .products.swiper .swiper-slide{
    flex: 0 0 100% !important;
    width: 100% !important;
  }
}







.mas-pagination-horizontal .swiper-pagination .swiper-pagination-bullet-active {
    background-color: #222 !important;
	box-shadow: 0px 0px 0px 4px #222 inset !important;
    opacity: 1 !important; 
}

.mas-pagination-horizontal .swiper-pagination .swiper-pagination-bullet {
    box-shadow: 0px 0px 0px 4px #4b4b4b inset;
    background-color: #59595900 !important;
    opacity: 0.38 !important;
}
 

.elementor-4093 .elementor-element.elementor-element-53e2ff7 + .swiper-pagination.mas-pagination-horizontal .swiper-pagination-bullet {
    margin-right: 5px !important;
}
.elementor-4093 .elementor-element.elementor-element-53e2ff7 + .swiper-pagination .swiper-pagination-bullet-active {
    width: 25% !important;
    height: 4px !important;
    border-style: none;
    border-radius: 12px 12px 12px 12px;
    background-color: #1F1F1F !important;
    opacity: 1 !important;
}
.elementor-4093 .elementor-element.elementor-element-53e2ff7 + .swiper-pagination .swiper-pagination-bullet {
    box-shadow: 0px 0px 0px 4px #2b2b2b inset;
    width: 25% !important;
    height: 4px !important;
    border-style: none;
    margin: 0px 0px 0px 0px;
    border-radius: 12px 12px 12px 12px;
    background-color: #5f5f5f !important; 
    opacity: 0.38 !important;
} 

body:not(.rtl) .elementor-4093 .elementor-element.elementor-element-53e2ff7 + .swiper-pagination {
    left: 0% !important;
}

.elementor-4093 .elementor-element.elementor-element-53e2ff7 + .swiper-pagination.swiper-pagination-bullets {
    top: 85% !important;
}
.elementor-4093 .elementor-element.elementor-element-53e2ff7 + .swiper-pagination {
    width: 60%;
    z-index: 9999;
}
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: 10px;
    left: 0;
    width: 100%;
}



 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 /* Desktop – käytä oletusta (esim. 5 per rivi) */
.home .ts-product-wrapper .products {
  display: grid; 
}

/* Tablet (max-width 1024px) – 3 per rivi */
@media (max-width: 1024px) {
  .home .ts-product-wrapper .products {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* Puhelin (max-width 600px) – 2 per rivi */
@media (max-width: 600px) {
  .home .ts-product-wrapper .products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}