/*Product Category*/

.tuotekategoria-grid {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.tuotekategoria-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
	display: grid;
  grid-template-columns: repeat(1,minmax(0,1fr));
}
.tuotekategoria-column:nth-child(2) {
  /*transform: translateY(var(--s-150));*/
	padding-top:var(--s-150)
}
a.tuotekategoria-item{display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  text-decoration: none;
  color: var(--primary);
  background: transparent;
	border:1px solid #B2C1D1;
  border-radius: 12px;
  padding: var(--s-70) var(--s-30) var(--s-30);
	min-height:670px;
	min-height: clamp(460px, 50vw, 700px);
  overflow: hidden;
  transition: background 0.35s ease, color 0.35s ease;
}
a.tuotekategoria-item:hover, a.tuotekategoria-item:focus-visible {
  background: var(--primary);
  color: var(--white);
 }
.tuotekategoria-image{align-items: flex-start;
  justify-content: center;
  width: 100%;
  /*height: 100%;*/
  display: flex;
  position: absolute;
  top: var(--s-70);
  left: 0px;
  overflow: hidden;}
.tuotekategoria-title{ font-size:var(--h2)}


.tuotekategoria-image img {
  display: block;
  width: 70%;
  height: auto;
  object-fit: contain;
}

/*Product listing*/
.tuotekategoria-wrapper{padding-left: var(--grid-margin);  padding-right: var(--grid-margin);}
.tuotekategoria-hero {margin-left: auto;
  margin-right: auto;
  max-width: var(--gb-container-width);
  width: 100%;
	padding-top: var(--s-200);
	padding-bottom: var(--s-150);
}

.tuotekategoria-container {   

    display: grid;
	grid-template-columns: repeat(2,minmax(0,1fr));
}

.tuotekategoria-left {
	padding:0px var(--s-100) var(--s-100) 0px
   
}

.tuotekategoria-left img {

    width: 100%;
   /* max-width: 450px;
    height: auto;
    display: block;
    margin: auto;*/
}

.tuotekategoria-right{ display:flex; gap: var(--s-30); flex-direction:column}

.tuotekategoria-breadcrumb {

    font-family: var(--gp-font--instrument-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 100%;
  text-transform: uppercase;
}

.tuotekategoria-breadcrumb a {

    text-decoration: none;
}

.tuotekategoria-right h1 {

    /*font-size: 72px;

    line-height: .9;

    margin-bottom: 35px;*/
}

.tuotekategoria-description {

    max-width: 560px;
  font-weight: 500;
  padding-top: var(--s-30);
}
.tuotekategoria-description p:first-child{ font-size:20px}
.tuotekategoria-description p{padding-bottom: var(--s-30); font-size:16px}

.cursor-light {
            position: absolute;
            top: 0;
            left: 0;
            width: 80%;
            height: 70%;
            border-radius: 50%;
            background: #ffffff;
            filter: blur(400px);
            transform: translate(-50%, -50%);
            opacity: 0;
            pointer-events: none;
            z-index: 2;
            mix-blend-mode: screen;
            transition: opacity 0.35s ease;
        }

/* Container */

/*body { font-family: 'Inter Tight', sans-serif; }*/
.tab-content { display: none; opacity: 0; transition: opacity 0.3s ease; }
.tab-content.active { display: block; opacity: 1; }
.product-header-sec { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin-left: auto;
  margin-right: auto;
  max-width: var(--gb-container-width);
  width: 100%; }
.product-gallery { /*max-width: 600px; */ position:relative;}
.product-gallery:before{ content: '';
  width: 50vw;
  height: calc(100% + 120px);
  background: var(--white);
  position: absolute;
  right: 0px;
  top: 0px;
  margin-top: -120px;}

/*.tab-btn.active { border-bottom: 2px solid #000; font-weight: bold; }*/
/* Main Slider Image */
.main-slider{display: flex !important;
  justify-content: center;
  align-items: center; padding: var(--s-250) 0px;}
.main-slider .slide-item{text-align: center;}
.main-slider .slide-item img { 
  
    object-fit: cover; 
  
	width: auto;
  display: inline-block;
  max-height: 370px;
  height: clamp(220px, 25vw, 370px);
  max-width: inherit !important;
}
button.slick-arrow{width: 50px;
  height: 50px;
	flex-shrink: 0; 
  background: transparent;
  border-radius: 100%;
  border: 1px solid var(--primary);
  padding: 0px;
  display: flex;
  justify-content: center;
  align-items: center;}

/* Thumbnail Slider */
.thumb-slider .slick-list {padding:20px 0px !important}
.thumb-slider .slick-slide{border-radius: 8px;
  background: var(--white);
  box-shadow: 0 8px 24px 0 rgba(149, 157, 165, 0.20); margin:10px; border: 2px solid transparent; padding:5px 0px}
.thumb-slider { margin-top: 15px; }
.thumb-item { 
   
    cursor: pointer; 
    outline: none; 
}
.thumb-item img { 
    width: 100%; 
    height: 100px; 
    object-fit: contain; 
 
    opacity: 0.5; 
    transition: 0.3s;
}

/* Active Thumbnail Highlight */
.thumb-slider .slick-slide.slick-current{ border: 2px solid var(--primary); }
.thumb-slider .slick-current img { 
    opacity: 1; 
   
}
/* General Page Layout */
.product-container {
    padding-left: var(--grid-margin);
  padding-right: var(--grid-margin);
}
.product-container p{ font-size:16px; padding-bottom:var(--s-25)}
.product-container ul li{font-size:16px; font-weight:500}
.product-container h3{font-family: var(--gp-font--inter-tight);padding-bottom:var(--s-25)}

.product-header-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    margin-bottom: 50px;
}
.product-details-sec{margin-left: auto;
  margin-right: auto;
  max-width: 1150px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--s-150);
  padding-top: var(--s-200);}
