/* Media queries */

/*
 * Breakpoints are defined in theme.json
 * (By default they are sm, md, lg, xl, 2xl)
 */

html {
  height: 100%;
  scroll-behavior: smooth;
}

body {
  position: relative;
  display: flex;
  min-height: 100%;
  flex-direction: column;
  padding: 0;
  margin: 0;
}

body > * {
    flex: 0 0 auto;
  }

body > main {
    flex: 1 0 auto;
  }

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section {
  display: block;
}

/*
 * Set z-index on main to contain all content layers.
 */

main {
  z-index: 1;
}

button {
  border: 0;
  background: transparent;
}

a,
button {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  transition: all 0.3s;
}

img {
  max-width: 100%;
  height: auto;
}

iframe {
  border: 0;
}

.text-404 {
  padding-top: 8rem;
  padding-bottom: 20rem;
}

/*
 * Page
 */

.no-padding {
  padding: 0;
}

/* Image utils */

.image-fillarea {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* WP fixes */

@media screen and (max-width: 600px) {

#wpadminbar {
    position: fixed;
    overflow: hidden
}
  }

/*
* Onlywave, hero for many pages and also for archives and products
*/

.wp-block-group.onlywave {
  min-height: min(9.8vw, 180px) !important;
  margin-top: -2px !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background-size: contain !important;
  background-repeat: no-repeat;
  background-position: center top;
  background-image: url(../../assets/images/swoosh-hero-matala.svg);
}

:root {
  --jcore-font-family: var(--wp--preset--font-family--OpenSans);
  --jcore-heading-font-family: var(--wp--preset--font-family--OpenSans);
}

/* List styles , not available as elements in theme.json */

main ul,
  main ol {
    padding-left: 1.5rem;
    margin-bottom: 2rem;
  }

main ul li, main ol li {
      padding-left: 0.25rem;
      margin-bottom: 0.75rem;
    }

main ul li > ul,
    main ul li > ol,
    main ol li > ul,
    main ol li > ol {
      margin-bottom: 0 !important;
    }

main ul li::marker, main ol li::marker {
      color: var(--wp--preset--color--brand);
    }

main ul:not(.wp-block-rss) li {
      padding-left: calc(var(--bs-gutter-x) * 0.5) !important;
      list-style-type: none;
      position: relative;
    }

main ul:not(.wp-block-rss) li:before {
        content: "";
        position: absolute;
        left: -20px;
        top: 10px;
        background-color: var(--wp--preset--color--green);
        width: 8px;
        height: 8px;
        border-radius: 2px;
      }

main ul:not(.wp-block-rss) li::marker {
        display: none;
      }

h6 {
  font-weight: 500;
}

.has-ingress-font-size {
  font-weight: 600;
}

.has-maxi-font-size {
  line-height: 1.5;
}

.has-mini-font-size {
  margin-bottom: 0 !important;
  letter-spacing: 1.2;
  text-transform: uppercase;
}

/* Any heading with pre-text in mini-font-size (use css: "mini" on the H-element for right margins)*/

h1.wp-block-heading.mini, h2.wp-block-heading.mini, h3.wp-block-heading.mini, h4.wp-block-heading.mini {
    margin-top: 0.5rem;
  }

/* Any paragraph with pre-text in mini-font-size (use css: "mini" on the p-element for right margins)*/

p.mini {
  margin-top: 0.5rem;
}

a,
button {
  text-underline-offset: 3px;
  text-decoration-thickness: from-font;
}

/* The link-style that has an arrow as an :after-element */

p.nuoli a,
a.nuoli {
  font-weight: 500;
  -webkit-text-decoration: none;
  text-decoration: none;
}

p.nuoli a::after, a.nuoli::after {
    content: "\ \f178";
    font-family: "Font Awesome 6 Sharp";
    font-weight: 400;
    font-size: 14px;
  }

p.nuoli a:hover, a.nuoli:hover {
    -webkit-text-decoration: underline;
    text-decoration: underline;
  }

/* 
* A little hack to cover the whole content column with one link from below . Add the linkall class to the surrounding div, and the the high class to the p contianing the link
*
*/

.linkall {
  position: relative;
}

p.high a::before {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 2;
  content: "";
}

/* 
* Gridible helpers fot tight columns as in patterns "tuotteemme" and "ratkaisut"
*
*/

.gridible-row.specialgap {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
  row-gap: 2rem;
}

/* Flex children in row align-self:center */

.gridible-row .align-self-center {
  align-self: center;
}

/* 
* Hero element on front page cover 
*
*/

.wp-block-cover.front {
  background-color: var(--wp--preset--color--green-light);
}

