@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@400&display=swap");
/*
 * PlantMarket_HomePage -- header (menu omhoog) + Page Builder-homepage.
 *
 * Alle homepage-stijlen hangen aan CSS-klassen die in Page Builder op de
 * elementen staan (Advanced > CSS Classes), bv. pm-hero, pm-usp-row,
 * pm-section-title, pm-panel--dark. Teksten, afbeeldingen, links en
 * kleuren zelf pas je in Page Builder aan; deze file bepaalt alleen de
 * vormgeving.
 */
:root {
    --pm-teal: #0e3b4c;
    --pm-teal-2: #164a5c;
    --pm-green: #6cbf45;
    --pm-green-dark: #57a735;
    --pm-soft: #f2f4f1;
    --pm-line: #dfe5de;
    --pm-text: #3d4b50;
    --pm-muted: #6b7a7f;
    --pm-header-bg: #0f3a4d; /* RGB 15/58/77 (huisstijl) */
    --pm-header-bg-hover: #1a5068;
}

/* ------------------------------------------------------------------ */
/* Header (sitebreed): donkere balk, menu naast logo, iconen rechts     */
/* ------------------------------------------------------------------ */
.page-header {
    background: var(--pm-header-bg);
    border-bottom: 0;
    margin-bottom: 0;
}
/* De panel-balk (Luma: welkomsttekst, inloggen, taal) vervalt op desktop:
   inloggen = account-icoon, taalkeuze staat naast de winkelwagen. */
@media (min-width: 768px) {
    .page-header .panel.wrapper {
        display: none;
    }
}

/* Taalkeuze naast de winkelwagen: "EN" + pijltje (eigen dropdown-opmaak,
   Luma stylet de switcher alleen binnen de panel-balk) */
.page-header .header.content > .switcher {
    display: none;
}
.page-header .header.content > .switcher .options {
    position: relative;
}
.page-header .header.content > .switcher .action.toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 4px;
    cursor: pointer;
    color: #fff;
}
.page-header .header.content > .switcher .action.toggle strong {
    color: #fff;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: .5px;
}
.page-header .header.content > .switcher .action.toggle:after {
    content: "";
    width: 7px;
    height: 7px;
    margin-top: -4px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
    font-size: 0;
}
.page-header .header.content > .switcher .options.active .action.toggle:after {
    margin-top: 4px;
    transform: rotate(-135deg);
}
.page-header .header.content > .switcher .action.toggle:hover strong {
    color: var(--pm-green);
}
.page-header .header.content > .switcher .plantmarket-flag,
.page-header .header.content > .switcher .plantmarket-lang-name {
    display: none;
}
.page-header .header.content > .switcher .plantmarket-lang-code {
    display: inline;
}
.page-header .header.content > .switcher ul.dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    min-width: 190px;
    max-height: 360px;
    overflow-y: auto;
    margin: 8px 0 0;
    padding: 6px 0;
    list-style: none;
    background: #fff;
    border: 0;
    border-radius: 6px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .2);
    z-index: 40;
}
.page-header .header.content > .switcher .options.active ul.dropdown {
    display: block;
}
.page-header .header.content > .switcher ul.dropdown li {
    margin: 0;
    padding: 0;
}
.page-header .header.content > .switcher ul.dropdown a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    color: var(--pm-teal);
    text-decoration: none;
}
.page-header .header.content > .switcher ul.dropdown a:hover {
    background: var(--pm-soft);
}
.page-header .header.content > .switcher ul.dropdown .plantmarket-flag {
    display: inline-block;
    margin: 0;
}

