/* ============================================================
   HerbaOnline.be — Responsive CSS (Fase 4 redesign)
   Mobile-first, flexbox/grid, behoud Herbalife kleurenschema
   ============================================================ */

/* === CSS VARIABELEN === */
:root {
    --green:       #377c2b;
    --green-light: #6d9e65;
    --green-pale:  #eef8ec;
    --blue:        #0064b1;
    --blue-dark:   #2b4c72;
    --blue-mid:    #1e63bc;
    --red:         #b50000;
    --text:        #303030;
    --border:      #d0d1ce;
    --max-width:   1100px;
}

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

/* === BASIS === */
body, html {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text);
    background-color: #1a1a1a;
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: Arial, Helvetica, sans-serif;
    color: var(--blue);
    margin: 0 0 0.7em;
    font-weight: bold;
    line-height: 1.3;
}
h1 { font-size: 1.4rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.05rem; }
h4 { font-size: 1rem; }
h5 { font-size: 0.9rem; }
h6 { font-size: 0.8rem; }

h1.georgiacaps_center {
    font-family: Georgia, serif;
    text-align: center;
    font-size: 1.8rem;
    font-weight: normal;
    text-transform: uppercase;
    color: var(--red);
    clear: both;
    margin: 0;
}
h1.georgiacaps_center2 {
    font-family: Georgia, serif;
    text-align: center;
    font-size: 1.4rem;
    font-weight: normal;
    color: var(--blue-mid);
    clear: both;
    margin: 0;
}

p {
    color: var(--text);
    font-size: inherit;
    margin: 0 0 0.8em;
    line-height: 1.6;
}
a { color: var(--blue-mid); }
a:hover { text-decoration: none; }
img { max-width: 100%; height: auto; border: 0; }
ul, li { font-family: inherit; font-size: inherit; }

table {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: var(--text);
    margin-bottom: 0.8em;
    border-collapse: collapse;
}

/* clearfloat */
.clearfloat { clear: both; height: 0; display: block; }
.clearfloat_spacer_40px { clear: both; display: block; height: 40px; width: 100%; }

/* === HOOFD LAYOUT === */
#main {
    max-width: var(--max-width);
    margin: 0 auto;
    background: #fff;
}

/* === MENU === */
#menu {
    background-color: var(--green);
    position: sticky;
    top: 0;
    z-index: 1000;
    font-weight: bold;
    width: 100%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* Mobiele menubalk (altijd zichtbaar) */
.menu-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    height: 48px;
}
.menu-logo {
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    flex: 1;
}
.menu-cart-mobile {
    color: #fff;
    font-size: 13px;
    margin-right: 12px;
}
#menu-toggle {
    background: none;
    border: none;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
}

/* Nav verborgen op mobiel, zichtbaar na toggle */
#menu-nav {
    display: none;
    background-color: var(--green);
    border-top: 1px solid rgba(255,255,255,0.2);
}
#menu-nav.open { display: block; }

/* Menu items */
#menu-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#menu-nav > ul > li {
    border-top: 1px solid rgba(255,255,255,0.15);
}
#menu-nav > ul > li > a,
#menu-nav > ul > li > span {
    display: block;
    padding: 12px 16px;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
}
#menu-nav > ul > li > a:hover,
#menu-nav > ul > li > span:hover {
    background: rgba(255,255,255,0.1);
    color: #9f0;
}

