/* ==========================================================
   Jublue & Jugreen
   Initial Premium Visual Layer
   ========================================================== */

:root {
    --jj-dark: #101820;
    --jj-dark-2: #111A1E;
    --jj-dark-surface: #1A2429;

    --jj-light: #F6F5F1;
    --jj-light-2: #F4F2ED;
    --jj-white: #FFFFFF;

    --jj-champagne: #C5AD82;
    --jj-maritime: #596C61;

    --jj-text: #1A1E21;
    --jj-text-muted: #62686A;

    --jj-border: #E4E0D8;
}

/* ----------------------------------------------------------
   GLOBAL
   ---------------------------------------------------------- */

html,
body {
    background: var(--jj-light);
    color: var(--jj-text);
}

body {
    font-family: "Inter", Arial, sans-serif;
    letter-spacing: .005em;
}

/* ----------------------------------------------------------
   HEADER
   ---------------------------------------------------------- */

header,
#header-top-bar,
#mainNavigation,
.navbar {
    background-color: var(--jj-dark) !important;
}

header,
header a,
header .nav-link,
#mainNavigation a,
.navbar a {
    color: #F2F1ED !important;
}

header a:hover,
#mainNavigation a:hover,
.navbar a:hover {
    color: var(--jj-champagne) !important;
}

/* ----------------------------------------------------------
   MAIN SHOP AREA
   ---------------------------------------------------------- */

main,
#content,
#wrapper,
.container-fluid {
    background-color: var(--jj-light);
}

/* ----------------------------------------------------------
   HEADLINES
   ---------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--jj-dark);
    font-weight: 500;
    letter-spacing: -.015em;
}

/* ----------------------------------------------------------
   LINKS
   ---------------------------------------------------------- */

a {
    color: var(--jj-dark);
    transition: color .2s ease;
}

a:hover {
    color: var(--jj-maritime);
}

/* ----------------------------------------------------------
   BUTTONS
   ---------------------------------------------------------- */

.btn-primary,
.btn.btn-primary {
    background: var(--jj-dark);
    border-color: var(--jj-dark);
    color: var(--jj-light);
    border-radius: 3px;
    box-shadow: none;
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--jj-champagne);
    border-color: var(--jj-champagne);
    color: var(--jj-dark);
}

.btn-outline-primary {
    color: var(--jj-dark);
    border-color: var(--jj-dark);
    border-radius: 3px;
}

.btn-outline-primary:hover {
    background: var(--jj-dark);
    border-color: var(--jj-dark);
    color: var(--jj-light);
}

/* ----------------------------------------------------------
   PRODUCT CARDS
   ---------------------------------------------------------- */

.productbox-inner,
.productbox,
.card {
    background: var(--jj-white);
    border-color: var(--jj-border);
    border-radius: 6px;
    box-shadow: none;
    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.productbox:hover .productbox-inner,
.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(16,24,32,.08);
}

/* ----------------------------------------------------------
   FORM ELEMENTS
   ---------------------------------------------------------- */

.form-control,
.custom-select,
select,
input,
textarea {
    border-color: var(--jj-border);
    border-radius: 3px;
    background: var(--jj-white);
}

.form-control:focus,
.custom-select:focus,
input:focus,
textarea:focus {
    border-color: var(--jj-maritime);
    box-shadow: 0 0 0 .1rem rgba(89,108,97,.12);
}

/* ----------------------------------------------------------
   FOOTER
   ---------------------------------------------------------- */

footer,
#footer {
    background: var(--jj-dark) !important;
    color: #F2F1ED;
}

footer a,
#footer a {
    color: #B9C0C2;
}

footer a:hover,
#footer a:hover {
    color: var(--jj-champagne);
}

/* ----------------------------------------------------------
   BREADCRUMB
   ---------------------------------------------------------- */

.breadcrumb {
    background: transparent;
    border-radius: 0;
}

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

/* ----------------------------------------------------------
   PRICE
   ---------------------------------------------------------- */

.price_wrapper,
.price,
.productbox-price {
    color: var(--jj-dark);
}

/* ----------------------------------------------------------
   SELECTION
   ---------------------------------------------------------- */

::selection {
    background: var(--jj-champagne);
    color: var(--jj-dark);
}

/* ==========================================================
   JUBLUE & JUGREEN HEADER FIX
   ========================================================== */

