/*!***************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./resources/scss/screen.scss ***!
  \***************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
 * Shared, not frontend-only: editor.css is its own bundle and never loads
 * frontend/, so without this the canvas leaves elements that core does not
 * style — headings and paragraphs among them — as content-box. Padding then
 * adds to their max-width instead of eating into it, and anything the theme
 * offsets by padding sits in a different place in the editor than it does on
 * the live page.
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}
/**
 * Breakpoints — aligned with WordPress / Gutenberg defaults.
 *
 * xs:  480px   mobile small
 * sm:  600px   WordPress "small"
 * md:  782px   WordPress "medium" (admin bar collapse point)
 * lg:  1024px  tablet / laptop
 * menu: 1200px header hands over to the mobile menu
 * xl:  1280px  desktop
 * 2xl: 1600px  wide
 *
 * Usage:
 *   @include bp-up(md)  { … }   → min-width: 782px
 *   @include bp-down(md){ … }   → max-width: 781.98px
 *   @include bp-between(sm, lg) { … }
 */
/**
 * Container queries — same breakpoint scale as the media query helpers.
 *
 * The queried element (or an ancestor) must have container-type set.
 * Use the `container` mixin to declare it, or set it manually.
 *
 * Usage:
 *   @include container              { … }   → container-type: inline-size
 *   @include container(card)        { … }   → container-type: inline-size; container-name: card
 *   @include cq-up(md)              { … }   → @container (min-width: 782px)
 *   @include cq-up(md, card)        { … }   → @container card (min-width: 782px)
 *   @include cq-down(lg)            { … }   → @container (max-width: 1023.98px)
 *   @include cq-between(sm, xl)     { … }   → @container (min-width: 600px) and (max-width: 1279.98px)
 */
.box-shadow {
  box-shadow: 0 8px 16px -2px rgba(54, 53, 52, 0.1);
}
.wp-block-button {
  --button-spacing: 0.875rem 1.5rem;
  --button-bg: var(--wp--preset--color--primary);
  --button-txt: var(--wp--preset--color--white);
  --button-hover-bg: var(--wp--preset--color--dark-magenta);
  --button-hover-txt: var(--wp--preset--color--white);
  --button-hover-border: var(--wp--preset--color--dark-magenta);
  --button-font-size: 1rem;
  --button-font-weight: 500;
  --button-line-height: 1.25;
  --button-radius: 90px;
  --button-border-color: transparent;
  --button-border-width: 2px;
}
@media screen and (min-width: 782px) {
  .wp-block-button {
    --button-font-size: 1.125rem;
    --button-font-weight: 600;
    --button-spacing: 0.875rem 1.5rem;
  }
}
.is-style-diakon .wp-block-button .wp-block-button__link {
  --button-bg: var(--wp--preset--color--diakon);
  --button-hover-bg: var(--wp--preset--color--dark-magenta);
  --button-hover-border: var(--wp--preset--color--dark-magenta);
}
.is-style-foundation .wp-block-button .wp-block-button__link {
  --button-bg: var(--wp--preset--color--primary);
  --button-hover-bg: var(--wp--preset--color--saatio);
  --button-hover-border: var(--wp--preset--color--saatio);
}
.wp-block-button .wp-block-button__link {
  padding: var(--button-spacing);
  background-color: var(--button-bg);
  color: var(--button-txt);
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: var(--wp--preset--spacing--md);
  border: var(--button-border-width) solid var(--button-border-color);
  border-radius: var(--button-radius);
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  line-height: var(--button-line-height);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.wp-block-button .wp-block-button__link:hover {
  background: var(--button-hover-bg);
  color: var(--button-hover-txt);
  border-color: var(--button-hover-border);
}
.wp-block-button.is-style-secondary, .wp-block-button.is-style-arrow {
  --button-bg: var(--wp--preset--color--white);
  --button-txt: var(--wp--preset--color--primary);
  --button-border-color: var(--wp--preset--color--primary);
  --button-hover-bg: var(--wp--preset--color--white);
  --button-hover-txt: var(--wp--preset--color--dark-magenta);
  --button-hover-border: var(--wp--preset--color--dark-magenta);
}
.wp-block-button.is-style-arrow .wp-block-button__link::after {
  content: "";
  display: inline-block;
  width: 18px;
  height: 16px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width=%2718%27 height=%2716%27 viewBox=%270 0 18 16%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M10.7045 0.287676C10.3111 -0.0999452 9.67798 -0.0952564 9.29036 0.298149C8.90274 0.691555 8.90743 1.3247 9.30083 1.71232L14.6712 7.00372H1C0.447715 7.00372 0 7.45144 0 8.00372C0 8.55601 0.447716 9.00372 1 9.00372H14.6646L9.30083 14.2886C8.90743 14.6762 8.90274 15.3094 9.29036 15.7028C9.67798 16.0962 10.3111 16.1009 10.7045 15.7133L17.6287 8.89087C18.1256 8.40126 18.1256 7.59967 17.6287 7.11006L10.7045 0.287676Z%27 fill=%27%238C1B64%27/%3E%3C/svg%3E%0A");
          mask-image: url("data:image/svg+xml,%3Csvg width=%2718%27 height=%2716%27 viewBox=%270 0 18 16%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M10.7045 0.287676C10.3111 -0.0999452 9.67798 -0.0952564 9.29036 0.298149C8.90274 0.691555 8.90743 1.3247 9.30083 1.71232L14.6712 7.00372H1C0.447715 7.00372 0 7.45144 0 8.00372C0 8.55601 0.447716 9.00372 1 9.00372H14.6646L9.30083 14.2886C8.90743 14.6762 8.90274 15.3094 9.29036 15.7028C9.67798 16.0962 10.3111 16.1009 10.7045 15.7133L17.6287 8.89087C18.1256 8.40126 18.1256 7.59967 17.6287 7.11006L10.7045 0.287676Z%27 fill=%27%238C1B64%27/%3E%3C/svg%3E%0A");
  background-color: currentcolor;
  transition: transform 0.2s ease;
}
.wp-block-button.is-style-arrow .wp-block-button__link:hover::after {
  transform: translateX(0.25rem);
}
@media (prefers-reduced-motion: reduce) {
  .wp-block-button.is-style-arrow .wp-block-button__link::after {
    transition: none;
  }
}
.wp-block-button.is-style-arrow-circle {
  --button-bg: var(--wp--preset--color--primary);
  --button-txt: var(--wp--preset--color--white);
}
.wp-block-button.is-style-arrow-circle .wp-block-button__link {
  width: 56px;
  height: 56px;
  padding: 16px 16px 16px 12px;
  border-radius: 9999px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 0;
}
.wp-block-button.is-style-arrow-circle .wp-block-button__link span[data-rich-text-placeholder] {
  display: none !important;
}
.wp-block-button.is-style-arrow-circle .wp-block-button__link .screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}
.wp-block-button.is-style-arrow-circle .wp-block-button__link::after {
  content: "";
  display: block;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M11.2727 3.68664C10.8935 3.28513 10.9115 2.65222 11.3131 2.273C11.7146 1.89378 12.3475 1.91185 12.7267 2.31337L21.227 11.3134C21.591 11.6987 21.591 12.3012 21.2271 12.6866L12.7267 21.688C12.3476 22.0896 11.7147 22.1077 11.3131 21.7285C10.9116 21.3493 10.8934 20.7164 11.2726 20.3149L19.1245 12.0001L11.2727 3.68664Z%27 fill=%27%23FCFDFF%27 /%3E%3C/svg%3E%0A");
          mask-image: url("data:image/svg+xml,%3Csvg width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M11.2727 3.68664C10.8935 3.28513 10.9115 2.65222 11.3131 2.273C11.7146 1.89378 12.3475 1.91185 12.7267 2.31337L21.227 11.3134C21.591 11.6987 21.591 12.3012 21.2271 12.6866L12.7267 21.688C12.3476 22.0896 11.7147 22.1077 11.3131 21.7285C10.9116 21.3493 10.8934 20.7164 11.2726 20.3149L19.1245 12.0001L11.2727 3.68664Z%27 fill=%27%23FCFDFF%27 /%3E%3C/svg%3E%0A");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  background-color: var(--button-txt);
}
.wp-block-button.is-style-arrow-circle .wp-block-button__link:hover {
  background: var(--button-hover-bg);
}
.wp-block-button.is-style-plain-link .wp-block-button__link {
  display: inline;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  font-size: inherit;
  font-weight: 600;
  line-height: 1.5;
  color: var(--wp--preset--color--primary);
  text-decoration: underline;
}
.wp-block-button.is-style-plain-link .wp-block-button__link:hover {
  background: none;
  color: var(--wp--preset--color--dark-magenta);
  text-decoration: none;
}
.wp-block-button.is-style-plain-link .wp-block-button__link:focus, .wp-block-button.is-style-plain-link .wp-block-button__link:active {
  color: var(--wp--preset--color--dark-magenta);
}
.wp-block-button.is-expired {
  --button-hover-bg: var(--button-bg);
  --button-hover-txt: var(--button-txt);
  --button-hover-border: var(--button-border-color);
}
.wp-block-button.is-expired .wp-block-button__link {
  opacity: 0.5;
  cursor: not-allowed;
}
.wp-block-post-excerpt__more-link {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--md);
  padding: 0.625rem 1.5rem;
  border: 2px solid transparent;
  border-radius: 90px;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.25;
  text-decoration: none;
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
  margin-top: var(--wp--preset--spacing--xl);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
@media screen and (min-width: 782px) {
  .wp-block-post-excerpt__more-link {
    font-size: 1.125rem;
    font-weight: 600;
    padding: 1rem 1.5rem;
  }
}
.wp-block-post-excerpt__more-link:hover {
  background-color: var(--wp--preset--color--dark-magenta);
}
.site-saatio .wp-block-post-excerpt__more-link {
  background-color: var(--wp--preset--color--saatio);
}
.site-saatio .wp-block-post-excerpt__more-link:hover {
  background-color: var(--wp--preset--color--bright-blue);
}
.diakon-load-more {
  display: flex;
  flex-direction: column;
}
.diakon-load-more:not(.alignleft, .alignright) {
  align-items: center;
}
.diakon-load-more.alignleft {
  align-items: flex-start;
}
.diakon-load-more.alignright {
  align-items: flex-end;
}
.wp-block-categories-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wp--preset--spacing--md);
  list-style: none;
  margin: 0;
  padding: 0;
}
.wp-block-categories-list li {
  margin: 0;
}
.wp-block-categories-list a {
  display: block;
  text-decoration: none;
  color: var(--wp--preset--color--black);
  font-size: var(--wp--preset--font-size--body-small);
  font-weight: 400;
  line-height: 1.35;
  white-space: nowrap;
  transition: color 0.15s ease;
}
.wp-block-categories-list a:hover {
  color: var(--wp--preset--color--primary);
}
.wp-block-categories-list .current-cat > a,
.wp-block-categories-list a.is-active {
  font-size: var(--wp--preset--font-size--body-small);
  font-weight: 600;
  line-height: 1.25;
  text-decoration: underline;
  text-decoration-thickness: 10%;
}
.wp-block-categories-list .current-cat > a:hover,
.wp-block-categories-list a.is-active:hover {
  color: var(--wp--preset--color--dark-magenta);
}
.wp-block-post-template .wp-block-cover::before {
  content: "";
  position: absolute;
  top: 1rem;
  right: 5rem;
  background-color: var(--wp--preset--color--primary);
  background: url("data:image/svg+xml,%3Csvg width=%22222%22 height=%22303%22 viewBox=%220 0 222 303%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%0A%3Cpath d=%22M129.102 294.911C165.847 300.405 205.478 238.98 217.622 157.716C229.766 76.4516 209.827 6.12793 173.083 0.634517C136.338 -4.8589 96.7069 56.5663 84.5628 137.83C72.4188 219.094 92.3574 289.418 129.102 294.911Z%22 stroke=%22%23FCFDFF%22 stroke-width=%220.585255%22/%3E%0A%3Cpath d=%22M136.537 297.192C185.113 278.544 206.721 217.112 184.787 159.977C162.853 102.841 105.691 71.6364 57.115 90.2847C8.53215 108.933 -13.0691 170.365 8.86468 227.5C30.7984 284.636 87.9606 315.841 136.537 297.192Z%22 stroke=%22%23FCFDFF%22 stroke-width=%220.585255%22/%3E%0A%3Cpath d=%22M131.708 280.413C169.657 265.848 185.937 216.307 168.067 169.766C150.204 123.225 104.953 97.3011 67.011 111.873C29.0625 126.437 12.7818 175.978 30.652 222.519C48.5156 269.06 93.7665 294.984 131.708 280.413Z%22 stroke=%22%23FCFDFF%22 stroke-width=%220.585255%22/%3E%0A%3Cpath d=%22M131.756 275.891C156.284 279.555 184.389 227.481 194.538 159.571C204.687 91.6616 193.035 33.6416 168.507 29.9771C143.98 26.3126 115.868 78.387 105.726 146.297C95.5767 214.206 107.235 272.226 131.756 275.891Z%22 stroke=%22%23FCFDFF%22 stroke-width=%220.585255%22/%3E%0A%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.4;
  width: 13.875rem;
  height: 18.9375rem;
  pointer-events: none;
}
.diakon-footer {
  position: relative;
  overflow: hidden;
}
.diakon-footer::before {
  content: "";
  position: absolute;
  right: 0;
  top: -3.4375rem;
  width: 44%;
  max-width: 35.125rem;
  aspect-ratio: 562/769;
  background-image: url("data:image/svg+xml,%3Csvg width=%27347%27 height=%27495%27 viewBox=%270 0 347.297 495.075%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M202.384 481.697C259.879 490.663 321.89 390.408 340.892 257.773C359.894 125.138 328.696 10.3598 271.201 1.39372C213.706 -7.57234 151.694 92.6825 132.692 225.317C113.69 357.952 144.889 472.731 202.384 481.697Z%27 stroke=%27%23FCFDFF%27 stroke-width=%271.67212%27/%3E%3Cpath d=%27M214.018 485.42C290.026 454.983 323.836 354.717 289.516 261.464C255.196 168.21 165.753 117.28 89.7454 147.716C13.727 178.153 -20.0729 278.419 14.2473 371.673C48.5675 464.926 138.01 515.857 214.018 485.42Z%27 stroke=%27%23FCFDFF%27 stroke-width=%271.67212%27/%3E%3Cpath d=%27M206.462 458.033C265.841 434.261 291.316 353.404 263.354 277.442C235.402 201.48 164.598 159.168 105.229 182.951C45.8507 206.723 20.376 287.58 48.3378 363.542C76.2893 439.504 147.094 481.816 206.462 458.033Z%27 stroke=%27%23FCFDFF%27 stroke-width=%271.12326%27/%3E%3Cpath d=%27M206.535 450.652C244.914 456.633 288.891 371.64 304.771 260.802C320.651 149.963 302.419 55.2662 264.041 49.2852C225.662 43.3042 181.674 128.297 165.805 239.136C149.925 349.974 168.167 444.671 206.535 450.652Z%27 stroke=%27%23FCFDFF%27 stroke-width=%271.12326%27/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right center;
  opacity: 0.25;
  pointer-events: none;
}
@media screen and (max-width: 781.98px) {
  .diakon-footer::before {
    top: -0.625rem;
  }
}
.diakon-footer__nav {
  width: 100%;
}
.diakon-footer__nav .wp-block-navigation-item__content {
  text-decoration: underline;
}
.diakon-footer__nav .wp-block-navigation-item__content:hover {
  opacity: 0.8;
  text-decoration: none;
}
.diakon-footer__bottombar .wp-block-navigation-item__content {
  text-decoration: none;
}
.diakon-footer__bottombar .wp-block-navigation-item__content:hover {
  color: var(--wp--preset--color--primary);
}
.diakon-footer__bottombar .current-menu-item .wp-block-navigation-item__content {
  color: var(--wp--preset--color--primary);
}
/*
 * safe-svg does not keep a class where the editor put it: on the front end it
 * renders className on a div inside its own wrapper, and wraps the block in a
 * link of its own when the icon points somewhere. So the element carrying the
 * class sits two levels below the one that takes part in the bar's layout, and
 * hiding it alone leaves an empty link holding the flex gap open. This matches
 * the two outer elements by what they contain, and the class itself for the
 * editor, where it is still on the wrapper.
 */
.diakon-header__inner {
  max-width: 80rem;
  margin-inline: auto;
  width: 100%;
  align-items: center;
}
.diakon-header__right {
  align-items: center;
  flex-shrink: 0;
}
.diakon-header__right .wc-block-customer-account__link,
.diakon-header__right .wc-block-mini-cart__button {
  margin: -0.5rem;
}
.diakon-header__right > .wc-block-mini-cart[aria-hidden=true] {
  display: none;
}
.diakon-header__right .wc-block-mini-cart__button {
  margin-right: 0;
  padding-bottom: 0;
}
.diakon-header__nav .wp-block-navigation-item__content,
.diakon-header__nav .wp-block-navigation-submenu__toggle {
  font-size: var(--wp--preset--font-size--body);
  font-weight: 600;
  line-height: 1.25;
  color: var(--wp--preset--color--black);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  transition: color 0.2s;
}
.diakon-header__nav .wp-block-navigation-item__content:hover,
.diakon-header__nav .wp-block-navigation-submenu__toggle:hover {
  color: var(--wp--preset--color--primary);
}
.diakon-header__nav .wp-block-navigation .wp-block-navigation__submenu-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: inline-block;
  background-color: var(--wp--preset--color--black);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox=%270 0 24 24%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 3.5C7.30558 3.5 3.5 7.30558 3.5 12C3.5 16.6944 7.30558 20.5 12 20.5C16.6944 20.5 20.5 16.6944 20.5 12C20.5 7.30558 16.6944 3.5 12 3.5ZM7.46967 9.96967C7.76256 9.67678 8.23744 9.67678 8.53033 9.96967L12 13.4393L15.4697 9.96967C15.7626 9.67678 16.2374 9.67678 16.5303 9.96967C16.8232 10.2626 16.8232 10.7374 16.5303 11.0303L12.5303 15.0303C12.2374 15.3232 11.7626 15.3232 11.4697 15.0303L7.46967 11.0303C7.17678 10.7374 7.17678 10.2626 7.46967 9.96967Z%27 fill=%27black%27/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg viewBox=%270 0 24 24%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 3.5C7.30558 3.5 3.5 7.30558 3.5 12C3.5 16.6944 7.30558 20.5 12 20.5C16.6944 20.5 20.5 16.6944 20.5 12C20.5 7.30558 16.6944 3.5 12 3.5ZM7.46967 9.96967C7.76256 9.67678 8.23744 9.67678 8.53033 9.96967L12 13.4393L15.4697 9.96967C15.7626 9.67678 16.2374 9.67678 16.5303 9.96967C16.8232 10.2626 16.8232 10.7374 16.5303 11.0303L12.5303 15.0303C12.2374 15.3232 11.7626 15.3232 11.4697 15.0303L7.46967 11.0303C7.17678 10.7374 7.17678 10.2626 7.46967 9.96967Z%27 fill=%27black%27/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  transition: background-color 0.2s;
  cursor: pointer;
}
.diakon-header__nav .wp-block-navigation .wp-block-navigation__submenu-icon svg {
  display: none;
}
.diakon-header__nav .wp-block-navigation-submenu__toggle[aria-expanded=true] + .wp-block-navigation__submenu-icon,
.diakon-header__nav .wp-block-navigation__submenu-icon[aria-expanded=true] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox=%270 0 24 24%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM7.46967 14.0303C7.17678 13.7374 7.17678 13.2626 7.46967 12.9697L11.4697 8.96967C11.7626 8.67678 12.2374 8.67678 12.5303 8.96967L16.5303 12.9697C16.8232 13.2626 16.8232 13.7374 16.5303 14.0303C16.2374 14.3232 15.7626 14.3232 15.4697 14.0303L12 10.5607L8.53033 14.0303C8.23744 14.3232 7.76256 14.3232 7.46967 14.0303Z%27 fill=%27black%27/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg viewBox=%270 0 24 24%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM7.46967 14.0303C7.17678 13.7374 7.17678 13.2626 7.46967 12.9697L11.4697 8.96967C11.7626 8.67678 12.2374 8.67678 12.5303 8.96967L16.5303 12.9697C16.8232 13.2626 16.8232 13.7374 16.5303 14.0303C16.2374 14.3232 15.7626 14.3232 15.4697 14.0303L12 10.5607L8.53033 14.0303C8.23744 14.3232 7.76256 14.3232 7.46967 14.0303Z%27 fill=%27black%27/%3E%3C/svg%3E");
  background-color: var(--wp--preset--color--primary);
}
.diakon-header__nav .wp-block-navigation-submenu__toggle[aria-expanded=true] {
  color: var(--wp--preset--color--primary);
}
.diakon-header__nav > .wp-block-navigation__container {
  gap: var(--wp--preset--spacing--xl) !important;
  flex-wrap: nowrap;
  align-items: center;
}
.diakon-header__search {
  display: flex;
  align-items: center;
}
.diakon-header__search form {
  display: flex;
  align-items: center;
}
.diakon-header__search .wp-block-search__inside-wrapper {
  display: flex;
  align-items: center;
}
.diakon-header__search .wp-block-search__button {
  background: none;
  border: 0;
  border-radius: 0;
  color: inherit;
  font: inherit;
  line-height: normal;
  overflow: visible;
  padding: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  font-size: 0;
  background-color: var(--wp--preset--color--black);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox=%270 0 18.5 18.5%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E %3Cpath id=%27Shape%27 d=%27M7.5 0C11.6421 0 15 3.35786 15 7.5C15 9.21015 14.4276 10.7866 13.464 12.0483L18.2071 16.7929C18.5976 17.1834 18.5976 17.8166 18.2071 18.2071C17.8466 18.5676 17.2794 18.5953 16.8871 18.2903L16.7929 18.2071L12.0483 13.464C10.7866 14.4276 9.21015 15 7.5 15C3.35786 15 0 11.6421 0 7.5C0 3.35786 3.35786 0 7.5 0ZM7.5 2C4.46243 2 2 4.46243 2 7.5C2 10.5376 4.46243 13 7.5 13C10.5376 13 13 10.5376 13 7.5C13 4.46243 10.5376 2 7.5 2Z%27 fill=%27black%27/%3E %3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg viewBox=%270 0 18.5 18.5%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E %3Cpath id=%27Shape%27 d=%27M7.5 0C11.6421 0 15 3.35786 15 7.5C15 9.21015 14.4276 10.7866 13.464 12.0483L18.2071 16.7929C18.5976 17.1834 18.5976 17.8166 18.2071 18.2071C17.8466 18.5676 17.2794 18.5953 16.8871 18.2903L16.7929 18.2071L12.0483 13.464C10.7866 14.4276 9.21015 15 7.5 15C3.35786 15 0 11.6421 0 7.5C0 3.35786 3.35786 0 7.5 0ZM7.5 2C4.46243 2 2 4.46243 2 7.5C2 10.5376 4.46243 13 7.5 13C10.5376 13 13 10.5376 13 7.5C13 4.46243 10.5376 2 7.5 2Z%27 fill=%27black%27/%3E %3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;
  cursor: pointer;
  transition: background-color 0.2s;
}
.diakon-header__search .wp-block-search__button svg {
  display: none;
}
.diakon-header__search .wp-block-search__button:hover {
  background-color: var(--wp--preset--color--primary);
}
.diakon-header__cart {
  display: flex;
  align-items: center;
}
.diakon-header__cart .wc-block-mini-cart__button {
  background: none;
  border: 0;
  border-radius: 0;
  color: inherit;
  font: inherit;
  line-height: normal;
  overflow: visible;
  padding: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  position: relative;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.diakon-header__cart .wc-block-mini-cart__button .wc-block-mini-cart__icon {
  display: none;
}
.diakon-header__cart .wc-block-mini-cart__button::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background-color: var(--wp--preset--color--black);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox=%270 0 17.4988 17.5%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E %3Cpath id=%27Shape%27 d=%27M0 0.75C0 0.335786 0.335786 0 0.75 0H1.30826C2.25873 0 2.82782 0.638993 3.15325 1.23299C3.37016 1.62894 3.52708 2.08818 3.64982 2.50395C3.68306 2.50134 3.71674 2.5 3.7508 2.5H16.2481C17.0783 2.5 17.6778 3.29442 17.4502 4.0928L15.6224 10.5019C15.2856 11.6832 14.2062 12.4978 12.9779 12.4978H7.02977C5.79128 12.4978 4.7056 11.6699 4.37783 10.4756L3.61734 7.70455L2.35874 3.45578L2.3567 3.44834C2.201 2.88051 2.05487 2.35005 1.83773 1.9537C1.62686 1.5688 1.45877 1.5 1.30826 1.5H0.75C0.335786 1.5 0 1.16421 0 0.75ZM6.5 17.5C7.60457 17.5 8.5 16.6046 8.5 15.5C8.5 14.3954 7.60457 13.5 6.5 13.5C5.39543 13.5 4.5 14.3954 4.5 15.5C4.5 16.6046 5.39543 17.5 6.5 17.5ZM13.5 17.5C14.6046 17.5 15.5 16.6046 15.5 15.5C15.5 14.3954 14.6046 13.5 13.5 13.5C12.3954 13.5 11.5 14.3954 11.5 15.5C11.5 16.6046 12.3954 17.5 13.5 17.5Z%27 fill=%27black%27/%3E %3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg viewBox=%270 0 17.4988 17.5%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E %3Cpath id=%27Shape%27 d=%27M0 0.75C0 0.335786 0.335786 0 0.75 0H1.30826C2.25873 0 2.82782 0.638993 3.15325 1.23299C3.37016 1.62894 3.52708 2.08818 3.64982 2.50395C3.68306 2.50134 3.71674 2.5 3.7508 2.5H16.2481C17.0783 2.5 17.6778 3.29442 17.4502 4.0928L15.6224 10.5019C15.2856 11.6832 14.2062 12.4978 12.9779 12.4978H7.02977C5.79128 12.4978 4.7056 11.6699 4.37783 10.4756L3.61734 7.70455L2.35874 3.45578L2.3567 3.44834C2.201 2.88051 2.05487 2.35005 1.83773 1.9537C1.62686 1.5688 1.45877 1.5 1.30826 1.5H0.75C0.335786 1.5 0 1.16421 0 0.75ZM6.5 17.5C7.60457 17.5 8.5 16.6046 8.5 15.5C8.5 14.3954 7.60457 13.5 6.5 13.5C5.39543 13.5 4.5 14.3954 4.5 15.5C4.5 16.6046 5.39543 17.5 6.5 17.5ZM13.5 17.5C14.6046 17.5 15.5 16.6046 15.5 15.5C15.5 14.3954 14.6046 13.5 13.5 13.5C12.3954 13.5 11.5 14.3954 11.5 15.5C11.5 16.6046 12.3954 17.5 13.5 17.5Z%27 fill=%27black%27/%3E %3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;
  transition: background-color 0.2s;
}
.diakon-header__cart .wc-block-mini-cart__button:hover::before {
  background-color: var(--wp--preset--color--primary);
}
.diakon-header__cart .wc-block-mini-cart__badge {
  position: absolute;
  top: -0.25rem;
  right: -0.375rem;
  left: auto;
  margin-left: 0;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.1875rem;
  background-color: var(--wp--preset--color--primary) !important;
  color: var(--wp--preset--color--white) !important;
  border-radius: var(--wp--preset--border-radius--full);
  display: flex;
  align-items: center;
  justify-content: center;
}
.diakon-header__cta {
  flex-shrink: 0;
}
@media screen and (max-width: 1199.98px) {
  .diakon-header__right {
    gap: var(--wp--preset--spacing--xl) !important;
  }
  .diakon-header__cta .wp-block-button__link {
    font-size: 1rem;
    font-weight: 500;
  }
  .diakon-header__nav {
    display: none !important;
  }
}
@media screen and (max-width: 479.98px) {
  .diakon-header {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }
  .diakon-header__inner, .diakon-header__right {
    gap: var(--wp--preset--spacing--md) !important;
  }
  .diakon-header__right > .wp-block-woocommerce-customer-account {
    display: none;
  }
  .diakon-header__cta .wp-block-button__link {
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    font-size: 0.9375rem;
  }
}
/*
 * The logos change over on their own, later than everything else: the wordmark
 * is 249px wide and still fits the bar long after the navigation has gone into
 * the panel, so it holds until there is genuinely no room for it. Both are
 * blocks in the header — the site logo and a safe-svg icon beside it — and
 * these rules decide which of them is drawn.
 */
.diakon-header a:has(> .wp-block-safe-svg-svg-icon > .diakon-header-logo-mobile),
.diakon-header .wp-block-safe-svg-svg-icon:has(> .diakon-header-logo-mobile),
.diakon-header .diakon-header-logo-mobile {
  display: none;
  flex-shrink: 0;
}
@media screen and (max-width: 599.98px) {
  .diakon-header-logo {
    display: none;
  }
  .diakon-header a:has(> .wp-block-safe-svg-svg-icon > .diakon-header-logo-mobile),
  .diakon-header .wp-block-safe-svg-svg-icon:has(> .diakon-header-logo-mobile),
  .diakon-header .diakon-header-logo-mobile {
    display: block;
  }
}
.diakon-topbar__inner {
  max-width: 80rem;
  margin-inline: auto;
  width: 100%;
  align-items: stretch !important;
}
.diakon-topbar__orgs {
  align-self: stretch;
  align-items: stretch !important;
}
.diakon-topbar__org {
  display: flex;
  align-items: center;
}
.diakon-topbar__org p {
  font-size: var(--wp--preset--font-size--body);
  font-weight: 600;
  line-height: 1.25;
  margin: 0;
  white-space: nowrap;
}
.diakon-topbar__org p a {
  color: var(--wp--preset--color--black);
  text-decoration: none;
  transition: color 0.2s;
}
.diakon-topbar__org p a:hover {
  color: var(--wp--preset--color--primary);
}
.site-palvelut .diakon-topbar__orgs .diakon-topbar__org:first-child, .site-saatio .diakon-topbar__orgs .diakon-topbar__org:last-child {
  background-color: var(--wp--preset--color--secondary);
  pointer-events: none;
}
.site-palvelut .diakon-topbar__orgs .diakon-topbar__org:first-child p a, .site-saatio .diakon-topbar__orgs .diakon-topbar__org:last-child p a {
  color: var(--wp--preset--color--primary);
}
.diakon-topbar__nav {
  align-self: center;
}
.diakon-topbar__nav .wp-block-navigation__container {
  gap: var(--wp--preset--spacing--xl) !important;
  align-items: center;
}
.diakon-topbar__nav .wp-block-navigation-item__content {
  font-size: var(--wp--preset--font-size--body-small);
  font-weight: 600;
  line-height: 1.35;
  color: var(--wp--preset--color--black);
  text-decoration: none;
  transition: color 0.2s;
}
.diakon-topbar__nav .wp-block-navigation-item__content:hover {
  color: var(--wp--preset--color--primary);
}
.page-template-topbar-only.site-palvelut .diakon-topbar__orgs .diakon-topbar__org:first-child, .page-template-topbar-only.site-saatio .diakon-topbar__orgs .diakon-topbar__org:last-child {
  background-color: transparent;
  pointer-events: auto;
}
.page-template-topbar-only.site-palvelut .diakon-topbar__orgs .diakon-topbar__org:first-child p a, .page-template-topbar-only.site-saatio .diakon-topbar__orgs .diakon-topbar__org:last-child p a {
  color: var(--wp--preset--color--black);
}
.page-template-topbar-only .diakon-topbar__nav .current-menu-item .wp-block-navigation-item__content {
  color: var(--wp--preset--color--bright-blue);
}
/*
 * The standalone bar carries the round mark alone — there is no wordmark on
 * that template to give way to — so it appears with the menu rather than at
 * the header's own logo breakpoint.
 */
.diakon-topbar a:has(> .wp-block-safe-svg-svg-icon > .diakon-topbar-logo),
.diakon-topbar .wp-block-safe-svg-svg-icon:has(> .diakon-topbar-logo),
.diakon-topbar .diakon-topbar-logo {
  display: none;
  flex-shrink: 0;
}
/*
 * The topbar is desktop chrome: on the templates that have a header, what it
 * holds is in the mobile menu instead. The standalone bar is the exception —
 * it is the only chrome its template has, so it stays and carries the trigger
 * on its own, with the links it would otherwise show waiting in the panel.
 */
@media screen and (max-width: 1199.98px) {
  .diakon-topbar {
    display: none;
  }
  .diakon-topbar--standalone {
    display: block;
  }
  .diakon-topbar--standalone .diakon-topbar__orgs,
  .diakon-topbar--standalone .diakon-topbar__nav {
    display: none;
  }
  .diakon-topbar--standalone .diakon-topbar__inner {
    align-items: center !important;
    justify-content: space-between;
    padding-block: 0.75rem;
  }
  .diakon-topbar--standalone a:has(> .wp-block-safe-svg-svg-icon > .diakon-topbar-logo),
  .diakon-topbar--standalone .wp-block-safe-svg-svg-icon:has(> .diakon-topbar-logo),
  .diakon-topbar--standalone .diakon-topbar-logo {
    display: block;
  }
}
.diakon-header {
  position: relative;
}
.diakon-mega-menu-item {
  position: static !important;
}
.diakon-mega-menu-item .diakon-mega-menu__toggle {
  display: flex !important;
}
.diakon-mega-menu__panel {
  display: none;
  position: absolute;
  top: 85%;
  left: 0;
  right: 0;
  z-index: 200;
}
.diakon-mega-menu__panel.is-open {
  display: block;
}
.diakon-mega-menu__panel a {
  color: var(--wp--preset--color--black);
}
.diakon-mega-menu__panel a:hover {
  color: var(--wp--preset--color--primary);
}
.diakon-mega-menu__panel figure + * a {
  color: var(--wp--preset--color--primary);
}
.diakon-mega-menu__panel figure + * a:hover {
  text-decoration: none;
  color: var(--wp--preset--color--primary);
}
@media screen and (max-width: 1199.98px) {
  .diakon-mega-menu__panel {
    display: none !important;
  }
}
/*
 * The mobile header panel.
 *
 * Spacing is written as plain rem rather than with the fluid spacing presets.
 * Those scale with the viewport and sit well under their maximum at the widths
 * this panel is shown at — md is 16px only from about 1440px up, and resolves
 * to roughly 8px at 390px — so using them here would draw the panel at half
 * the spacing it was designed with. The values are the design's.
 *
 * Deliberately thin: the rows inside carry the sidebar's classes, so
 * components/_sidenav.scss draws the links, the round toggle and the divider
 * beside it. What is left here is the card, the regions and the two lists the
 * sidebar has no equivalent for.
 */