/* Submenu mobiel */
.submenu {
    display: none;
    background: rgba(0,0,0,0.2);
    padding: 0 0 0 16px;
}
.has-submenu:hover .submenu,
.has-submenu:focus-within .submenu { display: block; }
.submenu li { border-top: 1px solid rgba(255,255,255,0.1); }
.submenu li a {
    display: block;
    padding: 10px 16px;
    color: #fff;
    text-decoration: none;
    font-size: 13px;
}
.submenu li a:hover { color: #9f0; }

/* Scheiders | verberg op mobiel */
.menu-sep { display: none !important; }

/* Zoekformulier mobiel */
.menu-search { padding: 8px 12px; border-top: 1px solid rgba(255,255,255,0.15); }
.search input {
    display: block;
    width: 100%;
    padding: 6px 10px 6px 28px;
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 20px;
    background: rgba(255,255,255,0.15) url(images/loop.png) 6px center no-repeat;
    color: #fff;
    font-size: 13px;
    outline: none;
}
.search input::placeholder { color: rgba(255,255,255,0.7); }

/* Winkelwagen totaal */
.menu-cart {
    padding: 12px 16px;
    color: #fff;
    font-size: 14px;
    border-top: 1px solid rgba(255,255,255,0.15);
}
.menu-cart span { font-weight: bold; }

/* Afrekenen knop */
.menu-checkout {
    padding: 8px 16px 12px;
    border-top: 1px solid rgba(255,255,255,0.15);
}
.menu-checkout img { cursor: pointer; max-height: 36px; width: auto; }

/* Livesearch dropdown */
#livesearch {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0;
    margin-top: 4px;
    display: none;
}
#livesearch:not(:empty) { display: block; }
#livesearch li { border-top: 1px solid #f0f0f0; list-style: none; padding: 0; }
#livesearch li a {
    display: block;
    padding: 8px 12px;
    color: var(--text);
    text-decoration: none;
    font-size: 13px;
}
#livesearch li a:hover { background: var(--green-pale); }

/* === DESKTOP MENU (≥768px) === */
@media (min-width: 768px) {
    .menu-bar { display: none; }
    .menu-cart-mobile { display: none; }

    #menu-nav {
        display: flex !important;
        align-items: center;
        border-top: none;
    }
    #menu-nav > ul {
        display: flex;
        align-items: center;
        height: 44px;
        margin: 0 auto;
        flex-wrap: nowrap;
    }
    #menu-nav > ul > li {
        border-top: none;
        position: relative;
        height: 44px;
        display: flex;
        align-items: center;
    }
    #menu-nav > ul > li > a,
    #menu-nav > ul > li > span {
        height: 44px;
        line-height: 44px;
        padding: 0 10px;
        white-space: nowrap;
        display: block;
    }
    .menu-sep { display: flex !important; padding: 0 4px; color: rgba(255,255,255,0.5); align-items: center; }
    .menu-search {
        border-top: none;
        padding: 0 10px 0 0;
        display: flex;
        align-items: center;
        position: relative;
    }
    .search input { width: 140px; }
    #livesearch {
        position: absolute;
        top: 44px;
        left: 0;
        width: 240px;
        margin-top: 0;
        z-index: 300;
    }
    .submenu {
        position: absolute;
        top: 44px;
        left: 0;
        min-width: 220px;
        background: var(--green);
        padding: 0;
        box-shadow: 0 4px 8px rgba(0,0,0,0.3);
        z-index: 200;
        border-radius: 0 0 4px 4px;
    }
    .has-submenu:hover .submenu { display: block; }
    .submenu li { border-top: 1px solid rgba(255,255,255,0.15); }
    .menu-cart {
        border-top: none;
        padding: 0 10px;
        height: 44px;
        line-height: 44px;
        white-space: nowrap;
    }
    .menu-checkout {
        border-top: none;
        padding: 0 6px;
        display: flex;
        align-items: center;
        height: 44px;
    }
    .menu-checkout img { max-height: 32px; }
}

/* === HEADER / LOGO === */
#header {
    background: var(--green-pale);
    text-align: center;
    padding: 12px 16px;
}
#header img {
    max-width: 100%;
    width: auto;
    height: auto;
    max-height: 120px;
}
@media (min-width: 768px) {
    #header {
        padding: 0;
        background: url(images/bg_header.png) no-repeat left top;
        background-size: 100% auto;
        height: 202px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #header img {
        max-height: 179px;
        padding-top: 9px;
    }
}

/* === CONTENT === */
#content {
    background-color: #fff;
    padding: 20px 16px 24px;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    min-height: 400px;
}
@media (min-width: 768px) {
    #content { padding: 30px 0 24px; }
}

/* === CENTERWRAPS === */
#centerwrap_834px,
#centerwrap_776px {
    width: 100%;
    padding: 0 16px;
}
.width834px { width: 100%; }

@media (min-width: 900px) {
    #centerwrap_834px {
        width: 960px;
        margin-left: 32px;
        padding: 0;
    }
    #centerwrap_776px {
        width: 900px;
        margin-left: 60px;
        padding: 0;
    }
    .width834px { width: 960px; float: left; display: block; }
}