.members-section ul{ padding-top:var(--s-20)}
.members-section ul li{ position:relative; padding:0px 0px var(--s-30) 22px;}
.members-section ul li:before{ position: absolute;
  left: 7px;
  top: 12px;
  width: 5px;
  height: 5px;
  border-radius: 100%;
  content: '';
  background: currentcolor;}

/* Gallery Styling */
.product-gallery { width: 100%; padding-right:var(--s-30) }
.slider-for img { width: 100%; height: auto; border-radius: 8px; }
.slider-nav { margin-top: 15px; cursor: pointer; }
.slider-nav img { padding: 0 5px; opacity: 0.6; }
.slider-nav .slick-current img { opacity: 1; border: 2px solid #000; }

/* Details Styling */
.product-details{ padding:var(--s-100) 0px var(--s-150) var(--s-100); display: flex;
  flex-direction: column;
  gap: var(--s-80);}
.product-details-intro{display: flex;
  flex-direction: column;
  gap: var(--s-10);}
.lb-breadcrumb, .product-details .sku{font-family: var(--gp-font--instrument-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 100%; line-height:140%;
  text-transform: uppercase; color:var(--primary); margin-bottom:0px !important; padding-bottom:0px !important}
.product-details .sku{}

.product-details h1 { font-size: var(--h2); padding-bottom: var(--s-40); }
.product-details h2{font-family: var(--gp-font--inter-tight); font-size:18px; font-weight:600; text-transform:inherit; padding-bottom: var(--s-25);}
/*.sku { color: #666; font-size: 0.9rem; }*/
.product-enquiry-sec{display: flex;
  justify-content: space-between;
  align-items: center; padding-top: var(--s-25); gap: var(--s-30); flex-wrap: wrap;}

.product-details .price { font-size: 24px !important;
  font-weight: 600 !important; padding-bottom:0px !important}
.product-details .price span{ font-size:16px; font-weight:400}
.enquiry-btn { 
   padding: var(--s-15) var(--s-40);
  border-radius: 100px;
  background: var(--primary);
	color:var(--white);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.64px;
	cursor:pointer;
}
.product-details-intro-highlights li{ padding:0px 0px 8px 30px; position:relative}
.product-details-intro-highlights li:before{
	content: "";
    display: inline-block;
    width: 18px;
    height: 18px;

    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M9 0C4.03759 0 0 4.03759 0 9C0 13.9624 4.03759 18 9 18C13.9624 18 18 13.9624 18 9C18 4.03759 13.9624 0 9 0ZM14.0301 6.63158L8.2782 12.3383C7.93985 12.6767 7.3985 12.6992 7.03759 12.3609L3.99248 9.58647C3.63158 9.24812 3.60902 8.68421 3.92481 8.32331C4.26316 7.96241 4.82707 7.93985 5.18797 8.2782L7.6015 10.4887L12.7444 5.34586C13.1053 4.98496 13.6692 4.98496 14.0301 5.34586C14.391 5.70677 14.391 6.27068 14.0301 6.63158Z' fill='%23284383'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
	position:absolute; left:0px; top:6px
}
.product-info{color: var(--light);}
form .product-enquiry-form input[type="submit"]{background: var(--secondary);}
.product-info{font-size: 14px;}
.cf7-product-title-text{ padding-bottom:var(--s-40); }

/* ==========================
   Product Tabs Wrapper
========================== */

.product-tabs{
	display: flex;

flex-direction: column;
gap: var(--s-50);
   
}
.product-tabs-header{display: flex;
  justify-content: space-between;
  gap: var(--s-30); }

/* ==========================
   Buttons
========================== */

.tab-controls{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap: var(--s-20);
  
}

.tab-btn{
    display:flex;
    align-items:center;
    gap:8px;
    padding:var(--s-10) var(--s-25);

    border:1px solid var(--primary);
    border-radius:100px;
    background:transparent;
    color:var(--primary);
    font-size:16px;
    font-weight:600;
    cursor:pointer;

    transition:all .35s ease;
    user-select:none;
}

.tab-btn svg{
    flex-shrink:0;
}

.tab-btn svg path{
    transition:all .35s ease;
	fill:currentcolor;
}

/* Hover */

.tab-btn:hover, .tab-btn.active{
    background:var(--primary);
    color:var(--white);
}


.tab-btn.active svg path{
    fill:#fff;
}

/* ==========================
   Tab Content Animation
========================== */

.tab-content{
    opacity: 0;
    visibility: hidden;
    height: 0;
    overflow: hidden;

    transition:
        opacity .35s ease,
        visibility .35s ease;
}

.tab-content.active{
    opacity: 1;
    visibility: visible;
    height: auto;
}

.tuotteet-tab-inner p{font-size: 16px !important;
  display: flex;
  gap: 10px;}

/* ==========================
   Table
========================== */

.spec-tab table{
    width:100%;
    border-collapse:separate;
	border:none;
	border-top: 1px solid #B2C0D1;

    /*border-spacing:0 12px;*/
}

.spec-tab tr:nth-child(even){
    background:#C5DAF0;

}


.spec-tab th,
.spec-tab td{

    padding:var(--s-20) var(--s-20);
	font-size:16px; font-weight:400; border:none; border-bottom: 1px solid #B2C0D1;

}

.spec-tab th{

    width:65%;  

    text-align:left;


}

.spec-tab td{
    width:35%;

    text-align:right;

  
}

/* ==========================
   Docs
========================== */
.docs-tab{display: grid;
  grid-template-columns: repeat(1,minmax(0,1fr));
  gap: var(--s-50) var(--s-30);}
.logged-in .docs-tab{ grid-template-columns: repeat(2,minmax(0,1fr));}

.docs-list-sec{

    /*margin-bottom:50px;*/
}

.docs-list-sec h3{

    padding: 0px 0px 7px;
  font-size: 18px;
  font-weight: 700;
}

.docs-list-sec ul{

    margin:0;
    padding:0;

    list-style:none;
}

.docs-list-sec li{

    margin-bottom:8px;
	display:flex
}

.docs-list-sec a{

    display:flex;

    align-items: flex-start;
	gap:10px;

    text-decoration:none;
}
.docs-list-sec a span{ position:relative}
.docs-list-sec a span:after{position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  height: 1px;
  width: 0;
  transition-property: width;
  transition-duration: .3s;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
  content: "";
  background: currentcolor;}
.docs-list-sec a:hover span::after, .docs-list-sec a:focus span::after {
  width: 100%;
}

.docs-list-sec a:hover{
    
}
.docs-list-sec a svg{margin-top: 8px;}

/*Product listing - product Area*/
.product-filter-container{margin-left: auto;
  margin-right: auto;
  max-width: 1150px;
  width: 100%;
	display: flex;
  flex-direction: column;
  gap: var(--s-40);
	padding-bottom:var(--s-200)
}
.product-filter-wrapper{
    position:relative;
    display:inline-block;
    z-index:100;
}

/* Button */
.category-filter-toggle{
    display:flex;
    align-items:center;
    gap: var(--s-12);
  padding: 12px 25px;
  border: none;
  border-radius: 100px;
   
    cursor:pointer;
    font-weight:600;
	font-size: 16px;
	letter-spacing: 0.64px;
}
.category-filter-icon{margin-top: 2px;
  margin-bottom: -2px;}
.category-filter-text:before{
    content: "";
    display: inline-block;
    width: 17px;
    height: 17px;
    margin-right: var(--s-12);
	margin-bottom: -4px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17' fill='none'%3E%3Cpath d='M13.7143 12C13.7143 12.3429 13.4857 12.5714 13.1429 12.5714H6.17143C5.94286 13.2571 5.31429 13.7143 4.57143 13.7143C3.82857 13.7143 3.2 13.2571 2.97143 12.5714H0.571429C0.228571 12.5714 0 12.3429 0 12C0 11.6571 0.228571 11.4286 0.571429 11.4286H2.97143C3.2 10.7429 3.82857 10.2857 4.57143 10.2857C5.31429 10.2857 5.94286 10.7429 6.17143 11.4286H13.1429C13.4857 11.4286 13.7143 11.6571 13.7143 12ZM13.1429 6.28571H10.7429C10.5143 5.6 9.88571 5.14286 9.14286 5.14286C8.4 5.14286 7.77143 5.6 7.54286 6.28571H0.571429C0.228571 6.28571 0 6.51429 0 6.85714C0 7.2 0.228571 7.42857 0.571429 7.42857H7.54286C7.77143 8.11429 8.4 8.57143 9.14286 8.57143C9.88571 8.57143 10.5143 8.11429 10.7429 7.42857H13.1429C13.4857 7.42857 13.7143 7.2 13.7143 6.85714C13.7143 6.51429 13.4857 6.28571 13.1429 6.28571ZM0.571429 2.28571H2.97143C3.2 2.97143 3.82857 3.42857 4.57143 3.42857C5.31429 3.42857 5.94286 2.97143 6.17143 2.28571H13.1429C13.4857 2.28571 13.7143 2.05714 13.7143 1.71429C13.7143 1.37143 13.4857 1.14286 13.1429 1.14286H6.17143C5.94286 0.457143 5.31429 0 4.57143 0C3.82857 0 3.2 0.457143 2.97143 1.14286H0.571429C0.228571 1.14286 0 1.37143 0 1.71429C0 2.05714 0.228571 2.28571 0.571429 2.28571Z' fill='white'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
	transition: width .4s ease, margin-left .4s ease, opacity .4s ease, transform .4s ease;
}
.category-filter-text:after{
	
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
	margin-left: var(--s-12);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.195638 8.58655C-0.0646951 8.84695 -0.064655 9.26902 0.195718 9.52935C0.456092 9.78969 0.878198 9.78969 1.13852 9.52929L4.86202 5.80515L8.58582 9.52895C8.84615 9.78929 9.26829 9.78929 9.52862 9.52895C9.78895 9.26862 9.78895 8.84649 9.52862 8.58615L5.80475 4.86229L9.52835 1.13803C9.78862 0.877658 9.78862 0.455552 9.52822 0.195225C9.26789 -0.0651082 8.84575 -0.0650684 8.58542 0.195305L4.86189 3.91949L1.13807 0.195625C0.877725 -0.0647216 0.455612 -0.0647216 0.195265 0.195625C-0.0650883 0.455978 -0.0650883 0.878085 0.195265 1.13844L3.91922 4.86235L0.195638 8.58655Z' fill='white'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
	opacity: 0;
  width: 0;
  margin-left: 0;
  
  transition: width .4s ease, margin-left .4s ease, opacity .4s ease, transform .4s ease;	
}


.category-filter-toggle.active .category-filter-text:after {
   width: 10px;
  margin-left: var(--s-12);
  opacity: 1;
  transform: translateX(0);
}
.category-filter-toggle.active .category-filter-text:before{
	opacity: 0;
  width: 0;
  margin-right: 0;
}


/* Dropdown */

.category-filter-dropdown{
    position:absolute;
    top:calc(100% + 15px);
    left:0;
    
    background:#fff;
    border-radius: 12px;
background: var(--white);
box-shadow: 0 7px 29px 0 rgba(100, 100, 111, 0.20);
    max-height:0;
    overflow:hidden;
    opacity:0;
    visibility:hidden;
	padding:var(--s-25);
	display: flex;
  flex-direction: column;
  gap: var(--s-20);

    transform:translateY(-20px);

    transition:
        max-height .35s cubic-bezier(.4,0,.2,1),
        opacity .35s ease,
        transform .35s ease,
        padding .35s ease;
	transition:all .35s ease;
	

    z-index:999;
}

.category-filter-dropdown.active{
    max-height:500px; /* increase if needed */

   /* padding:24px;*/

    opacity:1;
    visibility:visible;

    transform:translateY(0);
}

.category-filter-dropdown h4{
   margin: 0px;
  color: #29488f;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.64px;
  font-family: var(--gp-font--inter-tight);
  text-transform: initial;
}

/* Checkbox row */

.filter-checkbox{
    display:flex;
    align-items:center;
   
    cursor:pointer;
 
    font-size:16px;
	letter-spacing: 0.64px;
	font-weight:500;
	 line-height: 140%;
}

.filter-checkbox:last-child{
    margin-bottom:0;
}

.filter-checkbox input{
    width:20px;
    height:20px;
    cursor:pointer;
}

.products-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
   gap: var(--s-20);
}

.product-card{
    background:#fff;
    border-radius: 12px;
  box-shadow: 0 7px 29px 0 rgba(100, 100, 111, 0.20);
    overflow:hidden;
    position:relative;
}

.product-price{
    position:absolute;
    top:15px;
    left:15px;
    font-weight: 600;
  font-size: 20px;
  padding: 3px 16px;
    border-radius:100px;
	background: var(--primary);
  color: var(--white);
}
.product-image{padding: var(--s-100);
  display: flex;
  align-items: center;
  justify-content: center;}
.product-image img{
    /*width:100%;*/
	width:auto;
    display:block;
	max-height: 370px;
	height: clamp(220px, 25vw, 370px);
	max-width: inherit !important;
}

.product-content{
    border-top: 1px solid #B2C0D1;
  background: #FFF;
  padding: var(--s-40) var(--s-40);
  display: flex;
  flex-direction: column;
	gap: var(--s-30);
}
.product-content h3{
	font-size:var(--h4);
	text-transform:uppercase; font-weight:600; font-family: var(--gp-font--inter-tight);
}
.product-excerpt p{ font-size:16px;}

.product-meta-bottom{
	display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-20);
}
.product-meta{
    display:flex;
    gap: var(--s-20);
  font-size: 16px;
  font-weight: 500;
}
.product-meta .p-weight, .product-meta .p-km{ display:flex; gap:8px; align-items: center;}
.product-meta .p-weight:before, .product-meta .p-km:before{ content:''; width:24px; height:24px;  background-size: contain;}
.product-meta .p-weight:before{background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M23.299 18.8911L21.5212 8.82778C21.1531 6.74489 19.3508 5.23312 17.2357 5.23312H14.7205C15.1008 4.69256 15.325 4.03467 15.325 3.32498C15.3251 1.49161 13.8334 0 12 0C10.1666 0 8.67496 1.49161 8.67496 3.32503C8.67496 4.03472 8.89917 4.69261 9.27946 5.23317H6.76424C4.64915 5.23317 2.84685 6.74494 2.47884 8.82783L0.700962 18.8911C0.476571 20.1614 0.823352 21.4567 1.65229 22.4449C2.48127 23.4332 3.69646 24 4.98641 24H19.0137C20.3036 24 21.5188 23.4332 22.3477 22.445C23.1767 21.4567 23.5234 20.1614 23.299 18.8911ZM12 1.41689C13.0522 1.41689 13.9081 2.27287 13.9081 3.32503C13.9081 4.37719 13.0521 5.23317 12 5.23317C10.9479 5.23317 10.0919 4.37719 10.0919 3.32503C10.0919 2.27287 10.9478 1.41689 12 1.41689ZM21.2622 21.5344C20.7031 22.2009 19.8836 22.5831 19.0137 22.5831H4.98641C4.11651 22.5831 3.29695 22.2009 2.73791 21.5344C2.17888 20.8679 1.94498 19.9943 2.09634 19.1377L3.87421 9.07434C4.12242 7.66964 5.33788 6.65002 6.76429 6.65002H17.2358C18.6623 6.65002 19.8778 7.66955 20.1259 9.07425L21.9038 19.1376C22.0551 19.9943 21.8211 20.8679 21.2622 21.5344Z' fill='%23284383'/%3E%3Cpath d='M9.67044 14.6166L11.4457 12.7822C11.7178 12.5011 11.7104 12.0526 11.4293 11.7805C11.1481 11.5083 10.6996 11.5158 10.4275 11.7969L8.44208 13.8484V12.2895C8.44208 11.8983 8.12488 11.5811 7.73362 11.5811C7.34235 11.5811 7.02515 11.8983 7.02515 12.2895V16.9438C7.02515 17.3351 7.34235 17.6523 7.73362 17.6523C8.12488 17.6523 8.44208 17.3351 8.44208 16.9438V15.3849L10.4275 17.4364C10.5664 17.5801 10.7514 17.6523 10.9367 17.6523C11.1141 17.6523 11.2917 17.586 11.4293 17.4529C11.7104 17.1808 11.7178 16.7323 11.4457 16.4511L9.67044 14.6166Z' fill='%23284383'/%3E%3Cpath d='M16.2665 14.1083H15.203C14.8117 14.1083 14.4945 14.4255 14.4945 14.8167C14.4945 15.208 14.8117 15.5252 15.203 15.5252H15.5464C15.4789 15.9276 15.1281 16.2353 14.7067 16.2353C14.2373 16.2353 13.8554 15.8534 13.8554 15.384V13.8492C13.8554 13.3798 14.2373 12.9979 14.7067 12.9979C14.9708 12.9979 15.2157 13.1175 15.3786 13.3262C15.6193 13.6346 16.0645 13.6895 16.3729 13.4487C16.6813 13.2079 16.7362 12.7628 16.4955 12.4544C16.0623 11.8994 15.4103 11.5811 14.7068 11.5811C13.4561 11.5811 12.4386 12.5986 12.4386 13.8492V15.384C12.4386 16.6347 13.4561 17.6522 14.7068 17.6522C15.9575 17.6522 16.975 16.6347 16.975 15.384V14.8168C16.975 14.4255 16.6578 14.1083 16.2665 14.1083Z' fill='%23284383'/%3E%3C/svg%3E") no-repeat center;}
.product-meta .p-km:before{background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M21 18.75H0V5.25H21V18.75ZM1.5 17.25H19.5V6.75H1.5V17.25Z' fill='%23284383'/%3E%3Cpath d='M24 15H20.25V13.5H22.5V10.5H20.25V9H24V15Z' fill='%23284383'/%3E%3Cpath d='M3.75 8.25H6V15.75H3.75V8.25Z' fill='%23284383'/%3E%3Cpath d='M7.5 8.25H9.75V15.75H7.5V8.25Z' fill='%23284383'/%3E%3Cpath d='M11.25 8.25H13.5V15.75H11.25V8.25Z' fill='%23284383'/%3E%3Cpath d='M15 8.25H17.25V15.75H15V8.25Z' fill='%23284383'/%3E%3C/svg%3E") no-repeat center;
    }

.product-button{
    display: inline-flex;
  padding: var(--s-15) var(--s-30);
  background: var(--primary);
  color: var(--light);
  border-radius: 30px;
  text-decoration: none;
  margin-top: 0px;
  line-height: 100%;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.4s ease;
}
.product-button:hover{ color:var(--white)}

.product-card{
    opacity:1;
    transform:scale(1);
    transition:
        opacity .35s ease,
        transform .35s ease;
}

.product-card.hidden-card{
    opacity:0;
    transform:scale(.92);
    pointer-events:none;
}
/*==================================================
TEAM GRID
==================================================*/

.team-slider-wrap{
    width:100%;
    position:relative;
}

.team-grid{
    display: flex;
  justify-content: center;
    
	flex-wrap: wrap;
}

.team-card{
    position:relative;
    cursor:pointer;
    overflow:hidden;
    border-radius:12px;
    background:#d7e7f5;
	width: calc(25% - 20px);
	margin:10px;
}

.team-thumb{
    position:relative;
    overflow:hidden;
	border-radius: 12px;
}

.team-thumb img{
    display:block;
    width:100%;
    aspect-ratio:3/4;
    object-fit:cover;
    transition:.6s ease;
}

.team-card:hover img{
    transform:scale(1.08);
}

.team-overlay{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    padding: 12px;
    color:#fff;
    z-index:2;
    background:linear-gradient(to top,
        rgba(0,0,0,.65),
        rgba(0,0,0,.15),
        transparent);
}

.team-overlay h3{
    margin:0;
       line-height:1.1;
    font-size: var(--h5);
  font-family: var(--gp-font--inter-tight);
  text-transform: inherit;
	font-weight:600
}

.team-overlay span{
    display:block;
    font-size: 15px;
}

.team-hidden-bg{
    display:none;
}


/*==================================================
POPUP
==================================================*/

.team-popup{

    position:fixed;

    inset:0;

    z-index:99999;

    background:#d8e6f2;

   
	
    opacity:1;
	transform: translateX(100%);
	transition: all 0.3s ease;

}

.team-popup.active{

  
	
    opacity:1;
	transform: translateX(0);

}

.team-popup-overlay{

    position:absolute;

    inset:0;

}

.team-popup-inner{

    position:relative;

    width:100%;

    height:100vh;

    display:grid;

    grid-template-columns:520px 1fr;

}


/*==================================================
LEFT SIDE
==================================================*/

.team-popup-left{

    position:relative;

    padding:70px;

    border-right:1px solid #bfd0df;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

/*==================================================
LEFT IMAGE SLIDER
==================================================*/

.popup-image{

    position:relative;

    width:100%;

    overflow:hidden;

    border-radius:12px;

    background:#ddd;

}

.popup-image-track{

    display:flex;

    width:100%;

    height:100%;

    transition:transform .65s cubic-bezier(.77,0,.175,1);

    will-change:transform;

}

.popup-image-slide{

    flex:0 0 100%;

    width:100%;

    position:relative;

}

.popup-image-slide img{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

    user-select:none;

    pointer-events:none;

}


/*==================================================
LEFT PANEL
==================================================*/

.team-popup-left{

    overflow:hidden;

    position:relative;

}


/*==================================================
MEMBER INFO
==================================================*/

.popup-member-info{

    position:absolute;

    left:70px;

    bottom:70px;

    z-index:20;

    color:#fff;

    transition:opacity .35s ease;

}

.popup-member-info h2{

    margin:0;

    font-size:44px;

    line-height:1;

}

.popup-member-info span{

    display:block;

    margin-top:10px;

    letter-spacing:2px;

    text-transform:uppercase;

}


/*==================================================
RIGHT SIDE FADE
==================================================*/

.team-popup-right{

    transition:opacity .35s ease;

}


/*==================================================
SMOOTH GPU
==================================================*/

.popup-image,

.popup-image-track,

.popup-image-slide{

    transform:translateZ(0);

    backface-visibility:hidden;

}


/*==================================================
DISABLE IMAGE DRAG
==================================================*/

.popup-image img{

    -webkit-user-drag:none;

}


/*==================================================
PROGRESS BAR
==================================================*/

.team-progress{

    overflow:hidden;

}

.team-progress span{

    width:0;

    transition:none;

}


/*==================================================
ANIMATION CLASS
==================================================*/

.team-popup.animating{

    pointer-events:none;

}

.team-popup.animating .team-popup-right{

    opacity:0;

}

.popup-member-info{

    position:absolute;

    left:95px;

    bottom:120px;

    color:#fff;

}

.popup-member-info h2{

    margin:0;

    font-size:40px;

    font-weight:400;

}

.popup-member-info span{

    display:block;

    margin-top:5px;

    text-transform:uppercase;

    font-size:13px;

    letter-spacing:1px;

}


/*==================================================
RIGHT SIDE
==================================================*/

.team-popup-right{

    position:relative;

    padding:70px 80px;

    overflow:hidden;

}


/*==================================================
FLOATING IMAGES
==================================================*/

.popup-bg-images{

   

}

.popup-bg-images img{

    

    width:180px;

}


/*==================================================
QUOTE
==================================================*/

.popup-quote{

    position:relative;

    z-index:2;

    color:#244e98;

    font-size:58px;

    line-height:1.05;

    text-transform:uppercase;

    font-family:Georgia,serif;

    margin-bottom:70px;

}


/*==================================================
CONTENT
==================================================*/

.popup-content{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

}

.popup-left-text,

.popup-right-text{

    color:#224b90;

    font-size:24px;

    line-height:1.55;

}

.popup-left-text p,

.popup-right-text p{

    margin:0 0 22px;

}


/*==================================================
BOTTOM TEXT
==================================================*/

.popup-last-text{

    position:relative;

    z-index:2;

    margin-top:55px;

    color:#224b90;

    font-size:26px;

    line-height:1.55;

}


/*==================================================
CLOSE BUTTON
==================================================*/

.team-close{

    position:absolute;

    top:35px;

    right:40px;

    width:46px;

    height:46px;

    border:1px solid #224b90;

    background:none;

    cursor:pointer;

    color:#224b90;

    font-size:22px;

    z-index:100;

    transition:.3s;

}

.team-close:hover{

    background:#224b90;

    color:#fff;

}


/*==================================================
BOTTOM NAVIGATION
==================================================*/

.team-navigation{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    height:90px;

    display:grid;

    grid-template-columns:1fr 120px 120px;

    border-top:1px solid #bfd0df;

    z-index:20;

}

.team-prev,

.team-next{

    border:none;

    background:none;

    font-size:34px;

    color:#224b90;

    cursor:pointer;

    transition:.3s;

}

.team-prev{

    border-right:1px solid #bfd0df;

}

.team-next{

    border-left:1px solid #bfd0df;

}

.team-prev:hover,

.team-next:hover{

    background:#224b90;

    color:#fff;

}


/*==================================================
PROGRESS BAR
==================================================*/

.team-progress{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

}

.team-progress::before{

    content:"";

    position:absolute;

    left:40px;

    right:40px;

    height:2px;

    background:#bfd0df;

}

.team-progress span{

    position:absolute;

    left:40px;

    width:0;

    height:4px;

    background:#224b90;

     transition:none;

}
/*==================================================
POPUP OPEN ANIMATION
==================================================*/

.team-popup{

    visibility:hidden;

    pointer-events:none;

    /*transition:opacity .45s ease;*/
}

.team-popup.active{

    visibility:visible;

    pointer-events:auto;
}

.team-popup-inner{

    transform:scale(.96);

    opacity:0;

    transition:.55s cubic-bezier(.22,.61,.36,1);
}

.team-popup.active .team-popup-inner{

    transform:scale(1);

    opacity:1;
}


/*==================================================
LEFT IMAGE ANIMATION
==================================================*/

.popup-image{

    transform:translateX(-70px);

    opacity:0;

    transition:.7s ease;
}

.team-popup.active .popup-image{

    transform:none;

    opacity:1;
}

.popup-image img{

    transition:.6s ease;
}


/*==================================================
NAME ANIMATION
==================================================*/

.popup-member-info{

    transform:translateY(35px);

    opacity:0;

    transition:.6s ease .15s;
}

.team-popup.active .popup-member-info{

    opacity:1;

    transform:none;
}


/*==================================================
QUOTE
==================================================*/

.popup-quote{

    transform:translateY(45px);

    opacity:0;

    transition:.7s ease .2s;
}

.team-popup.active .popup-quote{

    opacity:1;

    transform:none;
}


/*==================================================
CONTENT
==================================================*/

.popup-left-text,

.popup-right-text{

    opacity:0;

    transform:translateY(45px);

    transition:.7s ease;
}

.team-popup.active .popup-left-text{

    opacity:1;

    transform:none;

    transition-delay:.3s;
}

.team-popup.active .popup-right-text{

    opacity:1;

    transform:none;

    transition-delay:.45s;
}


/*==================================================
LAST TEXT
==================================================*/

.popup-last-text{

    opacity:0;

    transform:translateY(35px);

    transition:.6s ease .6s;
}

.team-popup.active .popup-last-text{

    opacity:1;

    transform:none;
}


/*==================================================
RIGHT CONTENT SCROLL
==================================================*/

.team-popup-right{

    overflow-y:auto;

    scrollbar-width:thin;

    scrollbar-color:#204b92 #d8e6f2;
}

.team-popup-right::-webkit-scrollbar{

    width:8px;
}

.team-popup-right::-webkit-scrollbar-thumb{

    background:#204b92;
}

.team-popup-right::-webkit-scrollbar-track{

    background:#d8e6f2;
}




/*==================================================
CARD HOVER
==================================================*/

.team-card{

    transition:.35s ease;
}

.team-card:hover{

    transform:translateY(-10px);
}

.team-card::after{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(18,63,132,.18);

    opacity:0;

    transition:.35s;
}

.team-card:hover::after{

    opacity:1;
}


/*==================================================
BUTTON STATES
==================================================*/

.team-prev,

.team-next{

    transition:.35s ease;
}



/*==================================================
PROGRESS BAR
==================================================*/

.team-progress{

    overflow:hidden;
}

.team-progress span{

    border-radius:20px;
}


/*==================================================
SMOOTH CONTENT CHANGE
==================================================*/

.popup-image,

.popup-member-info,

.popup-quote,

.popup-left-text,

.popup-right-text,

.popup-last-text{

    will-change:transform,opacity;
}


/*==================================================
TEXT TYPOGRAPHY
==================================================*/

.popup-left-text strong,

.popup-right-text strong,

.popup-last-text strong{

    font-weight:600;
}

.popup-left-text h2,

.popup-right-text h2,

.popup-left-text h3,

.popup-right-text h3{

    color:#204b92;

    margin-bottom:18px;
}

.popup-left-text ul,

.popup-right-text ul{

    padding-left:22px;
}

.popup-left-text li,

.popup-right-text li{

    margin-bottom:10px;
}


/*==================================================
IMAGE SHADOW
==================================================*/

.popup-image{

    box-shadow:

    0 30px 80px rgba(0,0,0,.18);
}


/*==================================================
QUOTE DECORATION
==================================================*/

.popup-quote::before{

    content:"“";

    font-size:120px;

    position:absolute;

    left:-45px;

    top:-40px;

    color:rgba(33,77,148,.12);

    line-height:1;
}


/*==================================================
POPUP LAYER
==================================================*/

.team-popup{

    backdrop-filter:blur(4px);
}


/*==================================================
SELECTION
==================================================*/

.team-popup *::selection{

    background:#204b92;

    color:#fff;
}
body.team-popup-open{

    overflow:hidden;

}
.popup-image,
.popup-member-info,
.popup-quote,
.popup-left-text,
.popup-right-text,
.popup-last-text{

    transition:
        opacity .45s ease,
        transform .45s ease;

    will-change:
        opacity,
        transform;

}

/*PRODUCT SEARCH*/
.search-trigger{padding-left: 10px;
  padding-right: 10px;
  cursor: pointer;}
.search-overlay {
    position: fixed;
    top: -100%; /* Initially hidden above the screen */
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(40, 67, 131, 0.75);
    z-index: 9999;
    transition: top 0.5s ease-in-out; /* Smooth sliding animation */
    padding: var(--s-50) var(--grid-margin) var(--grid-margin);
    display: block !important; /* Keep it in the DOM */
}

.search-overlay.active {
    top: 0; /* Slides down into view */
}
.search-container{
	display: flex;
flex-direction: column;
align-items: flex-end;
gap: 20px;
}

.search-container-box {
    width: 100%;
    display: flex;    
	justify-content: flex-end;

height: 52px;
padding-left: 20px;
align-items: center;
	border-radius: 100px;
border: 1px solid rgba(255, 255, 255, 0.50);
background: linear-gradient(164deg, rgba(255, 255, 255, 0.05) 13.16%, rgba(255, 255, 255, 0.05) 100.22%);
backdrop-filter: blur(15px);

}
.haku-btn{
border: 1px solid rgba(213, 232, 240, 0.30);
	background-color:transparent !important;
background: linear-gradient(94deg, rgba(213, 232, 240, 0.20) 0%, rgba(213, 232, 240, 0.10) 104.54%);
backdrop-filter: blur(20px);
	font-size:14px !important;
	line-height: 140% !important; /* 15.12px */
letter-spacing: 0.56px !important;
}
.haku-btn:hover{
border: 1px solid rgba(213, 232, 240, 0.70);
background: linear-gradient(94deg, rgba(213, 232, 240, 0.30) 0%, rgba(213, 232, 240, 0.40) 104.54%);}
.search-container #search-input{color: #fff; border: none;
	padding-left:0px;
 flex:1;
font-size: 14px;
background:transparent !important;
font-weight: 600;
line-height: 110%; /* 15.12px */
letter-spacing: 0.56px;
text-transform: uppercase;}

.search-container .close-btn {background: transparent;
  color: var(--lighten);}
.search-container .close-btn:hover{ color: var(--white);}


/* Adjustments for the result list styling */
#search-results{display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: var(--s-50);}
.search-result-item {
    display: flex;
    align-items: center;
    padding: 15px;
    border-radius: 12px;
  box-shadow: 0 7px 29px 0 rgba(100, 100, 111, 0.20);
  background: var(--white);
	transition: all .5s ease,
}
.search-result-item:hover{background: var(--lighten);}
.search-result-item img { width: 50px; height: 50px; object-fit: cover; margin-right: 15px;  mix-blend-mode: multiply;}
.result-info strong{ font-weight:600}
.result-info div{ font-size:16px}

.loader { border: 4px solid #f3f3f3; border-top: 4px solid #3498db; border-radius: 50%; width: 20px; height: 20px; animation: spin 2s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* ==========================
   PAGE LOADER
========================== */

html.loading{
   /* overflow:hidden;*/
}

body.loading{
   /* overflow:hidden;*/
}

/*#gp-loader{

    position:fixed;
    inset:0;

    width:100%;
    height:100%;

    z-index:999999;

    overflow:hidden;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#6478C8;

    transition:
        opacity .8s ease,
        visibility .8s ease;

}*/

#gp-loader.hide{

    opacity:0;
    visibility:hidden;
    pointer-events:none;
	

}



/*PRODUCT CATEGORY SLIDER*/
.tk-slider-section {
    position: relative;
    width: 100%;
    padding: 0px 0;
    /*overflow: hidden;*/
}

.tk-slider-sticky {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--s-50);
	padding:var(--s-120) 0px 0px;
	/*height:100% !important;
	max-height:100% !important*/
}

