/*
 * Mosel-Trailer Corporate Design fuer JTL-Shop / NOVA blackline
 * Zielpfad im Shop: templates/NOVA/themes/blackline/custom.css
 * Besser updatefreundlich: in ein NOVAChild-Theme uebernehmen.
 */

:root {
    --mt-orange: #f5821f;
    --mt-orange-dark: #d96b0d;
    --mt-orange-soft: #fff2e5;
    --mt-black: #000000;
    --mt-ink: #171717;
    --mt-steel: #2a2d31;
    --mt-line: #e7e1dc;
    --mt-paper: #ffffff;
    --mt-muted: #6b6f76;
    --mt-radius: 6px;
    --mt-shadow: 0 14px 34px rgba(0, 0, 0, 0.12);
}

body.is-nova {
    color: var(--mt-ink);
    background: #f6f4f1;
}

a {
    color: var(--mt-ink);
}

a:hover,
a:focus {
    color: var(--mt-orange);
}

/* Header / Navigation */
#jtl-nav-wrapper.theme-blackline {
    background: var(--mt-black);
    border-bottom: 0;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

#header-top-bar {
    background: var(--mt-steel);
    color: var(--mt-paper);
}

#header-top-bar .nav-link,
#shop-nav .nav-link,
#mainNavigation .nav-link {
    color: var(--mt-paper);
}

#header-top-bar .nav-link:hover,
#shop-nav .nav-link:hover,
#mainNavigation .nav-link:hover,
#mainNavigation .nav-link:focus,
#mainNavigation .nav-item.show > .nav-link {
    color: var(--mt-orange);
}

#shop-logo {
    width: auto !important;
    height: 86px !important;
    max-width: 360px !important;
    max-height: 86px !important;
    object-fit: contain;
}

header .navbar-brand img#shop-logo,
#jtl-nav-wrapper .navbar-brand img#shop-logo {
    width: auto !important;
    height: 86px !important;
    max-width: 360px !important;
    max-height: 86px !important;
}

@media (min-width: 992px) {
    #jtl-nav-wrapper .navbar-brand {
        display: flex;
        align-items: center;
        min-height: 104px;
    }

    #jtl-nav-wrapper .nav-logo-wrapper {
        flex: 0 0 390px;
        max-width: 390px;
        display: flex;
        justify-content: center;
    }

    #jtl-nav-wrapper .navbar-collapse {
        min-height: 58px;
    }
}

.navbar-brand {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.burger-menu-wrapper,
.navbar-toggler {
    border-color: rgba(245, 130, 31, 0.62);
}

.navbar-toggler-icon,
.burger-menu-wrapper .navbar-toggler-icon {
    filter: invert(1);
}

#mainNavigation .dropdown-menu {
    border: 0;
    border-top: 4px solid var(--mt-orange);
    border-radius: 0 0 var(--mt-radius) var(--mt-radius);
    box-shadow: var(--mt-shadow);
}

#mainNavigation .dropdown-menu,
#mainNavigation .dropdown-menu *,
#mainNavigation .dropdown-menu a,
#mainNavigation .dropdown-menu .nav-link,
#mainNavigation .dropdown-menu .dropdown-item,
#mainNavigation .dropdown-menu .submenu-headline,
#mainNavigation .dropdown-menu .categories-recursive-link {
    color: var(--mt-ink) !important;
}

#mainNavigation .dropdown-menu a:hover,
#mainNavigation .dropdown-menu a:focus,
#mainNavigation .dropdown-menu .nav-link:hover,
#mainNavigation .dropdown-menu .nav-link:focus,
#mainNavigation .dropdown-menu .dropdown-item:hover,
#mainNavigation .dropdown-menu .dropdown-item:focus,
#mainNavigation .dropdown-menu .submenu-headline:hover,
#mainNavigation .dropdown-menu .categories-recursive-link:hover {
    color: var(--mt-orange) !important;
    background: transparent;
}