/* === BASICBLUEBOX (infopagina's) === */
.basicbluebox {
    background: #f0f7ef;
    border-radius: 4px;
    overflow: hidden;
    width: 100%;
    margin: 0 0 20px;
}
@media (min-width: 900px) {
    .basicbluebox {
        background: url(images/bg_basicblue_body.png) repeat-y left top;
        background-color: transparent;
        width: 776px;
        border-radius: 0;
    }
}

#basicbluetop {
    background: url(images/bg_basicblue_top.png) no-repeat left top;
    height: 16px;
    width: 100%;
    display: block;
    float: left;
}
.bluetoph1 {
    font-style: italic;
    font-weight: normal;
    text-align: center;
    font-size: 1.6rem;
    color: var(--green);
    margin-bottom: 0;
    clear: both;
    padding: 12px 16px 0;
}
.bluetop_subheader {
    color: var(--green);
    text-align: center;
    margin-top: 0.6em;
    clear: both;
}
.turntored { color: var(--red); font-size: 2rem; }

#basicbluedivider {
    background: url(images/bg_basicblue_divider.png) no-repeat left top;
    height: 24px;
    width: 100%;
    display: block;
    float: left;
    clear: both;
}
.basicblue_textblok {
    padding: 16px;
    clear: both;
    overflow: hidden;
}
@media (min-width: 900px) {
    .basicblue_textblok {
        width: 676px;
        margin-left: 50px;
        padding: 16px 0;
    }
}
.basicblue_textblok ul { margin-left: 0; list-style-position: outside; }
.basicblue_textblok li {
    color: var(--text);
    font-size: 13px;
    line-height: 1.6;
}
#basicbluebottom {
    background: url(images/bg_basicblue_bottom.png) no-repeat left top;
    height: 22px;
    width: 100%;
    display: block;
    float: left;
    clear: both;
}

/* === INTRODUCTION (homepage) === */
#introduction {
    width: 100%;
    padding: 0 16px;
    overflow: hidden;
}
#introduction h1 {
    font-size: 1.5rem;
    color: var(--red);
    margin: 0.6em 0;
}
#introduction h2 {
    font-size: 1.2rem;
    color: #000;
    line-height: 1.5;
}
@media (min-width: 768px) {
    #introduction {
        width: 865px;
        margin-left: 33px;
        padding: 0;
    }
}

/* Greenbox (rechterkolom homepage) */
#greenbox {
    background: url(images/bg_rightcolgreen_bttm.png) no-repeat right bottom;
    padding-bottom: 14px;
    width: 100%;
    margin-bottom: 16px;
    float: none;
}
@media (min-width: 768px) {
    #greenbox {
        float: right;
        width: 288px;
        margin-left: 20px;
    }
}
#greenbox #greenboxtop {
    background: url(images/bg_rightcolgreen_top.png) no-repeat right top;
    height: 24px;
    width: 100%;
    display: block;
    float: left;
}
#greenbox #strongpoints {
    width: auto;
    padding: 8px 12px 0 22px;
}
#greenbox #strongpoints h2 { font-size: 1.1rem; color: var(--red); }
#greenbox #strongpoints ul,
#greenbox #strongpoints ul li { list-style: none; padding: 0; margin: 0; }
#greenbox #strongpoints ul li {
    font-size: 14px;
    line-height: 1.5;
    color: #000;
    margin-bottom: 10px;
    padding-left: 22px;
    background: url(images/bg_strongp_bullet.png) no-repeat left 3px;
}
#greenbox #strongpoints ul li strong { color: var(--green); font-weight: bold; }