.wp-block-cover.front .wp-block-cover__image-background {
    border-radius: none;
    -webkit-mask-image: url(../../assets/images/white-viherkatot-matala.svg),
      linear-gradient(#fff 0, #fff 0);
            mask-image: url(../../assets/images/white-viherkatot-matala.svg),
      linear-gradient(#fff 0, #fff 0);
    -webkit-mask-image: url(../../assets/images/white-viherkatot-matala.svg),
      linear-gradient(#fff 0 0);
            mask-image: url(../../assets/images/white-viherkatot-matala.svg),
      linear-gradient(#fff 0 0);
    -webkit-mask-size: 108%;
            mask-size: 108%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center 100.1%;
            mask-position: center 100.1%;
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    border-bottom: 1px solid var(--wp--preset--color--light);
  }

/* 
* Swoosh element and grass on sub page hero
*
*/

.wp-block-cover.wave .wp-block-cover__background {
    -webkit-mask-image: url(../../assets/images/white-viherkatot-semimatala.svg),
      linear-gradient(#fff 0, #fff 0);
            mask-image: url(../../assets/images/white-viherkatot-semimatala.svg),
      linear-gradient(#fff 0, #fff 0);
    -webkit-mask-image: url(../../assets/images/white-viherkatot-semimatala.svg),
      linear-gradient(#fff 0 0);
            mask-image: url(../../assets/images/white-viherkatot-semimatala.svg),
      linear-gradient(#fff 0 0);
    -webkit-mask-size: 108%;
            mask-size: 108%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center 100.3%;
            mask-position: center 100.3%;
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    border-bottom: 3px solid var(--wp--preset--color--light);
  }

.wp-block-cover {
  position: relative;
}

@media (width >= 640px) {

.wp-block-cover.grass .wp-block-cover__background {
    background-position: 8% 87%;
    background-image: url(../../assets/images/grass.svg);
    background-repeat: no-repeat
}
  }

@media (width >= 1024px) {

.wp-block-cover.grass .wp-block-cover__background {
    background-position: left 69%
}
  }

.wp-block-cover.grass .heroimg {
  padding-bottom: 5.5rem;
}

@media (width >= 768px) {
  .wp-block-cover.grass .heroimg {
  padding-bottom: 0;
}
}

/*
*Watermark on Gutenberg group background 
*
*/

.wp-block-group.watermark {
  background-repeat: no-repeat;
  background-image: url(../../assets/images/eg-banner-waterstamp.svg);
  background-size: cover;
}

@media (width >= 768px) {

.wp-block-group.watermark {
    background-position: right top;
    background-size: contain !important
}
  }

footer {
  -webkit-mask-image: url(../../assets/images/footer-inverted-green.svg),
    linear-gradient(#fff 0, #fff 0);
          mask-image: url(../../assets/images/footer-inverted-green.svg),
    linear-gradient(#fff 0, #fff 0);
  -webkit-mask-image: url(../../assets/images/footer-inverted-green.svg),
    linear-gradient(#fff 0 0);
          mask-image: url(../../assets/images/footer-inverted-green.svg),
    linear-gradient(#fff 0 0);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center -0.5%;
          mask-position: center -0.5%;
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  background-color: var(--wp--preset--color--brand);
  padding-top: 6rem;
  padding-bottom: 0;
  background-image: url("../../assets/images/grass-1-1.svg");
  background-position: bottom -40px right 0;
  background-repeat: no-repeat;
}

@media (width >= 1024px) {

footer {
    padding-top: 8rem;
    background-position: bottom -100px right 25%
}
  }

footer .footer-main {
    padding-bottom: 0;
  }

footer .footer-main p {
      color: var(--wp--preset--color--white);
      margin-top: 0.5rem;
    }

footer .footer-main a {
      color: var(--wp--preset--color--white);
      -webkit-text-decoration: none;
      text-decoration: none;
    }

footer .footer-main a:hover {
        -webkit-text-decoration: underline;
        text-decoration: underline;
      }

footer .footer-main .has-mini-font-size {
      margin-bottom: 0.5rem;
    }

@media (width >= 768px) {

footer .footer-main {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: auto;
      align-items: start;
      grid-gap: 0 2rem
  }
      footer .footer-main .right {
        grid-column-start: span 3;
        align-self: end;
        padding-bottom: 2rem;
      }
    }

@media (width >= 1024px) {

footer .footer-main {
      grid-template-columns: 1fr 1fr 1fr 1fr
  }
      footer .footer-main .right {
        grid-column-start: span 1;
      }
    }

footer .footer-main .logo {
      margin-bottom: 2.5rem;
    }

footer .footer-main .logo img,
      footer .footer-main .logo svg {
        margin-bottom: 2rem;
        height: 38px;
        width: auto;
      }

footer .footer-main .left,
    footer .footer-main .center,
    footer .footer-main .right {
      margin-bottom: 2rem;
    }

/* Some */

@media (width >= 768px) {

footer .social-media-links {
      text-align: right
  }
    }

footer .social-media-links a:hover {
      -webkit-text-decoration: none;
      text-decoration: none;
    }

footer .social-media-links span.fa-stack {
      margin-bottom: 0.5rem;
    }

footer .social-media-links i.fab {
      color: var(--wp--preset--color--brand);
    }

footer .social-media-links i.fa-circle {
      color: var(--wp--preset--color--green-medium);
    }

/*Copyright section */

footer .copyright {
    background-color: transparent;
    padding-bottom: 1rem;
    padding-top: 1rem;
  }

footer .copyright .info {
      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;
    }

footer .copyright .info p {
        margin-bottom: 0;
        font-size: var(--wp--preset--font-size--mini);
      }

#spacer_0 {
  background-color: var(--wp--preset--color--brand);
}

.navigation-header {
  --jcore-menu-height: 96px;
  --jcore-menu-width: 100%;
  --jcore-menu-padding: 1.75rem;
  --jcore-mobile-width: 980px;
  --jcore-menu-font-size: 14px;
  --jcore-menu-font-weight: 500;
}

.navigation-header .menu-item {
    margin: 0 0.75rem;
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
  }

.navigation-header .menu-link {
    font-size: var(--jcore-menu-font-size);
    font-weight: var(--jcore-menu-font-weight);
    font-family: var(--wp--preset--font-family--opensans);
    text-wrap: nowrap;
    -webkit-text-decoration: none;
    text-decoration: none;
  }

#jcore-nav {
  display: flex;
  margin: 0 calc((100vw - var(--wp--style--global--content-size)) / 2);
  justify-content: space-between;
}

#jcore-nav .brand {
    height: var(--jcore-menu-height);
  }

#jcore-nav .brand img {
      height: calc(var(--jcore-menu-height) - (var(--jcore-menu-padding) * 2));
      margin: var(--jcore-menu-padding) var(--jcore-menu-padding)
        var(--jcore-menu-padding) 0;
      width: auto;
    }

/* Level specific styles */

#jcore-nav .bar-menu {
    display: flex;
    flex-direction: row;
    height: var(--jcore-menu-height);
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
  }

#jcore-nav .hamburger svg {
      width: 26px;
      fill: #ffffff;
    }

#mega-menu {
  position: absolute;
  display: grid;
  grid-template-columns: 1fr 2fr;
  top: var(--jcore-menu-height);
  left: 50%;
  transform: translateX(-50%);
  width: var(--wp--style--global--wide-size);
  height: 0;
  background-color: var(--wp--preset--color--yellow-light);
  transition: height 200ms;
  overflow: hidden;
}

#mega-menu .first {
    display: flex;
    justify-content: flex-end;
    background-color: var(--wp--preset--color--green-light);
  }

#mega-menu .menu {
    margin-left: 25px;
    margin-top: 25px;
    width: min(100%, 348px);
  }

.dropdown-menu .open svg {
      height: 16px;
      fill: var(--wp--preset--color--brand);
    }

.dropdown-menu .menu-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-radius: 8px;
  }

.dropdown-menu .menu-item:hover {
      background-color: var(--wp--preset--color--white);
    }

.dropdown-menu .menu-item a {
      display: block;
      flex-grow: 1;
      padding: 8px;
    }

.dropdown-menu .menu-item button {
      border-left: 1px solid var(--wp--preset--color--green-light);
      padding: 8px 16px;
      cursor: pointer;
    }

.dropdown-menu #mobile-top button {
    border-radius: 8px;
  }

.dropdown-menu #mobile-top button:hover {
      background-color: var(--wp--preset--color--white);
    }

.scrollTop #mega-menu.open, .scrollUp #mega-menu.open {
    height: 486px;
  }

/* Desktop navigation styles. */

@media (width >= 1024px) {
    #jcore-nav .hamburger {
      display: none;
    }
      #jcore-nav .bar-menu > .menu-item {
        flex-direction: row;
        color: var(--wp--preset--color--white);
      }
        #jcore-nav .bar-menu > .menu-item .menu-link {
          color: inherit;
        }
  #mobile-menu {
    display: none;
  }
}

/* Mobile navigation styles. */

@media (width < 1024px) {
    #jcore-nav .brand {
      flex-basis: 80%;
    }

    #jcore-nav #jcore-menu {
      display: none;
    }

    /* Hide submenu button for mobile menu. */
    #jcore-nav button.toggle {
      display: none;
    }

  #mobile-menu {
    position: absolute;
    overflow: hidden;
    height: 0;
    transition: height 100ms;
    left: 0;
    right: 0;
    top: var(--jutils-height);
    flex-direction: column;
    background-color: var(--wp--preset--color--green-light);
  }

    #mobile-menu .menu {
      padding: 8px max(8px, 10vw);
    }

    #mobile-menu.mobile-open {
      height: calc(100vh - var(--jutils-height));
    }
    #mobile-menu .menu-item {
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
    }
      #mobile-menu .menu-item .menu-link {
        font-weight: 500;
      }

  #mega-menu {
    display: none;
  }

  /* Stop header from hiding with open menu. */
  .scrollActive.navigation-header:has(.mobile-open) {
    margin-top: 0;
  }
}

/* jscroll is active on the element. */

.scrollActive {
  transition: margin-top 300ms;
}

.scrollActive.scrollTop,
  .scrollActive.scrollUp {
    margin-top: 0;
  }

.scrollActive.scrollDown {
    margin-top: calc(var(--jutils-height) * -1);
  }

.sticky {
  position: fixed;
  top: 0;
  top: var(--wp-admin--admin-bar--height, 0);
  left: 0;
  right: 0;
  z-index: 10;
}

/* WP Fix */

/* Fix for WP admin-bar */

body.admin-bar .navbar.scrollActive,
  body.admin-bar .navbar.sticky,
  body.admin-bar .skip-to-content a {
    top: 46px;
  }

@media screen and (min-width: 781px) {
    body.admin-bar .navbar.scrollActive,
    body.admin-bar .navbar.sticky,
    body.admin-bar .skip-to-content a {
      top: 32px;
    }
  }

.archive-posts,
.products,
.posts-highlight,
.wp-block-jcore-dynamic-archive-posts__inner {
  display: grid;
  grid-row-gap: 3rem;
  grid-column-gap: 1rem;
  grid-template-columns: 1fr;
}

@media (width >= 640px) {

.archive-posts.columns-2,
.products.columns-2,
.posts-highlight.columns-2,
.wp-block-jcore-dynamic-archive-posts__inner.columns-2 {
    grid-template-columns: 1fr 1fr
}
  }

@media (width >= 768px) {

.archive-posts.columns-3,
.products.columns-3,
.posts-highlight.columns-3,
.wp-block-jcore-dynamic-archive-posts__inner.columns-3 {
    grid-template-columns: 1fr 1fr
}
  }