.diakon-mobile-menu {
  display: none;
  /*
  * The nav rows keep the sidebar's look but not its rhythm: the design
  * stacks them flush, each one 44px tall whether or not it opens anything,
  * because the toggle stays in place there and is simply made invisible on
  * a row with no subpages. We render no toggle at all in that case, so the
  * height comes from the row instead.
  *
  * Their padding is restated for the same reason the rest of this file uses
  * plain rem: the sidebar spaces itself with the fluid presets, which are
  * far from their maximum at the widths this panel is shown at.
  */
}
.diakon-mobile-menu .diakon-side-nav__list,
.diakon-mobile-menu .diakon-side-nav__sub-list {
  gap: 0;
}
.diakon-mobile-menu .diakon-side-nav__sub-list {
  margin-top: 0;
  padding-left: 0.5rem;
}
.diakon-mobile-menu .diakon-side-nav__row {
  min-height: 2.75rem;
  gap: 1rem;
}
.diakon-mobile-menu .diakon-side-nav__link {
  padding: 0.5rem;
}
.diakon-mobile-menu .diakon-side-nav__actions {
  gap: 1rem;
  padding: 0.5rem 0.5rem 0.5rem 0;
}
.diakon-mobile-menu {
  /*
   * A top-level row is marked only when it is the page being viewed. The
   * sidebar also marks the rows leading to the current page, but here the
   * top-level one opens on its own to show where the visitor is, and marked
   * as well it read as the page they were on.
   */
}
.diakon-mobile-menu .diakon-mobile-menu__nav > .diakon-side-nav__list > .diakon-side-nav__item:not(.current-page) > .diakon-side-nav__row {
  background-color: transparent;
}
@media (hover: hover) {
  .diakon-mobile-menu .diakon-mobile-menu__nav > .diakon-side-nav__list > .diakon-side-nav__item:hover > .diakon-side-nav__row {
    background-color: var(--wp--preset--color--secondary);
  }
}
.diakon-mobile-menu__open {
  background: none;
  border: 0;
  border-radius: 0;
  color: inherit;
  font: inherit;
  line-height: normal;
  overflow: visible;
  padding: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--wp--preset--color--black);
  cursor: pointer;
  transition: color 0.2s;
}
.diakon-mobile-menu__open:hover {
  color: var(--wp--preset--color--primary);
}
.diakon-mobile-menu__dialog {
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 1rem;
  border: 0;
  background: transparent;
  overflow: hidden;
}
.diakon-mobile-menu__dialog::backdrop {
  background: rgba(44, 42, 41, 0.4);
}
.diakon-mobile-menu__inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 37.5rem;
  max-height: 100%;
  margin-inline: auto;
  padding: 1rem;
  border-radius: var(--wp--preset--border-radius--s);
  background-color: var(--wp--preset--color--white);
  box-shadow: var(--wp--preset--shadow--card);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.diakon-mobile-menu__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.diakon-mobile-menu__title {
  margin: 0;
  color: var(--wp--preset--color--medium-grey);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.35;
  text-transform: uppercase;
}
.diakon-mobile-menu__close {
  background: none;
  border: 0;
  border-radius: 0;
  color: inherit;
  font: inherit;
  line-height: normal;
  overflow: visible;
  padding: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  display: flex;
  flex-shrink: 0;
  color: var(--wp--preset--color--black);
  cursor: pointer;
}
.diakon-mobile-menu__nav,
.diakon-mobile-menu__section {
  padding-top: 1rem;
  border-top: 1px solid #e5e9f0;
}
.diakon-mobile-menu__section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.diakon-mobile-menu__label {
  margin: 0;
  color: var(--wp--preset--color--black);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}
.diakon-mobile-menu__eyebrow {
  margin: 0;
  color: var(--wp--preset--color--medium-grey);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.35;
  text-transform: uppercase;
}
.diakon-mobile-menu__sites,
.diakon-mobile-menu__meta {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.diakon-mobile-menu__sites {
  gap: 0.5rem;
}
.diakon-mobile-menu__sites li {
  margin: 0;
}
.diakon-mobile-menu__sites a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem;
  border-radius: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}
.diakon-mobile-menu__meta {
  gap: 1rem;
}
.diakon-mobile-menu__meta li {
  margin: 0;
}
.diakon-mobile-menu__meta a {
  color: var(--wp--preset--color--black);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}
.diakon-mobile-menu__meta a:hover {
  color: var(--wp--preset--color--primary);
}
/*
 * Core's own page-list markup, which the mobile menu falls back to when a
 * category's list names no parent page — and core's list markup, which is what
 * the shop's panel uses, since product categories and products are not pages.
 * Everything else goes through the sidebar renderer and arrives already styled.
 * Both of these come out with the list styling of a document rather than of a
 * menu.
 */
.diakon-mobile-menu .diakon-side-nav__sub-list .wp-block-page-list,
.diakon-mobile-menu .diakon-side-nav__sub-list .wp-block-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding-inline-start: 0;
  list-style: none;
}
.diakon-mobile-menu .diakon-side-nav__sub-list .wp-block-page-list li,
.diakon-mobile-menu .diakon-side-nav__sub-list .wp-block-list li {
  margin: 0;
}
.diakon-mobile-menu .diakon-side-nav__sub-list .wp-block-page-list a,
.diakon-mobile-menu .diakon-side-nav__sub-list .wp-block-list a {
  display: block;
  padding: 0.5rem;
  border-radius: var(--wp--preset--border-radius--xs);
  color: var(--wp--preset--color--primary);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
}
.diakon-mobile-menu .diakon-side-nav__sub-list .wp-block-page-list > li > ul,
.diakon-mobile-menu .diakon-side-nav__sub-list .wp-block-list > li > ul {
  display: none;
}
/*
 * The topbar-only template's version: the page is on neither site, so both
 * links are somewhere to go rather than one being where you are. Each takes
 * its own brand colours and an arrow, in place of the checkmark that marks
 * the current one above.
 */
.diakon-mobile-menu__sites.is-chooser .diakon-mobile-menu__site:first-child a {
  background-color: var(--wp--preset--color--secondary);
  color: var(--wp--preset--color--primary);
}
.diakon-mobile-menu__sites.is-chooser .diakon-mobile-menu__site:last-child a {
  background-color: var(--wp--preset--color--light-blue);
  color: var(--wp--preset--color--bright-blue);
}
.diakon-mobile-menu__sites.is-chooser a::after {
  content: "";
  display: block;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  background-color: currentcolor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width=%2716%27 height=%2716%27 viewBox=%270 0 16 16%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M8.72 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 1 1-1.06-1.06l2.97-2.97H2.75a.75.75 0 0 1 0-1.5h8.94L8.72 4.28a.75.75 0 0 1 0-1.06Z%27 fill=%27black%27/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg width=%2716%27 height=%2716%27 viewBox=%270 0 16 16%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M8.72 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 1 1-1.06-1.06l2.97-2.97H2.75a.75.75 0 0 1 0-1.5h8.94L8.72 4.28a.75.75 0 0 1 0-1.06Z%27 fill=%27black%27/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}
/*
 * Which site you are on is carried by the order of the links, exactly as it is
 * in the topbar — so this marks the current one the same way, from the body
 * class, rather than resolving it again in PHP.
 *
 * Not in the chooser below, where the page belongs to neither site and there
 * is no current one to mark.
 */