.tk-slider-header {
    width: 100%;
	align-items: center;
  display: flex;
	gap: var(--s-25);
    /*padding: 0 5vw;*/
}
.tk-slider-header:before{ content:'';

background-color: var(--primary);
  height: 1px;
  width: 100px;}

.tk-slider-kicker {
    /*color: #284383;
    font-size: 14px;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.08em;*/
}

.tk-slider-track {
    display: flex;
    align-items: stretch;
    gap: var(--s-20);
    width: max-content;
   /* padding: 0 5vw;*/
    will-change: transform;
	width: max-content;
	height:80vh;
	height:calc(100vh - 220px)
 /* height: 100%;*/
	
}

.tk-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
	position:relative;
   /* width: min(420px, 80vw);*/
    min-width: min(420px, 80vw);
    /*min-height: 560px;*/
	flex: none;
  	width: 35.7vw;
 	 height: 85%;
    text-decoration: none;
    color: var(--primary);
  background: var(--card);
  border-radius: 12px;
  padding: /*var(--s-70)*/ var(--s-30) var(--s-30);
    overflow: hidden;
    transition: background 0.35s ease, color 0.35s ease;
}
  .tk-card:nth-child(2n) {
    transform: translateY(5.5%);
  }


.tk-card:hover,
.tk-card:focus-visible {
	background: var(--primary);
  color: var(--white);
    /*transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(40, 67, 131, 0.14);*/
}