@media (width >= 1024px) {

.archive-posts.columns-3,
.products.columns-3,
.posts-highlight.columns-3,
.wp-block-jcore-dynamic-archive-posts__inner.columns-3 {
    grid-template-columns: 1fr 1fr 1fr
}
  }

@media (width >= 640px) {

.archive-posts.columns-4,
.products.columns-4,
.posts-highlight.columns-4,
.wp-block-jcore-dynamic-archive-posts__inner.columns-4 {
    grid-template-columns: 1fr 1fr
}
  }

@media (width >= 1024px) {

.archive-posts.columns-4,
.products.columns-4,
.posts-highlight.columns-4,
.wp-block-jcore-dynamic-archive-posts__inner.columns-4 {
    grid-template-columns: 1fr 1fr 1fr 1fr
}
  }

/* JCORE DYNAMIC ARCHIVE */

.wp-block-jcore-dynamic-archive .wp-block-jcore-dynamic-archive__filters {
    margin-bottom: 3rem;
  }

.wp-block-jcore-dynamic-archive .wp-block-jcore-dynamic-archive__filters .wp-block-jcore-dynamic-archive__filters__taxonomies__type h3 {
        font-weight: 400;
        text-transform: uppercase;
      }

.wp-block-jcore-dynamic-archive .wp-block-jcore-dynamic-archive__filters .wp-block-jcore-dynamic-archive__filters__taxonomies__type select {
        background-color: var(--wp--preset--color--light);
        border-radius: none;
        border: 1px solid black;
        shadow: none;
        padding: 1rem;
        max-width: 360px;
        min-width: 280px;
        text-transform: uppercase;
      }

.wp-block-jcore-dynamic-archive .wp-block-jcore-dynamic-archive__filters .wp-block-jcore-dynamic-archive__filters__taxonomies__type label.wp-block-jcore-dynamic-archive-filters__radio {
        width: -moz-max-content;
        width: max-content;
        padding: 4px 16px;
        text-transform: uppercase;
        font-size: 16px;
        font-weight: 600;
        display: inline-block;
        margin-bottom: 1rem;
      }

.wp-block-jcore-dynamic-archive .wp-block-jcore-dynamic-archive__filters .wp-block-jcore-dynamic-archive__filters__taxonomies__type input.wp-block-jcore-dynamic-archive-filters__radio__input {
        visibility: hidden;
      }

.wp-block-jcore-dynamic-archive .wp-block-jcore-dynamic-archive__filters .wp-block-jcore-dynamic-archive__filters__taxonomies__type.taxonomy-type-category__children {
        margin-top: 1.5rem;
      }

/* JCORE Dynamic Archive Pagination */

.wp-block-jcore-dynamic-archive-posts__pagination nav {
  display: flex;
  flex-flow: row;
  justify-content: center;
  align-items: baseline;
  gap: 0.25rem;
  margin: 4rem 0.25rem 3rem;
}

.wp-block-jcore-dynamic-archive-posts__pagination nav a {
    font-size: 1rem;
    margin: 0rem;
    color: var(--wp--preset--color--dark);
    background: var(--wp--preset--color--green-light);
    font-weight: 400;
    padding: 0.75rem 1.25rem;
    border-radius: 8px;
  }

.wp-block-jcore-dynamic-archive-posts__pagination nav a.current {
      background: var(--wp--preset--color--success);
    }

.wp-block-jcore-dynamic-archive-posts__pagination nav a:hover {
      -webkit-text-decoration: none;
      text-decoration: none;
    }

/*Pagination first */

.wp-block-jcore-dynamic-archive-posts__pagination nav .wp-block-jcore-dynamic-archive__pagination__link-first {
    background: var(--wp--preset--color--green-medium);
  }

.wp-block-jcore-dynamic-archive-posts__pagination nav .wp-block-jcore-dynamic-archive__pagination__link-first .wp-block-jcore-dynamic-archive__pagination__link__icon::after {
      content: "\f323";
      font-family: "Font Awesome 6 Sharp";
      font-weight: 400;
      display: inline-block;
      font-size: 12px;
    }

.wp-block-jcore-dynamic-archive-posts__pagination nav .wp-block-jcore-dynamic-archive__pagination__link-first .wp-block-jcore-dynamic-archive__pagination__link__text {
      display: none;
    }

/*Pagination previous */

.wp-block-jcore-dynamic-archive-posts__pagination nav .wp-block-jcore-dynamic-archive__pagination__link-previous {
    background: var(--wp--preset--color--green-medium);
  }

.wp-block-jcore-dynamic-archive-posts__pagination nav .wp-block-jcore-dynamic-archive__pagination__link-previous .wp-block-jcore-dynamic-archive__pagination__link__icon::after {
      content: "\f053";
      font-family: "Font Awesome 6 Sharp";
      font-weight: 400;
      display: inline-block;
      font-size: 12px;
    }

.wp-block-jcore-dynamic-archive-posts__pagination nav .wp-block-jcore-dynamic-archive__pagination__link-previous .wp-block-jcore-dynamic-archive__pagination__link__text {
      display: none;
    }

/*Pagination next */

.wp-block-jcore-dynamic-archive-posts__pagination nav .wp-block-jcore-dynamic-archive__pagination__link-next {
    background: var(--wp--preset--color--green-medium);
  }

.wp-block-jcore-dynamic-archive-posts__pagination nav .wp-block-jcore-dynamic-archive__pagination__link-next .wp-block-jcore-dynamic-archive__pagination__link__icon::after {
      content: "\f054";
      font-family: "Font Awesome 6 Sharp";
      font-weight: 400;
      display: inline-block;
      font-size: 12px;
    }

.wp-block-jcore-dynamic-archive-posts__pagination nav .wp-block-jcore-dynamic-archive__pagination__link-next .wp-block-jcore-dynamic-archive__pagination__link__text {
      display: none;
    }

/*Pagination last */

.wp-block-jcore-dynamic-archive-posts__pagination nav .wp-block-jcore-dynamic-archive__pagination__link-last {
    background: var(--wp--preset--color--green-medium);
  }

.wp-block-jcore-dynamic-archive-posts__pagination nav .wp-block-jcore-dynamic-archive__pagination__link-last .wp-block-jcore-dynamic-archive__pagination__link__icon::after {
      content: "\f324";
      font-family: "Font Awesome 6 Sharp";
      font-weight: 400;
      display: inline-block;
      font-size: 12px;
    }

.wp-block-jcore-dynamic-archive-posts__pagination nav .wp-block-jcore-dynamic-archive__pagination__link-last .wp-block-jcore-dynamic-archive__pagination__link__text {
      display: none;
    }

/* Current link item */

.wp-block-jcore-dynamic-archive-posts__pagination nav .wp-block-jcore-dynamic-archive__pagination__link.is-current {
    background: var(--wp--preset--color--green-medium);
  }

/* Pagination load more */

.wp-block-jcore-dynamic-archive-posts__pagination {
  text-align: center;
}

a.wp-block-jcore-dynamic-archive-posts__load_more {
  padding: 1rem 2rem;
  -webkit-text-decoration: none;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--wp--preset--color--white);
  background: var(--wp--preset--color--green);
  border-color: var(--wp--preset--color--green);
}

a.wp-block-jcore-dynamic-archive-posts__load_more:hover {
    color: var(--wp--preset--color--black);
    background: var(--wp--preset--color--green-medium);
    border-color: var(--wp--preset--color--green-medium);
  }

/*
* Referenssikuvat archive grid with small spacing 
*
*/

.wp-block-jcore-dynamic-archive-posts.post-type-referenssikuva {
  padding-bottom: 4rem;
}

.wp-block-jcore-dynamic-archive-posts.post-type-referenssikuva .wp-block-jcore-dynamic-archive-posts__inner.columns-4 {
    grid-gap: 6px;
  }

.wp-block-jcore-dynamic-archive__filters__taxonomies__type.taxonomy-type-kuvakategoria__label {
  display: none;
}

.wp-block-jcore-dynamic-archive-filters__radio__input {
  display: none;
}