/* === CONTACT + TRUST LOGOS === */
#contact_trust {
    width: 100%;
    padding: 12px 16px;
    text-align: center;
    overflow: hidden;
}
@media (min-width: 768px) {
    #contact_trust {
        display: flex;
        align-items: center;
        width: 834px;
        margin-left: 32px;
        padding: 0 0 0 15px;
        height: 117px;
    }
}
#contactmetons {
    display: inline-block;
    text-decoration: none;
    margin-bottom: 12px;
    text-align: left;
}
@media (min-width: 768px) {
    #contactmetons {
        background: url(images/bg_vragen_contact.png) no-repeat left top;
        height: 90px;
        width: 196px;
        margin-right: 28px;
        margin-left: 20px;
        padding-top: 27px;
        padding-left: 10px;
        margin-bottom: 0;
        float: left;
    }
}
.contactmetonsp {
    display: block;
    font-size: 16px;
    color: #000;
    font-weight: bold;
}
.contactmetonsp:hover { color: var(--red); }
#contact_trust a { display: block; float: left; }
#trustlogos_wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
}
@media (min-width: 768px) {
    #trustlogos_wrap {
        display: inline;
        float: left;
        margin-top: 34px;
    }
    #contact_trust img {
        float: left;
        margin-right: 14px;
    }
}

/* === LOGIN BLOK (homepage) === */
#loginwrap {
    width: 100%;
    padding: 0 16px;
    margin-bottom: 40px;
    overflow: hidden;
}
@media (min-width: 900px) {
    #loginwrap {
        width: 834px;
        margin-left: 32px;
        padding: 0;
        float: left;
    }
}
#loginwrap #important_warning {
    background: url(images/bg_belangrijk.png) no-repeat left top;
    height: 62px;
    width: 100%;
    text-align: center;
    padding-top: 17px;
    float: left;
}
#loginwrap #important_warning h2 { font-size: 1.1rem; line-height: 24px; }
#loginwrap #important_warning h2 strong { font-size: 1.3rem; }

#loginwrap #twologins {
    background: url(images/bg_bentunieuw.png) no-repeat left top;
    height: 235px;
    width: 100%;
    margin-top: 5px;
    position: relative;
    float: left;
}
#twologins #login_new, #twologins #login_reg {
    background-repeat: no-repeat;
    background-position: left top;
    height: 240px;
    width: 245px;
    position: absolute;
    z-index: 99;
    margin-top: 15px;
    padding: 22px 20px 0;
}
#twologins #login_new {
    background-image: url(images/bg_ikbennieuw.png);
    margin-left: 10px;
}
#twologins #login_reg {
    margin-left: 537px;
    background-image: url(images/bg_alaangemeld.png);
}
#twologins #login_new h1, #twologins #login_reg h1 {
    text-align: center;
    width: 245px;
    font-family: Georgia, serif;
    font-size: 1.5rem;
    font-weight: normal;
    color: #2b4c72;
    margin-bottom: 80px;
}
#twologins #login_reg h1 { margin-bottom: 97px; }
#twologins input[type="submit"] { font-size: 13px; font-weight: bold; padding: 4px; width: 125px; }
#twologins #Bentunieuw {
    display: inline;
    float: left;
    width: 216px;
    margin-top: 30px;
    text-align: center;
    margin-left: 309px;
}
#twologins #Bentunieuw h2 { font-size: 1.2rem; color: var(--red); margin-bottom: 0.4em; }
#twologins #Bentunieuw p { font-size: 14px; line-height: 20px; color: #000; }

/* Registreer/login formulier blok */
.register-login {
    background-color: #FFFFB3;
    padding: 12px;
    border-radius: 12px;
    overflow: hidden;
}
.register-login .important {
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 10px;
    line-height: 1.5;
}
.register-login .important .title { font-size: 22px; }
.register-login .register,
.register-login .login {
    background-color: #FFFF5E;
    border-radius: 10px;
    padding: 18px 16px 12px;
    margin-top: 8px;
}
.register-login .register { border: 3px solid #b30148; }
.register-login .login    { border: 3px solid var(--green); }
@media (min-width: 768px) {
    .register-login .register,
    .register-login .login {
        width: 355px;
        height: 240px;
        float: left;
        padding: 18px 20px 5px 10px;
        margin-top: 2px;
    }
    .register-login .login { float: right; }
}
.register-login .block_title {
    font-size: 2rem;
    color: #b30047;
    letter-spacing: 3px;
    margin-bottom: 10px;
    line-height: 1;
}
.register-login_formfield { padding: 5px; }
#homepagelogin th, #homepagelogin2 th {
    text-align: right;
    vertical-align: top;
    padding: 8px 2px 0;
    font-weight: bold;
    color: #000;
}
#homepagelogin td, #homepagelogin2 td {
    padding: 3px 0 2px 2px;
}
#homepagelogin tr td input[type="text"],
#homepagelogin2 tr td input[type="text"] { max-width: 150px; }

