/*
Ceweb, october 2022
Made for Bobo's by Koen Ahn

Contents:
- Webfonts
- Custom properties
- Generic styles
- Typography
- Buttons and links
- Dropdowns
- Forms
- Tags
- Layout
- Specific elements
- Utility styles
*/


/* WEBFONTS */

button, [type='button'], [type='reset'], [type='submit'] {
    background-color: inherit;
}

button:disabled {
    background-color: var(--success-extra-dark);
}
.copyright {
    background: #232e33;
    color: #98a6a9;
    font-size: 0.5rem;
    padding: 20px 0;

}

@font-face {
    font-family: 'Tilde';
    src: url('../fonts/tilde-bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Tilde';
    src: url('../fonts/tilde-light-rounded.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}


/* CUSTOM PROPERTIES */

:root {
    /* colors */
    --white: #ffffff;
    --off-white: #F9F7F4;
    --sand-light: #EFECE7;
    --sand-medium: #EBE0D6;
    --sand-dark: #E3D2C7;
    --clay-light: #D98C6D;
    --clay-medium: #D37A62;
    --clay-dark: #D26F5B;
    --clay-extra-dark: #CC6355;
    --pine-light: #8BB3AF;
    --pine-medium: #7FA5A3;
    --pine-dark: #789A99;
    --night-light: #2C5165;
    --night-medium: #24404F;
    --night-dark: #222E34;
    --midtone-light: #B5B2AE;
    --midtone-light-alt: #B8C5C8;
    --midtone-medium: #879296;
    --midtone-dark: #5A717E;
    --danger-light: #FB8160;
    --danger-medium: #EC4B28;
    --danger-dark: #E03C18;
    --success-light: #91DFCC;
    --success-medium: #49BFA8;
    --success-dark: #2AB29C;
    --success-extra-dark: #2BA49A;
    --info-light: #66CBF3;
    --info-medium: #2790C9;
    --info-dark: #1384C4;
    /* colors in context */
    --placeholder-color: var(--midtone-light-alt);
    /* typography */
    --fs-xs: .5rem;
    --fs-sm: .7rem;
    --fs-md: 1rem;
    --fs-lg: 1.4rem;
    --fs-xl: 2rem;
    --fs-xxl: 2.8rem;
    --fs-xxxl: 4rem;
    --line-height-default: 1.2em;
    --line-height-narrow: 1em;
    /* space */
    --space-xxs: .15rem;
    /* 3px */
    --space-xs: .3rem;
    /* 6px */
    --space-xs-plus: .45rem;
    /* 9px */
    --space-sm: .6rem;
    /* 12px */
    --space-sm-plus: .8rem;
    /*16px */
    --space-md: 1.2rem;
    /* 24px */
    --space-md-plus: 1.8rem;
    /* 36px */
    --space-lg: 2.4rem;
    /* 48px */
    --space-lg-plus: 3.6rem;
    /* 48px */
    --space-xl: 4.8rem;
    /* 96px */
    --space-xxl: 9.6rem;
    /* 192px */
    --brand-logo-height-xs: 1.2rem;
    --brand-logo-height-s: 1.8rem;
    --brand-logo-height-m: 2.4rem;
    --brand-logo-height-l: 4.4rem;
    --grid-12: repeat(12, 1fr);
    --container-max-width: 1200px;
    --container-padding: var(--space-md);
    --container-offset: calc( (100vw - var(--container-max-width))/2 + var(--container-padding));
    /* misc */
    --shadow-sm: 0px 2px 6px rgba(44, 81, 101, 0.12);
    --shadow-md: 0px 4px 8px rgba(44, 81, 101, 0.14);
    --shadow-lg: 0px 8px 16px rgba(44, 81, 101, 0.2);
    --shadow-inset: 0px 6px 12px rgba(255, 255, 255, 0.2), inset 0px -2px 12px rgba(0, 0, 0, 0.15);
    --shadow-inset-form-element: inset 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
    --shadow-outline-info: inset 0 0 0 var(--space-xxs) var(--info-medium);
    --shadow-outline-primary: inset 0 0 0 var(--space-xxs) var(--success-extra-dark);
    --shadow-outline-light: inset 0 0 0 var(--space-xxs) var(--sand-medium);
    --timing-short: .24s;
    --timing-medium: .36s;
    --letter-spacing: .06em;
    --ease-snappy: cubic-bezier(.6, 1.32, .87, .96);
}

a {
    color: inherit;
    text-decoration: inherit;
}
.form-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -5px;
    margin-left: -5px;
}

.form-group.cart {
    margin-bottom: 1rem;
}

.form-row > .col {
    padding-right: 5px;
    padding-left: 5px;
}
/* GENERIC STYLES */

html {
    box-sizing: border-box;
    font-size: 18px;
    line-height: var(--line-height-default);
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-weight: 700;
    background-color: var(--off-white);
    color: var(--night-light);
}

@media (min-width:650px) {
    html {
        font-size: 20px;
    }
}

*,
*:before,
*:after {
    box-sizing: inherit;
    line-height: var(--line-height-default);
}

img {
    display: block;
}

main {
    min-height: calc(100vh - 25rem);
}


/* TYPOGRAPHY */

.tilde-bold,
h2,
h3,
p.lead,
.large-text {
    font-family: 'Tilde';
    font-weight: 700;
}

.tilde-light-rounded,
h1 {
    font-family: 'Tilde';
    font-weight: 300;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    font-size: var(--fs-md);
}

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-content {
    font-size: var(--fs-sm);
}

.text-content p {
    font-size: 1em;
}

.text-content p:not(:last-child) {
    margin-bottom: var(--space-sm);
}

p.lead,
.text-content.lead-first p:first-of-type {
    font-size: var(--fs-md);
    margin-bottom: var(--space-md);
}

.text-content h1 {
    font-size: var(--fs-xl);
    margin-bottom: var(--space-md);
}

.text-content h2,
.text-content h3,
h2.styled,
h3.styled {
    letter-spacing: var(--letter-spacing);
}

.text-content h2,
h2.styled {
    font-size: var(--fs-lg);
}

.text-content h2 {
    margin-top: var(--space-lg);
    margin-bottom: var(--space-md);
}

.text-content h3 {
    font-size: var(--fs-md);
    margin-top: var(--space-md);
    margin-bottom: var(--space-sm);
}

.text-content ul {
    list-style: disc;
    padding-left: var(--space-md);
}

.text-content ol {
    list-style: decimal;
    padding-left: var(--space-md);
}

.text-content blockquote {
    font-size: var(--fs-md);
    color: var(--midtone-dark);
    position: relative;
    padding: 0;
    margin-inline: 0;
}

.text-content blockquote::before {
    display: block;
    position: absolute;
    content: "\201C";
    top: 0;
    left: -.5em;
}

.text-content blockquote::after {
    display: inline;
    content: "\201D";
}

.text-content figcaption {
    font-size: var(--fs-md);
    color: var(--midtone-dark);
    max-width: 42ch;
}

@media (min-width: 650px) {
    .text-content figcaption {
        font-size: var(--fs-sm);
    }
}

.text-content figure {
    margin-inline: 0;
    margin-block: var(--space-lg);
    display: flex;
    gap: var(--space-md);
    /*flex-direction: column;*/

    align-items: flex-end;
}

.flex {
    display: flex;
}

.justify-between {
    justify-content: space-between;
}

.px-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.py-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.px-2 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

.px-1 {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

.center {
    text-align: center;
}

.pt-0 {
    padding-top: 0 !important;
}

.pt-2 {
    padding-top: 1rem !important;
}

.text-content figure img {
    width: 100%;
}

h2.spaced {
    margin-top: var(--space-xl);
    margin-bottom: var(--space-lg);
}

h2.spaced.prevent-collapse-margin-top {
    padding-top: var(--space-xl);
    margin-top: 0;
}

.large-text {
    font-size: var(--fs-xl);
}

.small-caps {
    text-transform: uppercase;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: var(--letter-spacing);
    line-height: var(--line-height-narrow);
}

.text-light {
    color: var(--midtone-dark);
}

.text-muted {
    color: var(--midtone-light-alt);
}


/* BUTTONS AND LINKS */

.btns-wrapper {
    display: flex;
    align-items: center;
}

.btns-wrapper.spaced {
    padding-top: var(--space-sm);
    padding-bottom: var(--space-sm);
}

@media (min-width: 650px) {
    .btns-wrapper.spaced {
        padding-top: var(--space-md);
        padding-bottom: var(--space-md);
    }
}

button {
    box-shadow: none;
    padding: 0;
    border: 0;
    font-weight: inherit;
}

button,
a,
.btn {
    cursor: pointer;
    transition: all var(--timing-short);
}

.btn {
    --hover-shadow: none;
    --border-width: 0px;
    font-size: var(--fs-sm);
    background-color: var(--button-color, #fff);
    border-radius: 100vmax;
    padding: calc(var(--space-sm) - var(--border-width)) calc(var(--space-md) - var(--border-width));
    border: none;
    font-family: 'Tilde';
    font-weight: 700;
    text-decoration: none;
    flex-shrink: 0;
}

.btn.btn-square {
    border-radius: 0;
}

.btn-large {
    font-size: var(--fs-md);
}

.btn-primary {
    --button-color: var(--success-extra-dark);
    --hover-color: var(--success-medium);
    background-color: var(--success-extra-dark) !important;
    --hover-shadow: var(--shadow-md);
    color: var(--white);
}

.btn-info {
    --button-color: var(--info-dark);
    --hover-color: var(--info-medium);
    --hover-shadow: var(--shadow-md);
    color: var(--white);
}

.btn-dark {
    --button-color: var(--midtone-dark);
    --hover-color: var(--midtone-medium);
    --hover-shadow: var(--shadow-md);
    color: var(--white);
}

.btn-favorite {
    --button-color: rgba(255, 255, 255, .3);
    --hover-color: var(--white);
    --hover-shadow: var(--shadow-md);
    color: var(--night-light);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(5px);
}

.btn-favorite.active {
    --button-color: var(--white);
    --hover-color: var(--off-white);
    color: var(--clay-medium);
}

.btn-favorite:not(.active) .inside-active {
    display: none;
}

.btn-favorite.active .inside-inactive {
    display: none;
}


/* Koen november deze regels weg

.btn-light {
    --button-color: transparent;
    --hover-color: var(--sand-dark);
    color: var(--night-light);
}

.btn-white {
    --button-color: var(--white);
    --hover-color: var(--off-white);
    color: var(--night-light);
    --hover-shadow: var(--shadow-md);
}

.btn-off-white {
    --button-color: var(--off-white);
    --hover-color: var(--white);
    color: var(--night-light);
    --hover-shadow: var(--shadow-md);
}

.btn-sand-light {
    --button-color: var(--sand-light);
    --hover-color: var(--off-white);
    color: var(--night-light);
    --hover-shadow: var(--shadow-md);
}

.btn-outline {
    --border-width: 2px;
    color: var(--button-color);
    background-color: transparent;
    border: solid var(--border-width) currentColor;
}

.btn-inline {
    padding-inline: 0;
    border-radius: 0;
    --button-color: var(--info-dark);
    --hover-color: var(--info-medium);
    color: var(--button-color);
    background-color: transparent;
}

.btn-text-danger {
    color: var(--danger-dark);
    --hover-color: var(--danger-medium);
}

.btn-text-success {
    color: var(--success-dark);
    --hover-color: var(--success-medium);
}

.btn-inline:hover {
    box-shadow: inset 0 -2px 0 0 var(--info-medium);
}

*/


/* Koen november deze regels erbij */

.btn-light {
    --button-color: transparent;
    --hover-color: var(--sand-dark)!important;
    color: var(--night-light);
}

.btn-white {
    --button-color: var(--white);
    --hover-color: var(--off-white)!important;
    color: var(--night-light);
    --hover-shadow: var(--shadow-md);
}

.btn-off-white {
    --button-color: var(--off-white);
    --hover-color: var(--white)!important;
    color: var(--night-light);
    --hover-shadow: var(--shadow-md);
}

.btn-sand-light {
    --button-color: var(--sand-light);
    --hover-color: var(--off-white)!important;
    color: var(--night-light);
    --hover-shadow: var(--shadow-md);
}

.btn-outline {
    --border-width: 2px;
    color: var(--button-color);
    background-color: transparent!important;
    border: solid var(--border-width) currentColor;
}

.btn-inline {
    padding-inline: 0;
    border-radius: 0;
    --button-color: var(--info-dark);
    --hover-color: var(--info-medium);
    color: var(--button-color);
    background-color: transparent;
}

.btn-text-danger {
    color: var(--danger-dark);
    --hover-color: var(--danger-light);
}

.btn-text-success {
    color: var(--success-dark);
    --hover-color: var(--success-medium);
}

.btn-inline:hover {
    box-shadow: inset 0 -2px 0 0 var(--info-medium);
}

.btn:not(.btn-inline):is(:focus,
:hover) {
    background-color: var(--hover-color);
}

.btn-outline:is(:hover,
 :focus) {
    background-color: transparent;
    color: var(--hover-color);
    border-color: var(--hover-color);
}

.btn:not(.btn-outline,
.btn-inset,
.btn-inline):is(:hover,
 :focus) {
    box-shadow: var(--hover-shadow);
}


/* einde */


/* Koen november de volgende regels mogen weg:

.btn:has(>i) {
    display: flex;
    align-items: center;
}

.btn:not(.gap-xs):has(>i) {
    gap: var(--space-sm);
}

.btn:not(.btn-inline):is(:focus,
:hover) {
    background-color: var(--hover-color);
}

.btn-outline:is(:hover,
 :focus) {
    background-color: transparent;
    color: var(--hover-color);
}

.btn-inset {
    box-shadow: var(--shadow-inset-form-element)!important;
}

.btn:not(.btn-outline,
.btn-inset,
.btn-inline):is(:hover,
 :focus) {
    box-shadow: var(--hover-shadow);
}


*/


/* Koen november de voglende regels komen erbij */

.btn {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.btn-inset {
    box-shadow: var(--shadow-inset-form-element)!important;
}


/* einde */

.btn-round {
    width: 2.4em;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-md);
}

.social-link {
    border-radius: 50%;
    background-color: var(--white);
    color: var(--night-light);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 1.8em;
    height: 1.8em;
    text-decoration: none;
}

.social-link.dark {
    color: var(--sand-light);
    background-color: var(--night-dark);
}

.social-link.dark:hover {
    background-color: var(--night-medium);
}

.social-link:not(.dark) {
    box-shadow: var(--shadow-sm);
}

.social-link:not(.dark):hover {
    box-shadow: var(--shadow-md);
}

.more-products-link {
    border-radius: var(--space-xs);
    box-shadow: var(--shadow-md);
    --button-color: var(--white);
    --hover-color: var(--white);
    --hover-shadow: var(--shadow-lg);
    color: var(--midtone-dark);
    height: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
}


/* DROPDOWNS */

.dropdown {
    position: relative;
}

.dropdown-menu {
    font-size: var(--fs-sm);
    display: none;
    position: absolute;
    z-index: 40;
    background: var(--white);
    box-shadow: var(--shadow-lg);
    right: 0;
    border-radius: var(--space-sm);
    overflow: hidden;
}

.dropdown:not(.dropdown-seamless,
.dropdown-filter,
.drop-up) .dropdown-menu {
    margin-top: var(--space-xs);
    white-space: nowrap;
    max-width: 60vw;
}

.dropdown.drop-up .dropdown-menu {
    bottom: 100%;
}

.dropdown.drop-up:not(.dropdown-seamless,
.dropdown-filter) .dropdown-menu {
    margin-bottom: var(--space-xs);
}

.dropdown:is(.dropdown-seamless,
.dropdown-filter) .dropdown-menu {
    left: 0;
}

.dropdown.dropdown-seamless .dropdown-activator {
    width: 100%;
    border-radius: 1.4em;
}

.dropdown.dropdown-filter .dropdown-activator {
    width: 100%;
    border-radius: var(--space-md);
}

.dropdown.expanded .dropdown-menu {
    display: block;
}

.dropdown-activator .fa-chevron-down {
    transition: transform var(--timing-short) ease-in-out;
}

.dropdown.expanded .dropdown-activator .fa-chevron-down {
    transform: rotate(180deg);
}

.dropdown.expanded .dropdown-activator.btn:not(.btn-outline) {
    --button-color: var(--sand-light);
}

.dropdown.expanded .dropdown-activator:not(.btn) {
    background-color: var(--sand-light);
}

.dropdown.expanded:is(.dropdown-seamless,
.dropdown-filter) .dropdown-activator {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.dropdown.expanded.dropdown-seamless .dropdown-activator {
    border-top-left-radius: var(--space-sm);
    border-top-right-radius: var(--space-sm);
}

.dropdown.expanded.dropdown-seamless .dropdown-menu {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.link-list :is(a,
.btn,
button) {
    width: 100%;
    text-align: left;
    /* Koen november verwijderen
    display: block;
    */
    padding: var(--space-sm) var(--space-md);
    transition: background var(--timing-short);
    border-radius: 0;
    /* Koen november toevoegen */
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    /* einde */
}

.link-list.link-list-compact :is(a,
.btn,
button) {
    padding: var(--space-sm) var(--space-xs);
}

.link-list a:has(>i) {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

/* Koen november deze regels komen erbij */

.link-list :is(a,
.btn,
button)>i {
    display: inline-block;
    width: 2em;
    text-align: center;
    margin-inline: -.6em;
}


/* einde */


/* Koen november deze query wordt vervangen
.link-list.link-list-compact :is(a,
.btn,
button):has(>i) { */

.link-list.link-list-compact :is(a,
.btn,
button) {
    gap: var(--space-xs);
}

.link-list :is(a,
.btn,
button):hover {
    background: var( --off-white);
}

.link-list li:first-child>* {
    padding-top: var(--space-md);
}

.link-list li:last-child>* {
    padding-bottom: var(--space-md);
}

.link-list li.active {
    background-color: var(--sand-light);
}

.link-list li.separator,
.link-list+.link-list {
    border-top: solid 1px var(--sand-medium);
}

.dropdown:not(.dropdown-filter) .link-list li.active>* {
    cursor: default;
    opacity: .7;
}


/* FORMS */

input {
    border: none;
    background-color: transparent;
    font-weight: inherit;
    font-family: inherit;
    font-size: inherit;
    padding: 0;
    margin: 0;
    color: inherit;
}

.form-control {
    color: var(--night-light);
    padding: var(--space-xs);
    border-radius: 100vmax;
    background-color: var(--white);
}

.form-control.form-control-large {
    padding: var(--space-sm) var(--space-md);
}

.form-control.style-text-input {
    box-shadow: var(--shadow-inset-form-element);
}


/* Koen november deze query wordt vervangen

.form-control:has(>i) {
    */

.form-control {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

/* einde */

.form-control>i:last-child:not(:first-child) {
    padding: 0 var(--space-xxs);
}

::placeholder {
    color: var(--placeholder-color);
}

.range-value {
    position: absolute;
    top: -1.2rem;
}

.range-value.min {
    left: 0;
}

.range-value.max {
    right: 0;
}

.track-container {
    width: 100%;
    position: relative;
    cursor: pointer;
    height: 0.5rem;
    margin-top: 20px;
}

.track,
.track-highlight {
    display: block;
    position: absolute;
    width: 100%;
    height: 0.5rem;
}

.track {
    background-color: #ddd;
}

.track-highlight {
    color: var(--night-light);
    z-index: 2;
}

.track-btn {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    cursor: pointer;
    display: block;
    position: absolute;
    z-index: 2;
    width: 0.5rem;
    height: 0.5rem;
    top: calc(-50% - -0.2rem);
    margin-left: -0.2rem;
    border: none;
    background-color: var(--night-light);
    -ms-touch-action: pan-x;
    touch-action: pan-x;
    font-size: var(--fs-sm);
    color: var(--night-light);
    transition: box-shadow .3s ease-out, background-color .3s ease, -webkit-transform .3s ease-out;
    transition: transform .3s ease-out, box-shadow .3s ease-out, background-color .3s ease;
    transition: transform .3s ease-out, box-shadow .3s ease-out, background-color .3s ease, -webkit-transform .3s ease-out;
}

.slider-label {
    display: inline-block;
    font-size: var(--fs-sm);
    color: var(--night-light);
    background-color: var(--white);
    border-radius: var(--space-xs);
    padding: var(--space-xs);
    position: relative;
    line-height: 1em;
    top: 6px;
}

.slider-label::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 4px solid var(--white);
    position: absolute;
    top: -4px;
    left: 50%;
    margin-left: -4px;
}


/* toggle taken from  https://codepen.io/alvarotrigo/pen/YzEdrKj */

.toggle {
    cursor: pointer;
    display: flex;
    gap: var(--space-sm);
    align-items: center;
}

.toggle-switch {
    display: inline-block;
    background: var(--midtone-light-alt);
    border-radius: 16px;
    width: 48px;
    height: 30px;
    position: relative;
    vertical-align: middle;
    transition: background 0.25s;
    flex-shrink: 0;
}

.toggle-switch:before,
.toggle-switch:after {
    content: "";
}

.toggle-switch:before {
    display: block;
    background: linear-gradient(to bottom, #fff 0%, #eee 100%);
    border-radius: 50%;
    box-shadow: 0 0 var(--space-xs) 0 rgba(0, 0, 0, .2);
    width: 24px;
    height: 24px;
    position: absolute;
    top: 3px;
    left: 3px;
    transition: left var(--timing-short);
}

.toggle:hover .toggle-switch:before {
    background: linear-gradient(to bottom, #fff 0%, #fff 100%);
    box-shadow: 0 0 var(--space-xs) 0 rgba(0, 0, 0, .4);
}

.toggle-checkbox:checked+.toggle-switch {
    background: var(--success-dark);
}

.toggle-checkbox:checked+.toggle-switch:before {
    left: 21px;
}

.toggle-checkbox {
    position: absolute;
    visibility: hidden;
}

.toggle-label {
    position: relative;
}


/* TAGS */

.color-circle {
    width: calc( 16 / 14 * 1em);
    aspect-ratio: 1/1;
    display: inline-block;
    border: solid 2px var(--night-light);
    border-radius: 50%;
    flex-shrink: 0;
}

.tag {
    font-size: var(--fs-sm);
    --tag-color: var(--night-light);
    --tag-background: var(--sand-light);
    color: var(--tag-color);
    background-color: var(--tag-background);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--space-xs);
    text-decoration: none;
}

a.tag:is(:hover,
 :active) {
    box-shadow: var(--shadow-sm);
    --tag-background: var(--sand-medium);
}

.tag.tag-small {
    font-size: var(--fs-xs);
    padding: var(--space-xxs) var(--space-xs);
}

.tag.tag-bg-alt {
    --tag-background: var(--sand-medium);
}

.tag.tag-success {
    --tag-background: var(--success-light);
    --tag-color: var(--night-dark);
}

.tag.tag-danger {
    --tag-background: var(--danger-light);
    --tag-color: var(--night-dark);
}

.btn:has(.counter) {
    position: relative;
}

.btn .counter {
    position: absolute;
    top: calc( -1 * var(--space-xs));
    right: calc( -1 * var(--space-xs));
}

.counter {
    font-size: var(--fs-sm);
    background-color: var(--success-dark);
    color: white;
    border-radius: 50%;
    width: 1.8em;
    height: 1.8em;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.pricing-range {
    color: var(--midtone-light);
}

.pricing-range .active {
    color: var(--midtone-dark);
}


/* LAYOUT */

.container {
    width: 100%;
    max-width: var(--container-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

@media (min-width:380px) {
     :root {
        --container-padding: var(--space-md-plus);
        --container-padding: var(--space-md-plus);
    }
}

@media (min-width:650px) {
     :root {
        --container-padding: var(--space-lg);
        --container-padding: var(--space-lg);
    }
}


/* SPECIFIC ELEMENTS */

.brand-logo {
    height: var(--brand-logo-height-m);
    aspect-ratio: calc(220/100);
    object-fit: contain;
    object-position: 0% 50%;
}

.show-more {
    display: flex;
    align-items: stretch;
    gap: var(--space-sm);
    flex-direction: column;
    margin: 0 auto;
    width: fit-content;
    padding-top: var(--space-lg);
}

.show-more p {
    font-size: var(--fs-sm);
    font-weight: 400;
}

.article-head {
    padding: var(--space-md) 0 var(--space-lg);
}

@media (min-width:1000px) {
    .article-head {
        padding-top: 0;
    }
}


/* gradients */

.gradient-top,
.gradient-bottom {
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 240px;
    /*
    background: linear-gradient(180deg, rgba(227, 210, 199, 1) 0%, rgba(227, 210, 199, 0) 100%); /**/
    background: linear-gradient(180deg, #DEAF99 0%, rgba(222, 175, 153, 0) 100%);
}

.gradient-bottom {
    top: auto;
    bottom: 0;
    background: linear-gradient(0deg, #DEAF99 0%, rgba(222, 175, 153, 0) 100%);
}

.gradient-tall {
    height: 800px;
}

.gradient-top.gradient-green {
    opacity: 60%;
    background: linear-gradient(180deg, rgba(139, 179, 175, 1) 0%, rgba(139, 179, 175, 0.004639355742296902) 100%);
}

.gradient-green.gradient-bottom {
    background: linear-gradient(0deg, rgba(139, 179, 175, 1) 0%, rgba(139, 179, 175, 0.004639355742296902) 100%);
}


/* product suggestions for search dropdown */

.product-search-suggestion {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
    overflow: hidden;
    padding: var(--space-xxs) var(--space-md) var(--space-xxs) var(--space-sm);
}

a.product-search-suggestion:focus,
a.product-search-suggestion:hover {
    box-shadow: var(--shadow-outline-info);
    outline: none;
}

.product-search-suggestion img {
    width: var(--space-lg-plus);
    height: var(--space-lg-plus);
    object-fit: cover;
}

.product-search-suggestion .product-info {
    flex-grow: 1;
    padding: var(--space-sm) 0;
}

.product-search-suggestion .brand-name {
    font-size: var(--fs-sm);
    line-height: var(--line-height-narrow);
}

.product-search-suggestion .pricing-range {
    font-size: var(--fs-sm);
}

@media (min-width:380px) {
    .product-search-suggestion img {
        width: var(--space-xl);
        height: var(--space-xl);
    }
    .product-search-suggestion .product-info {
        display: flex;
        gap: var(--space-sm);
        justify-content: space-between;
        align-items: center;
    }
}


/* Product Snippet */

.product-snippet {
    display: flex;
    align-items: stretch;
    position: relative;
    border-radius: var(--space-sm);
    background-color: var(--off-white);
    box-shadow: var(--shadow-sm);
    width: fit-content;
    overflow: hidden;
}

.product-snippet .image-wrapper img {
    height: 3.2rem;
    flex-grow: 1;
    object-fit: cover;
}

.product-snippet .image-wrapper {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    background-color: var(--white);
}

.product-snippet .button-wrapper {
    display: flex;
    justify-content: center;
    padding: 0 var(--space-xs) var(--space-sm);
}

.product-snippet .btn-dark {
    padding: var(--space-xxs) var(--space-xs);
}

.product-snippet .product-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-sm);
    gap: var(--space-xs);
    flex-grow: 2;
    align-items: flex-start;
}

.product-snippet .brand-logo {
    height: var(--brand-logo-height-xs);
}


/* Product Preview */

.product-preview {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: var(--space-xs);
    background: var(--white);
    box-shadow: var(--shadow-md);
    position: relative;
    transition: all var(--timing-short);
    transition-timing-function: var(--ease-snappy);
}

.product-preview:hover,
.more-products-link:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-lg);
}

.product-preview .product-image {
    width: 100%;
    aspect-ratio: 7/5;
    object-fit: cover;
    border-top-left-radius: var(--space-xs);
    border-top-right-radius: var(--space-xs);
}

.brand-preview .product-preview .product-image {
    height: var(--space-xl);
}

.product-preview .product-info {
    display: flex;
    flex-direction: column;
    align-items: start;
}

.product-preview .heading {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    flex-grow: 0;
}

.product-preview .btn-favorite {
    position: absolute;
    z-index: 2;
}

.product-preview .product-size {
    order: -1;
    margin-top: calc(-1 * var(--space-md));
}

.product-preview .heading-wrapper {
    width: 100%;
    flex-grow: 0;
}


/* smaller default values on product-preview element */

.product-preview .product-info {
    gap: var(--space-xs);
    padding: var(--space-sm);
}

.product-preview .heading {
    font-size: var(--fs-md);
}

.product-preview .pricing-label {
    font-size: var(--fs-xs);
}

.product-preview .pricing-value {
    font-size: var(--fs-sm);
}

.product-preview .pricing-range {
    font-size: var(--fs-sm);
}

.product-preview .btn-favorite {
    top: var(--space-xs);
    right: var(--space-xs);
    font-size: var(--fs-sm);
    padding: calc(var(--space-xs-plus) - var(--border-width)) 0;
}

.product-preview .product-brand-name {
    font-size: var(--fs-sm);
}

.product-preview .product-size.tag {
    font-size: var(--fs-xs);
    padding: var(--space-xxs) var(--space-xs);
}


/* large product preview elements */

@media (min-width: 650px) {
    .product-preview-large .product-info {
        gap: var(--space-sm);
        padding: var(--space-md);
    }
    .product-preview-large .heading {
        font-size: var(--fs-lg);
    }
    .product-preview-large .pricing-label {
        font-size: var(--fs-sm);
    }
    .product-preview-large .pricing-value {
        font-size: var(--fs-md);
    }
    .product-preview-large .pricing-range {
        font-size: var(--fs-md);
    }
    .product-preview-large .btn-favorite {
        top: var(--space-sm);
        right: var(--space-sm);
        font-size: var(--fs-md);
        padding: calc(var(--space-sm) - var(--border-width)) calc(var(--space-md) - var(--border-width));
    }
    .product-detail .product-image .btn-favorite {
        position: absolute;
        top: var(--space-sm) !important;
        right: var(--space-sm) !important;
        font-size: var(--fs-md);
        padding: calc(var(--space-sm) - var(--border-width)) calc(var(--space-md) - var(--border-width));
    }

    .product-preview-large .product-brand-name {
        font-size: var(--fs-md);
    }
    .product-preview-large .product-size.tag {
        font-size: var(--fs-sm);
        padding: var(--space-xs) var(--space-sm);
    }
}


/* list of ambassador previews */

.ambassadors-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}

.ambassador-preview,
.blog-preview {
    display: block;
    text-decoration: none;
    overflow: hidden;
    border-radius: var(--space-xs);
    box-shadow: var(--shadow-md);
    transition: all var(--timing-short) var(--ease-snappy);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.ambassador-preview {
    color: var(--white);
    background-color: var(--night-light);
}

.blog-preview {
    color: var(--night-light);
    background-color: var(--white);
}

:is(.ambassador-preview,
.blog-preview):is(:hover,
 :active) {
    box-shadow: var(--shadow-md);
    transform: scale(1.05);
}

.ambassador-preview img,
.blog-preview img {
    width: 100%;
    object-fit: cover;
    aspect-ratio: 4/3;
}

:is(.ambassador-preview,
.blog-preview) .preview-body {
    padding: var(--space-sm-plus);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    flex-grow: 1;
}

:is(.ambassador-preview,
.blog-preview) .preview-body .text {
    display: flex;
    flex-direction: column;
    gap: var(--space-xxs);
    flex-grow: 1;
}

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

@media (min-width: 650px) {
    .ambassador-preview .preview-body {
        padding: var(--space-md);
    }
}

@media (min-width: 1000px) {
    .ambassadors-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* Header & Footer */

ul,
ol {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

header a,
footer a {
    text-decoration: none;
    color: inherit;
}

:is(header,
footer) .search-bar {
    font-size: var(--fs-sm);
    --placeholder-color: currentColor;
}

@media (min-width: 650px) {
     :is(header,
    footer) .search-bar {
        font-size: var(--fs-md);
    }
}

.search-bar {
    --search-padding-vertical: var(--space-sm);
    --search-padding-horizontal: var(--space-md);
    --search-button-width: var(--space-md-plus);
    --search-border-radius: var(--space-md);
    position: relative;
}

.search-bar input {
    background-color: var(--white);
    border-radius: var( --search-border-radius);
    box-shadow: var(--shadow-md);
    padding: var(--search-padding-vertical) var(--search-padding-horizontal);
    padding-right: calc( var(--search-padding-horizontal) + 1rem);
    font-family: 'Tilde';
    display: block;
    width: 100%;
}

.search-bar .button-wrapper {
    position: absolute;
    right: calc(var(--search-padding-horizontal) - var(--search-button-width)/2);
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
}

.search-bar button {
    border-radius: 50%;
    width: var(--search-button-width);
    height: var(--search-button-width);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
}

.search-bar.has-suggestions:focus-within input {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.search-bar:focus-within .search-suggestions {
    display: block;
}

.search-bar .search-suggestions {
    display: none;
    position: absolute;
    top: 100%;
    border-radius: 0 0 var(--search-border-radius) var(--search-border-radius);
    background: var(--white);
    z-index: 20;
    left: 0;
    right: 0;
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.search-bar .search-suggestions a {
    border-top: 1px solid var(--sand-light);
}

.search-bar .search-suggestions li:last-child a {
    border-radius: 0 0 var(--search-border-radius) var(--search-border-radius);
}

.search-bar .search-suggestions li:last-child a img {
    border-bottom-left-radius: var(--search-border-radius);
}

.search-bar.dark input {
    background-color: var(--night-dark);
    color: var(--off-white);
}


/* Footer */

footer {
    padding: var(--space-lg) 0;
    background-color: var(--night-light);
    color: var(--sand-light);
    font-size: var(--fs-sm);
}

footer .heading {
    font-size: var(--fs-md);
}

footer a:hover,
footer a:focus {
    color: var(--white);
}

.footer-layout {
    display: grid;
    align-items: stretch;
    justify-content: stretch;
    gap: var(--space-lg);
}

.footer-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    align-items: stretch;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.footer-socials ul {
    font-size: var(--fs-md);
    display: flex;
    gap: var(--space-sm);
}

.footer-logo {
    height: var(--fs-lg);
    width: auto;
    margin-top: -.6em;
    margin-bottom: .3em;
}

footer .search-bar {
    margin: -.6em 0;
}

@media (min-width:380px) {
    .footer-layout {
        grid-template-columns: repeat(2, 1fr);
        row-gap: var(--space-xl);
    }
    .footer-group.wide-group {
        grid-column: span 2;
    }
}

@media (min-width:650px) {
    .footer-layout {
        grid-template-columns: repeat(6, 1fr);
    }
    footer {
        padding: var(--space-xl) 0;
    }
    .footer-group {
        min-width: 0px;
        grid-column: span 2;
        gap: var(--space-lg);
    }
    .footer-group.wide-group {
        grid-column: span 4;
    }
    .footer-group:first-child {
        order: -2;
    }
    .footer-group:last-child {
        order: -1;
    }
}

@media (min-width:1000px) {
    .footer-layout {
        grid-template-columns: var(--grid-12);
    }
    .footer-group:last-child {
        order: 1;
    }
}


/* Header & logo */

header {
    --global-actions-padding: var(--space-md);
    --nav-primary-padding: var(--space-md);
    --bottom-overlap: calc(var(--space-sm) + 1.2rem);
    /* TODO */
    display: flex;
    align-items: stretch;
    flex-direction: column;
    position: sticky;
    top: 0;
    z-index: 30;
}

header.compact {
    --global-actions-padding: var(--space-sm);
}

header .logo {
    --text-size: var(--fs-xs);
    color: var(--night-light);
    position: relative;
    display: block;
    height: fit-content;
    width: fit-content;
    flex-grow: 0;
    flex-shrink: 0;
    font-size: var(--fs-xs);
}

header .logo img {
    box-sizing: content-box;
    height: 2.8em;
    padding-bottom: calc(var(--text-size) + var(--space-xs));
    transition: height var(--timing-short);
}

header.compact .logo img {
    font-size: .8em;
    padding: 0;
}

@media (min-width: 380px) {
    header .logo {
        font-size: var(--fs-sm);
        --text-size: var(--fs-sm);
    }
}

@media (min-width: 1000px) {
    header {
        margin-bottom: -1.7rem;
        --bottom-overlap: calc(var(--nav-primary-padding) + 1rem);
    }
    header.compact {
        --global-actions-padding: var(--space-md);
    }
    header:not(.compact) .search-bar {
        --search-padding-vertical: var(--space-md);
        --search-padding-horizontal: var(--space-md-plus);
        --search-button-width: var(--space-lg);
        --search-border-radius: var(--space-md-plus);
    }
}

header .logo .tagline {
    font-size: var(--text-size);
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: max-content;
    white-space: nowrap;
    transition: all var(--timing-short);
}

header.compact .logo .tagline {
    opacity: 0;
    bottom: -.8em;
}


/* Header global actions bar */

header .global-actions {
    background-color: var(--sand-medium);
}

header .global-actions .layout {
    display: flex;
    gap: var(--space-md);
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding-top: var(--global-actions-padding);
    padding-bottom: calc(var(--global-actions-padding) + var(--bottom-overlap));
    transition: all var(--timing-short);
    gap: var(--space-sm);
}

header .menu-button-and-logo {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
}

.hamburger-button {
    margin-left: calc( -1 * var(--space-sm));
}

@media (min-width:380px) {
    header .global-actions .layout {
        gap: var(--space-md);
    }
}

@media (min-width: 650px) {
    header .menu-button-and-logo {
        gap: var(--space-md);
    }
    .hamburger-button {
        margin-left: 0;
    }
    header .global-actions .layout {
        display: grid;
        grid-template-columns: var(--grid-12);
    }
}

@media (min-width: 1000px) {
    .hamburger-button {
        display: none!important;
    }
}

header .user-area {
    display: flex;
    justify-content: flex-end;
}

header .search {
    position: absolute;
    bottom: calc(-1 * var(--space-sm));
    left: 0;
    right: 0;
}

@media (min-width: 1000px) {
    header .search {
        position: static;
    }
}


/* Header primary navigation */

header nav.primary {
    display: none;
}

@media (min-width: 1000px) {
    header nav.primary {
        display: block;
        position: relative;
        z-index: 1;
    }
}


/* Koen November dit komt erbij*/

header nav.primary form {
    margin: 0;
}


/* einde */

header nav.primary ul {
    background-color: var(--white);
    border-radius: var(--space-xs);
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: stretch;
    padding: 0 var(--nav-primary-padding);
    gap: var(--space-sm-plus);
    margin-top: calc( -1 * var(--bottom-overlap));
}

header nav.primary a {
    display: inline-block;
    padding: var(--space-md) 0;
    color: var(--midtone-dark);
    border-bottom: solid 6px transparent;
    padding-bottom: calc(var(--space-md) - 6px);
    height: 100%;
}

header nav.primary .prijs-toggle {
    height: 100%;
}

header nav.primary a:is(.active,
 :hover,
:focus) {
    border-color: currentColor;
}

header nav.primary a:is(:hover,
:focus) {
    color: var(--info-medium);
}

header nav.primary a.active {
    color: var(--success-dark);
}


/* Header secondary nav */

header.compact nav.secondary {
    height: 0;
}

header nav.secondary {
    background-color: var(--night-medium);
    color: var(--midtone-light-alt);
    font-size: var(--fs-sm);
    order: -1;
    z-index: -1;
    position: relative;
    height: var(--space-lg);
    transition: all var(--timing-short);
    overflow: hidden;
}

header nav.secondary ul {
    display: flex;
    gap: var(--space-md);
    justify-content: space-evenly;
    align-items: center;
    height: var(--space-lg);
}

header nav.secondary a.active {
    color: white;
}

header nav.secondary a:is(:hover,
:focus) {
    color: var(--off-white);
}

header nav.secondary {
    display: none;
}

@media (min-width:650px) {
    header nav.secondary {
        display: block;
    }
}

@media (min-width:1000px) {
    header nav.secondary ul {
        justify-content: end;
    }
}


/* hamburger menu */

body.hamburger-open #hamburger-menu {
    right: 0;
    background-color: rgba(34, 46, 52, .4);
    transition: background-color .4s ease-in-out 0s, right 0s linear 0s;
}

body.hamburger-open #hamburger-menu .inner-wrapper {
    left: 0;
    transition: left .3s ease-out;
}

#hamburger-menu {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 100%;
    z-index: 100;
    background-color: rgba(34, 46, 52, 0);
    transition: background-color .4s ease-in-out 0s, right 0s linear .4s;
}

#hamburger-menu .inner-wrapper {
    left: -100vw;
    position: relative;
    width: 70vw;
    max-width: 400px;
    background-color: var(--night-light);
    color: var(--sand-light);
    height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-auto-flow: row;
    overflow: auto;
    transition: left .3s ease-in;
}

#hamburger-menu .close {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    width: 1.8em;
    height: 1.8em;
    border-radius: 50%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    font-size: var(--fs-md);
}

#hamburger-menu .primary {
    background-color: var(--white);
    color: var(--night-light);
}

#hamburger-menu .socials ul {
    font-size: var(--fs-md);
    display: flex;
    gap: var(--space-sm);
    padding: 0 var(--space-md) var(--space-md);
}

#hamburger-menu .secondary {
    font-size: var(--fs-sm);
}

#hamburger-menu a:not(.social-link) {
    color: inherit;
    text-decoration: none;
    display: block;
    padding: .6em var(--space-md);
}

#hamburger-menu .prijs-toggle {
    padding: calc(.6em - var(--space-xxs)) var(--space-md);
}

#hamburger-menu a.active {
    border-left: solid 4px currentColor;
    padding-left: calc(var(--space-md) - 4px);
}

#hamburger-menu ul {
    margin: 0;
    padding: var(--space-sm) 0;
}


/* Feature Block */

.feature-block {
    position: relative;
    --image-height: 16rem;
    --fade-color: var(--sand-light);
    --fade-width: 60vw;
    background-color: var(--fade-color);
}

.feature-block.background-blend {
    --fade-color: var(--off-white);
}

.feature-block::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--container-offset);
    background-color: var(--fade-color);
}

