/* =========================================================
   seELentAumel – Anpassungen für PrestaShop Classic 2.2.0
   Hintergrund: warmes Creme
   Hauptfarbe: Violett
   Akzentfarbe: Türkis
   Überschriften: Bubbler One
   ========================================================= */


/* ---------------------------------------------------------
   1. Schriftarten laden
   --------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Bubbler+One&family=Nunito:wght@300;400;500;600;700&display=swap');


/* ---------------------------------------------------------
   2. Grundfarben und Variablen
   --------------------------------------------------------- */

:root {
    --seelen-bg: #f8eee6;
    --seelen-surface: #fffdfc;
    --seelen-white: #ffffff;

    --seelen-purple: #8a5bb8;
    --seelen-purple-dark: #70439e;
    --seelen-purple-light: #eee3f6;

    --seelen-turquoise: #42b7c6;
    --seelen-turquoise-dark: #3194a1;
    --seelen-turquoise-light: #dff4f6;

    --seelen-pink: #e98cb8;
    --seelen-pink-light: #f8e3ed;

    --seelen-text: #4c3f54;
    --seelen-text-light: #75687d;
    --seelen-border: #eadbe8;

    --seelen-shadow: 0 8px 24px rgba(76, 63, 84, 0.10);
    --seelen-shadow-hover: 0 12px 30px rgba(76, 63, 84, 0.17);

    --seelen-radius-small: 10px;
    --seelen-radius: 18px;
    --seelen-radius-large: 28px;
}


/* ---------------------------------------------------------
   3. Gesamte Seite
   --------------------------------------------------------- */

html,
body {
    background-color: var(--seelen-bg);
    color: var(--seelen-text);
    font-family: "Nunito", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.65;
}

body {
    margin: 0;
}

#wrapper {
    background-color: var(--seelen-bg);
}

main {
    background-color: transparent;
}

p,
li,
label,
input,
select,
textarea,
button {
    font-family: "Nunito", Arial, sans-serif;
}


/* ---------------------------------------------------------
   4. Überschriften
   --------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.page-header h1,
.page-title,
.product-title,
.block-title {
    color: var(--seelen-text);
    font-family: "Bubbler One", sans-serif;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

h1,
.h1 {
    font-size: 2.5rem;
}

h2,
.h2 {
    font-size: 2rem;
}

h3,
.h3 {
    font-size: 1.55rem;
}

@media (max-width: 767px) {
    h1,
    .h1 {
        font-size: 2rem;
    }

    h2,
    .h2 {
        font-size: 1.7rem;
    }
}


/* ---------------------------------------------------------
   5. Links
   --------------------------------------------------------- */

a {
    color: var(--seelen-purple);
    transition:
        color 0.25s ease,
        opacity 0.25s ease;
}

a:hover,
a:focus {
    color: var(--seelen-turquoise-dark);
    text-decoration: none;
}


/* ---------------------------------------------------------
   6. Kopfbereich
   --------------------------------------------------------- */

#header {
    background-color: var(--seelen-surface);
    color: var(--seelen-text);
    box-shadow: 0 2px 12px rgba(76, 63, 84, 0.07);
}

#header .header-nav {
    background-color: var(--seelen-surface);
    border-bottom: 1px solid var(--seelen-border);
}

#header .header-top {
    background-color: var(--seelen-surface);
    padding-top: 18px;
    padding-bottom: 18px;
}

#header a {
    color: var(--seelen-text);
}

#header a:hover,
#header a:focus {
    color: var(--seelen-purple);
}

#header .logo {
    max-height: 82px;
    width: auto;
}


/* ---------------------------------------------------------
   7. Hauptmenü
   --------------------------------------------------------- */

.top-menu a,
.top-menu .sub-menu a,
#top-menu a {
    color: var(--seelen-text);
    font-family: "Nunito", Arial, sans-serif;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.top-menu a:hover,
.top-menu .sub-menu a:hover,
#top-menu a:hover {
    color: var(--seelen-purple);
}