/* === STAP-INDICATOR (bestelflow) === */
#stepbystep {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    float: left;
    width: 100%;
}
#stepbystep li { flex: 1; min-width: 80px; }
#stepbystep li span {
    display: block;
    font-size: 13px;
    font-weight: bold;
    padding: 10px 8px;
    color: #9cc5e4;
    background-color: #ddd;
    text-align: center;
}
#stepbystep .active span  { background-color: #b3d8f5; color: var(--blue); }
#stepbystep .stepdone span { background-color: #d4edce; color: var(--green); }

@media (min-width: 768px) {
    #stepbystep li {
        background: url(images/bg_bluestep_final.png) no-repeat right top;
        height: 45px;
        padding-right: 11px;
        flex: none;
    }
    #stepbystep li span {
        background: url(images/bg_bluestep_left.png) no-repeat left top;
        height: 45px;
        line-height: 42px;
        padding: 0 4px 3px 14px;
        font-size: 20px;
        text-align: left;
        background-color: transparent;
    }
    #stepbystep .active  { background-image: url(images/bg_bluestep_right.png); padding-right: 34px; }
    #stepbystep .future  { background-image: url(images/bg_bluestep_right.png); padding-right: 34px; }
    #stepbystep .stepdone { background-image: url(images/bg_greenstep_right.png); padding-right: 38px; }
    #stepbystep .active span, #stepbystep .future span {
        background-image: url(images/bg_bluestep_left.png);
        color: var(--blue);
        background-color: transparent;
    }
    #stepbystep .stepdone span {
        background-image: url(images/bg_greenstep_left.png);
        color: #7cb671;
        background-color: transparent;
        padding-right: 0;
    }
}

/* === PRODUCTTABELLEN === */
.producttable-wrap { width: 100%; margin-bottom: 16px; }

/* Mobiel: tabel als kaart weergeven */
@media (max-width: 767px) {
    .producttable-wrap { overflow-x: visible; }

    table.producttable,
    table.producttable tbody,
    table.producttable tr,
    table.producttable td,
    table.producttable th { display: block; width: 100% !important; }

    /* Productnaam header: normaal zichtbaar */
    table.producttable thead,
    table.producttable tr:first-child { display: block; }

    /* Verberg lege bluecolumn header */
    table.producttable th.bluecolumn.topside { display: none !important; }

    /* Productafbeelding: centreer */
    table.producttable td.productimg {
        text-align: center;
        padding-bottom: 0;
        background-color: #fff;
        border-bottom: none;
    }

    /* Prijskolom: horizontaal naast aantal */
    table.producttable td.bluecolumn {
        background-color: #d5e4f4;
        padding: 12px 16px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
    }

    /* Variant-rijen (smaken): compact */
    table.producttable tr + tr td.productimg { display: none !important; }
}