.feature-block::after {
    content: "";
    display: block;
    position: absolute;
    z-index: 1;
    top: var(--space-xl);
    left: 0;
    right: 0;
    height: calc(var( --image-height) - var(--space-xl));
    background: linear-gradient(0deg, var(--fade-color) 30.15%, rgba(210, 219, 215, 0.708333) 50.88%, rgba(166, 194, 190, 0.270455) 70.89%, rgba(139, 179, 175, 0) 100%);
}

.feature-block .background-image {
    background-size: cover;
    position: absolute;
    top: 0;
    height: var( --image-height);
    left: 0;
    right: 0;
}

.feature-block-layout {
    position: relative;
    z-index: 2;
}

.feature-block-inner {
    max-width: 20em;
    margin: 0 auto;
    padding-top: var(--space-xxl);
    padding-bottom: var(--space-lg);
}

@media (min-width: 650px) {
    .feature-block {
        --image-height: 22rem;
    }
    .feature-block-inner {
        max-width: none;
        padding-top: calc(var(--space-xxl) + var(--space-xl));
        padding-bottom: var(--space-lg);
    }
}

@media (min-width: 1000px) {
    .feature-block-layout {
        display: grid;
        grid-template-columns: var(--grid-12);
        gap: var(--space-md);
    }
    .feature-block .background-image {
        left: var(--container-offset);
        bottom: 0;
        height: auto;
    }
    .feature-block::after {
        bottom: 0;
        top: 0;
        height: auto;
        left: var(--container-offset);
        width: var(--fade-width);
        background: linear-gradient(90deg, var(--fade-color) 30.15%, rgba(210, 219, 215, 0.708333) 50.88%, rgba(166, 194, 190, 0.270455) 70.89%, rgba(139, 179, 175, 0) 100%);
    }
    .feature-block-inner {
        grid-column: span 5;
        padding-top: var(--space-xl);
        padding-bottom: var(--space-xl);
    }
}