.submenu-headline,
.categories-recursive-link {
    color: var(--mt-ink);
}

.submenu-headline:hover,
.categories-recursive-link:hover {
    color: var(--mt-orange);
}

/* Suche */
#search .form-control,
.search-wrapper .form-control {
    min-height: 44px;
    border: 2px solid transparent;
    border-radius: var(--mt-radius) 0 0 var(--mt-radius);
    background: var(--mt-paper);
}

#search .form-control:focus,
.search-wrapper .form-control:focus {
    border-color: var(--mt-orange);
    box-shadow: 0 0 0 0.18rem rgba(245, 130, 31, 0.22);
}

.search-wrapper .btn,
#search .btn {
    min-height: 44px;
    border-radius: 0 var(--mt-radius) var(--mt-radius) 0;
}

/* Buttons */
.btn {
    border-radius: var(--mt-radius);
    font-weight: 700;
    letter-spacing: 0;
}

.btn-primary,
.btn-success,
.opc-Button .btn-success {
    color: var(--mt-black) !important;
    background: var(--mt-orange) !important;
    border-color: var(--mt-orange) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-success:hover,
.btn-success:focus,
.opc-Button .btn-success:hover,
.opc-Button .btn-success:focus {
    color: var(--mt-paper) !important;
    background: var(--mt-orange-dark) !important;
    border-color: var(--mt-orange-dark) !important;
    box-shadow: 0 0 0 0.18rem rgba(245, 130, 31, 0.28);
}

.btn-secondary {
    color: var(--mt-paper);
    background: var(--mt-steel);
    border-color: var(--mt-steel);
}

.btn-secondary:hover,
.btn-secondary:focus {
    color: var(--mt-black);
    background: var(--mt-orange);
    border-color: var(--mt-orange);
}

/* OPC / Startseite */
.opc-Divider.hr-sect::before,
.opc-Divider.hr-sect::after {
    border-color: var(--mt-orange);
}

.opc-Button .btn {
    text-transform: uppercase;
}

main h1,
main h2,
main h3,
.h1,
.h2,
.h3 {
    color: var(--mt-black);
    font-weight: 800;
    letter-spacing: 0;
}

main h1::after,
main h2::after,
.h1::after,
.h2::after {
    content: "";
    display: block;
    width: 82px;
    height: 4px;
    margin-top: 0.55rem;
    background: var(--mt-orange);
}

/* Produktlisten */
/* Einheitliche Kategorie- und Produktbilder */
.sub-categories,
.sub-categories > a,
.subcategories-image {
    width: 100% !important;
}

.sub-categories {
    text-align: center !important;
}

.subcategories-image {
    width: 280px !important;
    height: 190px !important;
    max-width: 100% !important;
    margin: 0 auto 12px auto !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    border: 1px solid var(--mt-line) !important;
    border-radius: var(--mt-radius);
    background: #f7f7f7 !important;
}

.subcategories-image picture {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

.sub-categories img,
.subcategories-image img,
.subcategories img,
.category-wrapper img,
.category img,
.categories img,
.category-list img,
.opc-CategoryList img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    margin: 0 auto !important;
    background: #f7f7f7 !important;
}

.sub-categories .caption,
.sub-categories .caption a,
.subcategories a,
.category-wrapper a,
.category a,
.categories a,
.category-list a,
.opc-CategoryList a {
    text-align: center !important;
}

.sub-categories .caption {
    min-height: 2.4em;
    line-height: 1.35;
}

.sub-categories .caption a {
    display: inline-block;
    font-weight: 600;
}

.sub-categories,
.subcategories,
.categories,
.category-list,
.opc-CategoryList {
    gap: 22px !important;
}

@media (max-width: 767.98px) {
    .subcategories-image {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 4 / 3;
    }
}

.productbox.thumbnail,
.productbox.productbox-column {
    overflow: hidden;
    border: 1px solid var(--mt-line);
    border-radius: var(--mt-radius);
    background: var(--mt-paper);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.productbox.thumbnail:hover,
.productbox.productbox-column:hover {
    transform: translateY(-3px);
    border-color: rgba(245, 130, 31, 0.55);
    box-shadow: var(--mt-shadow);
}

.productbox-inner {
    padding: 0.85rem;
}

.productbox-image,
.productbox-images,
.productbox .list-gallery {
    width: 100%;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #f7f7f7;
    border-radius: var(--mt-radius);
}

.productbox .productbox-images img,
.productbox .productbox-image img,
.productbox .list-gallery img,
.productbox .list-gallery img.first {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
    opacity: 1;
    visibility: visible;
}

.productbox .list-gallery .first-wrapper {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

.productbox .list-gallery .second-wrapper {
    z-index: 1;
}

.product-detail img,
.product-info img,
.product-gallery img,
.product-image img,
#image_wrapper img,
#gallery img {
    max-width: 100%;
    object-fit: contain;
}

.productbox-title a,
.productbox-title {
    color: var(--mt-ink);
    font-weight: 700;
}

.productbox-title a:hover {
    color: var(--mt-orange);
}

.price,
.productbox-price {
    color: var(--mt-orange);
    font-weight: 800;
}

.price-note,
.delivery-status,
.shipping-costs {
    color: var(--mt-muted);
}

.badge,
.productbox .badge {
    border-radius: 999px;
}

.badge-primary,
.fa-sup {
    color: var(--mt-black);
    background: var(--mt-orange);
}

.productbox-quick-actions .btn {
    color: var(--mt-paper);
    background: rgba(0, 0, 0, 0.78);
    border-color: rgba(0, 0, 0, 0.78);
}

.productbox-quick-actions .btn:hover {
    color: var(--mt-black);
    background: var(--mt-orange);
    border-color: var(--mt-orange);
}

/* Forms / Checkout */
.form-control,
.custom-select {
    border-radius: var(--mt-radius);
    border-color: #d9d2cb;
}

.form-control:focus,
.custom-select:focus {
    border-color: var(--mt-orange);
    box-shadow: 0 0 0 0.18rem rgba(245, 130, 31, 0.2);
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--mt-orange);
    border-color: var(--mt-orange);
}

/* Warenkorb / Account Dropdowns */
.dropdown-menu,
.cart-dropdown,
.account-icon-dropdown .dropdown-menu {
    border-radius: var(--mt-radius);
    border-color: var(--mt-line);
    box-shadow: var(--mt-shadow);
}

.cart-icon-dropdown-price {
    color: var(--mt-paper);
    font-weight: 800;
}

/* Trust- und Info-Bereiche */
.alert-info,
.alert-primary {
    color: var(--mt-ink);
    background: var(--mt-orange-soft);
    border-color: rgba(245, 130, 31, 0.38);
}

.breadcrumb {
    background: transparent;
}

.breadcrumb a {
    color: var(--mt-muted);
}

.breadcrumb a:hover {
    color: var(--mt-orange);
}

/* Footer */
footer,
#footer {
    color: var(--mt-paper) !important;
    background: var(--mt-black) !important;
    border-top: 0;
}