table.producttable {
    width: 100%;
    margin: 10px 0 14px;
    line-height: 1.5;
    font-size: 12px;
}
table.producttable th {
    text-align: center;
    vertical-align: middle;
    background-color: var(--green);
    padding: 8px;
    color: #fff;
}
table.producttable th h1,
table.producttable th h2 {
    line-height: 27px;
    color: #fff;
    margin: 0;
    font-size: 14px;
}
table.producttable th.productname {
    background: var(--green) url(images/bg_table_lefttop.png) no-repeat left top;
    height: 27px;
}
table.producttable th.productname h1 { font-size: 16px; }
table.producttable th.bluecolumn { background-color: var(--blue-dark); }
table.producttable th.bluecolumn.topside {
    background: var(--blue-dark) url(images/bg_table_righttop_green.png) no-repeat right top;
}
table.producttable td {
    text-align: left;
    vertical-align: top;
    padding: 10px;
    background-color: #eef8ec;
    border-bottom: 1px solid #fff;
}
table.producttable td.packcontentcolumn { background-color: #d6eed1; width: 22%; min-width: 140px; }
table.producttable td.discriptioncolumn { padding-top: 10px; }
table.producttable td.bluecolumn       { background-color: #d5e4f4; width: 20%; min-width: 130px; }
table.producttable td.bluecolumn input[type="text"] { width: 60px; max-width: 60px; }
table.producttable td.productimg {
    text-align: center;
    vertical-align: top;
    width: 1%;
    white-space: nowrap;
}
table.producttable td.productimg img {
    border: 1px solid #3e8133;
    width: 120px;
    height: 120px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}
table.producttable ul { list-style: none; margin: 0; padding: 0; }
table.producttable ul li {
    padding-left: 10px;
    background: url(images/bg_libullet.png) no-repeat left 5px;
    line-height: 1.5;
}
table.producttable td select { width: 130px; margin-left: 4px; }
#orderlist td { padding: 3px 10px 0; }
#orderlist td.middlegreen { background-color: #d5edd0; }
#orderlist td p { margin: 0; }
#orderlist td.totalsgreen { background-color: #2f7c2b; line-height: 20px; }
#orderlist td.totalsblue  { background-color: var(--blue-dark); }
#orderlist td.totalsgreen p,
#orderlist td.totalsblue p  { color: #fff; font-weight: bold; font-size: 15px; }

table.innertable { width: 100%; background-color: transparent; }
table.innertable,
table.innertable th,
table.innertable td { margin: 0; background-color: transparent; border: none; padding-right: 0; padding-left: 0; }
table.innertable td p { margin-top: 0; }
table.innertable.producttaste td { padding-left: 10px; }
table.innertable.producttaste th { text-align: left; margin: 0; padding: 0; }

input.quantitycol { width: 36px; }

/* === ADRESGEGEVENS TABEL === */
#adressinfo tr th {
    text-align: right;
    padding: 5px 3px 0;
    vertical-align: top;
    background-color: #F2F9F0;
    border-bottom: 1px solid #fff;
}
#adressinfo tr th p { margin: 0; font-size: 12px; font-weight: bold; color: var(--blue); }
#adressinfo tr td  { text-align: left; vertical-align: top; padding: 7px 0 0 6px; }
#adressinfo tr td p { margin: 0; }
#adressinfo #formsubmitbuttons th,
#adressinfo #formsubmitbuttons td { padding-top: 16px; background-color: #fff; }
#adressinfo #formsubmitbuttons td { padding-left: 3px; }
#adressinfo #formsubmitbuttons input[type="submit"] { font-size: 11px; }
#adressinfo .ordernowheader { padding-left: 40px; }
#adressinfo #ordernowtd { padding-left: 40px; vertical-align: middle; }
#adressinfo .klikhieromtebetalen {
    background: url(images/bg_klikhieromtebetalen.png) no-repeat left top;
    display: block;
    float: left;
    height: 141px;
    width: 360px;
    line-height: 141px;
    font-size: 16px;
    font-weight: bold;
    color: #000;
    text-decoration: none;
    text-align: center;
}
#ordernowbttn {
    background: url(images/bg_ordernow_bttn.png) no-repeat left top;
    display: block;
    float: left;
    height: 56px;
    width: 226px;
    font-size: 16px;
    line-height: 22px;
    color: var(--green);
    text-decoration: none;
    font-weight: bold;
    padding: 13px 58px 0 0;
    text-align: right;
}
#ordernowbttn:hover { color: var(--red); background-position: left -72px; }

/* === FORMULIEREN === */
input[type="text"],
input[type="password"],
input[type="email"] {
    border: 1px solid #89a7ca;
    background-color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    height: 28px;
    padding: 0 6px;
    border-radius: 3px;
    width: 100%;
    max-width: 260px;
}
input[type="password"] { max-width: 200px; }
textarea {
    border: 1px solid #89a7ca;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    padding: 6px;
    border-radius: 3px;
    width: 100%;
}
input[type="submit"] {
    background-color: var(--green);
    color: #fff;
    border: none;
    padding: 8px 18px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    width: auto;
    max-width: none;
    height: auto;
}
input[type="submit"]:hover { background-color: var(--green-light); }