.tk-card:focus-visible {
    outline: 2px solid #284383;
    outline-offset: 3px;
}

.tk-card-image {
    display: flex;
    align-items: center;
    justify-content: center;
    /*min-height: 410px;
    padding: 36px;
    background: rgba(255, 255, 255, 0.16);*/
	
	width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.tk-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 340px;
    object-fit: contain;
}

.tk-card-image-placeholder {
    width: 100%;
    height: 340px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.35);
}

.tk-card-title {
    /*padding: 0 28px 30px;*/
	position:relative;
    font-size: var(--h2);
	font-family: var(--gp-font--instrument-serif);
  text-transform: uppercase;
  line-height: 100%;
    /*line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: 0.01em;*/
}

@media (max-width: 1140px) {
	.tk-card-image img,
    .tk-card-image-placeholder {
        max-height: 290px;
        height: 220px;
    }
	.tuotekategoria-left{padding-right: var(--s-50);}
}
@media (max-width: 1024px)
{
	.main-slider{padding: var(--s-200) 0px;}
	.product-details {
		padding: var(--s-100) 0px var(--s-100) var(--s-60);}
}

@media (max-width: 1023px) {
    .tk-slider-section {
        /*padding: 24px 16px;*/
        overflow: visible;
    }

    /*.tk-slider-sticky {
        gap: 18px;
    }*/

   

    .tk-slider-track {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
        width: 100%;
        padding: 0;
        transform: none !important;
		height:auto
    }
	.tk-card:nth-child(2n) {
  transform: none;
}

    .tk-card {
        width: 100%;
        min-width: 0;
		aspect-ratio: 1/1;
		height: 100%;
        /*min-height: 100%;*/
    }

    .tk-card-image {
        min-height: 280px;
       
    }

    .tk-card-image img,
    .tk-card-image-placeholder {
        max-height: 220px;
        height: 220px;
    }

   }