@media (min-width: 1180px) {
    .feature-block-inner {
        grid-column: span 4;
    }
}


/* cta feature block */

.cta-block-text,
.cta-block-form {
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-direction: column;
}

.cta-block-text {
    gap: var(--space-lg);
}

.cta-block-form .form-grid {
    display: flex;
    gap: var(--space-xs);
    align-items: stretch;
    flex-direction: column;
}

.cta-block-form .form-grid>* {
    min-width: 0px;
}

.cta-block-form .form-grid .wide {
    margin-bottom: var(--space-xs);
}

.cta-block-form {
    gap: var(--space-md);
    flex-shrink: 0;
}

.cta-block-form .form-grid label {
    display: block;
    white-space: normal;
}

@media (min-width: 650px) {
    .cta-block-text {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-md);
    }
    .cta-block-form {
        min-width: 13em;
    }
}

@media (min-width: 1000px) {
    .cta-block-text {
        display: flex;
        gap: var(--space-lg);
    }
    .cta-block-form .form-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        column-gap: var(--space-md);
        row-gap: var(--space-sm);
        justify-items: stretch;
        align-items: center;
    }
    .cta-block-form .form-grid .wide {
        grid-column: span 3;
        margin-bottom: 0;
    }
    .cta-block-form {
        gap: var(--space-sm);
    }
}


