html {
  scroll-behavior: smooth;
  min-width: 290px;
  @media screen and (prefers-reduced-motion: reduce) {
    & {
      scroll-behavior: auto;
    }
  }
}

header {
  overflow: hidden;
  background-color: var(--wp--preset--color--light,#fff) !important;
  color: var(--wp--preset--color--dark);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 500 !important;
  & > .wp-block-group {
    padding-bottom: var(--wp--preset--spacing--50);
    & > * {
      margin-block-start: var(--wp--preset--spacing--30);
    }
  }
  & > div {
    padding: 0!important;
    & > div:nth-child(1) {
      font-size: min(3.4vw, var(--wp--preset--font-size--medium)) !important;
    }
    & > div:nth-child(2) {
      padding-bottom: min(1.5vw, var(--wp--preset--spacing--50));
      padding-right: min(1.5vw, var(--wp--style--root--padding-right));
      padding-left: min(1.5vw, var(--wp--style--root--padding-left));
      gap: min(1.5vw, var(--wp--style--block-gap)) !important;
      & > :nth-child(1) {
        flex-grow: 1;
        min-width: 30px;
      }
      & > :nth-child(2) {
        flex-grow: 4;
        min-width: 110px;
        & > a {
          font-size: min(2.7vw, var(--wp--preset--font-size--large)) !important;
        }
      }
      & > :nth-child(3) {
        gap: min(1vw, var(--wp--style--block-gap)) !important;
        min-width: 30px!important;
      }
      & > :nth-child(4) {
        flex-grow: 6;
        min-width: 170px!important;
        input[type="search"] {
          min-width: 100px!important;
          max-width: 130px!important;
        }
        div.wp-block-search__inside-wrapper {
          border: none!important;
          button {
            border: 1px solid #949494;
            border-radius: 15px;

            min-width: 30px!important;
            max-width: 50px!important;
            padding: 2px;
          }
        }
      }
      & > :nth-child(5),
      & > :nth-child(6) {
        flex-grow: 1;
        min-width: 40px!important;
      }
    }
  }
}
header,
footer {
  & .wp-block-navigation a,
  & .wp-block-site-title a {
    text-decoration: none;
    border-bottom: 1px solid transparent;
  }
  & .wp-block-navigation a:hover,
  & .wp-block-site-title a:hover,
  & .wp-block-navigation .current-menu-item a {
    border-bottom-color: #000;
  }
  & .wp-block-navigation .current-menu-item a:hover {
    border-bottom-color: transparent;
  }
  & .wp-block-site-title a:hover {
    color: var(--wp--preset--color--color-3);
  }
}
footer {
  background-color: var(--wp--preset--color--color-2) !important;
  color: var(--wp--preset--color--dark) !important;
  & > * {
    padding-top: var(--wp--preset--spacing--60);
    padding-bottom: var(--wp--preset--spacing--60);
  }
}

body {
  & .hverdags-produktkategorier > .wp-block-columns {
    gap: 15px;
  }
  & .wc-block-components-notice-banner > .wc-block-components-notice-banner__content .wc-forward {
    box-shadow: none;
    opacity: 1;
  }
  & :where(.wp-site-blocks) > * {
    margin-block-start: 0;
  }
  & .hverdagshelt {
    background-attachment: fixed;
    background-repeat: no-repeat;
    & > .wp-block-group {
      position: relative;
    }
    & > .wp-block-group:after,
    & > .wp-block-group:before {
      background: #fff;
      content: "";
      height: 4px;
      left: 50%;
      position: absolute;
      transform: translateX(-50%);
      width: 270px;
    }
    & > .wp-block-group:before {
      top: 60px;
    }
    & > .wp-block-group:after {
      bottom: 60px;
    }
    & .animate-bottom {
      position: relative;
      animation: animatebottom 0.5s;
    }
    /* Remove this hack once Apple adds support for `background-attachment: fixed;` to mobile devices. See: https://developer.apple.com/forums/thread/99883 */
    @supports (-webkit-overflow-scrolling: touch) {
      & {
        background-attachment: scroll!important;
      }
    }
  }
  & form#kontaktskjema {
    padding-right: 6px;
    margin: 20px;
    & textarea {
      width: 100%;
    }
    & :is(input,label,textarea) {
      display: block;
    }
    & :is(input,textarea) {
      border: 1px solid #000;
      border-radius: var(--wc-form-border-radius, 4px);
    }
    & input[type="submit"] {
      border-color: transparent;
      margin-top: 12px;
    }
    & p.error {
      border: 2px solid #d00;
      padding: 4px;
    }
    & p.success {
      border: 2px solid #0a0;
      padding: 4px;
    }
    & :user-invalid {
      background-color: #fcc;
    }
  }
}

@keyframes animatebottom {
  from {
    bottom: -100px;
    opacity: 0;
  }
  to {
    bottom: 0;
    opacity: 1;
  }
}

.end-gap {
  margin-block-end: var(--wp--style--block-gap) !important;
}
.has-xx-large-font-size {
  font-size: min(12vw, var(--wp--preset--font-size--xx-large)) !important;
}
.min-width-200 {
  min-width: 200px!important;
}
.max-width-400 {
  max-width: 400px!important;
}