/*
Theme Name: It's Nordic
Theme URI: https://opencollective.com/blankslate
Author: Edward Visser
Author URI: https://walrups.nl
Description: thema for It's Nordic
Tags: accessibility-ready, one-column, two-columns, custom-menu, featured-images, microformats, sticky-post, threaded-comments, translation-ready
Version: 2026
Requires at least: 5.2
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v3 or Later
License URI: https://www.gnu.org/licenses/gpl.html
Text Domain: It's Nordic
*/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}html{scroll-behavior:smooth}body{line-height:1}a{text-decoration-skip-ink:auto}a[href^="tel"]{color:inherit;text-decoration:none}button{outline:0}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}q{display:inline;font-style:italic}q:before{content:'"';font-style:normal}q:after{content:'"';font-style:normal}textarea,input[type="text"],input[type="button"],input[type="submit"],input[type="reset"],input[type="search"],input[type="password"]{appearance:none;border-radius:0}input[type="search"]{appearance:textfield}table{border-collapse:collapse;border-spacing:0}th,td{padding:2px}big{font-size:120%}small,sup,sub{font-size:80%}sup{vertical-align:super}sub{vertical-align:sub}dd{margin-left:20px}kbd,tt{font-family:courier;font-size:12px}ins{text-decoration:underline}del,strike,s{text-decoration:line-through}dt{font-weight:bold}address,cite,var{font-style:italic}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.sticky{}.bypostauthor{}.wp-caption{}.wp-caption-text{}.gallery-caption{}.alignright{}.alignleft{}.aligncenter{}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important;word-break:normal}
.screen-reader-text:focus{background-color:#f7f7f7;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto!important;clip-path:none;color:#007acc;display:block;font-size:14px;font-size:.875rem;font-weight:700;height:auto;right:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}
.skip-link{left:-9999rem;top:2.5rem;z-index:999999999;text-decoration:underline}
.skip-link:focus{display:block;left:6px;top:7px;font-size:14px;font-weight:600;text-decoration:none;line-height:normal;padding:15px 23px 14px;z-index:100000;right:auto}
.visually-hidden:not(:focus):not(:active), .form-allowed-tags:not(:focus):not(:active){position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px);white-space:nowrap}

@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');

strong, b {
    font-weight: 700;
}

em, i {
    font-style: italic;
}

.rich-text {
    font-family: "Nunito Sans";
    font-size: 15px;
    line-height: 1.7;
    color: rgba(29, 37, 24, .75);
}

.rich-text > * + * {
    margin-top: 16px;
}

.rich-text h1,
.rich-text h2,
.rich-text h3,
.rich-text h4,
.rich-text h5,
.rich-text h6 {
    font-family: "Merriweather";
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-black-green);
}

.rich-text h1 { font-size: 30px; }
.rich-text h2 { font-size: 24px; }
.rich-text h3 { font-size: 20px; }
.rich-text h4 { font-size: 17px; }
.rich-text h5,
.rich-text h6 { font-size: 15px; }

.rich-text a {
    color: var(--color-green);
    text-decoration: underline;
}

.rich-text a:hover {
    color: var(--color-forest-dark);
}

.rich-text ul,
.rich-text ol {
    padding-left: 1.25em;
}

.rich-text ul {
    list-style: disc;
}

.rich-text ol {
    list-style: decimal;
}

.rich-text li + li {
    margin-top: 6px;
}

.rich-text blockquote {
    padding-left: 16px;
    border-left: 3px solid var(--color-green);
    font-style: italic;
    color: rgba(29, 37, 24, .65);
}

.rich-text code {
    padding: 2px 6px;
    background-color: var(--color-mint-light);
    font-family: monospace;
    font-size: .9em;
}

.rich-text pre {
    padding: 16px;
    overflow-x: auto;
    background-color: var(--color-mint-light);
}

.rich-text pre code {
    padding: 0;
    background: none;
}

.rich-text hr {
    border: 0;
    border-top: 1px solid rgba(29, 37, 24, .15);
}

.rich-text table {
    width: 100%;
    border-collapse: collapse;
}

.rich-text th,
.rich-text td {
    padding: 8px 12px;
    border: 1px solid rgba(29, 37, 24, .15);
    text-align: left;
}

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

/*====== GOLBAL ====== */
:root {

    --color-forest-dark: #445638;
    --color-green: #6B8859;
    --color-gold: #FFC857;
    --color-gold-dark: #C2850A;
    --color-plum: #483C46;
    --color-cream: #FFFAF4;
    --color-black-green: #1D2518;
    --color-mint-light: #F4F9E9;

    --color-navy-light: rgb(26, 58, 82);
    --color-navy: #112B3C;
    --color-navy-dark: #0D2336;
    --color-ice: #E8F0F7;
}
*{
    box-sizing: border-box;
}
.container-fit {
    width: 100%;
    max-width: 1232px;
    padding-inline: 32px;
    margin-inline: auto;
}

@media (max-width: 900px) {

    .container-fit {
        padding-inline: 16px;
    }
}

h1,h2,h3,h4,h5,h6,.prime {
    font-family: "Merriweather";
}

p,span,a,li,.second {
    font-family: "Nunito Sans";
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    font-family: "Nunito Sans";
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

.btn--dark {
    background-color: var(--color-forest-dark);
    color: var(--color-cream);
    border: 1px solid var(--color-green);
}

.btn--dark:hover {
    background-color: var(--color-black-green);
}

.btn--gold {
    background-color: var(--color-gold);
    color: var(--color-black-green);
    border: 1px solid var(--color-gold-dark);
}

.btn--gold:hover {
    background-color: var(--color-cream);
}

.btn--outline {
    background-color: transparent;
    color: var(--color-black-green);
    border: 1px solid rgba(29, 37, 24, .3);
}

.btn--outline:hover {
    background-color: rgba(29, 37, 24, .06);
}

/*====== HEADER ====== */

header {
    position: fixed;
    width: 100%;
    background-color: var(--color-cream);
    border-bottom: 1px solid #483C46;
    z-index: 10;

}

#container {
    padding-top: 65px;
}

/*====== CHECKOUT HEADER/FOOTER (header-checkout.php, footer-checkout.php) ====== */

.checkout-minimal #container {
    padding-top: 0;
}

.checkout-header {
    position: static;
    border-bottom: 1px solid rgba(29, 37, 24, .1);
}

.checkout-header__inner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-block: 16px;
}

.checkout-header__secure {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 12px;
    border-left: 1px solid rgba(29, 37, 24, .15);
    font-family: "Nunito Sans";
    font-size: 14px;
    font-weight: 700;
    color: var(--color-black-green);
}

.checkout-header__secure .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    color: var(--color-green);
}

.checkout-header__logo {
    display: inline-flex;
    align-items: center;
    font-family: "Merriweather";
    font-size: 18px;
    font-weight: 700;
    color: var(--color-black-green);
    text-decoration: none;
}

.checkout-header__logo img {
    max-height: 40px;
    width: auto;
}

header .cover {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    width: 100%;
    min-height: 64px;
}

.header-actions {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.mobile-nav-root {
    display: contents;
}

.mobile-nav-header {
    display: none;
}

header .cover #menu-header {
    display: flex;
    align-items: stretch;
    height: 100%;
    width: fit-content;
}

#menu-header .menu-item {
    display: flex;
}

.header-cart-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.header-cart {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 14px;
    color: var(--color-plum);
    text-decoration: none;
    transition: color .2s ease;
}

.header-cart:hover {
    color: var(--color-forest-dark);
}

.header-cart .dashicons {
    font-size: 22px;
    width: 22px;
    height: 22px;
}

.header-cart__count {
    position: absolute;
    top: 10px;
    right: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background-color: var(--color-gold);
    color: var(--color-black-green);
    font-family: "Nunito Sans";
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

.header-cart__toast {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    white-space: nowrap;
    background-color: var(--color-forest-dark);
    color: var(--color-cream);
    font-family: "Nunito Sans";
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(29, 37, 24, .25);
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
}

.header-cart__toast::before {
    content: "";
    position: absolute;
    bottom: 100%;
    right: 20px;
    border: 6px solid transparent;
    border-bottom-color: var(--color-forest-dark);
}

.header-cart__toast .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    color: var(--color-gold);
}

.header-cart__toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

header .branding {
    display: flex;
    align-items: center;
    padding-block: 8px;
}

header .branding img {
    height: 30px;
    width: auto;
}

#site-title {
    display: flex;
    align-items: center;
}

#menu-header .menu-item a{
    display: flex;
    align-items: center;
    height: 100%;
    color: var(--color-plum);
    font-family: "Nunito Sans";
    font-weight: 600;
    text-decoration: none;
    padding: 0 16px;
    transition: background-color .2s ease, color .2s ease;
    z-index: 10;
}

#menu-header .menu-item:hover > a {
    background-color: var(--color-forest-dark);
    color: var(--color-cream);
}

#menu-header .menu-item.menu-item--dark:hover > a {
    background-color: var(--color-navy-light);
    color: var(--color-cream);
}

#menu-header .sub-menu{
    position: absolute;
    top: 100%;
    width: 100%;
    left: 0;
    z-index: 9;
    pointer-events: none;
    clip-path: inset(0 0 100% 0);
    background-color: #6B8859;
    transition: clip-path 0.35s ease;
}

#menu-header .menu-item:hover .sub-menu {
    width: 100%;
    pointer-events: auto;
    clip-path: inset(0 0 0% 0);
}

#menu-header .sub-menu.sub-menu--dark {
    background-color: var(--color-navy);
}

#menu-header .sub-menu .menu-item a {
    max-width: 400px ;
    width: 100%;
}

.mega-menu__footer {
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0.35s ease;
}

#menu-header .menu-item:hover .mega-menu__footer {
    clip-path: inset(0 0 0% 0);
}

.mega-menu {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px 32px;
    max-width: 1232px;
    margin-inline: auto;
    padding: 32px;
}

.mega-menu__item {
    width: auto;
}

#menu-header .sub-menu .mega-menu__link {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    height: auto;
    gap: 6px;
    padding: 16px;
    border-radius: 8px;
    background-color: transparent;
    transition: background-color .2s ease;
}

.mega-menu__title {
    font-family: "Nunito Sans";
    font-size: 15px;
    font-weight: 700;
    color: var(--color-cream);
}

.mega-menu__desc {
    font-size: 13px;
    line-height: 1.4;
    font-weight: 400;
    color: var(--color-mint-light);
    text-transform: none;
}

.mega-menu__item:hover .mega-menu__title {
    color: var(--color-gold);
}

#menu-header .menu-item.mega-menu__item:hover {
    background-color: transparent;
}

#menu-header .sub-menu .mega-menu__item:hover .mega-menu__link {
    background-color: rgba(255, 250, 244, .1);
}

/*====== MOBILE MENU ====== */

.mobile-menu-toggle {
    display: none;
    background: none;
    border: 0;
    padding: 8px;
    margin: 0;
    cursor: pointer;
    position: relative;
}

.mobile-menu-toggle .hamburger-box {
    display: block;
    position: relative;
    width: 24px;
    height: 18px;
}

.mobile-menu-toggle .hamburger-inner,
.mobile-menu-toggle .hamburger-inner::before,
.mobile-menu-toggle .hamburger-inner::after {
    content: "";
    position: absolute;
    left: 0;
    width: 24px;
    height: 2px;
    background-color: #483C46;
    border-radius: 2px;
}

.mobile-menu-toggle .hamburger-inner {
    top: 8px;
}

.mobile-menu-toggle .hamburger-inner::before {
    top: -8px;
}

.mobile-menu-toggle .hamburger-inner::after {
    top: 8px;
}

.mobile-menu-close {
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: auto;
    margin-right: 8px;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--color-cream);
}

.nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 9;
    opacity: 0;
    transition: opacity 0.3s ease;
}

body.nav-open {
    overflow: hidden;
}

body.nav-open .nav-overlay {
    display: block;
    opacity: 1;
}