footer *,
#footer * {
    color: inherit;
}

footer a,
#footer a,
#footer .nav-link,
#footer .box-normal-link,
#footer .card-title,
#footer .card a,
#footer .box a {
    color: rgba(255, 255, 255, 0.84) !important;
}

footer a:hover,
#footer a:hover,
#footer .nav-link:hover,
#footer .card a:hover,
#footer .box a:hover {
    color: var(--mt-orange) !important;
}

footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
footer h6,
#footer h1,
#footer h2,
#footer h3,
#footer h4,
#footer h5,
#footer h6,
#footer .card-title {
    color: var(--mt-paper) !important;
    font-weight: 800;
}

#footer .box-normal-link {
    display: none !important;
}

#footer .card-title,
#footer .box .h4,
#footer .box h4,
footer .card-title,
footer h4 {
    display: inline-block;
    margin-bottom: 0.85rem;
    padding-bottom: 0.45rem;
    color: var(--mt-paper) !important;
    border-bottom: 3px solid var(--mt-orange);
    font-size: 1rem;
    line-height: 1.25;
    text-transform: uppercase;
}

#footer .box-normal .card-title,
#footer .box-normal h4,
#footer .box-normal .h4 {
    color: var(--mt-paper) !important;
    font-weight: 800 !important;
}