html body #header-top-bar,
html body header#jtl-nav-wrapper,
html body #jtl-nav-wrapper {
    background-color: #101820 !important;
    color: #F2F1ED !important;
}

html body #header-top-bar .nav-link,
html body #header-top-bar a,
html body #jtl-nav-wrapper .nav-link,
html body #jtl-nav-wrapper a:not(.dropdown-item):not(.btn) {
    color: #F2F1ED !important;
}

html body #header-top-bar .nav-link:hover,
html body #header-top-bar a:hover,
html body #jtl-nav-wrapper .nav-link:hover,
html body #jtl-nav-wrapper a:not(.dropdown-item):not(.btn):hover {
    color: #C5AD82 !important;
}

html body #header-top-bar .nav-dividers .nav-item:not(:last-child)::after {
    border-color: rgba(255,255,255,.20) !important;
}

/* ==========================================================
   JUBLUE & JUGREEN HEADER
   ========================================================== */

#header-top-bar,
#header-top-bar.topbar-wrapper,
#jtl-nav-wrapper,
#jtl-nav-wrapper > .container,
#jtl-nav-wrapper > .container-fluid {
    background-color: #101820 !important;
    color: #F2F1ED !important;
}

#header-top-bar .container,
#header-top-bar .container-fluid {
    background: transparent !important;
}

#header-top-bar .nav-link,
#header-top-bar .nav-link-custom,
#header-top-bar a {
    color: #B9C0C2 !important;
}

#header-top-bar .nav-link:hover,
#header-top-bar .nav-link-custom:hover,
#header-top-bar a:hover {
    color: #C5AD82 !important;
}

#header-top-bar .dropdown-menu {
    background: #F6F5F1 !important;
    color: #1A1E21 !important;
}

#header-top-bar .dropdown-menu a {
    color: #1A1E21 !important;
}

#header-top-bar .dropdown-menu a:hover {
    color: #596C61 !important;
}

#header-top-bar .nav-dividers .nav-item:not(:last-child)::after {
    border-color: rgba(255,255,255,.16) !important;
}

#jtl-nav-wrapper {
    border-bottom: 1px solid rgba(255,255,255,.10);
    box-shadow: none !important;
}

#jtl-nav-wrapper .navbar {
    background: transparent !important;
}

/* ==========================================================
   JUBLUE & JUGREEN
   PREMIUM HEADER V1
   ========================================================== */

#header-top-bar {
    min-height: 34px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

#header-top-bar .nav-link {
    font-size: .75rem;
    font-weight: 400;
    letter-spacing: .035em;
    padding-top: .45rem;
    padding-bottom: .45rem;
}

#jtl-nav-wrapper {
    background: #101820 !important;
}

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

#jtl-nav-wrapper .navbar-brand {
    padding-top: .7rem;
    padding-bottom: .7rem;
    margin-right: 3rem;
}

#jtl-nav-wrapper #shop-logo {
    width: auto;
    height: 44px;
    max-width: 210px;
    object-fit: contain;
}

#mainNavigation .navbar-nav > .nav-item > .nav-link {
    position: relative;
    padding: 1.75rem 1.15rem;
    font-size: .82rem;
    font-weight: 500;
    letter-spacing: .065em;
    text-transform: uppercase;
}

#mainNavigation .navbar-nav > .nav-item > .nav-link::before {
    height: 1px;
    border: 0 !important;
    background: #C5AD82;
    bottom: 15px;
}

#mainNavigation .navbar-nav > .nav-item.active > .nav-link::before,
#mainNavigation .navbar-nav > .nav-item:hover > .nav-link::before,
#mainNavigation .navbar-nav > .nav-item.hover > .nav-link::before {
    width: calc(100% - 2.3rem);
}

#jtl-nav-wrapper .nav-right .nav-link {
    color: #F2F1ED !important;
    padding-left: .7rem;
    padding-right: .7rem;
}

#jtl-nav-wrapper .nav-right .nav-link:hover {
    color: #C5AD82 !important;
}

#jtl-nav-wrapper .dropdown-menu {
    border: 1px solid #E4E0D8;
    border-radius: 0;
    box-shadow: 0 18px 44px rgba(16,24,32,.14);
}

#jtl-nav-wrapper .dropdown-menu,
#jtl-nav-wrapper .dropdown-menu a {
    color: #1A1E21 !important;
}