.wp-block-jcore-dynamic-archive
  .wp-block-jcore-dynamic-archive__filters
  .wp-block-jcore-dynamic-archive__filters__taxonomies__type
  label.wp-block-jcore-dynamic-archive-filters__radio {
  color: var(--wp--preset--color--brand);
  font-weight: 400;
  border: 1px solid var(--wp--preset--color--brand);
  border-radius: 4px;
  padding: 3px 10px;
  font-size: 12px;
  margin-bottom: 0.5rem;
  margin-right: 0.5rem;
}

.wp-block-jcore-dynamic-archive
  .wp-block-jcore-dynamic-archive__filters
  .wp-block-jcore-dynamic-archive__filters__taxonomies__type
  label.wp-block-jcore-dynamic-archive-filters__radio:hover {
    background-color: var(--wp--preset--color--green-medium);
  }

.single-post main {
  margin-bottom: 4rem;
}

.single-post main .featured-image {
    margin-bottom: 2rem;
  }

.tease {
    text-align: left;
    margin-bottom: 3rem;
    display: block;
}

.tease .image-container {
    position: relative;
    width: 100%;
    margin-bottom: 1rem;
    border-radius: 8px;
}

.tease .image-container::after {
    content: "";
    display: block;
    padding-bottom: 100%;
}

.tease .image-container img {
    position: absolute;
    -o-object-fit: cover;
    object-fit: cover;
    height: 100%;
    width: 100%;
    font-family: "object-fit: cover;";
    border-radius: 8px;

}

.tease .image-container.postcard::after {
    padding-bottom: 66%;
}

.tease .image-container.placeholder {
    background-image: url("../../assets/images/eg-banner-waterstamp.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.tease h3.post-title {
    font-size: var(--wp--preset--font-size--heading-4);
}

/* Referenssivuva-tease */

.tease-referenssikuva {
    margin-bottom: 0;
}

.tease-referenssikuva .image-container {
    margin-bottom: 0;
}

.tease-referenssikuva .image-container:hover .preview.hover {
            opacity: 1;
        }

.tease-referenssikuva .image-container .preview.hover {
        position: absolute;
        bottom: 0; 
        left: 1rem;
        margin-bottom: 1rem;
        max-width: calc(100% - 2rem);
        opacity: 0;
        color: white;
        font-size: var(--wp--preset--font-size--mini);
    }

.tease-referenssikuva .image-container:after {
        padding-bottom: 131%;
    }

/* A class for zooming images on hover with brightness reversed compared to normal image-zoom can be found in blocks/images-and-gallery.css */

.block-post_grid .posts-highlight {
    display: grid;
    grid-gap: 2rem;
    grid-template-columns: 1fr;
  }

@media (width >= 640px) {

.block-post_grid.columns-2 .posts-highlight {
        grid-template-columns: 1fr 1fr
    }
      }

@media (width >= 768px) {

.block-post_grid.columns-3 .posts-highlight {
        grid-template-columns: 1fr 1fr 1fr
    }
      }

@media (width >= 640px) {

.block-post_grid.columns-4 .posts-highlight {
        grid-template-columns: 1fr 1fr
    }
      }

@media (width >= 1024px) {

.block-post_grid.columns-4 .posts-highlight {
        grid-template-columns: 1fr 1fr 1fr 1fr
    }
      }

.masonry-grid {
  display: grid;
  grid-row-gap: 2rem !important;
  grid-template-columns: 1fr;
  grid-auto-rows: 20px;
}

.masonry-grid > * {
    width: auto !important;
    grid-row-end: span 20; /* Somewhat sane default. */
  }

@media (width >= 768px) {

.masonry-grid {
    grid-row-gap: 3rem !important
}
    .masonry-grid.columns-2,
    .masonry-grid.columns-3,
    .masonry-grid.columns-4 {
      grid-template-columns: 1fr 1fr;
    }
      .masonry-grid .tease-nr-2 .image-container {
        margin-top: 6rem;
        margin-bottom: 2rem;
      }
  }

@media (width >= 1024px) {
    .masonry-grid.columns-3 {
      grid-template-columns: 1fr 1fr 1fr;
    }
    .masonry-grid.columns-4 {
      grid-template-columns: 1fr 1fr 1fr 1fr;
    }
  }

.error404 h1 {
    font-size: var(--wp--preset--font-size--heading-1);
    margin-top: 3rem;
  }

.error404 .home-link {
    max-width: var(--wp--style--global--content-size);
    margin-top: 2rem;
    text-transform: uppercase;
    padding-bottom: 2rem;
    margin-bottom: 5rem;
  }

.search-items {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(2, 1fr);

}

.search-items article {
    background-color: var(--wp--preset--color--light);
    border-radius: 1rem;
    padding: 1rem;
  }

.pagination-block {
  --jcore-button-bg-color: transparent; /* because a-tag is styles here as btn, and .btn is one level up */
  --jcore-button-hover-bg-color: transparent;
  padding: 2rem;
  display: flex;
  justify-content: space-evenly;
}

.pagination-block > section {
    display: flex;
    align-items: center;
  }

.pagination-block div {
    padding: 0;
  }

.pagination-block div a {
      color: var(--wp--preset--color--black);
      background-color:var(--wp--preset--color--brand);
      border-radius: .5rem;
      padding: 0.75rem;
      margin: 1rem;
    }

.pagination-block div a:hover {
        -webkit-text-decoration: none;
        text-decoration: none;
        background-color: var(--wp--preset--color--green-medium);
      }

.pagination-block div.current a{
        background-color: var(--wp--preset--color--green-medium);
        color: var(--jcore-button-active-txt-color);
      }

.block-social_share {
  background: var(--wp--preset--color--white);
  border-radius: 10px;
  padding: 1.5rem;
}

@media (width >= 768px) {

.block-social_share {
    display: grid;
    grid-template-columns: auto 180px;
    grid-gap: 0.5rem;
    justify-content: end;
    justify-items: end;
    align-items: center
}
  }

.block-social_share p.share-heading {
    font-family: var(--jcore-heading-font-family);
    text-transform: uppercase;
  }

@media (width >= 768px) {

.block-social_share p.share-heading {
      margin-bottom: 0
  }
    }

.block-social_share .social-media-share a {
    -webkit-text-decoration: none;
    text-decoration: none;
  }

.block-social_share .social-media-share a i {
      margin-right: 0.5rem;
    }

/**
* Gravity Forms minimalistics if using default base theme in GF settings.
* The theme framework uses root settings, if nothing else defined. 
* Add more gereral settings to root by inspecting the element styling you want to change.
* The button styling variables are set in blocks/buttons.css
*/

:root .gform-theme--framework {
    --gf-color-primary: var(--wp--preset--color--brand);
    --gf-color-primary-darker: var(--wp--preset--color--green-medium);
    --gf-ctrl-bg-color: var(--wp--preset--color--white);
    --gf-ctrl-radius: 8px;
    --gf-ctrl-border-width: 0;
    --gf-ctrl-color: var(--wp--preset--color--black);
    --gf-ctrl-outline-color: var(--wp--preset--color--green);
    --gf-ctrl-outline-color-focus: var(--wp--preset--color--green);
    --gf-ctrl-border-color-focus: var(--wp--preset--color--green);
    --gf-ctrl-accent-color: var(--wp--preset--color--green);
    --gf-ctrl-btn-bg-color-ctrl: var(--jcore-button-bg-color);
    --gf-ctrl-btn-color-primary: var(--jcore-button-text-color);
    --gf-ctrl-btn-color-hover-primary: var(--jcore-button-hover-text-color);
    --gf-ctrl-btn-color-hover-ctrl: var(--jcore-button-hover-text-color);
    --gf-ctrl-btn-bg-color-primary: var(--jcore-button-bg-color);
    --gf-ctrl-btn-bg-color-hover-primary: var(--jcore-button-hover-bg-color);
    --gf-ctrl-btn-bg-color-hover-ctrl: var(--jcore-button-hover-bg-color);
    --gf-ctrl-btn-radius: 0;
    --gf-ctrl-btn-font-weight: var(--jcore-button-font-weight);
    --gf-ctrl-btn-text-transform: uppercase;
    --gf-ctrl-btn-font-size: var(--jcore-button-font-size);
    --gf-ctrl-btn-font-style: normal;
    --gf-ctrl-btn-font-family: var(--jcore-heading-font-family);
    --gf-ctrl-btn-font-size-md: var(--wp--preset--font-size--paragraph);
    --gf-ctrl-btn-padding-y: 1rem;
    --gf-ctrl-btn-padding-x-md: 2rem;
    --gf-ctrl-choice-check-color: var(--wp--preset--color--brand);
    --gf-field-pg-prog-bar-bg-color-blue: var(--wp--preset--color--brand);
    --gf-ctrl-label-font-size-primary: var(--wp--preset--font-size--mini);
    --gf-ctrl-label-font-size-tertiary: var(--wp--preset--font-size--mini);
    --gf-color-in-ctrl-primary: var(--wp--preset--color--green);
    --gf-color-in-ctrl-primary-darker: var(--wp--preset--color--green-medium);
    --gf-ctrl-file-zone-icon-color: var(--wp--preset--color--brand);
    --gf-form-footer-margin-y-start: 2.5rem;
  }

body .gform_wrapper .gform_fields {
      gap: 1.5rem;
    }

/* SHOP KAUPPA */

.woocommerce .before-shop-loop .woocommerce-ordering,
  .woocommerce .before-shop-loop .woocommerce-result-count {
    display: none;
  }

/* WooCommerce buttons -in primary color */

.woocommerce #respond input#submit.alt,
 .woocommerce a.button,
 .woocommerce a.button.alt,
 .woocommerce button.button.alt,
 .woocommerce input.button.alt,
 .wc-block-grid a.button,
 .wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link,
 .button.product_type_simple.add_to_cart_button,
 .button.product_type_bundle.add_to_cart_button,
 .woocommerce .button.single_add_to_cart_button.alt {
  background-color: var(--wp--preset--color--brand);
  border-radius: 0!important;
  border-color: var(--wp--preset--color--brand);
  border-width: 1px;
  border-style: solid;
  color: var(--wp--preset--color--white);
  font-family: var(--wp--preset--font-family--OpenSans);
  font-size: var(--wp--preset--font-size--paragraph);
  font-weight: 500;
  margin-top: 0;
  margin-right: .5rem;
  margin-bottom: .5rem;
  margin-left: 0;
  padding: 1rem;
  text-transform: uppercase;
  display: block;
  max-width: -moz-max-content;
  max-width: max-content;
  box-shadow: 0px 0px 0px 0px var(--wp--preset--color--black);
 }

.woocommerce #respond input#submit.alt:hover, .woocommerce a.button:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover, .wc-block-grid a.button:hover, .wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link:hover, .button.product_type_simple.add_to_cart_button:hover, .button.product_type_bundle.add_to_cart_button:hover, .woocommerce .button.single_add_to_cart_button.alt:hover {
    background-color: var(--wp--preset--color--green-medium);
    border-color: var(--wp--preset--color--green-medium);
    color: var(--wp--preset--color--black);
  }

