:root {
    --bg-body: #ffffff;
    --bg-primary: #033D68;
    --bg-secondary: #7BAED5;
    --bg-tertiary: #f5f5f5;
   
    --primary-clr: #033D68;
    --secondary-clr: #7BAED5;
    --accent: #F1833B;

    --heading-font: 'DM Sans', sans-serif;
    --heading-clr: #000000;
    --heading-lineheight: 1.1;

    --text-font: 'DM Sans', sans-serif;
    --text-clr: #000000;
    --text-clr-secondary: #767676;
    --text-clr-invert: #ffffff;
    --text-lineheight: 1.3;
    
    --link-clr: var(--primary-clr);
    --link-clr-hover: var(--secondary-clr);

    --font-regular: 400;
    --font-semibold: 500;
    --font-bold: 700;

    --box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.05);
    --border-default: 0.5px solid #bbbbbb;

    --wd-container-header: 165rem;
    --wd-container-footer: 165rem;
    --wd-container-default: 128rem;
    --wd-container-xs: 62rem;
    --wd-container-s: 80rem;
    --wd-container-m: ;
    --wd-container-l: ;
    --wd-container-xl: ;
    --wd-container-full: none;

    --column-gap: 5rem;
    --m-column-gap: 3rem;
    --gap-default: 3rem;

    --section-padding: 15rem;
    --m-section-padding: 6rem;
    --side-padding: 5rem;
    --m-side-padding: 2rem;

    --topbar-height: 4rem;
    --info-popup-height: 3.5rem;
    --header-height: 7rem;
    --total-header-height: calc(var(--header-height));

    --header-height-scrolled: ;
    --m-header-height: 6.5rem;
    --header-lineheight: var(--header-height);

    --h1: clamp(4rem, 4vw, 7rem);
    --h2: clamp(3.5rem, 4vw, 4.4rem);
    --h3: clamp(2.8rem, 4vw, 3.2rem);
    --h4: clamp(1.8rem, 4vw, 2.0rem);
    --small-heading: clamp(1.8rem, 3vw, 2.0rem);;
    --paragraph-ingress: clamp(1.8rem, 3vw, 2.0rem);
    --paragraph: clamp(1.4rem, 3vw, 1.6rem);
    --paragraph-small: clamp(1.4rem, 2vw, 1.4rem);
    --paragraph-mini: clamp(1.2rem, 2vw, 1.2rem);
}

@media only screen and (max-width: 768px) {
    :root {
        --side-padding: var(--m-side-padding);
        --section-padding: var(--m-section-padding);
        --column-gap: var(--m-column-gap);
    }
}

@media only screen and (max-width: 510px) {
    :root {
        --total-header-height: var(--m-header-height);
        --header-height: var(--m-header-height);
    }
}

/* ==========================================================================
General 
========================================================================== */

*,
::after,
::before {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    border: 0;
    background-color: var(--bg-body);
    font-size: 62.5%;
    font-style: normal;
    line-height: var(--text-lineheight);
    font-family: var(--text-font);
    font-weight: var(--font-regular);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html.is-locked,
html.is-locked body {
    overflow-y: hidden !important;
}

button,
input,
optgroup,
select,
textarea,
input[type="checkbox"] {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    border: var(--border-default);
    padding: 1rem;
    margin-top: 0.5em;
    outline: none;
}

select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: var(--bg-body);
    border: var(--border-default);
    padding: 0.5rem 2em 0.5rem 0.5em;
    margin: 0 0 1rem 0;
    width: 100%;
    font-family: inherit;
    font-size: initial;
    cursor: pointer;
    line-height: inherit;
    border-radius: 0;
    background: rgba(255, 255, 255, 1) url('../images/chevron-down.svg') no-repeat 95% 50%;
}

/* Images 
========================================================================== */
img {
    max-width: 100%;
    height: auto;
}

figure,
.wp-block-image {
    margin: 0;
    line-height: 0;
}

.wp-block-image figcaption {
    margin-top: 1rem !important;
    font-size: var(--paragraph-small);
    text-align: center;
    line-height: normal;
}

/* Gutenberg gallery */
figure.wp-block-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: var(--gap-default) !important;
    margin-top: var(--gap-default) !important;
}