.site-palvelut .diakon-mobile-menu__sites:not(.is-chooser) .diakon-mobile-menu__site:first-child a,
.site-saatio .diakon-mobile-menu__sites:not(.is-chooser) .diakon-mobile-menu__site:last-child a {
  background-color: var(--wp--preset--color--secondary);
  color: var(--wp--preset--color--primary);
}
.site-palvelut .diakon-mobile-menu__sites:not(.is-chooser) .diakon-mobile-menu__site:first-child a::after,
.site-saatio .diakon-mobile-menu__sites:not(.is-chooser) .diakon-mobile-menu__site:last-child a::after {
  content: "";
  display: block;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  background-color: currentcolor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width=%2716%27 height=%2716%27 viewBox=%270 0 16 16%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M14.03 3.97a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 0 1-1.06 0l-3.5-3.5a.75.75 0 1 1 1.06-1.06L6 10.94l6.97-6.97a.75.75 0 0 1 1.06 0Z%27 fill=%27black%27/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg width=%2716%27 height=%2716%27 viewBox=%270 0 16 16%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M14.03 3.97a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 0 1-1.06 0l-3.5-3.5a.75.75 0 1 1 1.06-1.06L6 10.94l6.97-6.97a.75.75 0 0 1 1.06 0Z%27 fill=%27black%27/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.site-palvelut .diakon-mobile-menu__sites:not(.is-chooser) .diakon-mobile-menu__site:first-child a,
.site-saatio .diakon-mobile-menu__sites:not(.is-chooser) .diakon-mobile-menu__site:last-child a {
  background-color: var(--wp--preset--color--secondary);
  color: var(--wp--preset--color--primary);
}
.site-palvelut .diakon-mobile-menu__sites:not(.is-chooser) .diakon-mobile-menu__site:first-child a::after,
.site-saatio .diakon-mobile-menu__sites:not(.is-chooser) .diakon-mobile-menu__site:last-child a::after {
  content: "";
  display: block;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  background-color: currentcolor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width=%2716%27 height=%2716%27 viewBox=%270 0 16 16%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M14.03 3.97a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 0 1-1.06 0l-3.5-3.5a.75.75 0 1 1 1.06-1.06L6 10.94l6.97-6.97a.75.75 0 0 1 1.06 0Z%27 fill=%27black%27/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg width=%2716%27 height=%2716%27 viewBox=%270 0 16 16%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M14.03 3.97a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 0 1-1.06 0l-3.5-3.5a.75.75 0 1 1 1.06-1.06L6 10.94l6.97-6.97a.75.75 0 0 1 1.06 0Z%27 fill=%27black%27/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.site-palvelut .diakon-mobile-menu__sites:not(.is-chooser) .diakon-mobile-menu__site:last-child a {
  color: var(--wp--preset--color--bright-blue);
}
.site-saatio .diakon-mobile-menu__sites:not(.is-chooser) .diakon-mobile-menu__site:first-child a {
  color: var(--wp--preset--color--diakon);
}
@media screen and (max-width: 1199.98px) {
  .diakon-mobile-menu {
    display: block;
  }
}
.diakon-side-nav {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--md);
}
.diakon-side-nav__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.diakon-side-nav__back {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--xs);
  text-decoration: none;
  color: inherit;
}
.diakon-side-nav__back-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  background-color: #f0f4fa;
}
.diakon-side-nav__back-icon::after {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background-color: var(--wp--preset--color--black);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width=%2716%27 height=%2716%27 viewBox=%270 0 16 16%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M10 3L5 8l5 5%27 stroke=%27black%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 fill=%27none%27/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg width=%2716%27 height=%2716%27 viewBox=%270 0 16 16%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M10 3L5 8l5 5%27 stroke=%27black%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 fill=%27none%27/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;
}
.diakon-side-nav__back-label {
  font-size: 14px;
  font-weight: 500;
  color: #636d81;
  letter-spacing: 0.03em;
}
.diakon-side-nav__section-title {
  display: block;
  padding: var(--wp--preset--spacing--xs);
  border-radius: var(--wp--preset--border-radius--xs);
  background-color: var(--wp--preset--color--secondary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--wp--preset--color--primary);
}
.diakon-side-nav__hr {
  border: none;
  border-top: 1px solid #e5e9f0;
  margin: 0;
}
.diakon-side-nav__list, .diakon-side-nav__sub-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--xxs);
}
.diakon-side-nav__sub-list {
  margin-top: var(--wp--preset--spacing--xxs);
  padding-left: var(--wp--preset--spacing--xs);
}
.diakon-side-nav__sub-list[hidden] {
  display: none;
}
.diakon-side-nav__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  border-radius: var(--wp--preset--border-radius--xs);
  transition: background-color 0.15s ease;
  gap: var(--wp--preset--spacing--md);
}
.current-page > .diakon-side-nav__row, .current-ancestor > .diakon-side-nav__row {
  background-color: var(--wp--preset--color--secondary);
}
.diakon-side-nav {
  /*
   * Hover: any item's row gets the same active background.
   *
   * Only where there is a pointer that hovers. A touch screen keeps :hover
   * on whatever was tapped last, and on every <li> above it, so in the
   * mobile menu a row stayed pink after being closed and a tap anywhere
   * deep in the tree lit up the whole branch as if it were the current one.
   */
}
@media (hover: hover) {
  .diakon-side-nav__item:hover > .diakon-side-nav__row {
    background-color: var(--wp--preset--color--secondary);
  }
}
.diakon-side-nav__link {
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  padding: var(--wp--preset--spacing--xs);
  color: var(--wp--preset--color--primary);
  width: 100%;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .diakon-side-nav__link:hover {
    text-decoration: none;
  }
}
.diakon-side-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--md);
  flex-shrink: 0;
  padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--xs) var(--wp--preset--spacing--xs) 0;
}
.diakon-side-nav__separator {
  display: block;
  width: 1px;
  align-self: stretch;
  background-color: #b7c3da;
  flex-shrink: 0;
}
.diakon-side-nav__toggle {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid #b7c3da;
  border-radius: 9999px;
  background-color: #f0f4fa;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.diakon-side-nav__toggle::after {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  background-color: var(--wp--preset--color--primary);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width=%2712%27 height=%2712%27 viewBox=%270 0 12 12%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath fill-rule=%27evenodd%27 clip-rule=%27evenodd%27 d=%27M6.75 1a.75.75 0 0 0-1.5 0v4.25H1a.75.75 0 0 0 0 1.5h4.25V11a.75.75 0 0 0 1.5 0V6.75H11a.75.75 0 0 0 0-1.5H6.75V1Z%27 fill=%27black%27/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg width=%2712%27 height=%2712%27 viewBox=%270 0 12 12%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath fill-rule=%27evenodd%27 clip-rule=%27evenodd%27 d=%27M6.75 1a.75.75 0 0 0-1.5 0v4.25H1a.75.75 0 0 0 0 1.5h4.25V11a.75.75 0 0 0 1.5 0V6.75H11a.75.75 0 0 0 0-1.5H6.75V1Z%27 fill=%27black%27/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;
  transition: -webkit-mask-image 0.1s step-end;
  transition: mask-image 0.1s step-end;
  transition: mask-image 0.1s step-end, -webkit-mask-image 0.1s step-end;
}
.diakon-side-nav__toggle[aria-expanded=true] {
  border-color: var(--wp--preset--color--primary);
}
.diakon-side-nav__toggle[aria-expanded=true]::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width=%2712%27 height=%2712%27 viewBox=%270 0 12 12%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath fill-rule=%27evenodd%27 clip-rule=%27evenodd%27 d=%27M1.22 1.22a.75.75 0 0 1 1.06 0L6 4.94l3.72-3.72a.75.75 0 1 1 1.06 1.06L7.06 6l3.72 3.72a.75.75 0 1 1-1.06 1.06L6 7.06l-3.72 3.72a.75.75 0 0 1-1.06-1.06L4.94 6 1.22 2.28a.75.75 0 0 1 0-1.06Z%27 fill=%27black%27/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg width=%2712%27 height=%2712%27 viewBox=%270 0 12 12%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath fill-rule=%27evenodd%27 clip-rule=%27evenodd%27 d=%27M1.22 1.22a.75.75 0 0 1 1.06 0L6 4.94l3.72-3.72a.75.75 0 1 1 1.06 1.06L7.06 6l3.72 3.72a.75.75 0 1 1-1.06 1.06L6 7.06l-3.72 3.72a.75.75 0 0 1-1.06-1.06L4.94 6 1.22 2.28a.75.75 0 0 1 0-1.06Z%27 fill=%27black%27/%3E%3C/svg%3E");
}
.diakon-side-nav__toggle:focus-visible {
  outline: 2px solid var(--wp--preset--color--primary);
  outline-offset: 2px;
}
.diakon-side-nav__item {
  row-gap: size(6);
  display: flex;
  flex-direction: column;
}
.diakon-side-nav__item.current-page > .diakon-side-nav__row .diakon-side-nav__link {
  text-decoration: none;
}
.wp-block-safe-svg-svg-icon {
  line-height: 0 !important;
}
.wp-block-breadcrumbs a {
  font-weight: 700;
}
.wp-block-breadcrumbs {
  /*
   * On phones and tablets a trail wraps, and wrapped it was crammed: the
   * templates set the line height to 1 or 1.25 on the block itself (an
   * inline style, hence !important), and core lays the crumbs out as a
   * wrapping flex row with no gap between its rows. So a crumb that wraps
   * inside itself gets air from the line height, and one that wraps onto
   * the next row gets it from the row gap. Every breadcrumb, whichever
   * template or store it is in -- including copies edited in the site
   * editor, which carry their own inline value.
   */
}
@media screen and (max-width: 1023.98px) {
  .wp-block-breadcrumbs {
    line-height: 1.5 !important;
  }
  .wp-block-breadcrumbs ol {
    row-gap: 0.25em;
  }
}
.wp-block-details {
  --wp--style--block-gap: var(--wp--preset--spacing--xl);
  background-color: var(--wp--preset--color--white);
  border-radius: var(--wp--preset--border-radius--m);
  box-shadow: var(--wp--preset--shadow--card);
  padding: var(--wp--preset--spacing--xl);
}
.wp-block-details > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  font-size: var(--wp--preset--font-size--h-4);
  font-weight: 600;
  line-height: 1.25;
  color: var(--wp--preset--color--black);
  list-style: none;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: color 0.2s ease;
}
.wp-block-details > summary::marker, .wp-block-details > summary::-webkit-details-marker {
  display: none;
}
.wp-block-details > summary::after {
  content: "";
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M12 3.75a.75.75 0 0 0-.75.75V11.25H4.5a.75.75 0 0 0 0 1.5H11.25V20.25a.75.75 0 0 0 1.5 0V12.75H20.25a.75.75 0 0 0 0-1.5H12.75V4.5A.75.75 0 0 0 12 3.75Z%27 fill=%27black%27/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M12 3.75a.75.75 0 0 0-.75.75V11.25H4.5a.75.75 0 0 0 0 1.5H11.25V20.25a.75.75 0 0 0 1.5 0V12.75H20.25a.75.75 0 0 0 0-1.5H12.75V4.5A.75.75 0 0 0 12 3.75Z%27 fill=%27black%27/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  background-color: var(--wp--preset--color--primary);
}
.wp-block-details > summary:hover {
  color: var(--wp--preset--color--primary);
}
.wp-block-details[open] > summary {
  color: var(--wp--preset--color--primary);
}
.wp-block-details[open] > summary::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M5.47 5.47a.75.75 0 0 1 1.06 0L12 10.94l5.47-5.47a.75.75 0 1 1 1.06 1.06L13.06 12l5.47 5.47a.75.75 0 1 1-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 0 1-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 0 1 0-1.06Z%27 fill=%27black%27/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M5.47 5.47a.75.75 0 0 1 1.06 0L12 10.94l5.47-5.47a.75.75 0 1 1 1.06 1.06L13.06 12l5.47 5.47a.75.75 0 1 1-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 0 1-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 0 1 0-1.06Z%27 fill=%27black%27/%3E%3C/svg%3E");
}
.wp-block-accordion > .wp-block-accordion-item + .wp-block-accordion-item {
  margin-top: var(--wp--preset--spacing--xl);
}
.wp-block-accordion-item {
  background-color: var(--wp--preset--color--white);
  border-radius: var(--wp--preset--border-radius--m);
  box-shadow: var(--wp--preset--shadow--card);
  padding: var(--wp--preset--spacing--xl);
}
.wp-block-accordion-item .wp-block-accordion-heading {
  margin-bottom: 0;
}
.wp-block-accordion-item .wp-block-accordion-heading__toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  font-size: var(--wp--preset--font-size--h-4);
  font-weight: 600;
  line-height: 1.25;
  color: var(--wp--preset--color--black);
  cursor: pointer;
  transition: color 0.2s ease;
}
.wp-block-accordion-item .wp-block-accordion-heading__toggle:hover {
  color: var(--wp--preset--color--primary);
}
.wp-block-accordion-item .wp-block-accordion-heading__toggle-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  font-size: 0;
  background-color: var(--wp--preset--color--primary);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M12 3.75a.75.75 0 0 0-.75.75V11.25H4.5a.75.75 0 0 0 0 1.5H11.25V20.25a.75.75 0 0 0 1.5 0V12.75H20.25a.75.75 0 0 0 0-1.5H12.75V4.5A.75.75 0 0 0 12 3.75Z%27 fill=%27black%27/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M12 3.75a.75.75 0 0 0-.75.75V11.25H4.5a.75.75 0 0 0 0 1.5H11.25V20.25a.75.75 0 0 0 1.5 0V12.75H20.25a.75.75 0 0 0 0-1.5H12.75V4.5A.75.75 0 0 0 12 3.75Z%27 fill=%27black%27/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle {
  color: var(--wp--preset--color--primary);
}
.wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M5.47 5.47a.75.75 0 0 1 1.06 0L12 10.94l5.47-5.47a.75.75 0 1 1 1.06 1.06L13.06 12l5.47 5.47a.75.75 0 1 1-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 0 1-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 0 1 0-1.06Z%27 fill=%27black%27/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M5.47 5.47a.75.75 0 0 1 1.06 0L12 10.94l5.47-5.47a.75.75 0 1 1 1.06 1.06L13.06 12l5.47 5.47a.75.75 0 1 1-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 0 1-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 0 1 0-1.06Z%27 fill=%27black%27/%3E%3C/svg%3E");
}
.wp-block-accordion-item.is-open .wp-block-accordion-panel {
  padding-top: var(--wp--preset--spacing--2-xl);
}
.wp-block-post-template .wp-block-post-terms {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-wrap: wrap;
}
.wp-block-post-template .wp-block-post-terms .wp-block-post-terms__separator {
  display: none;
}
.wp-block-post-template .wp-block-post-terms a {
  display: block;
  padding: 0.25rem 0.5rem;
  justify-content: center;
  align-items: center;
  background-color: var(--wp--preset--color--secondary);
  color: var(--wp--preset--color--primary);
  border-radius: 60px;
  text-decoration: none;
  font-size: var(--wp--preset--font-size--tiny);
  font-weight: 500;
}
@media screen and (min-width: 600px) {
  .wp-block-post-template .wp-block-post-terms a {
    padding: 0.5rem 0.875rem;
    border-radius: 90px;
  }
}
.single-post .wp-block-post-template .wp-block-cover::before {
  content: "";
  position: absolute;
  top: 5px;
  right: 20px;
  background-color: var(--wp--preset--color--primary);
  background: url("data:image/svg+xml,%3Csvg width=%22222%22 height=%22303%22 viewBox=%220 0 222 303%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%0A%3Cpath d=%22M129.102 294.911C165.847 300.405 205.478 238.98 217.622 157.716C229.766 76.4516 209.827 6.12793 173.083 0.634517C136.338 -4.8589 96.7069 56.5663 84.5628 137.83C72.4188 219.094 92.3574 289.418 129.102 294.911Z%22 stroke=%22%23FCFDFF%22 stroke-width=%220.585255%22/%3E%0A%3Cpath d=%22M136.537 297.192C185.113 278.544 206.721 217.112 184.787 159.977C162.853 102.841 105.691 71.6364 57.115 90.2847C8.53215 108.933 -13.0691 170.365 8.86468 227.5C30.7984 284.636 87.9606 315.841 136.537 297.192Z%22 stroke=%22%23FCFDFF%22 stroke-width=%220.585255%22/%3E%0A%3Cpath d=%22M131.708 280.413C169.657 265.848 185.937 216.307 168.067 169.766C150.204 123.225 104.953 97.3011 67.011 111.873C29.0625 126.437 12.7818 175.978 30.652 222.519C48.5156 269.06 93.7665 294.984 131.708 280.413Z%22 stroke=%22%23FCFDFF%22 stroke-width=%220.585255%22/%3E%0A%3Cpath d=%22M131.756 275.891C156.284 279.555 184.389 227.481 194.538 159.571C204.687 91.6616 193.035 33.6416 168.507 29.9771C143.98 26.3126 115.868 78.387 105.726 146.297C95.5767 214.206 107.235 272.226 131.756 275.891Z%22 stroke=%22%23FCFDFF%22 stroke-width=%220.585255%22/%3E%0A%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.7;
  width: 70px;
  height: 96px;
  pointer-events: none;
  background-size: contain;
  z-index: 1;
}
.single-post .wp-block-post-template h5 a {
  text-decoration: underline;
}
.wp-block-diakon-number-counter {
  white-space: nowrap;
}
.wp-block-diakon-number-counter .number-counter-value {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}
/**
 * Caption alignment for core/image.
 *
 * Core ships no caption alignment control, and `.wp-block-image.aligncenter`
 * sets `text-align: center` on the figure, which the caption inherits. These
 * rules target the caption directly, so they beat that inherited value.
 */
.wp-block-image.has-caption-align-left > figcaption {
  text-align: left;
}
.wp-block-image.has-caption-align-center > figcaption {
  text-align: center;
}
.wp-block-image.has-caption-align-right > figcaption {
  text-align: right;
}
.wp-block-image {
  margin: 0;
}
/*
 * A figure whose image has an aspect ratio (set in the editor: aspect-ratio
 * and object-fit inline, no width) lays it out as a flex item.
 *
 * Safari sized such an image wrongly as an ordinary box -- inline or block --
 * and it overflowed its figure; as a flex item in a row it is sized right
 * (found 2026-10-06). Not a column: in a column Safari got it wrong again.
 * Only an image directly in the figure: a linked or lightboxed one is
 * wrapped, and is left as core has it.
 *
 * What a row would otherwise change, put back: a caption wraps onto its own
 * full-width line under the image rather than sitting beside it; centred
 * and right-aligned figures, which core lays out as tables, keep their
 * place; and nothing is stretched -- the image keeps its own width and the
 * ratio's height.
 */
.wp-block-image:has(> img[style*=aspect-ratio]) {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.wp-block-image:has(> img[style*=aspect-ratio]) > figcaption {
  flex: 0 0 100%;
}
.wp-block-image:has(> img[style*=aspect-ratio]).aligncenter {
  justify-content: center;
}
.wp-block-image:has(> img[style*=aspect-ratio]).alignright {
  justify-content: flex-end;
}
.wp-block-gallery .wp-block-image {
  border-radius: var(--wp--preset--border-radius--s);
  overflow: hidden;
}
.wp-block-gallery .wp-block-image img {
  border-radius: var(--wp--preset--border-radius--s);
}
.wp-block-gallery .wp-block-image figcaption {
  border-bottom-left-radius: var(--wp--preset--border-radius--s);
  border-bottom-right-radius: var(--wp--preset--border-radius--s);
}
.wp-block-separator {
  width: 100%;
  color: var(--wp--preset--color--primary);
}
.wp-block-cover {
  padding: 1rem;
}
.diakon-mega-menu__panel .wp-block-page-list,
.diakon-mega-menu__panel .wp-block-list {
  list-style-type: none;
  padding-left: 0;
  padding-inline-start: 0;
  display: flex;
  gap: var(--wp--preset--spacing--xs);
  flex-direction: column;
  align-items: flex-start;
}
@media screen and (min-width: 782px) {
  .diakon-mega-menu__panel .wp-block-page-list > li > ul,
  .diakon-mega-menu__panel .wp-block-list > li > ul {
    display: none;
  }
}
p.is-style-ingress {
  font-size: var(--wp--preset--font-size--h-3);
  font-weight: 700;
  line-height: 1.25;
}
p.is-style-ingress:not(:last-child) {
  margin-bottom: var(--wp--preset--spacing--2-xl);
  margin-block-end: var(--wp--preset--spacing--2-xl);
}
p.is-style-ingress-md {
  font-size: var(--wp--preset--font-size--h-4);
  font-weight: 600;
  line-height: 1.4;
}
p.is-style-ingress-md:not(:last-child) {
  margin-bottom: var(--wp--preset--spacing--2-xl);
  margin-block-end: var(--wp--preset--spacing--2-xl);
}
p.is-style-ingress-sm {
  font-size: var(--wp--preset--font-size--body);
  font-weight: 600;
  line-height: 1.4;
}
p.is-style-ingress-sm:not(:last-child) {
  margin-bottom: var(--wp--preset--spacing--md);
  margin-block-end: var(--wp--preset--spacing--md);
}
p.is-style-custom-quote {
  font-size: var(--wp--preset--font-size--quote);
  font-style: italic;
  font-weight: 500;
  line-height: 1.15;
  margin-bottom: 0;
}
p.is-style-default:not(:last-child) {
  margin-bottom: var(--wp--preset--spacing--lg);
  margin-block-end: var(--wp--preset--spacing--lg);
}
p.is-style-text-small {
  font-size: var(--wp--preset--font-size--body-small);
}
p.is-style-text-small:not(:last-child) {
  margin-bottom: var(--wp--preset--spacing--md);
  margin-block-end: var(--wp--preset--spacing--md);
}
.is-style-text-shadow-1 {
  text-shadow: 0 4px 6px rgba(0, 0, 0, 0.6);
}
.wp-block-list.is-style-anchor-links {
  list-style: none !important;
  padding: 0 0 0 24px !important;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wp--preset--spacing--md);
}
.wp-block-list.is-style-anchor-links li {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--xs);
}
.wp-block-list.is-style-anchor-links li::after {
  content: "";
  display: block;
  flex-shrink: 0;
  width: 10px;
  height: 12px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width=%2710%27 height=%2712%27 viewBox=%270 0 10 12%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M4.25.75a.75.75 0 0 1 1.5 0v7.94l2.22-2.22a.75.75 0 1 1 1.06 1.06l-3.5 3.5a.75.75 0 0 1-1.06 0l-3.5-3.5A.75.75 0 1 1 2.03 6.47L4.25 8.69V.75Z%27 fill=%27black%27/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg width=%2710%27 height=%2712%27 viewBox=%270 0 10 12%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M4.25.75a.75.75 0 0 1 1.5 0v7.94l2.22-2.22a.75.75 0 1 1 1.06 1.06l-3.5 3.5a.75.75 0 0 1-1.06 0l-3.5-3.5A.75.75 0 1 1 2.03 6.47L4.25 8.69V.75Z%27 fill=%27black%27/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  background-color: var(--wp--preset--color--primary);
}
.wp-block-list.is-style-anchor-links li a {
  font-size: var(--wp--preset--font-size--tiny);
  font-weight: 600;
  line-height: 1.35;
  color: var(--wp--preset--color--primary);
  text-decoration: none;
}
.wp-block-list.is-style-anchor-links li a:hover {
  color: var(--wp--preset--color--dark-magenta);
}
body.site-saatio .wp-block-list.is-style-anchor-links li a:hover {
  color: var(--wp--preset--color--saatio);
}
.wp-block-list.is-style-palvelutags,
.wp-block-list.is-style-palvelutags-saatio {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--wp--preset--spacing--xs);
}
.wp-block-list.is-style-palvelutags.has-text-align-center,
.wp-block-list.is-style-palvelutags-saatio.has-text-align-center {
  justify-content: center;
}
.wp-block-list.is-style-palvelutags.has-text-align-right,
.wp-block-list.is-style-palvelutags-saatio.has-text-align-right {
  justify-content: flex-end;
}
.wp-block-list.is-style-palvelutags li,
.wp-block-list.is-style-palvelutags-saatio li {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--xs);
  border-radius: var(--wp--preset--border-radius--full);
  padding: 6px 14px 6px 8px;
  font-size: var(--wp--preset--font-size--tiny);
  font-weight: 500;
  line-height: 1.25;
}
.wp-block-list.is-style-palvelutags li::before,
.wp-block-list.is-style-palvelutags-saatio li::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  -webkit-mask-image: url("data:image/svg+xml,<svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2 6.5L4.5 9L10 3\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>");
          mask-image: url("data:image/svg+xml,<svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2 6.5L4.5 9L10 3\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  background-color: currentColor;
}
.wp-block-list.is-style-palvelutags li {
  background: var(--wp--preset--color--pastel-pink);
  color: var(--wp--preset--color--primary);
}
body.site-saatio .wp-block-list.is-style-palvelutags li {
  background: var(--wp--preset--color--light-blue);
  color: var(--wp--preset--color--bright-blue);
}
.wp-block-list.is-style-spacious li {
  margin-bottom: var(--wp--preset--spacing--md);
}
.wp-block-list.is-style-palvelutags-saatio li {
  background: var(--wp--preset--color--light-blue);
  color: var(--wp--preset--color--bright-blue);
}
.is-style-day-schedule {
  display: grid;
  grid-template-columns: fit-content(8rem) 1fr;
}
.is-style-day-schedule > * {
  grid-column: 1/-1;
}
.is-style-day-schedule > .wp-block-group {
  display: grid;
  grid-template-columns: subgrid;
}
.site-saatio .wp-block-list.is-style-palvelutags {
  --bg-color: var(--wp--preset--color--secondary);
}
.site-saatio .wp-block-button {
  --button-bg: var(--wp--preset--color--primary);
  --button-hover-bg: var(--wp--preset--color--saatio);
  --button-hover-border: var(--wp--preset--color--saatio);
}
.site-saatio .wp-block-button.is-style-secondary, .site-saatio .wp-block-button.is-style-arrow {
  --button-bg: var(--wp--preset--color--white);
  --button-txt: var(--wp--preset--color--primary);
  --button-border-color: var(--wp--preset--color--primary);
  --button-hover-bg: var(--wp--preset--color--white);
  --button-hover-txt: var(--wp--preset--color--saatio);
  --button-hover-border: var(--wp--preset--color--saatio);
}
.site-saatio .diakon-hero.has-primary-background-color {
  background-color: var(--wp--preset--color--saatio) !important;
}
.site-saatio .diakon-hero .wp-block-cover__background.has-primary-background-color {
  background-color: var(--wp--preset--color--saatio) !important;
}
.site-saatio .diakon-hero .safe-svg-inside {
  color: var(--wp--preset--color--saatio) !important;
}
.diakon-anchor-nav__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 0;
}
.diakon-anchor-nav__label::before {
  content: "";
  display: block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width=%2716%27 height=%2716%27 viewBox=%270 0 16 16%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M2 4.5C2 3.11929 3.11929 2 4.5 2H11.5C12.8807 2 14 3.11929 14 4.5V11.5C14 12.8807 12.8807 14 11.5 14H4.5C3.11929 14 2 12.8807 2 11.5V4.5ZM5.5 5C5.5 4.58579 5.16421 4.25 4.75 4.25C4.33579 4.25 4 4.58579 4 5C4 5.41421 4.33579 5.75 4.75 5.75C5.16421 5.75 5.5 5.41421 5.5 5ZM5.5 8C5.5 7.58579 5.16421 7.25 4.75 7.25C4.33579 7.25 4 7.58579 4 8C4 8.41421 4.33579 8.75 4.75 8.75C5.16421 8.75 5.5 8.41421 5.5 8ZM4.75 11.75C5.16421 11.75 5.5 11.4142 5.5 11C5.5 10.5858 5.16421 10.25 4.75 10.25C4.33579 10.25 4 10.5858 4 11C4 11.4142 4.33579 11.75 4.75 11.75ZM6.5 5C6.5 5.27614 6.72386 5.5 7 5.5H11.5C11.7761 5.5 12 5.27614 12 5C12 4.72386 11.7761 4.5 11.5 4.5H7C6.72386 4.5 6.5 4.72386 6.5 5ZM7 7.5C6.72386 7.5 6.5 7.72386 6.5 8C6.5 8.27614 6.72386 8.5 7 8.5H11.5C11.7761 8.5 12 8.27614 12 8C12 7.72386 11.7761 7.5 11.5 7.5H7ZM6.5 11C6.5 11.2761 6.72386 11.5 7 11.5H11.5C11.7761 11.5 12 11.2761 12 11C12 10.7239 11.7761 10.5 11.5 10.5H7C6.72386 10.5 6.5 10.7239 6.5 11Z%27 fill=%27%238C1B64%27/%3E%3C/svg%3E%0A");
          mask-image: url("data:image/svg+xml,%3Csvg width=%2716%27 height=%2716%27 viewBox=%270 0 16 16%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M2 4.5C2 3.11929 3.11929 2 4.5 2H11.5C12.8807 2 14 3.11929 14 4.5V11.5C14 12.8807 12.8807 14 11.5 14H4.5C3.11929 14 2 12.8807 2 11.5V4.5ZM5.5 5C5.5 4.58579 5.16421 4.25 4.75 4.25C4.33579 4.25 4 4.58579 4 5C4 5.41421 4.33579 5.75 4.75 5.75C5.16421 5.75 5.5 5.41421 5.5 5ZM5.5 8C5.5 7.58579 5.16421 7.25 4.75 7.25C4.33579 7.25 4 7.58579 4 8C4 8.41421 4.33579 8.75 4.75 8.75C5.16421 8.75 5.5 8.41421 5.5 8ZM4.75 11.75C5.16421 11.75 5.5 11.4142 5.5 11C5.5 10.5858 5.16421 10.25 4.75 10.25C4.33579 10.25 4 10.5858 4 11C4 11.4142 4.33579 11.75 4.75 11.75ZM6.5 5C6.5 5.27614 6.72386 5.5 7 5.5H11.5C11.7761 5.5 12 5.27614 12 5C12 4.72386 11.7761 4.5 11.5 4.5H7C6.72386 4.5 6.5 4.72386 6.5 5ZM7 7.5C6.72386 7.5 6.5 7.72386 6.5 8C6.5 8.27614 6.72386 8.5 7 8.5H11.5C11.7761 8.5 12 8.27614 12 8C12 7.72386 11.7761 7.5 11.5 7.5H7ZM6.5 11C6.5 11.2761 6.72386 11.5 7 11.5H11.5C11.7761 11.5 12 11.2761 12 11C12 10.7239 11.7761 10.5 11.5 10.5H7C6.72386 10.5 6.5 10.7239 6.5 11Z%27 fill=%27%238C1B64%27/%3E%3C/svg%3E%0A");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  background-color: var(--wp--preset--color--primary);
  margin-top: -2px;
}
.diakon-hero__subpage {
  position: relative;
  overflow: hidden;
}
.diakon-hero__subpage > * {
  padding-right: 3.75rem;
  hyphens: auto;
}
@media screen and (min-width: 782px) {
  .diakon-hero__subpage > * {
    padding-right: 6.25rem;
  }
}
.diakon-hero__subpage::before {
  content: "";
  position: absolute;
  right: 9rem;
  top: -1.625rem;
  width: 40%;
  max-width: 22.5rem;
  aspect-ratio: 347/495;
  background-image: url("data:image/svg+xml,%3Csvg width=%27347%27 height=%27495%27 viewBox=%270 0 347.297 495.075%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M202.384 481.697C259.879 490.663 321.89 390.408 340.892 257.773C359.894 125.138 328.696 10.3598 271.201 1.39372C213.706 -7.57234 151.694 92.6825 132.692 225.317C113.69 357.952 144.889 472.731 202.384 481.697Z%27 stroke=%27%23FCFDFF%27 stroke-width=%271.67212%27/%3E%3Cpath d=%27M214.018 485.42C290.026 454.983 323.836 354.717 289.516 261.464C255.196 168.21 165.753 117.28 89.7454 147.716C13.727 178.153 -20.0729 278.419 14.2473 371.673C48.5675 464.926 138.01 515.857 214.018 485.42Z%27 stroke=%27%23FCFDFF%27 stroke-width=%271.67212%27/%3E%3Cpath d=%27M206.462 458.033C265.841 434.261 291.316 353.404 263.354 277.442C235.402 201.48 164.598 159.168 105.229 182.951C45.8507 206.723 20.376 287.58 48.3378 363.542C76.2893 439.504 147.094 481.816 206.462 458.033Z%27 stroke=%27%23FCFDFF%27 stroke-width=%271.12326%27/%3E%3Cpath d=%27M206.535 450.652C244.914 456.633 288.891 371.64 304.771 260.802C320.651 149.963 302.419 55.2662 264.041 49.2852C225.662 43.3042 181.674 128.297 165.805 239.136C149.925 349.974 168.167 444.671 206.535 450.652Z%27 stroke=%27%23FCFDFF%27 stroke-width=%271.12326%27/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.3;
  pointer-events: none;
}
@media screen and (max-width: 781.98px) {
  .diakon-hero__subpage::before {
    right: 1.25rem;
  }
}
.diakon__subpage-intro > .has-global-padding {
  padding-right: var(--wp--style--root--padding-right);
  padding-left: var(--wp--style--root--padding-left);
}
:is([class^=diakon-hero],
[class*=" diakon-hero"],
[class^=diakon__hero],
[class*=" diakon__hero"]) > .wp-block-cover {
  padding-bottom: 0;
}
.diakon-hero {
  clip-path: inset(0 -20px -30px -20px);
  overflow: visible;
}
.diakon-hero > .wp-block-cover__image-background {
  border-radius: inherit;
}
.diakon-hero > .wp-block-cover__background {
  border-radius: inherit;
}
.diakon-hero .wp-block-heading,
.diakon-hero .has-h-1-font-size,
.diakon-hero .has-h-2-font-size {
  line-height: 1.25;
}
.diakon-hero .wp-block-heading:last-child,
.diakon-hero .has-h-1-font-size:last-child,
.diakon-hero .has-h-2-font-size:last-child {
  margin-bottom: 0;
}
@media screen and (max-width: 781.98px) {
  .diakon-hero.diakon-hero__general, .diakon-hero.diakon-hero__store {
    border-radius: 0 !important;
  }
}
@media screen and (max-width: 781.98px) {
  .diakon-hero {
    border-bottom-right-radius: var(--wp--preset--border-radius--2-xl) !important;
  }
}
.diakon-hero .wp-block-cover__inner-container {
  padding-left: 0;
  padding-right: 0;
}
.diakon-hero--inner {
  container-type: inline-size;
}
@media screen and (max-width: 781.98px) {
  .diakon-hero--inner {
    border-radius: 0 !important;
  }
}
@media screen and (max-width: 1023.98px) {
  .diakon-hero--inner {
    width: 100%;
  }
}
.diakon-hero__general .wp-block-group-is-layout-grid {
  display: grid;
  grid-template-columns: 1fr;
}
.is-preview-mode .diakon-hero__general .wp-block-group-is-layout-grid {
  grid-template-columns: auto 1fr;
}
@media screen and (min-width: 1024px) {
  .diakon-hero__general .wp-block-group-is-layout-grid {
    grid-template-columns: 328px minmax(0, 1fr);
  }
}
.diakon-hero__general .wp-block-group-is-layout-grid > :first-child {
  max-width: 20.5rem;
}
@media screen and (max-width: 1023.98px) {
  .diakon-hero__general .wp-block-group-is-layout-grid > :first-child {
    order: 2;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1279.98px) {
  .diakon-hero__general .wp-block-group-is-layout-grid > :last-child {
    padding-right: 110px !important;
  }
}
@media screen and (min-width: 1024px) {
  .diakon-hero__general .wp-block-group-is-layout-grid > :last-child {
    max-width: 44.1875rem;
  }
}
@media screen and (max-width: 1023.98px) {
  .diakon-hero__general .wp-block-group-is-layout-grid > :last-child {
    order: 1;
  }
}
.diakon-hero__locations .wp-block-group-is-layout-grid {
  display: grid;
  grid-template-columns: 1fr;
}
@container (min-width: 1024px) {
  .diakon-hero__locations .wp-block-group-is-layout-grid {
    grid-template-columns: 422px minmax(0, 1fr);
  }
}
.diakon-hero__locations .wp-block-group-is-layout-grid > :first-child {
  max-width: 26.375rem;
}
@container (max-width: 1023.98px) {
  .diakon-hero__locations .wp-block-group-is-layout-grid > :first-child {
    order: 2;
  }
}
@container (min-width: 1024px) and (max-width: 1279.98px) {
  .diakon-hero__locations .wp-block-group-is-layout-grid > :last-child {
    padding-right: 110px !important;
  }
}
@container (max-width: 1023.98px) {
  .diakon-hero__locations .wp-block-group-is-layout-grid > :last-child {
    order: 1;
  }
}
.diakon-hero__white .wp-block-group-is-layout-grid {
  display: grid;
  grid-template-columns: 1fr;
}
@container (min-width: 1024px) {
  .diakon-hero__white .wp-block-group-is-layout-grid {
    grid-template-columns: 467px minmax(0, 1fr);
  }
}
.diakon-hero__white .wp-block-group-is-layout-grid > :first-child {
  max-width: 29.1875rem;
}
@container (max-width: 1023.98px) {
  .diakon-hero__white .wp-block-group-is-layout-grid > :first-child {
    order: 2;
  }
}
@container (min-width: 1024px) and (max-width: 1279.98px) {
  .diakon-hero__white .wp-block-group-is-layout-grid > :last-child {
    padding-right: 110px !important;
  }
}
@container (max-width: 1023.98px) {
  .diakon-hero__white .wp-block-group-is-layout-grid > :last-child {
    order: 1;
  }
}
@media screen and (max-width: 810px) {
  .diakon__hero-blue-with-icon .wp-block-cover__inner-container > .wp-block-group {
    padding-bottom: 0.3rem !important;
  }
  .diakon__hero-blue-with-icon .wp-block-cover__inner-container .wp-block-cover {
    max-width: 65px;
    padding: 10px;
  }
}
.diakon-quote.wp-block-group.has-background {
  padding-top: var(--wp--preset--spacing--6-xl);
  padding-bottom: var(--wp--preset--spacing--6-xl);
}
@media screen and (min-width: 1024px) {
  .page-template-sidebar-page-template .diakon-quote.wp-block-group.has-background, .template-sidebar-page-template .diakon-quote.wp-block-group.has-background {
    position: relative;
    max-width: var(--wp--style--global--content-size);
    margin-left: 23.75rem;
    margin-right: 0;
    left: calc(50% - 11.875rem);
    transform: translateX(-50%);
  }
}
@media screen and (min-width: 1024px) and (max-width: 1199.98px) {
  .page-template-sidebar-page-template .diakon-slogan .wp-block-columns, .template-sidebar-page-template .diakon-slogan .wp-block-columns {
    flex-wrap: wrap !important;
  }
  .page-template-sidebar-page-template .diakon-slogan .wp-block-column, .template-sidebar-page-template .diakon-slogan .wp-block-column {
    flex-basis: 100% !important;
  }
}
@media screen and (max-width: 782px) {
  .diakon__offer--cols {
    flex-direction: column-reverse;
  }
}
@media screen and (min-width: 1024px) {
  .page-template-sidebar-page-template .diakon__offer--cols, .template-sidebar-page-template .diakon__offer--cols {
    flex-direction: column-reverse;
    flex-wrap: wrap !important;
  }
  .page-template-sidebar-page-template .diakon__offer--cols .wp-block-column, .template-sidebar-page-template .diakon__offer--cols .wp-block-column {
    flex-basis: 100% !important;
  }
}
@media screen and (min-width: 1024px) {
  .page-template-sidebar-page-template .diakon__offer--cols-small, .template-sidebar-page-template .diakon__offer--cols-small {
    flex-wrap: wrap !important;
  }
  .page-template-sidebar-page-template .diakon__offer--cols-small .wp-block-column, .template-sidebar-page-template .diakon__offer--cols-small .wp-block-column {
    flex-basis: 100% !important;
  }
}
@media screen and (max-width: 782px) {
  .diakon__offer-price-left .diakon__offer--cols-small {
    flex-direction: column-reverse;
  }
}
@media screen and (min-width: 1024px) {
  .page-template-sidebar-page-template .diakon__offer-price-left .diakon__offer--cols-small, .template-sidebar-page-template .diakon__offer-price-left .diakon__offer--cols-small {
    flex-direction: column-reverse;
    flex-wrap: wrap !important;
  }
  .page-template-sidebar-page-template .diakon__offer-price-left .diakon__offer--cols-small .wp-block-column, .template-sidebar-page-template .diakon__offer-price-left .diakon__offer--cols-small .wp-block-column {
    flex-basis: 100% !important;
  }
}
@media screen and (min-width: 1024px) {
  .page-template-sidebar-page-template .diakon__offer-price-left > .wp-block-group > .wp-block-group, .template-sidebar-page-template .diakon__offer-price-left > .wp-block-group > .wp-block-group {
    max-width: 700px;
  }
}
@media screen and (min-width: 1024px) {
  .page-template-sidebar-page-template .diakon__offer-price-right > .wp-block-group > .wp-block-group, .template-sidebar-page-template .diakon__offer-price-right > .wp-block-group > .wp-block-group {
    max-width: 700px;
  }
}
.diakon__offer-price-right .diakon__offer--arch {
  margin-left: auto;
}
.diakon__offer--arch {
  max-width: 300px;
  width: 100%;
}
.diakon__table-row-schedule {
  align-items: start;
}
.diakon__table-row-schedule > :only-child {
  grid-column: 1/-1;
}
.diakon__table-row-schedule > :nth-child(n+3) {
  grid-column: 1/-1;
}
.diakon__table-row-schedule:not(:has(> .wp-block ~ .wp-block)) > .wp-block {
  grid-column: 1/-1;
}
.wp-block-columns[class*=diakon__table-row-price] {
  flex-wrap: nowrap !important;
}
.wp-block-columns[class*=diakon__table-row-price] > .wp-block-column {
  flex-basis: 0 !important;
  flex-grow: 1;
}
@media screen and (max-width: 599.98px) {
  .wp-block-columns[class*=diakon__table-row-price] {
    font-size: var(--wp--preset--font-size--tiny) !important;
  }
  .wp-block-columns[class*=diakon__table-row-price] p,
  .wp-block-columns[class*=diakon__table-row-price] .wp-block-paragraph {
    font-size: inherit !important;
  }
}
@media screen and (max-width: 599.98px) {
  .wp-block-columns[class*=diakon__table-row-price][class*="3col"] {
    flex-wrap: wrap !important;
  }
  .wp-block-columns[class*=diakon__table-row-price][class*="3col"] > .wp-block-column:first-child {
    flex-basis: 100% !important;
  }
}
@media screen and (min-width: 540px) and (max-width: 1023.98px) {
  .diakon__image-grid-2 .wp-block-group-is-layout-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)) !important;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1347.98px) {
  .page-template-sidebar-page-template .diakon__image-grid-2 .wp-block-group-is-layout-grid, .template-sidebar-page-template .diakon__image-grid-2 .wp-block-group-is-layout-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)) !important;
  }
}
@media screen and (min-width: 1348px) {
  .page-template-sidebar-page-template .diakon__image-grid-2 .wp-block-group-is-layout-grid, .template-sidebar-page-template .diakon__image-grid-2 .wp-block-group-is-layout-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)) !important;
  }
}
@media screen and (min-width: 540px) and (max-width: 1123.98px) {
  .diakon__image-grid-3 .wp-block-group-is-layout-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)) !important;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1347.98px) {
  .page-template-sidebar-page-template .diakon__image-grid-3 .wp-block-group-is-layout-grid, .template-sidebar-page-template .diakon__image-grid-3 .wp-block-group-is-layout-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(15.4rem, 100%), 1fr)) !important;
  }
}
@media screen and (min-width: 1348px) {
  .page-template-sidebar-page-template .diakon__image-grid-3 .wp-block-group-is-layout-grid, .template-sidebar-page-template .diakon__image-grid-3 .wp-block-group-is-layout-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)) !important;
  }
}
@media screen and (max-width: 782px) {
  .diakon__offer-with-image .diakon__offer--cols {
    flex-direction: column-reverse;
  }
}
@media screen and (min-width: 1024px) {
  .page-template-sidebar-page-template .diakon__offer-with-image .diakon__offer--cols, .template-sidebar-page-template .diakon__offer-with-image .diakon__offer--cols {
    flex-direction: column-reverse;
    flex-wrap: wrap !important;
  }
  .page-template-sidebar-page-template .diakon__offer-with-image .diakon__offer--cols .wp-block-column, .template-sidebar-page-template .diakon__offer-with-image .diakon__offer--cols .wp-block-column {
    flex-basis: 100% !important;
  }
}
@media screen and (min-width: 1024px) {
  .page-template-sidebar-page-template .diakon__offer-with-image > .wp-block-group > .wp-block-group, .template-sidebar-page-template .diakon__offer-with-image > .wp-block-group > .wp-block-group {
    max-width: 700px;
    margin-left: 0 !important;
  }
}
@media screen and (max-width: 782px) {
  .diakon__offer-with-image .wp-block-image {
    max-width: 450px;
    margin-left: auto;
    margin-right: auto;
  }
}
@media screen and (min-width: 1024px) {
  .page-template-sidebar-page-template .diakon__offer-with-image .wp-block-image, .template-sidebar-page-template .diakon__offer-with-image .wp-block-image {
    max-width: 450px;
    margin-left: auto;
    margin-right: auto;
  }
}
.diakon__logo-grid .wp-block-group.is-layout-grid .wp-block-image {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.diakon__logo-grid .wp-block-group.is-layout-grid .wp-block-image img {
  max-height: 200px;
  max-width: 100%;
  width: auto;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  align-self: center;
}
.wp-block-post-content > .wp-block-group.diakon__logo-grid:not(.diakon-hero, [class*=diakon-hero__]) {
  margin-top: 5rem;
  margin-bottom: 5rem;
}
[class*=diakon__cards-] {
  z-index: 1;
}
.diakon__card-with-rounded-borders .wp-block-image + .wp-block-group {
  border-bottom-left-radius: var(--wp--preset--border-radius--m);
  border-bottom-right-radius: var(--wp--preset--border-radius--m);
  padding: 1rem;
}
.diakon__card-with-rounded-borders .wp-block-image + .wp-block-group:not(.has-background) {
  background-color: var(--wp--preset--color--white);
}
.diakon__hero-modal {
  position: relative;
  overflow: hidden;
  height: 16.25rem;
}
.diakon__hero-modal::before {
  content: "";
  position: absolute;
  right: 5.8125rem;
  top: -1.625rem;
  max-width: 260px;
  width: 100%;
  aspect-ratio: 347/495;
  background-image: url("data:image/svg+xml,%3Csvg width=%27347%27 height=%27495%27 viewBox=%270 0 347.297 495.075%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M202.384 481.697C259.879 490.663 321.89 390.408 340.892 257.773C359.894 125.138 328.696 10.3598 271.201 1.39372C213.706 -7.57234 151.694 92.6825 132.692 225.317C113.69 357.952 144.889 472.731 202.384 481.697Z%27 stroke=%27%23FCFDFF%27 stroke-width=%271.67212%27/%3E%3Cpath d=%27M214.018 485.42C290.026 454.983 323.836 354.717 289.516 261.464C255.196 168.21 165.753 117.28 89.7454 147.716C13.727 178.153 -20.0729 278.419 14.2473 371.673C48.5675 464.926 138.01 515.857 214.018 485.42Z%27 stroke=%27%23FCFDFF%27 stroke-width=%271.67212%27/%3E%3Cpath d=%27M206.462 458.033C265.841 434.261 291.316 353.404 263.354 277.442C235.402 201.48 164.598 159.168 105.229 182.951C45.8507 206.723 20.376 287.58 48.3378 363.542C76.2893 439.504 147.094 481.816 206.462 458.033Z%27 stroke=%27%23FCFDFF%27 stroke-width=%271.12326%27/%3E%3Cpath d=%27M206.535 450.652C244.914 456.633 288.891 371.64 304.771 260.802C320.651 149.963 302.419 55.2662 264.041 49.2852C225.662 43.3042 181.674 128.297 165.805 239.136C149.925 349.974 168.167 444.671 206.535 450.652Z%27 stroke=%27%23FCFDFF%27 stroke-width=%271.12326%27/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.3;
  pointer-events: none;
}
@media screen and (max-width: 781.98px) {
  .diakon__hero-modal::before {
    right: 1.25rem;
  }
}
/**
 * Yhteydenotto-popup pattern.
 *
 * Shared rather than frontend-only: the popup canvas is the one place editors
 * compose this, so the graphic has to sit where it will sit in the dialog.
 */
.diakon__popup-contact {
  align-items: stretch;
}
/*
 * The two largest corners come down to 2XL on a phone.
 *
 * 200px and 260px are corners for a 1280px hero; on a 375px screen they eat
 * the box they are rounding, and every pattern that used one had to say so
 * itself -- see the !important in _diakon-hero.scss. Redefining the presets
 * instead means one rule covers every block that picked 3XL or 4XL in the
 * editor, whatever pattern it sits in and whichever corner it set.
 *
 * It reads 2XL rather than 120px so the three stay tied together: change the
 * preset in theme.json and this follows.
 *
 * theme.json puts the presets on :root, and this comes after them in both
 * places -- global styles print before screen.css on the front end, and
 * get_block_editor_settings() merges the theme's editor styles after the
 * global ones -- so the same selector is enough to win. No !important.
 *
 * Only the value of the variable changes. A block that typed 200px into the
 * editor by hand rather than choosing the preset keeps its 200px; those are
 * listed per post in the radius scan.
 */
:root {
  --diakon-border-radius-3-xl: 200px;
  --diakon-border-radius-4-xl: 260px;
}
@media screen and (max-width: 781.98px) {
  :root {
    --wp--preset--border-radius--3-xl: var(
    	--wp--preset--border-radius--2-xl
    );
    --wp--preset--border-radius--4-xl: var(
    	--wp--preset--border-radius--2-xl
    );
  }
  .diakon-hero img {
    --wp--preset--border-radius--3-xl: var(--diakon-border-radius-3-xl);
    --wp--preset--border-radius--4-xl: var(--diakon-border-radius-4-xl);
  }
}
.is-no-shrink {
  flex-shrink: 0;
}
.wp-block-group.has-background:not(.has-global-padding) {
  padding: 0;
}
.wp-block-post-content > .wp-block-group:not(.diakon-hero,
[class*=diakon-hero__],
[class*=diakon__hero]) {
  margin-top: var(--wp--preset--spacing--5-xl);
  margin-bottom: var(--wp--preset--spacing--5-xl);
}
.wp-block-post-content > .wp-block-group:not(.diakon-hero,
[class*=diakon-hero__],
[class*=diakon__hero]):first-child {
  margin-top: 0;
}
body:not(.single-post) .wp-block-post-content > .wp-block-group:not(.diakon-hero,
[class*=diakon-hero__],
[class*=diakon__hero]):first-child {
  margin-top: var(--wp--preset--spacing--4-xl);
}
.wp-block-post-content > .wp-block-group.alignfull:not(.diakon-hero,
[class*=diakon-hero__],
[class*=diakon__hero]).is-style-secondary, .wp-block-post-content > .wp-block-group.alignfull:not(.diakon-hero,
[class*=diakon-hero__],
[class*=diakon__hero]).is-style-lightest-grey, .wp-block-post-content > .wp-block-group.alignfull:not(.diakon-hero,
[class*=diakon-hero__],
[class*=diakon__hero]).is-style-light-grey, .wp-block-post-content > .wp-block-group.alignfull:not(.diakon-hero,
[class*=diakon-hero__],
[class*=diakon__hero]).is-style-white,
.wp-block-post-content .is-root-container > .block-editor-block-list__block.is-style-secondary,
.wp-block-post-content .is-root-container > .block-editor-block-list__block.is-style-lightest-grey,
.wp-block-post-content .is-root-container > .block-editor-block-list__block.is-style-light-grey,
.wp-block-post-content .is-root-container > .block-editor-block-list__block.is-style-white {
  padding-top: var(--wp--preset--spacing--5-xl);
  padding-bottom: var(--wp--preset--spacing--5-xl);
}
.wp-block-post-content > .wp-block-group.alignfull:not(.diakon-hero,
[class*=diakon-hero__],
[class*=diakon__hero]).is-style-secondary:has(+ .is-style-secondary), .wp-block-post-content > .wp-block-group.alignfull:not(.diakon-hero,
[class*=diakon-hero__],
[class*=diakon__hero]).is-style-lightest-grey:has(+ .is-style-lightest-grey), .wp-block-post-content > .wp-block-group.alignfull:not(.diakon-hero,
[class*=diakon-hero__],
[class*=diakon__hero]).is-style-light-grey:has(+ .is-style-light-grey), .wp-block-post-content > .wp-block-group.alignfull:not(.diakon-hero,
[class*=diakon-hero__],
[class*=diakon__hero]).is-style-white:has(+ .is-style-white),
.wp-block-post-content .is-root-container > .block-editor-block-list__block.is-style-secondary:has(+ .is-style-secondary),
.wp-block-post-content .is-root-container > .block-editor-block-list__block.is-style-lightest-grey:has(+ .is-style-lightest-grey),
.wp-block-post-content .is-root-container > .block-editor-block-list__block.is-style-light-grey:has(+ .is-style-light-grey),
.wp-block-post-content .is-root-container > .block-editor-block-list__block.is-style-white:has(+ .is-style-white) {
  padding-bottom: 0;
}
.wp-block-post-content > .wp-block-group[class*=is-style-]:not([class*=is-style-default]) + .wp-block-group[class*=is-style-]:not([class*=is-style-default]) {
  margin-top: var(--wp--preset--spacing--0);
}
.wp-block-post-content > .wp-block-group[class*=is-style-]:not([class*=is-style-default]):last-child,
.wp-block-post-content > .wp-block-group[class*=is-style-default][class*=has-background]:last-child,
.wp-block-post-content > .wp-block-group[class*=has-background]:last-child {
  margin-bottom: var(--wp--preset--spacing--0);
}
.wp-block-post-content > .wp-block-group[class*=is-style-]:not([class*=is-style-default]):has(+ .wp-block-group[class*=is-style-]:not([class*=is-style-default])) {
  margin-bottom: var(--wp--preset--spacing--0);
}
.wp-block-post-content > :is(p,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
.wp-block-image,
.wp-block-quote,
.wp-block-table):first-child {
  margin-block-start: var(--wp--preset--spacing--3-xl);
}
.wp-block-post-content > * + :is(p,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
.wp-block-image,
.wp-block-quote,
.wp-block-table) {
  margin-block-start: var(--wp--preset--spacing--xl);
}
.wp-block-columns > .wp-block-column.is-no-grow,
.is-no-grow {
  flex-grow: 0;
  flex-basis: fit-content !important;
}
.is-hyphenated {
  hyphens: auto;
  overflow-wrap: break-word;
}
.is-no-link-underline a {
  text-decoration: none;
}
.is-no-link-underline a:hover {
  text-decoration: underline;
}
[data-z-index] {
  position: relative;
}
[data-z-index="-1"] {
  z-index: -1;
}
[data-z-index="0"] {
  z-index: 0;
}
[data-z-index="1"] {
  z-index: 1;
}
[data-z-index="2"] {
  z-index: 2;
}
[data-z-index="3"] {
  z-index: 3;
}
[data-z-index="4"] {
  z-index: 4;
}
[data-z-index="5"] {
  z-index: 5;
}
[data-z-index="6"] {
  z-index: 6;
}
[data-z-index="7"] {
  z-index: 7;
}
[data-z-index="8"] {
  z-index: 8;
}
[data-z-index="9"] {
  z-index: 9;
}
[data-z-index="10"] {
  z-index: 10;
}
.is-style-diakon {
  --wp--preset--color--primary: var(--wp--preset--color--diakon);
}
.is-style-diakon.has-left-border {
  border-left-color: var(--wp--preset--color--diakon) !important;
}
.is-style-diakon .is-style-palvelutags li {
  background-color: var(--wp--preset--color--pastel-pink) !important;
  color: var(--wp--preset--color--diakon) !important;
}
.is-style-foundation {
  --wp--preset--color--primary: var(--wp--preset--color--bright-blue);
}
.is-style-foundation.has-left-border {
  border-left-color: var(--wp--preset--color--bright-blue) !important;
}
mark {
  background-color: transparent;
}
strong {
  font-weight: 700;
}
/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  scroll-behavior: smooth;
  /*
  * The scrollbar's space is kept whether or not there is a scrollbar, so
  * that locking the page below a modal does not shift the page sideways as
  * the bar disappears. On the platforms whose scrollbars float over the
  * content -- macOS, iOS, Android -- this reserves nothing and costs
  * nothing.
  */
  scrollbar-gutter: stable;
}
:root {
  --wp--preset--spacing--0: 0;
}
/* Remove default margin in favour of better control in authored CSS */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin-block-end: 0;
}
:where(h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, figure) {
  margin-block: 0;
}
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role=list],
ol[role=list] {
  list-style: none;
}
/* Set core body defaults */
body {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  line-height: 1.35;
}
/* Balance text wrapping on headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}
/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
}
/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}
/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}
/*
 * Nothing scrolls behind an open modal.
 *
 * Every overlay on this site is a <dialog> opened with showModal() -- the
 * popups, the mobile menu, the distribution calendar's own dialog -- and the
 * top layer brings the focus trap, the Escape key and an inert page with it.
 * What it does not bring is a still page: the wheel and the trackpad scroll
 * whatever is underneath, so a reader who meant to read the popup loses their
 * place on the page behind it.
 *
 * :has() rather than a class toggled in JavaScript, because the open attribute
 * is already the truth and every dialog sets it -- including any added later,
 * by a plugin or by a block, without knowing about this rule.
 *
 * Both elements: html alone leaves iOS Safari scrolling the body.
 */
html:has(dialog[open]),
html:has(dialog[open]) body {
  overflow: hidden;
}
@media screen and (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
.extend-link {
  position: relative;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.extend-link a:not([rel=tag]):before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  z-index: 1;
}
.extend-link button,
.extend-link input,
.extend-link select,
.extend-link textarea,
.extend-link [rel=tag],
.extend-link [role=button] {
  position: relative;
  z-index: 2;
}
.extend-link .wp-block-group {
  position: static;
}
.display-none {
  display: none !important;
}
.show-mobile {
  display: block !important;
}
@media (min-width: 540px) {
  .show-mobile {
    display: none !important;
  }
}
.hide-mobile {
  display: none !important;
}
@media (min-width: 540px) {
  .hide-mobile {
    display: block !important;
  }
}
.entry-content {
  container-type: inline-size;
}
p:empty {
  display: none;
}
.oflow-hidden {
  overflow: hidden;
}
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  border: 0;
  padding: 0;
}
/**
 * Contact Form 7.
 *
 * `WPCF7_LOAD_CSS` is false in wp-config.php, so the plugin ships no CSS at
 * all — everything the form needs, structural behaviour included, lives here.
 *
 * The form markup has no `<p>`/`<br>` wrappers: `lib/forms.php` filters
 * `wpcf7_autop_or_not` to false, so each row is a bare `<label>` holding its
 * text plus a `.wpcf7-form-control-wrap`, and the submit button and spinner
 * are direct children of the form.
 */
