﻿/* ====================================================
    CARAMELLE - ELINE DESIGN A
    PDH, DATUM (2021-07-12)
==================================================== */

/* Variabler */
:root {
    --pink: #EF87BE;
    --darkpink: #bd4b87;
    --darkwhite: #E9E9E9;
}


/* ====================================================
Sidhuvud
==================================================== */
.header,
.scrolled .logo {
    background-color: white;
}


/* ====================================================
Varukorg
==================================================== */
/* Tom varukorg */
/* Bakgrundfärg */
.empty .cart-header {
    background-color: var(--pink);
}

/* Ikonfärg */
.empty .cart-header::before,
.empty .cart-open-btn::before {
    color: white;
}

/* Varukorg med artiklar */
/* Bakgrundfärg */
.cart-header {
    background-color: var(--pink);
}

/* Ikonfärg */
.cart-header::before,
.cart-open-btn::before {
    color: white;
}


/* ====================================================
Meny
==================================================== */
/* Bakgrundfärg */
.nav-menu {
    background-color: white;
}

/* Textfärg */
.nav-menu li span,
.nav-menu li a,
.nav-menu .close-btn::before,
.header-icons a,
.scrolled .header-icons a {
    color: black;
}


/* ====================================================
Navigeringsträd (produktträd)
==================================================== */
/* Bakgrundfärg */
.nav-wrapper,
.nav-tree .level1 > ul {
    background-color: var(--pink);
}


/* ====================================================
Sidfot
==================================================== */
/* Bakgrundfärg */
footer {
    background-color: var(--pink);
}

/* Rutor bakgrundfärg */
footer .footer-inner > div {
    background-color: white;
}

/* Textfärg */
footer,
.footerMenu a {
    color: black;
}


/* ====================================================
Filtrering
==================================================== */
/* Bakgrundsfärg */
.filters {
    background-color: var(--pink);
}


/* ====================================================
Tabellhuvud
==================================================== */
/* Bakgrundsfärg */
.table .header .cell,
.table .header .cell.sort {
    background-color: var(--pink);
}

/* Textfärg */
.table .header .cell,
.table .header .cell.sort {
    color: white;
}


/* ====================================================
Formulär
==================================================== */
/* Bakgrundsfärg */
.form-wrapper {
    background-color: var(--pink);
}

/* Textfärg */
.form-wrapper .form-group {
    color: black;
}


/* ====================================================
Knappar
==================================================== */
/*
    Återställ
    Fortsätt handla
    Töm varukorg
*/
.btn-reset,
.btn-continue,
.btn-empty {
    background-color: var(--pink);
    border-color: var(--pink);
    color: white;
}

.btn-reset:hover,
.btn-continue:hover,
.btn-empty:hover {
    background-color: var(--darkpink);
    border-color: var(--darkpink);
    color: var(--white);
}

/*
    Köp
    Till kassan
*/
.btn-buy,
.btn-tocheckout {
    background-color: var(--pink);
    border-color: var(--pink);
    color: white;
}

.btn-buy:hover,
.btn-tocheckout:hover {
    background-color: var(--darkpink);
    border-color: var(--darkpink);
    color: white;
}

/*
    Välj
    Klicka för pris
    Ring för pris
*/
.btn-choose,
.btn-click,
.btn-call {
    background-color: var(--pink);
    border-color: var(--pink);
    color: white;
}

.btn-choose:hover,
.btn-click:hover,
.btn-call:hover {
    background-color: var(--darkpink);
    border-color: var(--darkpink);
    color: white;
}

/*
    Spara
    Logga in
    Skicka
    Skapa konto
 */
 .btn-action {
    background-color: white;
    border-color: white;
    color: black;
}

.btn-action:hover {
    background-color:var(--darkwhite);
    border-color: var(--darkwhite);
    color: black;
}


@media screen and (min-width: 951px) {
    .nav-tree .level1 li {
        display: flex !important;
        flex-direction: column;
    }
}