@media (max-width: 900px) {
    .mobile-menu-toggle {
        display: block;
    }

    .mobile-menu-close {
        display: flex;
        width: 44px;
        height: 44px;
    }

    .mobile-menu-close .dashicons {
        font-size: 22px;
        width: 22px;
        height: 22px;
    }

    header .cover {
        align-items: center;
    }

    header nav#menu {
        position: fixed;
        inset: 0;
        width: 100%;
        background-color: var(--color-cream);
        transform: translateX(100%);
        transition: transform 0.35s ease;
        z-index: 10;
    }

    body.nav-open header nav#menu {
        transform: translateX(0);
    }

    .mobile-nav-root {
        display: block;
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 0 0 40px;
        box-sizing: border-box;
    }

    .mobile-nav-header {
        display: flex;
        align-items: center;
        gap: 4px;
        min-height: 64px;
        margin-bottom: 12px;
    }

    .mobile-nav-header .section-header__inner {
        flex: 1;
        min-width: 0;
    }

    .mobile-nav-header--submenu {
        position: sticky;
        top: 0;
        z-index: 2;
    }

    .mobile-nav-back {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 44px;
        height: 44px;
        margin-left: 8px;
        background: none;
        border: 0;
        color: var(--color-cream);
        cursor: pointer;
    }

    .mobile-nav-back .dashicons {
        font-size: 22px;
        width: 22px;
        height: 22px;
    }

    #menu-header .mobile-nav-header--submenu .mobile-nav-header__link {
        width: auto;
        color: var(--color-cream);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .12em;
        text-transform: uppercase;
        text-decoration: none;
    }

    header .cover #menu-header {
        flex-direction: column;
        width: 100%;
        gap: 0;
    }

    #menu-header .menu-item {
        position: relative;
        width: 100%;
    }

    #menu-header .menu-item a {
        width: 100%;
        padding: 18px 24px;
        color: var(--color-plum);
        font-size: 20px;
        border-radius: 0;
    }

    #menu-header .menu-item:hover > a {
        background-color: rgba(68, 86, 56, .08);
        color: var(--color-forest-dark);
    }

    #menu-header .menu-item.menu-item--dark:hover > a {
        background-color: rgba(68, 86, 56, .08);
        color: var(--color-forest-dark);
    }

    #menu-header .sub-menu {
        position: fixed;
        inset: 0;
        overflow-y: auto;
        padding: 0 0 40px;
        transform: translateX(100%);
        transition: transform 0.3s ease;
        clip-path: none;
        pointer-events: auto;
        z-index: 15;
        background-color: var(--color-green) !important;
    }

    #menu-header .sub-menu.sub-menu--dark {
        background-color: var(--color-navy) !important;
    }

    #menu-header .menu-item.sub-menu-open .sub-menu {
        transform: translateX(0);
    }

    #menu-header .sub-menu .menu-item a {
        max-width: none;
    }

    .mega-menu {
        grid-template-columns: 1fr;
        max-width: none;
        gap: 4px;
        padding: 4px 8px 20px;
    }

    .mega-menu__title {
        color: var(--color-cream);
    }

    .mega-menu__footer {
        display: none;
    }

    #menu-header .menu-item-has-children > a::after {
        content: "";
        width: 8px;
        height: 8px;
        margin-left: auto;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(-45deg);
        opacity: .5;
    }

    @media (min-width: 600px) {
        .mega-menu {
            grid-template-columns: repeat(2, 1fr);
        }
    }
}

/*====== HIGHLIGHTS BAR (block: highlights_block) ====== */

.highlights-bar {
    background-color: var(--color-green);
}

.highlights-bar__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px 56px;
    padding-block: 20px;
}

.highlights-bar__item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.highlights-bar__icon {
    font-size: 20px;
    line-height: 1;
    color: var(--color-cream);
}

img.highlights-bar__icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.highlights-bar__text {
    font-family: "Nunito Sans";
    font-size: 14px;
    font-weight: 700;
    color: var(--color-cream);
}

@media (max-width: 700px) {
    .highlights-bar__list {
        display: grid;
        grid-template-columns: repeat(2, auto);
        justify-content: center;
        justify-items: center;
        align-items: center;
        gap: 20px 32px;
    }

    .highlights-bar__item {
        justify-content: center;
    }
}

/*====== SECTION HEADER (block: section_header) ====== */

.section-header--normal {
    background-color: var(--color-forest-dark);
    z-index: 100;
}

.section-header--dark {
    background-color: var(--color-navy-light);
    z-index: 100;

}

.section-header__inner {
    position: relative;
    display: flex;
    align-items: center;
    padding-block: 8px;
}

.section-header__number {
    position: absolute;
    left: 24px;
    z-index: 1;
    padding-right: 30px;
    font-family: "Nunito Sans";
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--color-gold);
}

.section-header--normal .section-header__number {
    background-color: var(--color-forest-dark);
}

.section-header--dark .section-header__number {
    background-color: var(--color-navy-light);
}

.section-header__rule {
    display: flex;
    align-items: center;
    gap: 24px;
    width: 100%;
    padding-inline: 32px;
}

@media (max-width: 900px) {
    .section-header__rule {
        padding-inline: 16px;
    }
}

.section-header__line {
    display: block;
    flex: 1 1 0%;
    min-width: 24px;
    height: 1px;
    background-color: rgba(255, 250, 244, 0.167);
}

.section-header__label {
    flex-shrink: 0;
    font-family: "Nunito Sans";
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-cream);
    margin: 0;
}

/*====== PRODUCT CARD ====== */

li.product-card-item.product.type-product {
    list-style: none;
    padding: 0;
    margin: 0;
    align-self: stretch !important;
}

.wc-block-product-template.is-flex-container,
.wc-block-product-template__responsive {
    align-items: stretch !important;
}

.product-card-item.product.type-product .product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--color-cream);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(29, 37, 24, .1);
    border: 1px solid rgba(212, 212, 212, 0.5);

    container-type: inline-size;
    container-name: product-card;
}

.product-card-item.product.type-product .product-card__media {
    position: relative;
    display: block;
    aspect-ratio: 6 / 4;
    overflow: hidden;
}

.product-card-item.product.type-product .product-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}

.product-card-item.product.type-product .product-card:hover .product-card__media img {
    transform: scale(1.06);
}

.product-card-item.product.type-product .product-card__tag {
    position: absolute;
    left: 16px;
    padding: 5px 10px 4px;
    border-radius: 999px;
    font-family: "Nunito Sans";
    font-size: 9px;
    font-size: clamp(9px, 2.6cqw, 11px);
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.product-card-item.product.type-product .product-card__tag--top {
    top: 16px;
    background-color: var(--color-gold);
    color: var(--color-plum);
    border: 1px solid var(--color-gold-dark);
}

.product-card-item.product.type-product .product-card__tag--bottom {
    bottom: 16px;
    background-color: var(--color-cream);
    color: var(--color-forest-dark);
    border: 1px solid #0005;
}

.product-card-item.product.type-product .product-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 14px;
    padding: clamp(12px, 4.5cqw, 20px);
}

.product-card-item.product.type-product .product-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.product-card-item.product.type-product .product-card__title {
    margin: 0;
    font-family: "Merriweather";
    font-size: 14px;
    font-size: clamp(14px, 4.6cqw, 19px);
    font-weight: 700;
    line-height: 1.3;
}

.product-card-item.product.type-product .product-card__title a {
    color: var(--color-black-green);
    text-decoration: none;
    font-family: "Merriweather";
    font-size: 14px;
    font-size: clamp(14px, 4.6cqw, 19px);
    font-weight: 700;
    line-height: 1.3;
}

.product-card-item.product.type-product .product-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
}

.product-card-item.product.type-product .product-card__specs {
    display: flex;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.product-card-item.product.type-product .product-card__specs::before,
.product-card-item.product.type-product .product-card__specs::after {
    content: none;
    display: none;
}

.product-card-item.product.type-product .product-card__spec {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    width: clamp(26px, 9cqw, 38px);
    height: clamp(26px, 9cqw, 38px);
    border: 2px solid var(--color-green);
    border-radius: 50%;
    overflow: hidden;
    font-family: "Nunito Sans";
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-forest-dark);
}

.product-card-item.product.type-product .product-card__spec img {
    width: 60%;
    height: 60%;
    object-fit: contain;
}

.product-card-item.product.type-product .product-card--dark .product-card__spec {
    border-color: var(--color-navy-light);
}

.product-card-item.product.type-product .product-card__price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    margin-left: auto;
}

.product-card-item.product.type-product .product-card__amount {
    font-family: "Nunito Sans";
    font-size: 14px;
    font-size: clamp(14px, 4.2cqw, 17px);
    font-weight: 700;
    color: var(--color-green);
    white-space: nowrap;
}

.product-card-item.product.type-product .product-card--dark .product-card__amount {
    color: var(--color-navy-light);
}

.product-card-item.product.type-product .product-card__amount .woocommerce-price-suffix {
    display: none;
}

.product-card-item.product.type-product .product-card__amount .price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.product-card-item.product.type-product .product-card__amount del {
    font-size: 12px;
    font-weight: 400;
    color: rgba(29, 37, 24, .55);
    text-decoration: line-through;
}

.product-card-item.product.type-product .product-card__amount ins {
    text-decoration: none;
}

.product-card-item.product.type-product .product-card__price-unit {
    font-size: 12px;
    font-weight: 400;
    color: rgba(29, 37, 24, .55);
}

/*====== HERO SPLIT (block: hero) ====== */

.hero-split {
    position: relative;
    display: flex;
    min-height: 90vh;
    isolation: isolate;
}

.hero-split__panel {
    position: relative;
    flex: 0 1 50%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 100%;
    padding: 32px 32px clamp(48px, 6vw, 96px);
    background-size: cover;
    background-position: center;
    text-decoration: none;
    color: var(--color-cream);
    overflow: hidden;
    transition: flex-basis .4s ease;
}

.hero-split__panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-split__panel--left::before {
    background: linear-gradient(180deg, rgba(29, 37, 24, .45) 0%, rgba(29, 37, 24, .8) 100%);
}

.hero-split__panel--right::before {
    background: linear-gradient(180deg, rgba(26, 58, 82, .45) 0%, rgba(13, 35, 54, .82) 100%);
}

.hero-split__shop,
.hero-split__content {
    position: relative;
    z-index: 1;
}

.hero-split__shop {
    position: absolute;
    top: 24px;
    padding: 8px 12px;
    border-radius: 999px;
    font-family: "Nunito Sans";
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.hero-split__panel--left .hero-split__shop {
    left: 24px;
    background-color: var(--color-forest-dark);
    color: var(--color-cream);
}

.hero-split__panel--right .hero-split__shop {
    right: 24px;
    background-color: var(--color-gold);
    color: var(--color-black-green);
}

.hero-split__content {
    max-width: 520px;
}

.hero-split__label {
    display: block;
    margin-bottom: 12px;
    font-family: "Nunito Sans";
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-gold);
}

.hero-split__title {
    margin-bottom: 20px;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.15;
    color: var(--color-cream);
    font-weight: 700;
}

.hero-split__description {
    margin-bottom: 32px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-mint-light);
}

.hero-split__panel--right .hero-split__description {
    color: var(--color-ice);
}

.hero-split__divider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    z-index: 2;
    width: 3px;
    background-color: var(--color-gold);
    transform: translateX(-50%);
    pointer-events: none;
    transition: left .4s ease;
}

.hero-split__vs {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 30px;
    height: 30px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background-color: var(--color-gold);
    color: var(--color-black-green);
    font-family: "Nunito Sans";
    font-size: 14px;
    font-weight: 700;
    transition: left .4s ease;
}

@media (min-width: 901px) {
    .hero-split.is-hover-left .hero-split__panel--left {
        flex-basis: 62%;
    }

    .hero-split.is-hover-left .hero-split__panel--right {
        flex-basis: 38%;
    }

    .hero-split.is-hover-left .hero-split__divider,
    .hero-split.is-hover-left .hero-split__vs {
        left: 62%;
    }

    .hero-split.is-hover-right .hero-split__panel--left {
        flex-basis: 38%;
    }

    .hero-split.is-hover-right .hero-split__panel--right {
        flex-basis: 62%;
    }

    .hero-split.is-hover-right .hero-split__divider,
    .hero-split.is-hover-right .hero-split__vs {
        left: 38%;
    }
}

@media (max-width: 900px) {

    .hero-split {
        flex-direction: column;
        min-height: auto;
        height: 100vh;
        height: 100dvh;
        overflow-y: auto;
        scroll-snap-type: y mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .hero-split__panel {
        flex-shrink: 0;
        scroll-snap-align: start;
        min-height: 88vh;
        height: 88vh;
        height: 88dvh;
        padding-inline: 16px;
    }

    .hero-split__divider,
    .hero-split__vs {
        display: none;
    }
}

/*====== PRODUCT HIGHLIGHTS (block: product_highlights) ====== */

.product-highlights {
    padding-block: 64px;
    background-color: var(--color-cream);
    color: var(--color-black-green);
}

.product-highlights--dark {
    background-color: var(--color-navy);
    color: var(--color-ice);
}

.product-highlights__intro {
    display: flex;
    align-items: center;
    gap: 64px;
    margin-bottom: 48px;
}

.product-highlights--image-left .product-highlights__intro {
    flex-direction: row-reverse;
}

.product-highlights__content {
    flex: 1 1 420px;
    max-width: 520px;
}

.product-highlights__eyebrow {
    display: block;
    margin-bottom: 12px;
    font-family: "Nunito Sans";
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-gold-dark);
}

.product-highlights--dark .product-highlights__eyebrow {
    color: var(--color-gold);
}

.product-highlights__title {
    margin-bottom: 20px;
    font-size: clamp(30px, 3.4vw, 42px);
    line-height: 1.15;
    font-weight: 700;
    color: var(--color-black-green);
}

.product-highlights--dark .product-highlights__title {
    color: var(--color-cream);
}

.product-highlights__description {
    margin-bottom: 24px;
    font-size: 16px;
    line-height: 1.5;
    color: rgba(29, 37, 24, .7);
}

.product-highlights--dark .product-highlights__description {
    color: var(--color-ice);
}

.product-highlights__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 32px;
}