.wpcf7 {
  --form-gap: 1.5rem;
  --form-label-gap: 0.375rem;
  --form-control-height: 2.75rem;
  --form-control-padding: 0.5rem 1rem;
  --form-border: 0.0625rem solid var(--wp--preset--color--grey);
  --form-choice-stacked-gap: 0.125rem;
  --form-choice-padding: 0.375rem 0.5rem;
  --form-radius: var(--wp--preset--border-radius--xs);
  --form-error: var(--wp--preset--color--error-bright);
  /* Rhythm from the design: 40 between sections, 24 between groups, 16 from
  a heading or question to what it introduces, 6 from a label to its
  control, 8 inside a choice list, 32 above the submit. */
  --form-section-gap: 2.5rem;
  --form-group-gap: 1rem;
  --form-choice-gap: 0.5rem;
  --form-submit-gap: 2rem;
  padding: var(--wp--preset--spacing--xl);
  border-radius: var(--wp--preset--border-radius--m);
  background-color: var(--wp--preset--color--white);
  box-shadow: 0 0.25rem 0.9375rem 0 rgba(0, 0, 0, 0.2);
}
/* --------------------------------------------------------------------------
 * Plugin behaviour that the stylesheet has to carry
 * ----------------------------------------------------------------------- */
.wpcf7 .screen-reader-response {
  position: absolute;
  overflow: hidden;
  clip-path: inset(50%);
  width: 0.0625rem;
  height: 0.0625rem;
  margin: -0.0625rem;
  padding: 0;
  border: 0;
  word-wrap: normal !important;
  word-break: normal !important;
}
.wpcf7 .hidden-fields-container {
  display: none;
}
.wpcf7 [inert] {
  opacity: 0.5;
}
.wpcf7 input[type=file] {
  cursor: pointer;
}
.wpcf7 input[type=file]:disabled {
  cursor: default;
}
.wpcf7 input[type=url],
.wpcf7 input[type=email],
.wpcf7 input[type=tel] {
  direction: ltr;
}
.wpcf7-reflection > output {
  display: list-item;
  list-style: none;
}
.wpcf7-reflection > output[hidden] {
  display: none;
}
/* --------------------------------------------------------------------------
 * Sectioned forms — headings, question labels and choice lists
 * ----------------------------------------------------------------------- */
.wpcf7-form .form-section {
  color: var(--wp--preset--color--black);
  font-size: var(--wp--preset--font-size--body);
  font-weight: 700;
  line-height: 1.25;
}
/*
 * A question above a choice list. It labels the group rather than one control,
 * so it is a paragraph, not a <label> — nothing to point a `for` at.
 */
.wpcf7-form .form-question {
  color: var(--wp--preset--color--black);
  font-size: var(--wp--preset--font-size--body-small);
  font-weight: 500;
  line-height: 1.25;
}
.wpcf7-form .form-note {
  color: var(--wp--preset--color--dark-grey);
  font-size: var(--wp--preset--font-size--body-small);
  font-weight: 500;
  line-height: 1.25;
}
/* A question and its choices belong together; the group opens the full gap. */
/* --------------------------------------------------------------------------
 * Layout
 * ----------------------------------------------------------------------- */
.wpcf7-form-control-wrap {
  position: relative;
  display: block;
  width: 100%;
}
/*
 * :is() rather than a selector list: it keeps the specificity of a single
 * class, so every nested rule below stays at the weight it had when the form
 * was the only container.
 */
:is(.wpcf7-form, .form-conditional) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 0;
  /* The gap binds a label to the control that follows it. */
  gap: var(--form-label-gap);
  /* Fields span the form; the submit row is what shares a line. */
}
:is(.wpcf7-form, .form-conditional) > label,
:is(.wpcf7-form, .form-conditional) > .row,
:is(.wpcf7-form, .form-conditional) > .form-grid,
:is(.wpcf7-form, .form-conditional) > .form-conditional,
:is(.wpcf7-form, .form-conditional) > .form-section,
:is(.wpcf7-form, .form-conditional) > .form-question,
:is(.wpcf7-form, .form-conditional) > .form-note,
:is(.wpcf7-form, .form-conditional) > .wpcf7-form-control-wrap,
:is(.wpcf7-form, .form-conditional) > .wpcf7-turnstile,
:is(.wpcf7-form, .form-conditional) > .wpcf7-response-output {
  flex: 0 0 100%;
}
:is(.wpcf7-form, .form-conditional) {
  /*
  * Labels and controls are siblings, so a field group is a [label][control]
  * pair. Closing each group opens the full gap before the next label.
  */
}
:is(.wpcf7-form, .form-conditional) > .row,
:is(.wpcf7-form, .form-conditional) > .form-grid,
:is(.wpcf7-form, .form-conditional) > .form-conditional,
:is(.wpcf7-form, .form-conditional) > .wpcf7-form-control-wrap,
:is(.wpcf7-form, .form-conditional) > .wpcf7-turnstile:has(iframe) {
  margin-bottom: calc(var(--form-gap) - var(--form-label-gap));
}
:is(.wpcf7-form, .form-conditional) {
  /* The group's own last child already closed the gap below it. */
}
:is(.wpcf7-form, .form-conditional) > .form-conditional > :last-child {
  margin-bottom: 0;
}
:is(.wpcf7-form, .form-conditional) {
  /* No margins of their own; the rhythm below owns them. */
}
:is(.wpcf7-form, .form-conditional) > .form-section,
:is(.wpcf7-form, .form-conditional) > .form-question,
:is(.wpcf7-form, .form-conditional) > .form-note {
  margin: 0;
}
:is(.wpcf7-form, .form-conditional) {
  /*
  * A section heading opens a new block of the form, and both it and a
  * question bind to what they introduce.
  */
}
:is(.wpcf7-form, .form-conditional) > .form-section {
  margin-top: 1rem;
  margin-bottom: calc(var(--form-group-gap) - var(--form-label-gap));
}
:is(.wpcf7-form, .form-conditional) > .form-section.no-margin {
  margin-top: 0;
}
:is(.wpcf7-form, .form-conditional) > .form-question {
  margin-bottom: calc(var(--form-group-gap) - var(--form-label-gap));
}
:is(.wpcf7-form, .form-conditional) > .form-section:first-child {
  margin-top: 0;
}
:is(.wpcf7-form, .form-conditional) {
  /* "Pakollinen kenttä *" sits close under the last field. */
}
:is(.wpcf7-form, .form-conditional) > .wpcf7-form-control-wrap:has(+ .form-note) {
  margin-bottom: calc(var(--form-choice-gap) - var(--form-label-gap));
}
:is(.wpcf7-form, .form-conditional) {
  /* The consent paragraph is a group of its own, then its checkbox. */
}
:is(.wpcf7-form, .form-conditional) > .form-note:has(+ .form-note) {
  margin-bottom: calc(var(--form-gap) - var(--form-label-gap));
}
:is(.wpcf7-form, .form-conditional) > .form-note:has(+ .wpcf7-form-control-wrap) {
  margin-bottom: calc(var(--form-group-gap) - var(--form-label-gap));
}
:is(.wpcf7-form, .form-conditional) {
  /*
  * The status message follows the submit button in the markup, so it needs
  * an order of its own to stay behind the reordered submit row.
  */
}
:is(.wpcf7-form, .form-conditional) > .wpcf7-response-output {
  order: 4;
  margin-top: calc(var(--form-gap) - var(--form-label-gap));
}
/*
 * Fields that share a row. Each label/control pair is wrapped, so the grid can
 * wrap them as units — the flat .row below cannot, and stays for forms whose
 * markup predates this.
 */
.wpcf7-form .form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11.25rem, 1fr));
  gap: var(--form-gap) var(--wp--preset--spacing--md);
}
/* A short field beside a long one, rather than an even split. */
.wpcf7-form .form-grid.is-uneven {
  grid-template-columns: 1fr 2fr;
}
@media screen and (max-width: 599.98px) {
  .wpcf7-form .form-grid.is-uneven {
    grid-template-columns: 1fr;
  }
}
/* Many small fields — the weekdays — fit as many across as they can. */
.wpcf7-form .form-grid.is-auto {
  grid-template-columns: repeat(auto-fit, minmax(8.75rem, 1fr));
}
.wpcf7-form .field {
  display: flex;
  flex-direction: column;
  gap: var(--form-label-gap);
}
.form-conditional[hidden] {
  display: none;
}
/* The name pair: two columns, each stacking its own label over its control. */
.wpcf7-form .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  grid-auto-flow: column;
  -moz-column-gap: var(--wp--preset--spacing--md);
       column-gap: var(--wp--preset--spacing--md);
  row-gap: var(--form-label-gap);
}
@media screen and (max-width: 599.98px) {
  .wpcf7-form .row {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
  }
  .wpcf7-form .row > label:not(:first-child) {
    margin-top: calc(var(--form-gap) - var(--form-label-gap));
  }
}
/* --------------------------------------------------------------------------
 * Labels and controls
 * ----------------------------------------------------------------------- */
.wpcf7-form label {
  display: block;
  color: var(--wp--preset--color--primary);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.15;
}
.wpcf7-form input:not([type=submit], [type=checkbox], [type=radio]),
.wpcf7-form select,
.wpcf7-form textarea {
  width: 100%;
  min-height: var(--form-control-height);
  padding: var(--form-control-padding);
  border: var(--form-border);
  border-radius: var(--form-radius);
  background-color: var(--wp--preset--color--white);
  color: var(--wp--preset--color--black);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.35;
}
.wpcf7-form textarea {
  min-height: 9.625rem;
  resize: vertical;
}
/*
 * Chevron exported from the design; the wrapper is `position: relative`. The
 * tinted ground is the design's own: it separates a dropdown from the text
 * fields around it, which are white.
 */
.wpcf7-form select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: var(--wp--preset--color--secondary);
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg width=%2711.5%27 height=%276.5%27 viewBox=%270 0 11.5 6.5%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cg transform=%27translate%280 6.5%29 rotate%28-90%29%27%3E%3Cpath d=%27M5.75 0.75L0.75 5.75L5.75 10.75%27 stroke=%27%238C1B64%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 0.71875rem 0.40625rem;
  cursor: pointer;
}
.wpcf7-list-item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0 var(--wp--preset--spacing--md) 0 0;
  color: var(--wp--preset--color--black);
  font-size: 1rem;
  line-height: 1.35;
}
/* Every control CF7 renders carries `.wpcf7-form-control`. */
.wpcf7-form .wpcf7-form-control:not(.wpcf7-submit)::-moz-placeholder {
  color: var(--wp--preset--color--medium-grey);
  opacity: 1;
}
.wpcf7-form .wpcf7-form-control:not(.wpcf7-submit)::placeholder {
  color: var(--wp--preset--color--medium-grey);
  opacity: 1;
}
.wpcf7-form .wpcf7-form-control:not(.wpcf7-submit):focus-visible {
  border-color: var(--wp--preset--color--primary);
  outline: 0.125rem solid var(--wp--preset--color--primary);
  outline-offset: 0.0625rem;
}
.wpcf7-form .wpcf7-form-control:not(.wpcf7-submit):disabled {
  background-color: var(--wp--preset--color--light-grey);
  color: var(--wp--preset--color--medium-grey);
  cursor: not-allowed;
}
.wpcf7-form .wpcf7-checkbox,
.wpcf7-form .wpcf7-radio,
.wpcf7-form .wpcf7-acceptance {
  display: flex;
  flex-wrap: wrap;
  gap: var(--form-choice-gap);
}
.wpcf7-form .wpcf7-list-item {
  display: block;
  margin: 0;
}
.wpcf7-form .wpcf7-list-item label {
  display: flex;
  align-items: flex-start;
  gap: var(--form-choice-gap);
  color: var(--wp--preset--color--dark-grey);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.35;
  cursor: pointer;
}
/* Square, 20px, brand fill when ticked — drawn rather than the UA default. */
.wpcf7-form input[type=checkbox],
.wpcf7-form input[type=radio] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  border: var(--form-border);
  border-radius: var(--form-radius);
  background-color: var(--wp--preset--color--white);
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}
.wpcf7-form input[type=checkbox]:checked,
.wpcf7-form input[type=radio]:checked {
  border-color: var(--wp--preset--color--primary);
  background-color: var(--wp--preset--color--primary);
  background-image: url("data:image/svg+xml,%3Csvg width=%2712%27 height=%2710%27 viewBox=%270 0 12 10%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M1 5.2L4.4 8.6L11 2%27 stroke=%27%23FCFDFF%27 stroke-width=%271.75%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
}
.wpcf7-form input[type=checkbox]:focus-visible,
.wpcf7-form input[type=radio]:focus-visible {
  outline: 0.125rem solid var(--wp--preset--color--primary);
  outline-offset: 0.125rem;
}
/*
 * Round where only one answer counts, square where several may: an exclusive
 * checkbox is a radio in all but markup, so it reads as one.
 */
.wpcf7-form .wpcf7-radio input[type=radio],
.wpcf7-form .wpcf7-exclusive-checkbox input[type=checkbox] {
  border-radius: 50%;
}
.wpcf7-form .wpcf7-radio input[type=radio]:checked,
.wpcf7-form .wpcf7-exclusive-checkbox input[type=checkbox]:checked {
  background-image: none;
  box-shadow: inset 0 0 0 0.1875rem var(--wp--preset--color--white);
}
/* The acceptance is one long line of text, not a row of choices. */
.wpcf7-form .wpcf7-acceptance .wpcf7-list-item label {
  align-items: flex-start;
  font-size: var(--wp--preset--font-size--tiny);
  font-weight: 500;
  line-height: 1.25;
}
/*
 * One choice per line.
 *
 * The row above suits "Kyllä / Ei". It does not suit five options of the
 * length these forms ask in Finnish -- "Osallistua ryhmänohjaajakoulutukseen"
 * beside three of its siblings wraps mid-option, and a wrapped option reads as
 * two. wp diakon restyle-forms decides which is which and writes the class,
 * from the length and number of the choices themselves.
 */
.wpcf7-form .is-stacked {
  flex-direction: column;
  gap: var(--form-choice-stacked-gap);
}
/*
 * The whole line is the target, not the 20px box.
 *
 * A choice is a label with a box in it, so the padding belongs to the label:
 * it gives the pointer somewhere forgiving to land and the hover somewhere to
 * show, and it keeps two stacked choices from touching.
 */
.wpcf7-form .is-stacked .wpcf7-list-item label {
  padding: var(--form-choice-padding);
  border-radius: var(--form-radius);
  transition: background-color 0.15s ease;
}
.wpcf7-form .is-stacked .wpcf7-list-item label:hover {
  background-color: var(--wp--preset--color--lightest-grey);
}
.wpcf7-form .wpcf7-date.is-narrow {
  width: 8.5rem;
}
/* --------------------------------------------------------------------------
 * Validation
 * ----------------------------------------------------------------------- */
.wpcf7-form .wpcf7-not-valid {
  border-color: var(--form-error);
}
.wpcf7-not-valid-tip {
  display: block;
  margin-top: 0.25rem;
  color: var(--form-error);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.15;
}
.wpcf7-form .wpcf7-response-output {
  padding: 0.625rem 1rem;
  border: 0.125rem solid var(--wp--preset--color--grey);
  border-radius: var(--form-radius);
  color: var(--wp--preset--color--black);
  font-size: var(--wp--preset--font-size--tiny);
  line-height: 1.25;
}
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output {
  display: none;
}
.wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--wp--preset--color--primary);
}
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
  border-color: var(--form-error);
  color: var(--wp--preset--color--error-dark);
}
/* --------------------------------------------------------------------------
 * Submit row — spinner and button share the last line, aligned right
 * ----------------------------------------------------------------------- */
.wpcf7-spinner {
  visibility: hidden;
  order: 2;
  margin: 0;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: none;
  border-radius: 100%;
  background-color: var(--wp--preset--color--primary);
  opacity: 0.75;
  position: relative;
}
/* The submit row stands away from the form. */
.wpcf7-form > .wpcf7-submit,
.wpcf7-form > .wpcf7-spinner {
  margin-top: calc(var(--form-submit-gap) - var(--form-gap));
}
form.submitting .wpcf7-spinner {
  visibility: visible;
}
.wpcf7-spinner::before {
  content: "";
  position: absolute;
  top: 0.25rem;
  left: 0.25rem;
  width: 0.375rem;
  height: 0.375rem;
  border: none;
  border-radius: 100%;
  background-color: var(--wp--preset--color--white);
  transform-origin: 0.5rem 0.5rem;
  animation: spin 1000ms linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .wpcf7-spinner::before {
    animation: blink 2000ms linear infinite;
  }
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes blink {
  from {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.wpcf7-form .wpcf7-submit {
  order: 3;
  padding: 1rem var(--wp--preset--spacing--xl);
  border: none;
  border-radius: 5.625rem;
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
  font-family: inherit;
  font-size: var(--wp--preset--font-size--body);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.wpcf7-form .wpcf7-submit:focus-visible {
  outline: 0.125rem solid var(--wp--preset--color--primary);
  outline-offset: 0.125rem;
}
.wpcf7-form .wpcf7-submit:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.wpcf7-form .wpcf7-submit:hover:not(:disabled) {
  background-color: var(--wp--preset--color--primary);
}
/*
 * Inside an accordion the item already is the card, so the form's own card
 * would be a white box with a shadow on a white box -- the same reason the
 * popup drops it (asked 2026-10-03).
 */
.wp-block-accordion-panel .wpcf7 {
  padding: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
}
.diakon-slider__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  margin-top: var(--wp--preset--spacing--2-xl);
}
.diakon-slider__btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  line-height: 0;
  color: var(--wp--preset--color--black);
  transition: opacity 0.15s ease;
}
.diakon-slider__btn:disabled {
  opacity: 0.3;
  cursor: default;
}
.diakon-slider__btn:focus-visible {
  outline: 2px solid var(--wp--preset--color--primary);
  outline-offset: 2px;
  border-radius: 4px;
}
.diakon-slider__dots {
  display: flex;
  gap: 10px;
  align-items: center;
}
.diakon-slider__dot {
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  background: var(--wp--preset--color--pastel-pink);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease;
}
.diakon-slider__dot.is-active {
  background: var(--wp--preset--color--primary);
}
.diakon-slider__dot:focus-visible {
  outline: 2px solid var(--wp--preset--color--primary);
  outline-offset: 2px;
}
.diakon-carousel .swiper-pagination {
  position: relative !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: var(--wp--preset--spacing--2-xl);
}
.diakon-carousel .swiper-pagination .swiper-pagination-bullet {
  width: 24px;
  height: 24px;
  background: var(--wp--preset--color--pastel-pink);
  opacity: 1;
  margin: 0 !important;
  border-radius: 9999px;
  flex-shrink: 0;
  transition: background 0.2s ease;
}
.diakon-carousel .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: var(--wp--preset--color--primary);
}
.diakon-carousel .carousel-nav-btn {
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s ease;
}
.diakon-carousel .carousel-nav-btn.carousel-nav-prev {
  margin-right: 22px;
}
.diakon-carousel .carousel-nav-btn.carousel-nav-next {
  margin-left: 22px;
}
.diakon-carousel .carousel-nav-btn::after {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background-color: var(--wp--preset--color--primary);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M11.2727 3.68664C10.8935 3.28513 10.9115 2.65222 11.3131 2.273C11.7146 1.89378 12.3475 1.91185 12.7267 2.31337L21.227 11.3134C21.591 11.6987 21.591 12.3012 21.2271 12.6866L12.7267 21.688C12.3476 22.0896 11.7147 22.1077 11.3131 21.7285C10.9116 21.3493 10.8934 20.7164 11.2726 20.3149L19.1245 12.0001L11.2727 3.68664Z%27 fill=%27%23FCFDFF%27 /%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M11.2727 3.68664C10.8935 3.28513 10.9115 2.65222 11.3131 2.273C11.7146 1.89378 12.3475 1.91185 12.7267 2.31337L21.227 11.3134C21.591 11.6987 21.591 12.3012 21.2271 12.6866L12.7267 21.688C12.3476 22.0896 11.7147 22.1077 11.3131 21.7285C10.9116 21.3493 10.8934 20.7164 11.2726 20.3149L19.1245 12.0001L11.2727 3.68664Z%27 fill=%27%23FCFDFF%27 /%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;
}
.diakon-carousel .carousel-nav-btn.carousel-nav-prev::after {
  transform: scaleX(-1);
}
.diakon-carousel .carousel-nav-btn:disabled {
  opacity: 0.3;
  cursor: default;
}
.diakon-carousel .carousel-nav-btn:focus-visible {
  outline: 2px solid var(--wp--preset--color--primary);
  outline-offset: 2px;
  border-radius: 4px;
}
@media (max-width: 599px) {
  .diakon-slider-section .diakon-slider__track {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
  }
}
@media (max-width: 767px) {
  .diakon-slider-section.is-slider-ready .diakon-slider__track > .wp-block-column:not(.is-slide-active) {
    display: none;
  }
}
@media screen and (min-width: 1024px) {
  .sidebar-pull-up-pending .page-template-sidebar-page-template .sidebar-page-content {
    opacity: 0;
  }
}
.page-template-sidebar-page-template .sidebar-page-content {
  min-height: var(--sidebar-menu-height, 0);
  transition: opacity 0.25s ease-out;
}
@media screen and (prefers-reduced-motion: reduce) {
  .page-template-sidebar-page-template .sidebar-page-content {
    transition: none;
  }
}
@media screen and (min-width: 1024px) {
  .page-template-sidebar-page-template .sidebar-page-content > .wp-block-group > nav {
    padding-left: 23.75rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: var(--wp--style--global--wide-size);
  }
}
.page-template-sidebar-page-template .wp-block-post-content > .wp-block-group:not(.diakon-hero, [class*=diakon-hero__]):first-child {
  margin-top: 0;
}
.page-template-sidebar-page-template .entry-content > .diakon-hero-wrap {
  padding-left: 23.75rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: var(--wp--style--global--wide-size);
}
.page-template-sidebar-page-template .entry-content > .diakon__subpage-intro {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: var(--wp--style--global--wide-size);
}
@media screen and (min-width: 1024px) {
  .page-template-sidebar-page-template .entry-content > .diakon__subpage-intro {
    padding-left: 23.75rem !important;
  }
}
@media screen and (min-width: 1024px) {
  .page-template-sidebar-page-template .entry-content > .diakon__subpage-intro > *.wp-block-group {
    padding-left: 0;
  }
}
@media screen and (min-width: 1024px) {
  .page-template-sidebar-page-template .entry-content .diakon-hero__locations {
    padding-right: var(--wp--style--root--padding-right);
    padding-left: var(--wp--style--root--padding-left);
  }
}
.page-template-sidebar-page-template .entry-content > :is(.wp-block-group:not(.diakon-hero, [class*=diakon-hero__]):not(.diakon-quote):not(.diakon__subpage-intro),
.wp-block-group:not(.diakon-hero, [class*=diakon-hero__]):not(.diakon-quote) .wp-block-cover__inner-container) {
  container-type: inline-size;
}
@media screen and (min-width: 1024px) {
  .page-template-sidebar-page-template .entry-content > :is(.wp-block-group:not(.diakon-hero, [class*=diakon-hero__]):not(.diakon-quote):not(.diakon__subpage-intro),
  .wp-block-group:not(.diakon-hero, [class*=diakon-hero__]):not(.diakon-quote) .wp-block-cover__inner-container) > *:not(.diakon-hero, [class*=diakon-hero__]) {
    padding-left: 23.75rem !important;
  }
}
.page-template-sidebar-page-template .entry-content > :is(.wp-block-group:not(.diakon-hero, [class*=diakon-hero__]):not(.diakon-quote):not(.diakon__subpage-intro),
.wp-block-group:not(.diakon-hero, [class*=diakon-hero__]):not(.diakon-quote) .wp-block-cover__inner-container) > *:not(.alignwide):not(.alignfull) {
  max-width: var(--wp--style--global--wide-size);
}
.page-template-sidebar-page-template .entry-content > :is(.wp-block-group.diakon-hero:has(.wp-block-group.has-background)) {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  container-type: inline-size;
}
@media screen and (min-width: 1024px) {
  .page-template-sidebar-page-template .entry-content > :is(.wp-block-group.diakon-hero:has(.wp-block-group.has-background)) > * {
    max-width: var(--wp--style--global--content-size);
    margin-left: 23.75rem;
    flex-grow: 1;
  }
}
.page-template-sidebar-page-template .entry-content > .wp-block-group.diakon-hero:not(:has(.wp-block-group.has-background)),
.page-template-sidebar-page-template .entry-content > .wp-block-cover.diakon-hero {
  container-type: inline-size;
}
@media screen and (min-width: 1024px) {
  .page-template-sidebar-page-template .entry-content > .wp-block-group.diakon-hero:not(:has(.wp-block-group.has-background)),
  .page-template-sidebar-page-template .entry-content > .wp-block-cover.diakon-hero {
    position: relative;
    max-width: var(--wp--style--global--content-size);
    margin-left: 23.75rem;
    margin-right: 0;
    left: calc(50% - 11.875rem);
    transform: translateX(-50%);
  }
}
@media screen and (min-width: 1024px) {
  .page-template-sidebar-page-template .entry-content > .wp-block-group:not(.diakon-hero,
  [class*=diakon-hero__],
  [class*=diakon__hero]) > .wp-block-group.alignfull:not(.diakon-hero) {
    padding-left: 23.75rem !important;
    max-width: var(--wp--style--global--wide-size);
    margin-left: auto;
    margin-right: auto;
  }
}
.page-template-sidebar-page-template .sidebar-menu {
  padding: var(--wp--preset--spacing--md);
  border-radius: var(--wp--preset--border-radius--s);
  box-shadow: 0 4px 30px 0 rgba(0, 0, 0, 0.2);
  background-color: var(--wp--preset--color--white);
  z-index: 5;
  pointer-events: auto;
}
@media screen and (max-width: 1023.98px) {
  .page-template-sidebar-page-template .sidebar-menu {
    display: none;
  }
}
.page-template-sidebar-page-template .sidebar-menu-wrap {
  pointer-events: none;
}
.page-template-sidebar-page-template .sidebar-content {
  width: 100%;
}
main:has(> .wp-block-post-content > .is-style-secondary:first-child) > .wp-block-group:first-child {
  background-color: var(--wp--preset--color--secondary);
}
main:has(> .wp-block-post-content > .is-style-lightest-grey:first-child) > .wp-block-group:first-child {
  background-color: var(--wp--preset--color--lightest-grey);
}
main:has(> .wp-block-post-content > .is-style-light-grey:first-child) > .wp-block-group:first-child {
  background-color: var(--wp--preset--color--light-grey);
}
main:has(> .wp-block-post-content > .is-style-white:first-child) > .wp-block-group:first-child {
  background-color: var(--wp--preset--color--white);
}
.single-post .single-main .entry-content > .has-global-padding {
  padding-left: 0;
  padding-right: 0;
}
@media screen and (max-width: 1028px) {
  .single-post aside {
    grid-column: span 2;
  }
}
.diakon-load-more__button {
  cursor: pointer;
}
.diakon-load-more__button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.diakon-load-more__button.is-loading {
  position: relative;
  color: transparent;
}
.diakon-load-more__button.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border: 2px solid transparent;
  border-top-color: currentcolor;
  border-radius: 50%;
  animation: diakon-load-more-spin 1s linear infinite;
  color: var(--button-txt, var(--wp--preset--color--white));
}
.diakon-load-more__error {
  margin-top: var(--wp--preset--spacing--md);
  padding: var(--wp--preset--spacing--xs);
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
  border-radius: var(--wp--preset--border-radius--xs);
  font-size: 0.875rem;
}
.diakon-load-more__error[hidden] {
  display: none !important;
}
@keyframes diakon-load-more-spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
/**
 * Query Loop pagination: the page numbers and the next/previous links.
 *
 * Core gives the block a flex row and nothing else, so the numbers ran on as
 * plain text -- "1 2 3 … 59Seuraava sivu", the last number and the next link
 * touching. Here the numbers are round targets the size of a fingertip, the
 * current one filled, and the next/previous links read as links beside them.
 * The store's product grids use the same block, and so do the news lists.
 */
.wp-block-query-pagination {
  align-items: center;
  gap: var(--wp--preset--spacing--xs);
  margin-top: var(--wp--preset--spacing--2-xl);
}
.wp-block-query-pagination .wp-block-query-pagination-numbers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wp--preset--spacing--xs);
}
.wp-block-query-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  height: 2.75rem;
  padding: 0 0.5rem;
  border-radius: 90px;
  color: var(--wp--preset--color--primary);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.wp-block-query-pagination a.page-numbers:hover {
  background-color: var(--wp--preset--color--secondary);
}
.wp-block-query-pagination .page-numbers.current {
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
}
.wp-block-query-pagination .page-numbers.dots {
  min-width: auto;
  padding: 0;
  color: var(--wp--preset--color--dark-grey);
}
.wp-block-query-pagination .wp-block-query-pagination-previous,
.wp-block-query-pagination .wp-block-query-pagination-next {
  padding: 0.625rem 0.5rem;
  color: var(--wp--preset--color--primary);
  font-weight: 600;
  text-underline-offset: 0.2em;
}
.wp-block-query-pagination .wp-block-query-pagination-previous:hover,
.wp-block-query-pagination .wp-block-query-pagination-next:hover {
  color: var(--wp--preset--color--dark-magenta);
}
.wp-block-query-pagination a:focus-visible {
  outline: 0.125rem solid var(--wp--preset--color--primary);
  outline-offset: 0.125rem;
}
/**
 * Popup dialogs — the chrome only.
 *
 * What is inside the box is editor-built block content from a popup post, so
 * this styles the dialog, its backdrop and the close button, and leaves the
 * layout of the content to the blocks.
 */
.diakon-popup {
  width: min(var(--wp--custom--popup-width), 100vw - 2rem);
  max-width: none;
  max-height: calc(100vh - 4rem);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--wp--preset--border-radius--xs);
  background-color: var(--wp--preset--color--white);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.25);
  overflow: visible;
}
.diakon-popup::backdrop {
  background-color: rgba(247, 249, 255, 0.9);
}
.diakon-popup__inner {
  position: relative;
  max-height: inherit;
  border-radius: inherit;
  /* The box clips the content's own rounded corners and graphics. */
  overflow: hidden auto;
}
.diakon-popup__close {
  background: none;
  border: 0;
  border-radius: 0;
  color: inherit;
  font: inherit;
  line-height: normal;
  overflow: visible;
  padding: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  position: absolute;
  top: var(--wp--preset--spacing--xl);
  right: var(--wp--preset--spacing--xl);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--wp--preset--color--dark-grey);
  cursor: pointer;
  transition: color 0.2s ease;
}
.diakon-popup__close:hover {
  color: var(--wp--preset--color--primary);
}
.diakon-popup__close:focus-visible {
  outline: 2px solid var(--wp--preset--color--primary);
  outline-offset: 4px;
}
.diakon-popup__close svg {
  display: block;
  width: 100%;
  height: 100%;
}
.diakon-popup__close {
  /*
   * A popup's own content decides what sits behind this corner — a photo, a
   * tinted band — so the glyph carries its own light outline rather than
   * trusting the backdrop to stay pale. paint-order puts the stroke down
   * first and the fill over it, so the halo lies outside the letterform and
   * the cross keeps its weight; 3 units of the 24 viewBox leave 1.5px of it
   * on each side, and the alpha lets whatever is behind show through so it
   * separates the glyph without reading as a second shape around it.
   */
}
.diakon-popup__close path {
  paint-order: stroke;
  stroke: rgba(252, 253, 255, 0.7);
  stroke-width: 3;
  stroke-linejoin: round;
}
/*
 * The form styles itself as a card. Inside a popup the dialog already is the
 * card, so it would be a white box with a shadow on a white box.
 */
.diakon-popup__content .wpcf7 {
  padding: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
}
/* Content runs to the edges; the popup post supplies its own padding. */
.diakon-popup__content > :where(.wp-block-group, .wp-block-columns) {
  margin-block: 0;
}
/*
 * WooCommerce's own markup ids are snake_case (#order_review, #place_order),
 * and they are in its templates, not ours -- there is nothing here to rename.
 */
/* stylelint-disable selector-id-pattern */
/**
 * The store screens: My Account, cart and checkout.
 *
 * All three are classic PHP templates, not blocks: they land inside
 * .wp-block-post-content as plain <form>s of <p class="form-row"> rows and
 * <table class="shop_table">, with none of the theme's own styling reaching
 * them. Left alone they render as browser defaults in the middle of a
 * designed page.
 *
 * WooCommerce's own woocommerce-layout, woocommerce-general and
 * woocommerce-smallscreen stylesheets are all enqueued, so the structure --
 * the two checkout columns, the table that turns into stacked rows on a
 * phone -- is theirs and stays theirs. What follows is the skin over it:
 * surfaces, type, controls and buttons.
 *
 * The vocabulary is deliberately the one frontend/_forms.scss set for Contact
 * Form 7 -- same control height, border, radius, label size, drawn checkbox,
 * card around a panel -- because a visitor filling in their address should not
 * be able to tell that two different form systems drew the two forms on this
 * site.
 *
 * Scoped to the three body classes rather than to .woocommerce, which is also
 * on product and archive pages that the block templates already style.
 */