#jtl-nav-wrapper .dropdown-menu a:hover {
    color: #596C61 !important;
}

/* Suche */
#jtl-nav-wrapper .main-search .form-control,
#jtl-nav-wrapper .main-search .form-control:focus {
    background: rgba(255,255,255,.07) !important;
    border-color: rgba(255,255,255,.16) !important;
    color: #F2F1ED !important;
    box-shadow: none !important;
}

#jtl-nav-wrapper .main-search .form-control::placeholder {
    color: #B9C0C2 !important;
}

/* Mobile */
@media (max-width: 991.98px) {
    #jtl-nav-wrapper .navbar {
        min-height: 64px;
    }

    #jtl-nav-wrapper #shop-logo {
        height: 34px;
        max-width: 155px;
    }

    #jtl-nav-wrapper .navbar-collapse {
        background: #F6F5F1 !important;
    }

    #jtl-nav-wrapper .navbar-collapse .nav-link {
        color: #1A1E21 !important;
    }

    #jtl-nav-wrapper .navbar-collapse .nav-link:hover {
        color: #596C61 !important;
    }
}

/* ==========================================================
   JUBLUE & JUGREEN
   HOMEPAGE HERO
   ========================================================== */

.jj-hero {
    position: relative;
    min-height: calc(100vh - 110px);
    overflow: hidden;
    background: #101820;
    color: #F6F5F1;
    isolation: isolate;
}

.jj-hero__media {
    position: absolute;
    inset: 0;
    z-index: -3;

    /*
     * Temporärer Hintergrund.
     * Später durch echtes Jublue-&-Jugreen-Uhrenmotiv ersetzen.
     */
    background:
        radial-gradient(
            circle at 72% 48%,
            rgba(197,173,130,.12) 0,
            rgba(16,24,32,0) 32%
        ),
        linear-gradient(
            120deg,
            #101820 0%,
            #111A1E 55%,
            #1A2429 100%
        );
}

.jj-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(
            90deg,
            rgba(8,14,18,.88) 0%,
            rgba(8,14,18,.62) 46%,
            rgba(8,14,18,.18) 75%,
            rgba(8,14,18,.08) 100%
        );
}

.jj-hero__inner {
    width: 100%;
    max-width: 1650px;
    min-height: calc(100vh - 110px);
    margin: 0 auto;
    padding: 8vh clamp(24px, 5vw, 90px);
    display: flex;
    align-items: center;
}

.jj-hero__content {
    width: min(720px, 60vw);
}

.jj-hero__brand {
    margin-bottom: 1.6rem;

    color: #C5AD82;

    font-size: .72rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .24em;
    text-transform: uppercase;
}

.jj-hero__title {
    margin: 0 0 2rem;

    color: #F6F5F1 !important;

    font-size: clamp(3.8rem, 7.2vw, 7.8rem);
    font-weight: 400;
    line-height: .92;
    letter-spacing: -.045em;
}

.jj-hero__text {
    max-width: 520px;
    margin: 0 0 2.6rem;

    color: #D4D5D2;

    font-size: clamp(1rem, 1.35vw, 1.25rem);
    line-height: 1.65;
    letter-spacing: .01em;
}

.jj-hero__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 52px;
    padding: 0 30px;

    border: 1px solid #F6F5F1;

    background: #F6F5F1;
    color: #101820 !important;

    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .11em;
    text-decoration: none !important;
    text-transform: uppercase;

    transition:
        background-color .25s ease,
        border-color .25s ease,
        color .25s ease,
        transform .25s ease;
}

.jj-hero__button:hover {
    border-color: #C5AD82;
    background: #C5AD82;
    color: #101820 !important;
    transform: translateY(-1px);
}

/* Scroll indicator */

.jj-hero__scroll {
    position: absolute;
    left: 50%;
    bottom: 28px;

    width: 30px;
    height: 52px;

    transform: translateX(-50%);

    border: 1px solid rgba(255,255,255,.35);
    border-radius: 20px;
}

.jj-hero__scroll span {
    position: absolute;
    top: 11px;
    left: 50%;

    width: 3px;
    height: 7px;

    transform: translateX(-50%);

    border-radius: 2px;
    background: #C5AD82;

    animation: jj-scroll-indicator 1.9s ease-in-out infinite;
}

