:root {
    /* Theme colors */
    --color-primary: #0D132B;
    --color-secondary: #4B989E;
    --color-accent: #FF6900;

    /* Backgrounds */
    --background-color: #F1F3F7;
    --dark-gradient-start: #0E193A;
    --dark-gradient-end: #050A1E;

    /* Border radius */
    --form-radius: 1.5rem;
    --input-radius: 0.5rem;
    --button-radius: 0.75rem;
    --image-radius: 1rem;

    /* Heading */
    --heading-1-desktop: 3rem;
    --heading-1-mobile: 1.875rem;
    --heading-2-desktop: 2.25rem;
    --heading-2-mobile: 1.875rem;

    /* Fonts */
    --font-inter: 'inter', sans-serif;
    --font-merriweather: 'merriweather', serif;

    /* Buttons */
    --button-color: #4B989E;
    --no-button-color: #9CA3AF;
}



/******** TABLE OF CONTENTS ********

Press CTRL + F and paste: "** [Name]"

+ ** Elements (HTML)
+ ** Fonts
+ ** Forms
+ ** Buttons
+ ** General

+ ** Padding

+ ** Components UI
-- ** Header
-- ** Hero
-- ** Text with table
-- ** Text with images
-- ** Text with video
-- ** Image with text rows
-- ** Text with carousel
-- ** Stars
-- ** CTA
-- ** Text with nameplate
-- ** Cart page
-- ** Payment pages
-- ** CMS pages
-- ** Error page

+ ** Responsive breakpoints
-- ** Extra small breakpoint (xs)
-- ** Small breakpoint (sm)
-- ** Medium breakpoint (md)
-- ** Large breakpoint (lg)
-- ** XL breakpoint (xl)


************************************/



/** Elements (HTML)
*******************/
html,
body {
    font-family: var(--font-inter);
}

header {
    background-color: var(--color-primary);
    color: #FFFFFF;
}

footer {
    background-color: var(--color-primary);
    color: rgba(255, 255, 255, 0.5);
}

footer a:hover {
    color: rgba(255, 255, 255, 1);
}

button {
    border-radius: var(--button-radius);
}

input,
select {
    border-radius: var(--input-radius);
    color: #27272A;
    background: #FFFFFF;
}

select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
}

input::placeholder,
select::placeholder {
    color: #C9C9C9;
}

h1 {
    font-family: var(--font-merriweather);
    font-weight: 900;
    font-size: var(--heading-1-mobile);
}

h2 {
    font-family: var(--font-merriweather);
    font-weight: 900;
    font-size: var(--heading-2-mobile);
}



/** Fonts
**********/
@font-face {
    font-family: 'merriweather';
    src: url('/fonts/Merriweather/Merriweather-VariableFont_opsz,wdth,wght.ttf') format('truetype');
    font-style: normal;
}

@font-face {
    font-family: 'inter';
    src: url('/fonts/Inter/Inter-VariableFont_opsz,wght.ttf') format('truetype');
    font-style: normal;
}



/** Forms
**********/
.form {
    position: relative;
    border-radius: var(--form-radius);
    border: 1px solid #F7F7F7;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    background-color: #F9F9F9;
    color: #000000;
}

.form h4 {
    color: var(--color-accent);
    font-size: 1.875rem;
    font-weight: 700;
}

.form h4 span {
    font-size: 1.75rem;
    font-weight: 600;
}

.form h4.line-through {
    color: #000000;
    font-size: 1.5rem;
    font-weight: 500;
}

.form>div {
    z-index: 1;
}

.form .shippingCosts {
    color: #99a1af;
}

.form .discountTag {
    border-radius: 0.5rem;
    background-color: rgba(255, 214, 167, 0.4);
    color: var(--color-accent);
}

.form::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: -1px;
    height: calc(100% + 2px);
    width: calc(100% + 2px);
    background: linear-gradient(to bottom,
            transparent,
            transparent,
            transparent,
            rgba(0, 0, 0, 0.05));
    z-index: -1;
    border-radius: 1.5rem;
}