body {
  --diakon-store-accent: var(--wp--preset--color--dark-magenta);
}
body.site-saatio {
  --diakon-store-accent: var(--wp--preset--color--saatio);
}
.woocommerce-account,
.woocommerce-cart,
.woocommerce-checkout {
  --form-gap: 1.5rem;
  --form-label-gap: 0.75rem;
  --form-control-height: 2.75rem;
  --form-control-padding: 0.5rem 1rem;
  --form-border: 0.0625rem solid var(--wp--preset--color--grey);
  --form-radius: var(--wp--preset--border-radius--xs);
  --form-error: var(--wp--preset--color--error-bright);
  --form-font-size: var(--wp--preset--font-size--body);
  --form-section-gap: 2.5rem;
  --form-group-gap: 1rem;
  --form-choice-gap: 0.5rem;
  /* ------------------------------------------------------------------
  * The card
  * --------------------------------------------------------------- */
  /*
  * Every panel that reads as a sheet of its own. Logged out, the account
  * page is the login screen rather than .woocommerce-MyAccount-content --
  * two columns, login and register -- and the password reset is a third
  * form again, so all of them are named here or the first thing a customer
  * ever sees is the only uncarded one.
  */
}
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-account .cart_totals,
.woocommerce-account .woocommerce-ResetPassword,
.woocommerce-account #customer_login .col-1,
.woocommerce-account #customer_login .col-2,
.woocommerce-account #customer_details,
.woocommerce-account #order_review,
.woocommerce-cart .woocommerce-MyAccount-content,
.woocommerce-cart .cart_totals,
.woocommerce-cart .woocommerce-ResetPassword,
.woocommerce-cart #customer_login .col-1,
.woocommerce-cart #customer_login .col-2,
.woocommerce-cart #customer_details,
.woocommerce-cart #order_review,
.woocommerce-checkout .woocommerce-MyAccount-content,
.woocommerce-checkout .cart_totals,
.woocommerce-checkout .woocommerce-ResetPassword,
.woocommerce-checkout #customer_login .col-1,
.woocommerce-checkout #customer_login .col-2,
.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review {
  padding: var(--wp--preset--spacing--xl);
  border-radius: var(--wp--preset--border-radius--m);
  background-color: var(--wp--preset--color--white);
  box-shadow: 0 0.25rem 0.9375rem 0 rgba(0, 0, 0, 0.2);
}
.woocommerce-account .woocommerce-MyAccount-content > :first-child,
.woocommerce-account .cart_totals > :first-child,
.woocommerce-account .woocommerce-ResetPassword > :first-child,
.woocommerce-account #customer_login .col-1 > :first-child,
.woocommerce-account #customer_login .col-2 > :first-child,
.woocommerce-account #customer_details > :first-child,
.woocommerce-account #order_review > :first-child,
.woocommerce-cart .woocommerce-MyAccount-content > :first-child,
.woocommerce-cart .cart_totals > :first-child,
.woocommerce-cart .woocommerce-ResetPassword > :first-child,
.woocommerce-cart #customer_login .col-1 > :first-child,
.woocommerce-cart #customer_login .col-2 > :first-child,
.woocommerce-cart #customer_details > :first-child,
.woocommerce-cart #order_review > :first-child,
.woocommerce-checkout .woocommerce-MyAccount-content > :first-child,
.woocommerce-checkout .cart_totals > :first-child,
.woocommerce-checkout .woocommerce-ResetPassword > :first-child,
.woocommerce-checkout #customer_login .col-1 > :first-child,
.woocommerce-checkout #customer_login .col-2 > :first-child,
.woocommerce-checkout #customer_details > :first-child,
.woocommerce-checkout #order_review > :first-child {
  margin-top: 0;
}
.woocommerce-account .woocommerce-MyAccount-content > :last-child,
.woocommerce-account .cart_totals > :last-child,
.woocommerce-account .woocommerce-ResetPassword > :last-child,
.woocommerce-account #customer_login .col-1 > :last-child,
.woocommerce-account #customer_login .col-2 > :last-child,
.woocommerce-account #customer_details > :last-child,
.woocommerce-account #order_review > :last-child,
.woocommerce-cart .woocommerce-MyAccount-content > :last-child,
.woocommerce-cart .cart_totals > :last-child,
.woocommerce-cart .woocommerce-ResetPassword > :last-child,
.woocommerce-cart #customer_login .col-1 > :last-child,
.woocommerce-cart #customer_login .col-2 > :last-child,
.woocommerce-cart #customer_details > :last-child,
.woocommerce-cart #order_review > :last-child,
.woocommerce-checkout .woocommerce-MyAccount-content > :last-child,
.woocommerce-checkout .cart_totals > :last-child,
.woocommerce-checkout .woocommerce-ResetPassword > :last-child,
.woocommerce-checkout #customer_login .col-1 > :last-child,
.woocommerce-checkout #customer_login .col-2 > :last-child,
.woocommerce-checkout #customer_details > :last-child,
.woocommerce-checkout #order_review > :last-child {
  margin-bottom: 0;
}
.woocommerce-account,
.woocommerce-cart,
.woocommerce-checkout {
  /*
  * WooCommerce's layout is float-based and these empty divs are what
  * clears it. Hiding them, as a grid layout would want, takes the clearing
  * with them and the next row rides up beside the floated pair above it.
  * So: no box, but still clearing.
  */
}
.woocommerce-account .clear,
.woocommerce-cart .clear,
.woocommerce-checkout .clear {
  clear: both;
  height: 0;
  margin: 0;
}
.woocommerce-account,
.woocommerce-cart,
.woocommerce-checkout {
  /* ------------------------------------------------------------------
  * Headings and fieldsets
  * --------------------------------------------------------------- */
}
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3,
.woocommerce-account .cart_totals h2,
.woocommerce-account #customer_login h2,
.woocommerce-account .diakon-order-review-heading,
.woocommerce-account .woocommerce-billing-fields h3,
.woocommerce-account .woocommerce-additional-fields h3,
.woocommerce-account legend,
.woocommerce-cart .woocommerce-MyAccount-content h2,
.woocommerce-cart .woocommerce-MyAccount-content h3,
.woocommerce-cart .cart_totals h2,
.woocommerce-cart #customer_login h2,
.woocommerce-cart .diakon-order-review-heading,
.woocommerce-cart .woocommerce-billing-fields h3,
.woocommerce-cart .woocommerce-additional-fields h3,
.woocommerce-cart legend,
.woocommerce-checkout .woocommerce-MyAccount-content h2,
.woocommerce-checkout .woocommerce-MyAccount-content h3,
.woocommerce-checkout .cart_totals h2,
.woocommerce-checkout #customer_login h2,
.woocommerce-checkout .diakon-order-review-heading,
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-additional-fields h3,
.woocommerce-checkout legend {
  margin: 0 0 var(--form-group-gap);
  padding: 0;
  color: var(--wp--preset--color--black);
  font-size: var(--wp--preset--font-size--h-4);
  font-weight: 700;
  line-height: 1.25;
}
.woocommerce-account fieldset,
.woocommerce-cart fieldset,
.woocommerce-checkout fieldset {
  margin: var(--form-section-gap) 0 0;
  padding: 0;
  border: 0;
}
.woocommerce-account,
.woocommerce-cart,
.woocommerce-checkout {
  /* A heading introduces the rows under it, so it binds to them and opens
  the section gap above itself instead. */
}
.woocommerce-account .woocommerce-MyAccount-content h3,
.woocommerce-account .woocommerce-billing-fields h3,
.woocommerce-account .woocommerce-additional-fields h3,
.woocommerce-cart .woocommerce-MyAccount-content h3,
.woocommerce-cart .woocommerce-billing-fields h3,
.woocommerce-cart .woocommerce-additional-fields h3,
.woocommerce-checkout .woocommerce-MyAccount-content h3,
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-additional-fields h3 {
  margin-top: var(--form-section-gap);
}
.woocommerce-account .woocommerce-MyAccount-content h3:first-child,
.woocommerce-account .woocommerce-billing-fields h3:first-child,
.woocommerce-account .woocommerce-additional-fields h3:first-child,
.woocommerce-cart .woocommerce-MyAccount-content h3:first-child,
.woocommerce-cart .woocommerce-billing-fields h3:first-child,
.woocommerce-cart .woocommerce-additional-fields h3:first-child,
.woocommerce-checkout .woocommerce-MyAccount-content h3:first-child,
.woocommerce-checkout .woocommerce-billing-fields h3:first-child,
.woocommerce-checkout .woocommerce-additional-fields h3:first-child {
  margin-top: 0;
}
.woocommerce-account,
.woocommerce-cart,
.woocommerce-checkout {
  /* ------------------------------------------------------------------
  * Rows
  * --------------------------------------------------------------- */
  /*
  * Matched as woocommerce.css matches it, so the margin here wins:
  *
  *   .woocommerce form .form-row { margin: 0 0 6px; padding: 3px }
  *                                                          (0,2,1)
  *
  * and without its clearfix. woocommerce-layout.css gives every row an
  * empty ::before and ::after (display: table); in a flex column those are
  * two more items, each adding a label gap, so every row stood 24px
  * further from the next than set here (found 2026-10-03).
  */
}
.woocommerce-account form .form-row,
.woocommerce-cart form .form-row,
.woocommerce-checkout form .form-row {
  display: flex;
  flex-direction: column;
  gap: var(--form-label-gap);
  margin: 0 0 var(--form-gap);
  padding: 0;
}
.woocommerce-account form .form-row::before, .woocommerce-account form .form-row::after,
.woocommerce-cart form .form-row::before,
.woocommerce-cart form .form-row::after,
.woocommerce-checkout form .form-row::before,
.woocommerce-checkout form .form-row::after {
  content: none;
}
.woocommerce-account,
.woocommerce-cart,
.woocommerce-checkout {
  /*
  * The two-up pair. woocommerce-layout.css floats these at 47% with a 6%
  * gutter; the halves here are exact and the gutter is the theme's own
  * spacing. Floated rather than converted to grid or inline-flex, because
  * the float is set on the child and only the child can undo it -- and an
  * inline-flex child of a float context still floats, which is what made
  * the pair overflow its column.
  */
}
@media screen and (min-width: 600px) {
  .woocommerce-account .form-row-first,
  .woocommerce-account .form-row-last,
  .woocommerce-cart .form-row-first,
  .woocommerce-cart .form-row-last,
  .woocommerce-checkout .form-row-first,
  .woocommerce-checkout .form-row-last {
    width: calc(50% - var(--wp--preset--spacing--md) / 2);
    overflow: visible;
  }
}
@media screen and (max-width: 599.98px) {
  .woocommerce-account .form-row-first,
  .woocommerce-account .form-row-last,
  .woocommerce-cart .form-row-first,
  .woocommerce-cart .form-row-last,
  .woocommerce-checkout .form-row-first,
  .woocommerce-checkout .form-row-last {
    float: none;
    width: 100%;
  }
}
@media screen and (min-width: 600px) {
  .woocommerce-account .form-row-first,
  .woocommerce-cart .form-row-first,
  .woocommerce-checkout .form-row-first {
    float: left;
    clear: left;
  }
}
@media screen and (min-width: 600px) {
  .woocommerce-account .form-row-last,
  .woocommerce-cart .form-row-last,
  .woocommerce-checkout .form-row-last {
    float: right;
  }
}
.woocommerce-account,
.woocommerce-cart,
.woocommerce-checkout {
  /* The submit row stands away from the fields above it. */
}
.woocommerce-account .woocommerce-EditAccountForm > p:last-child,
.woocommerce-cart .woocommerce-EditAccountForm > p:last-child,
.woocommerce-checkout .woocommerce-EditAccountForm > p:last-child {
  margin-top: var(--form-section-gap);
  margin-bottom: 0;
}
.woocommerce-account,
.woocommerce-cart,
.woocommerce-checkout {
  /* The customer number is a stated fact, not a field. */
}
.woocommerce-account .diakonsaatio-store-account-fields p:has(> strong:first-child),
.woocommerce-cart .diakonsaatio-store-account-fields p:has(> strong:first-child),
.woocommerce-checkout .diakonsaatio-store-account-fields p:has(> strong:first-child) {
  color: var(--wp--preset--color--dark-grey);
  font-size: var(--wp--preset--font-size--body-small);
}
.woocommerce-account,
.woocommerce-cart,
.woocommerce-checkout {
  /* Hidden rows must not take their margin with them. */
}
.woocommerce-account .form-row[style*="display: none"],
.woocommerce-account .form-row[style*="display:none"],
.woocommerce-cart .form-row[style*="display: none"],
.woocommerce-cart .form-row[style*="display:none"],
.woocommerce-checkout .form-row[style*="display: none"],
.woocommerce-checkout .form-row[style*="display:none"] {
  display: none !important;
}
.woocommerce-account,
.woocommerce-cart,
.woocommerce-checkout {
  /* ------------------------------------------------------------------
  * Labels
  * --------------------------------------------------------------- */
}
.woocommerce-account label,
.woocommerce-cart label,
.woocommerce-checkout label {
  display: block;
  color: var(--diakon-store-accent);
  font-size: var(--form-font-size);
  font-weight: 500;
  line-height: 1.25;
}
.woocommerce-account,
.woocommerce-cart,
.woocommerce-checkout {
  /*
  * Two rules out-specify the one above and both add to the gap under a
  * label, which is why shrinking --form-label-gap alone did nothing:
  *
  *   woocommerce.css
  *     .woocommerce form .form-row label{line-height:2}
  *   woocommerce-blocktheme.css
  *     .woocommerce-page form .form-row label{margin-bottom:.7em}
  *
  * At 18px that is a 36px line box -- about 9px of leading below the text
  * -- plus 12.6px of margin. The gap between a label and its field is
  * --form-label-gap and nothing else.
  *
  * `form` is in the selector deliberately: both of those carry it, which
  * makes them (0,2,2), and a rule without it is (0,2,1) and loses however
  * late it is loaded.
  */
}
.woocommerce-account form .form-row label,
.woocommerce-cart form .form-row label,
.woocommerce-checkout form .form-row label {
  margin-bottom: 0;
  line-height: 1.25;
}
.woocommerce-account .required,
.woocommerce-cart .required,
.woocommerce-checkout .required {
  color: var(--form-error);
  text-decoration: none;
}
.woocommerce-account .optional,
.woocommerce-cart .optional,
.woocommerce-checkout .optional {
  color: var(--wp--preset--color--medium-grey);
  font-weight: 400;
}
.woocommerce-account,
.woocommerce-cart,
.woocommerce-checkout {
  /* ------------------------------------------------------------------
  * Controls
  * --------------------------------------------------------------- */
}
.woocommerce-account .woocommerce-input-wrapper,
.woocommerce-account .password-input,
.woocommerce-cart .woocommerce-input-wrapper,
.woocommerce-cart .password-input,
.woocommerce-checkout .woocommerce-input-wrapper,
.woocommerce-checkout .password-input {
  display: block;
  position: relative;
  width: 100%;
}
.woocommerce-account input[type=text],
.woocommerce-account input[type=email],
.woocommerce-account input[type=tel],
.woocommerce-account input[type=url],
.woocommerce-account input[type=number],
.woocommerce-account input[type=password],
.woocommerce-account select,
.woocommerce-account textarea,
.woocommerce-cart input[type=text],
.woocommerce-cart input[type=email],
.woocommerce-cart input[type=tel],
.woocommerce-cart input[type=url],
.woocommerce-cart input[type=number],
.woocommerce-cart input[type=password],
.woocommerce-cart select,
.woocommerce-cart textarea,
.woocommerce-checkout input[type=text],
.woocommerce-checkout input[type=email],
.woocommerce-checkout input[type=tel],
.woocommerce-checkout input[type=url],
.woocommerce-checkout input[type=number],
.woocommerce-checkout input[type=password],
.woocommerce-checkout select,
.woocommerce-checkout textarea {
  width: 100%;
  min-height: var(--form-control-height);
  padding: var(--form-control-padding);
  border: var(--form-border);
  border-radius: var(--form-radius);
  background-color: var(--wp--preset--color--white);
  color: var(--wp--preset--color--black);
  font-family: inherit;
  font-size: var(--form-font-size);
  font-weight: 400;
  line-height: 1.35;
}
.woocommerce-account,
.woocommerce-cart,
.woocommerce-checkout {
  /*
  * woocommerce-blocktheme.css sizes and pads the fields itself, at (0,3,2):
  *
  *   .woocommerce-page form .form-row input.input-text,
  *   .woocommerce-page form .form-row select,
  *   .woocommerce-page form .form-row textarea.input-text
  *     { font-size: var(--wp--preset--font-size--small);
  *       padding: .9rem 1.1rem }
  *
  * which out-specifies the rule above, so the fields never took its size.
  * This theme has no `small` preset either, so that font-size is invalid at
  * computed-value time and the field falls back to inheriting one.
  *
  * Matched at the same specificity -- the class on the field, not just its
  * type -- and loaded last, so the tokens win.
  *
  * woocommerce.css does the same to the rest of the control, at (0,3,1):
  *
  *   .woocommerce form .form-row .input-text
  *     { border: 1px solid rgba(32,7,7,.8); background-color: #fff;
  *       color: #000; line-height: normal }
  *
  * so every field inside a <form> -- billing, the notes, the coupon -- was
  * WooCommerce's dark-framed white box, and only one outside a form, the gift
  * card code (YITH puts it in a div), had the theme's. Found side by side on
  * the checkout, 2026-10-06. The whole control is restated here.
  */
}
.woocommerce-account form .form-row input.input-text,
.woocommerce-account form .form-row textarea.input-text,
.woocommerce-cart form .form-row input.input-text,
.woocommerce-cart form .form-row textarea.input-text,
.woocommerce-checkout form .form-row input.input-text,
.woocommerce-checkout form .form-row textarea.input-text {
  padding: var(--form-control-padding);
  border: var(--form-border);
  background-color: var(--wp--preset--color--white);
  color: var(--wp--preset--color--black);
  font-size: var(--form-font-size);
  line-height: 1.35;
}
.woocommerce-account,
.woocommerce-cart,
.woocommerce-checkout {
  /* The password fields make room for the reveal button. */
}
.woocommerce-account .password-input input,
.woocommerce-cart .password-input input,
.woocommerce-checkout .password-input input {
  padding-right: 3rem;
}
.woocommerce-account,
.woocommerce-cart,
.woocommerce-checkout {
  /*
  * WooCommerce draws the eye itself, on ::before, and toggles it through
  * .display-password -- so this only places it. Drawing another one here
  * stacked two icons in the same corner.
  */
}
.woocommerce-account .show-password-input,
.woocommerce-cart .show-password-input,
.woocommerce-checkout .show-password-input {
  right: 0.75rem;
  width: 1.375rem;
  height: 1.375rem;
}
.woocommerce-account .show-password-input::before,
.woocommerce-cart .show-password-input::before,
.woocommerce-checkout .show-password-input::before {
  opacity: 0.55;
}
.woocommerce-account .show-password-input.display-password::before,
.woocommerce-cart .show-password-input.display-password::before,
.woocommerce-checkout .show-password-input.display-password::before {
  opacity: 1;
}
.woocommerce-account .show-password-input:focus-visible,
.woocommerce-cart .show-password-input:focus-visible,
.woocommerce-checkout .show-password-input:focus-visible {
  outline: 0.125rem solid var(--wp--preset--color--primary);
  outline-offset: 0.125rem;
}
.woocommerce-account,
.woocommerce-cart,
.woocommerce-checkout {
  /* ------------------------------------------------------------------
  * Checkboxes -- drawn, not the UA default, to match the CF7 forms
  * --------------------------------------------------------------- */
}
.woocommerce-account label.checkbox,
.woocommerce-account .woocommerce-form__label-for-checkbox,
.woocommerce-cart label.checkbox,
.woocommerce-cart .woocommerce-form__label-for-checkbox,
.woocommerce-checkout label.checkbox,
.woocommerce-checkout .woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--form-choice-gap);
  color: var(--wp--preset--color--dark-grey);
  font-size: var(--form-font-size);
  font-weight: 400;
  line-height: 1.35;
  cursor: pointer;
}
.woocommerce-account input[type=checkbox],
.woocommerce-cart input[type=checkbox],
.woocommerce-checkout input[type=checkbox] {
  display: inline-block;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  border: var(--form-border);
  border-radius: var(--form-radius);
  background-color: var(--wp--preset--color--white);
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}
.woocommerce-account input[type=checkbox]:checked,
.woocommerce-cart input[type=checkbox]:checked,
.woocommerce-checkout input[type=checkbox]:checked {
  border-color: var(--wp--preset--color--primary);
  background-color: var(--wp--preset--color--primary);
  background-image: url("data:image/svg+xml,%3Csvg width=%2712%27 height=%2710%27 viewBox=%270 0 12 10%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M1 5.2L4.4 8.6L11 2%27 stroke=%27%23FCFDFF%27 stroke-width=%271.75%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
}
.woocommerce-account input[type=checkbox]:focus-visible,
.woocommerce-cart input[type=checkbox]:focus-visible,
.woocommerce-checkout input[type=checkbox]:focus-visible {
  outline: 0.125rem solid var(--wp--preset--color--primary);
  outline-offset: 0.125rem;
}
.woocommerce-account,
.woocommerce-cart,
.woocommerce-checkout {
  /*
  * woocommerce.css has `.woocommerce form .form-row .input-checkbox
  * {display:inline}`, which out-specifies the rule above -- and an
  * appearance:none box that is display:inline ignores width and height,
  * which is why the marketing consents rendered as a bare line. Same
  * property, higher specificity, nothing else restated.
  */
}
.woocommerce-account .form-row input[type=checkbox],
.woocommerce-cart .form-row input[type=checkbox],
.woocommerce-checkout .form-row input[type=checkbox] {
  display: inline-block;
}
.woocommerce-account,
.woocommerce-cart,
.woocommerce-checkout {
  /* ------------------------------------------------------------------
  * Select, and the select2 widget WooCommerce swaps in for the country
  * --------------------------------------------------------------- */
}
.woocommerce-account select,
.woocommerce-account form .form-row select,
.woocommerce-cart select,
.woocommerce-cart form .form-row select,
.woocommerce-checkout select,
.woocommerce-checkout form .form-row select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding: var(--form-control-padding);
  padding-right: 2.5rem;
  font-size: var(--form-font-size);
  background-color: var(--wp--preset--color--secondary);
  background-image: url("data:image/svg+xml,%3Csvg width=%2711.5%27 height=%276.5%27 viewBox=%270 0 11.5 6.5%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cg transform=%27translate%280 6.5%29 rotate%28-90%29%27%3E%3Cpath d=%27M5.75 0.75L0.75 5.75L5.75 10.75%27 stroke=%27%238C1B64%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 0.71875rem 0.40625rem;
  cursor: pointer;
}
.woocommerce-account .select2-container .select2-selection--single,
.woocommerce-cart .select2-container .select2-selection--single,
.woocommerce-checkout .select2-container .select2-selection--single {
  height: var(--form-control-height);
  border: var(--form-border);
  border-radius: var(--form-radius);
  background-color: var(--wp--preset--color--secondary);
}
.woocommerce-account .select2-container .select2-selection--single .select2-selection__rendered,
.woocommerce-cart .select2-container .select2-selection--single .select2-selection__rendered,
.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__rendered {
  padding: var(--form-control-padding);
  padding-right: 2.5rem;
  color: var(--wp--preset--color--black);
  font-size: var(--form-font-size);
  line-height: 1.35;
}
.woocommerce-account .select2-container .select2-selection--single,
.woocommerce-cart .select2-container .select2-selection--single,
.woocommerce-checkout .select2-container .select2-selection--single {
  /* The widget's own arrow is a bordered triangle; the chevron above is
  painted on the box instead, so this one goes. */
}
.woocommerce-account .select2-container .select2-selection--single .select2-selection__arrow,
.woocommerce-cart .select2-container .select2-selection--single .select2-selection__arrow,
.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__arrow {
  display: none;
}
.woocommerce-account .select2-container--default .select2-selection--single,
.woocommerce-cart .select2-container--default .select2-selection--single,
.woocommerce-checkout .select2-container--default .select2-selection--single {
  background-image: url("data:image/svg+xml,%3Csvg width=%2711.5%27 height=%276.5%27 viewBox=%270 0 11.5 6.5%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cg transform=%27translate%280 6.5%29 rotate%28-90%29%27%3E%3Cpath d=%27M5.75 0.75L0.75 5.75L5.75 10.75%27 stroke=%27%238C1B64%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 0.71875rem 0.40625rem;
}
.woocommerce-account .select2-container--open .select2-selection--single,
.woocommerce-cart .select2-container--open .select2-selection--single,
.woocommerce-checkout .select2-container--open .select2-selection--single {
  border-color: var(--wp--preset--color--primary);
}
.woocommerce-account,
.woocommerce-cart,
.woocommerce-checkout {
  /* --------------------------------------------------------------
  * Notices
  * ----------------------------------------------------------- */
}
.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-cart .woocommerce-error,
.woocommerce-cart .woocommerce-message,
.woocommerce-cart .woocommerce-info,
.woocommerce-checkout .woocommerce-error,
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-info {
  margin: 0 0 var(--form-gap);
  padding: 0.625rem 1rem 0.625rem 2.75rem;
  border: 0.125rem solid var(--wp--preset--color--grey);
  border-radius: var(--form-radius);
  background-color: var(--wp--preset--color--white);
  color: var(--wp--preset--color--black);
  font-size: var(--wp--preset--font-size--tiny);
  line-height: 1.25;
  list-style: none;
}
.woocommerce-account .woocommerce-error li,
.woocommerce-account .woocommerce-message li,
.woocommerce-account .woocommerce-info li,
.woocommerce-cart .woocommerce-error li,
.woocommerce-cart .woocommerce-message li,
.woocommerce-cart .woocommerce-info li,
.woocommerce-checkout .woocommerce-error li,
.woocommerce-checkout .woocommerce-message li,
.woocommerce-checkout .woocommerce-info li {
  list-style: none;
}
.woocommerce-account .woocommerce-error::before,
.woocommerce-account .woocommerce-message::before,
.woocommerce-account .woocommerce-info::before,
.woocommerce-cart .woocommerce-error::before,
.woocommerce-cart .woocommerce-message::before,
.woocommerce-cart .woocommerce-info::before,
.woocommerce-checkout .woocommerce-error::before,
.woocommerce-checkout .woocommerce-message::before,
.woocommerce-checkout .woocommerce-info::before {
  top: 50%;
  left: 1rem;
  transform: translateY(-50%);
}
.woocommerce-account .woocommerce-error,
.woocommerce-cart .woocommerce-error,
.woocommerce-checkout .woocommerce-error {
  border-color: var(--form-error);
  color: var(--wp--preset--color--error-dark);
}
.woocommerce-account .woocommerce-message,
.woocommerce-cart .woocommerce-message,
.woocommerce-checkout .woocommerce-message {
  border-color: var(--wp--preset--color--primary);
}
.woocommerce-account,
.woocommerce-cart,
.woocommerce-checkout {
  /* Empty on most requests -- it must not add a gap when it has nothing. */
}
.woocommerce-account .woocommerce-notices-wrapper:empty,
.woocommerce-cart .woocommerce-notices-wrapper:empty,
.woocommerce-checkout .woocommerce-notices-wrapper:empty {
  display: none;
}
.woocommerce-account,
.woocommerce-cart,
.woocommerce-checkout {
  /*
  * At the weight WooCommerce marks an invalid field with
  * (`.woocommerce form .form-row.woocommerce-invalid input.input-text
  * {border-color:var(--wc-red)}`), so the error reads in this palette's
  * red rather than WooCommerce's.
  */
}
.woocommerce-account form .form-row.woocommerce-invalid input.input-text,
.woocommerce-account form .form-row.woocommerce-invalid select,
.woocommerce-cart form .form-row.woocommerce-invalid input.input-text,
.woocommerce-cart form .form-row.woocommerce-invalid select,
.woocommerce-checkout form .form-row.woocommerce-invalid input.input-text,
.woocommerce-checkout form .form-row.woocommerce-invalid select {
  border-color: var(--form-error);
}
.woocommerce-account,
.woocommerce-cart,
.woocommerce-checkout {
  /* ------------------------------------------------------------------
  * The orders table
  * --------------------------------------------------------------- */
  /* ------------------------------------------------------------------
  * Control states -- after every base rule above, so nothing that only
  * sets a colour has to out-specify a state to be seen.
  * --------------------------------------------------------------- */
}
.woocommerce-account :is(input, select, textarea)::-moz-placeholder, .woocommerce-cart :is(input, select, textarea)::-moz-placeholder, .woocommerce-checkout :is(input, select, textarea)::-moz-placeholder {
  color: var(--wp--preset--color--medium-grey);
  opacity: 1;
}
.woocommerce-account :is(input, select, textarea)::placeholder,
.woocommerce-cart :is(input, select, textarea)::placeholder,
.woocommerce-checkout :is(input, select, textarea)::placeholder {
  color: var(--wp--preset--color--medium-grey);
  opacity: 1;
}
.woocommerce-account :is(input, select, textarea):focus-visible,
.woocommerce-cart :is(input, select, textarea):focus-visible,
.woocommerce-checkout :is(input, select, textarea):focus-visible {
  border-color: var(--wp--preset--color--primary);
  outline: 0.125rem solid var(--wp--preset--color--primary);
  outline-offset: 0.0625rem;
}
.woocommerce-account :is(input, select, textarea):disabled,
.woocommerce-cart :is(input, select, textarea):disabled,
.woocommerce-checkout :is(input, select, textarea):disabled {
  background-color: var(--wp--preset--color--light-grey);
  color: var(--wp--preset--color--medium-grey);
  cursor: not-allowed;
}
.woocommerce-account .woocommerce-orders-table,
.woocommerce-account .shop_table,
.woocommerce-cart .woocommerce-orders-table,
.woocommerce-cart .shop_table,
.woocommerce-checkout .woocommerce-orders-table,
.woocommerce-checkout .shop_table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--wp--preset--font-size--body-small);
}
.woocommerce-account .woocommerce-orders-table th,
.woocommerce-account .woocommerce-orders-table td,
.woocommerce-account .shop_table th,
.woocommerce-account .shop_table td,
.woocommerce-cart .woocommerce-orders-table th,
.woocommerce-cart .woocommerce-orders-table td,
.woocommerce-cart .shop_table th,
.woocommerce-cart .shop_table td,
.woocommerce-checkout .woocommerce-orders-table th,
.woocommerce-checkout .woocommerce-orders-table td,
.woocommerce-checkout .shop_table th,
.woocommerce-checkout .shop_table td {
  padding: 0.75rem 0.5rem;
  border-bottom: 0.0625rem solid var(--wp--preset--color--grey);
  text-align: left;
  vertical-align: middle;
}
.woocommerce-account .woocommerce-orders-table th,
.woocommerce-account .shop_table th,
.woocommerce-cart .woocommerce-orders-table th,
.woocommerce-cart .shop_table th,
.woocommerce-checkout .woocommerce-orders-table th,
.woocommerce-checkout .shop_table th {
  color: var(--diakon-store-accent);
  font-size: var(--wp--preset--font-size--tiny);
  font-weight: 600;
}
.woocommerce-account .woocommerce-orders-table tbody th,
.woocommerce-account .woocommerce-orders-table tfoot th,
.woocommerce-account .shop_table tbody th,
.woocommerce-account .shop_table tfoot th,
.woocommerce-cart .woocommerce-orders-table tbody th,
.woocommerce-cart .woocommerce-orders-table tfoot th,
.woocommerce-cart .shop_table tbody th,
.woocommerce-cart .shop_table tfoot th,
.woocommerce-checkout .woocommerce-orders-table tbody th,
.woocommerce-checkout .woocommerce-orders-table tfoot th,
.woocommerce-checkout .shop_table tbody th,
.woocommerce-checkout .shop_table tfoot th {
  color: var(--wp--preset--color--black);
  font-size: inherit;
}
/*
 * The dropdown itself is appended to <body>, outside the form, so it is
 * matched from the body class rather than from inside the card.
 */
.woocommerce-account .select2-dropdown,
.woocommerce-cart .select2-dropdown,
.woocommerce-checkout .select2-dropdown {
  border: var(--form-border);
  border-radius: var(--form-radius);
  background-color: var(--wp--preset--color--white);
}
.woocommerce-account .select2-dropdown .select2-search__field,
.woocommerce-cart .select2-dropdown .select2-search__field,
.woocommerce-checkout .select2-dropdown .select2-search__field {
  min-height: 2.25rem;
  padding: 0.375rem 0.75rem;
  border: var(--form-border);
  border-radius: var(--form-radius);
  font-size: var(--form-font-size);
}
.woocommerce-account .select2-dropdown .select2-results__option,
.woocommerce-cart .select2-dropdown .select2-results__option,
.woocommerce-checkout .select2-dropdown .select2-results__option {
  padding: 0.375rem 1rem;
  font-size: var(--form-font-size);
  line-height: 1.35;
}
.woocommerce-account .select2-dropdown .select2-results__option--highlighted[aria-selected],
.woocommerce-cart .select2-dropdown .select2-results__option--highlighted[aria-selected],
.woocommerce-checkout .select2-dropdown .select2-results__option--highlighted[aria-selected] {
  background-color: var(--wp--preset--color--secondary);
  color: var(--wp--preset--color--primary);
}
/* ----------------------------------------------------------------------
 * Buttons -- the pill from components/_buttons.scss. theme.json defines no
 * elements.button, so .wp-element-button arrives unstyled, and WooCommerce's
 * own .button is a grey block.
 *
 * A product page is a block template, but its add-to-cart form and the
 * related products under it are still WooCommerce's classic markup, with the
 * same .button -- so it is a store screen here too.
 * ------------------------------------------------------------------- */