figure.wp-block-gallery figure.wp-block-image {
    height: 100%;
    min-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Cover / omslag */
.wp-block-cover-image, 
.wp-block-cover {
    padding: unset;
}

/* Error 404
========================================================================== */

.error404 main {
    height: calc(100vh - var(--total-header-height));
}

.error404 .qase-section {
    height: 100%;
    align-items: center;
    display: flex;
    padding: var(--section-padding) var(--side-padding) !important;
}

.error404 .qase-section * {
    text-align: center;
}

/* Others 
========================================================================== */

/* reCAPTCHA */
.grecaptcha-badge {
    visibility: hidden;
}


/* Settings for splide
========================================================================== */
.splide {
    position: relative !important;
    padding: 0 3rem;
    overflow-x: hidden;
    padding: 1rem 0 !important;
}

.splide__track {
    overflow: visible !important;
}

.splide__list :is(ul, ol) {
    padding: unset !important;
}

.splide__arrows {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    z-index: 99;
}

.splide__arrow--prev {
    left: -3rem !important; 
}

.splide__arrow--next {
    right: -3rem !important;
}

.splide__arrows .splide__arrow {
    background-color: #ffffff;
    width: 4rem;
    height: 4rem;
    transition: all 150ms linear;
    opacity: 1;
}

.splide__arrows .splide__arrow svg {
    width: 1rem;
    height: 1rem;
}

.splide .splide__pagination {
    position: relative !important;
    display: flex !important;
    bottom: -3rem;
    padding-bottom: 3rem;
}

.splide__pagination .splide__pagination__page {
    width: 0.7rem;
    height: 0.7rem;
    opacity: 1;
    background-color: #ffffff;
}

.splide__pagination .splide__pagination__page.is-active {
    transform: scale(1);
    background-color: #dadada;
}

/* Accordion
========================================================================== */

.accordion-heading * { pointer-events: none; }

.accordion-heading {
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: space-between;
    align-items: center;
    grid-gap: var(--gap-default);
    cursor: pointer;
    font-style: normal;
    line-height: var(--heading-lineheight);
}

.accordion-icon {
    background-color: var(--bg-tertiary);
    border-radius: 50rem;
    height: 4rem;
    width: 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.accordion-icon img {
    position: relative;
    transition: transform 150ms linear;
    transform: scale(1.3);
}

.accordion-heading.is-open .accordion-icon img {
    transform: scale(1.3) rotate(45deg);
}

.accordion-content {
    max-height: 0;
    transition: max-height 150ms linear;
    overflow: hidden;
    max-width: 100%;
}

.accordion-content-inner {
    padding: 2rem 0 0;
}

.accordion-content p {
    margin: unset;
}

/* ==========================================================================
Header and navigation
========================================================================== */

/* Header
========================================================================== */
header {
    position: fixed;
    z-index: 100;
    top: 0;
    width: 100%;
    height: auto;
    transition: all 200ms linear;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.05);
    box-shadow: var(--box-shadow);
    background-color: var(--bg-body);
}

header.has-info-popup .info-popup {
    display: flex;
}

header.is-scrolled {
    background-color: var(--bg-body);
    height: var(--header-height-scrolled);
}

.header-nav {
    padding: 0 var(--side-padding);
    height: var(--header-height);
    background-color: var(--bg-body);
}

.header-nav-container {
    display: grid;
    align-items: center;
    grid-gap: var(--gap-default);
    grid-template-columns: 1fr auto 1fr;
    max-width: var(--wd-container-header);
    margin: 0 auto;
    height: 100%;
}

@media only screen and (max-width: 1240px) {
    .header-nav-container {
        display: grid;
        grid-template-columns: 1fr auto auto;
        height: auto;
    }
}

/* Header topbar
========================================================================== */
.header-topbar {
    height: var(--topbar-height);
    background-color: var(--bg-primary);
    padding: 0 var(--side-padding)
}

.header-topbar-container {
    max-width: var(--wd-container-header);
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.header-topbar ul {
    list-style: none;
    display: flex;
    font-size: initial;
    margin: 0;
    padding: 0;
}

.header-topbar ul li a {
    color: var(--text-clr-invert);
    font-size: var(--paragraph-small);
}
.header-topbar ul li a:hover {
    color: var(--text-clr-invert);
}

.header-topbar li:not(:last-of-type) {
    margin-right: 2.5rem;
}

.header-topbar .icon::before {
    filter: invert(1);
}

@media only screen and (max-width: 510px) {
    .header-topbar {
        display: none;
    }
}

/* Header logo
========================================================================== */
.header-logo {
    width: 5.5rem;
    max-width: 100%;
    transition: all 250ms linear;
}

.header-logo a {
    display: block;
    border: none;
}

.header-logo img {
    vertical-align: middle;
    height: auto;
    width: 100%;
}

@media only screen and (max-width: 510px) {
    .header-logo {
        width: 5rem;
    }
}

/* Header buttons
========================================================================== */
.header-button .wp-block-button__link {
    padding: 1rem 2.5rem;
}

/* Header user menu
========================================================================== */
.user-menu {
    display: flex;
    align-items: center;
    grid-gap: 1.25rem;
    justify-content: flex-end;
}

.user-menu .user-login a {
    line-height: 0;
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

/* Menu navigation
========================================================================== */
.menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu-list li a {
    font-weight: var(--font-regular);
    font-size: var(--paragraph-small);
    color: var(--heading-clr);
    text-decoration: none;
    border: none;
}

.menu-item > a {
    transition: all 150ms linear;
}

/* Desktop menu
========================================================================== */
.desktop-menu .menu-list {
    display: flex;
}

.desktop-menu .menu-list > li {
    position: relative;
}

.desktop-menu .menu-list > li:not(:last-of-type) {
    margin-right: 4rem;
    margin-bottom: unset;
}

.desktop-menu .menu-list li a {
    line-height: var(--header-lineheight); 
}


@media only screen and (max-width: 1240px) {
    .desktop-menu {
        display: none;
    }
}

/* Hamburger menu
========================================================================== */
.hamburger-menu {
    margin-top: var(--total-header-height);
    padding-bottom: var(--total-header-height);
    border-top: 1px solid #e5e5e5;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    height: 100%;
    width: 100%;
    z-index: -1;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    background-color: var(--bg-body);
    opacity: 0;
    visibility: hidden;
    transform: scale(.9);
    will-change: transform;
    transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out, visibility 0.25s ease-in-out, max-height 0s linear 0.25s, -webkit-transform 0.25s ease-in-out;
}

.hamburger-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    transition: opacity 0.25s cubic-bezier(0, 1, 0.4, 1), visibility 0.25s linear, -webkit-transform 0.25s cubic-bezier(0.18, 1.25, 0.4, 1);
}

.hamburger-menu-inner {
    width: 100%;
    max-width: var(--wd-container-default);
    margin: 0 auto;
    padding: 2rem var(--side-padding);
}

.hamburger-menu .menu-list > li a {
    padding: 1.5rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hamburger-menu .menu-list > li a {
	border-bottom: var(--border-default);
    font-size: var(--paragraph);
}

/* Hamburger icon */
.hamburger-icon {
    display: none;
    position: relative;
    width: 3rem;
    height: 3rem;
    cursor: pointer;
    transition: all 200ms linear;
    align-items: center;
}

.hamburger-icon span {
    width: 3rem;
    height: 1.5px;
    background-color: #000000;
    transition: all 200ms linear;
}

.hamburger-icon span::before,
.hamburger-icon span::after {
    content: '';
    position: absolute;
    width: 3rem;
    height: 1.5px;
    background-color: #000000;
    transition: all 200ms linear;
}

.hamburger-icon span::before {
    transform: translateY(-1.1rem);
}

.hamburger-icon span::after {
    transform: translateY(1.1rem);
}

.hamburger-icon.is-open span {
    transform: translateX(0);
    background-color: transparent;
}

.hamburger-icon.is-open span::before {
    transform: rotate(45deg);
    top: 0;
}

.hamburger-icon.is-open span::after {
    transform: rotate(135deg);
    top: 0;
}

@media only screen and (max-width: 1240px) {
    .hamburger-icon {
        display: flex;
    }
}

/* Hamburger animation */
.hamburger-icon span::before {
    transform: translateY(-1.0rem);
}

.hamburger-icon span::after {
    transform: translateY(1.0rem);
}

/* Hamburger overlay */

/* Submenu dropdown
========================================================================== */
.sub-menu {
    list-style: none;
    margin: 0;
}

li.menu-item-has-children > a::after {
    content: '';
    background-image: url('../images/chevron-down.svg');
    background-repeat: no-repeat;
    background-size: contain;
    width: 12px;
    height: 7px;
    margin-left: 1rem;
    display: inline-block;
    transition: transform 250ms linear;
    margin-bottom: 2px;
}

/* Desktop submenu */
.desktop-menu .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    /*background-color: var(--bg-primary);*/
    list-style: none;
    min-width: max-content;
    /*padding: 1rem 1.5rem;*/
    padding: 0;
    box-shadow: none;
}

.desktop-menu li.menu-item-has-children:hover .sub-menu {
    display: block;
}
.desktop-menu .sub-menu li {
	padding: 1rem 1.5rem;
	background-color: var(--bg-primary);
	transition: all 250ms linear;
}
.desktop-menu .sub-menu li:hover {
	background-color: var(--bg-secondary);
}
.desktop-menu .sub-menu li:hover a {
    color: var(--text-clr);
}
.desktop-menu .sub-menu li a {
	color: #fff;
}

.desktop-menu .sub-menu li a {
    display: inline-block;
    line-height: normal;
    padding: 0.4em 0;
    font-weight: var(--font-regular);
    font-size: 1.6rem;
}

.desktop-menu li.menu-item-has-children:hover a::after {
    transform: rotate(-180deg);
}

/* Hamburger submenu */
.hamburger-menu .sub-menu {
    overflow: hidden;
    max-height: 0;
    transition: max-height 150ms linear;
    padding-left: 2rem;
}

.hamburger-menu .sub-menu.is-open li {
    font-size: 1.6rem;
}

.hamburger-menu .sub-menu .menu-list > li a {
    font-size: 1.6rem !important;
}

.hamburger-menu li.menu-item-has-children a.is-open::after  {
    transform: rotate(-180deg);
}

/* ==========================================================================
Typography
========================================================================== */

/* Headings
========================================================================== */
:is(h1, h2, h3, h4, h5, h6):last-child {
    margin: unset;
}

h1, 
h2, 
h3, 
h4, 
h5, 
h6 {
    text-transform: unset;
    letter-spacing: normal;
    font-style: normal;
    line-height: var(--heading-lineheight);
    font-weight: var(--font-semibold);
    font-family: var(--heading-font);
    color: var(--heading-clr);
    margin: 0 0 2rem;
    position: relative;
}

h1 {
    font-size: var(--h1);
}

h2 {
    font-size: var(--h2);
}

h3,
.is-style-small-heading {
    font-size: var(--h3);
    font-weight: var(--font-regular);
    margin-bottom: 3rem;
}

h4 {
    font-size: var(--small-heading);
    font-weight: var(--font-bold);
}

/* Paragraph text and links
========================================================================== */
p, td, th {
    font-size: var(--paragraph);
    margin: 0 0 0.8em 0;
    line-height: var(--text-lineheight);
}

p:last-of-type {
    margin-bottom: 0;
}

.is-style-paragraph-ingress {
    font-size: var(--paragraph-ingress);
}

.is-style-paragraph-small {
    font-size: var(--paragraph-small);
    line-height: normal;
}

blockquote.wp-block-quote {
    margin-left: unset;
    font-style: italic;
}

a {
    color: initial;
    font-weight: var(--font-regular);
    cursor: pointer;
    transition: all linear 150ms;
    text-decoration: none;
    display: inline-block;
    font-size: initial;
}

a:not(.wp-block-button__link, img):hover {
    color: initial;
    /* text-decoration: underline; */
}

.link, 
.link span {
    font-weight: var(--font-bold);
    color: var(--link-clr);
    text-decoration: underline;
    transition: all linear 150ms;
}
.link:hover, 
.link:hover span {
    color: var(--link-clr-hover);
}

/* Lists
========================================================================== */
ul,
ol {
    padding-left: 1.5rem;
    margin-bottom: 2rem;
    margin-top: 2rem;
}

.splide__track ul {
	padding: unset;
	margin: unset;
}

ul ul {
    margin-top: 0.3em;
    padding-left: 2.5rem;
    margin-bottom: 0.3em;
}

ul li, 
ol li {
    color: initial;
    font-size: initial;
}

/* Breadcrumbs
========================================================================== */
.breadcrumbs {
    padding: 0 2rem;
    max-width: calc(var(--wd-container-default) + 4rem);
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.breadcrumbs .qase-section__inner {
    position: absolute;
    padding: 2rem 0;
}

.woocommerce-page .breadcrumbs .qase-section__inner {
    padding: 2rem 0;
}

.breadcrumbs .separator {
    padding: 0 1rem;
    color: var(--text-clr-secondary);
}

.breadcrumbs a {
    color: var(--text-clr-secondary);
}

.breadcrumbs :is(span, a, p) .last {
    color: var(--text-clr);
}

@media only screen and (max-width: 768px) {
    .breadcrumbs .qase-section__inner {
        position: unset;
    }
}

/* Tables
========================================================================== */
.wp-block-table {
    margin: 3rem 0;
}

table {
    width: 100%;
    background-color: transparent;
    border-collapse: collapse;
    border-width: 1px;
    border-color: #dbdbdb;
    border-style: solid;
    color: initial;
    font-size: initial;
}

table td,
table th {
    border-width: 1px;
    border-color: #dbdbdb;
    border-style: solid;
    padding: 1rem 1.5rem;
    text-align: left;
	line-height: 1;
}

table thead {
    background-color: var(--bg-body);
}

table td:last-of-type {
    text-align: center;
}

/* ==========================================================================
Buttons
========================================================================== */
.wp-block-buttons {
    margin-top: var(--gap-default);
    display: flex;
    flex-wrap: wrap;
    grid-gap: 1rem;
}

.wp-block-button__link {
    font-size: var(--paragraph-small);
    font-weight: var(--font-regular);
    text-transform: normal;
    border-radius: 50rem;
    line-height: normal;
    letter-spacing: 0;
    padding: 1.2rem 2rem;
    transition: all 0.25s linear;
    display: inline-block;
}

/* Default - Button filled
========================================================================== */
.wp-block-button__link {
    background-color: var(--bg-primary);
    border: 1px solid var(--bg-primary);
    color: var(--text-clr-invert);
}

.wp-block-button__link:hover {
    background-color: var(--bg-secondary);
    border-color: var(--bg-secondary);
    color: var(--text-clr);
}

/* Default - Button outline
========================================================================== */
.is-style-outline .wp-block-button__link {
    background-color: transparent;
    border-color: #000000;
    color: var(--text-clr);
    border-radius: 5rem;
    border-width: 1.5px;
}

.is-style-outline .wp-block-button__link:hover {
    background-color: var(--primary-clr);
    border-color: var(--primary-clr);
    color: var(--text-clr-invert);
}

/* Secondary - Button filled
========================================================================== */
.is-style-filled-secondary .wp-block-button__link {
    background-color: var(--bg-tertiary);
    border-color: var(--bg-tertiary);
    color: var(--text-clr);
}

.is-style-filled-secondary .wp-block-button__link:hover {
    background-color: #000000;
    border-color: #000000;
    color: var(--text-clr-invert);
}

/* Button on background
========================================================================== */
.is-style-on-background .wp-block-button__link {
    background-color: var(--primary-clr);
    border-color: var(--primary-clr);
    color: var(--text-clr-invert);
}

.is-style-on-background .wp-block-button__link:hover {
    background-color: #000000;
    border-color: #000000;
    color: var(--text-clr-invert);
}

/* Button only text
========================================================================== */
.is-style-button-text .wp-block-button__link {
    background-color: transparent;
    padding: unset;
    border-radius: 0;
    color: inherit;
    border: unset;
    border-bottom: 2.5px solid;
    border-color: var(--bg-primary);
    padding-bottom: 0.25rem;
    transition: all linear 150ms;
    font-weight: var(--font-bold);
    font-family: var(--heading-font);
    font-size: var(--paragraph);
}

.is-style-button-text.wp-block-button::after {
    content: url('/wp-content/themes/bauder/images/icon-arrow.svg');
    vertical-align: baseline;
    margin-left: 0.25em;
    transition: all 150ms linear;
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
}

.is-style-button-text.wp-block-button:hover::after {
    margin-left: 1em;
}

/* ==========================================================================
Core settings
========================================================================== */

/* Paddings and margins
========================================================================== */

main {
    margin-top: var(--total-header-height);
	transition: margin-top .2s ease;
}

.qase-container {
    position: relative;
}

main > .qase-section:not(.container-fullwidth, .has-background, .breadcrumbs) {
    padding: 0 var(--side-padding) var(--section-padding);
}

main > .qase-section:not(.is-style-hero, .is-style-subhero, .has-background, .breadcrumbs, .is-style-fullwidth-cta, .shop .qase-section):first-of-type {
    padding-top: var(--section-padding);
}

main > .qase-section.container-fullwidth > .qase-section__inner {
    margin: 0 0 var(--section-padding);
}

main > .qase-section.container-fullwidth:last-child > .qase-section__inner {
    padding: 0;
}

.qase-section.is-style-align-left {
    margin-left: 0;
}

.qase-section.is-style-align-right {
    margin-right: 0 ;
}    

/* Covers
========================================================================== */
main > .wp-block-cover {
    padding: var(--section-padding) var(--side-padding);
}

.wp-block-cover .qase-section__inner {
    z-index: 2;
}  

main > .wp-block-cover.is-style-no-margin-bottom,
.qase-section.is-style-no-margin-bottom {
    margin-bottom: unset !important; 
}

.wp-block-cover-image .wp-block-cover__inner-container, 
.wp-block-cover .wp-block-cover__inner-container {
    margin: 0 auto;
    max-width: var(--wd-container-default);
    z-index: 2 !important;
}

/* Max-widths
========================================================================== */
.qase-section__inner {
    margin: 0 auto;
    max-width: var(--wd-container-default);
    z-index: 2 !important;
}

.qase-section :is(.container-xs, .container-s, .container-m, .container-default, .container-l, .container-xl) {
    margin: 0 auto;
    width: 100%;
}

.qase-section .container-xs,
.container-xs > .qase-section__inner {
    max-width: var(--wd-container-xs);
}

.qase-section .container-s,
.container-s > .qase-section__inner {
    max-width: var(--wd-container-s);
}

.qase-section .container-m,
.container-m > .qase-section__inner {
    max-width: var(--wd-container-m);
}

.container-default > .qase-section__inner {
    max-width: var(--wd-container-default);
}

.qase-section .container-l,
.container-l > .qase-section__inner {
    max-width: var(--wd-container-l);
}

.qase-section .container-xl,
.container-xl > .qase-section__inner {
    max-width: var(--wd-container-xl);
}

.container-fullwidth > .qase-section__inner {
    max-width: var(--wd-container-full);
}

/* Background colors
========================================================================== */
.bg-secondary {
    background-color: var(--bg-secondary);
}

.has-background {
    padding: var(--section-padding) var(--side-padding);
}

.qase-section.has-background {
    margin-bottom: var(--section-padding);
}

.qase-section.has-border-bottom {
    border-bottom: var(--border-default);
    border-color: #ffffff;
}
 
@media only screen and (max-width: 768px) {
    .has-background {
        padding: var(--m-section-padding) var(--m-side-padding);
    }

    .qase-section.has-background {
        margin-bottom: var(--m-section-padding);
    }
}

/* Grids
========================================================================== */
.qase-section .column-grid {
    grid-gap: var(--column-gap);
}

@media only screen and (max-width: 1150px) {
    .qase-section .column-grid.column-grid-4,
    .qase-section .column-grid.column-grid-5,
    .qase-section .column-grid.column-grid-6 {
        grid-template-columns: repeat(3, minmax(0,1fr));
    }
}

@media only screen and (max-width: 900px) {
    .qase-section .column-grid.column-grid-3,
    .qase-section .column-grid.column-grid-4,
    .qase-section .column-grid.column-grid-5
    .qase-section .column-grid.column-grid-6 {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

@media only screen and (max-width: 768px) {
    .qase-section .column-grid.column-grid-2 {
        grid-template-columns: minmax(0,1fr);
    }

    .qase-section .qase-container.is-style-reverse-order {
        grid-row: -1;
    }
}

@media only screen and (max-width: 600px) {
    .qase-section .column-grid.column-grid-3,
    .qase-section .column-grid.column-grid-4,
    .qase-section .column-grid.column-grid-5
    .qase-section .column-grid.column-grid-6 {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
} 

@media only screen and (max-width: 510px) {
    .qase-section .column-grid.column-grid-3,
    .qase-section .column-grid.column-grid-4,
    .qase-section .column-grid.column-grid-5
    .qase-section .column-grid.column-grid-6 {
        grid-template-columns: repeat(1, minmax(0,1fr));
    }
}

@media (max-width: 768px) {
    .qase-section .column-grid:is(.column-grid-2, .column-grid-3, .column-grid-4, .column-grid-5, .column-grid-6) {
        grid-template-columns: 1fr;
    }
}

/* Columns
========================================================================== */
.wp-block-column {
    margin: 0 !important;
}

.qase-section .qase-container.is-style-no-padding {
    padding: 0;
}

/* Iframe / Embed container
========================================================================== */
.qase-section.video-container p {
    margin-bottom: 2rem;
}

.embed-container,
.wp-block-video,
.wp-block-embed__wrapper { 
    position: relative; 
    padding-bottom: 56.25%;
    overflow: hidden;
    max-width: 100%;
    height: auto;
} 

.embed-container iframe,
.embed-container object,
.embed-container embed,
.wp-block-video video,
.wp-block-embed__wrapper iframe,
.wp-block-embed__wrapper video { 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Icons and social icons
========================================================================== */

.icon:not(:last-of-type) {
    margin-right: 1rem;
}

a.icon {
    border: none !important;
}

.icon::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 2.4rem;
    height: 2.4rem;
    background-repeat: no-repeat !important;
    transition: all 150ms linear;
    background-size: 2.4rem 2.4rem;
    margin-right: 0.5em;
}

/* Icons */
.address::before {
    background-image: url("../images/icon-address.svg");
    background-size: 2.2rem 2.2rem;
}

.phone::before {
    background-image: url("../images/icon-phone.svg");
    background-size: 2.2rem 2.2rem;
}

.email::before {
    background-image: url("../images/icon-email.svg");
    background-size: 2.2rem 2.2rem;
}

/* Social icons */
.facebook::before {
    background: url("../images/icon-fb-rounded-corners-white.svg");
    background-size: 2.4rem 2.4rem;
}

.instagram::before {
    background: url("../images/icon-in-white.svg");
    background-size: 2.4rem 2.4rem;
}

.linkedin::before {
    background: url("../images/icon-li-white.svg");
    background-size: 2.4rem 2.4rem;
}

.youtube::before {
    background: url("../images/icon-yt-white.svg");
    background-size: 2.4rem 2.4rem;
}

.twitter::before {
    background: url("../images/icon-twitter.svg");
    background-size: 2.4rem 2.4rem;
}

/* ==========================================================================
Sections and blocks
========================================================================== */

/* Hero
========================================================================== */
main > .qase-section.is-style-hero {
    padding: unset;
    padding-bottom: var(--section-padding);
    margin-top: var(--total-header-height);
}

.is-style-hero .qase-section__inner  {
    max-width: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: var(--column-gap);
    align-items: center;
}

.is-style-hero .qase-container:first-of-type {
    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding);
    max-width: var(--wd-container-xs);
    margin-left: auto;
}

.is-style-hero .qase-container:last-of-type,
.is-style-hero .qase-container:last-of-type figure {
    height: 100%;
}

.is-style-hero figure img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.is-style-hero h2 {
    padding-top: var(--column-gap);
}

@media only screen and (max-width: 1280px) {
    .is-style-hero .qase-container:first-of-type {
        padding-left: var(--m-side-padding);
    }
}

@media only screen and (max-width: 768px) {
    main > .qase-section.is-style-hero {
        padding: var(--m-section-padding) var(--m-side-padding);
    }

    .is-style-hero .qase-container:first-of-type {
        padding-top: unset;
        padding-left: 0;
        max-width: 100%;
    }

    .is-style-hero .qase-section__inner  {
        display: block;
        grid-template-columns: 1fr;
    }
	
	.home .is-style-hero .qase-section__inner {
		display: grid;
	}
	.home .is-style-hero .qase-section__inner>.qase-container:first-child {
		order: 2;
	}
	.home .qase-section.is-style-hero {
		padding: 0;
	}
	.home .qase-section.is-style-hero .qase-container:first-child {
		padding: 0 var(--m-side-padding) var(--m-section-padding);
	}
}

/* Subhero
========================================================================== */
main > .qase-section.is-style-subhero {
    padding: unset;
    padding-bottom: var(--section-padding);
}

.is-style-subhero .qase-section__inner  {
    max-width: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: var(--column-gap);
    align-items: center;
}

.is-style-subhero .qase-container:first-of-type {
    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding);
    max-width: var(--wd-container-xs);
    margin-left: auto;
}

.is-style-subhero .qase-container:last-of-type,
.is-style-subhero .qase-container:last-of-type figure {
    height: 100%;
}

.is-style-subhero figure img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

@media only screen and (max-width: 1280px) {
    .is-style-subhero .qase-container:first-of-type {
        padding-left: var(--m-side-padding);
    }
}

@media only screen and (max-width: 768px) {
    main > .qase-section.is-style-subhero {
        padding: 3rem var(--m-side-padding) var(--m-section-padding);
    }

    .is-style-subhero .qase-container:first-of-type {
        padding-top: unset;
        padding-left: 0;
        max-width: 100%;
    }

    .is-style-subhero .qase-section__inner  {
        display: block;
        grid-template-columns: 1fr;
    }
}

/* Info popup message
========================================================================== */
.has-info-popup .info-popup {
    position: relative;
    top: 0;
}

.info-popup * {
    font-size: var(--paragraph-small);
    line-height: unset;
    color: var(--text-clr-invert);
}

.info-popup {
    width: 100%;
    max-width: 100%;
    position: fixed;
    display: flex;
    justify-content: center;
    z-index: 10;
    padding: 0 var(--side-padding);
    background-color: var(--bg-primary);
    height: var(--topbar-height);
	transition: height .2s ease;
}

.info-popup-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: var(--wd-container-header);
}

.info-popup p {
    display: inline-block;
}

.info-popup a {
    font-weight: var(--font-regular);
	margin-left: 1.5rem;
}

.info-popup img {
    filter: invert(1);
}

@media only screen and (max-width: 700px) {
    .info-popup p {
        grid-gap: 2rem;
    }

    .info-popup span::before {
        content: '';
    }
}

.close-popup {
    position: absolute;
    height: 15px;
    width: 15px;
    top: 50%;
    right: 1rem;
    transform: translate(-50%, -50%);
    cursor: pointer;
	line-height: normal;
}

/* Our team
========================================================================== */
.our-team .wp-block-image {
    width: 100%;
    max-width: 28.25rem;
    height: 38rem;
    margin-bottom: 2rem;
}

.our-team .wp-block-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.our-team .name {
    font-weight: var(--font-semibold);
    margin-bottom: 0.5rem;
}

.our-team .position {
    font-size: var(--paragraph-small);
}

@media only screen and (max-width: 768px) and (min-width: 631px) {
    .our-team.qase-section .qase-section__inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media only screen and (max-width: 630px) {
    .our-team .qase-container {
        text-align: center;
        max-width: 28.25rem;
        margin: 0 auto;
    }
}

/* Treatments
========================================================================== */
.treatments .qase-container {
    padding: var(--gap-default);
    box-shadow: 0px 2px 10px rgb(0 0 0 / 5%);
    height: fit-content;
}

.treatments p:last-of-type {
    padding-bottom: 1em;
}

/* Reviews
========================================================================== */
.reviews-wrapper {
    display: grid;
    grid-gap: 0;
    grid-template-columns: repeat(4, 1fr);
} 

.reviews-slider {
    padding: unset;
}

.reviews-slider .splide__list li {
    width: clamp(28rem, 35vw, 60rem);
}

.reviews-item {
    padding: var(--gap-default);
    background-color: var(--bg-body);
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.08);
    display: grid;
    grid-template-columns: auto 1fr;
    grid-gap: 2rem 1.5rem;
}

.reviews-item .content {
    grid-column: 1/-1;
}

.reviews-item .info {
    display: grid;
    align-items: center;
}

.reviews-item .name {
    margin: unset;
    margin-bottom: 0.2em;
    font-weight: var(--font-bold);
    font-size: var(--h4);
}

.reviews-item .verification {
    padding-left: 0.5rem;
    color: var(--text-clr-secondary);
}
.reviews-item .verification::before {
    content: '|';
    padding-right: 0.5rem;
}

.reviews-item .age {
    font-size: var(--paragraph-mini);
}

.reviews-item .image {
    height: 6rem;
    width: 6rem;
}
.reviews-item .image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 50rem;
}

/* Icon list
========================================================================== */
.icon-list {
    list-style: none;
    padding: unset;
    display: flex;
    flex-wrap: wrap;
    grid-gap: 1rem;
    margin-bottom: unset;
    flex-direction: column;
}

.icon-list li {
    display: inline-flex;
    grid-gap: 1rem;
    align-items: center;
    font-size: var(--paragraph-small);
}

.icon-list li img {
    width: 2rem;
    height: 2rem;
}

/* Shortcuts
========================================================================== */
.woocommerce-page .block-shortcuts {
    padding: 0 var(--side-padding);
}

.block-shortcuts .column-grid {
    height: 60rem;
}

.block-shortcuts .qase-container {
    transition: all 200ms linear;
    position: relative;
    overflow: hidden;
}
.block-shortcuts .qase-container:hover {
    box-shadow: 7px 7px 11px -4.5px rgb(153 153 153 / 50%);
    cursor: pointer;
}

.block-shortcuts .qase-container:hover .background-image {
    top: -2.5%;
    left: -2.5%;
    width: 105%;
    height: 105%;
}

.block-shortcuts .background-image {
    background-position: center bottom;
    background-size: cover;
    transition: all 200ms linear;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.block-shortcuts .qase-container a {
    padding: 3rem;
    position: relative;
    height: 100%;
    min-height: inherit;
}

.block-shortcuts .qase-container:first-of-type {
    grid-row: 1/3;
}

.block-shortcuts .shortcuts-heading {
    font-size: var(--h4);
    font-weight: var(--font-semibold);
    margin-bottom: 0.5rem;
}

.block-shortcuts .shortcuts-ingress {
    font-size: var(--paragraph-mini);
}

@media only screen and (max-width: 1080px) {
    .block-shortcuts .column-grid {
        grid-gap: var(--gap-default);
    }
}

@media only screen and (max-width: 768px) {
    .block-shortcuts .column-grid {
       height: unset;
    }

    .block-shortcuts .qase-container {
        height: 30rem;
    }

    .block-shortcuts .qase-container:first-of-type .background-image {
        background-position: center 85%;
    }
}

/* Shop USP
========================================================================== */
.shop-usp {
    text-align: center;
}

body:not(.page-id-292) .shop-usp {
    padding: 0 var(--side-padding) 6rem;
}

/* body.woocommerce-page:not(.woocommerce-checkout, .woocommerce-cart) .shop-usp {
    padding-top: var(--section-padding);
} */

body.single-product:not(.postid-908) .shop-usp {
    padding-top: var(--section-padding);
}

.shop-usp.qase-section .column-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.shop-usp img {
    margin-bottom: clamp(1rem, 2vw, 2rem);
    height: 3rem;
    width: auto;
}

@media only screen and (max-width: 480px) {
    .shop-usp p {
        font-size: var(--paragraph-mini);
        margin: 0 auto;
        max-width: 10rem;
    }

    .shop-usp img {
        height: 2.5rem;
        width: auto;
        margin-bottom: 1rem;
    }
}

/* Image parallax effect on scroll 
========================================================================== */
.columns-with-parallax p:first-of-type {
    font-size: var(--paragraph-ingress);
}

.is-style-img-foreground-animation {
    width: 100%;
    max-width: 40rem;
    height: auto;
    max-height: 48rem;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.is-style-img-background-animation {
    width: 100%;
    max-width: 42rem;
    height: auto;
    max-height: 60rem;
    margin: 0 0 0 auto;
}

.is-style-img-foreground-animation img,
.is-style-img-foreground-animation img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

@media only screen and (max-width: 1140px) {
    .is-style-img-foreground-animation {
        width: 85%;
    }

    .is-style-img-background-animation {
        width: 85%;
    }
}

@media only screen and (max-width: 980px) {
    .is-style-img-foreground-animation {
        width: 80%;
    }

    .is-style-img-background-animation {
        margin: 0 0 0 auto;
        width: 90%;
    } 
}

@media only screen and (max-width: 768px) {
    .is-style-img-foreground-animation {
        left: 5%;
        width: 70%;
    }

    .is-style-img-background-animation {
        margin: 0 5vw 0 auto;
        width: 75%;
    } 

}


@media only screen and (max-width: 510px) {
    .is-style-img-foreground-animation {
        width: 70%;
        left: unset;
    }

    .is-style-img-background-animation {
        width: 75%;
        margin-right: unset;
    }
}

/* Big numbers list
========================================================================== */
.qase-section.is-style-big-numbers-list .qase-container {
    position: relative;
    padding-left: clamp(5rem, 4vw, 8rem);
}

.qase-section.is-style-big-numbers-list .qase-container>*:first-child {
    position: absolute;
    left: 0;
}

/* For animations */
.is-style-big-numbers-list .qase-container {
    transform: translate3d(0, 20%, 0);
    opacity: 0;
    transition: transform .5s ease, opacity .5s ease;
}

.is-style-big-numbers-list .qase-container.visible {
    transform: translate3d(0, 0, 0);
    opacity: 1;
}

/* List wrapper of posts @ CPT Kosttillskott
========================================================================== */
.list-kosttillskott {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: var(--column-gap);
}

.list-kosttillskott .accordion-item {
    padding: 2rem 0;
    border-bottom: var(--border-default);
}

.list-kosttillskott .accordion-heading {
    font-size: var(--paragraph-ingress);
}

.list-kosttillskott .accordion-content {
    max-width: 100%;
}

.list-kosttillskott .accordion-content-inner>* {
    margin-bottom: 2rem;
}

.list-kosttillskott .buttons-halsobehov {
    margin-top: 0;
}

.list-kosttillskott :not(.wp-block-buttons) .wp-block-button__link {
  margin: unset;
}

.list-kosttillskott .wp-block-button__link {
    width: fit-content;
}

.list-kosttillskott > p:last-of-type {
    margin-top: 4rem;
    font-weight: var(--font-bold);
}

@media only screen and (max-width: 768px) {
    .list-kosttillskott {
        grid-template-columns: 1fr;
    }
}

/* Fullwidth CTA (with parallax background)
========================================================================== */
/* .single-product section.qase-section.container-fullwidth.is-style-fullwidth-cta {
    margin-bottom: var(--section-padding);
} */

.woocommerce-page section.qase-section.container-fullwidth.is-style-fullwidth-cta {
    margin-bottom: var(--section-padding);
}

.is-style-fullwidth-cta .wp-block-cover {
    height: 60rem;
    overflow: hidden;
}

.is-style-fullwidth-cta .wp-block-cover img {
    min-height: 60rem;
    object-fit: cover;
}

.is-style-fullwidth-cta .wp-block-cover__background {
    background-position: center center;
    background-size: cover;
}

.is-style-fullwidth-cta .wp-block-cover__inner-container {
    position: absolute;
    bottom: 0;
}

.is-style-fullwidth-cta .qase-section {
    margin-right: 0;
}

.is-style-fullwidth-cta .wp-block-cover__inner-container .qase-container {
    background-color: var(--bg-body);
    color: initial;
    padding: 5rem 3rem;
}

@media only screen and (max-width: 510px) {
    .is-style-fullwidth-cta .wp-block-cover__inner-container .qase-container {
        padding: 5rem var(--side-padding);
    }
}

/* Find your clinic
========================================================================== */
.clinics-map {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: var(--column-gap);
}

.clinics-map .accordion-heading {
    font-size: var(--h3);
    font-weight: var(--font-regular);
}

.clinics-map .accordion-heading-inner {
    font-weight: var(--font-semibold);
}

.clinics-map .accordion-content-inner {
    margin-bottom: var(--gap-default);
    padding-top: 1rem;
}

.clinics-map .accordion-inner-item:not(:last-of-type) {
    border-bottom: var(--border-default);
}

.clinics-map .accordion-inner-item:not(:first-of-type) {
    padding-top: 2rem;
}

.clinics-map .info-clinic p {
    margin: unset;
    margin-bottom: 0.5em;
}

.clinics-map .info-clinic p:not(:first-of-type) {
    font-size: var(--paragraph-small);
}

.clinics-map .wp-block-buttons {
    margin-top: 2rem;
}

.clinics-map #map {
    height: 500px;
    width: 100%;
    position: relative;
    overflow: hidden;
}

@media only screen and (max-width: 900px) {
    .clinics-map {
        grid-template-columns: 1fr;
    }
}

/* CPT: Kosttillskott & Provsvar
========================================================================== */
.single-kosttillskott .breadcrumbs,
.single-provsvar .breadcrumbs {
    margin-bottom: var(--column-gap);
}

.buttons-halsobehov .wp-block-button__link {
    display: flex;
    align-items: center;
    grid-gap: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.buttons-halsobehov .wp-block-button__link:hover {
    border-color: var(--bg-tertiary);
    color: var(--text-clr);
    background-color: var(--bg-tertiary);
    cursor: unset;
}

.buttons-halsobehov .wp-block-button__link img {
    height: 2rem;
    width: 2rem;
    object-fit: contain;
}

.single-kosttillskott  .breadcrumbs .qase-section__inner,
.single-provsvar  .breadcrumbs .qase-section__inner {
    position: relative;
}

.single-kosttillskott .page-content .qase-container:not(:last-of-type),
.single-provsvar .page-content .qase-container:not(:last-of-type) {
    margin-bottom: var(--column-gap);
}

.single-kosttillskott .page-container .column-grid,
.single-provsvar .page-container .column-grid {
    grid-template-columns: 1fr 35rem;
    grid-gap: var(--column-gap);
}

.single-kosttillskott .vitamin-info,
.single-provsvar .vitamin-info {
    background-color: var(--bg-tertiary);
    padding: var(--gap-default);
}

.single-kosttillskott .vitamin-info ul:last-child,
.single-provsvar .vitamin-info ul:last-child {
    margin-bottom: unset;
}

.single-kosttillskott .description :is(h2, h3),
.single-provsvar .description :is(h2, h3) {
    padding-top: 0.75em;
    margin-bottom: 0.5em;
}

@media only screen and (max-width: 980px) {
    .single-kosttillskott .page-container .column-grid,
    .single-provsvar .page-container .column-grid {
        grid-template-columns: 1fr;
    }

    .single-kosttillskott :is(.page-content, .page-sidebar),
    .single-provsvar :is(.page-content, .page-sidebar) {
        grid-column: unset;
    }
}

.sidebar-card {
    box-shadow: 0px 2px 10px rgb(0 0 0 / 5%);
    padding: var(--gap-default);
    position: sticky;
    top: 12rem;
    height: fit-content;
    max-width: 35rem;
}

.sidebar-card .product-item-content {
    border-bottom: var(--border-default);
    padding-bottom: 2em;
}

.sidebar-card .icon-list {
    margin: unset;
}

@media only screen and (max-width: 980px) {
    .sidebar-card {
        top: unset;
        position: relative;
        margin-top: var(--column-gap);
    }    
}

@media only screen and (max-width: 510px) {
    .sidebar-card {
        max-width: 100%;
    }    
}

/* ==========================================================================
Forms
========================================================================== */

/* Text and fields
========================================================================== */
.wpcf7-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 2rem 4rem;
}

.wpcf7-form * {
    text-align: left;
}

.wpcf7-form p {
    margin-bottom: unset;
} 

.wpcf7-form .acceptance,
.wpcf7-form .acceptance a {
    font-size: var(--paragraph-small);
    line-height: normal;
    text-align: left;
    text-transform: initial;
    letter-spacing: initial;
    font-family: inherit;
    color: var(--text-clr-secondary);
}

.wpcf7-form p span :is(select, textarea, input:not([type="checkbox"])) {
    width: 100%;
    padding: 1rem 0;
    color: var(--text-clr);
    font-size: inherit;
    font-weight: inherit;
    margin: 0;
    border: none;
    border-bottom: var(--border-default);
    background-color: var(--bg-body);
    border-radius: 0;
}

.wpcf7-form p span :is(select, textarea, input):focus {
    outline: none;
}

select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: var(--bg-body);
    border: none;
    padding: 0.5rem 2em 0.5rem 1em;
    border: 1px solid transparent;
    margin: 0;
    width: 100%;
    font-family: inherit;
    font-size: initial;
    cursor: pointer;
    line-height: inherit;
    border-radius: 0;
    background: rgba(255, 255, 255, 1) url('../images/chevron-down.svg') no-repeat;
    background-position-x: 98.5%;
    background-position-y: 50%;
}

.wpcf7-radio .wpcf7-list-item {
    display: grid;
    grid-template-columns: 2rem auto;
    grid-gap: 1rem;
    font-size: 1.8rem;
}

.wpcf7-list-item {
    margin-left: unset;
}

.wpcf7-form .hidden {
    display: none;
}

.wpcf7-form p:nth-of-type(n+5) {
    grid-column: 1/3;
}

@media only screen and (max-width: 600px) {
    .wpcf7-form p {
        grid-column: 1/3;
    }

    select {
        background-position: 97.5% 51%;
    }
}

/* Error message
========================================================================== */
.wpcf7-not-valid-tip,
.wpcf7 form .wpcf7-response-output {
    color: #dc3232;
    font-size: 1.4rem;
    font-weight: inherit;
    display: block;
    border: none;
    margin: 0;
    padding: 0;
    text-align: left;
    font-family: 'DM Sans', sans-serif;
}

.wpcf7 form .wpcf7-response-output {
    border: 1.5px solid #dc3232 !important;
    padding: 0 0.5em;
    color: #dc3232;
    width: fit-content;
}

.wpcf7 form .wpcf7-response-output:last-of-type {
    margin-top: 1em;
    grid-column: 1/3;
}

.wpcf7 form.sent .wpcf7-response-output {
    border: 1.5px solid #46b450 !important;
    padding: 0 0.5em;
    color: #46b450;
}

/* Acceptance
========================================================================== */
input[type="checkbox"] {
    vertical-align: middle;
	margin-top: 0;
}

.wpcf7-form .wpcf7-acceptance label {
    display: inline-block;
}

.wpcf7-form .wpcf7-acceptance .wpcf7-list-item {
    margin: unset;
}
.wpcf7-form .wpcf7-acceptance .wpcf7-list-item-label,
.wpcf7-form .wpcf7-acceptance .wpcf7-list-item-label a {
    font-size: 1.8rem;
}

/* Submit
========================================================================== */
.wpcf7-form .submit {
    display: flex;
    justify-content: flex-start;
    grid-column: 1/3;
}

input.wpcf7-submit {
    margin-top: 2rem;
}

.wpcf7-form input[type="submit"],
.wpcf7-form input[type="submit"]:disabled,
.form-calendar input[type="submit"],
.form-calendar input[type="submit"]:disabled {
    font-size: inherit;
    font-weight: var(--font-regular);
    line-height: normal;
    background-color: var(--bg-primary);
    color: var(--text-clr-invert);
    padding: 1.2rem 2rem !important;
    transition: all 150ms linear;
    border: 1px solid transparent;
	border-color: var(--bg-primary);
    cursor: pointer;
    border-radius: 50rem;
}

.wpcf7-spinner {
    display: none;
}

.wpcf7-form input[type="submit"]:hover, 
.form-calendar input[type="submit"]:hover {
    background-color: var(--bg-secondary);
    color: var(--text-clr);
    border-color: var(--bg-secondary);
}

.wpcf7 .wpcf7-submit:disabled,
.wpcf7-form input[type="submit"]:disabled, 
.form-calendar input[type="submit"]:disabled {
    cursor: not-allowed;
}

/* Custom forms
========================================================================== */


/* ==========================================================================
Footer
========================================================================== */
footer {
    background-color: var(--bg-primary);
}

.footer-container {
    max-width: var(--wd-container-footer);
    margin: 0 auto;
    display: grid;
    grid-gap: var(--col-gap);
}

/* Footer top
========================================================================== */
.footer-top {
    padding: 8rem var(--side-padding);
}

.footer-top .footer-container {
    grid-template-columns: 33% repeat(3, 1fr);
    grid-gap: var(--column-gap);
}

.footer-top .footer-col:first-of-type {
    max-width: 40rem;
    display: flex;
    flex-direction: column;
    grid-gap: var(--gap-default);
}

@media only screen and (max-width: 1140px) {
    .footer-top .footer-col:first-of-type {
        grid-column: 1/4;
    }

    .footer-top .footer-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media only screen and (max-width: 850px) {
    .footer-top .footer-col:first-of-type {
        grid-column: 1/3;
    }

    .footer-top .footer-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media only screen and (max-width: 510px) {
    .footer-top {
        padding: 6rem var(--side-padding);
    }

    .footer-top .footer-col:first-of-type {
        grid-column: unset;
    }

    .footer-top .footer-container {
        grid-template-columns: 1fr;
    }
}

/* Footer logo */
.footer-logo * {
    border: none;
}

.footer-logo img {
    max-width: 9rem;
    height: auto;
    filter: brightness(100);
}

/* Footer text content & navigation */
p.footer-heading {
    font-size: var(--h4);
    font-weight: var(--font-bold);
    color: var(--text-clr-invert);
    margin-bottom: 2rem;
}

.footer-col .menu {
    list-style: none;
    margin: unset;
    padding: unset;
}

.footer-col:last-of-type .menu {
    margin-top: 2rem;
}

.footer-col .menu li {
    padding: 0.2em 0;
}

.footer-col .menu li a {
    color: var(--text-clr-invert);
    font-weight: var(--font-regular);
    padding: inherit;
    line-height: normal;
}

footer * {
    color: var(--text-clr-invert) !important;
    text-decoration: none;
}

footer :is(p, a) {
    font-size: var(--paragraph);
}

footer p a:hover {
    color: inherit !important;
}

/* Footer social icons */
.footer-top .social-icons {
    display: flex;
    flex-direction: row;
    grid-gap: 1rem;
    margin-top: 1.5rem;
}

/* Footer bottom
========================================================================== */
.footer-bottom * {
    font-size: var(--paragraph-small);
    font-weight: var(--font-regular);
}

.footer-bottom .footer-col:first-of-type a:not(:last-of-type) {
    margin-right: var(--gap-default);
}

.footer-bottom a:hover {
    color: var(--accent-clr);
}

.footer-bottom {
    padding: 0 var(--side-padding) 2rem;
}

.footer-bottom .footer-container {
    grid-template-columns: repeat(2, auto);
    justify-content: space-between;
}

.footer-divider {
    height: 0.5px;
    background-color: white;
    max-width: var(--wd-container-footer);
    margin: 0 auto;
    margin-bottom: 1.5rem;
    opacity: 0.2;
}

@media only screen and (max-width: 850px) {
    .footer-bottom .footer-container {
        grid-template-columns: 1fr;
        grid-gap: 1rem;
        text-align: center;
    }
}

@media only screen and (max-width: 510px) {
    .footer-bottom .footer-container {
        text-align: center;
    }
}

/* ==========================================================================
WP dashboard and Gutenberg editor
========================================================================== */

/* Custom Gutenberg color palette
========================================================================== */

.has-lightgray-background-color {
    background-color: #F3F4F6;
}
.has-lightgray-color {
    color: #F3F4F6;
}

.has-white-background-color {
    background-color: #ffffff;
}
.has-white-color {
    color: #ffffff;
}

.has-black-background-color {
    background-color: #000000;
}
.has-black-color {
    color: #000000;
}

.has-dark-blue-background-color {
    background-color: #003F54;
}
.has-dark-blue-color {
    color: #003F54;
}

.has-middle-blue-background-color {
    background-color: #007299;
}
.has-middle-blue-color {
    color: #007299;
}

.has-light-blue-background-color {
    background-color: #ADE2E3;
}
.has-light-blue-color {
    color: #ADE2E3;
}

.has-yellow-background-color {
    background-color: #F5BD47;
}
.has-yellow-color {
    color: #F5BD47;
}

/* Plugin overrides */
.cart-message {
	top: var(--total-header-height);
}


/* Admin bar
========================================================================== */
.admin-bar header {
    top: 3.2rem;
}

.admin-bar .hamburger-menu {
    margin-top: calc(var(--total-header-height) + 3.2rem);
    padding-bottom: calc(var(--total-header-height) + 3.2rem);
}

@media (max-width: 782px) {
    #wpadminbar {
		position: fixed;
	}

    #wpadminbar li > .ab-item {
        width: 4rem !important;
    }

	.admin-bar header {
		top: 4.6rem;
	}

    .admin-bar .hamburger-menu {
        margin-top: calc(var(--total-header-height) + 4.6rem);
        padding-bottom: calc(var(--total-header-height) + 4.6rem);
    }

    .admin-bar .woocommerce-sidebar {
        top: unset;
    }
}