.top-menu .sub-menu {
    background-color: var(--seelen-surface);
    border: 1px solid var(--seelen-border);
    border-radius: var(--seelen-radius);
    box-shadow: var(--seelen-shadow);
}


/* ---------------------------------------------------------
   8. Suche, Kundenkonto und Warenkorb
   --------------------------------------------------------- */

#search_widget input {
    background-color: var(--seelen-white);
    border: 1px solid var(--seelen-border);
    border-radius: 24px;
    color: var(--seelen-text);
    padding-left: 18px;
}

#search_widget input:focus {
    border-color: var(--seelen-purple);
    box-shadow: 0 0 0 3px rgba(138, 91, 184, 0.14);
    outline: none;
}

#search_widget button {
    color: var(--seelen-purple);
}

#_desktop_cart,
#_desktop_user_info {
    color: var(--seelen-text);
}

#_desktop_cart a,
#_desktop_user_info a {
    color: var(--seelen-text);
}

#_desktop_cart a:hover,
#_desktop_user_info a:hover {
    color: var(--seelen-purple);
}

.blockcart {
    background-color: transparent;
}

.blockcart.active {
    background-color: var(--seelen-purple-light);
    border-radius: var(--seelen-radius-small);
}


/* ---------------------------------------------------------
   9. Buttons
   --------------------------------------------------------- */

.btn {
    border-radius: 26px;
    font-family: "Nunito", Arial, sans-serif;
    font-weight: 600;
    letter-spacing: 0.015em;
    padding: 0.7rem 1.4rem;
    text-transform: none;
    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-primary,
.btn-primary:visited {
    background-color: var(--seelen-purple);
    border-color: var(--seelen-purple);
    color: var(--seelen-white);
    box-shadow: 0 5px 14px rgba(138, 91, 184, 0.22);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-color: var(--seelen-turquoise);
    border-color: var(--seelen-turquoise);
    color: var(--seelen-white);
    box-shadow: 0 7px 18px rgba(66, 183, 198, 0.26);
}

.btn-secondary,
.btn-tertiary {
    background-color: var(--seelen-surface);
    border: 1px solid var(--seelen-purple);
    color: var(--seelen-purple);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-tertiary:hover,
.btn-tertiary:focus {
    background-color: var(--seelen-purple-light);
    border-color: var(--seelen-purple);
    color: var(--seelen-purple-dark);
}


/* ---------------------------------------------------------
   10. Formulare
   --------------------------------------------------------- */

.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="search"],
select,
textarea {
    background-color: var(--seelen-white);
    border: 1px solid var(--seelen-border);
    border-radius: var(--seelen-radius-small);
    color: var(--seelen-text);
    min-height: 44px;
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--seelen-purple);
    box-shadow: 0 0 0 3px rgba(138, 91, 184, 0.13);
    outline: none;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--seelen-text-light);
    opacity: 0.8;
}

.input-group-addon {
    background-color: var(--seelen-purple-light);
    border-color: var(--seelen-border);
    color: var(--seelen-text);
}

.custom-checkbox input[type="checkbox"]:checked + span,
.custom-radio input[type="radio"]:checked + span {
    background-color: var(--seelen-purple);
    border-color: var(--seelen-purple);
}


/* ---------------------------------------------------------
   11. Produktkarten auf Startseite und Kategorieseiten
   --------------------------------------------------------- */

.product-miniature .thumbnail-container {
    background-color: var(--seelen-surface);
    border: 1px solid var(--seelen-border);
    border-radius: var(--seelen-radius);
    box-shadow: var(--seelen-shadow);
    overflow: hidden;
    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease,
        border-color 0.28s ease;
}

.product-miniature .thumbnail-container:hover {
    border-color: rgba(138, 91, 184, 0.35);
    box-shadow: var(--seelen-shadow-hover);
    transform: translateY(-5px);
}

.product-miniature .product-description {
    background-color: var(--seelen-surface);
    padding: 18px 16px;
}

.product-miniature .product-title,
.product-miniature .product-title a {
    color: var(--seelen-text);
    font-family: "Bubbler One", sans-serif;
    font-size: 1.35rem;
    font-weight: 400;
    line-height: 1.25;
}