/** Buttons
************/
.classicButton {
    background-color: var(--button-color);
    color: #FFFFFF;
}

.classicButton:hover {
    opacity: 0.9;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0);
}

.strippedButton {
    font-weight: 300;
    background-color: transparent;
    color: var(--no-button-color);
    opacity: 0.7;
}

.strippedButton:hover {
    opacity: 1;
}



/** General
************/
.max-width-hero {
    max-width: 1320px;
}

.errorBar {
    color: #e7000b;
    font-size: 0.875rem;
}

.input .errorMessage,
.select .errorMessage {
    color: #e7000b;
    font-size: 0.875rem;
}

.list li span {
    text-shadow: 0 1px 3px rgb(0 0 0 / 50%);
}



/** Padding
************/
/* Home hero */
.homeHero .heroSection {
    padding: 4rem 1rem 2rem 1rem;
}

/* Step hero */
.stepHero {
    padding: 4rem 1rem 2rem 1rem
}

/* Text with table */
.textWithImageAndTable {
    padding: 2rem 1rem;
}

/* Text with images */
.textWithImages {
    padding: 0rem 1rem 2rem 1rem;
}

/* Text only */
.textOnly {
    padding: 0rem 1rem 2rem 1rem;
}

/* Text with video */
.textWithVideo {
    padding: 0rem 1rem 2rem 1rem;
}

/* Image with text rows */
.imageWithTextRows {
    padding: 2rem 1rem;
}

/* Text with table */
.textWithTable {
    padding: 2rem 1rem;
}

/* CTA with photo row */
.ctaWithPhotoRow {
    padding: 0rem 1rem 2rem 1rem;
}

/* Photo row */
.photoRow {
    padding-top: 2.5rem;
}

/* CMS page photo row */
.cmsPage .photoRow {
    padding: 2.5rem 0rem;
}

/* Text with carousel */
.textWithCarousel {
    padding: 2.5rem 2rem;
}

/* Text with nameplate */
.stepPage .textWithNameplate {
    padding: 2rem 1rem;
}

/* Cart section */
.cartSection {
    padding-top: 1.25rem;
}

/* CMS page content */
.cmsContent {
    padding: 4rem 1rem 3rem 1rem;
}

/* Table list **/
.tableList td {
  padding: 12px 16px;
}

/* Payment page */
.paymentPageContent {
    padding: 2rem 1rem 3rem 1rem;
}

.paymentPage .photoRow {
    padding: 2.5rem 0rem;
}



/** Components UI
******************/

/** Header */
.homeHeader,
.stepHeader>div>a,
.generalHeader>div>a {
    font-family: var(--font-merriweather);
    font-weight: 900;
}

.stepHeader>div>a {
    font-size: 1rem;
}

.cartButton>div {
    background-color: #FFFFFF;
    color: #000000;
    border-radius: 0;
}

.cartButton .selectedItem,
.cartButton .cartShippingCosts {
    border-bottom: 1px solid #E5E7EB;
}

.stepIsAccessible {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.3);
}

.stepIsCurrent {
    border-color: #FFFFFF;
    background-color: #FFFFFF;
    color: #000000;
}

.stepIsActive {
    background-color: rgba(255, 255, 255, 0.75);
    border-color: rgba(255, 255, 255, 0.75);
    color: #000000;
}

.stepIsActive:hover {
    background-color: rgba(255, 255, 255, 1);
}

/** Hero */
.homeHero,
.stepHero {
    color: #FFFFFF
}

#home h1,
.stepPage h1 {
    font-size: 1.875rem;
    line-height: 1.2;
}