.product-highlights__tag {
    padding: 8px 14px;
    border: 1px solid var(--color-green);
    border-radius: 999px;
    font-family: "Nunito Sans";
    font-size: 12px;
    font-weight: 600;
    color: var(--color-forest-dark);
}

.product-highlights--dark .product-highlights__tag {
    border-color: rgba(232, 240, 247, .35);
    color: var(--color-ice);
    background-color:#E8F0F722;
}

.product-highlights__media {
    position: relative;
    flex: 1 1 480px;
    aspect-ratio: 16 / 11;
    overflow: hidden;
}

.product-highlights__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-highlights__badge {
    position: absolute;
    left: 24px;
    bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 22px;
    background-color: var(--color-forest-dark);
}

.product-highlights--image-left .product-highlights__badge {
    left: auto;
    right: 24px;
}

.product-highlights--dark .product-highlights__badge {
    background-color: var(--color-gold);
}

.product-highlights__badge-sub {
    font-family: "Nunito Sans";
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-gold);
}

.product-highlights--dark .product-highlights__badge-sub {
    color: var(--color-black-green);
}

.product-highlights__badge-text {
    font-family: "Merriweather";
    font-size: 20px;
    font-weight: 700;
    color: var(--color-cream);
}

.product-highlights--dark .product-highlights__badge-text {
    color: var(--color-black-green);
}

.product-highlights__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

@media (max-width: 1024px) {
    .product-highlights__intro {
        flex-direction: column;
        align-items: stretch;
        gap: 32px;
    }

    .product-highlights--image-left .product-highlights__intro {
        flex-direction: column;
    }

    .product-highlights__content,
    .product-highlights__media {
        flex: none;
        max-width: none;
    }

    .product-highlights__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .product-highlights__grid {
        grid-template-columns: 1fr;
    }
}

/*====== SITE FOOTER (footer.php) ====== */

.site-footer__spacer {
    height: 64px;
    background-color: var(--color-cream);
}

.site-footer {
    position: relative;
    background-color: var(--color-black-green);
    color: var(--color-ice);
}

.site-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-gold-dark), var(--color-gold) 50%, var(--color-gold-dark));
}

.site-footer__grid {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    padding-block: 56px;
}

.site-footer__brand {
    flex: 1 1 260px;
    max-width: 280px;
}

.site-footer__logo {
    display: inline-flex;
    align-items: center;
    margin-bottom: 20px;
    text-decoration: none;
    color: var(--color-cream);
}

.site-footer__logo img {
    display: block;
    height: 40px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
}

.site-footer__logo-text {
    font-family: "Merriweather";
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.site-footer__tagline {
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(232, 240, 247, .7);
}

.site-footer__social {
    display: flex;
    gap: 10px;
}

.site-footer__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(232, 240, 247, .35);
    color: var(--color-ice);
    text-decoration: none;
    transition: border-color .2s ease, color .2s ease;
}

.site-footer__social-link:hover {
    border-color: var(--color-gold);
    color: var(--color-gold);
}

.site-footer__social-icon {
    font-size: 12px;
    font-weight: 700;
    text-transform: lowercase;
}

.dashicons.site-footer__social-icon {
    font-size: 18px;
    font-weight: 400;
    text-transform: none;
    line-height: 1;
}

img.site-footer__social-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.site-footer__column {
    flex: 1 1 140px;
}

.site-footer__column-title {
    display: block;
    margin-bottom: 18px;
    font-family: "Nunito Sans";
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-green);
}

.site-footer__links {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.site-footer__links a {
    font-size: 14px;
    color: rgba(232, 240, 247, .85);
    text-decoration: none;
    transition: color .2s ease;
}

.site-footer__links a:hover {
    color: var(--color-gold);
}

.site-footer__bottom {
    position: relative;
    z-index: 1;
    border-top: 1px solid rgba(232, 240, 247, .12);
}

.site-footer__bottom-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-block: 20px;
}

.site-footer__copyright {
    font-size: 13px;
    color: rgba(232, 240, 247, .6);
}

.site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.site-footer__legal a {
    font-size: 13px;
    color: rgba(232, 240, 247, .6);
    text-decoration: none;
    transition: color .2s ease;
}

.site-footer__legal a:hover {
    color: var(--color-gold);
}

/*====== PRODUCT OVERVIEW (block: product_overview + shop/category archives) ====== */

.product-overview {
    background-color: var(--color-cream);
}

.product-overview__hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 260px;
    padding-block: 32px;
    background-color: var(--color-forest-dark);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.product-overview__hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(29, 37, 24, .55), rgba(29, 37, 24, .78));
}

.product-overview__hero-inner {
    position: relative;
    z-index: 1;
}

.product-overview__breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-family: "Nunito Sans";
    font-size: 13px;
    color: rgba(255, 250, 244, .7);
}

.product-overview__breadcrumb a {
    color: rgba(255, 250, 244, .7);
    text-decoration: none;
    transition: color .2s ease;
}

.product-overview__breadcrumb a:hover {
    color: var(--color-gold);
}

.product-overview__breadcrumb span[aria-hidden] {
    color: rgba(255, 250, 244, .4);
}

.product-overview__title {
    margin: 0 0 8px;
    font-family: "Merriweather";
    font-size: 34px;
    font-weight: 700;
    color: var(--color-cream);
}

.product-overview__count {
    margin: 0;
    font-family: "Nunito Sans";
    font-size: 14px;
    color: rgba(255, 250, 244, .8);
}

.product-overview__body {
    display: flex;
    align-items: flex-start;
    gap: 32px;
    padding-block: 48px;
}

.product-overview__sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 0 0 260px;
    width: 260px;
}

.product-overview__panel {
    background-color: var(--color-cream);
    border: 1px solid rgba(29, 37, 24, .1);
    overflow: hidden;
}

.product-overview__panel-title {
    display: block;
    width: 100%;
    border: 0;
    padding: 0;
    font: inherit;
    text-align: left;
    cursor: default;
}

.product-overview__panel-title.section-header .section-header__inner {
    padding-block: 10px;
}

.product-overview__panel-title.section-header .section-header__rule {
    padding-inline: 16px;
    gap: 12px;
}

.product-overview__panel-chevron {
    display: none;
}

.product-overview__panel-body-inner {
    padding: 20px;
}

@media (max-width: 900px) {

    .product-overview__panel-title {
        cursor: pointer;
    }

    .product-overview__panel-chevron {
        display: block;
        position: absolute;
        right: 16px;
        top: 50%;
        color: var(--color-cream);
        transform: translateY(-50%);
        transition: transform .3s ease;
    }

    .product-overview__panel.is-expanded .product-overview__panel-chevron {
        transform: translateY(-50%) rotate(180deg);
    }

    .product-overview__panel-body {
        max-height: 0;
        overflow: hidden;
        transition: max-height .3s ease;
    }
}

.product-overview__cat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

@media (max-width: 900px) {
    .product-overview__cat-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.product-overview__cat-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-width: 0;
    aspect-ratio: 1 / 1;
    gap: 8px;
    padding: 12px 6px;
    background-color: transparent;
    border: 1px solid rgba(29, 37, 24, .12);
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease;
}

.product-overview__cat-btn:hover {
    border-color: var(--color-green);
}

.product-overview__cat-btn.is-active {
    background-color: var(--color-gold);
    border-color: var(--color-gold-dark);
}

.product-overview__cat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--color-green);
}

.product-overview__cat-btn.is-active .product-overview__cat-icon {
    color: var(--color-black-green);
}

.product-overview__cat-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-overview__cat-label {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    font-family: "Nunito Sans";
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    color: var(--color-black-green);
}

.product-overview__label-list {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
}

.product-overview__label-list li {
    border-bottom: 1px solid rgba(29, 37, 24, .08);
}

.product-overview__label-list li:last-child {
    border-bottom: 0;
}

.product-overview__label-btn {
    display: block;
    width: 100%;
    padding: 10px;
    margin-inline: -10px;
    width: calc(100% + 20px);
    background-color: transparent;
    border: 1px solid transparent;
    font-family: "Nunito Sans";
    font-size: 13px;
    line-height: 1.5;
    text-align: left;
    color: rgba(29, 37, 24, .75);
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.product-overview__label-btn:hover {
    color: var(--color-black-green);
}

.product-overview__label-btn.is-active {
    background-color: var(--color-gold);
    border-color: var(--color-gold-dark);
    color: var(--color-black-green);
}

.product-overview__label-btn strong {
    color: inherit;
}

.product-overview__main {
    flex: 1;
    min-width: 0;
}

.product-overview__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 20px;
    margin-bottom: 24px;
    border-bottom: 1px solid rgba(29, 37, 24, .1);
}

.product-overview__result-count {
    margin: 0;
    font-family: "Nunito Sans";
    font-size: 14px;
    color: rgba(29, 37, 24, .7);
}