.product-miniature .product-title a:hover {
    color: var(--seelen-purple);
}

.product-miniature .product-price-and-shipping {
    color: var(--seelen-purple);
    font-size: 1.1rem;
    font-weight: 700;
}

.product-miniature .regular-price {
    color: var(--seelen-text-light);
}

.product-miniature img {
    transition: transform 0.4s ease;
}

.product-miniature:hover img {
    transform: scale(1.025);
}


/* ---------------------------------------------------------
   12. Produktkennzeichnungen
   --------------------------------------------------------- */

.product-flags li.product-flag {
    background-color: var(--seelen-purple);
    border-radius: 0 18px 18px 0;
    color: var(--seelen-white);
    font-family: "Nunito", Arial, sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: none;
}

.product-flags li.product-flag.discount,
.product-flags li.product-flag.on-sale {
    background-color: var(--seelen-pink);
}


/* ---------------------------------------------------------
   13. Produktseite
   --------------------------------------------------------- */

.product-container,
.product-information,
.product-cover,
.product-description,
.tabs {
    color: var(--seelen-text);
}

.product-cover img {
    background-color: var(--seelen-white);
    border: 1px solid var(--seelen-border);
    border-radius: var(--seelen-radius);
    box-shadow: var(--seelen-shadow);
}

.product-information {
    background-color: var(--seelen-surface);
    border: 1px solid var(--seelen-border);
    border-radius: var(--seelen-radius);
    box-shadow: var(--seelen-shadow);
    padding: 24px;
}

.product-prices .current-price {
    color: var(--seelen-purple);
    font-size: 1.8rem;
    font-weight: 700;
}

.product-quantity .qty input {
    border-radius: var(--seelen-radius-small);
}

.product-add-to-cart .add-to-cart {
    min-height: 50px;
    padding-left: 26px;
    padding-right: 26px;
}

.tabs {
    background-color: var(--seelen-surface);
    border: 1px solid var(--seelen-border);
    border-radius: var(--seelen-radius);
    box-shadow: var(--seelen-shadow);
    padding: 22px;
}

.tabs .nav-tabs {
    border-bottom-color: var(--seelen-border);
}

.tabs .nav-tabs .nav-link {
    color: var(--seelen-text);
}

.tabs .nav-tabs .nav-link.active,
.tabs .nav-tabs .nav-link:hover {
    border-bottom-color: var(--seelen-purple);
    color: var(--seelen-purple);
}


/* ---------------------------------------------------------
   14. Kategorien und Seitenbereiche
   --------------------------------------------------------- */

.block-category {
    background-color: var(--seelen-surface);
    border: 1px solid var(--seelen-border);
    border-radius: var(--seelen-radius);
    box-shadow: var(--seelen-shadow);
}

.card,
.page-content,
.page-customer-account #content,
.page-addresses .address,
.page-authentication #content {
    background-color: var(--seelen-surface);
    border: 1px solid var(--seelen-border);
    border-radius: var(--seelen-radius);
    box-shadow: var(--seelen-shadow);
}

.card-header,
.card-footer {
    background-color: var(--seelen-purple-light);
    border-color: var(--seelen-border);
}


/* ---------------------------------------------------------
   15. Breadcrumb – Navigationspfad
   --------------------------------------------------------- */

.breadcrumb {
    background-color: transparent;
    color: var(--seelen-text-light);
    font-size: 0.9rem;
    padding-left: 0;
}

.breadcrumb a {
    color: var(--seelen-purple);
}

.breadcrumb a:hover {
    color: var(--seelen-turquoise-dark);
}


/* ---------------------------------------------------------
   16. Warenkorb
   --------------------------------------------------------- */

.cart-grid-body .card,
.cart-grid-right .card,
.cart-summary {
    background-color: var(--seelen-surface);
    border: 1px solid var(--seelen-border);
    border-radius: var(--seelen-radius);
    box-shadow: var(--seelen-shadow);
}

.cart-item {
    border-bottom: 1px solid var(--seelen-border);
}

.cart-summary-line .value {
    color: var(--seelen-text);
    font-weight: 600;
}