/* Iconen (zoeken, account, winkelwagen): witte lijn-iconen */
.pm-icon,
.page-header .minicart-wrapper .action.showcart:before {
    display: inline-block;
    width: 28px;
    height: 28px;
    background-color: #fff;
    -webkit-mask: var(--pm-icon) center / contain no-repeat;
    mask: var(--pm-icon) center / contain no-repeat;
    transition: background-color .2s ease;
}
.pm-icon--search { --pm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='7'/%3E%3Cpath d='M16 16l5.5 5.5'/%3E%3C/svg%3E"); }
.pm-icon--account { --pm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='7.5' r='4.5'/%3E%3Cpath d='M4 21.5v-1.5a5 5 0 0 1 5-5h6a5 5 0 0 1 5 5v1.5z'/%3E%3C/svg%3E"); }
.page-header .minicart-wrapper .action.showcart:before {
    --pm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 2.5h3l2.6 12.2a1.5 1.5 0 0 0 1.5 1.3h9.3a1.5 1.5 0 0 0 1.5-1.2L21 7H6'/%3E%3Ccircle cx='9.5' cy='20.5' r='1.5'/%3E%3Ccircle cx='17.5' cy='20.5' r='1.5'/%3E%3C/svg%3E");
    content: "" !important;
    font-size: 0 !important;
    line-height: 0 !important;
    margin: 0 !important;
    vertical-align: middle;
}
.page-header .minicart-wrapper .action.showcart:hover:before,
.pm-icon-btn:hover .pm-icon,
.pm-icon-btn:focus-visible .pm-icon {
    background-color: var(--pm-green);
}
.page-header .minicart-wrapper .action.showcart .counter.qty {
    background: var(--pm-green);
    color: #fff;
    border-radius: 10px;
    margin: -14px 0 0 -10px;
    vertical-align: top;
}
.page-header .minicart-wrapper .action.showcart .counter.qty.empty {
    display: none;
}
.pm-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    cursor: pointer;
    color: #fff;
}
.pm-icon-btn:hover,
.pm-icon-btn:focus {
    background: transparent;
    border: 0;
    box-shadow: none;
}

/* Mobiel: donkere balk, witte hamburger/zoek-iconen; account zit in het uitschuifmenu */
.page-header .nav-toggle:before,
.page-header .block-search .label:before {
    color: #fff;
}
.pm-header-icons {
    display: none;
}

@media (min-width: 768px) {
    .page-header .header.content {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 20px;
        padding-top: 18px;
        padding-bottom: 18px;
    }
    .page-header .header.content > .logo {
        order: 1;
        float: none;
        margin: 0 36px 0 0;
        padding: 0;
        line-height: 0;
    }
    .page-header .header.content > .logo img {
        max-height: 58px;
        width: auto;
    }
    .page-header .header.content > .nav-sections {
        order: 2;
        flex: 1 1 auto;
        min-width: 0;
        margin: 0;
        background: transparent;
        position: relative;
        z-index: 5;
    }
    .page-header .header.content > .pm-header-icons {
        order: 3;
        display: flex;
        align-items: center;
        gap: 6px;
        margin-left: auto;
    }
    .page-header .header.content > .minicart-wrapper {
        order: 4;
        float: none;
        margin: 0 0 0 6px;
    }
    .page-header .header.content > .switcher {
        order: 5;
        display: block;
        position: relative;
        float: none;
        margin: 0 0 0 14px;
    }
    .page-header .header.content > .compare {
        order: 6;
    }

    /* Zoekveld: verborgen tot je op het zoek-icoon klikt */
    .page-header .header.content > .block-search {
        display: none;
        position: absolute;
        top: 100%;
        right: 20px;
        width: 420px;
        max-width: calc(100% - 40px);
        margin: 0;
        padding: 14px;
        float: none;
        background: var(--pm-header-bg);
        border-radius: 0 0 8px 8px;
        box-shadow: 0 10px 24px rgba(0, 0, 0, .2);
        z-index: 30;
    }
    .page-header.pm-search-open .header.content > .block-search {
        display: block;
    }
    .page-header .block-search input {
        height: 42px;
        border-radius: 21px;
        padding: 0 44px 0 18px;
        border: 0;
    }
    .page-header .block-search .action.search {
        right: 26px;
        top: 23px;
    }

    /* Menu */
    .page-header .header.content > .nav-sections .navigation {
        background: transparent;
        max-width: none;
        padding: 0;
        margin: 0;
        font-weight: 400;
    }
    .page-header .header.content > .nav-sections .navigation > ul {
        padding: 0;
        white-space: nowrap;
    }
    .page-header .header.content > .nav-sections .navigation .level0 {
        margin: 0 8px 0 0;
    }
    .page-header .header.content > .nav-sections .navigation .level0 > .level-top {
        color: #fff;
        font-size: 17px;
        font-weight: 400;
        line-height: 44px;
        padding: 0 14px;
        border-bottom: 2px solid transparent;
        text-decoration: none;
    }
    .page-header .header.content > .nav-sections .navigation .level0 > .level-top:after {
        color: #fff;
    }
    .page-header .header.content > .nav-sections .navigation .level0.active > .level-top,
    .page-header .header.content > .nav-sections .navigation .level0.has-active > .level-top,
    .page-header .header.content > .nav-sections .navigation .level0:hover > .level-top {
        color: #fff;
        font-weight: 600;
        border-bottom-color: var(--pm-green);
    }
    .page-header .header.content > .nav-sections .navigation .level0 .submenu {
        border: 0;
        border-radius: 0 0 6px 6px;
        box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
        font-size: 15px;
    }
    .page-header .header.content > .nav-sections .navigation .level0 .submenu a {
        color: var(--pm-teal);
    }
    .page-header .header.content > .nav-sections .navigation .level0 .submenu a:hover {
        background: var(--pm-soft);
        color: var(--pm-green-dark);
    }
}

/* ------------------------------------------------------------------ */
/* Knoppen sitebreed: donkerblauw zoals de header                       */
/* (de groene knoppen op de homepage blijven groen, zie hieronder)      */
/* ------------------------------------------------------------------ */
.action.primary,
button.action.primary,
a.action.primary,
.action-primary,
.pagebuilder-button-primary,
.amgdprcookie-button,
.amgdprcookie-done,
.amgdprcookie-button.-allow,
.amgdprcookie-button.-save,
.amgdprcookie-button.-settings {
    background: var(--pm-header-bg) !important;
    border-color: var(--pm-header-bg) !important;
    color: #fff !important;
}
.action.primary:hover,
.action.primary:focus,
.action.primary:active,
.action-primary:hover,
.pagebuilder-button-primary:hover,
.amgdprcookie-button:hover,
.amgdprcookie-done:hover {
    background: var(--pm-header-bg-hover) !important;
    border-color: var(--pm-header-bg-hover) !important;
    color: #fff !important;
}

/* ------------------------------------------------------------------ */
/* Algemeen op de homepage                                              */
/* ------------------------------------------------------------------ */
.pm-home .page-main { padding-top: 0; }
.pm-home .columns .column.main { padding-bottom: 0; }

.pm-home .pagebuilder-button-primary {
    background: var(--pm-green) !important;
    border: 0 !important;
    border-radius: 999px;
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
    padding: 15px 26px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
    transition: background .2s ease;
}
.pm-home .pagebuilder-button-primary:hover,
.pm-home .pagebuilder-button-primary:focus {
    background: var(--pm-green-dark) !important;
    color: #fff;
    border: 0 !important;
}
.pm-home .pagebuilder-button-primary span::after,
.pm-link-more .pagebuilder-button-link span::after {
    content: " \2192";
}

.pm-section-title {
    color: var(--pm-teal);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 8px;
}
.pm-section-title::after {
    content: "";
    display: block;
    width: 46px;
    height: 3px;
    margin-top: 14px;
    background: var(--pm-green);
    border-radius: 2px;
}
.pm-link-more {
    text-align: right;
}
.pm-link-more .pagebuilder-button-link {
    color: var(--pm-green-dark);
    font-weight: 600;
    font-size: 14px;
    padding: 0;
    margin: 0;
    text-decoration: none;
}
.pm-link-more .pagebuilder-button-link:hover { text-decoration: underline; }
.pm-section-head { margin-bottom: 26px; }
.pm-section-head .pagebuilder-column-line { align-items: flex-end; }

/* ------------------------------------------------------------------ */
/* Hero                                                                 */
/* ------------------------------------------------------------------ */
.pm-hero {
    min-height: 560px;
    justify-content: center !important;
}
.pm-hero [data-content-type="heading"],
.pm-hero [data-content-type="text"],
.pm-hero [data-content-type="buttons"] {
    max-width: 560px;
    position: relative;
    z-index: 1;
}
.pm-hero-title {
    color: #fff;
    font-size: clamp(32px, 4.2vw, 50px);
    font-weight: 400;
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin: 0 0 22px;
}
.pm-accent,
.pm-hero-title strong,
.pm-panel-title strong {
    color: var(--pm-green);
    font-weight: 700;
}
.pm-hero [data-content-type="text"] {
    color: rgba(255, 255, 255, .88);
    font-size: 18px;
    line-height: 1.55;
    max-width: 440px;
    margin-bottom: 26px;
}
.pm-hero {
    position: relative;
    overflow: hidden;
}
/* Laat het blauw van de foto naar de randen (boven, links, onder) exact
   overlopen in de huisstijlkleur van de header (RGB 15/58/77), ongeacht
   welke foto er in Page Builder als achtergrond staat. */
.pm-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    /* De bannerfoto (hero-banner.jpg) heeft de overloop al ingebakken; dit
       dunne verloop bovenaan is alleen een vangnet voor andere foto's. */
    background: linear-gradient(180deg, var(--pm-header-bg) 0%, rgba(15, 58, 77, 0) 6%);
}
/* De inhoud blijft boven het kleurverloop (z-index), maar de rij-binnenkant
   is bewust niet "relative": dan positioneert de slogan zich t.o.v. de hele
   banner in plaats van t.o.v. het tekstblok. */