.product-overview__sort {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.product-overview__sort-label {
    margin-right: 4px;
    font-family: "Nunito Sans";
    font-size: 13px;
    color: rgba(29, 37, 24, .6);
}

.product-overview__sort-btn {
    padding: 8px 16px;
    background-color: transparent;
    border: 1px solid rgba(29, 37, 24, .15);
    font-family: "Nunito Sans";
    font-size: 12px;
    font-weight: 700;
    color: var(--color-black-green);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.product-overview__sort-btn:hover {
    border-color: var(--color-gold-dark);
}

.product-overview__sort-btn.is-active {
    background-color: var(--color-gold);
    border-color: var(--color-gold-dark);
    color: var(--color-black-green);
}

.product-overview__results {
    transition: opacity .15s ease;
}

.product-overview.is-loading .product-overview__results {
    opacity: .5;
    pointer-events: none;
}

.product-overview__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.product-overview__empty {
    padding: 40px 0;
    font-family: "Nunito Sans";
    font-size: 14px;
    font-style: italic;
    color: rgba(29, 37, 24, .6);
}

.product-overview__pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 40px;
}

.product-overview__page-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: transparent;
    border: 1px solid rgba(29, 37, 24, .15);
    font-family: "Nunito Sans";
    font-size: 13px;
    font-weight: 700;
    color: var(--color-black-green);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.product-overview__page-btn.is-active {
    background-color: var(--color-forest-dark);
    border-color: var(--color-forest-dark);
    color: var(--color-cream);
}

.product-overview--dark .product-overview__page-btn.is-active {
    background-color: var(--color-navy-light);
    border-color: var(--color-navy-light);
}

@media (max-width: 900px) {
    .product-overview__body {
        flex-direction: column;
        padding-block: 32px;
    }

    .product-overview__sidebar {
        flex: none;
        width: 100%;
        flex-direction: column;
    }

    .product-overview__main {
        width: 100%;
    }

    .product-overview__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

@media (max-width: 480px) {
    .product-overview__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .product-overview__title {
        font-size: 26px;
    }

    .product-overview__toolbar {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 700px) {
    .site-footer__bottom-inner {
        flex-direction: column;
        align-items: flex-start;
    }
}

/*====== SINGLE PRODUCT ====== */

.product-single {
    background-color: var(--color-cream);
}

.product-single__breadcrumb-row {
    padding-block: 16px;
    background-color: var(--color-mint-light);
}

.product-single--dark .product-single__breadcrumb-row {
    background-color: var(--color-ice);
}

.product-single__breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-family: "Nunito Sans";
    font-size: 14px;
    color: rgba(29, 37, 24, .65);
}

.product-single__breadcrumb a {
    color: rgba(29, 37, 24, .65);
    text-decoration: none;
    transition: color .2s ease;
}

.product-single__breadcrumb a:hover {
    color: var(--color-green);
}

.product-single--dark .product-single__breadcrumb a:hover {
    color: var(--color-navy-light);
}

.product-single__breadcrumb span[aria-hidden] {
    color: rgba(29, 37, 24, .35);
}

.product-single__top {
    display: flex;
    align-items: flex-start;
    gap: 56px;
    padding-block: 48px;
}

.product-single__gallery {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1 1 0%;
    min-width: 0;
}

.product-single__gallery-main {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.product-single__gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-single__tag {
    position: absolute;
    left: 16px;
    padding: 5px 10px 4px;
    border-radius: 999px;
    font-family: "Nunito Sans";
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.product-single__tag--top {
    top: 16px;
    background-color: var(--color-gold);
    color: var(--color-plum);
    border: 1px solid var(--color-gold-dark);
}

.product-single__tag--bottom {
    bottom: 16px;
    background-color: var(--color-cream);
    color: var(--color-forest-dark);
    border: 1px solid #0005;
}

.product-single__gallery-thumbs-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.product-single__gallery-thumbs {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.product-single__gallery-thumbs::-webkit-scrollbar {
    display: none;
}

.product-single__gallery-nav {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background-color: var(--color-cream);
    border: 1px solid rgba(29, 37, 24, .2);
    border-radius: 50%;
    color: var(--color-forest-dark);
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease;
}

.product-single__gallery-nav .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.product-single__gallery-nav:hover {
    background-color: var(--color-forest-dark);
    border-color: var(--color-forest-dark);
    color: var(--color-cream);
}

.product-single__gallery-nav[hidden] {
    display: none;
}

.product-single__gallery-nav:disabled {
    opacity: .3;
    cursor: default;
    background-color: var(--color-cream);
    border-color: rgba(29, 37, 24, .2);
    color: var(--color-forest-dark);
}

.product-single__gallery-thumb {
    width: 88px;
    height: 88px;
    flex-shrink: 0;
    padding: 0;
    background: none;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color .2s ease;
}

.product-single__gallery-thumb.is-active,
.product-single__gallery-thumb:hover {
    border-color: var(--color-green);
}

.product-single__gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-single__summary {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    flex: 1 1 0%;
    min-width: 0;
}

.product-single__title {
    margin: 0;
    font-family: "Merriweather";
    font-size: 38px;
    font-weight: 700;
    color: var(--color-black-green);
}

.product-single__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
}

.product-single__price-amount {
    font-family: "Merriweather";
    font-size: 32px;
    font-weight: 700;
    color: var(--color-green);
}

.product-single--dark .product-single__price-amount {
    color: var(--color-navy-light);
}

.product-single__price-amount .woocommerce-price-suffix {
    display: none;
}

.product-single__price-unit,
.product-single__price-tax {
    font-family: "Nunito Sans";
    font-size: 14px;
    color: rgba(29, 37, 24, .55);
}

.product-single__specs {
    display: flex;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.product-single__spec {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 2px solid var(--color-green);
    border-radius: 50%;
    overflow: hidden;
    font-family: "Nunito Sans";
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-forest-dark);
}

.product-single--dark .product-single__spec {
    border-color: var(--color-navy-light);
}

.product-single--dark .product-single__gallery-nav:hover {
    background-color: var(--color-navy-light);
    border-color: var(--color-navy-light);
}

.product-single__spec img {
    width: 60%;
    height: 60%;
    object-fit: contain;
}

.product-single__description {
    max-width: 60ch;
}

.product-single__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.product-single__tags a {
    display: inline-block;
    padding: 6px 16px;
    border: 1px solid rgba(29, 37, 24, .2);
    border-radius: 999px;
    font-family: "Nunito Sans";
    font-size: 13px;
    color: var(--color-black-green);
    text-decoration: none;
    transition: border-color .2s ease, color .2s ease;
}

.product-single__tags a:hover {
    border-color: var(--color-green);
    color: var(--color-green);
}

.product-single__back {
    font-family: "Nunito Sans";
    font-size: 14px;
    color: rgba(29, 37, 24, .6);
    text-decoration: none;
    transition: color .2s ease;
}

.product-single__back:hover {
    color: var(--color-green);
}

.product-single__calculator {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    padding: 24px;
    background-color: var(--color-mint-light);
    border: 1px solid rgba(107, 136, 89, .3);
}

.product-single__calculator-title {
    font-family: "Nunito Sans";
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-forest-dark);
}

.product-single__calculator-input-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    font-family: "Nunito Sans";
    font-size: 14px;
    font-weight: 700;
    color: var(--color-black-green);
}

.product-single__calculator-stepper {
    display: flex;
    align-items: stretch;
    border: 1px solid rgba(29, 37, 24, .2);
    background-color: var(--color-cream);
}

.product-single__calculator-stepper button {
    width: 36px;
    background: none;
    border: 0;
    font-size: 16px;
    color: var(--color-forest-dark);
    cursor: pointer;
}

.product-single__calculator-stepper input {
    width: 64px;
    border: 0;
    border-left: 1px solid rgba(29, 37, 24, .2);
    border-right: 1px solid rgba(29, 37, 24, .2);
    text-align: center;
    font-family: "Nunito Sans";
    font-size: 14px;
    font-weight: 700;
    color: var(--color-black-green);
    background: none;
    appearance: textfield;
}

.product-single__calculator-results {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding-block: 16px;
    border-block: 1px solid rgba(29, 37, 24, .12);
}

.product-single__calculator-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 0;
    text-align: center;
}

.product-single__calculator-result-value {
    font-family: "Merriweather";
    font-size: clamp(15px, 4.2vw, 22px);
    font-weight: 700;
    color: var(--color-black-green);
    white-space: nowrap;
}

.product-single__calculator-result-label {
    font-family: "Nunito Sans";
    font-size: 11px;
    color: rgba(29, 37, 24, .6);
}

.product-single__calculator-note {
    margin: 0;
    font-family: "Nunito Sans";
    font-size: 12px;
    color: rgba(29, 37, 24, .65);
}

.product-single__calculator-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
}

.product-single__cart.woocommerce form.cart {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
}

.product-single__cart.woocommerce .quantity {
    display: inline-flex;
    align-items: stretch;
    margin-right: 12px;
    border: 1px solid rgba(29, 37, 24, .2);
    background-color: var(--color-cream);
}

.product-single__cart.woocommerce .quantity .qty {
    width: 48px;
    padding: 12px 4px;
    border: 0;
    border-left: 1px solid rgba(29, 37, 24, .2);
    border-right: 1px solid rgba(29, 37, 24, .2);
    font-family: "Nunito Sans";
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    background: none;
    appearance: textfield;
}

.product-single__cart.woocommerce .quantity .qty::-webkit-inner-spin-button,
.product-single__cart.woocommerce .quantity .qty::-webkit-outer-spin-button {
    appearance: none;
    margin: 0;
}

.product-single__qty-btn {
    width: 36px;
    background: none;
    border: 0;
    font-size: 16px;
    color: var(--color-forest-dark);
    cursor: pointer;
}

.product-single__cart.woocommerce button.single_add_to_cart_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0%;
    min-width: 0;
    padding: 14px 28px;
    background-color: var(--color-gold);
    color: var(--color-plum);
    border: 1px solid var(--color-gold-dark);
    font-family: "Nunito Sans";
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .2s ease;
}

.product-single__cart.woocommerce button.single_add_to_cart_button:hover {
    background-color: var(--color-cream);
}

/* WooCommerce's own disabled/loading button state ships its default purple
   brand colour with its own specificity/!important, same fight as the cart
   page's update_cart button — needs !important here too to actually win. */
.product-single__cart.woocommerce button.single_add_to_cart_button:disabled,
.product-single__cart.woocommerce button.single_add_to_cart_button.disabled,
.product-single__cart.woocommerce button.single_add_to_cart_button.loading {
    background-color: var(--color-gold) !important;
    color: var(--color-plum) !important;
    border-color: var(--color-gold-dark) !important;
    opacity: .6;
    cursor: not-allowed;
}

.product-single__trust-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    list-style: none;
    margin: 0;
    padding: 24px 0;
    border-top: 1px solid rgba(29, 37, 24, .1);
    border-bottom: 1px solid rgba(29, 37, 24, .1);
}

.product-single__trust-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: "Nunito Sans";
    font-size: 14px;
    color: var(--color-black-green);
}

.product-single__trust-badge-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.product-single__tabs-panels {
    padding-block: 48px;
}

.product-single__tabs-nav {
    margin-bottom: 24px;
}

.product-single__tabs-buttons-row {
    display: flex;
    gap: 8px;
    margin-bottom: 0;
}

.product-single__tab-btn {
    padding: 12px 28px;
    background-color: var(--color-cream);
    border: 1px solid rgba(29, 37, 24, .2);
    font-family: "Nunito Sans";
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-forest-dark);
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.product-single__tab-btn:hover {
    border-color: var(--color-green);
}

.product-single__tab-btn.is-active {
    background-color: var(--color-forest-dark);
    border-color: var(--color-forest-dark);
    color: var(--color-cream);
}

.product-single--dark .product-single__tab-btn.is-active {
    background-color: var(--color-navy-light);
    border-color: var(--color-navy-light);
}

.product-single__tab-panel {
    padding-top: 8px;
}

.product-single__specs-table {
    border: 1px solid rgba(29, 37, 24, .1);
}

.product-single__specs-row {
    display: flex;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(29, 37, 24, .08);
}

.product-single__specs-row:last-child {
    border-bottom: 0;
}

.product-single__specs-row:nth-child(even) {
    background-color: var(--color-mint-light);
}

.product-single__specs-table--dark .product-single__specs-row:nth-child(even) {
    background-color: var(--color-ice);
}

.product-single__specs-label {
    flex: 0 0 240px;
    font-family: "Nunito Sans";
    font-size: 14px;
    font-weight: 700;
    color: var(--color-black-green);
}

.product-single__specs-value {
    font-family: "Nunito Sans";
    font-size: 14px;
    color: rgba(29, 37, 24, .75);
}

@media (max-width: 900px) {
    .product-single__top {
        flex-direction: column;
        align-items: stretch;
        gap: 32px;
        padding-block: 32px;
    }

    .product-single__specs-label {
        flex: 0 0 160px;
    }
}

@media (max-width: 560px) {
    .product-single__title {
        font-size: 28px;
    }

    .product-single__price-amount {
        font-size: 26px;
    }

    .product-single__calculator {
        padding: 16px;
    }

    .product-single__calculator-results {
        gap: 4px;
        padding-inline: 0;
    }

    .product-single__calculator-result-value {
        font-size: clamp(13px, 4.5vw, 18px);
    }

    .product-single__calculator-result-label {
        font-size: 10px;
    }

    .product-single__specs-row {
        flex-direction: column;
        gap: 4px;
    }

    .product-single__specs-label {
        flex: none;
    }

    .product-single__tabs-buttons-row {
        padding-inline: 0;
    }

    .product-single__tab-btn {
        flex: 1 1 0%;
        padding: 12px 14px;
        font-size: 11px;
        text-align: center;
    }
}

/*====== BLOG OVERVIEW (block: blog_overview + home.php) ====== */

.blog-overview {
    background-color: var(--color-cream);
}

.blog-overview__hero {
    padding-block: 56px;
    background-color: var(--color-forest-dark);
}

.blog-overview__breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-family: "Nunito Sans";
    font-size: 13px;
    color: rgba(255, 250, 244, .7);
}

.blog-overview__breadcrumb a {
    color: rgba(255, 250, 244, .7);
    text-decoration: none;
    transition: color .2s ease;
}

.blog-overview__breadcrumb a:hover {
    color: var(--color-gold);
}

.blog-overview__title {
    margin: 0 0 12px;
    font-family: "Merriweather";
    font-size: 40px;
    font-weight: 700;
    color: var(--color-cream);
}

.blog-overview__subtitle {
    margin: 0;
    max-width: 60ch;
    font-family: "Nunito Sans";
    font-size: 15px;
    color: rgba(255, 250, 244, .75);
}

.blog-overview__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-block: 20px;
    border-bottom: 1px solid rgba(29, 37, 24, .1);
}

.blog-overview__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.blog-overview__filter-btn {
    padding: 10px 20px;
    background-color: var(--color-cream);
    border: 1px solid rgba(29, 37, 24, .15);
    border-radius: 999px;
    font-family: "Nunito Sans";
    font-size: 13px;
    font-weight: 700;
    color: var(--color-black-green);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.blog-overview__filter-btn:hover {
    border-color: var(--color-black-green);
}

.blog-overview__filter-btn.is-active {
    background-color: var(--color-black-green);
    border-color: var(--color-black-green);
    color: var(--color-cream);
}

.blog-overview__count {
    margin: 0;
    font-family: "Nunito Sans";
    font-size: 14px;
    color: rgba(29, 37, 24, .55);
}

.blog-overview__results {
    padding-block: 48px;
    transition: opacity .15s ease;
}

.blog-overview.is-loading .blog-overview__results {
    opacity: .5;
    pointer-events: none;
}

.blog-overview__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.blog-overview__empty {
    padding: 40px 0;
    font-family: "Nunito Sans";
    font-size: 14px;
    font-style: italic;
    color: rgba(29, 37, 24, .6);
}

.blog-overview__pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 40px;
}

.blog-overview__page-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: transparent;
    border: 1px solid rgba(29, 37, 24, .15);
    font-family: "Nunito Sans";
    font-size: 13px;
    font-weight: 700;
    color: var(--color-black-green);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.blog-overview__page-btn.is-active {
    background-color: var(--color-forest-dark);
    border-color: var(--color-forest-dark);
    color: var(--color-cream);
}

.blog-card {
    display: flex;
    flex-direction: column;
    background-color: var(--color-cream);
    border: 1px solid rgba(212, 212, 212, .5);
    box-shadow: 0 4px 20px rgba(29, 37, 24, .1);
    overflow: hidden;
}

.blog-card__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background-color: var(--color-mint-light);
}

.blog-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}

.blog-card:hover .blog-card__media img {
    transform: scale(1.06);
}

.blog-card__badge {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 5px 12px;
    border-radius: 999px;
    font-family: "Nunito Sans";
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-cream);
}

.blog-card__badge--groen {
    background-color: var(--color-green);
}

.blog-card__badge--navy {
    background-color: var(--color-navy-light);
}

.blog-card__badge--goud {
    background-color: var(--color-gold-dark);
}

.blog-card__badge--grijs {
    background-color: rgba(29, 37, 24, .6);
}