@media (max-width: 960px) {
	.tuotekategoria-hero{padding-top: var(--s-150);}
	.product-image {		padding: var(--s-100) var(--s-60) var(--s-60);}
	.product-meta-bottom{ flex-direction:column}
	button.slick-arrow {  width: 40px;		height: 40px;}
}

@media (max-width: 767px) {
    
.tk-card{ min-height:460px}

	.tk-slider-header::before{ display:none}
}



@media(max-width:768px){

.gp-loader-inner{

    flex-direction:column;
    gap:35px;

}

.gp-loader-text{

    font-size:32px;

}

.gp-loader-line{

    width:240px;

}
	.tuotekategoria-description p:first-child{ font-size:18px}

}
/* ==========================
   Mobile
========================== */

@media(max-width:767px){

    .tab-controls{

        flex-direction:column;

        align-items:stretch;
    }

    .tab-btn{

        justify-content:center;
    }

    .spec-tab th,
    .spec-tab td{

        padding:16px;
    }



    



    .tuotekategoria-grid{

        /*gap:30px 15px;*/
    }

    /*.tuotekategoria-item:nth-child(even){

        transform: translateY(30px);
    }*/
 .product-header-sec { grid-template-columns: repeat(1,minmax(0,1fr));}
	.tuotekategoria-container{grid-template-columns: repeat(1,minmax(0,1fr)); }
	.tuotekategoria-left{padding-right: 0px;}
	.tuotekategoria-description{ max-width:100%}
	.product-filter-container{ padding-bottom:var(--s-150)}
	.tuotekategoria-hero{padding-bottom:var(--s-80)}
	.product-gallery::before { display:none}
	.product-gallery{ padding-right:0px}
	.main-slider{ padding:var(--s-150) 0px var(--s-70)}
	.product-details {    padding: var(--s-50) 0px;  }
	.product-details{gap: var(--s-60);}
	.product-details-sec{  padding-top: var(--s-50); gap: var(--s-80);}
	.product-tabs-header{ flex-direction:column}
}
@media(max-width:640px){
.tuotekategoria-grid{
	display: grid;
  grid-template-columns: repeat(1,minmax(0,1fr));}
	.tuotekategoria-column:nth-child(2) {  padding-top: 0px;}
	.tk-slider-track {
        grid-template-columns: 1fr;
    }
		.tk-card{ min-height:460px}
	.tuotekategoria-image img{max-height: 220px;
  height: 220px;}
	.products-grid{grid-template-columns: repeat(1,1fr);}
	.logged-in .docs-tab {
  grid-template-columns: repeat(1,minmax(0,1fr));}
	.spec-tab table{display: flex;}
	.spec-tab table tr{display: flex;
  flex-direction: column;
  width: 100%;}
	.spec-tab th{border: none;
  padding-bottom: 0px;
  margin-bottom: -8px;}
	.spec-tab th, .spec-tab td{ width:100%; text-align:left}
	
}