.actionLabel {
    box-shadow: #FFFFFF 4px 4px 0px;
    background: linear-gradient(to bottom, #fd2a36, #e60013);
    color: #FFFFFF;
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding: 0.375rem 0.625rem;
    font-family: var(--font-merriweather);
    font-weight: 800;
}

.actionLabel span:nth-of-type(2) {
    font-size: 0.875rem;
    font-style: italic;
}

.diameter {
    font-family: var(--font-merriweather);
    font-weight: 800;
}

.disclaimerBar {
    background-color: var(--color-primary);
    color: #FFFFFF;
    fill: #FFFFFF;
    border-top: 1px solid var(--color-accent);
}

/** Text with table */
.textWithTable tr:nth-child(odd) {
    background-color: #F2F2F2;
}

.tableList h3 {
    font-weight: 700;
}

.tableList tr:nth-child(odd) {
  background-color: #f2f2f2;
}

/** Text with images */
.textWithImages img {
    border-radius: var(--image-radius);
}

/** Text with video */
.textWithVideo video {
    border-radius: var(--image-radius);
}

.textWithVideo .videoDisplay em {
    color: #727272;
}

/** Image with text rows */
.imageWithTextRows {
    background: linear-gradient(to bottom, var(--dark-gradient-start), var(--dark-gradient-end));
    color: #FFFFFF;
}

.imageWithTextRows img {
    border-radius: 50%;
}

/** Text with carousel */
.textWithCarousel {
    background-color: var(--background-color);
}

.textWithCarousel h2 {
    font-size: 1.5rem;
    line-height: 1.3;
}

.textWithCarousel button {
    background-color: var(--color-primary);
    border-radius: 50%;
    fill: #FFFFFF;
}

.textWithCarousel .testimonialCard {
    background-color: #FFFFFF;
    border-radius: 1.5rem;
}

.textWithCarousel .testimonialCard .cardImage {
    border-radius: 50%;
}

/** Stars */
.star {
    background-color: #d1d5db;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.star-filled {
    background-color: #fbbf24;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/** CTA */
.cta {
    border-radius: 1.5rem;
}

.cta h3 {
    font-family: var(--font-merriweather);
    font-weight: 900;
    font-size: 1.5rem;
    line-height: 1.3;
}

.cta h6 {
    font-size: 1.125rem;
}

.cta .textContainer {
    color: #FFFFFF;
}

/** Text with nameplate */
.textWithNameplate .actionLabel {
    border-radius: 0.75rem;
}

.textWithNameplate .namePlate {
    background: linear-gradient(to bottom, var(--dark-gradient-start), var(--dark-gradient-end));
    border-radius: 1rem;
    color: #FFFFFF;
}

.textWithNameplate .namePlate h3 {
    font-family: var(--font-merriweather);
    font-weight: 900;
}

/** Cart page */
#cart {
    background-color: var(--background-color);
}

#cart h1 {
    font-size: 1.875rem;
}

#cart h2 {
    font-size: 1.5rem;
}

.topSection>div>div {
    background-color: var(--color-primary);
    border-radius: 1.5rem;
}

.blueSection {
    background-color: var(--color-primary);
}

#cart .form {
    background-color: #FFFFFF;
}

.orderSummary .cartErrorField {
    border-radius: 0.5rem;
}

.orderSummary .cartItem {
    border-bottom: 1px solid #E5E7EB;
}

.orderSummary .collectieConsent {
    border: 1px solid rgba(106, 114, 130, 0.1);
    background-color: rgba(229, 231, 235, 0.6);
    font-size: 0.875rem;
}

.orderSummary .orderSummaryContent .shippingCosts {
    border-bottom: 1px solid #E5E7EB;
    color: #000000;
}

.orderSubmit a {
    text-underline-offset: 2px;
    text-decoration: underline;
    font-weight: 600;
}

.orderSubmit a:hover {
    text-decoration: none;
}

/** Payment pages */
.paymentPage h1 {
    font-size: 1.875rem;
}

.paymentPage .orderSummary {
    border-radius: 1rem;
}

.shareBlock {
    border-radius: 1rem;
}

/** CMS pages */
.cmsContent h1 {
    font-size: 2.625rem;
    line-height: 1;
    margin-bottom: 2rem;
}

.cmsContent h3 {
    font-weight: 600;
}

.cmsContent a {
    text-underline-offset: 2px;
    text-decoration: underline;
}

.cmsContent a:hover {
    text-decoration: none;
}

#retournerenPage .cmsContent h3 {
    font-family: var(--font-inter);
    font-weight: 700;
}

#voorwaardenPage .cmsContent h1 {
    font-size: 1.875rem;
}