.woocommerce #respond input#submit.alt.loading, .woocommerce a.button.loading, .woocommerce a.button.alt.loading, .woocommerce button.button.alt.loading, .woocommerce input.button.alt.loading, .wc-block-grid a.button.loading, .wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link.loading, .button.product_type_simple.add_to_cart_button.loading, .button.product_type_bundle.add_to_cart_button.loading, .woocommerce .button.single_add_to_cart_button.alt.loading {
     opacity: 0.25;
   }

.woocommerce #respond input#submit.alt.loading:after, .woocommerce a.button.loading:after, .woocommerce a.button.alt.loading:after, .woocommerce button.button.alt.loading:after, .woocommerce input.button.alt.loading:after, .wc-block-grid a.button.loading:after, .wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link.loading:after, .button.product_type_simple.add_to_cart_button.loading:after, .button.product_type_bundle.add_to_cart_button.loading:after, .woocommerce .button.single_add_to_cart_button.alt.loading:after {
       font-family: WooCommerce;
       content: "";
       animation: spin 2s linear infinite;
       margin-left: 0.5em;
       display: inline-block;
       width: auto;
       height: auto;
     }

.woocommerce #respond input#submit.alt.added:after, .woocommerce a.button.added:after, .woocommerce a.button.alt.added:after, .woocommerce button.button.alt.added:after, .woocommerce input.button.alt.added:after, .wc-block-grid a.button.added:after, .wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link.added:after, .button.product_type_simple.add_to_cart_button.added:after, .button.product_type_bundle.add_to_cart_button.added:after, .woocommerce .button.single_add_to_cart_button.alt.added:after {
       font-family: WooCommerce;
       content: "";
       margin-left: 0.5em;
       display: inline-block;
       width: auto;
       height: auto;
     }

.wp-block-button.wc-block-grid__product-add-to-cart .wp-block-button__link {
     margin: 0 0 1rem 0 !important;
   }

.wp-block-button.wc-block-grid__product-add-to-cart a.added_to_cart.wc-forward {
     display: none;
   }

/* Add to cart button with shopping icon */

.wc-block-grid__product-add-to-cart.wp-block-button
   .wp-block-button__link::before,
 .button.product_type_simple.add_to_cart_button::before,
 .button.product_type_bundle.add_to_cart_button::before,
 .woocommerce .button.single_add_to_cart_button.alt::before {
   font-family: "Font Awesome 6 Pro";
   font-weight: 900;
   content: "\f07a";
   margin-right: 0.5em;
   display: inline-block;
   width: auto;
   height: auto;
 }

.wc-block-grid {
   font-weight: normal;
   font-weight: initial;
 }

.wc-block-grid__products {
   padding-left: 0 !important;
 }

article.product,
 li.product {
   margin-bottom: 2rem;
 }

article.product .product-tease, li.product .product-tease {
     height: 100%;
   }

article.product .product-tease .product-card, li.product .product-tease .product-card {
       height: 100%;
     }

article.product .product-tease .product-card .card-body, li.product .product-tease .product-card .card-body {
         display: flex;
         flex-flow: column;
         padding: 2rem;
         height: 100%;
       }

article.product .product-tease .product-card .card-body .price, li.product .product-tease .product-card .card-body .price {
           color: var(--wp--preset--color--brand);
           font-size: 22px;
           font-weight: 700;
         }

article.product .product-tease .product-card .card-body p,
         article.product .product-tease .product-card .card-body ul,
         li.product .product-tease .product-card .card-body p,
         li.product .product-tease .product-card .card-body ul {
           font-size: 12px;
         }

article.product .product-tease .product-card .card-body ul, li.product .product-tease .product-card .card-body ul {
           padding-left: 1rem;
         }

article.product .product-tease .product-card .card-body ul li, li.product .product-tease .product-card .card-body ul li {
             list-style-type: disc;
           }

article.product.product-type-variable .price, li.product.product-type-variable .price {
       display: none;
     }

article.product.product-type-variable .woocommerce-variation-price .price, li.product.product-type-variable .woocommerce-variation-price .price {
         display: inline;
         display: initial;
       }

/* Product bundle */

.product-taxonomy-card {
   border-bottom: 1px solid var(--wp--preset--color--dark);
 }

/* WooCommerce Search */

@media (width >= 768px) {
     .product-search-form:before {
       position: absolute;
       left: 1rem;
       font-family: "Font Awesome 6 Pro";
       content: "\f002";
       top: 50%;
       transform: translateY(-50%);
       color: var(--bs-gray-500);
       font-size: 2rem;
       font-weight: 300;
     }
   }

.product-search.product-search-filter-search {
   margin: auto;
   padding-left:  1rem;
   padding-right: 1rem;
 }

.product-search.product-search-filter-search input {
     border: none;
     font-size: 1.25rem;
     padding: 1.5rem;
     font-weight: 500;
     border-radius: 25px;
     outline: none;
     box-shadow: 2px 2px 5px 0 var(--bs-gray-400);
   }

@media (width >= 768px) {

.product-search.product-search-filter-search input {
       text-indent: 2.5rem
   }
     }

.product-search-filter-terms .product-search-filter-product_cat .term-name {
   padding: 0.5rem 1rem !important;
   margin: 0 0.5rem 0.5rem 0 !important;
   font-size: 1rem;
   font-weight: 500 !important;
   position: relative;
 }

