.comp-forest__canvas {
    margin:0;
    padding:0;
    width:100%;
    max-width:100%;
    min-height:60vh;
    background: #D5F9DE;
    margin-top: -32px;
}
.comp-forest__heading {
   
    border:1px solid black;
}
.comp-forest__heading h1 {
    color: #243E16;
    margin: 10px 20px;
    text-align:center;
}

.comp-forest__content {
    display:flex;
    width:100%;
    max-width:100%;
    justify-content:center;
    align-items:stretch;

}
.comp-forest__map {
    width:50%;
    border:1px solid black;
    padding: 0 5% 5%;
    
}

.comp-forest__info {
    width:50%;
    border:1px solid black;
    display:flex;
    flex-direction: column;
    row-gap: 20px;
    column-gap: 20px;
    justify-content: flex-start;
    align-items:stretch;
    padding: 0 2em 2em;
}

.salla-forest__map {
    width:100%;
    padding:1em;
    border-radius:3px;
    background-color:white;
    box-shadow: 8px 8px #5E3023;
}

.st0{
    display:none;
}
 .st1{
    fill:none;
    stroke:#FFFFFF;
    stroke-width:4;
    stroke-miterlimit:10;
}
 .st2{
    display:none;
    fill:#77CDE0;
}
 .st3{
    display:inline;
    fill:#FFFFFF;
}
 .st4{
    display:inline;
}
 .st7{
    fill:#FFFFFF;
}
 .st8{
    fill:none;
    stroke:#FFFFFF;
    stroke-miterlimit:10;
}
 .st-alue{
    display:inline;
    fill:#FFFFFF;
    stroke:#000000;
    stroke-width:2;
    stroke-miterlimit:10;
}

.st-description {
  pointer-events: none;
  position: absolute;
  font-size: 18px;
  font-weight:700;
  text-align: center;
  background: white;
  padding: 10px 15px;
  z-index: 5;
  height: 40px;
  width:235px;
  line-height: 20px;
  margin: 0 auto;
  color: black;
  border-radius: 3px;
  box-shadow: 0 0 0 1px #eee;
  transform: translateX(-50%);
  display: none;
}

@media screen and (max-width:600px) {
    .st-description {
        left:50%;
        top:-10%;
        width:80%;
    }
}

.st-description.active {
    display:inline;
}

.st_varttuva_sekametsa{
    fill:rgba(43, 182, 115, 0.7);
    transition: 0.3s all;
}
#varttuva_sekametsa:hover .st_varttuva_sekametsa, #varttuva_sekametsa:focus .st_varttuva_sekametsa {
    fill:rgba(43, 182, 115, 1);
    cursor:pointer;
    transition: 0.3s all;
    stroke: orangered;
    stroke-width:3px;
}

 .st-avosuo{
    fill:rgba(57, 67, 183, 0.7);
    transition: 0.3s all;
}
#avosuo:hover .st-avosuo {
    fill:rgba(57, 67, 183, 1);
    stroke: orangered;
    stroke-width:3px;
    cursor:pointer;
    transition: 0.3s all;
}

 .st-vanha-metsa{
    fill:rgba(94, 48, 35, 0.7);
    transition: 0.3s all;
}
#vanha_metsa:hover .st-vanha-metsa {
    fill:rgba(94, 48, 35, 1);
    cursor:pointer;
    transition: 0.3s all;
    stroke: orangered;
    stroke-width:3px;
}

 .st-varttuva-mantymetsa{
    fill:rgba(0, 104, 56, 0.7);
    transition: 0.3s all;
}
#varttuva_mantymetsa:hover .st-varttuva-mantymetsa {
    fill:rgba(0, 104, 56, 1);
    cursor:pointer;
    transition: 0.3s all;
    stroke: orangered;
    stroke-width:3px;
}

 .st-pelto{
    fill:rgba(255, 222, 23, 0.7);
    transition: 0.3s all;
}
#pelto:hover .st-pelto {
    fill:rgba(255, 222, 23, 1);
    cursor:pointer;
    transition: 0.3s all;
    stroke: orangered;
    stroke-width:3px;
}

 .st-tulvametsa {
    fill:rgba(255, 178, 83, 0.7);
    transition: 0.3s all;
}
#tulvametsa_ja_korpi:hover .st-tulvametsa{
    fill:rgba(255, 178, 83, 1);
    cursor:pointer;
    transition: 0.3s all;
    stroke: orangered;
    stroke-width:3px;
}

 .st-ennallistettava-rame{
    fill:rgba(151, 219, 79, 0.7);
    transition: 0.3s all;
   
}
#ennallistettava_rame:hover .st-ennallistettava-rame {
    fill:rgba(151, 219, 79, 1);
    cursor:pointer;
    transition: 0.3s all;
    stroke: orangered;
    stroke-width:3px;
}

 .st-tie{
    fill:none;
    stroke:#5E3023;
    stroke-width:5;
    stroke-miterlimit:10;
}
 .st-rajat{
    fill:none;
    stroke:#000000;
    stroke-width:2;
    stroke-miterlimit:10;
}