.blog-card__play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background-color: rgba(255, 250, 244, .9);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.blog-card__play .dashicons {
    font-size: 22px;
    width: 22px;
    height: 22px;
    color: var(--color-black-green);
    margin-left: 2px;
}

.blog-card__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
}

.blog-card__meta {
    margin: 0;
    font-family: "Nunito Sans";
    font-size: 13px;
    font-weight: 700;
    color: var(--color-green);
}

.blog-card__title {
    margin: 0;
    font-family: "Merriweather";
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
}

.blog-card__title a {
    color: var(--color-black-green);
    text-decoration: none;
}

.blog-card__title a:hover {
    color: var(--color-green);
}

.blog-card__excerpt {
    margin: 0;
    font-family: "Nunito Sans";
    font-size: 14px;
    line-height: 1.6;
    color: rgba(29, 37, 24, .7);
}

.blog-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
}

.blog-card__tags a {
    display: inline-block;
    padding: 4px 14px;
    border: 1px solid rgba(29, 37, 24, .2);
    border-radius: 999px;
    font-family: "Nunito Sans";
    font-size: 12px;
    color: var(--color-black-green);
    text-decoration: none;
    transition: border-color .2s ease, color .2s ease;
}

.blog-card__tags a:hover {
    border-color: var(--color-green);
    color: var(--color-green);
}

@media (max-width: 900px) {
    .blog-overview__hero {
        padding-block: 40px;
    }

    .blog-overview__title {
        font-size: 30px;
    }

    .blog-overview__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 560px) {
    .blog-overview__toolbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .blog-overview__grid {
        grid-template-columns: 1fr;
    }
}

/*====== BLOG SINGLE (single.php) ====== */

.blog-single {
    background-color: var(--color-cream);
}

.blog-single__hero {
    position: relative;
    padding-block: 56px;
    background-color: var(--color-forest-dark);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.blog-single__hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(29, 37, 24, .55), rgba(29, 37, 24, .78));
}

.blog-single__hero-inner {
    position: relative;
    z-index: 1;
}

.blog-single__breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    font-family: "Nunito Sans";
    font-size: 13px;
    color: rgba(255, 250, 244, .7);
}

.blog-single__breadcrumb a {
    color: rgba(255, 250, 244, .7);
    text-decoration: none;
    transition: color .2s ease;
}

.blog-single__breadcrumb a:hover {
    color: var(--color-gold);
}

.blog-single__badge {
    position: static;
    display: inline-block;
    margin-bottom: 16px;
}

.blog-single__title {
    margin: 0 0 12px;
    max-width: 20ch;
    font-family: "Merriweather";
    font-size: 40px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-cream);
}


.blog-single__body {
    padding-block: 48px;
}

.blog-single__video {
    position: relative;
    margin-bottom: 32px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.blog-single__video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.blog-single__tags {
    margin: 40px 0 0;
}

.blog-single__back-row {
    padding-block: 32px 48px;
}

@media (max-width: 900px) {
    .blog-single__hero {
        padding-block: 40px;
    }

    .blog-single__title {
        max-width: none;
        font-size: 28px;
    }
}

/*====== RICHTEXT (block: richtext) ====== */

.richtext-block {
    padding-block: 48px;
}

/*====== IMAGE ROW (block: image_row) ====== */

.image-row-block {
    padding-block: 48px;
}

.image-row-block__row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--image-row-gap, 24px);
}

.image-row-block__item {

    flex: 0 0 auto;
    width: calc((var(--image-row-width, 50) * 1%) - (var(--image-row-gap, 24px) * (100 - var(--image-row-width, 50)) / 100));
}

.image-row-block__item img {
    display: block;
    width: 100%;
    height: auto;
}

.image-row-block__row--equal-height .image-row-block__item {
    height: 360px;
}

.image-row-block__row--equal-height .image-row-block__item img {
    height: 100%;
    object-fit: cover;
}

.image-row-block__lightbox-trigger {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    background: none;
    border: 0;
    cursor: zoom-in;
}

.image-row-block__lightbox-trigger img {
    transition: opacity .2s ease;
}

.image-row-block__lightbox-trigger:hover img {
    opacity: .85;
}

@media (max-width: 700px) {
    .image-row-block__item {
        width: 100%;
    }

    .image-row-block__row--equal-height .image-row-block__item {
        height: 240px;
    }
}

.image-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    background-color: rgba(29, 37, 24, .92);
}

.image-lightbox[hidden] {
    display: none;
}

.image-lightbox__image {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .4);
}

.image-lightbox__close {
    position: fixed;
    top: 24px;
    right: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background-color: var(--color-cream);
    border: 1px solid var(--color-gold-dark);
    border-radius: 50%;
    color: var(--color-forest-dark);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

.image-lightbox__close:hover {
    background-color: var(--color-gold);
}

.image-lightbox__close .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
}

.image-lightbox__nav {
    position: fixed;
    top: 50%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    background-color: var(--color-cream);
    border: 1px solid var(--color-gold-dark);
    border-radius: 50%;
    color: var(--color-forest-dark);
    cursor: pointer;
    transform: translateY(-50%);
    transition: background-color .2s ease, color .2s ease;
}

.image-lightbox__nav:hover {
    background-color: var(--color-gold);
}

.image-lightbox__nav .dashicons {
    font-size: 22px;
    width: 22px;
    height: 22px;
}

.image-lightbox__nav--prev {
    left: 24px;
}

.image-lightbox__nav--next {
    right: 24px;
}

.image-lightbox__nav[hidden] {
    display: none;
}

body.image-lightbox-open {
    overflow: hidden;
}

@media (max-width: 560px) {
    .image-lightbox {
        padding: 16px;
    }

    .image-lightbox__close {
        top: 16px;
        right: 16px;
        width: 36px;
        height: 36px;
    }

    .image-lightbox__nav {
        width: 36px;
        height: 36px;
    }

    .image-lightbox__nav--prev {
        left: 8px;
    }

    .image-lightbox__nav--next {
        right: 8px;
    }
}

/*====== AANBEVOLEN PRODUCTEN (block: aanbevolen_producten) ====== */

.recommended-products {
    padding-block: 48px;
}

.recommended-products--creme {
    background-color: var(--color-cream);
}

.recommended-products--mint {
    background-color: var(--color-mint-light);
}

.recommended-products--ijs {
    background-color: var(--color-ice);
}

.recommended-products--bos {
    background-color: var(--color-forest-dark);
}

.recommended-products--navy {
    background-color: var(--color-navy-light);
}

.recommended-products__title {
    margin: 0 0 24px;
    font-family: "Merriweather";
    font-size: 28px;
    font-weight: 700;
    color: var(--color-black-green);
}

.recommended-products--bos .recommended-products__title,
.recommended-products--navy .recommended-products__title {
    color: var(--color-cream);
}

.recommended-products__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (max-width: 900px) {
    .recommended-products__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

@media (max-width: 480px) {
    .recommended-products__grid {
        grid-template-columns: 1fr;
    }
}

/*====== WOOCOMMERCE NOTICES ======
   wc_print_notices() output (added-to-cart/"cart updated"/errors) — shown on
   the cart, checkout, my-account, shop and single product pages, so this is
   deliberately global rather than scoped to one page. */

.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    list-style: none;
    margin: 0 0 24px;
    padding: 16px 20px;
    font-family: "Nunito Sans";
    font-size: 14px;
    border-left: 4px solid;
}

.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before {
    content: none !important;
}

.woocommerce-message {
    background-color: var(--color-mint-light);
    border-left-color: var(--color-green);
    color: var(--color-black-green);
}

.woocommerce-error {
    background-color: #FBEAEA;
    border-left-color: #b3261e;
    color: #6b1712;
}

.woocommerce-info {
    background-color: var(--color-ice);
    border-left-color: var(--color-navy-light);
    color: var(--color-navy-dark);
}

.woocommerce-error li {
    list-style: none;
}

.woocommerce-message .button,
.woocommerce-error .button,
.woocommerce-info .button {
    order: 2;
    margin-left: auto;
    padding: 8px 16px;
    background-color: var(--color-forest-dark);
    color: var(--color-cream);
    border: 0;
    font-family: "Nunito Sans";
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color .2s ease;
}

.woocommerce-message .button:hover,
.woocommerce-error .button:hover,
.woocommerce-info .button:hover {
    background-color: var(--color-black-green);
}

/* Added by js/checkout-notices.js — closes the notice, and every notice also
   auto-dismisses itself after 10 seconds regardless of whether this is used. */
.nordic-notice-close {
    order: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-left: auto;
    padding: 0;
    background: none;
    border: 0;
    font-size: 18px;
    line-height: 1;
    color: inherit;
    opacity: .6;
    cursor: pointer;
}

.nordic-notice-close:hover {
    opacity: 1;
}

/*====== WOOCOMMERCE CART PAGE ======
   No cart.php template override — this reskins WooCommerce's own generated
   markup in place with CSS only, so the built-in AJAX quantity/coupon updates
   keep working exactly as WooCommerce wrote them. Cross-sell items reuse
   template-parts/product-card.php already (via woocommerce/content-product.php),
   so they need no extra styling here beyond the grid they sit in. */

body.woocommerce-cart {
    background-color: var(--color-cream);
}

body.woocommerce-cart .entry-content {
    max-width: 1232px;
    padding-inline: 32px;
    padding-block: 48px;
    margin-inline: auto;
}

body.woocommerce-cart .entry-title {
    margin: 0 0 32px;
    font-family: "Merriweather";
    font-size: 34px;
    font-weight: 700;
    color: var(--color-black-green);
}

body.woocommerce-cart .woocommerce {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 48px;
}

body.woocommerce-cart .woocommerce-notices-wrapper {
    flex: 1 1 100%;
    width: 100%;
}

body.woocommerce-cart .woocommerce-cart-form {
    flex: 2 1 600px;
    min-width: 0;
    padding: 24px;
    background-color: #fff;
    border: 1px solid rgba(29, 37, 24, .1);
}

body.woocommerce-cart .cart-form-header {
    margin: -24px -24px 16px;
}

body.woocommerce-cart .cart-form-header .section-header__inner {
    padding-block: 10px;
}

body.woocommerce-cart .cart-form-header .section-header__rule {
    padding-inline: 16px;
}

body.woocommerce-cart .cart-collaterals {
    display: flex;
    flex-direction: column;
    flex: 1 1 380px;
    max-width: 420px;
}

body.woocommerce-cart .cart-collaterals .cart_totals {
    width: 100%;
    padding: 24px;
    background-color: var(--color-ice);
    border: 1px solid rgba(26, 58, 82, .25);
}

body.woocommerce-cart .cart_totals > h2 {
    display: none;
}

body.woocommerce-cart .cart-totals-header {
    margin: -24px -24px 16px;
}

body.woocommerce-cart .cart-totals-header .section-header__inner {
    padding-block: 10px;
}

body.woocommerce-cart .cart-totals-header .section-header__rule {
    padding-inline: 16px;
}

body.woocommerce-cart .cart_totals table {
    width: 100%;
    border-collapse: collapse;
}

body.woocommerce-cart .cart_totals tr {
    border-bottom: 1px solid rgba(29, 37, 24, .1);
}

body.woocommerce-cart .cart_totals th,
body.woocommerce-cart .cart_totals td {
    padding: 12px 6px;
    font-family: "Nunito Sans";
    font-size: 14px;
    font-weight: 400;
    color: var(--color-black-green);
    text-align: left;
}

body.woocommerce-cart .cart_totals td {
    text-align: right;
}

body.woocommerce-cart .cart_totals tr.order-total th,
body.woocommerce-cart .cart_totals tr.order-total td {
    border-top: 1px solid rgba(29, 37, 24, .2);
    border-bottom: 0;
    font-weight: 700;
    font-size: 16px;
}

body.woocommerce-cart .woocommerce-shipping-methods {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
}

body.woocommerce-cart .woocommerce-shipping-methods li {
    margin-bottom: 8px;
    font-family: "Nunito Sans";
    font-size: 13px;
    color: var(--color-black-green);
}

body.woocommerce-cart .woocommerce-shipping-methods li:last-child {
    margin-bottom: 0;
}

body.woocommerce-cart .woocommerce-shipping-methods input[type="radio"] {
    margin-right: 6px;
    accent-color: var(--color-green);
}

body.woocommerce-cart .woocommerce-shipping-methods label {
    font-family: "Nunito Sans";
    font-size: 13px;
    color: var(--color-black-green);
}

body.woocommerce-cart .cart_totals .woocommerce-shipping-destination,
body.woocommerce-cart .cart_totals p {
    margin: 8px 0;
    font-family: "Nunito Sans";
    font-size: 13px;
    color: rgba(29, 37, 24, .7);
}

body.woocommerce-cart .shipping-calculator-button {
    font-family: "Nunito Sans";
    font-size: 13px;
    font-weight: 700;
    color: var(--color-green);
    text-decoration: underline;
}

body.woocommerce-cart .shipping-calculator-button:hover {
    color: var(--color-forest-dark);
}

body.woocommerce-cart .wc-proceed-to-checkout {
    margin-top: 16px;
    padding:10px 0 0 0 ;
}