.product-search-filter-terms
   .product-search-filter-product_cat
   .current-cat
   .term-name {
   background: var(--wp--preset--color--brand);
   border: 1px solid var(--wp--preset--color--brand);
 }

.content-container .product-search-filter-terms .product-search-filter-items {
   padding-left: 0;
 }

.content-container ul.product-categories {
   padding-left: 0;
 }

/* Cart */

.wp-block-woocommerce-cart.alignwide {
  padding:2rem;
 }

.woocommerce button[name="update_cart"],
 .woocommerce input[name="update_cart"] {
   display: none;
 }

.woocommerce .woocommerce-cart-form .product-quantity {
   display: none;
 }

.wc-proceed-to-checkout {
   text-align: right;
 }

.woocommerce table.shop_table {
   border: none;
   background-color: white;
   font-weight: 400;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
 }

.woocommerce table.shop_table th {
   letter-spacing: 0.02rem;
   padding: 1rem;
   font-weight: 500;
   font-size: 16px;
 }

.woocommerce table.shop_table td {
   letter-spacing: 0.02rem;
   padding: 1rem;
   word-break: break-word;
   font-size: 16px;
 }

.woocommerce table.shop_table td small {
     font-size: 12px;
   }

.woocommerce table.shop_table .order-total {
     font-weight: 700;
   }

@media (width <= 768px) {

.woocommerce table.shop_table .order-total .empty-col,
     .woocommerce table.shop_table .order-total .total-md-up {
         display: none
     }
       }

.woocommerce-cart-form {
   margin-bottom: 24px;
 }

.woocommerce-cart-form #toggleBtn {
     cursor: pointer;
     color: var(--wp--preset--color--white);
     margin-top: 1rem;
   }

.woocommerce-cart-form .shop_table {
     margin-bottom: 0.5rem !important;
   }

@media (width <= 768px) {

.woocommerce-cart-form .shop_table .product-remove {
         display: inline-table;
         padding: 1rem 0.5rem 1rem 0;
         vertical-align: top;
         float: right;
         border-top: 0
     }

.woocommerce-cart-form .shop_table .product-name {
         display: inline-table;
         width: 88%;
         padding: 1rem 0 1rem 1rem;
         border-top: 0;
         vertical-align: top
     }
         .woocommerce-cart-form .shop_table .cart-discount .empty-col,
         .woocommerce-cart-form .shop_table .cart-discount .cart-coupon-label {
           display: none;
         }
         .woocommerce-cart-form .shop_table .fee .empty-col,
         .woocommerce-cart-form .shop_table .fee .cart-coupon-label {
           display: none;
         }
         .woocommerce-cart-form .shop_table .fee td.title::before {
           display: none;
         }
         .woocommerce-cart-form .shop_table_responsive .cart_item.bundled_table_item .product-name .bundled-product-name.bundled_table_item_indent {
           text-align: left;
         }
         .woocommerce-cart-form .shop_table_responsive .cart_item.bundled_table_item .product-price {
           display: none;
         }
         .woocommerce-cart-form .shop_table_responsive .cart_item.bundled_table_item .product-subtotal {
           display: none;
         }
         .woocommerce-cart-form .shop_table_responsive .cart_item.bundled_table_item .product-name::before {
           content: "";
         }
         .woocommerce-cart-form .shop_table_responsive .order-total td::before {
           content: attr(data-title);
         }
       }

.woocommerce-checkout .cart-subtotal,
 .woocommerce-checkout .woocommerce-shipping-totals {
   display: none;
 }

.woocommerce table.shop_table_responsive tr:nth-child(2n) td,
 .woocommerce-page table.shop_table_responsive tr:nth-child(2n) td {
   background-color: transparent;
   background-color: initial;
 }

.woocommerce table.shop_table_responsive tr:nth-child(2n),
 .woocommerce-page table.shop_table_responsive tr:nth-child(2n) {
   background-color: rgba(0, 0, 0, 0.025);
 }

.woocommerce-cart-form .shop_table .coupon .input-text {
   width: 11.313rem !important;
   border: 2px solid #e2ecf6;
   background-color: #f3f7fb;
   border-radius: 0.25rem;
   font-size: 1.25rem;
   margin: 0 14px 0 0 !important;
   padding: 0.5rem !important;
   text-transform: uppercase;
 }

@media (width <= 640px) {

.woocommerce-cart-form .shop_table .coupon .input-text {
     width: 47% !important;
     margin: 0 !important
 }
   }

.woocommerce-cart-form .shop_table .coupon .input-text::-moz-placeholder {
     text-transform: none;
   }

.woocommerce-cart-form .shop_table .coupon .input-text::placeholder {
     text-transform: none;
   }

@media (width <= 640px) {

.woocommerce-cart-form .shop_table .coupon .button {
     width: 48%;
     padding: 0.618em 0.5em
 }
   }

.woocommerce #respond input#submit,
 .woocommerce a.button,
 .woocommerce button.button,
 .woocommerce input.button {
   
 }

/* Cart info */

.cart-info,
 .checkout-info {
   display: flex;
   align-items: center;
 }

@media (width >= 768px) {

.cart-info,
 .checkout-info {
     padding: 0
 }
   }

.cart-info p, .checkout-info p {
     margin: 0;
     position: relative;
   }

@media (width >= 768px) {

.cart-info p, .checkout-info p {
       padding-left: 4rem
   }
     }

.cart-info p::before, .checkout-info p::before {
       content: "\f06a";
       display: none;
       font-family: "Font Awesome 6 Pro";
       font-weight: 400;
       font-size: 1.5rem;
       color: var(--bs-info);
       position: absolute;
       left: 1.5rem;
       top: 50%;
       transform: translateY(-50%);
     }

@media (width >= 768px) {

.cart-info p::before, .checkout-info p::before {
         display: block
     }
       }

.cart-info.cart-info-danger p:before, .cart-info .checkout-info-danger p:before, .checkout-info.cart-info-danger p:before, .checkout-info .checkout-info-danger p:before {
       color: var(--wp--preset--color--danger);
     }

#checkout-info-personal {
   display: none;
 }

/* Checkout */

.wp-block-woocommerce-checkout.alignwide{
  padding: 2rem;
}

/* Thank you page */

.woocommerce-thankyou-order-details {
   padding-left: 0 !important;
   font-size: var(--wp--preset--font-size--heading-2);
 }

h1.woocommerce-thankyou-order-received {
  
 }

.order_instructions .social-media-links i.fa-inverse {
     color: inherit;
   }

.archive.tax-product_tag .term-description, .archive.tax-product_category .term-description {
       text-align: center;
     }

.archive.tax-product_tag .extra-info > *, .archive.tax-product_category .extra-info > * {
       
     }

.return-to-shop a.wc-backward:before {
       font-family: "Font Awesome 6 Pro";
       font-weight: normal;
       font-style: normal;
       display: inline-block;
       text-decoration: inherit;
       content: "\f060";
       padding-right: 0.25rem;
       font-size: 1rem;
     }

.product-lift {
    display: grid;
    grid-row-gap: 3rem;
    grid-column-gap: 1rem;
    grid-template-columns: 1fr;

}

@media (width >= 640px) {

.product-lift {
      grid-template-columns: 1fr 1fr

}
    }

@media (width >= 768px) {

.product-lift {
      grid-template-columns: 1fr 1fr

}
    }

@media (width >= 1024px) {

.product-lift {
      grid-template-columns: 1fr 1fr 1fr

}
    }

.product-tease .perfect-square {
    position: relative;
    width: 100%;
    margin-bottom: 1rem;
    border-radius: 8px;
}

.product-tease .perfect-square::after {
    content: "";
    display: block;
    padding-bottom: 100%;
}

.product-tease .perfect-square img {
    position: absolute;
    -o-object-fit: cover;
    object-fit: cover;
    height: 100%;
    width: 100%;
    font-family: "object-fit: cover;";
    border-radius: 8px;

}

.product-tease .perfect-square.wide::after {
    padding-bottom: 131%;
}