/* products scroll strip */

.products-scroll-strip {
    min-width: 0px;
    position: relative;
    z-index: 3;
    margin: 0 calc(-1 * var(--container-padding));
    margin-top: calc( -1* var(--products-overlap));
}

.products-scroll-strip .products {
    display: grid;
    grid-template-columns: repeat(5, 8em);
    gap: var(--space-md);
    overflow-x: scroll;
    scroll-padding: 0 50%;
    scroll-snap-type: x mandatory;
    padding: var(--space-md);
    margin-top: calc(-1 * var(--space-md));
}

.products-scroll-strip .products li {
    scroll-snap-align: center;
    display: inline-block;
}

.products-scroll-strip .products>* {
    min-width: 0px;
}

@media (min-width:650px) {
    .products-scroll-strip {
        grid-column-start: 1;
        grid-column-end: -1;
    }
    .products-scroll-strip .products {
        padding-left: calc( var(--space-lg) + var(--container-padding));
        padding-right: calc( var(--space-lg) + var(--container-padding));
        grid-template-columns: repeat(5, calc(25vw - var(--space-md)));
    }
}

@media (min-width:1000px) {
    .products-scroll-strip {
        grid-column-start: 2;
        grid-column-end: -2;
        margin-left: 0;
        margin-right: 0;
    }
    .products-scroll-strip .products {
        grid-template-columns: repeat(5, 1fr);
        padding: 0;
        overflow-x: visible;
        scroll-snap-type: none;
    }
    .products-scroll-strip .products li {
        width: auto;
    }
}