.pm-hero .row-full-width-inner {
    position: static;
}
/* "Connecting growers to green professionals" -- gewoon tekstelement in
   Page Builder (CSS-klasse pm-hero-tagline), rechtsonder schuin over de foto */
.pm-hero .pm-hero-tagline {
    position: absolute;
    right: 2.5%;
    bottom: 60px;
    z-index: 2;
    max-width: none;
    margin: 0 !important;
    color: #fff;
    font-family: "Caveat", "Segoe Script", "Bradley Hand", cursive;
    font-size: 46px;
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: .5px;
    text-align: center;
    white-space: nowrap;
    transform: rotate(-10deg);
    transform-origin: center;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .45);
    pointer-events: none;
}
.pm-hero .pm-hero-tagline p {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
}
.pm-hero .pm-hero-tagline::after {
    content: "";
    display: block;
    width: 80px;
    height: 2px;
    margin: 10px auto 0;
    background: #fff;
    border-radius: 2px;
    transform: translateX(24px);
}
@media (max-width: 1023px) {
    .pm-hero .pm-hero-tagline { font-size: 36px; bottom: 40px; right: 2%; }
}
@media (max-width: 767px) {
    .pm-hero {
        min-height: 0;
        /* mobiele uitsnede (hero-banner-mobile-v4.jpg): bladeren onderaan,
           tekst erboven op het effen blauw */
        background-size: 100% auto !important;
        background-position: center bottom !important;
        padding-bottom: 72vw !important;
    }
    .pm-hero .pm-hero-tagline {
        position: static;
        margin-top: 34px !important;
        font-size: 32px;
        white-space: normal;
        transform: rotate(-6deg);
    }
}