.button_new {
    display: inline-block;
    background: linear-gradient(to bottom, #77d42a 5%, #5cb811 100%);
    border: 2px solid #268a16;
    border-radius: 15px;
    color: #306108;
    font-family: Arial;
    font-size: 16px;
    font-weight: bold;
    height: 42px;
    line-height: 38px;
    width: 200px;
    text-decoration: none;
    text-align: center;
    text-shadow: 1px 1px 0 #aade7c;
    cursor: pointer;
}
.button_new:hover { background: linear-gradient(to bottom, #5cb811 5%, #77d42a 100%); }
.button_new:active { position: relative; top: 1px; }

/* === FOOTER === */
#footer {
    background: url(images/bg_footer.png) no-repeat left top;
    padding: 14px 16px 16px;
    text-align: center;
    clear: both;
    overflow: hidden;
}
#footertxt,
#footertxt p,
#footertxt a {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #8d8d8d;
    text-decoration: none;
}
#footertxt a:hover { text-decoration: underline; }
#footer_distr {
    width: 100%;
    padding: 0 16px;
    margin-top: 16px;
    float: left;
}
@media (min-width: 768px) {
    #footer { padding: 0 0 16px; }
    #footertxt {
        width: 880px;
        height: 19px;
        margin: 14px 0 0 9px;
        float: left;
        text-align: left;
    }
    #footer_distr {
        width: 656px;
        margin-left: 121px;
        margin-top: 33px;
        padding: 0;
    }
}
#footer_distr h1 { font-size: 1rem; font-style: italic; color: #6e6e6e; }
#footer_distr p  { font-size: 12px; line-height: 1.5; color: #6e6e6e; }

/* === POP-UP === */
#blanket {
    background-color: #111;
    opacity: 0.65;
    position: fixed;
    z-index: 9001;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#popUpDiv {
    position: fixed;
    background-color: #eee;
    z-index: 9002;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 700px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 20px;
    border: 8px solid var(--green);
    border-radius: 4px;
}

/* === QUOTE BLOK === */
#quote {
    width: 100%;
    max-width: 368px;
    margin: 0 auto;
    background: #fff url(images/quote_background.jpg) left top no-repeat;
}
#quote h4 {
    cursor: default;
    width: 70%;
    margin: 0 auto;
    padding-top: 22px;
    color: #a3a3a3;
    font-size: 11px;
    line-height: 30px;
    font-style: italic;
}

/* === DIVERSE UTILITIES === */
.topmargin40px    { margin-top: 40px; }
.toppadding5px    { padding-top: 5px; }
.rightaline       { text-align: right; }
.leftaline        { text-align: left; }
.paddingleft10px  { padding-left: 10px; }
#darklinebottom   { border-bottom: 2px solid var(--green); }
#nolinebottom     { border-bottom-style: none; }
.AbsWrap          { width: 100%; position: relative; }
.rowWrap          { width: 100%; }

.blue14px, .blue14px a {
    font-size: 14px;
    line-height: 1.5;
    color: var(--blue-mid);
    text-decoration: none;
}
.blue14px a:hover { text-decoration: underline; }

/* Speciale groene aanbieding blok */
#greenspecialoffer {
    background: url(images/bg_biggreenoffer.png) no-repeat left top;
    height: 319px;
    width: 100%;
    max-width: 733px;
    margin: 0 auto 20px;
    float: left;
}
@media (min-width: 900px) {
    #greenspecialoffer { margin-left: 50px; width: 733px; }
}
#greenspecialoffer h1 {
    font-size: 1.8rem;
    color: var(--red);
    text-align: center;
    margin: 15px 0 30px;
}
#greenspecialoffer h2 {
    text-align: center;
    font-size: 1.2rem;
    color: var(--green);
}
#greenspecialoffer ul {
    float: left;
    width: 343px;
    list-style: none;
    margin: 0 0 0 58px;
    padding: 0;
}
#greenspecialoffer ul li {
    background: url(images/bg_strongp_bullet.png) no-repeat left 1px;
    padding: 0 0 6px 30px;
    font-size: 16px;
    line-height: 15px;
    color: var(--green);
}
#greenspecialoffer #greenleaf {
    background: url(images/bg_greengoldleaf.png) no-repeat left top;
    float: left;
    height: 145px;
    width: 210px;
    margin-top: -30px;
    text-align: center;
    padding: 55px 0 0 28px;
}
#greenspecialoffer #greenleaf h1 { font-size: 1.6rem; line-height: 42px; color: #e2fd90; margin: 0; }
#greenspecialoffer #greenleaf h1 span { font-size: 1rem; color: #fff; line-height: 20px; }