body.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    width: 100%;
    padding: 14px 28px;
    background-color: var(--color-gold);
    color: var(--color-plum);
    border: 1px solid var(--color-gold-dark);
    font-family: "Nunito Sans";
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}

body.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover {
    background-color: var(--color-cream);
    color: var(--color-plum);
}

body.woocommerce-cart table.cart {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

body.woocommerce-cart table.cart thead {
    display: none;
}

body.woocommerce-cart table.cart tbody {
    display: block;
}

body.woocommerce-cart table.cart tr.cart_item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-block: 20px;
    padding-inline: 8px;
    border-bottom: 1px solid rgba(29, 37, 24, .1);
}

body.woocommerce-cart table.cart td {
    padding: 0;
    border: 0;
}

body.woocommerce-cart .product-thumbnail {
    flex: 0 0 72px;
}

body.woocommerce-cart .product-thumbnail img {
    display: block;
    width: 72px;
    height: 72px;
    object-fit: cover;
}

body.woocommerce-cart .product-name {
    flex: 1 1 200px;
    min-width: 0;
}

body.woocommerce-cart .product-name a {
    font-family: "Merriweather";
    font-size: 15px;
    font-weight: 700;
    color: var(--color-black-green);
    text-decoration: none;
}

body.woocommerce-cart .product-name a:hover {
    color: var(--color-green);
}

body.woocommerce-cart .product-price {
    flex: 0 0 110px;
    font-family: "Nunito Sans";
    font-size: 14px;
    color: rgba(29, 37, 24, .7);
}

body.woocommerce-cart .product-quantity .quantity {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid rgba(29, 37, 24, .2);
    background-color: var(--color-cream);
}

body.woocommerce-cart .product-quantity .qty {
    width: 48px;
    padding: 10px 4px;
    border: 0;
    border-left: 1px solid rgba(29, 37, 24, .2);
    border-right: 1px solid rgba(29, 37, 24, .2);
    text-align: center;
    font-family: "Nunito Sans";
    font-size: 14px;
    font-weight: 700;
    background: none;
    appearance: textfield;
}

body.woocommerce-cart .product-quantity .qty::-webkit-inner-spin-button,
body.woocommerce-cart .product-quantity .qty::-webkit-outer-spin-button {
    appearance: none;
    margin: 0;
}

body.woocommerce-cart .cart-qty-btn {
    width: 32px;
    background: none;
    border: 0;
    font-size: 15px;
    color: var(--color-forest-dark);
    cursor: pointer;
}

body.woocommerce-cart .product-quantity .quantity:has(input.qty[type="hidden"]) {
    border: 0;
    background: none;
}

body.woocommerce-cart .cart-qty-fixed {
    font-family: "Nunito Sans";
    font-size: 14px;
    font-weight: 700;
    color: var(--color-black-green);
}

body.woocommerce-cart .product-subtotal {
    flex: 0 0 110px;
    text-align: right;
    font-family: "Nunito Sans";
    font-size: 14px;
    font-weight: 700;
    color: var(--color-black-green);
}

body.woocommerce-cart .product-remove {
    order: 5;
    margin-left: auto;
}

body.woocommerce-cart .product-remove a.remove {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 28px !important;
    height: 28px !important;
    background: none !important;
    border: 1px solid rgba(29, 37, 24, .2) !important;
    border-radius: 0 !important;
    color: var(--color-black-green) !important;
    font-size: 16px !important;
    line-height: 1 !important;
    text-decoration: none !important;
    transition: border-color .2s ease, color .2s ease;
}

body.woocommerce-cart .product-remove a.remove:hover {
    background: none !important;
    border-color: #b3261e !important;
    color: #b3261e !important;
}

body.woocommerce-cart tr:has(.actions) {
    display: block;
}

body.woocommerce-cart .actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-block: 24px;
    padding-inline: 8px;
}

body.woocommerce-cart .coupon {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

body.woocommerce-cart .coupon .input-text {
    padding: 10px 14px;
    border: 1px solid rgba(29, 37, 24, .2);
    font-family: "Nunito Sans";
    font-size: 13px;
    background-color: var(--color-cream);
}

body.woocommerce-cart .coupon button {
    padding: 10px 20px;
    background-color: transparent;
    border: 1px solid rgba(29, 37, 24, .3);
    font-family: "Nunito Sans";
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-black-green);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

body.woocommerce-cart .coupon button:hover {
    background-color: var(--color-black-green);
    color: var(--color-cream);
}

body.woocommerce-cart button[name="update_cart"],
body.woocommerce-cart button[name="update_cart"]:disabled {
    margin: 8px;
    padding: 14px 28px !important;
    background-color: var(--color-gold);
    border: 1px solid var(--color-gold-dark);
    font-family: "Nunito Sans";
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-plum);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

body.woocommerce-cart button[name="update_cart"]:hover {
    background-color: var(--color-black-green);
    color: var(--color-gold);
}

body.woocommerce-cart button[name="update_cart"]:disabled {
    background-color: var(--color-gold);
    opacity: .5;
    cursor: not-allowed;
}

/* WooCommerce's own woocommerce-smallscreen.css forces this button to
   width:100% below 768px — combined with the 8px side margins above, that
   overflows its row by 16px instead of filling it cleanly. */
@media (max-width: 768px) {
    body.woocommerce-cart button[name="update_cart"],
    body.woocommerce-cart button[name="update_cart"]:disabled {
        width: calc(100% - 16px) !important;
        margin: 8px !important;
    }
}

body.woocommerce-cart .cross-sells h2 {
    margin: 0 0 16px;
    font-family: "Merriweather";
    font-size: 20px;
    font-weight: 700;
    color: var(--color-black-green);
}

body.woocommerce-cart .cross-sells ul.products {
    display: flex;
    flex-direction: column;
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

body.woocommerce-cart .cart-empty {
    font-family: "Nunito Sans";
    font-size: 15px;
    color: rgba(29, 37, 24, .7);
}

body.woocommerce-cart .return-to-shop .button {
    display: inline-flex;
    align-items: center;
    margin-top: 16px;
    padding: 14px 28px;
    background-color: var(--color-forest-dark);
    color: var(--color-cream);
    border: 0;
    font-family: "Nunito Sans";
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color .2s ease;
}

body.woocommerce-cart .return-to-shop .button:hover {
    background-color: var(--color-black-green);
}

/* WooCommerce's own "shop_table_responsive" class injects a label via
   content: attr(data-title) on every <td> below its own mobile breakpoint —
   not wanted here, since the grid layout below already makes each value's
   meaning clear from its position. */
body.woocommerce-cart table.cart td::before {
    content: none !important;
}

@media (max-width: 900px) {
    body.woocommerce-cart .cart-collaterals {
        flex-basis: 100%;
    }

    /* Grid instead of flex-wrap below — grid-area placement doesn't depend on
       DOM/source order the way a wrapped flex row does, so there's no need to
       fight each cell's desktop "order" value to get a sane mobile stacking. */
    body.woocommerce-cart table.cart tr.cart_item {
        display: grid;
        grid-template-columns: 0px 1fr auto;
        grid-template-areas:
            "thumb name  ."
            "price  qty remove"
            ". subtotal subtotal";
        column-gap: 12px;
        row-gap: 6px;
        align-items: center;
    }

    body.woocommerce-cart .product-thumbnail {
        grid-area: thumb;
    }

    body.woocommerce-cart .product-name {
        grid-area: name;
        flex: none;
    }

    body.woocommerce-cart .product-remove {
        grid-area: remove;
        order: 0;
        margin-left: 0;
        justify-self: end;
    }

    body.woocommerce-cart .product-price {
        grid-area: price;
        flex: none;
    }

    body.woocommerce-cart .product-quantity {
        grid-area: qty;
        justify-self: end;
    }

    body.woocommerce-cart .product-subtotal {
        grid-area: subtotal;
        flex: none;
        text-align: left;
        padding-top: 4px;
        border-top: 1px solid rgba(29, 37, 24, .08);
    }
}

@media (max-width: 560px) {
    body.woocommerce-cart .entry-content {
        padding-inline: 16px;
    }
}

/*====== WOOCOMMERCE CHECKOUT PAGE ====== */

body.woocommerce-checkout {
    background-color: var(--color-cream);
}

body.woocommerce-checkout .entry-content {
    max-width: 1232px;
    padding-inline: 32px;
    padding-block: 48px;
    margin-inline: auto;
}

/* Notices always shown as a fixed bar at the bottom of the screen on checkout
   instead of inline wherever WooCommerce happens to print them. There are two
   separate, unrelated places WooCommerce puts these:
     - .woocommerce-notices-wrapper (server-rendered, wc_print_notices())
     - .woocommerce-NoticeGroup-checkout — field VALIDATION errors specifically,
       inserted directly into form.checkout by wc-checkout.js on a failed
       AJAX submit, nowhere near the wrapper above. */
body.woocommerce-checkout .woocommerce-notices-wrapper,
body.woocommerce-checkout .woocommerce-NoticeGroup {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
}

body.woocommerce-checkout .woocommerce-notices-wrapper:empty {
    display: none;
    padding: 0;
}

body.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-message,
body.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-error,
body.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-info,
body.woocommerce-checkout .woocommerce-NoticeGroup .woocommerce-message,
body.woocommerce-checkout .woocommerce-NoticeGroup .woocommerce-error,
body.woocommerce-checkout .woocommerce-NoticeGroup .woocommerce-info {
    width: 100%;
    max-width: 1232px;
    margin: 0 auto;
    box-shadow: 0 -4px 20px rgba(29, 37, 24, .15);
}

body.woocommerce-checkout .entry-title {
    margin: 0 0 32px;
    font-family: "Merriweather";
    font-size: 34px;
    font-weight: 700;
    color: var(--color-black-green);
}

body.woocommerce-checkout .woocommerce-form-login,
body.woocommerce-checkout .checkout_coupon {
    margin-bottom: 24px;
    padding: 20px;
    background-color: var(--color-mint-light);
    border: 1px solid rgba(107, 136, 89, .3);
}

body.woocommerce-checkout .woocommerce-form-login .form-row,
body.woocommerce-checkout .checkout_coupon .form-row {
    margin-bottom: 12px;
}

body.woocommerce-checkout .checkout_coupon button[name="apply_coupon"],
body.woocommerce-checkout .woocommerce-form-login button[type="submit"] {
    padding: 10px 20px;
    background-color: var(--color-forest-dark);
    color: var(--color-cream);
    border: 0;
    font-family: "Nunito Sans";
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .2s ease;
}

body.woocommerce-checkout .checkout_coupon button[name="apply_coupon"]:hover,
body.woocommerce-checkout .woocommerce-form-login button[type="submit"]:hover {
    background-color: var(--color-black-green);
}

body.woocommerce-checkout form.checkout {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 48px;
}

body.woocommerce-checkout #customer_details {
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex: 2 1 600px;
    min-width: 0;
}

body.woocommerce-checkout #order_review_heading {
    display: none;
}

body.woocommerce-checkout #order_review {
    flex: 1 1 380px;
    max-width: 420px;
    padding: 24px;
    background-color: var(--color-ice);
    border: 1px solid rgba(26, 58, 82, .25);
}

body.woocommerce-checkout .order-review-header {
    margin: -24px -24px 16px;
}

body.woocommerce-checkout .order-review-header .section-header__inner {
    padding-block: 10px;
}

body.woocommerce-checkout .order-review-header .section-header__rule {
    padding-inline: 16px;
}

/* WooCommerce's own default ships ".col2-set .col-1/.col-2 { float; width:48% }"
   at the same specificity tier as a plain two-class override, so this matches
   the full ancestor chain (form.checkout …) to tip it in this rule's favour,
   same approach as .cart-collaterals .cart_totals on the cart page. */