.woocommerce-account .button,
.woocommerce-cart .button,
.woocommerce-checkout .button,
.single-product .button {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--md);
  padding: 0.875rem 1.5rem;
  border: 2px solid transparent;
  border-radius: 90px;
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
@media screen and (min-width: 782px) {
  .woocommerce-account .button,
  .woocommerce-cart .button,
  .woocommerce-checkout .button,
  .single-product .button {
    padding: 0.875rem 1.5rem;
    font-size: 1.125rem;
    font-weight: 600;
  }
}
.woocommerce-account .button:hover,
.woocommerce-cart .button:hover,
.woocommerce-checkout .button:hover,
.single-product .button:hover {
  background-color: var(--diakon-store-accent);
  border-color: var(--diakon-store-accent);
  color: var(--wp--preset--color--white);
}
.woocommerce-account .button:focus-visible,
.woocommerce-cart .button:focus-visible,
.woocommerce-checkout .button:focus-visible,
.single-product .button:focus-visible {
  outline: 0.125rem solid var(--wp--preset--color--primary);
  outline-offset: 0.125rem;
}
/* ----------------------------------------------------------------------
 * The cart at the end of the breadcrumb row -- the foundation store keeps
 * it there rather than in the site header (diakonsaatio-store templates,
 * .diakon-breadcrumb-cart; the icon and badge are the header's
 * .diakon-header__cart). It shows only once something is in the cart:
 * WooCommerce hides the count badge while the cart is empty, and updates it
 * as items come and go, so the badge's hidden attribute is the signal.
 * ------------------------------------------------------------------- */
.diakon-breadcrumb-row {
  gap: var(--wp--preset--spacing--md);
}
.diakon-breadcrumb-cart {
  flex-shrink: 0;
}
.diakon-breadcrumb-cart:has(.wc-block-mini-cart__badge[hidden]) {
  display: none;
}
.diakon-breadcrumb-cart .wc-block-mini-cart__button {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--xs);
  width: auto;
  height: auto;
}
.diakon-breadcrumb-cart .wc-block-mini-cart__button::before {
  display: none;
}
.diakon-breadcrumb-cart .wc-block-mini-cart__quantity-badge {
  position: relative;
  display: block;
  width: 1.625rem;
  height: 1.625rem;
}
.diakon-breadcrumb-cart .wc-block-mini-cart__quantity-badge::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--wp--preset--color--black);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox=%270 0 17.4988 17.5%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E %3Cpath id=%27Shape%27 d=%27M0 0.75C0 0.335786 0.335786 0 0.75 0H1.30826C2.25873 0 2.82782 0.638993 3.15325 1.23299C3.37016 1.62894 3.52708 2.08818 3.64982 2.50395C3.68306 2.50134 3.71674 2.5 3.7508 2.5H16.2481C17.0783 2.5 17.6778 3.29442 17.4502 4.0928L15.6224 10.5019C15.2856 11.6832 14.2062 12.4978 12.9779 12.4978H7.02977C5.79128 12.4978 4.7056 11.6699 4.37783 10.4756L3.61734 7.70455L2.35874 3.45578L2.3567 3.44834C2.201 2.88051 2.05487 2.35005 1.83773 1.9537C1.62686 1.5688 1.45877 1.5 1.30826 1.5H0.75C0.335786 1.5 0 1.16421 0 0.75ZM6.5 17.5C7.60457 17.5 8.5 16.6046 8.5 15.5C8.5 14.3954 7.60457 13.5 6.5 13.5C5.39543 13.5 4.5 14.3954 4.5 15.5C4.5 16.6046 5.39543 17.5 6.5 17.5ZM13.5 17.5C14.6046 17.5 15.5 16.6046 15.5 15.5C15.5 14.3954 14.6046 13.5 13.5 13.5C12.3954 13.5 11.5 14.3954 11.5 15.5C11.5 16.6046 12.3954 17.5 13.5 17.5Z%27 fill=%27black%27/%3E %3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg viewBox=%270 0 17.4988 17.5%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E %3Cpath id=%27Shape%27 d=%27M0 0.75C0 0.335786 0.335786 0 0.75 0H1.30826C2.25873 0 2.82782 0.638993 3.15325 1.23299C3.37016 1.62894 3.52708 2.08818 3.64982 2.50395C3.68306 2.50134 3.71674 2.5 3.7508 2.5H16.2481C17.0783 2.5 17.6778 3.29442 17.4502 4.0928L15.6224 10.5019C15.2856 11.6832 14.2062 12.4978 12.9779 12.4978H7.02977C5.79128 12.4978 4.7056 11.6699 4.37783 10.4756L3.61734 7.70455L2.35874 3.45578L2.3567 3.44834C2.201 2.88051 2.05487 2.35005 1.83773 1.9537C1.62686 1.5688 1.45877 1.5 1.30826 1.5H0.75C0.335786 1.5 0 1.16421 0 0.75ZM6.5 17.5C7.60457 17.5 8.5 16.6046 8.5 15.5C8.5 14.3954 7.60457 13.5 6.5 13.5C5.39543 13.5 4.5 14.3954 4.5 15.5C4.5 16.6046 5.39543 17.5 6.5 17.5ZM13.5 17.5C14.6046 17.5 15.5 16.6046 15.5 15.5C15.5 14.3954 14.6046 13.5 13.5 13.5C12.3954 13.5 11.5 14.3954 11.5 15.5C11.5 16.6046 12.3954 17.5 13.5 17.5Z%27 fill=%27black%27/%3E %3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;
}
.diakon-breadcrumb-cart .wc-block-mini-cart__badge {
  z-index: 1;
}
.diakon-breadcrumb-cart .wc-block-mini-cart__amount {
  display: inline;
  color: var(--wp--preset--color--black);
  font-size: var(--wp--preset--font-size--body-small);
  font-weight: 700;
}
/* ----------------------------------------------------------------------
 * Notices from a product list. Product Collection puts its notices region --
 * where a refused add-to-cart says why, "Ostoskorissa on jo paikka toiselle
 * kurssille" -- at the top of the grid, which is a screen or more above the
 * button pressed further down. Held at the top of the window while the grid
 * scrolls past, it is in view wherever the button was. Empty, it takes no
 * room.
 * ------------------------------------------------------------------- */
.wp-block-woocommerce-product-collection > .wc-block-components-notices {
  position: sticky;
  top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--wp--preset--spacing--md));
  z-index: 20;
}
.wp-block-woocommerce-product-collection > .wc-block-components-notices:empty {
  display: none;
}
/* ----------------------------------------------------------------------
 * The quantity on a product's page: WooCommerce's stepper, − and + either
 * side of the number (the templates set the add-to-cart form's
 * quantitySelectorStyle to "stepper"). As WooCommerce draws it, the number is
 * 13px -- its size is a font preset this theme does not have -- between two
 * small glyphs, with a lot of room above and below: hard to read and to hit.
 *
 * Here it is a pill outlined like the secondary button, the height of the add
 * to cart button beside it: the number at body size, and − and + as wide,
 * tall targets in the primary colour. WooCommerce's own rules run to seven
 * classes and an element, (0,7,1); these start from the same chain plus the
 * form, (0,5,2) and up, and the input's own rule is (0,9,2).
 * ------------------------------------------------------------------- */
.wc-block-add-to-cart-form.wc-block-add-to-cart-form--stepper form.cart .wc-block-components-quantity-selector.quantity {
  display: inline-flex;
  align-items: stretch;
  align-self: stretch;
  width: auto;
  min-height: 3rem;
  margin: 0 var(--wp--preset--spacing--xs) 0 0;
  border: 2px solid var(--wp--preset--color--primary);
  border-radius: 90px;
  background-color: var(--wp--preset--color--white);
  overflow: hidden;
}
.wc-block-add-to-cart-form.wc-block-add-to-cart-form--stepper form.cart .wc-block-components-quantity-selector.quantity::after {
  display: none;
}
.wc-block-add-to-cart-form.wc-block-add-to-cart-form--stepper form.cart .wc-block-components-quantity-selector.quantity:focus-within {
  outline: 0.125rem solid var(--wp--preset--color--primary);
  outline-offset: 0.125rem;
}
.wc-block-add-to-cart-form.wc-block-add-to-cart-form--stepper form.cart .wc-block-components-quantity-selector.quantity input[type=number].input-text.qty.text.wc-block-components-quantity-selector__input {
  width: 2.5em;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--wp--preset--color--black);
  font-size: var(--wp--preset--font-size--body);
  font-weight: 600;
  line-height: 1;
  text-align: center;
}
.wc-block-add-to-cart-form.wc-block-add-to-cart-form--stepper form.cart .wc-block-components-quantity-selector.quantity input[type=number].input-text.qty.text.wc-block-components-quantity-selector__input:focus {
  outline: 0;
  box-shadow: none;
}
.wc-block-add-to-cart-form.wc-block-add-to-cart-form--stepper form.cart .wc-block-components-quantity-selector.quantity .wc-block-components-quantity-selector__button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  padding: 0 0.75rem;
  border: 0;
  background: transparent;
  color: var(--wp--preset--color--primary);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1;
  opacity: 1;
  cursor: pointer;
}
.wc-block-add-to-cart-form.wc-block-add-to-cart-form--stepper form.cart .wc-block-components-quantity-selector.quantity .wc-block-components-quantity-selector__button:hover {
  background-color: var(--wp--preset--color--secondary);
}
.wc-block-add-to-cart-form.wc-block-add-to-cart-form--stepper form.cart .wc-block-components-quantity-selector.quantity .wc-block-components-quantity-selector__button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.wc-block-add-to-cart-form.wc-block-add-to-cart-form--stepper form.cart .wc-block-components-quantity-selector.quantity .wc-block-components-quantity-selector__button:disabled:hover {
  background: transparent;
}
.diakon-gift-recipient-note {
  flex-basis: 100%;
  margin: 0 0 var(--wp--preset--spacing--md);
}
@media screen and (max-width: 479.98px) {
  .wp-block-columns.diakon-product-columns {
    flex-wrap: wrap !important;
  }
  .wp-block-columns.diakon-product-columns > .wp-block-column {
    flex-basis: 100% !important;
    text-align: center;
  }
  .wp-block-columns.diakon-product-columns .wp-block-woocommerce-product-image-gallery {
    max-width: 12.5rem;
    margin-right: auto;
    margin-left: auto;
  }
  .wp-block-columns.diakon-product-columns form.cart {
    justify-content: center;
  }
}
/* ----------------------------------------------------------------------
 * A product's tabs. Their text is the product's description and the tab
 * posts' content, printed as plain HTML rather than blocks, so no layout puts
 * space between the paragraphs and the theme's reset leaves them touching.
 * Spaced by the theme's block gap preset -- not --wp--style--block-gap, which
 * is 0 in here. The tab's hidden title is skipped, so the first visible
 * element does not start lower.
 * ------------------------------------------------------------------- */
.woocommerce-Tabs-panel > :not([hidden]) ~ * {
  margin-block-start: var(--wp--preset--spacing--md);
}
/* ----------------------------------------------------------------------
 * Product grid -- the foundation store's catalogue and category pages, whose
 * Product Template carries .diakon-product-grid (diakonsaatio-store
 * templates). Opt-in by that class, so the other store's lists are untouched.
 *
 * WooCommerce's responsive layout (shrinkColumns) is a CSS grid of up to the
 * template's columns, but with a 150px floor, which leaves a course name
 * like "Ilmoittautuminen henkilökunta, Ryhmänohjaajakoulutus 2026, Oulu" a
 * word a line. The floor here is wide enough for a name to read: five columns
 * on a wide screen (asked 2026-10-05; four before), then fewer as the space
 * runs out, never more than five. The Diakon store's photographs keep four
 * (--photos, below).
 *
 * Each product is a centred column -- a modest image, the name, the price,
 * its button, and the waitlist button when it is sold out -- laid on five
 * rows shared with the rest of its row (subgrid). So the names of one row
 * start together, the prices line up, and so do the buttons, however long a
 * name runs and whether or not a product has a second button under its
 * first.
 * ------------------------------------------------------------------- */
.wc-block-product-template__responsive.diakon-product-grid {
  --product-grid-gap: var(--wp--preset--spacing--xl);
  --product-grid-columns: 5;
  --pg-cols: var(--product-grid-columns);
  --pg-gaps: calc((var(--pg-cols) - 1) * var(--product-grid-gap));
  --product-grid-share: calc((100% - var(--pg-gaps)) / var(--pg-cols));
  --product-grid-column: max(13rem, var(--product-grid-share));
  grid-template-columns: repeat(auto-fill, minmax(var(--product-grid-column), 1fr));
  --product-card-lines: var(--wp--preset--spacing--xs);
  --product-card-rows: var(--wp--preset--spacing--4-xl);
  gap: var(--product-card-lines) var(--product-grid-gap);
}
.wc-block-product-template__responsive.diakon-product-grid > li {
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  justify-items: center;
  align-content: start;
  margin: 0 0 calc(var(--product-card-rows) - var(--product-card-lines));
  text-align: center;
}
.wc-block-product-template__responsive.diakon-product-grid .wc-block-components-product-image {
  width: 100%;
  max-width: 11rem;
  margin: 0 auto var(--wp--preset--spacing--md);
}
.wc-block-product-template__responsive.diakon-product-grid .wp-block-post-title {
  margin: 0;
  line-height: 1.3;
}
.wc-block-product-template__responsive.diakon-product-grid .wc-block-components-product-price {
  display: inline-block;
  margin: 0;
  padding: 0.25rem 0.875rem;
  border-radius: 0.375rem;
  background-color: var(--wp--preset--color--secondary);
  color: var(--wp--preset--color--black);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
}
.wc-block-product-template__responsive.diakon-product-grid .wp-block-woocommerce-product-button,
.wc-block-product-template__responsive.diakon-product-grid .xoo-wl-btn-container {
  width: 100%;
  min-width: 0;
}
.wc-block-product-template__responsive.diakon-product-grid .wp-block-woocommerce-product-button {
  align-self: start;
  padding-top: var(--wp--preset--spacing--xs);
}
/* ----------------------------------------------------------------------
 * The same grid for the Diakon store's photographs (diakon-store templates:
 * the catalogue, the category, attribute and search pages): each picture
 * across its whole card -- these are cakes and treatments, sold by how they
 * look, not a course's logo -- and wider columns between the cards to suit
 * them (asked 2026-10-05).
 * ------------------------------------------------------------------- */
.wc-block-product-template__responsive.diakon-product-grid--photos {
  --product-grid-columns: 4;
  --product-grid-gap: var(--wp--preset--spacing--3-xl);
}
.wc-block-product-template__responsive.diakon-product-grid--photos .wc-block-components-product-image {
  max-width: none;
}
/* ----------------------------------------------------------------------
 * The row above a catalogue's products: "Näytetään kaikki 6 tulosta" and
 * the sort order (woocommerce/product-results-count and catalog-sorting).
 * The sort select came out as the browser's own, 13px and 20px tall; here
 * it is the store's form control, as a product's choices are -- height,
 * border, radius, the design's chevron -- and the count matches its size.
 * ------------------------------------------------------------------- */
.wp-block-woocommerce-catalog-sorting select.orderby {
  min-height: 2.75rem;
  margin: 0;
  padding: 0.5rem 2.5rem 0.5rem 1rem;
  border: 0.0625rem solid var(--wp--preset--color--grey);
  border-radius: var(--wp--preset--border-radius--xs);
  background-color: var(--wp--preset--color--white);
  background-image: url("data:image/svg+xml,%3Csvg width=%2711.5%27 height=%276.5%27 viewBox=%270 0 11.5 6.5%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cg transform=%27translate%280 6.5%29 rotate%28-90%29%27%3E%3Cpath d=%27M5.75 0.75L0.75 5.75L5.75 10.75%27 stroke=%27%238C1B64%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 0.71875rem 0.40625rem;
  color: var(--wp--preset--color--black);
  font-family: inherit;
  font-size: var(--wp--preset--font-size--body-small);
  line-height: 1.35;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
}
.diakon-catalog-toolbar .wc-block-product-results-count {
  font-size: var(--wp--preset--font-size--body-small);
}
.diakon-catalog-toolbar .wc-block-product-results-count .woocommerce-result-count,
.diakon-catalog-toolbar .wc-block-catalog-sorting .woocommerce-ordering {
  margin: 0;
}
/* ----------------------------------------------------------------------
 * A product list while its new order or page is on its way -- marked by
 * modules/product-list-loading.js on the list's parent. The products fade
 * and a spinner turns near the top of the list, where it is in view however
 * long the list runs below it.
 * ------------------------------------------------------------------- */
@keyframes diakon-spin {
  to {
    transform: rotate(360deg);
  }
}
.is-loading-products > .wp-block-woocommerce-product-collection {
  position: relative;
  pointer-events: none;
}
.is-loading-products > .wp-block-woocommerce-product-collection .wc-block-product-template {
  opacity: 0.4;
  transition: opacity 0.2s ease-out;
}
.is-loading-products > .wp-block-woocommerce-product-collection::after {
  content: "";
  position: absolute;
  top: 5rem;
  left: 50%;
  width: 3.5rem;
  height: 3.5rem;
  margin-left: -1.75rem;
  border: 0.3125rem solid var(--wp--preset--color--pastel-pink);
  border-top-color: var(--wp--preset--color--primary);
  border-radius: 50%;
  background-color: var(--wp--preset--color--white);
  box-shadow: var(--wp--preset--shadow--card);
  animation: diakon-spin 0.8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .is-loading-products > .wp-block-woocommerce-product-collection::after {
    animation-duration: 2s;
  }
}
/* ----------------------------------------------------------------------
 * The waitlist button -- "Liity jonotuslistalle", from Waitlist for
 * WooCommerce, on a sold-out product in a grid or on its page. The plugin
 * draws it as a square blue block of its own (#0a6bce, 5px corners). Here it
 * is the theme's arrow button (is-style-arrow, components/_buttons.scss): the
 * white pill with the arrow after its label, at the same sizes. It stands
 * beside the product's own button, and is the lesser of the two.
 *
 * The plugin prints its colours from its settings as inline rules of four
 * classes and an element, (0,4,1) -- .xoo-wl-btn-container.xoo-wl-shop-btncont
 * button.xoo-wl-action-btn.xoo-wl-open-form-btn and its product-page twin.
 * The [class] and the leading body take this to (0,4,2), which outranks them
 * without !important. Its settings are the live store's and come back with
 * every pull, so they are not the place to change it.
 * ------------------------------------------------------------------- */
body .xoo-wl-btn-container[class] button.xoo-wl-action-btn.xoo-wl-open-form-btn {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--md);
  max-width: 100%;
  margin: var(--wp--preset--spacing--xs) auto 0;
  padding: 0.8125rem 1.5rem;
  border: 2px solid var(--wp--preset--color--primary);
  border-radius: 90px;
  background-color: var(--wp--preset--color--white);
  color: var(--wp--preset--color--primary);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.25;
  text-transform: none;
  text-align: center;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
@media screen and (min-width: 782px) {
  body .xoo-wl-btn-container[class] button.xoo-wl-action-btn.xoo-wl-open-form-btn {
    padding: 0.8125rem 1.5rem;
    font-size: 1.125rem;
    font-weight: 600;
  }
}
body .xoo-wl-btn-container[class] button.xoo-wl-action-btn.xoo-wl-open-form-btn::after {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 18px;
  height: 16px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width=%2718%27 height=%2716%27 viewBox=%270 0 18 16%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M10.7045 0.287676C10.3111 -0.0999452 9.67798 -0.0952564 9.29036 0.298149C8.90274 0.691555 8.90743 1.3247 9.30083 1.71232L14.6712 7.00372H1C0.447715 7.00372 0 7.45144 0 8.00372C0 8.55601 0.447716 9.00372 1 9.00372H14.6646L9.30083 14.2886C8.90743 14.6762 8.90274 15.3094 9.29036 15.7028C9.67798 16.0962 10.3111 16.1009 10.7045 15.7133L17.6287 8.89087C18.1256 8.40126 18.1256 7.59967 17.6287 7.11006L10.7045 0.287676Z%27 fill=%27%238C1B64%27/%3E%3C/svg%3E%0A");
          mask-image: url("data:image/svg+xml,%3Csvg width=%2718%27 height=%2716%27 viewBox=%270 0 18 16%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M10.7045 0.287676C10.3111 -0.0999452 9.67798 -0.0952564 9.29036 0.298149C8.90274 0.691555 8.90743 1.3247 9.30083 1.71232L14.6712 7.00372H1C0.447715 7.00372 0 7.45144 0 8.00372C0 8.55601 0.447716 9.00372 1 9.00372H14.6646L9.30083 14.2886C8.90743 14.6762 8.90274 15.3094 9.29036 15.7028C9.67798 16.0962 10.3111 16.1009 10.7045 15.7133L17.6287 8.89087C18.1256 8.40126 18.1256 7.59967 17.6287 7.11006L10.7045 0.287676Z%27 fill=%27%238C1B64%27/%3E%3C/svg%3E%0A");
  background-color: currentcolor;
  transition: transform 0.2s ease;
}
body .xoo-wl-btn-container[class] button.xoo-wl-action-btn.xoo-wl-open-form-btn:hover {
  border-width: 2px;
  border-radius: 90px;
  border-color: var(--diakon-store-accent);
  background-color: var(--wp--preset--color--white);
  color: var(--diakon-store-accent);
}
body .xoo-wl-btn-container[class] button.xoo-wl-action-btn.xoo-wl-open-form-btn:hover::after {
  transform: translateX(0.25rem);
}
@media (prefers-reduced-motion: reduce) {
  body .xoo-wl-btn-container[class] button.xoo-wl-action-btn.xoo-wl-open-form-btn::after {
    transition: none;
  }
}
body .xoo-wl-btn-container[class] button.xoo-wl-action-btn.xoo-wl-open-form-btn:focus-visible {
  outline: 0.125rem solid var(--wp--preset--color--primary);
  outline-offset: 0.125rem;
}
body form.xoo-wl-form button[type=submit].xoo-wl-submit-btn.xoo-wl-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--wp--preset--spacing--md);
  height: auto;
  margin: var(--wp--preset--spacing--xs) 20px 0 0;
  padding: 0.625rem 1.5rem;
  border: 2px solid var(--wp--preset--color--primary);
  border-radius: 90px;
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.25;
  text-transform: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
@media screen and (min-width: 782px) {
  body form.xoo-wl-form button[type=submit].xoo-wl-submit-btn.xoo-wl-action-btn {
    padding: 1rem 1.5rem;
    font-size: 1.125rem;
    font-weight: 600;
  }
}
body form.xoo-wl-form button[type=submit].xoo-wl-submit-btn.xoo-wl-action-btn::after {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 18px;
  height: 16px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width=%2718%27 height=%2716%27 viewBox=%270 0 18 16%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M10.7045 0.287676C10.3111 -0.0999452 9.67798 -0.0952564 9.29036 0.298149C8.90274 0.691555 8.90743 1.3247 9.30083 1.71232L14.6712 7.00372H1C0.447715 7.00372 0 7.45144 0 8.00372C0 8.55601 0.447716 9.00372 1 9.00372H14.6646L9.30083 14.2886C8.90743 14.6762 8.90274 15.3094 9.29036 15.7028C9.67798 16.0962 10.3111 16.1009 10.7045 15.7133L17.6287 8.89087C18.1256 8.40126 18.1256 7.59967 17.6287 7.11006L10.7045 0.287676Z%27 fill=%27%238C1B64%27/%3E%3C/svg%3E%0A");
          mask-image: url("data:image/svg+xml,%3Csvg width=%2718%27 height=%2716%27 viewBox=%270 0 18 16%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M10.7045 0.287676C10.3111 -0.0999452 9.67798 -0.0952564 9.29036 0.298149C8.90274 0.691555 8.90743 1.3247 9.30083 1.71232L14.6712 7.00372H1C0.447715 7.00372 0 7.45144 0 8.00372C0 8.55601 0.447716 9.00372 1 9.00372H14.6646L9.30083 14.2886C8.90743 14.6762 8.90274 15.3094 9.29036 15.7028C9.67798 16.0962 10.3111 16.1009 10.7045 15.7133L17.6287 8.89087C18.1256 8.40126 18.1256 7.59967 17.6287 7.11006L10.7045 0.287676Z%27 fill=%27%238C1B64%27/%3E%3C/svg%3E%0A");
  background-color: currentcolor;
}
body form.xoo-wl-form button[type=submit].xoo-wl-submit-btn.xoo-wl-action-btn:hover {
  border-color: var(--diakon-store-accent);
  background-color: var(--diakon-store-accent);
}
body form.xoo-wl-form button[type=submit].xoo-wl-submit-btn.xoo-wl-action-btn:focus-visible {
  outline: 0.125rem solid var(--wp--preset--color--primary);
  outline-offset: 0.125rem;
}
@media screen and (min-width: 480px) {
  body.single-product .xoo-wl-btn-container[class] button.xoo-wl-action-btn.xoo-wl-open-form-btn {
    margin-left: 0;
  }
}
body :is(li.product, li.wc-block-product) .xoo-wl-btn-container[class] button.xoo-wl-action-btn.xoo-wl-open-form-btn {
  gap: var(--wp--preset--spacing--xs);
  margin-right: auto;
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 1rem;
}
/* ----------------------------------------------------------------------
 * The store's sidebar layout
 *
 * The editorial sidebar template puts a full-width sticky menu row *before*
 * the content and has sidebar-pull-up.js drag the content back up over it by
 * the menu's measured height. That earns a menu which can outdent past the
 * content column, and costs a JS measurement, a paint guard, a min-height fed
 * back from JS, and a content box that has to be indented past a menu that is
 * not its sibling.
 *
 * A store screen needs none of that: the menu and the content are simply two
 * columns. So they are two columns, in flow, and every one of those props is
 * gone. The areas match the other template exactly -- 323px menu, 57px gutter,
 * 900px content, 1280px wide -- so the two read as the same page shape.
 * ------------------------------------------------------------------- */
@media screen and (min-width: 1024px) {
  .diakon-store-layout {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    -moz-column-gap: 3.5625rem;
         column-gap: 3.5625rem;
  }
}
@media screen and (min-width: 1024px) {
  .diakon-store-layout__breadcrumbs {
    flex: 0 0 100%;
    padding-left: 23.75rem;
  }
}
@media screen and (max-width: 1023.98px) {
  .diakon-store-layout__menu {
    margin-bottom: var(--wp--preset--spacing--xl);
  }
  .diakon-store-layout__menu .diakon-side-nav__back,
  .diakon-store-layout__menu .diakon-side-nav__hr,
  .diakon-store-layout__menu .diakon-side-nav__section-title,
  .diakon-store-layout__menu .diakon-side-nav__actions,
  .diakon-store-layout__menu .diakon-side-nav__sub-list {
    display: none;
  }
  .diakon-store-layout__menu .diakon-side-nav__list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--xs);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .diakon-store-layout__menu .diakon-side-nav__list::-webkit-scrollbar {
    display: none;
  }
  .diakon-store-layout__menu .diakon-side-nav__item {
    flex: 0 0 auto;
  }
  .diakon-store-layout__menu .diakon-side-nav__row {
    background-color: var(--wp--preset--color--secondary);
  }
  .diakon-store-layout__menu .diakon-side-nav__link {
    white-space: nowrap;
    text-decoration: none;
    padding: 0.4375rem 0.9375rem;
  }
  .diakon-store-layout__menu .current-page > .diakon-side-nav__row {
    background-color: var(--wp--preset--color--primary);
  }
  .diakon-store-layout__menu .current-page > .diakon-side-nav__row .diakon-side-nav__link {
    color: var(--wp--preset--color--white);
  }
}
@media screen and (min-width: 1024px) {
  .diakon-store-layout__menu {
    padding: var(--wp--preset--spacing--md);
    border-radius: var(--wp--preset--border-radius--s);
    box-shadow: 0 4px 30px 0 rgba(0, 0, 0, 0.2);
    background-color: var(--wp--preset--color--white);
    margin-bottom: var(--wp--preset--spacing--4-xl);
    position: sticky;
    top: 0;
    flex: 0 0 20.1875rem;
  }
}
@media screen and (min-width: 1024px) {
  .diakon-store-layout__content {
    flex: 1 1 auto;
    min-width: 0;
  }
}
/* ----------------------------------------------------------------------
 * Undoing woocommerce-layout.css where it assumes markup we do not render
 *
 * That stylesheet lays the account screens out as two floated columns:
 *
 *   .woocommerce-MyAccount-navigation { float: left;  width: 30%; }
 *   .woocommerce-MyAccount-content    { float: right; width: 68%; }
 *
 * The navigation is in the theme's sidebar now and AccountNavigation unhooks
 * WooCommerce's own, so nothing occupies that first 30% -- the content still
 * floats right at 68% and leaves a third of the column empty, inside a column
 * the sidebar template has already narrowed once.
 *
 * Our stylesheet is enqueued after all three of WooCommerce's, so matching
 * its specificity is enough to win; there is no need for !important.
 * ------------------------------------------------------------------- */
/*
 * The store content closes the page itself. Block sections carry their rhythm
 * in the markup and a classic template has none, so without this the last row
 * would rest against the footer.
 *
 * Here rather than on the template's <main>, so each column owns its own
 * close: the content through this, the side nav through its bottom margin.
 * Padding the <main> instead would space whichever column is shorter twice.
 */
.woocommerce-account .woocommerce,
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce {
  padding-bottom: var(--wp--preset--spacing--4-xl);
}
.woocommerce-account .woocommerce-MyAccount-content {
  float: none;
  width: 100%;
}
/*
 * The same defect on the cart. woocommerce-layout.css floats .cart_totals
 * right at 48% to leave room for cross-sells and a shipping calculator; this
 * store shows neither, so the totals box sat in the right half of the page
 * with the left half empty. Guarded by :only-child, so enabling cross-sells
 * later brings the two-column layout back on its own.
 */
.woocommerce-cart .cart-collaterals > .cart_totals:only-child {
  float: none;
  width: 100%;
}
/*
 * Its two-column sets -- login beside register, and the checkout's customer
 * details -- are floated at 48% each, which is a 4% gutter that has nothing
 * to do with the theme's spacing scale. Now that each column is a card, that
 * gutter is visible.
 *
 * Only where WooCommerce puts them side by side: below 769px its small-screen
 * sheet stacks them at full width, and this rule, outranking it by the id,
 * kept each at half the screen (found 2026-10-04).
 */
@media screen and (min-width: 769px) {
  .woocommerce-account #customer_login .col-1,
  .woocommerce-account #customer_login .col-2,
  .woocommerce-checkout #customer_details .col-1,
  .woocommerce-checkout #customer_details .col-2 {
    width: calc(50% - var(--wp--preset--spacing--md) / 2);
  }
}
/*
 * Stacked, the second card sat flush against the first: WooCommerce's
 * floats have no gap of their own, and the gutter above only exists side by
 * side.
 */
@media screen and (max-width: 768px) {
  .woocommerce-account #customer_login .col-2,
  .woocommerce-checkout #customer_details .col-2 {
    margin-top: var(--wp--preset--spacing--xl);
  }
}
/* ----------------------------------------------------------------------
 * The cart
 * ------------------------------------------------------------------- */
.woocommerce-cart .woocommerce-cart-form {
  padding: var(--wp--preset--spacing--xl);
  border-radius: var(--wp--preset--border-radius--m);
  background-color: var(--wp--preset--color--white);
  box-shadow: 0 0.25rem 0.9375rem 0 rgba(0, 0, 0, 0.2);
}
.woocommerce-cart .cart-collaterals {
  margin-top: var(--form-section-gap);
}
.woocommerce-cart {
  /* The remove "x" is a link WooCommerce draws as a red circle. */
}
.woocommerce-cart .product-remove .remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background-color: var(--wp--preset--color--secondary);
  color: var(--wp--preset--color--primary);
  font-size: 1.125rem;
  line-height: 1;
  text-decoration: none;
}
.woocommerce-cart .product-remove .remove:hover {
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
}
.woocommerce-cart .product-thumbnail img {
  width: 4rem;
  height: auto;
  border-radius: var(--wp--preset--border-radius--xs);
}
.woocommerce-cart .product-name a {
  color: var(--wp--preset--color--black);
  font-weight: 600;
  text-decoration: none;
}
.woocommerce-cart .product-name a:hover {
  text-decoration: underline;
}
.woocommerce-cart {
  /* The quantity box: same control shape as every other input. */
}
.woocommerce-cart .quantity input.qty {
  width: 4.5rem;
  min-height: var(--form-control-height);
  padding: var(--form-control-padding);
  border: var(--form-border);
  border-radius: var(--form-radius);
  font-size: var(--form-font-size);
  text-align: center;
}
.woocommerce-cart {
  /* The coupon row and the update button share the table's last line. */
}
.woocommerce-cart .actions {
  padding-top: var(--form-gap);
}
.woocommerce-cart .coupon {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--md);
  align-items: center;
}
.woocommerce-cart {
  /*
  * The coupon field is the one control on these screens with no .form-row
  * around it, and WooCommerce styles it twice -- through its id, and
  * through the table cell it sits in:
  *
  *   .woocommerce-page .woocommerce-cart-form #coupon_code
  *     { height:50px; font-size:var(--wp--preset--font-size--small);
  *       padding:0 1.1em }                                      (1,2,0)
  *   .woocommerce-cart table.cart td.actions .coupon .input-text
  *     { float:left; border:1px solid #cfc8d8; padding:6px 6px 5px }
  *                                                              (0,5,2)
  *
  * Both are matched so it ends up the same control as every other field.
  */
}
.woocommerce-cart .woocommerce-cart-form #coupon_code,
.woocommerce-cart table.cart td.actions .coupon .input-text {
  flex: 1 1 11.25rem;
  float: none;
  height: auto;
  min-height: var(--form-control-height);
  margin: 0;
  padding: var(--form-control-padding);
  border: var(--form-border);
  border-radius: var(--form-radius);
  font-size: var(--form-font-size);
}
.woocommerce-cart {
  /* The totals box reads as a summary, not as another form. */
}
.woocommerce-cart .cart_totals .order-total {
  font-size: var(--wp--preset--font-size--body);
  font-weight: 700;
}
.woocommerce-cart .cart_totals .wc-proceed-to-checkout {
  margin-top: var(--form-gap);
  padding: 0;
}
.woocommerce-cart .cart_totals {
  /*
  * A regular store button. WooCommerce makes this one a full-width
  * block at 1.25em with 1em all round:
  *
  *   .woocommerce-cart .wc-proceed-to-checkout a.checkout-button
  *     { display:block; font-size:1.25em; padding:1em; margin-bottom:1em }
  *                                                          (0,3,1)
  *
  * so the store button's own values are restated above it.
  */
}
.woocommerce-cart .cart_totals .wc-proceed-to-checkout a.checkout-button {
  display: inline-flex;
  margin-bottom: 0;
  padding: 0.625rem 1.5rem;
  font-size: 1rem;
}
@media screen and (min-width: 782px) {
  .woocommerce-cart .cart_totals .wc-proceed-to-checkout a.checkout-button {
    padding: 1rem 1.5rem;
    font-size: 1.125rem;
  }
}
.woocommerce-cart .return-to-shop {
  margin-top: var(--form-gap);
}
/* ----------------------------------------------------------------------
 * The checkout
 * ------------------------------------------------------------------- */
