/* ==========================================================
   S1 MERCHPARTNER LIGHT V1 START

   Viel Weiß, Merchpartner-Pink und dunkles Anthrazit.
   ========================================================== */

:root {
    --mp-pink: #d91b70;
    --mp-pink-dark: #b3165d;
    --mp-pink-light: #fff1f7;

    --mp-text: #20232a;
    --mp-muted: #6d737d;

    --mp-white: #ffffff;
    --mp-surface: #f7f8fa;
    --mp-surface-alt: #f1f3f5;
    --mp-border: #e2e5e9;

    --mp-shadow:
        0 8px 28px rgba(30, 34, 40, 0.08);
}


/* ----------------------------------------------------------
   Grundfläche
   ---------------------------------------------------------- */

html,
body,
#page-wrapper,
main {
    background-color: var(--mp-white);
    color: var(--mp-text);
}

body {
    -webkit-font-smoothing: antialiased;
}


/* ----------------------------------------------------------
   Kopfbereich
   ---------------------------------------------------------- */

header,
.header-main {
    background: var(--mp-white) !important;
    color: var(--mp-text) !important;

    border-bottom:
        3px solid var(--mp-pink);

    box-shadow:
        0 4px 18px rgba(30, 34, 40, 0.06);
}


/* obere schmale Leiste */

#header-top-bar,
.header-top-bar {
    background:
        var(--mp-surface) !important;

    color:
        var(--mp-muted) !important;

    border-bottom:
        1px solid var(--mp-border);
}

#header-top-bar a,
.header-top-bar a {
    color:
        var(--mp-muted) !important;
}

#header-top-bar a:hover,
.header-top-bar a:hover {
    color:
        var(--mp-pink) !important;
}


/* ----------------------------------------------------------
   Navigation
   ---------------------------------------------------------- */

header .navbar,
#navbar,
nav.navbar {
    background:
        var(--mp-white) !important;
}

header .navbar .nav-link,
#navbar .nav-link,
nav.navbar .nav-link {
    color:
        var(--mp-text) !important;

    font-weight: 600;

    transition:
        color 0.15s ease,
        background-color 0.15s ease;
}

header .navbar .nav-link:hover,
header .navbar .nav-link:focus,
#navbar .nav-link:hover,
#navbar .nav-link:focus {
    color:
        var(--mp-pink) !important;

    background:
        var(--mp-pink-light);
}


/* ----------------------------------------------------------
   Shop-Navigation / Icons
   ---------------------------------------------------------- */

#shop-nav a,
.header-shop-nav a,
.nav-icons a {
    color:
        var(--mp-text) !important;
}

#shop-nav a:hover,
.header-shop-nav a:hover,
.nav-icons a:hover {
    color:
        var(--mp-pink) !important;
}


/* ----------------------------------------------------------
   Suche
   ---------------------------------------------------------- */

header .form-control,
.main-search-wrapper .form-control,
.search-wrapper .form-control {
    background:
        var(--mp-surface);

    border:
        1px solid var(--mp-border);

    color:
        var(--mp-text);

    border-radius:
        0.45rem;
}

header .form-control:focus,
.main-search-wrapper .form-control:focus,
.search-wrapper .form-control:focus {
    background:
        var(--mp-white);

    border-color:
        var(--mp-pink);

    box-shadow:
        0 0 0 0.2rem
        rgba(217, 27, 112, 0.12);
}


/* ----------------------------------------------------------
   Links
   ---------------------------------------------------------- */

main a:not(.btn) {
    color:
        var(--mp-pink);
}

main a:not(.btn):hover {
    color:
        var(--mp-pink-dark);
}


/* ----------------------------------------------------------
   Primäre Buttons
   ---------------------------------------------------------- */

.btn-primary {
    background-color:
        var(--mp-pink);

    border-color:
        var(--mp-pink);

    color:
        #ffffff;

    border-radius:
        0.45rem;

    font-weight:
        700;

    box-shadow:
        0 4px 14px
        rgba(217, 27, 112, 0.18);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color:
        var(--mp-pink-dark);

    border-color:
        var(--mp-pink-dark);

    color:
        #ffffff;

    box-shadow:
        0 7px 20px
        rgba(217, 27, 112, 0.24);
}


/* sekundäre Buttons */

.btn-outline-primary {
    background:
        var(--mp-white);

    border-color:
        var(--mp-pink);

    color:
        var(--mp-pink);
}

.btn-outline-primary:hover {
    background:
        var(--mp-pink);

    border-color:
        var(--mp-pink);

    color:
        #ffffff;
}


/* ----------------------------------------------------------
   Produktkarten / Cards
   ---------------------------------------------------------- */

.card,
.productbox-inner {
    background:
        var(--mp-white);

    border-color:
        var(--mp-border);
}

.card {
    border-radius:
        0.65rem;
}

.card:hover {
    box-shadow:
        var(--mp-shadow);
}


/* ----------------------------------------------------------
   Formulare
   ---------------------------------------------------------- */

.form-control,
.custom-select {
    border-color:
        var(--mp-border);

    border-radius:
        0.45rem;
}

.form-control:focus,
.custom-select:focus {
    border-color:
        var(--mp-pink);

    box-shadow:
        0 0 0 0.2rem
        rgba(217, 27, 112, 0.12);
}


/* ----------------------------------------------------------
   Badges / aktive Elemente
   ---------------------------------------------------------- */

.badge-primary,
.page-item.active .page-link {
    background-color:
        var(--mp-pink);

    border-color:
        var(--mp-pink);
}

.custom-control-input:checked
~ .custom-control-label::before {
    background-color:
        var(--mp-pink);

    border-color:
        var(--mp-pink);
}


/* ----------------------------------------------------------
   Helle Sekundärflächen
   ---------------------------------------------------------- */

.bg-light {
    background-color:
        var(--mp-surface) !important;
}


/* ----------------------------------------------------------
   Footer

   Bewusst hell – kein schwarzer Block.
   ---------------------------------------------------------- */

#footer,
footer#footer,
footer {
    background:
        var(--mp-surface-alt);

    color:
        var(--mp-muted);

    border-top:
        1px solid var(--mp-border);
}

#footer h1,
#footer h2,
#footer h3,
#footer h4,
#footer h5,
footer h1,
footer h2,
footer h3,
footer h4,
footer h5 {
    color:
        var(--mp-text);
}

#footer a,
footer a {
    color:
        var(--mp-muted);
}

#footer a:hover,
footer a:hover {
    color:
        var(--mp-pink);
}


/* ----------------------------------------------------------
   Kleine Akzente
   ---------------------------------------------------------- */

hr {
    border-color:
        var(--mp-border);
}

.text-primary {
    color:
        var(--mp-pink) !important;
}

.border-primary {
    border-color:
        var(--mp-pink) !important;
}


/* ==========================================================
   S1 MERCHPARTNER LIGHT V1 END
   ========================================================== */