@keyframes jj-scroll-indicator {
    0% {
        opacity: 0;
        transform: translate(-50%, 0);
    }

    25% {
        opacity: 1;
    }

    70% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translate(-50%, 15px);
    }
}


/* ==========================================================
   INTRO / LIGHT TRANSITION
   ========================================================== */

.jj-collections-intro {
    background: #F6F5F1;
    color: #1A1E21;
    padding: clamp(80px, 10vw, 150px) 0;
}

.jj-section-container {
    width: calc(100% - 48px);
    max-width: 1380px;
    margin: 0 auto;
}

.jj-section-eyebrow {
    margin-bottom: 1.4rem;

    color: #596C61;

    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .20em;
    text-transform: uppercase;
}

.jj-section-title {
    max-width: 930px;
    margin: 0 0 2rem;

    color: #101820 !important;

    font-size: clamp(2.4rem, 4.5vw, 5rem);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -.035em;
}

.jj-section-copy {
    max-width: 670px;
    margin: 0;

    color: #62686A;

    font-size: clamp(1rem, 1.35vw, 1.2rem);
    line-height: 1.75;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 991.98px) {

    .jj-hero {
        min-height: calc(100svh - 64px);
    }

    .jj-hero__inner {
        min-height: calc(100svh - 64px);
        padding: 70px 24px 95px;
        align-items: flex-end;
    }

    .jj-hero__content {
        width: 100%;
    }

    .jj-hero__title {
        font-size: clamp(3rem, 14vw, 5.6rem);
    }

    .jj-hero__overlay {
        background:
            linear-gradient(
                0deg,
                rgba(8,14,18,.95) 0%,
                rgba(8,14,18,.66) 58%,
                rgba(8,14,18,.32) 100%
            );
    }

    .jj-hero__scroll {
        display: none;
    }

    .jj-collections-intro {
        padding: 78px 0;
    }
}

/* ==========================================================
   JUBLUE & JUGREEN
   PRODUCT GRID / PRODUCT CARDS
   ========================================================== */

.productbox,
.productbox-inner {
    background: #FFFFFF;
    border: 1px solid #E4E0D8 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
}

.productbox {
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.productbox:hover {
    transform: translateY(-4px);
    border-color: #D7D1C7 !important;
    box-shadow: 0 18px 42px rgba(16,24,32,.08) !important;
}

/* Produktbild */

.productbox .productbox-image,
.productbox .image-wrapper,
.productbox .square {
    background: #F6F5F1;
}

.productbox img {
    transition: transform .45s ease;
}

.productbox:hover img {
    transform: scale(1.025);
}

/* Produktbezeichnung */

.productbox .productbox-title,
.productbox .productbox-title a,
.productbox .product-title,
.productbox .product-title a {
    color: #101820 !important;
    font-size: .95rem;
    font-weight: 500;
    line-height: 1.45;
    text-decoration: none !important;
}

/* Preise */

.productbox .price_wrapper,
.productbox .price,
.productbox .productbox-price {
    color: #101820 !important;
    font-size: 1rem;
    font-weight: 600;
}

/* Alter Preis */

.productbox .price-note,
.productbox .base-price,
.productbox .text-muted {
    color: #7A7F80 !important;
}

/* Badges / Labels */

.productbox .badge,
.productbox .ribbon {
    border-radius: 0 !important;
    font-size: .67rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Wunschliste / Icons */

.productbox .btn-link,
.productbox .product-actions .btn {
    color: #101820 !important;
}

.productbox .btn-link:hover,
.productbox .product-actions .btn:hover {
    color: #C5AD82 !important;
}


/* ==========================================================
   STARTSEITEN-SEKTIONSÜBERSCHRIFTEN
   ========================================================== */

.hr-sect {
    position: relative;

    margin: clamp(70px, 8vw, 120px) 0 45px;

    color: #101820;

    font-size: clamp(1.9rem, 3vw, 3rem);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -.025em;
}

.hr-sect::before,
.hr-sect::after {
    height: 1px;
    background: #DED9D0 !important;
}

.hr-sect a {
    color: #101820 !important;
    border: 0 !important;
    font-weight: 400 !important;
    text-decoration: none !important;
}

.hr-sect a:hover {
    color: #596C61 !important;
}


/* ==========================================================
   GLOBAL SHOP CONTENT
   ========================================================== */

#main-wrapper {
    background: #F6F5F1 !important;
}

#content-wrapper {
    background: #F6F5F1;
}