.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout .woocommerce-form-login-toggle {
  margin-bottom: var(--form-gap);
}
.woocommerce-checkout .woocommerce-form-coupon-toggle .wc-block-components-notice-banner,
.woocommerce-checkout .woocommerce-form-login-toggle .wc-block-components-notice-banner {
  margin: 0;
  padding: 0.625rem 1rem;
  border: 0.125rem solid var(--wp--preset--color--grey);
  border-radius: var(--form-radius);
  background-color: var(--wp--preset--color--white);
  color: var(--wp--preset--color--black);
  font-size: var(--wp--preset--font-size--tiny);
  line-height: 1.25;
}
.woocommerce-checkout .woocommerce-form-coupon-toggle .wc-block-components-notice-banner svg,
.woocommerce-checkout .woocommerce-form-login-toggle .wc-block-components-notice-banner svg {
  display: none;
}
.woocommerce-checkout .woocommerce-form-coupon-toggle .showcoupon,
.woocommerce-checkout .woocommerce-form-coupon-toggle .showlogin,
.woocommerce-checkout .woocommerce-form-login-toggle .showcoupon,
.woocommerce-checkout .woocommerce-form-login-toggle .showlogin {
  color: var(--wp--preset--color--primary);
}
.woocommerce-checkout {
  /* The two forms those prompts open. */
}
.woocommerce-checkout .checkout_coupon,
.woocommerce-checkout .woocommerce-form-login {
  margin-bottom: var(--form-gap);
  padding: var(--wp--preset--spacing--md);
  border-radius: var(--form-radius);
  background-color: var(--wp--preset--color--secondary);
}
.woocommerce-checkout {
  /*
   * The coupon's field and button, side by side. Floated as WooCommerce has
   * them, each kept the row margin every checkout field has, so the box
   * ended in a field's worth of empty space under the pair. As one flex row
   * they need no margins, and on a narrow screen the button wraps under the
   * field with the same gap. No floats left to clear, so no clearing div.
   *
   * The field takes the room the button leaves, and the two are centred
   * on one line: they are not the same height, and stretched rows left
   * the field riding high.
   */
}
.woocommerce-checkout .checkout_coupon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--form-gap);
}
.woocommerce-checkout .checkout_coupon .form-row {
  float: none;
  width: auto;
  margin: 0;
}
.woocommerce-checkout .checkout_coupon .form-row-first {
  flex: 1 1 12rem;
}
.woocommerce-checkout .checkout_coupon .form-row-last {
  flex: 0 0 auto;
}
.woocommerce-checkout .checkout_coupon .clear {
  display: none;
}
.woocommerce-checkout {
  /* The terms text is long and quoted verbatim, so it scrolls rather than
  pushing the place-order button off the screen. */
}
.woocommerce-checkout .woocommerce-terms-and-conditions {
  max-height: 13.75rem;
  margin-bottom: var(--form-choice-gap);
  padding: 0.625rem 1rem;
  overflow-y: auto;
  border: var(--form-border);
  border-radius: var(--form-radius);
  background-color: var(--wp--preset--color--white);
}
.woocommerce-checkout .woocommerce-privacy-policy-text {
  font-size: var(--wp--preset--font-size--tiny);
  line-height: 1.35;
}
.woocommerce-checkout {
  /*
  * Smart Coupons' gift-certificate fields. Not a .shop_table, so the table
  * rules above miss it; it only needs to stop looking like a raw table.
  */
}
.woocommerce-checkout .form_table {
  width: 100%;
  border-collapse: collapse;
}
.woocommerce-checkout .form_table th,
.woocommerce-checkout .form_table td {
  padding: 0 0 var(--form-gap);
  text-align: left;
  vertical-align: top;
}
.woocommerce-checkout .form_table th {
  padding-right: var(--wp--preset--spacing--md);
  color: var(--diakon-store-accent);
  font-size: var(--wp--preset--font-size--tiny);
  font-weight: 500;
}
.woocommerce-checkout {
  /* Its own messages, and the coupon plugin's. */
}
.woocommerce-checkout .sc_info_box,
.woocommerce-checkout .wc_coupon_message_wrap {
  margin-bottom: var(--form-gap);
  padding: 0.625rem 1rem;
  border: 0.125rem solid var(--wp--preset--color--grey);
  border-radius: var(--form-radius);
  background-color: var(--wp--preset--color--white);
  font-size: var(--wp--preset--font-size--tiny);
  line-height: 1.25;
}
.woocommerce-checkout #customer_details {
  margin-bottom: var(--form-section-gap);
}
.woocommerce-checkout .woocommerce-checkout-review-order-table .product-name {
  font-weight: 600;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total {
  font-size: var(--wp--preset--font-size--body);
  font-weight: 700;
}
.woocommerce-checkout {
  /* Payment methods: a plain list, not the yellow box WooCommerce ships. */
}
.woocommerce-checkout .wc_payment_methods {
  margin: 0 0 var(--form-gap);
  padding: 0;
  list-style: none;
}
.woocommerce-checkout .wc_payment_methods li {
  margin-bottom: var(--form-choice-gap);
  list-style: none;
}
.woocommerce-checkout .wc_payment_methods .wc_payment_method label {
  display: inline-flex;
  align-items: center;
  gap: var(--form-choice-gap);
  color: var(--wp--preset--color--black);
  font-size: var(--form-font-size);
  font-weight: 500;
  cursor: pointer;
}
.woocommerce-checkout .wc_payment_methods .payment_box {
  margin: var(--form-choice-gap) 0 0;
  padding: 0.625rem 1rem;
  border-radius: var(--form-radius);
  background-color: var(--wp--preset--color--secondary);
  color: var(--wp--preset--color--black);
  font-size: var(--wp--preset--font-size--tiny);
  line-height: 1.35;
}
.woocommerce-checkout .wc_payment_methods .payment_box::before {
  display: none;
}
.woocommerce-checkout .wc_payment_methods .payment_box p:last-child {
  margin-bottom: 0;
}
.woocommerce-checkout {
  /* The radio is round -- one payment method can be chosen. */
}
.woocommerce-checkout input[type=radio] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  border: var(--form-border);
  border-radius: 50%;
  background-color: var(--wp--preset--color--white);
  cursor: pointer;
}
.woocommerce-checkout input[type=radio]:checked {
  border-color: var(--wp--preset--color--primary);
  background-color: var(--wp--preset--color--primary);
  box-shadow: inset 0 0 0 0.1875rem var(--wp--preset--color--white);
}
.woocommerce-checkout input[type=radio]:focus-visible {
  outline: 0.125rem solid var(--wp--preset--color--primary);
  outline-offset: 0.125rem;
}
.woocommerce-checkout {
  /*
  * The terms and the place-order button are moved up beside the order
  * notes by Order/PlaceOrder in diakonsaatio-store, so they are rendered
  * inside the form rather than in the payment box below it.
  */
}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
  margin-bottom: var(--form-gap);
  font-size: var(--wp--preset--font-size--tiny);
  line-height: 1.35;
}
.woocommerce-checkout .diakonsaatio-store-place-order {
  margin-top: var(--form-section-gap);
  margin-bottom: 0;
}
.woocommerce-checkout #place_order {
  width: 100%;
  justify-content: center;
}
/* The cart shows the coupon plugin's messages too. */
.woocommerce-cart .wc_coupon_message_wrap {
  margin-top: var(--form-gap);
  padding: 0.625rem 1rem;
  border: 0.125rem solid var(--wp--preset--color--grey);
  border-radius: var(--form-radius);
  font-size: var(--wp--preset--font-size--tiny);
  line-height: 1.25;
}
/*
 * Smart Coupons prints its message box on every cart and checkout, holding
 * only an empty .no_wc_coupon_message when there is nothing to say -- and
 * with the bordered box above around it, that drew an empty frame (a bare
 * line, the wrapper being a span) above the form. Nothing to say, no box.
 * Applying a coupon takes the placeholder out and leaves the span empty
 * altogether, so that counts as nothing to say too.
 */
.woocommerce-cart .wc_coupon_message_wrap:is(:empty, :has(> .no_wc_coupon_message:only-child)),
.woocommerce-checkout .wc_coupon_message_wrap:is(:empty, :has(> .no_wc_coupon_message:only-child)) {
  display: none;
}
/*
 * The payment box. On an order with nothing to pay -- a free registration,
 * a grant application -- WooCommerce lists no payment methods, and the store
 * draws its own order button beside the fields (diakonsaatio-store
 * Order\PlaceOrder), so the box held only a hidden nonce and showed as an
 * empty tinted panel under the order summary. With methods to choose from it
 * is left as it is.
 */
.woocommerce-checkout #payment:not(:has(.wc_payment_methods)) {
  margin: 0;
  padding: 0;
  background: none;
}
.woocommerce-checkout #payment:not(:has(.wc_payment_methods)) .place-order {
  margin: 0;
  padding: 0;
}
/* ----------------------------------------------------------------------
 * Stacked table rows -- woocommerce-smallscreen turns every shop_table into
 * one row per cell with the column name in a ::before. Those labels are
 * WooCommerce's, so they are typed here rather than left at its defaults.
 * ------------------------------------------------------------------- */
@media screen and (max-width: 599.98px) {
  .woocommerce-cart .shop_table_responsive td::before,
  .woocommerce-checkout .shop_table_responsive td::before {
    color: var(--diakon-store-accent);
    font-size: 0.75rem;
    font-weight: 600;
  }
}
/* Links inside any of the store tables, after every table rule above. */
.woocommerce-account .shop_table a:not(.button),
.woocommerce-cart .shop_table a:not(.button),
.woocommerce-checkout .shop_table a:not(.button) {
  color: var(--wp--preset--color--primary);
}
/*
 * The card is per column, so a column WooCommerce leaves empty would draw an
 * empty white sheet. Placed after every card rule so it always wins.
 */
.woocommerce-checkout #customer_details .col-2:empty,
.woocommerce-account #customer_login .col-2:empty {
  display: none;
}
/* ----------------------------------------------------------------------
 * The date picker
 *
 * Birthdays are collected with the jQuery UI datepicker, enqueued by
 * diakonsaatio-store together with WooCommerce's copy of the stock jQuery UI
 * stylesheet. That stylesheet is where the dated look comes from: gradient
 * grounds, a beige header and 1em Verdana. Its structure is fine, so this
 * replaces the skin and leaves the calendar layout alone.
 *
 * #ui-datepicker-div is appended to <body>, once, and shared by every date
 * field on the site -- hence a top-level rule rather than one scoped to the
 * store screens.
 * ------------------------------------------------------------------- */
#ui-datepicker-div {
  padding: var(--wp--preset--spacing--xs);
  border: 0;
  border-radius: var(--wp--preset--border-radius--s);
  background: var(--wp--preset--color--white);
  box-shadow: 0 0.25rem 1.25rem 0 rgba(0, 0, 0, 0.18);
  font-family: inherit;
  font-size: 1rem;
}
#ui-datepicker-div .ui-datepicker-header {
  padding: 0 0 0.25rem;
  border: 0;
  background: none;
  color: var(--wp--preset--color--black);
  font-weight: 600;
}
#ui-datepicker-div .ui-datepicker-title {
  display: flex;
  gap: 0.375rem;
  margin: 0 2rem;
  line-height: 1.75rem;
}
#ui-datepicker-div .ui-datepicker-month,
#ui-datepicker-div .ui-datepicker-year {
  min-height: 1.75rem;
  padding: 0 0.375rem;
  border: var(--form-border);
  border-radius: var(--form-radius);
  background-color: var(--wp--preset--color--secondary);
  color: var(--wp--preset--color--black);
  font-family: inherit;
  font-size: 0.875rem;
}
#ui-datepicker-div .ui-datepicker-prev,
#ui-datepicker-div .ui-datepicker-next {
  top: 0;
  width: 1.75rem;
  height: 1.75rem;
  border: 0.0625rem solid #b7c3da;
  border-radius: 50%;
  background: #f0f4fa;
  cursor: pointer;
}
#ui-datepicker-div .ui-datepicker-prev.ui-state-hover,
#ui-datepicker-div .ui-datepicker-next.ui-state-hover {
  border-color: var(--wp--preset--color--primary);
  background: var(--wp--preset--color--secondary);
}
#ui-datepicker-div .ui-datepicker-prev .ui-icon,
#ui-datepicker-div .ui-datepicker-next .ui-icon {
  width: 100%;
  height: 100%;
  margin: 0;
  inset: 0;
  background-image: none;
  background-color: var(--wp--preset--color--primary);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width=%2716%27 height=%2716%27 viewBox=%270 0 16 16%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M10 3L5 8l5 5%27 stroke=%27black%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 fill=%27none%27/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg width=%2716%27 height=%2716%27 viewBox=%270 0 16 16%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M10 3L5 8l5 5%27 stroke=%27black%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 fill=%27none%27/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 0.875rem;
          mask-size: 0.875rem;
  -webkit-mask-position: center;
          mask-position: center;
  text-indent: -9999px;
}
#ui-datepicker-div .ui-datepicker-prev {
  left: 0;
}
#ui-datepicker-div .ui-datepicker-next {
  right: 0;
}
#ui-datepicker-div .ui-datepicker-next .ui-icon {
  transform: scaleX(-1);
}
#ui-datepicker-div .ui-datepicker-calendar {
  margin: 0;
  border-collapse: collapse;
}
#ui-datepicker-div .ui-datepicker-calendar th {
  padding: 0.25rem 0;
  color: var(--diakon-store-accent);
  font-size: 0.75rem;
  font-weight: 600;
}
#ui-datepicker-div .ui-datepicker-calendar td {
  padding: 0.0625rem;
}
#ui-datepicker-div .ui-datepicker-calendar a,
#ui-datepicker-div .ui-datepicker-calendar span {
  display: block;
  padding: 0.375rem;
  border: 0;
  border-radius: var(--form-radius);
  background: none;
  color: var(--wp--preset--color--black);
  font-weight: 500;
  text-align: center;
  text-decoration: none;
}
#ui-datepicker-div .ui-datepicker-calendar a:hover {
  background: var(--wp--preset--color--secondary);
  color: var(--wp--preset--color--primary);
}
#ui-datepicker-div .ui-datepicker-calendar .ui-datepicker-today a {
  box-shadow: inset 0 0 0 0.0625rem var(--wp--preset--color--primary);
}
#ui-datepicker-div .ui-datepicker-calendar .ui-datepicker-current-day a,
#ui-datepicker-div .ui-datepicker-calendar a.ui-state-active {
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
}
#ui-datepicker-div .ui-datepicker-calendar .ui-state-disabled span {
  color: var(--wp--preset--color--medium-grey);
}
/* ----------------------------------------------------------------------
 * Asking for an account to be deleted
 *
 * The same words in two places: the account endpoint's own page, and the
 * dialog the sidebar link opens. The dialog wears the theme's popup chrome,
 * so only what is inside the box needs saying here.
 * ------------------------------------------------------------------- */
.diakon-store-deletion__inner {
  padding: var(--wp--preset--spacing--3-xl);
}
.diakon-store-deletion {
  /*
  * Classed rather than bare element selectors: the account screens style h2,
  * li and the rest further up this file, and a bare selector here would be a
  * less specific rule arriving later — which no-descending-specificity rightly
  * objects to.
  */
}
.diakon-store-deletion__heading {
  margin-top: 0;
}
.diakon-store-deletion__list {
  margin: var(--wp--preset--spacing--md) 0;
  padding-left: var(--wp--preset--spacing--xl);
  list-style: disc;
}
.diakon-store-deletion__list-item {
  margin-bottom: var(--wp--preset--spacing--xs);
}
.diakon-store-deletion__form {
  margin-top: var(--wp--preset--spacing--xl);
}
/* ----------------------------------------------------------------------
 * "Tutustu myös" -- the related products under a course, in the same grid as
 * the catalogue above. The foundation store's plugin wraps the list in
 * .diakon-related-products (Product\RelatedProducts), so here too the other
 * store is untouched.
 *
 * This list is WooCommerce's classic markup, not the Product Template: an
 * <li> of a link wrapping the image, name and price, then the button and the
 * waitlist button. The link is set to display: contents, so its three
 * children take the grid's rows directly and line up across the row with
 * the rest -- it still wraps them and still links them. WooCommerce's own
 * floats, fixed widths and clearfix are undone; the clearfix's ::before and
 * ::after would otherwise be grid cells of their own. body outranks
 * WooCommerce's .woocommerce ul.products ... selectors.
 * ------------------------------------------------------------------- */
.single-product section.related.products {
  padding-top: var(--wp--preset--spacing--4-xl);
  padding-bottom: var(--wp--preset--spacing--4-xl);
  background-color: var(--wp--preset--color--secondary);
  box-shadow: 0 0 0 100vmax var(--wp--preset--color--secondary);
  clip-path: inset(0 -100vmax);
}
.single-product main:has(section.related.products) {
  padding-bottom: 0 !important;
}
.single-product section.related > h2 {
  margin-bottom: var(--wp--preset--spacing--2-xl);
  font-weight: 800;
  text-align: center;
}
.diakon-related-products .related > h2 {
  font-size: var(--wp--preset--font-size--h-3);
}
body .diakon-related-products ul.products {
  --product-grid-gap: var(--wp--preset--spacing--xl);
  --product-grid-quarter: calc((100% - 3 * var(--product-grid-gap)) / 4);
  --product-grid-column: max(13rem, var(--product-grid-quarter));
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--product-grid-column), 1fr));
  gap: var(--wp--preset--spacing--2-xl) var(--product-grid-gap);
  margin: 0;
  padding: 0;
}
body .diakon-related-products ul.products::before, body .diakon-related-products ul.products::after {
  display: none;
}
body .diakon-related-products ul.products[class] li.product {
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  row-gap: var(--wp--preset--spacing--xs);
  justify-items: center;
  align-content: start;
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
  text-align: center;
}
body .diakon-related-products ul.products li.product .woocommerce-loop-product__link {
  display: contents;
}
body .diakon-related-products ul.products li.product .xoo-wl-btn-container {
  width: 100%;
  min-width: 0;
}
body .diakon-related-products ul.products li.product a img {
  width: 100%;
  max-width: 11rem;
  height: auto;
  margin: 0 auto;
}
body .diakon-related-products ul.products li.product .woocommerce-loop-product__title {
  margin: 0;
  padding: 0;
  color: var(--wp--preset--color--primary);
  font-size: var(--wp--preset--font-size--body);
  line-height: 1.3;
}
body .diakon-related-products ul.products li.product .price {
  display: inline-block;
  margin: 0;
  padding: 0.25rem 0.875rem;
  border-radius: 0.375rem;
  background-color: var(--wp--preset--color--secondary);
  color: var(--wp--preset--color--black);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  background-color: var(--wp--preset--color--white);
}
body .diakon-related-products ul.products li.product .button {
  align-self: start;
  margin: var(--wp--preset--spacing--xs) 0 0;
}
/* ----------------------------------------------------------------------
 * The foundation store's checkout, laid out as its old one was (asked
 * 2026-10-03): the customer's side on the left -- billing details, the
 * registration fields, then the terms and the button (Order\PlaceOrder puts
 * them there) -- and the order's side on the right: who the gift cards are
 * for, then the order and its total. Stacked, as before, below lg.
 *
 * The page's content column is 1000px; this takes the wide width. The left
 * card spans every row so the right column's blocks sit directly under one
 * another, and the last row (1fr) takes whatever height the left side has
 * beyond them.
 * ------------------------------------------------------------------- */
.site-saatio.woocommerce-checkout,
.site-saatio.woocommerce-checkout form.checkout {
  --form-gap: 1rem;
  --form-label-gap: 0.375rem;
}
.site-saatio.woocommerce-checkout #customer_details {
  display: contents;
}
.site-saatio.woocommerce-checkout #customer_details .col-1,
.site-saatio.woocommerce-checkout #customer_details .col-2 {
  float: none;
  width: 100%;
  margin-bottom: var(--form-section-gap);
  padding: var(--wp--preset--spacing--xl);
  border-radius: var(--wp--preset--border-radius--m);
  background-color: var(--wp--preset--color--white);
  box-shadow: 0 0.25rem 0.9375rem 0 rgba(0, 0, 0, 0.2);
}
.site-saatio.woocommerce-checkout {
  /*
  * One block per person, side by side when there are several. A single
  * person keeps a form's width rather than the full card's.
  */
}
.site-saatio.woocommerce-checkout .diakon-participants__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21.25rem), 1fr));
  gap: var(--form-section-gap) var(--wp--preset--spacing--3-xl);
}
.site-saatio.woocommerce-checkout .diakon-participant {
  min-width: 0;
}
.site-saatio.woocommerce-checkout .diakon-participant:only-child {
  max-width: 37.5rem;
}
.site-saatio.woocommerce-checkout .diakon-participant h4 {
  margin: 0 0 var(--form-group-gap);
  font-size: var(--wp--preset--font-size--body);
  font-weight: 700;
  line-height: 1.3;
}
.site-saatio.woocommerce-checkout .diakon-participants + .woocommerce-terms-and-conditions-wrapper {
  margin-top: var(--form-section-gap);
}
.site-saatio.woocommerce-checkout {
  /*
  * From lg: billing on the left beside the order and payment, and the
  * participants across the full width under both, ending in the button.
  * The page's content column is 1000px; this takes the wide width. The
  * billing card spans the right column's rows, the last of which (1fr)
  * takes whatever height it has beyond them.
  *
  * Every part has its row set rather than left to auto-placement: a failed
  * submit puts WooCommerce's notices at the top of the form, and placed
  * automatically they took the right column's first row and pushed the
  * order below the participants. They get a row of their own across both
  * columns, empty until then. Rows: notices, (the order heading, which is
  * now inside the order card and so empty), gift cards, order, the rest of
  * billing's height, participants.
  */
}
@media screen and (min-width: 1024px) {
  .site-saatio.woocommerce-checkout .wp-block-post-content > .woocommerce {
    max-width: none;
  }
  .site-saatio.woocommerce-checkout form.checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: repeat(4, auto) 1fr auto;
    -moz-column-gap: var(--wp--preset--spacing--3-xl);
         column-gap: var(--wp--preset--spacing--3-xl);
    align-items: start;
  }
  .site-saatio.woocommerce-checkout form.checkout > * {
    grid-column: 2;
  }
  .site-saatio.woocommerce-checkout form.checkout > .woocommerce-NoticeGroup {
    grid-row: 1;
    grid-column: 1/-1;
  }
  .site-saatio.woocommerce-checkout form.checkout > .gift-certificate {
    grid-row: 3;
  }
  .site-saatio.woocommerce-checkout form.checkout > #order_review {
    grid-row: 4;
    margin-bottom: var(--form-section-gap);
  }
  .site-saatio.woocommerce-checkout form.checkout > .blockUI {
    grid-row: 1/-1;
    grid-column: 1/-1;
  }
  .site-saatio.woocommerce-checkout #customer_details .col-1 {
    grid-row: 2/6;
    grid-column: 1;
  }
  .site-saatio.woocommerce-checkout #customer_details .col-2 {
    grid-row: 6;
    grid-column: 1/-1;
    margin-bottom: 0;
  }
}
.site-saatio.woocommerce-checkout .gift-certificate.sc_info_box {
  margin-bottom: var(--form-section-gap);
  padding: var(--wp--preset--spacing--xl) !important;
  border: 0;
  border-radius: var(--wp--preset--border-radius--m);
  background-color: var(--wp--preset--color--white);
  box-shadow: 0 0.25rem 0.9375rem 0 rgba(0, 0, 0, 0.2);
  font-size: var(--wp--preset--font-size--body-small);
}
.site-saatio.woocommerce-checkout .gift-certificate.sc_info_box h3 {
  margin: 0 0 var(--form-group-gap);
  font-size: var(--wp--preset--font-size--h-4);
  font-weight: 700;
}
.site-saatio.woocommerce-checkout .gift-certificate.sc_info_box .show_hide_list,
.site-saatio.woocommerce-checkout .gift-certificate.sc_info_box .single_multi_list {
  margin: var(--wp--preset--spacing--xs) 0 0;
  padding: 0;
}
.site-saatio.woocommerce-checkout .gift-certificate.sc_info_box .show_hide_list li,
.site-saatio.woocommerce-checkout .gift-certificate.sc_info_box .single_multi_list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wp--preset--spacing--xs);
  margin: 0 0 var(--wp--preset--spacing--xs);
}
.site-saatio.woocommerce-checkout .gift-certificate.sc_info_box .show_hide_list label,
.site-saatio.woocommerce-checkout .gift-certificate.sc_info_box .single_multi_list label {
  display: inline;
  margin: 0;
}
.site-saatio.woocommerce-checkout .gift-certificate.sc_info_box .single_multi_list {
  flex-basis: 100%;
  padding-left: var(--wp--preset--spacing--xl);
}
.site-saatio.woocommerce-checkout #payment .place-order {
  display: none;
}
/* ----------------------------------------------------------------------
 * Site 5's cart, like its checkout: the lines on the left, the totals
 * beside them on the right (asked 2026-10-03). Stacked below.
 *
 * From xl rather than lg: the line table has six columns and a name box under
 * each course, and at two thirds of a 1024px page it was too tight to read.
 *
 * WooCommerce's own cell padding (.woocommerce table.shop_table td, 9px
 * 12px) outranks the shared table rule above, so a line with a participant
 * name box under it read as one cramped block. The cells are opened up here,
 * and the name box set apart from the product it belongs to.
 * ------------------------------------------------------------------- */
@media screen and (min-width: 1280px) {
  .site-saatio.woocommerce-cart .wp-block-post-content > .woocommerce {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    -moz-column-gap: var(--wp--preset--spacing--3-xl);
         column-gap: var(--wp--preset--spacing--3-xl);
    align-items: start;
    max-width: none;
  }
  .site-saatio.woocommerce-cart .wp-block-post-content > .woocommerce > .woocommerce-notices-wrapper {
    grid-column: 1/-1;
  }
  .site-saatio.woocommerce-cart .cart-collaterals {
    margin-top: 0;
  }
  .site-saatio.woocommerce-cart .cart_totals {
    position: sticky;
    top: var(--wp--preset--spacing--xl);
  }
}
.site-saatio.woocommerce-cart table.shop_table :is(th, td) {
  padding: 1rem;
}
.site-saatio.woocommerce-cart table.shop_table.cart td {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  line-height: 1.5;
}
.site-saatio.woocommerce-cart table.shop_table.cart td.actions {
  padding-top: var(--form-gap);
  padding-bottom: var(--form-gap);
}
.site-saatio.woocommerce-cart .diakon-invitee {
  margin: 1rem 0 0;
}
.site-saatio.woocommerce-cart .diakon-invitee label {
  display: block;
  margin-bottom: var(--form-choice-gap);
  font-size: var(--wp--preset--font-size--body-small);
  font-weight: 600;
}
.site-saatio.woocommerce-cart .diakon-invitee input {
  width: 100%;
  min-height: var(--form-control-height);
  padding: var(--form-control-padding);
  border: var(--form-border);
  border-radius: var(--form-radius);
  font-size: var(--form-font-size);
}
/*
 * The order list (Oma tili › Tilaukset), on both stores (asked 2026-10-04).
 *
 * Its text at a size that reads: the column labels were 12px, and so was the
 * order number, which WooCommerce prints in a <th> and so took the labels'
 * size rather than the cells'.
 *
 * Its actions -- "Katso", "Lasku 10000093", "Maksa" -- as plain links side by
 * side, not the store's pill buttons stacked one under another, which made a
 * row with two of them 137px tall. Against woocommerce-blocktheme.css's
 *
 *   .woocommerce-account .woocommerce-orders-table__cell
 *     .woocommerce-orders-table__cell-order-actions a
 *     { display:block; margin-bottom:1em; text-align:center }   (0,3,1)
 *
 * and the pill (.woocommerce-account .button, 0,2,0) and its hover. At the end
 * of the file, after the link rules it outranks.
 */
.woocommerce-account .woocommerce-orders-table thead th {
  font-size: var(--wp--preset--font-size--tiny);
}
.woocommerce-account .woocommerce-orders-table tbody th {
  font-size: inherit;
  font-weight: 600;
}
.woocommerce-account .woocommerce-orders-table .diakon-order-course {
  display: block;
  color: var(--wp--preset--color--dark-grey);
  font-size: var(--wp--preset--font-size--tiny);
  font-weight: 500;
}
.woocommerce-account .woocommerce-orders-table .woocommerce-orders-table__cell-order-actions {
  white-space: nowrap;
}
/*
 * Paragraph spacing on WooCommerce's own screens (asked 2026-10-04): the
 * account dashboard's "Hei ..." and the text under it, a single order's
 * opening line, the cart and checkout's notes, the lost-password page. The
 * theme's reset zeroes every paragraph's margins and leaves the spacing to
 * the block layout's gap, but these screens are WooCommerce's plain HTML
 * inside one div.woocommerce in the post content, where no gap reaches, so
 * their paragraphs sat flush against whatever came next.
 *
 * Every selector in :where(), so this is the reset's weight (0,0,1) and,
 * coming later, wins only over it: form rows, notices and every other
 * paragraph the theme styles keep their own margins. Nor inside an address,
 * whose phone and email lines are paragraphs too. Not on the body's
 * woocommerce class, which a product page's blocks also sit under.
 */
:where(.wp-block-post-content > .woocommerce) p:where(:not(.form-row, :last-child, address p)) {
  margin-bottom: var(--wp--preset--spacing--md);
}
/*
 * A single order's page opens with a line -- "#52000 – Love Track 2026
 * Helsinki tilaus on tehty 03.10.2026 ..." -- whose paragraph margins the
 * theme zeroes, so "Tilauksen tiedot" sat right under it (asked 2026-10-04).
 */
.woocommerce-view-order .woocommerce-MyAccount-content > p {
  margin-bottom: var(--wp--preset--spacing--2-xl);
}
/*
 * On a phone the table stacks, one cell per line under its column's name --
 * and the order cell vanished. WooCommerce prints it as the row's <th>, and
 * woocommerce-smallscreen.css hides every <th> in a table body:
 *
 *   .woocommerce table.shop_table_responsive tbody th { display:none } (0,2,3)
 *
 * meant for the column headings, which it moves into each cell's label. Here
 * it is the order itself, so it stays, as the heading of its stacked block,
 * and each order is set apart from the next. From that sheet's own
 * breakpoint, which no theme breakpoint matches.
 */