/* ------------------------------------------------------------------ */
/* USP-balk (4 informatiekolommen)                                      */
/* ------------------------------------------------------------------ */
.pm-usp {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.pm-usp img {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
}
.pm-usp h3 {
    color: var(--pm-teal);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 8px;
}
.pm-usp p {
    color: var(--pm-muted);
    font-size: 14px;
    line-height: 1.45;
    margin: 0;
}
@media (min-width: 768px) {
    .pm-usp-row .pagebuilder-column + .pagebuilder-column {
        border-left: 1px solid var(--pm-line) !important;
    }
}
@media (max-width: 767px) {
    .pm-usp-row .pagebuilder-column-line { flex-wrap: wrap; }
    .pm-usp-row .pagebuilder-column {
        width: 50% !important;
        flex-basis: 50% !important;
    }
}

/* ------------------------------------------------------------------ */
/* Categorie-showcase (widget)                                          */
/* ------------------------------------------------------------------ */
.pm-cat-showcase {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 18px;
}
@media (max-width: 1023px) { .pm-cat-showcase { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 599px) { .pm-cat-showcase { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }

.pm-cat-tile {
    display: block;
    color: var(--pm-teal);
    text-decoration: none;
}
.pm-cat-tile:hover,
.pm-cat-tile:focus { text-decoration: none; color: var(--pm-teal); }
.pm-cat-tile__media {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1.05;
    overflow: hidden;
    border-radius: 6px;
    background: var(--pm-soft);
    box-shadow: 0 1px 3px rgba(14, 59, 76, .12);
}
.pm-cat-tile__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .9s ease, transform .5s ease;
}
.pm-cat-tile__img.is-active { opacity: 1; }
.pm-cat-tile:hover .pm-cat-tile__img { transform: scale(1.04); }
.pm-cat-tile__label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-size: 14px;
    font-weight: 600;
}
.pm-arrow { color: var(--pm-green); font-size: 16px; transition: transform .2s ease; }
.pm-cat-tile:hover .pm-arrow { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
    .pm-cat-tile__img { transition: none; }
}

/* ------------------------------------------------------------------ */
/* Twee panelen: "A stronger green chain" + "All the green"             */
/* ------------------------------------------------------------------ */
.pm-panels .pagebuilder-column-line { gap: 18px; }
.pm-panel--dark {
    position: relative;
    min-height: 340px;
    justify-content: center !important;
    overflow: hidden;
}
.pm-panel--dark::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(15, 58, 77, .92) 0%, rgba(15, 58, 77, .75) 55%, rgba(15, 58, 77, .35) 100%);
    pointer-events: none;
}
.pm-panel--dark > * { position: relative; z-index: 1; }
.pm-panel--dark [data-content-type="text"] {
    color: rgba(255, 255, 255, .9);
    font-size: 16px;
    line-height: 1.55;
    max-width: 420px;
    margin-bottom: 20px;
}
.pm-panel-title {
    color: #fff;
    font-size: clamp(26px, 2.6vw, 34px);
    font-weight: 400;
    line-height: 1.15;
    text-transform: uppercase;
    margin: 0 0 18px;
}
.pm-panel--light { border-radius: 8px; overflow: hidden; }
.pm-panel--light .pm-panel-title {
    color: var(--pm-teal);
    font-weight: 700;
    font-size: clamp(22px, 2.2vw, 26px);
}
.pm-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
}
.pm-checklist li {
    position: relative;
    padding-left: 34px;
    margin: 0 0 14px;
    color: var(--pm-text);
    font-size: 15px;
    line-height: 22px;
}
.pm-checklist li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--pm-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat;
}
@media (max-width: 767px) {
    .pm-panels .pagebuilder-column-line { flex-wrap: wrap; }
    .pm-panels > .pagebuilder-column-line > .pagebuilder-column { width: 100% !important; flex-basis: 100% !important; }
    .pm-panel--dark { min-height: 300px; }
}

/* ------------------------------------------------------------------ */
/* Nieuwe PM SKU's (widget)                                             */
/* ------------------------------------------------------------------ */
.pm-new-products {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 18px;
}
@media (max-width: 1023px) { .pm-new-products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 599px) { .pm-new-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
.pm-new-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 0 12px;
    border: 1px solid #e6ebe5;
    border-radius: 6px;
    background: #fff;
    color: var(--pm-teal);
    text-decoration: none;
    overflow: hidden;
    transition: box-shadow .2s ease, transform .2s ease;
}
.pm-new-card:hover,
.pm-new-card:focus {
    text-decoration: none;
    color: var(--pm-teal);
    box-shadow: 0 6px 18px rgba(14, 59, 76, .12);
    transform: translateY(-2px);
}
.pm-new-card__media {
    display: block;
    aspect-ratio: 1 / 1;
    background: #fff;
    margin-bottom: 8px;
}
.pm-new-card__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.pm-new-card__name {
    padding: 0 12px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pm-new-card__size {
    padding: 0 12px;
    font-size: 12px;
    color: var(--pm-muted);
}
.pm-new-products__empty {
    color: var(--pm-muted);
    font-style: italic;
    margin: 0;
}