#footer .box-normal > .card-body > .card-title,
#footer .box-normal > .card-body > h4,
#footer .box-normal > .card-body > .h4,
#footer .card-body > .card-title,
#footer .card-body > h4,
#footer .card-body > .h4,
#footer .box-normal .card-title a,
#footer .box-normal h4 a,
#footer .box-normal .h4 a,
#footer .box-normal .card-title span,
#footer .box-normal h4 span,
#footer .box-normal .h4 span {
    color: #ffffff !important;
    font-weight: 800 !important;
    opacity: 1 !important;
}

#footer hr,
footer hr,
#footer .box-normal-hr {
    border-color: rgba(245, 130, 31, 0.45) !important;
}

#copyright,
footer #copyright {
    color: rgba(255, 255, 255, 0.86) !important;
    background: #111111 !important;
}

#copyright a,
footer #copyright a {
    color: var(--mt-paper) !important;
}

/* Markenmotiv aus dem Logo: langer Streifen links, drei kurze rechts */
#jtl-nav-wrapper::after,
footer::before,
#footer::before {
    content: "";
    display: block;
    align-self: stretch !important;
    width: 100% !important;
    min-width: 100% !important;
    margin: 0 !important;
    height: 10px !important;
    background-color: var(--mt-black);
    background:
        linear-gradient(
            62deg,
            var(--mt-orange) 0%,
            var(--mt-orange) 75%,
            var(--mt-black) 75.1%,
            var(--mt-black) 77.2%,
            var(--mt-orange) 77.3%,
            var(--mt-orange) 83.1%,
            var(--mt-black) 83.2%,
            var(--mt-black) 85.1%,
            var(--mt-orange) 85.2%,
            var(--mt-orange) 91%,
            var(--mt-black) 91.1%,
            var(--mt-black) 93%,
            var(--mt-orange) 93.1%,
            var(--mt-orange) 98.5%,
            var(--mt-black) 98.6%,
            var(--mt-black) 100%
        );
    background-color: var(--mt-black);
}

#jtl-nav-wrapper::after {
    height: 6px;
}

/* Consent Manager */
.consent-manager,
.consent-modal,
.modal-content {
    border-radius: var(--mt-radius);
}

.consent-manager .btn-primary,
.consent-modal .btn-primary {
    background: var(--mt-orange) !important;
    border-color: var(--mt-orange) !important;
}

/* Mobile Feinschliff */
@media (max-width: 991.98px) {
    #jtl-nav-wrapper.theme-blackline {
        border-bottom-width: 0;
    }

    #shop-logo {
        width: auto !important;
        height: 58px !important;
        max-width: 230px !important;
        max-height: 58px !important;
    }

    #mainNavigation {
        background: var(--mt-black);
    }

    #mainNavigation .dropdown-menu {
        border-top: 1px solid rgba(245, 130, 31, 0.42);
        box-shadow: none;
    }

    .nav-mobile-header,
    .nav-mobile-body {
        background: var(--mt-black);
        color: var(--mt-paper);
    }
}

@media (max-width: 575.98px) {
    .productbox-inner {
        padding: 0.7rem;
    }

    main h1::after,
    main h2::after,
    .h1::after,
    .h2::after {
        width: 62px;
    }
}