/** Error page */
.errorPage {
    background-color: var(--background-color);
}

.errorPage h1 {
    font-size: 6rem;
    font-weight: 700;
    color: #E7000B;
    background: rgba(251, 44, 54, 0.1);
}

.errorPage h2 {
    color: rgba(0, 0, 0, 0.85) !important;
}



/** Responsive breakpoints
**************************/

/** Extra small breakpoint (xs) */
@media (min-width: 372px) {
    .stepHeader>div>a {
        font-size: 1.25rem;
    }
}

/** Small breakpoint (sm) */
@media (min-width: 640px) {

    /** Hero */
    .homeHero .heroSection {
        padding: 8rem 2rem 7rem 2rem
    }

    .stepHero {
        padding: 6rem 2rem 5rem 2rem
    }

    .actionLabel {
        font-size: 1rem;
        line-height: 1.5rem;
        padding: 0.625rem 1rem;
    }

    /** Text with image and table */
    .textWithImageAndTable {
        padding: 5rem;
    }

    /** Text with images */
    .textWithImages {
        padding: 0rem 5rem 5rem 5rem;
    }

    /** Text only */
    .textOnly {
        padding: 0rem 5rem 5rem 5rem;
    }

    /** Text with video */
    .textWithVideo {
        padding: 0rem 5rem 5rem 5rem;
    }

    /** Image with text rows */
    .imageWithTextRows {
        padding: 5rem 5rem 5rem 5rem;
    }

    /** Text with table */
    .textWithTable {
        padding: 5rem;
    }

    /** CTA with photo row */
    .ctaWithPhotoRow {
        padding: 0rem 5rem 5rem 5rem;
    }

    /** Photo row */
    .photoRow {
        padding-top: 3rem;
    }

    .cmsPage .photoRow {
        padding: 3rem 0rem;
    }

    /** Text with carousel */
    .textWithCarousel {
        padding: 3rem;
    }

    /** CTA */
    .cta h3 {
        font-size: 1.875rem;
    }

    /** Cart page */
    .cartSection {
        padding-top: 2rem;
    }

    #cart h2 {
        font-size: 1.875rem;
    }

    .cartButton>div {
        border-radius: 1rem;
    }

    /** CMS pages */
    .cmsContent {
        padding: 4rem 2rem 3rem 2rem;
    }

    #voorwaardenPage .cmsContent h1 {
        font-size: 2.625rem;
    }

    /** Payment page */
    .paymentPageContent {
        padding: 2rem;
    }

    .paymentPage .photoRow {
        padding: 3rem 0rem;
    }
}

/** Medium breakpoint (md) */
@media (min-width: 769px) {

    /** Header */
    .homeHeader>div>p,
    .generalHeader>div>a {
        font-size: 1.5rem;
    }

    /** Text with nameplate */
    .stepPage .textWithNameplate {
        padding: 5rem;
    }

    /** CMS pages */
    .cmsContent {
        padding: 6rem 4rem 3rem 4rem;
    }

    /** Payment page */
    .paymentPageContent {
        padding: 4rem;
    }
}

/** Large breakpoint (lg) */
@media (min-width: 1024px) {

    /** Elements */
    h1 {
        font-size: var(--heading-1-desktop);
    }

    h2 {
        font-size: var(--heading-2-desktop);
    }

    /** Hero */
    #home h1,
    .stepPage h1 {
        font-size: 3rem;
    }

    /** Text with carousel */
    .textWithCarousel h2 {
        font-size: 1.875rem;
    }

    /** Cart page */
    .cartSection {
        padding: 6rem 0rem;
    }

    #cart h1 {
        font-size: 3.125rem;
    }

    .topSection {
        background-color: var(--color-primary);
    }

    .topSection>div>div {
        background-color: transparent;
        border-radius: 1rem;
    }
}

/** XL breakpoint (xl) */
@media (min-width: 1280px) {

    /** CMS pages */
    .cmsContent {
        padding: 8rem;
    }

    /** Payment page */
    .paymentPageContent {
        padding: 8rem;
    }

}