.comp-forest__infocard {
    background-color:#fff;
    padding:1em;
    box-shadow: 6px 0 20px -5px #ccc;
    border-radius:6px;
}

.comp-forest__infocard h2 {
    font-size: 20px;
    line-height:26px;
    margin:0;
}

.comp-forest__infocard .infocard__content {
    display:none;
}

.maplink {
    text-align:center;
}


.product-accordion .accordion-item {
    margin-bottom:10px;
    border-radius:3px;
}
.product-accordion .accordion-header {
    background: #ffffff;
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    font-family: Raleway, sans-serif;  
    color: var(--global-palette3, #1A202C);
    padding: 14px 16px 14px 32px; 
    cursor: pointer;   
    border-bottom: 1px solid #ddd; 
    position: relative;
}

.product-accordion .accordion-header::before {
    content: '+'; 
    font-weight:bold;
    font-size: 32px;
    position: absolute;  
    left: 10px; 
    top: 50%;  
    transform: translateY(-50%);
}

.product-accordion .accordion-header.active::before {
    content: '−';
}

.product-accordion .accordion-content {
    display: none; 
    padding: 10px 16px; 
    border-bottom: 1px solid #ddd; 
    background: #ffffff;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
}
@media (max-width:1021px) {
    .product-accordion .accordion-content {
        flex-direction:column;
    }
}


.product-accordion .accordion-header.active + .accordion-content {
    display: flex !important;
    gap: 10px;
}


.product-accordion .content-left, .product-accordion .content-right {
    flex: 1;
    box-sizing: border-box;
    padding:0.5em;
}

.sallalahjoitus .product-title.product-above,
.sallalahjoitus .single-product-category,
.sallalahjoitus .price,
.sallalahjoitus .quantity.spinners-added,
.sallalahjoitus .first-payment-date {
	display: none !important;
}

.sallalahjoitus .content-bg {
	background-color: #fff;
}

.sallalahjoitus .entry.loop-entry {
	box-shadow: none;
}

.sallalahjoitus .woocommerce div.summary {
	width: 100% !important;
}

.sallalahjoitus .variations tr {
	display: flex;
	flex-direction: column;
}

.sallalahjoitus .variations tr select {
	width: 100%;
	height: 50px;
	text-align: center;
}

.sallalahjoitus fieldset#pa_summa {
    display:none;
}

.sallalahjoitus  .button.single_add_to_cart_button {
	width: 100%;
}

.custom-progress-wrapper {
    position: relative;
    background-color: #eee;
    height: 32px; 
    border-radius: 2px;
    margin-bottom: 15px;
}

.custom-progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.custom-progress-percentage {
    margin-left: 15px;
    padding-left:20px;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    min-width:60px;
}
.custom-progress-text {
    font-weight:700;
    padding-left:5px;
}

.progress-bar-container.total-progress .custom-progress-text {
    min-width:90px;
    padding-left:10px;
}


.progress-bar-container.total-progress .custom-progress-percentage {
    padding-left:0;
    margin-left:0;
}