h3.entry-title {
  margin-bottom: .5rem;
  margin-top: 1rem;
  font-size: var(--wp--preset--font-size--heading-5);
}

.added_to_cart.wc-forward {
  display: none;
}

.woodata {
  display: flex;
  flex-flow: column nowrap;
}

.woodata span.price {
    padding-bottom: .5rem;
    color: var(--wp--preset--color--black);
  }

.product-tease-content a {
  -webkit-text-decoration: none;
  text-decoration: none;
}

.product-tease-content a:hover {
    -webkit-text-decoration: underline;
    text-decoration: underline;
  }

/* 
* Single product 
*
*/

/* Notices wrapper */

.woocommerce .woocommerce-notices-wrapper {
  position: absolute;
  top: 6rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
 }

.woocommerce .woocommerce-notices-wrapper .woocommerce-message {
      border-top-color: var(--wp--preset--color--green);
      background-color: var(--wp--preset--color--green-light);
    }

.woocommerce .woocommerce-notices-wrapper .woocommerce-message::before {
      content: "\e015";
      color: var(--wp--preset--color--green);
    }

/*Single product */

.woocommerce div.product .single-product-details .breadcrumb-container {
   text-transform: uppercase;
   font-size: 12px;
   padding-top:2rem;
   letter-spacing: 1px;
  }

.woocommerce div.product .single-product-details ul.wc-tabs {
  display: none;
  }

/* Entry Summary */

.woocommerce div.product h1 {
      margin-right: 1rem;
      display: inline-block;
      font-size: var(--wp--preset--font-size--heading-1);
    }

.woocommerce div.product .product_meta a {
        display: inline-flex;
        background-color: var(--wp--preset--color--green-medium);
        border-radius: 4px;
        padding:10px 6px;
        text-transform: uppercase;
        font-size: 12px;
        margin-left: .5rem;
        -webkit-text-decoration: none;
        text-decoration: none;
        margin-bottom: 1rem;
      }

.woocommerce div.product .product_meta a:first-of-type {
        margin-left: -.5rem;
      }

.woocommerce div.product .sku_wrapper {
        display: none;
    }

.woocommerce div.product .posted_in{ 
      color: var(--wp--preset--color--light);
    }

.woocommerce div.product p.stock {
      text-transform: uppercase;
      color: var(--wp--preset--color--green);
      margin-bottom: 1rem;
    }

.woocommerce div.product p.price,.woocommerce div.product span.price {
        color: var(--wp--preset--color--black);
        font-weight: 700;
        font-size: var(--wp--preset--font-size--heading-3);
    }

.woocommerce div.product form.cart {
      display: flex;
      justify-content: start;
      align-items: center;
    }

.woocommerce div.product form.cart div.quantity {
        float: none;
        float: initial;
        margin-bottom: .5rem;
        text-align: left;
      }

.woocommerce div.product form.cart div.quantity input {
          padding: .8rem;
          background-color: var(--wp--preset--color--white);
          border-radius: 4px;
          font-size: 16px;
          border: 2px solid var(--wp--preset--color--green);
          margin-right: 1rem;
        }

.woocommerce div.product form.cart button {
        float: none;
        float: initial;
        margin-bottom: 1rem;
      }

.woocommerce div.product .woocommerce-product-gallery__image {
      border-radius: 8px;
    }

.woocommerce div.product .woocommerce-product-gallery__image img.zoomImg {
        border-radius: 8px;
      }

/**
*
*Search in nav that opens search-field 
*AND 
*styles the Gutenberg search-block like Ilme nav search field. 
*
*/

.toggle-search .fa-search {
    color: var(--wp--preset--color--white);
    }

.searchbar-container {
      display: none;
    }

.searchbar-container.toggle {
      display: block;
      background-color: var(--wp--preset--color--brand);
    }

.searchform, .wp-block-search {
      margin-bottom: 6px;
      margin-top: 6px;
    }

.searchform input, .wp-block-search input {
        -webkit-appearance: none;
           -moz-appearance: none;
                appearance: none;
        border: 1px solid var(--jcore-button-bg-color);
        flex-grow: 1;
        margin-left: 0;
        margin-right: 0;
        min-width: 3rem;
        padding: .45rem 1rem;
        text-decoration: none !important;
        text-decoration: initial !important;
        font-size: var(--jcore-button-font-size);
        margin-bottom: 8px;
        margin-right: 6px;
      }

.searchform .wp-block-search__button, .searchform .btn[type="submit"], .wp-block-search .wp-block-search__button, .wp-block-search .btn[type="submit"] {
        padding: calc(0.45rem + 1px) calc(1rem + 1px);
        font-size: var(--jcore-button-font-size);
        margin-left: 0;
        margin-bottom: 8px;
        background-color: var(--jcore-button-bg-color);
        color: var(--jcore-button-text-color);
        text-transform: uppercase;
      }

.searchform .wp-block-search__inside-wrapper, .wp-block-search .wp-block-search__inside-wrapper {
        margin-top: 6px;
        display: flex;
      }

/* Buttons, all hover styling comes from here, the rest is set in theme.json */

.wp-block-buttons .wp-block-button:hover .wp-block-button__link {
          color: var(--wp--preset--color--black);
          background: var(--wp--preset--color--green-medium);
          border-color: var(--wp--preset--color--green-medium);
        }

.wp-block-buttons .wp-block-button.is-style-outline:hover .wp-element-button {
          color: var(--wp--preset--color--black);
          background: var(--wp--preset--color--green-medium);
          border-color: var(--wp--preset--color--green-medium);
        }

/**
* Set buttons colors and font variables for use elsewhere in theme where not G-berg,for example btn-class for form submit or tease-link or pagination?
*/

:root {
  --jcore-button-bg-color: var(--wp--preset--color--green); 
  --jcore-button-border-color:  var(--wp--preset--color--green);
  --jcore-button-text-color: var(--wp--preset--color--white);
  --jcore-button-active-bg-color: var(--wp--preset--color--green-medium);
  --jcore-button-active-txt-color: var(--wp--preset--color--dark);
  --jcore-button-hover-bg-color: var(--wp--preset--color--green-medium);
  --jcore-button-hover-text-color: var(--wp--preset--color--black);
  --jcore-button-hover-border-color:  var(--wp--preset--color--green-medium);
  --jcore-button-font-size: var(--wp--preset--font-size--paragraph);
  --jcore-button-padding: 1rem 2rem;
  --jcore-button-font-weight:600;
}

.btn {
    background-color: var(--jcore-button-bg-color);
    color: var( --jcore-button-text-color);
    border-color: var(--jcore-button-border-color);
    padding: 1rem 2rem;
    padding: var(--jcore-button-padding);
    font-size: var(--jcore-button-font-size);
    text-transform: uppercase;
}

.btn:hover {
      background-color: var(--jcore-button-hover-bg-color);
      color: var( --jcore-button-hover-text-color);
      border-color: var(--jcore-button-hover-border-color);
  }

/*
* Gutenberg block Details styling as accordion 
* 
*
*/

/* PDF and CAD special styles, then basics */

details.wp-block-details.pdf summary::marker {
    content: "\f1c1\ \ ";
    font-family: "Font Awesome 6 Sharp";
    font-weight: 300;
    color: var(--wp--preset--color--brand);
  }

details.wp-block-details.cad summary::marker {
    content: "\e672\ \ ";
    font-family: "Font Awesome 6 Sharp";
    font-weight: 300;
    color: var(--wp--preset--color--brand);
  }

/*
*
* General Details styles 
*
*/

details.wp-block-details {
  background-color: var(--wp--preset--color--white);
}

details.wp-block-details summary {
    font-family: var(--jcore-heading-font-family);
    font-size: var(--wp--preset--font-size--heading-5);
    background-color: var(--wp--preset--color--white);
    font-weight: 400;
    padding: 1rem 2rem 1rem 1rem;
  }

details.wp-block-details summary::marker {
    content: none;
  }

/* Add a custom transition when opening/closing. */

.wp-block-details {
  transition: all 0.5s ease-in-out;
  margin-bottom: 1rem;
  border-radius: 4px;
}

/* Add horizontal margin to nested blocks/elements. */