/* UTILITY STYLES */

.scrollbar-hidden::-webkit-scrollbar {
    display: none;
}

.scrollbar-hidden {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

.w-100 {
    width: 100%;
}


/* margins and paddings */

.pt-after-nav {
    padding-top: .6rem;
}

@media (min-width: 1000px) {
    .pt-after-nav {
        padding-top: 1.4rem;
    }
}

.pt-lg {
    padding-top: var(--space-lg);
}

.pb-lg {
    padding-bottom: var(--space-lg);
}

.pb-xl {
    padding-bottom: var(--space-xl);
}

.mb-0 {
    margin-bottom: 0!important;
}

.mt-sm {
    margin-top: var(--space-sm);
}


/* colors */

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


/* font size */

.fs-xs {
    font-size: var(--fs-xs);
}

.fs-sm {
    font-size: var(--fs-sm);
}

.fs-md {
    font-size: var(--fs-md);
}

.fs-lg {
    font-size: var(--fs-lg);
}

.fs-xl {
    font-size: var(--fs-xl);
}

.fs-xxl {
    font-size: var(--fs-xxl);
    line-height: var(--line-height-narrow);
}

.fs-lg.my-neg {
    margin-top: calc( -1 * var(--space-sm));
    margin-bottom: calc( -1 * var(--space-sm));
}

.fs-md.my-neg {
    margin-top: calc( -1 * var(--space-xs));
    margin-bottom: calc( -1 * var(--space-xs));
}


/* layout */

.cols-3 {
    grid-column: span 3;
}

.cols-6 {
    grid-column: span 6;
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}

.grid-4 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}