@media screen and (max-width: 768px) {
  .woocommerce-account table.woocommerce-orders-table tbody th {
    display: block;
    padding-top: var(--wp--preset--spacing--md);
    border-bottom: 0;
    text-align: left;
  }
  .woocommerce-account table.woocommerce-orders-table tbody tr {
    border-bottom: 0.0625rem solid var(--wp--preset--color--grey);
  }
}
.woocommerce-account .woocommerce-orders-table__cell.woocommerce-orders-table__cell-order-actions a.button {
  display: inline;
  min-height: 0;
  margin: 0 var(--wp--preset--spacing--md) 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--wp--preset--color--primary);
  font-size: inherit;
  font-weight: 600;
  text-align: left;
  text-decoration: underline;
}
.woocommerce-account .woocommerce-orders-table__cell.woocommerce-orders-table__cell-order-actions a.button:last-child {
  margin-right: 0;
}
.woocommerce-account .woocommerce-orders-table__cell.woocommerce-orders-table__cell-order-actions a.button:hover {
  border: 0;
  background: none;
  color: var(--wp--preset--color--primary);
  text-decoration: none;
}
.woocommerce-account .woocommerce-orders-table__cell.woocommerce-orders-table__cell-order-actions a.button::after {
  content: none;
}
/* ----------------------------------------------------------------------
 * The cart's stacked rows, from woocommerce-smallscreen.css's own
 * breakpoint (max-width: 768px, which no theme breakpoint matches) so this
 * switches exactly when the table does (asked 2026-10-03).
 *
 * The coupon row: the field and its button one under the other at full
 * width, not the sheet's 48% each --
 *
 *   .woocommerce-page table.cart td.actions .coupon .button { width: 48% }
 *                                                          (0,5,1)
 *
 * -- and without the clearfix ::before/::after it gives .coupon, which in
 * the flex row are two more items and two more gaps.
 *
 * The product cell: its "Tuote:" label on a line of its own above the
 * product and the name box, left-aligned like them, instead of floated
 * beside them in a cell the sheet right-aligns with !important.
 * ------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  .woocommerce-cart .woocommerce table.cart td.actions .coupon::before, .woocommerce-cart .woocommerce table.cart td.actions .coupon::after {
    display: none;
  }
  .woocommerce-cart .woocommerce table.cart td.actions .coupon .input-text,
  .woocommerce-cart .woocommerce table.cart td.actions .coupon .button {
    flex: 1 1 100%;
    width: 100%;
  }
  .woocommerce-cart .woocommerce table.cart td.actions .coupon .button {
    justify-content: center;
  }
  .woocommerce-cart .woocommerce table.shop_table_responsive tr td.product-name {
    text-align: left !important;
  }
  .woocommerce-cart .woocommerce table.shop_table_responsive tr td.product-name::before {
    display: block;
    float: none;
    margin-bottom: var(--wp--preset--spacing--xs);
  }
}
/* ----------------------------------------------------------------------
 * A list card's places line (diakonsaatio-store's ListCard, asked
 * 2026-10-04). Every card ends the same: price, places, one action -- the
 * add-to-cart button, or on a full card the waitlist's arrow button. (It was
 * a small text link for a while; with the places line saying "Paikat täynnä"
 * the button came back, 2026-10-04.)
 * ------------------------------------------------------------------- */
.diakon-places {
  margin: 0;
  color: var(--wp--preset--color--dark-grey);
  font-size: var(--wp--preset--font-size--tiny);
  line-height: 1.3;
}
.diakon-places--full {
  color: var(--diakon-store-accent);
  font-weight: 600;
}
/*
 * The waitlist form's fields: what is typed, and the country code chosen,
 * in black at 500 (asked 2026-10-04) instead of the plugin's grey #777 at
 * 400. The plugin's inline rule is .xoo-aff-group input[type=email] and its
 * siblings, (0,2,1); this is (0,3,0). The country code is select2's, whose
 * own rule is (0,3,0) and loads later, so it is named through its selection
 * box, (0,4,0). Placeholders keep their own, lighter rule, so an empty field
 * still reads as one.
 */
.xoo-wl-main .xoo-aff-group :is(input, select, textarea),
.xoo-wl-main .xoo-aff-group .select2-selection--single .select2-selection__rendered {
  color: var(--wp--preset--color--black);
  font-weight: 500;
}
/*
 * The product page's add-to-cart form flush with the text above it (asked
 * 2026-10-04). WooCommerce's block sheet pads every child after the first --
 * :where(.wp-block-woocommerce-add-to-cart-form > * + *) { padding: 0 4px }
 * -- which put the form 4px in; and a product sold one at a time keeps a
 * quantity box holding only a hidden input, an empty first grid column that
 * pushed the button 4px further.
 */
.wp-block-woocommerce-add-to-cart-form form.cart {
  padding-inline: 0;
}
.wp-block-woocommerce-add-to-cart-form form.cart .quantity:not(:has(input:not([type=hidden]))) {
  display: none;
}
/* The category line under it, "Osasto: ...", quieter than the content. */
.diakon-product-category {
  margin: 0;
  color: var(--wp--preset--color--dark-grey);
}
.diakon-product-category a {
  color: var(--wp--preset--color--primary);
}
/*
 * The order confirmation's closing note -- the payment method's instructions,
 * "Maksu toimituksen yhteydessä." -- as WooCommerce's green success notice
 * (.wc-block-components-notice-banner.is-success, whose colours these are),
 * rather than a bare paragraph.
 */
.wc-block-order-confirmation-additional-information {
  padding: 1rem;
  border: 0.0625rem solid #4ab866;
  border-radius: 0.25rem;
  background-color: #f4fff7;
  color: #2f2f2f;
  font-size: var(--wp--preset--font-size--body-small);
  line-height: 1.5;
}
.wc-block-order-confirmation-additional-information > :first-child {
  margin-top: 0;
}
.wc-block-order-confirmation-additional-information > :last-child {
  margin-bottom: 0;
}
/* ----------------------------------------------------------------------
 * YITH gift cards' "Onko sinulla lahjakortti?" (diakon-store's cart and
 * checkout)
 *
 * YITH draws it as a white card with a shadow and a 10px black stripe down
 * its right side, nothing like the coupon prompt above it on the checkout.
 * Here it is that prompt: the same thin grey frame and small type, its icon
 * in line with the text (YITH floats it inline). The form it opens is a
 * panel like the coupon form's.
 * ------------------------------------------------------------------- */
.woocommerce .ywgc_have_code {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  margin: 0 0 var(--form-gap);
  padding: 0.625rem 1rem;
  border: 0.125rem solid var(--wp--preset--color--grey);
  border-radius: var(--form-radius);
  background-color: var(--wp--preset--color--white);
  box-shadow: none;
  color: var(--wp--preset--color--black);
  font-size: var(--wp--preset--font-size--tiny);
  line-height: 1.25;
}
.woocommerce .ywgc_have_code .ywgc_woocommerce_message_icon {
  width: 1rem;
  height: auto;
  margin: 0 !important;
  float: none !important;
}
.woocommerce .ywgc_have_code .ywgc-show-giftcard {
  color: var(--wp--preset--color--primary);
}
.woocommerce .ywgc_enter_code {
  margin-bottom: var(--form-gap);
  padding: var(--wp--preset--spacing--md);
  border-radius: var(--form-radius);
  background-color: var(--wp--preset--color--secondary);
  /*
   * Laid out as the coupon form above: YITH floats the field and the
   * button as WooCommerce does, with the same row margins and the same
   * empty space under them. Its intro line ("Kirjoita lahjakortin
   * koodi") is hidden: the coupon form has none, and the field's own
   * placeholder says the same. The inner div is
   * YITH's own (position: relative, for the dimming overlay it adds
   * when the cart is under its minimum).
   */
}
.woocommerce .ywgc_enter_code > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--form-gap);
}
.woocommerce .ywgc_enter_code > div > p:not(.form-row) {
  display: none;
}
.woocommerce .ywgc_enter_code > div .form-row {
  float: none;
  width: auto;
  margin: 0;
}
.woocommerce .ywgc_enter_code > div .form-row-first {
  flex: 1 1 12rem;
}
.woocommerce .ywgc_enter_code > div .form-row-last {
  flex: 0 0 auto;
}
.woocommerce .ywgc_enter_code > div .clear {
  display: none;
}
/* ----------------------------------------------------------------------
 * The pickup under an order (diakon-store Pickup\OrderPickup): on the
 * thank-you page and in Oma tilini. Its <dl> was the browser's -- each value
 * on its own line, indented 40px. A box like the billing address below it,
 * each label beside its value; stacked on a phone.
 * ------------------------------------------------------------------- */
.diakon-store-pickup {
  margin-bottom: var(--wp--preset--spacing--lg);
}
.diakon-store-pickup dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.25rem var(--wp--preset--spacing--md);
  margin: 0;
  padding: 0.375rem 0.75rem;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0.3125rem;
}
.diakon-store-pickup dt {
  font-weight: 600;
}
.diakon-store-pickup dd {
  margin: 0;
}
@media screen and (max-width: 599.98px) {
  .diakon-store-pickup dl {
    grid-template-columns: 1fr;
    row-gap: 0;
  }
  .diakon-store-pickup dd + dt {
    margin-top: 0.5rem;
  }
}
/* ----------------------------------------------------------------------
 * A product's choices (diakon-store's variable products: Henkilömäärä,
 * Ruokavalio)
 *
 * WooCommerce's table of them came out at 13px, its selects narrower than
 * their labels and each a different width. Each choice is a label above a
 * select now, the select in the store's form control -- height, border,
 * radius, chevron -- and "Poista" (reset) beside the last one. body and the
 * form's own classes outrank WooCommerce's .woocommerce div.product form.cart
 * .variations rules.
 * ------------------------------------------------------------------- */
/* stylelint-disable no-descending-specificity -- benign: the datepicker's
 * and the gift-certificate list's th, td, li and a are on other pages. */
body.single-product form.variations_form table.variations {
  width: 100%;
  margin: 0 0 var(--wp--preset--spacing--md);
  border: 0;
  border-collapse: collapse;
}
body.single-product form.variations_form table.variations tr {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
body.single-product form.variations_form table.variations th,
body.single-product form.variations_form table.variations td {
  display: block;
  padding: 0;
  border: 0;
  line-height: 1.3;
  text-align: left;
}
body.single-product form.variations_form table.variations th.label label {
  margin: 0;
  font-size: var(--wp--preset--font-size--body);
  font-weight: 700;
}
body.single-product form.variations_form table.variations td.value {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
}
body.single-product form.variations_form table.variations select {
  flex: none;
  width: min(100%, 20rem);
  min-height: 2.75rem;
  margin: 0;
  padding: 0.5rem 2.5rem 0.5rem 1rem;
  border: 0.0625rem solid var(--wp--preset--color--grey);
  border-radius: var(--wp--preset--border-radius--xs);
  background-color: var(--wp--preset--color--white);
  background-image: url("data:image/svg+xml,%3Csvg width=%2711.5%27 height=%276.5%27 viewBox=%270 0 11.5 6.5%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cg transform=%27translate%280 6.5%29 rotate%28-90%29%27%3E%3Cpath d=%27M5.75 0.75L0.75 5.75L5.75 10.75%27 stroke=%27%238C1B64%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 0.71875rem 0.40625rem;
  color: var(--wp--preset--color--black);
  font-family: inherit;
  font-size: var(--wp--preset--font-size--body);
  line-height: 1.35;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
body.single-product form.variations_form table.variations .reset_variations {
  color: var(--wp--preset--color--primary);
  font-size: var(--wp--preset--font-size--tiny);
}
body.single-product form.variations_form .single_variation_wrap .woocommerce-variation {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: var(--wp--preset--spacing--md);
}
body.single-product form.variations_form .single_variation_wrap .woocommerce-variation p {
  margin: 0;
}
body.single-product form.variations_form .single_variation_wrap .woocommerce-variation:empty,
body.single-product form.variations_form .single_variation_wrap .woocommerce-variation > :empty {
  display: none;
}
body.single-product form.variations_form .single_variation_wrap .woocommerce-variation-add-to-cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}
/* ----------------------------------------------------------------------
 * A product's tabs (Kuvaus, Elintarvikkeiden nouto, Peruutusehto, Tilaus- ja
 * toimitusehdot)
 *
 * WooCommerce's are grey folder tabs with drawn corners, the only thing of
 * their kind on the site. Here each is a tab in the site's secondary colour,
 * rounded at the top, over a line in its primary colour -- and the current
 * one is filled with the primary colour, so it reads as joined to the line
 * and the text under it. (0,4,4) against WooCommerce's .woocommerce
 * div.product .woocommerce-tabs ul.tabs li, (0,4,3).
 * ------------------------------------------------------------------- */
body.single-product div.product .woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0 0 var(--wp--preset--spacing--lg);
  padding: 0;
  overflow: visible;
  border-bottom: 0.125rem solid var(--wp--preset--color--primary);
}
body.single-product div.product .woocommerce-tabs ul.tabs::before, body.single-product div.product .woocommerce-tabs ul.tabs::after {
  display: none;
}
body.single-product div.product .woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
body.single-product div.product .woocommerce-tabs ul.tabs li::before, body.single-product div.product .woocommerce-tabs ul.tabs li::after {
  display: none;
}
body.single-product div.product .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 0.625rem 1.125rem;
  border-top-left-radius: var(--wp--preset--border-radius--xs);
  border-top-right-radius: var(--wp--preset--border-radius--xs);
  background-color: var(--wp--preset--color--secondary);
  color: var(--wp--preset--color--black);
  font-size: var(--wp--preset--font-size--body-small);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}
body.single-product div.product .woocommerce-tabs ul.tabs li a:hover {
  color: var(--wp--preset--color--primary);
}
body.single-product div.product .woocommerce-tabs ul.tabs li.active a {
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
}
body.single-product div.product .woocommerce-tabs .panel {
  max-width: 56.25rem;
  margin: 0;
  padding: 0;
}
body.single-product div.product .woocommerce-tabs .panel > * {
  margin-top: 0;
  margin-bottom: 0;
}
body.single-product div.product .woocommerce-tabs .panel > * + * {
  margin-top: var(--wp--preset--spacing--md);
}
body.single-product div.product .woocommerce-tabs .panel > :is(h2, h3, h4) + * {
  margin-top: var(--wp--preset--spacing--xs);
}
body.single-product div.product .woocommerce-tabs .panel ul,
body.single-product div.product .woocommerce-tabs .panel ol {
  padding-left: var(--wp--preset--spacing--xl);
}
body.single-product div.product .woocommerce-tabs .panel li + li {
  margin-top: var(--wp--preset--spacing--xs);
}
/* stylelint-enable no-descending-specificity */
/* ----------------------------------------------------------------------
 * "Saatat myös pitää…" -- the up-sells under a product (38 of diakon-store's
 * products have them)
 *
 * In the band "Tutustu myös" has on the foundation store, edge to edge in the
 * site's secondary colour, with the heading as heavy and centred. The cards
 * are the shop listing's: centred, a 4:3 picture, the name, the price, and
 * the button at the foot of the card so the buttons in a row line up.
 * The stars are left out, as the listing has none. WooCommerce's floats,
 * widths and clearfix are undone as for "Tutustu myös" above.
 * ------------------------------------------------------------------- */
.single-product section.up-sells.products {
  margin-top: var(--wp--preset--spacing--4-xl);
  padding-top: var(--wp--preset--spacing--4-xl);
  padding-bottom: var(--wp--preset--spacing--4-xl);
  background-color: var(--wp--preset--color--secondary);
  box-shadow: 0 0 0 100vmax var(--wp--preset--color--secondary);
  clip-path: inset(0 -100vmax);
}
.single-product main:has(section.up-sells.products) {
  padding-bottom: 0 !important;
}
.single-product section.up-sells > h2 {
  margin-bottom: var(--wp--preset--spacing--2-xl);
  font-size: var(--wp--preset--font-size--h-3);
  font-weight: 800;
  text-align: center;
}
body.single-product section.up-sells ul.products {
  display: grid;
  --upsell-gap: var(--wp--preset--spacing--3-xl);
  --upsell-quarter: calc((100% - 3 * var(--upsell-gap)) / 4);
  --upsell-min: min(100%, 15rem);
  --upsell-max: min(18.75rem, var(--upsell-quarter));
  --upsell-column: minmax(var(--upsell-min), var(--upsell-max));
  grid-template-columns: repeat(auto-fit, var(--upsell-column));
  justify-content: center;
  gap: var(--wp--preset--spacing--4-xl) var(--upsell-gap);
  margin: 0;
  padding: 0;
}
body.single-product section.up-sells ul.products::before, body.single-product section.up-sells ul.products::after {
  display: none;
}
body.single-product section.up-sells ul.products[class] li.product {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--wp--preset--spacing--xs);
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
  text-align: center;
}
body.single-product section.up-sells ul.products li.product .woocommerce-loop-product__link {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--xs);
  width: 100%;
  margin-bottom: var(--wp--preset--spacing--xs);
  text-decoration: none;
}
body.single-product section.up-sells ul.products li.product a img {
  width: 100%;
  height: auto;
  margin: 0 0 var(--wp--preset--spacing--md);
  aspect-ratio: 4/3;
  -o-object-fit: cover;
     object-fit: cover;
}
body.single-product section.up-sells ul.products li.product .woocommerce-loop-product__title {
  margin: 0;
  padding: 0;
  color: var(--wp--preset--color--primary);
  font-size: var(--wp--preset--font-size--body);
  font-weight: 700;
  line-height: 1.3;
}
body.single-product section.up-sells ul.products li.product .star-rating {
  display: none;
}
body.single-product section.up-sells ul.products li.product .price {
  display: inline-block;
  margin: 0;
  padding: 0.25rem 0.875rem;
  border-radius: 0.375rem;
  background-color: var(--wp--preset--color--secondary);
  color: var(--wp--preset--color--black);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  align-self: center;
  background-color: var(--wp--preset--color--white);
}
body.single-product section.up-sells ul.products li.product .button {
  margin: auto 0 0;
}
/* ----------------------------------------------------------------------
 * The mini-cart drawer (the cart in the header and the breadcrumb row)
 *
 * Down to 320px wide (asked 2026-10-04). WooCommerce's title is 32px and,
 * with the item count, wrapped under the close button; its rows are a grid
 * of fixed 80px / 132px / 11px / 72px columns, and with the quantity stepper
 * and bin needing 159px they ran 43px past the drawer, cutting off the line
 * totals. So: the title at the h-4 size and clear of the close button; on a
 * phone, the picture at 64px beside the rest, and the line total on a line of
 * its own under the stepper, right-aligned. The footer's buttons are the
 * site's -- round, in its colour -- rather than WooCommerce's black and grey.
 * The table and row elements in the selectors outrank WooCommerce's own
 * placement of the cells.
 * ------------------------------------------------------------------- */
.wc-block-mini-cart__drawer .wc-block-mini-cart__title {
  flex-wrap: wrap;
  margin-right: 2.5rem;
  padding-bottom: var(--wp--preset--spacing--md);
  font-size: var(--wp--preset--font-size--h-4);
  line-height: 1.2;
}
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions .wc-block-components-button {
  border-radius: 5.625rem;
}
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions .wc-block-mini-cart__footer-checkout {
  border-color: var(--wp--preset--color--primary);
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
}
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions .wc-block-mini-cart__footer-cart {
  border-color: var(--wp--preset--color--primary);
  background-color: transparent;
  color: var(--wp--preset--color--primary);
}
@media screen and (max-width: 479.98px) {
  .wc-block-mini-cart__drawer table.wc-block-mini-cart-items tr.wc-block-cart-items__row {
    grid-template-columns: 4rem minmax(0, 1fr);
    -moz-column-gap: 0.75rem;
         column-gap: 0.75rem;
  }
  .wc-block-mini-cart__drawer table.wc-block-mini-cart-items tr.wc-block-cart-items__row td.wc-block-cart-item__image {
    grid-row: 1/span 2;
    width: auto;
    padding: 0;
  }
  .wc-block-mini-cart__drawer table.wc-block-mini-cart-items tr.wc-block-cart-items__row td.wc-block-cart-item__image img {
    width: 100%;
  }
  .wc-block-mini-cart__drawer table.wc-block-mini-cart-items tr.wc-block-cart-items__row td.wc-block-cart-item__product {
    grid-row: 1;
    grid-column: 2;
    min-width: 0;
  }
  .wc-block-mini-cart__drawer table.wc-block-mini-cart-items tr.wc-block-cart-items__row td.wc-block-cart-item__total {
    grid-row: 2;
    grid-column: 2;
    justify-content: flex-end;
    padding: 0.5rem 0 0;
  }
}
/* ----------------------------------------------------------------------
 * The product picture's thumbnails
 *
 * WooCommerce floats them at 25% each, edge to edge and flush under the
 * picture. A row of four with a gap between them and under the picture,
 * each rounded like the site's other images. (0,4,4) against WooCommerce's
 * .woocommerce div.product div.images .flex-control-thumbs li, (0,4,3).
 * ------------------------------------------------------------------- */
/* stylelint-disable no-descending-specificity -- benign: the li and img
 * rules above it are other lists' (the checkout's, the up-sells'). */
body.single-product div.product div.images .flex-control-thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0.5rem 0 0;
  padding: 0;
}
body.single-product div.product div.images .flex-control-thumbs::before, body.single-product div.product div.images .flex-control-thumbs::after {
  display: none;
}
body.single-product div.product div.images .flex-control-thumbs li {
  width: auto;
  margin: 0;
  float: none;
}
body.single-product div.product div.images .flex-control-thumbs li img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--wp--preset--border-radius--xs);
}
/* ----------------------------------------------------------------------
 * The gift card's own form (diakon-store's Sähköinen lahjakortti, YITH)
 *
 * YITH's amounts were 18px boxes with 1px of padding, edge to edge; its
 * fields sat beside centred labels at whatever width the browser gave them.
 * The amounts are the site's round buttons now -- outlined, the chosen one
 * filled -- with "Kirjoita summa" as one more of them, and every field is the
 * store's form control under a left-aligned label.
 *
 * The amount comes first, without its "Aseta summa" heading, and the picture
 * after it (asked 2026-10-04). YITH prints the picture first and has no
 * setting for the order, so the form is a column and the amounts are moved
 * to its top.
 * ------------------------------------------------------------------- */
body.single-product form.gift-cards_form {
  display: flex !important;
  flex-direction: column;
}
body.single-product form.gift-cards_form > .gift-cards-list {
  order: -1;
  margin-top: var(--wp--preset--spacing--md);
  margin-bottom: var(--wp--preset--spacing--md);
}
body.single-product form.gift-cards_form .ywgc_select_amount_title {
  display: none;
}
body.single-product form.gift-cards_form > h3 {
  margin-top: 0.5em;
}
body.single-product form.gift-cards_form .ywgc-choose-design-preview {
  margin-bottom: 0;
}
body.single-product form.gift-cards_form h5 {
  margin: var(--wp--preset--spacing--lg) 0 var(--wp--preset--spacing--xs);
  font-size: var(--wp--preset--font-size--body);
  font-weight: 700;
}
body.single-product form.gift-cards_form .gift-cards-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
body.single-product form.gift-cards_form .gift-cards-list .ywgc-amount-buttons {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  margin: 0;
  padding: 0.5rem 1.125rem;
  border: 0.125rem solid var(--wp--preset--color--primary);
  border-radius: 5.625rem;
  background-color: var(--wp--preset--color--white);
  color: var(--wp--preset--color--primary);
  font-size: var(--wp--preset--font-size--body-small);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}
body.single-product form.gift-cards_form .gift-cards-list .ywgc-amount-buttons.selected_button {
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
}
body.single-product form.gift-cards_form .gift-cards-list .ywgc-manual-amount-container {
  gap: 0.25rem;
  padding: 0 1rem;
  cursor: text;
}
body.single-product form.gift-cards_form .gift-cards-list input.ywgc-manual-amount {
  width: 7.5rem;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--wp--preset--color--black);
  font-size: var(--wp--preset--font-size--body-small);
}
body.single-product form.gift-cards_form .gift-cards-list .ywgc-manual-currency-symbol {
  padding: 0;
  background: none;
  color: var(--wp--preset--color--primary);
}
body.single-product form.gift-cards_form .step-content label {
  display: block;
  width: auto;
  margin: 0 0 0.375rem;
  float: none;
  font-size: var(--wp--preset--font-size--body-small);
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
}
body.single-product form.gift-cards_form .step-content input[type=text],
body.single-product form.gift-cards_form .step-content input[type=email],
body.single-product form.gift-cards_form .step-content textarea {
  display: block;
  width: 100%;
  max-width: 30rem;
  min-height: 2.75rem;
  margin: 0;
  padding: 0.5rem 1rem;
  float: none;
  border: 0.0625rem solid var(--wp--preset--color--grey);
  border-radius: var(--wp--preset--border-radius--xs);
  background-color: var(--wp--preset--color--white);
  color: var(--wp--preset--color--black);
  font-family: inherit;
  font-size: var(--wp--preset--font-size--body);
}
body.single-product form.gift-cards_form .step-content textarea {
  min-height: 7.5rem;
}
body.single-product form.gift-cards_form .step-content .clearfix,
body.single-product form.gift-cards_form .step-content [class*=ywgc-] > div {
  margin-bottom: 1rem;
}
/* ----------------------------------------------------------------------
 * A product line on the order confirmation and in Oma tilini › Tilaukset
 *
 * Under the product's name WooCommerce and YITH print the gift card's code,
 * its recipient and its delivery, then the product's purchase note -- each a
 * bare <div>, all run together. A gap before each, the code's label quieter
 * than the code, and the note set apart as the note it is.
 * ------------------------------------------------------------------- */
.woocommerce-table__line-item .wc-block-order-confirmation-totals__product > div,
.woocommerce-table__line-item .wc-block-order-confirmation-totals__product > div > div,
.woocommerce-table__line-item .woocommerce-table__product-name > div,
.woocommerce-table__line-item .woocommerce-table__product-name > div > div {
  margin-top: 0.5rem;
}
.woocommerce-table__line-item .wc-block-order-confirmation-totals__product .ywgc-gift-code-label,
.woocommerce-table__line-item .woocommerce-table__product-name .ywgc-gift-code-label {
  color: var(--wp--preset--color--dark-grey);
}
.woocommerce-table__line-item .wc-block-order-confirmation-totals__product .ywgc-card-code,
.woocommerce-table__line-item .woocommerce-table__product-name .ywgc-card-code {
  font-weight: 700;
  letter-spacing: 0.02em;
}
.woocommerce-table__line-item .wc-block-order-confirmation-totals__product .product-purchase-note,
.woocommerce-table__line-item .woocommerce-table__product-name .product-purchase-note {
  margin-top: var(--wp--preset--spacing--md);
  padding-top: var(--wp--preset--spacing--xs);
  border-top: 0.0625rem solid var(--wp--preset--color--grey);
  font-size: var(--wp--preset--font-size--body-small);
  line-height: 1.45;
}
/* ----------------------------------------------------------------------
 * Oma tilini › Lahjakortit (YITH gift cards' account page)
 *
 * The customer's gift cards and their balances, and "Lisää uusi" to link a
 * card by its code. YITH drew the button grey beside the heading, kept 5em
 * of inline space above an empty list and its black icon, and opened a
 * popup of grey panels and grey buttons. Here the heading and the button
 * share a row, the button is the site's outlined one, the icon is in the
 * site's colour, and the popup's field and button are the store's.
 * ------------------------------------------------------------------- */
.gift-card-panel-title-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--md);
  margin-bottom: var(--wp--preset--spacing--lg);
}
.gift-card-panel-title-container .gift-card-panel-title {
  margin: 0;
}
.gift-card-panel-title-container + div {
  margin-top: var(--wp--preset--spacing--2-xl) !important;
}
.yith-add-new-gc-my-account-button,
.ywgc-link-gift-card-submit-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.5rem 1.375rem;
  border: 0.125rem solid var(--wp--preset--color--primary);
  border-radius: 5.625rem;
  background-color: var(--wp--preset--color--white);
  color: var(--wp--preset--color--primary);
  font-family: inherit;
  font-size: var(--wp--preset--font-size--body-small);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}
.yith-add-new-gc-my-account-button:hover,
.ywgc-link-gift-card-submit-button:hover {
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
}
.ywgc-empty-table-icon svg [stroke] {
  stroke: var(--wp--preset--color--primary);
}
.ywgc-empty-table-icon svg [fill="#333333"],
.ywgc-empty-table-icon svg [fill="#000000"] {
  fill: var(--wp--preset--color--primary);
}
.yith-ywgc-add-new-gift-card-modal-wrapper {
  width: min(27.5rem, 100vw - 2rem) !important;
  border-radius: var(--wp--preset--border-radius--s) !important;
}
.yith-ywgc-add-new-gift-card-modal-wrapper .yith-ywgc-add-new-gift-card-modal-wrapper-region {
  padding: 1.5rem !important;
}
.yith-ywgc-add-new-gift-card-modal-wrapper .yith-ywgc-add-new-gift-card-modal {
  width: 100% !important;
}
.yith-ywgc-add-new-gift-card-modal-content-wrapper {
  margin-top: 0 !important;
}
.yith-ywgc-add-new-gift-card-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  top: 1rem !important;
  right: 1rem !important;
  width: 2rem !important;
  height: 2rem !important;
  border-radius: 50%;
  cursor: pointer;
}
.yith-ywgc-add-new-gift-card-modal-close::after {
  color: var(--wp--preset--color--black);
  font-size: 1.75rem !important;
  line-height: 1 !important;
}
.yith-ywgc-add-new-gift-card-modal-close:hover {
  background-color: var(--wp--preset--color--secondary);
}
.yith-ywgc-add-new-gift-card-modal-inner {
  padding: 0 !important;
}
.yith-ywgc-add-new-gift-card-modal-inner .ywgc-add-new-gift-card-modal-title {
  margin: 0 2.5rem var(--wp--preset--spacing--md) 0;
  padding: 0;
  font-size: var(--wp--preset--font-size--h-4);
  line-height: 1.2;
  text-align: left;
}
.yith-ywgc-add-new-gift-card-modal-inner .ywgc-add-new-gift-card-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: var(--wp--preset--spacing--md);
  border-radius: var(--wp--preset--border-radius--xs);
  background-color: var(--wp--preset--color--secondary);
  text-align: left;
}
.yith-ywgc-add-new-gift-card-modal-inner .ywgc-add-new-gift-card-label {
  display: block;
  font-size: var(--wp--preset--font-size--body-small);
  font-weight: 600;
  text-align: left !important;
}
.yith-ywgc-add-new-gift-card-modal-inner input#ywgc-link-code {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  border: 0.0625rem solid var(--wp--preset--color--grey);
  border-radius: var(--wp--preset--border-radius--xs);
  background-color: var(--wp--preset--color--white);
  font-family: inherit;
  font-size: var(--wp--preset--font-size--body);
}
.yith-ywgc-add-new-gift-card-modal-inner .ywgc-link-gift-card-submit-button {
  width: 100%;
  border-color: var(--wp--preset--color--primary);
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
}
.yith-ywgc-add-new-gift-card-modal-inner .yith-add-new-gc-my-account-notice-message {
  margin-bottom: 0.25rem;
  padding: 0.5rem 0.75rem;
  border: 0.125rem solid #4ab866;
  border-radius: var(--wp--preset--border-radius--xs);
  background-color: var(--wp--preset--color--white);
  color: var(--wp--preset--color--black) !important;
  font-size: var(--wp--preset--font-size--tiny);
  font-weight: 600 !important;
}
.yith-ywgc-add-new-gift-card-modal-inner .yith-add-new-gc-my-account-notice-message.not_valid {
  border-color: var(--wp--preset--color--error-bright);
}
/* ----------------------------------------------------------------------
 * The cart and the checkout at the page's wide width (asked 2026-10-04), as
 * the templates' post-content already are. woocommerce-blocktheme.css caps
 * both at 1000px -- .woocommerce-cart main .woocommerce,
 * .woocommerce-checkout main .woocommerce { max-width: 1000px } -- which left
 * the cart narrower than its own heading.
 * ------------------------------------------------------------------- */
.woocommerce-cart main .woocommerce,
.woocommerce-checkout main .woocommerce {
  max-width: none;
}
/* ----------------------------------------------------------------------
 * Diakon's checkout in two columns from lg (asked 2026-10-04), as the
 * foundation store's is: the customer's card on the left -- billing, then
 * the pickup and the order notes under it rather than beside it, the column
 * being half as wide -- and the order on the right: its heading, the lines,
 * the totals, the payment and the button. Stacked, as before, below lg.
 *
 * Every part has its row set rather than left to auto-placement: a failed
 * submit puts WooCommerce's notices at the top of the form, and they get a
 * row across both columns, empty until then. WooCommerce's processing
 * overlay covers the whole grid, not the right column alone.
 * ------------------------------------------------------------------- */
@media screen and (min-width: 1024px) {
  .site-palvelut.woocommerce-checkout form.checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    -moz-column-gap: var(--wp--preset--spacing--3-xl);
         column-gap: var(--wp--preset--spacing--3-xl);
    align-items: start;
  }
  .site-palvelut.woocommerce-checkout form.checkout > * {
    grid-column: 2;
  }
  .site-palvelut.woocommerce-checkout form.checkout > .woocommerce-NoticeGroup {
    grid-row: 1;
    grid-column: 1/-1;
  }
  .site-palvelut.woocommerce-checkout form.checkout > #customer_details {
    grid-row: 2/4;
    grid-column: 1;
  }
  .site-palvelut.woocommerce-checkout form.checkout > #order_review {
    grid-row: 3;
  }
  .site-palvelut.woocommerce-checkout form.checkout > .blockUI {
    grid-row: 1/-1;
    grid-column: 1/-1;
  }
  .site-palvelut.woocommerce-checkout #customer_details .col-1,
  .site-palvelut.woocommerce-checkout #customer_details .col-2 {
    float: none;
    width: 100%;
  }
  .site-palvelut.woocommerce-checkout #customer_details .col-2 {
    margin-top: var(--form-section-gap);
  }
}
/* ----------------------------------------------------------------------
 * "Saadut kupongit" on the order's page (Smart Coupons): each coupon sits in
 * a <details> whose summary's disclosure marker showed as a stray "▸" above
 * the coupon (asked 2026-10-04) -- as in the emails, where
 * diakonsaatio-store's Email\Branding hides the same marker.
 * ------------------------------------------------------------------- */
.sc-coupons-list summary {
  display: block;
  list-style: none;
}
.sc-coupons-list summary::-webkit-details-marker {
  display: none;
}
/* stylelint-enable no-descending-specificity */
/*
 * The template's "Your order" heading, outside the order card. The card
 * prints its own as its first line (lib/woocommerce.php).
 */
.woocommerce-checkout #order_review_heading {
  display: none;
}
/*
 * "(sisältää 8,21 € alv 13,5 %)" after a total, on a line of its own wherever
 * WooCommerce prints it -- cart, checkout, order received, the account's
 * orders. Inline it ran on from the total and broke wherever the column
 * happened to end.
 */
.woocommerce .includes_tax {
  display: block;
}
.wp-site-blocks {
  position: relative;
  container-type: inline-size;
  container-name: contentwidth;
}

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