.wp-block-details > :where(:not(summary)) {
  margin-left: 1rem;
  margin-right: 1rem;
}

/* If open, add some bottom padding to avoid content butting against the bottom. */

.wp-block-details[open] {
  padding-bottom: 2rem;
}

/* Base `summary` element styling. */

.wp-block-details summary {
  transition: all 0.3s ease-in-out;
  box-sizing: border-box;
  padding: 1rem 2rem 1rem 1rem;
  font-family: var(--jcore-heading-font-family);
  font-size: var(--wp--preset--font-size--heading-5);
  background-color: var(--wp--preset--color--white);
  font-weight: 400;
}

.wp-block-details summary + * {
    margin-top: 1rem;
  }

/* Change the background of the `summary` element based on state. */

.wp-block-details[open] summary,
.wp-block-details summary:hover,
.wp-block-details summary:focus {
  background: var(--wp--preset--color--green-light);
}

.wp-block-details summary::after {
  content: "\f078";
  font-family: "Font Awesome 6 Sharp";
  font-weight: 400;
  float: right;
  text-align: right;
}

.wp-block-details[open] summary::after {
  content: "\f077";
  font-family: "Font Awesome 6 Sharp";
  font-weight: 400;
}

/* Wrapper to show videos embedded with Gutenberg responsively Works out of the box for YouTube videos. Add videowrapper class to work with any embedded iframe */

.wp-block-embed-youtube .wp-block-embed__wrapper, .videowrapper .wp-block-embed__wrapper {
    aspect-ratio: 16/9;
  }

.wp-block-embed-youtube .wp-block-embed__wrapper iframe, .videowrapper .wp-block-embed__wrapper iframe {
      width: 100%;
      height: 100%;
    }

/*FILE block*/

.wp-block-file {
    position: relative;
  }

.wp-block-file a:hover {
    -webkit-text-decoration: underline;
    -webkit-text-decoration: underline;
    text-decoration: underline;
  }

.wp-block-file a.wp-block-file__button {
    border-radius: 0;
    background-color: var(--wp--preset--color--brand);
    font-size: var(--wp--preset--font-size--mini);
    text-transform: uppercase;
    position: relative;
    padding: 0.45rem 2rem 0.45rem 2.5rem;
    color: var(--wp--preset--color--white);
    margin-left: 0;
    width: -moz-max-content;
    width: max-content;
  }

.wp-block-file a.wp-block-file__button:hover {
    opacity: 1;
  }

.wp-block-file a.wp-block-file__button:before {
    content: "\f019";
    font-family: "Font Awesome 6 Sharp";
    font-weight: 600;
    position: absolute;
    left: 8px;
    font-size: 16px;
    color: var(--wp--preset--color--white);
    top: 5px;
  }

/* Media and images */

.wp-block-image.alignleft {
        float: left;
    }

.wp-block-image.alignright {
        float: right;
    }

.wp-block-image.aligncenter {
        margin-left: auto;
        margin-right: auto;
    }

.wp-block-image {
    border-radius: 8px;
}

.wp-block-image img {
        border-radius: 8px;
    }

.wp-block-image img.no-radius {
        border-radius: 0;
    }

.wp-block-cover:not(.wave):not(.front):not(.no-radius) .wp-block-cover__image-background {
        border-radius: 8px;
    }

.wp-block-media-text .wp-block-media-text__content {
        /* remove the default 7% horizontal padding */
        padding: 0;
    }

/*Lightbox enabled, but no icon on the image on hover.*/

figure button.lightbox-trigger {
        display: none;
    }

/*
* A class for zooming images on hover *
*/

.img-hover-zoom {
    overflow: hidden;
}

.img-hover-zoom img {
    transition: transform 0.5s ease;
    filter: brightness(90%);
}

.img-hover-zoom:hover img {
    transform: scale(1.1);
    filter: brightness(100%);
}

/*
* A class for zooming images on hover with brightness reversed compared to normal image-zoom *
*/

.img-hover-zoom-reverse {
    overflow: hidden; 
  }

.img-hover-zoom-reverse img {
    transition: transform .5s ease;
    filter: brightness(100%);
  }

.img-hover-zoom-reverse:hover img {
    transform: scale(1.1);
    filter: brightness(85%);
  }

/* Gallery */

.blocks-gallery-grid figure.wp-block-image figcaption, .wp-block-gallery figure.wp-block-image figcaption {
        padding: 1em 0.7em 0.77em;
        font-weight: 300;
        font-size: 16px !important;
    }

/* 
* Gutenberg pullquote and blockquote -nothing set in theme.json
*
*/

blockquote.wp-block-quote {
    margin-bottom: 2rem;
  }

/*Blockquote */

.wp-block-pullquote {
    margin-bottom: 2rem;
    padding: 0;
  }

.wp-block-pullquote blockquote {
      border: none;
      margin-top: 5rem;
    }

.wp-block-pullquote blockquote p {
        font-family: var(--jcore-heading-font-family);
        font-size: var(--wp--preset--font-size--heading-4);
        font-style: italic;
        text-align: center;
        font-weight: 300;
        margin-bottom: 2rem;
        line-height: 1.17;
      }

.wp-block-pullquote blockquote p:first-of-type:before {
          color: var(--wp--preset--color--brand);
          content: url(../../assets/images/quote-lehti.svg);
          position: absolute;
          top: -3.5rem;
          left: calc(50% - 1.1rem);
        }

.wp-block-pullquote blockquote p:last-of-type:after {
          content: "";
        }

.wp-block-pullquote blockquote cite {
        font-family: var(--jcore-heading-font-family);
        font-size: var(--wp--preset--font-size--mini);
        text-transform: uppercase;
        text-align: center;
        font-style: normal;
        color: var(--wp--preset--color--brand);
      }

.wp-block-pullquote blockquote > * {
        position: relative;
      }

/* RSS Feed block */

ul.wp-block-rss {
    list-style: none;
  }

.wp-block-rss .wp-block-rss__item {
    background-color: var(--wp--preset--color--white);
    margin-bottom: 0;
    min-height: 150px;
    padding: 1rem;
  }

.wp-block-rss .wp-block-rss__item a {
    color: var(--wp--preset--color--brand);
    font-size: var(--wp--preset--font-size--heading-4);
    margin-bottom: 0.75rem;
    -webkit-text-decoration: none;
    text-decoration: none;
  }

.wp-block-rss .wp-block-rss__item a::after {
      content: "\ \ \f09e";
      font-family: "Font Awesome 6 Sharp";
      font-weight: 400;
    }

.wp-block-rss .wp-block-rss__item a:hover {
      -webkit-text-decoration: underline;
      text-decoration: underline;
      text-underline-offset: 3px;
      text-decoration-thickness: from-font;
    }

.wp-block-rss .wp-block-rss__item .wp-block-rss__item-publish-date {
    font-weight: bold;
    margin: 0.75rem 0;
    font-size: var(--wp--preset--font-size--mini);
  }

.wp-block-rss .wp-block-rss__item:nth-of-type(2n + 1) {
    background-color: var(--wp--preset--color--green-light);
  }

/*WP Block Table, style-variation: stripes */

.wp-block-table.is-style-stripes tbody tr:nth-child(2n + 1) {
    background-color: var(--wp--preset--color--white);
  }

.wp-block-table.is-style-stripes tbody tr {
    background-color: var(--wp--preset--color--green-light);
  }

.wp-block-table thead {
    border-bottom: none;
  }

/* 
* YOAST Breadcrumbs block styling on differnet backgrounds
*
*/

.wave .yoast-breadcrumbs {
    color: var(--wp--preset--color--white);
  }

.wave .yoast-breadcrumbs span {
      font-size: 12px;
      text-transform: uppercase;
    }

.wave .yoast-breadcrumbs a {
      color: var(--wp--preset--color--white);
    }

.yoast-breadcrumbs span {
      font-size: 12px;
      text-transform: uppercase;
    }

.yoast-breadcrumbs .breadcrumb_last {
      color: var(--wp--preset--color--green-medium);
    }

.yoast-breadcrumbs a {
      color: var(--wp--preset--color--black);
    }

/*# sourceMappingURL=theme.css.map */