body.woocommerce-checkout form.checkout .col2-set {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

/* WooCommerce's own ::before/::after on .col2-set are a clearfix left over
   from its float-based layout — with .col2-set now flex, those empty
   "content: ' '; display: table;" pseudo-elements get blockified into real
   (invisible but space-taking) flex items, creating the stray gap. */
body.woocommerce-checkout form.checkout .col2-set::before,
body.woocommerce-checkout form.checkout .col2-set::after {
    display: none;
}

body.woocommerce-checkout form.checkout .col2-set .col-1,
body.woocommerce-checkout form.checkout .col2-set .col-2 {
    float: none;
    width: 100%;
    flex: 1 1 260px;
}

body.woocommerce-checkout .woocommerce-shipping-fields h3,
body.woocommerce-checkout .woocommerce-additional-fields h3 {
    margin: 0 0 16px;
    font-family: "Merriweather";
    font-size: 20px;
    font-weight: 700;
    color: var(--color-black-green);
}

/* WooCommerce's own "Billing details" <h3> is replaced by the injected
   .billing-fields-header section-header bar below (see
   nordic_billing_fields_header() in inc/woocommerce.php). */
body.woocommerce-checkout .woocommerce-billing-fields > h3 {
    display: none;
}

body.woocommerce-checkout .woocommerce-billing-fields {
    padding: 24px;
    background-color: #fff;
    border: 1px solid rgba(29, 37, 24, .1);
}

body.woocommerce-checkout .billing-fields-header {
    margin: -24px -24px 16px;
}

body.woocommerce-checkout .billing-fields-header .section-header__inner {
    padding-block: 10px;
}

body.woocommerce-checkout .billing-fields-header .section-header__rule {
    padding-inline: 16px;
}

body.woocommerce-checkout .form-row {
    margin-bottom: 16px;
}

body.woocommerce-checkout .form-row label {
    display: block;
    margin-bottom: 6px;
    font-family: "Nunito Sans";
    font-size: 13px;
    font-weight: 700;
    color: var(--color-black-green);
}

body.woocommerce-checkout .form-row .required {
    color: #b3261e;
    text-decoration: none;
}

body.woocommerce-checkout .form-row .optional {
    font-weight: 400;
    color: rgba(29, 37, 24, .5);
}

body.woocommerce-checkout input.input-text,
body.woocommerce-checkout select,
body.woocommerce-checkout textarea,
body.woocommerce-checkout .select2-container .select2-selection--single {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid rgba(29, 37, 24, .2);
    background-color: #fff;
    font-family: "Nunito Sans";
    font-size: 14px;
    color: var(--color-black-green);
}

body.woocommerce-checkout .select2-container .select2-selection--single {
    height: auto;
}

body.woocommerce-checkout .select2-selection__rendered {
    padding: 0 !important;
    line-height: normal !important;
}

body.woocommerce-checkout .select2-selection__arrow {
    height: 100% !important;
}

body.woocommerce-checkout textarea {
    min-height: 90px;
}

body.woocommerce-checkout .woocommerce-invalid input.input-text,
body.woocommerce-checkout .woocommerce-invalid select,
body.woocommerce-checkout .woocommerce-invalid .select2-container .select2-selection--single {
    border-color: #b3261e;
}

body.woocommerce-checkout .woocommerce-shipping-fields label.checkbox,
body.woocommerce-checkout .woocommerce-account-fields label,
body.woocommerce-checkout .create-account label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: "Nunito Sans";
    font-size: 14px;
    color: var(--color-black-green);
}

body.woocommerce-checkout input[type="checkbox"] {
    accent-color: var(--color-green);
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table thead {
    display: none;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody tr {
    border-bottom: 1px solid rgba(29, 37, 24, .1);
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table td {
    padding: 10px 6px;
    font-family: "Nunito Sans";
    font-size: 14px;
    font-weight: 400;
    color: var(--color-black-green);
    text-align: left;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table .product-total,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td {
    text-align: right;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table .product-quantity {
    font-weight: 400;
    color: rgba(29, 37, 24, .55);
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total td {
    border-top: 1px solid rgba(29, 37, 24, .2);
    font-weight: 700;
    font-size: 16px;
}

body.woocommerce-checkout .woocommerce-shipping-methods {
    list-style: none;
    margin: 0;
    padding: 0;
}

body.woocommerce-checkout .woocommerce-shipping-methods li {
    margin-bottom: 8px;
    font-family: "Nunito Sans";
    font-size: 13px;
    color: var(--color-black-green);
}

body.woocommerce-checkout .woocommerce-shipping-methods li:last-child {
    margin-bottom: 0;
}

body.woocommerce-checkout .woocommerce-shipping-methods input[type="radio"] {
    margin-right: 6px;
    accent-color: var(--color-green);
}

body.woocommerce-checkout ul.wc_payment_methods {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    border: 1px solid rgba(26, 58, 82, .2);
    background-color: #fff;
}

/* The radio input and the <label> (which itself contains the gateway's name
   + its logo image) are siblings, not nested — flexing the <li> itself is
   what actually lines the radio up against the logo+text as one row; flexing
   only the label left the radio sitting outside that row, on its own. */
body.woocommerce-checkout .wc_payment_method {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(26, 58, 82, .15);
}

body.woocommerce-checkout .wc_payment_method:last-child {
    border-bottom: 0;
}

body.woocommerce-checkout .wc_payment_method input[type="radio"] {
    margin-right: 8px;
    accent-color: var(--color-navy-light);
}

body.woocommerce-checkout .wc_payment_method label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    font-family: "Nunito Sans";
    font-size: 14px;
    font-weight: 700;
    color: var(--color-black-green);
    cursor: pointer;
}

body.woocommerce-checkout .wc_payment_method label img {
    max-height: 24px;
    width: auto;
}

/* Sits in the same flex row as the radio + label above, so it needs to be
   forced onto its own full-width line below them instead of competing for
   space alongside a short label. */
body.woocommerce-checkout .payment_box {
    flex: 1 1 100%;
    width: 100%;
    margin-top: 12px;
    padding: 16px;
    background-color: var(--color-ice);
    font-family: "Nunito Sans";
    font-size: 13px;
    color: rgba(29, 37, 24, .75);
}

body.woocommerce-checkout .payment_box p {
    margin: 0 0 8px;
    color: inherit;
}

body.woocommerce-checkout .payment_box p:last-child {
    margin-bottom: 0;
}

body.woocommerce-checkout .payment_box select {
    width: auto;
    min-width: 220px;
}

body.woocommerce-checkout .payment_box::before {
    display: none;
}

body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper,
body.woocommerce-checkout .woocommerce-privacy-policy-text {
    margin-bottom: 16px;
    font-family: "Nunito Sans";
    font-size: 12px;
    color: rgba(29, 37, 24, .6);
}

body.woocommerce-checkout .woocommerce-form__label-for-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
}

body.woocommerce-checkout #place_order {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 16px;
    padding: 16px 28px;
    background-color: var(--color-gold);
    color: var(--color-plum);
    border: 1px solid var(--color-gold-dark);
    font-family: "Nunito Sans";
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

body.woocommerce-checkout #place_order:hover {
    background-color: var(--color-black-green);
    color: var(--color-gold);
}

@media (max-width: 900px) {
    body.woocommerce-checkout #order_review {
        flex-basis: 100%;
        max-width: none;
    }

    body.woocommerce-checkout form.checkout .col2-set .col-1,
    body.woocommerce-checkout form.checkout .col2-set .col-2 {
        flex-basis: 100%;
    }
}

@media (max-width: 560px) {
    body.woocommerce-checkout .entry-content {
        padding-inline: 16px;
    }
}

/*====== WOOCOMMERCE THANK YOU PAGE (order-received, same checkout page) ====== */

body.woocommerce-checkout .woocommerce-order {
    max-width: 800px;
    margin-inline: auto;
}

body.woocommerce-checkout .woocommerce-thankyou-order-received {
    margin: 0 0 24px;
    padding: 20px 24px;
    background-color: var(--color-mint-light);
    border-left: 4px solid var(--color-green);
    font-family: "Nunito Sans";
    font-size: 16px;
    font-weight: 700;
    color: var(--color-black-green);
}

body.woocommerce-checkout .woocommerce-order-overview {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 32px;
    list-style: none;
    margin: 0 0 32px;
    padding: 20px 24px;
    background-color: #fff;
    border: 1px solid rgba(29, 37, 24, .1);
}

body.woocommerce-checkout .woocommerce-order-overview li {
    font-family: "Nunito Sans";
    font-size: 13px;
    color: rgba(29, 37, 24, .6);
}

body.woocommerce-checkout .woocommerce-order-overview li strong {
    display: block;
    margin-top: 4px;
    font-family: "Merriweather";
    font-size: 15px;
    color: var(--color-black-green);
}

body.woocommerce-checkout .woocommerce-order .woocommerce-order-details,
body.woocommerce-checkout .woocommerce-order .woocommerce-customer-details {
    margin-bottom: 32px;
}

body.woocommerce-checkout .woocommerce-order h2 {
    margin: 0 0 16px;
    font-family: "Merriweather";
    font-size: 22px;
    font-weight: 700;
    color: var(--color-black-green);
}

body.woocommerce-checkout table.order_details {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    border: 1px solid rgba(29, 37, 24, .1);
}

body.woocommerce-checkout table.order_details th,
body.woocommerce-checkout table.order_details td {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(29, 37, 24, .1);
    font-family: "Nunito Sans";
    font-size: 14px;
    color: var(--color-black-green);
    text-align: left;
}

body.woocommerce-checkout table.order_details tfoot th,
body.woocommerce-checkout table.order_details tfoot td {
    font-weight: 700;
}

body.woocommerce-checkout table.order_details tfoot tr:last-child th,
body.woocommerce-checkout table.order_details tfoot tr:last-child td {
    border-bottom: 0;
}

body.woocommerce-checkout .woocommerce-customer-details {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

body.woocommerce-checkout .woocommerce-column--billing-address,
body.woocommerce-checkout .woocommerce-column--shipping-address {
    flex: 1 1 260px;
    padding: 20px;
    background-color: #fff;
    border: 1px solid rgba(29, 37, 24, .1);
}

body.woocommerce-checkout .woocommerce-column__title {
    margin: 0 0 12px;
    font-family: "Merriweather";
    font-size: 16px;
    font-weight: 700;
    color: var(--color-black-green);
}

body.woocommerce-checkout .woocommerce-customer-details address {
    font-style: normal;
    font-family: "Nunito Sans";
    font-size: 14px;
    line-height: 1.6;
    color: rgba(29, 37, 24, .75);
}

/*====== 404 PAGE ====== */

.error-404 {
    padding-block: 80px;
    background-color: var(--color-forest-dark);
    text-align: center;
}

.error-404__code {
    display: block;
    margin-bottom: 8px;
    font-family: "Merriweather";
    font-size: 72px;
    font-weight: 700;
    color: var(--color-gold);
}

.error-404__title {
    margin: 0 0 12px;
    font-family: "Merriweather";
    font-size: 32px;
    font-weight: 700;
    color: var(--color-cream);
}

.error-404__text {
    margin: 0 auto 32px;
    max-width: 50ch;
    font-family: "Nunito Sans";
    font-size: 15px;
    color: rgba(255, 250, 244, .75);
}

.error-404__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.error-404__home {
    display: inline-flex;
}

@media (max-width: 560px) {
    .error-404__code {
        font-size: 56px;
    }

    .error-404__title {
        font-size: 24px;
    }

    .error-404__actions {
        flex-direction: column;
        align-items: center;
    }
}

/*====== PLAIN PAGES (page.php, no pagina_block_builder) ======
   Low-specificity fallback — body.woocommerce-cart/woocommerce-checkout's own
   .entry-title/.entry-content rules (more specific) still win on those pages,
   this just gives an ordinary page (e.g. Contact) the same look everywhere else. */

.entry-title {
    max-width: 1232px;
    margin: 0 auto;
    padding-inline: 32px;
    padding-top: 48px;
    font-family: "Merriweather";
    font-size: 36px;
    font-weight: 700;
    color: var(--color-black-green);
    background-color: var(--color-cream);
}

.entry-content {
    max-width: 1232px;
    padding-inline: 32px;
    padding-block: 48px;
    margin-inline: auto;
    background-color: var(--color-cream);
}

.entry-content input[type="text"],
.entry-content input[type="email"],
.entry-content input[type="tel"],
.entry-content input[type="url"],
.entry-content input[type="number"],
.entry-content textarea,
.entry-content select {
    width: 100%;
    max-width: 480px;
    padding: 12px 14px;
    margin-bottom: 12px;
    border: 1px solid rgba(29, 37, 24, .2);
    background-color: #fff;
    font-family: "Nunito Sans";
    font-size: 14px;
    color: var(--color-black-green);
}

.entry-content textarea {
    min-height: 120px;
}

.entry-content button,
.entry-content input[type="submit"] {
    padding: 14px 28px;
    background-color: var(--color-forest-dark);
    color: var(--color-cream);
    border: 0;
    font-family: "Nunito Sans";
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .2s ease;
}

.entry-content button:hover,
.entry-content input[type="submit"]:hover {
    background-color: var(--color-black-green);
}

@media (max-width: 560px) {
    .entry-content {
        padding-inline: 16px;
    }

    .entry-title {
        font-size: 26px;
    }
}

/*====== FIFTY FIFTY (block: fifty_fifty) ====== */

.fifty-fifty {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    align-items: stretch;
    min-height: 560px;
}

.fifty-fifty--image-left {
    flex-direction: row;
}

.fifty-fifty--creme {
    background-color: var(--color-cream);
    --fifty-fifty-bg: var(--color-cream);
}

.fifty-fifty--mint {
    background-color: var(--color-mint-light);
    --fifty-fifty-bg: var(--color-mint-light);
}

.fifty-fifty--ijs {
    background-color: var(--color-ice);
    --fifty-fifty-bg: var(--color-ice);
}

.fifty-fifty--bos {
    background-color: var(--color-forest-dark);
    --fifty-fifty-bg: var(--color-forest-dark);
}

.fifty-fifty--navy {
    background-color: var(--color-navy-light);
    --fifty-fifty-bg: var(--color-navy-light);
}

.fifty-fifty--bos .fifty-fifty__eyebrow,
.fifty-fifty--navy .fifty-fifty__eyebrow {
    color: var(--color-gold);
}

.fifty-fifty--bos .fifty-fifty__title,
.fifty-fifty--navy .fifty-fifty__title,
.fifty-fifty--bos .fifty-fifty__point,
.fifty-fifty--navy .fifty-fifty__point {
    color: var(--color-cream);
}

.fifty-fifty--bos .fifty-fifty__description,
.fifty-fifty--navy .fifty-fifty__description {
    color: rgba(255, 250, 244, .75);
}

.fifty-fifty__media {
    position: relative;
    flex: 1 1 50%;
    overflow: hidden;
}

.fifty-fifty__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fifty-fifty__media-fade {
    position: absolute;
    inset: 0;
    background: linear-gradient(to left, transparent 50%, var(--fifty-fifty-bg, var(--color-cream)) 100%);
}

.fifty-fifty--image-left .fifty-fifty__media-fade {
    background: linear-gradient(to right, transparent 50%, var(--fifty-fifty-bg, var(--color-cream)) 100%);
}

.fifty-fifty__content {
    display: flex;
    align-items: center;
    flex: 1 1 50%;
    min-width: 0;
}

.fifty-fifty__content-inner {
    width: 100%;
    max-width: 560px;
    padding: 64px;
}

.fifty-fifty__eyebrow {
    display: block;
    margin-bottom: 12px;
    font-family: "Nunito Sans";
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-green);
}

.fifty-fifty__title {
    margin: 0 0 20px;
    font-family: "Merriweather";
    font-size: 34px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-black-green);
}

.fifty-fifty__description {
    margin: 0 0 24px;
    font-family: "Nunito Sans";
    font-size: 15px;
    line-height: 1.7;
    color: rgba(29, 37, 24, .7);
}

.fifty-fifty__points {
    display: flex;
    flex-direction: column;
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.fifty-fifty__point {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: "Nunito Sans";
    font-size: 14px;
    color: var(--color-black-green);
}

.fifty-fifty__point .dashicons {
    flex-shrink: 0;
    margin-top: 2px;
    font-size: 16px;
    width: 16px;
    height: 16px;
    color: var(--color-green);
}

@media (max-width: 900px) {
    .fifty-fifty,
    .fifty-fifty--image-left {
        flex-direction: column;
    }

    .fifty-fifty__media {
        min-height: 280px;
    }

    .fifty-fifty__media-fade,
    .fifty-fifty--image-left .fifty-fifty__media-fade {
        background: linear-gradient(to bottom, transparent 60%, var(--fifty-fifty-bg, var(--color-cream)) 100%);
    }

    .fifty-fifty__content-inner {
        max-width: none;
        padding: 40px 32px;
    }
}

@media (max-width: 560px) {
    .fifty-fifty__title {
        font-size: 26px;
    }

    .fifty-fifty__content-inner {
        padding: 32px 16px;
    }
}

/*====== AANBEVOLEN LEGGERS (block: aanbevolen_leggers) ====== */

.recommended-installers {
    padding-block: 64px;
}

.recommended-installers--creme {
    background-color: var(--color-cream);
}

.recommended-installers--mint {
    background-color: var(--color-mint-light);
}

.recommended-installers--ijs {
    background-color: var(--color-ice);
}

.recommended-installers--bos {
    background-color: var(--color-forest-dark);
}

.recommended-installers--navy {
    background-color: var(--color-navy-light);
}

.recommended-installers__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 40px;
}

.recommended-installers__eyebrow {
    display: block;
    margin-bottom: 12px;
    font-family: "Nunito Sans";
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-green);
}