.cart-summary-line.cart-total {
    color: var(--seelen-purple);
}


/* ---------------------------------------------------------
   17. Checkout
   --------------------------------------------------------- */

body#checkout {
    background-color: var(--seelen-bg);
}

body#checkout section.checkout-step {
    background-color: var(--seelen-surface);
    border: 1px solid var(--seelen-border);
    border-radius: var(--seelen-radius);
    box-shadow: var(--seelen-shadow);
    margin-bottom: 18px;
    overflow: hidden;
}

body#checkout section.checkout-step .step-title {
    background-color: var(--seelen-purple-light);
    color: var(--seelen-text);
    font-family: "Bubbler One", sans-serif;
    font-size: 1.45rem;
    font-weight: 400;
    padding: 18px 22px;
}

body#checkout section.checkout-step.-current .step-title {
    background-color: var(--seelen-turquoise-light);
    color: var(--seelen-text);
}

body#checkout section.checkout-step.-reachable.-complete h1 .step-edit {
    color: var(--seelen-purple);
}


/* ---------------------------------------------------------
   18. Hinweise und Meldungen
   --------------------------------------------------------- */

.alert {
    border: none;
    border-radius: var(--seelen-radius-small);
}

.alert-info {
    background-color: var(--seelen-turquoise-light);
    color: var(--seelen-text);
}

.alert-success {
    background-color: #e3f4ea;
    color: #315f45;
}

.alert-warning {
    background-color: #fff3df;
    color: #72552f;
}

.alert-danger {
    background-color: #f9e2e6;
    color: #773b48;
}


/* ---------------------------------------------------------
   19. Footer
   --------------------------------------------------------- */

#footer {
    background-color: var(--seelen-text);
    color: var(--seelen-white);
    margin-top: 60px;
    padding-top: 45px;
}

#footer,
#footer p,
#footer li,
#footer span {
    color: rgba(255, 255, 255, 0.88);
}

#footer h3,
#footer h4,
#footer .h3,
#footer .h4,
#footer .block-contact-title,
#footer .blockcms-title {
    color: var(--seelen-white);
    font-family: "Bubbler One", sans-serif;
    font-size: 1.45rem;
    font-weight: 400;
}

#footer a {
    color: rgba(255, 255, 255, 0.86);
}

#footer a:hover {
    color: #bdebf0;
}

#footer .footer-container {
    background-color: var(--seelen-text);
    box-shadow: none;
}

#footer .block_newsletter input[type="email"] {
    background-color: var(--seelen-white);
    border: 1px solid transparent;
    border-radius: 24px 0 0 24px;
}

#footer .block_newsletter .btn {
    border-radius: 0 24px 24px 0;
}


/* ---------------------------------------------------------
   20. Tabellen
   --------------------------------------------------------- */

.table {
    background-color: var(--seelen-surface);
    color: var(--seelen-text);
}

.table td,
.table th {
    border-color: var(--seelen-border);
}

.table thead th {
    background-color: var(--seelen-purple-light);
    color: var(--seelen-text);
}


/* ---------------------------------------------------------
   21. Modale Fenster
   --------------------------------------------------------- */

.modal-content {
    background-color: var(--seelen-surface);
    border: 1px solid var(--seelen-border);
    border-radius: var(--seelen-radius);
    box-shadow: var(--seelen-shadow-hover);
}

.modal-header {
    border-bottom-color: var(--seelen-border);
}

.modal-footer {
    border-top-color: var(--seelen-border);
}


/* ---------------------------------------------------------
   22. Mobile Darstellung
   --------------------------------------------------------- */

@media (max-width: 767px) {

    #header .header-top {
        padding-top: 12px;
        padding-bottom: 12px;
    }

    #header .logo {
        max-height: 62px;
    }

    #mobile_top_menu_wrapper {
        background-color: var(--seelen-surface);
        border-top: 1px solid var(--seelen-border);
    }

    #mobile_top_menu_wrapper .top-menu a {
        color: var(--seelen-text);
    }

    .product-miniature .thumbnail-container {
        margin-bottom: 20px;
    }

    .product-information {
        margin-top: 20px;
        padding: 18px;
    }

    .btn {
        min-height: 44px;
    }

    #footer {
        margin-top: 40px;
        padding-top: 32px;
    }
}