#content {
    color: #1A1E21;
}

/* etwas großzügiger auf Desktop */

@media (min-width: 1300px) {
    #content-wrapper .container {
        max-width: 1380px;
    }
}


/* ==========================================================
   BUTTON SYSTEM
   ========================================================== */

.btn {
    min-height: 46px;

    border-radius: 2px !important;

    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .06em;

    transition:
        background-color .2s ease,
        border-color .2s ease,
        color .2s ease;
}

.btn-primary {
    background: #101820 !important;
    border-color: #101820 !important;
    color: #F6F5F1 !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: #C5AD82 !important;
    border-color: #C5AD82 !important;
    color: #101820 !important;
}

.btn-outline-primary {
    background: transparent !important;
    border-color: #101820 !important;
    color: #101820 !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background: #101820 !important;
    border-color: #101820 !important;
    color: #F6F5F1 !important;
}


/* ==========================================================
   FORM ELEMENTS
   ========================================================== */

.form-control,
.custom-select,
select {
    min-height: 46px;

    background: #FFFFFF !important;
    border: 1px solid #D6D1C8 !important;
    border-radius: 2px !important;

    color: #1A1E21 !important;

    box-shadow: none !important;
}

.form-control:focus,
.custom-select:focus,
select:focus {
    border-color: #596C61 !important;
    box-shadow: 0 0 0 2px rgba(89,108,97,.10) !important;
}


/* ==========================================================
   BREADCRUMB
   ========================================================== */

.breadcrumb-wrapper {
    border-color: #E4E0D8 !important;
}

.breadcrumb {
    color: #62686A;
}

.breadcrumb a {
    color: #62686A !important;
}

.breadcrumb a:hover {
    color: #596C61 !important;
}

.breadcrumb-item.active {
    color: #101820 !important;
}


/* ==========================================================
   FOOTER PREMIUM
   ========================================================== */

#footer {
    margin-top: 0 !important;
    padding-top: clamp(70px, 8vw, 110px) !important;

    background: #101820 !important;
    color: #B9C0C2 !important;
}

#footer h1,
#footer h2,
#footer h3,
#footer h4,
#footer h5,
#footer h6,
#footer .card-title,
#footer .box-normal-link {
    color: #F6F5F1 !important;
}

#footer .card,
#footer .card-body {
    background: transparent !important;
}

#footer a {
    color: #B9C0C2 !important;
    text-decoration: none !important;
}

#footer a:hover {
    color: #C5AD82 !important;
}

#footer hr {
    border-color: rgba(255,255,255,.10) !important;
}

#footer .form-control {
    background: rgba(255,255,255,.06) !important;
    border-color: rgba(255,255,255,.18) !important;
    color: #F6F5F1 !important;
}

#footer .form-control::placeholder {
    color: #8F989B !important;
}

#copyright {
    margin-top: 60px !important;

    background: #0B1114 !important;
    color: #8F989B !important;

    border-top: 1px solid rgba(255,255,255,.08);
}

#copyright a {
    color: #B9C0C2 !important;
}

#copyright a:hover {
    color: #C5AD82 !important;
}


/* ==========================================================
   REMOVE NOVA YELLOW
   ========================================================== */

a:hover {
    color: #596C61;
}

.pagination .page-item.active .page-link::after,
.pagination .page-item.active .page-text::after,
aside .nav-panel > .nav > .active > .nav-link {
    border-color: #C5AD82 !important;
}

.slick-dots li.slick-active button {
    background-color: #596C61 !important;
    border-color: #596C61 !important;
}


/* ==========================================================
   MOBILE PRODUCT GRID
   ========================================================== */

@media (max-width: 767.98px) {

    .productbox {
        margin-bottom: 18px;
    }

    .hr-sect {
        margin-top: 55px;
        margin-bottom: 30px;

        font-size: 1.8rem;
    }

    .hr-sect::before,
    .hr-sect::after {
        display: none;
    }

    #footer {
        padding-top: 60px !important;
    }
}

/* Hero image */
.jj-hero__media {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

@media (max-width: 991.98px) {
    .jj-hero__media {
        background-position: 68% center;
    }
}