.grid-6 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}

:is(.grid-2,
.grid-4,
.grid-6)>*:not(.min-width) {
    min-width: 0px;
}

@media (min-width: 650px) {
    .grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    .grid-6 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1000px) {
    .grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    .grid-6 {
        grid-template-columns: repeat(6, 1fr);
    }
}

.flex-column {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.align-items-start {
    align-items: flex-start;
}

.gap-sm {
    gap: var(--space-sm);
}

.gap-xs {
    gap: var(--space-xs);
}

.gap-none {
    gap: 0px;
}

.flex-grow {
    flex-grow: 1;
}


/* position */

.p-absolute {
    position: absolute;
}

.p-relative {
    position: relative;
}


/* display */

.d-none {
    display: none!important;
}

.d-flex {
    display: flex!important;
}

.d-block {
    display: block!important;
}

.d-inline {
    display: inline!important;
}

@media (min-width: 650px) {
    .d-md-none {
        display: none!important;
    }
    .d-md-flex {
        display: flex!important;
    }
    .d-md-block {
        display: block!important;
    }
    .d-md-inline {
        display: inline!important;
    }
}

@media (min-width: 1000px) {
    .d-lg-none {
        display: none!important;
    }
    .d-lg-flex {
        display: flex!important;
    }
    .d-lg-block {
        display: block!important;
    }
    .d-lg-inline {
        display: inline!important;
    }
}