/* ---------------------------------------------------------
   23. Kleine optische Verfeinerungen
   --------------------------------------------------------- */

::selection {
    background-color: var(--seelen-purple-light);
    color: var(--seelen-text);
}

hr {
    border-top-color: var(--seelen-border);
}

.pagination .page-list li a {
    color: var(--seelen-purple);
}

.pagination .current a {
    color: var(--seelen-turquoise-dark);
}

.dropdown-menu {
    background-color: var(--seelen-surface);
    border: 1px solid var(--seelen-border);
    border-radius: var(--seelen-radius-small);
    box-shadow: var(--seelen-shadow);
}

.dropdown-item {
    color: var(--seelen-text);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--seelen-purple-light);
    color: var(--seelen-purple-dark);
}
	/* =========================================================
   HEADER – seELentAumel
   ========================================================= */

#header .header-nav {
    min-height: 42px;
    background: #fffdfc;
    border-bottom: 1px solid #eadbe8;
}

#header .header-top {
    padding: 18px 0;
    background: #fffdfc;
}

#header .header-top .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#header .header-top .row {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0;
}

#header .header-top .col-md-2 {
    flex: 0 0 150px;
    max-width: 150px;
    padding-left: 0;
}

#header .header-top .col-md-10 {
    flex: 1 1 auto;
    max-width: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#header .logo {
    max-width: 110px;
    max-height: 110px;
    height: auto;
}

#header .top-menu {
    margin: 0;
}

#header .top-menu > li > a {
    color: #4c3f54;
    font-size: 16px;
    font-weight: 600;
    padding: 12px 18px;
}

#header .top-menu > li > a:hover {
    color: #8a5bb8;
}

#search_widget {
    max-width: 300px;
    margin-left: 30px;
}

#search_widget form {
    position: relative;
}

#search_widget input {
    width: 100%;
    min-height: 44px;
    padding: 10px 46px 10px 18px;
    background: #ffffff;
    border: 1px solid #eadbe8;
    border-radius: 24px;
    color: #4c3f54;
}

#search_widget button {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    color: #8a5bb8;
}

#_desktop_user_info,
#_desktop_cart {
    margin-left: 18px;
}

#_desktop_user_info a,
#_desktop_cart a {
    color: #4c3f54;
}

#_desktop_user_info a:hover,
#_desktop_cart a:hover {
    color: #8a5bb8;
}

.blockcart {
    background: transparent !important;
}

.blockcart.active {
    background: #eee3f6 !important;
    border-radius: 14px;
}

/* Mobile */

@media (max-width: 767px) {
    #header .header-top .container,
    #header .header-top .row {
        display: block;
    }

    #header .header-top .col-md-2,
    #header .header-top .col-md-10 {
        max-width: 100%;
        flex: none;
    }

    #header .logo {
        max-width: 84px;
    }

    #search_widget {
        max-width: 100%;
        margin: 16px 0 0;
    }
/* Footer – Überschrift "Ihr Konto" besser lesbar */
#footer .block-account .h3,
#footer .block-account .h3 a,
#footer .account-list .h3 {
    color: #f8eee6 !important;
}
	#footer #block_myaccount_infos .myaccount-title,
#footer #block_myaccount_infos .myaccount-title a {
    color: #f8eee6 !important;
}
	#block_myaccount_infos .myaccount-title a,
#header a,
#wrapper .breadcrumb li a,
.block-contact .block-contact-title,
.block-contact .navbar-toggler .material-icons,
.linklist .blockcms-title a {
    color: #232323;
}
	#footer #block_myaccount_infos .myaccount-title a,
#footer #block_myaccount_infos .myaccount-title,
#footer #block_myaccount_infos p.myaccount-title a {
    color: #ffffff !important;
}
	#block_myaccount_infos .myaccount-title a {
    color: #ffffff !important;
}