.recommended-installers__title {
    margin: 0;
    font-family: "Merriweather";
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-black-green);
}

.recommended-installers__description {
    max-width: 360px;
    margin: 0;
    font-family: "Nunito Sans";
    font-size: 15px;
    line-height: 1.7;
    color: rgba(29, 37, 24, .7);
    text-align: right;
}

.recommended-installers--bos .recommended-installers__eyebrow,
.recommended-installers--navy .recommended-installers__eyebrow {
    color: var(--color-gold);
}

.recommended-installers--bos .recommended-installers__title,
.recommended-installers--navy .recommended-installers__title {
    color: var(--color-cream);
}

.recommended-installers--bos .recommended-installers__description,
.recommended-installers--navy .recommended-installers__description {
    color: rgba(255, 250, 244, .75);
}

.recommended-installers__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.installer-card {
    display: flex;
    flex-direction: column;
    background-color: var(--color-cream);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(29, 37, 24, .1);
    border: 1px solid rgba(212, 212, 212, 0.5);
}

.installer-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.installer-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.installer-card__badge {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 5px 10px 4px;
    border-radius: 999px;
    background-color: var(--color-gold);
    color: var(--color-plum);
    border: 1px solid var(--color-gold-dark);
    font-family: "Nunito Sans";
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.installer-card__body {
    display: flex;
    flex: 1 1 0%;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
}

.installer-card__name {
    margin: 0;
    font-family: "Merriweather";
    font-size: 18px;
    font-weight: 700;
    color: var(--color-black-green);
}

.installer-card__location {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: "Nunito Sans";
    font-size: 13px;
    color: rgba(29, 37, 24, .6);
}

.installer-card__location .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    color: var(--color-gold-dark);
}

.installer-card__rating {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: "Nunito Sans";
    font-size: 13px;
    font-weight: 700;
    color: var(--color-black-green);
}

.installer-card__stars {
    display: flex;
}

.installer-card__stars .dashicons {
    font-size: 15px;
    width: 15px;
    height: 15px;
    color: var(--color-gold);
}

.installer-card__actions {
    display: flex;
    gap: 10px;
    margin-top: auto;
    padding-top: 12px;
}

.installer-card__actions .btn {
    flex: 1 1 0%;
    justify-content: center;
    padding: 12px 14px;
    gap: 6px;
    font-size: 11px;
}

.btn--whatsapp {
    background-color: var(--color-green);
    color: var(--color-cream);
    border: 1px solid var(--color-forest-dark);
}

.btn--whatsapp:hover {
    background-color: var(--color-forest-dark);
}

@media (max-width: 1100px) {
    .recommended-installers__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .recommended-installers__description {
        max-width: none;
        text-align: left;
    }
}

@media (max-width: 480px) {
    .recommended-installers__grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .installer-card__actions {
        flex-direction: column;
    }
}

/*====== FAQ (block: faq) ====== */

.faq-block {
    padding-block: 72px;
}

.faq-block--creme {
    background-color: var(--color-cream);
}

.faq-block--mint {
    background-color: var(--color-mint-light);
}

.faq-block--ijs {
    background-color: var(--color-ice);
}

.faq-block--bos {
    background-color: var(--color-forest-dark);
}

.faq-block--navy {
    background-color: var(--color-navy-light);
}

.faq-block__inner {
    max-width: 900px;
}

.faq-block__head {
    text-align: center;
    margin-bottom: 40px;
}

.faq-block__eyebrow {
    display: block;
    margin-bottom: 12px;
    font-family: "Nunito Sans";
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-green);
}

.faq-block__title {
    margin: 0;
    font-family: "Merriweather";
    font-size: 40px;
    font-weight: 700;
    color: var(--color-black-green);
}

.faq-block--bos .faq-block__eyebrow,
.faq-block--navy .faq-block__eyebrow {
    color: var(--color-gold);
}

.faq-block--bos .faq-block__title,
.faq-block--navy .faq-block__title {
    color: var(--color-cream);
}

.faq-block__list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid rgba(29, 37, 24, .12);
}

.faq-block--bos .faq-block__list,
.faq-block--navy .faq-block__list {
    border-top-color: rgba(255, 250, 244, .15);
}

.faq-item {
    border-bottom: 1px solid rgba(29, 37, 24, .12);
}

.faq-block--bos .faq-item,
.faq-block--navy .faq-item {
    border-bottom-color: rgba(255, 250, 244, .15);
}

.faq-item__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    padding-block: 22px;
    background: none;
    border: 0;
    cursor: pointer;
    text-align: left;
    font-family: "Merriweather";
    font-size: 17px;
    font-weight: 700;
    color: var(--color-black-green);
    transition: color .2s ease;
}

.faq-item__question:hover {
    color: var(--color-green);
}

.faq-block--bos .faq-item__question,
.faq-block--navy .faq-item__question {
    color: var(--color-cream);
}

.faq-block--bos .faq-item__question:hover,
.faq-block--navy .faq-item__question:hover {
    color: var(--color-gold);
}

.faq-item__icon {
    position: relative;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    transition: transform .35s ease;
}

.faq-item__icon::before,
.faq-item__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: var(--color-gold-dark);
    transition: background-color .2s ease;
}

.faq-item__icon::before {
    width: 16px;
    height: 2px;
    transform: translate(-50%, -50%);
}

.faq-item__icon::after {
    width: 2px;
    height: 16px;
    transform: translate(-50%, -50%);
}

.faq-item.is-open .faq-item__icon {
    transform: rotate(45deg);
}

.faq-block--bos .faq-item__icon::before,
.faq-block--bos .faq-item__icon::after,
.faq-block--navy .faq-item__icon::before,
.faq-block--navy .faq-item__icon::after {
    background-color: var(--color-gold);
}

.faq-item__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease;
}

.faq-item__answer-inner {
    padding-bottom: 22px;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .3s ease, transform .3s ease;
}

.faq-item.is-open .faq-item__answer-inner {
    opacity: 1;
    transform: translateY(0);
    transition-delay: .1s;
}

.faq-item__answer-inner p {
    margin: 0 0 12px;
    font-family: "Nunito Sans";
    font-size: 15px;
    line-height: 1.7;
    color: rgba(29, 37, 24, .7);
}

.faq-item__answer-inner p:last-child {
    margin-bottom: 0;
}

.faq-block--bos .faq-item__answer-inner p,
.faq-block--navy .faq-item__answer-inner p {
    color: rgba(255, 250, 244, .75);
}

.faq-item__card-list {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 4px 0 20px;
    padding: 0;
    list-style: none;
}

.faq-item__card-list > li {
    flex: 1 1 240px;
    max-width: 280px;
}

.faq-item__button {
    margin-top: 4px;
}

@media (max-width: 560px) {
    .faq-block__title {
        font-size: 28px;
    }

    .faq-item__question {
        font-size: 15px;
        padding-block: 18px;
    }
}

/*====== CTA (block: cta) ====== */

.cta-block {
    padding-block: 72px;
}

.cta-block--creme {
    background-color: var(--color-cream);
}

.cta-block--mint {
    background-color: var(--color-mint-light);
}

.cta-block--ijs {
    background-color: var(--color-ice);
}

.cta-block--bos {
    background-color: var(--color-forest-dark);
}

.cta-block--navy {
    background-color: var(--color-navy-light);
}

.cta-block__inner {
    max-width: 780px;
    text-align: center;
}

.cta-block__eyebrow {
    display: block;
    margin-bottom: 12px;
    font-family: "Nunito Sans";
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-green);
}

.cta-block__title {
    margin: 0 0 16px;
    font-family: "Merriweather";
    font-size: 40px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--color-black-green);
}

.cta-block__description {
    margin: 0 auto 32px;
    max-width: 560px;
    font-family: "Nunito Sans";
    font-size: 16px;
    line-height: 1.7;
    color: rgba(29, 37, 24, .7);
}

.cta-block--bos .cta-block__eyebrow,
.cta-block--navy .cta-block__eyebrow {
    color: var(--color-gold);
}

.cta-block--bos .cta-block__title,
.cta-block--navy .cta-block__title {
    color: var(--color-cream);
}

.cta-block--bos .cta-block__description,
.cta-block--navy .cta-block__description {
    color: rgba(255, 250, 244, .75);
}

.cta-block__buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: 16px;
}

.cta-block__button-icon {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.cta-block--bos .btn--outline,
.cta-block--navy .btn--outline {
    color: var(--color-cream);
    border-color: rgba(255, 250, 244, .4);
}

.cta-block--bos .btn--outline:hover,
.cta-block--navy .btn--outline:hover {
    background-color: rgba(255, 250, 244, .08);
}

.cta-block__hours {
    display: flex;
    justify-content: center;
    gap: 40px;
    list-style: none;
    margin: 40px 0 0;
    padding: 24px 0 0;
    border-top: 1px solid rgba(29, 37, 24, .12);
}

.cta-block--bos .cta-block__hours,
.cta-block--navy .cta-block__hours {
    border-top-color: rgba(255, 250, 244, .15);
}

.cta-block__hours-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.cta-block__hours-day {
    font-family: "Nunito Sans";
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-green);
}

.cta-block__hours-time {
    font-family: "Nunito Sans";
    font-size: 15px;
    color: rgba(29, 37, 24, .7);
}

.cta-block--bos .cta-block__hours-day,
.cta-block--navy .cta-block__hours-day {
    color: var(--color-gold);
}

.cta-block--bos .cta-block__hours-time,
.cta-block--navy .cta-block__hours-time {
    color: rgba(255, 250, 244, .75);
}

@media (max-width: 560px) {
    .cta-block__title {
        font-size: 28px;
    }

    .cta-block__buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .cta-block__buttons .btn {
        justify-content: center;
    }

    .cta-block__hours {
        gap: 24px;
    }
}