/* I do not know what this file does, but if it is deleted, the shop crashes. SO DON'T TOUCH THIS */

/*
#####
HELPER CLASSES
#####
*/


/* custom fancy font */

@font-face {
    font-family: 'Summer Festival';
    src: url('/templates/NIUplusChild/themes/base/fonts/SummerFestival-Regular.woff2') format('woff2'),
    url('/templates/NIUplusChild/themes/base/fonts/SummerFestival-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


.font-summer {
    font-family: 'Summer Festival' !important;
    font-weight: 200;

}


/*
#####
HEADER
#####
 */

.niu-input-group.niu-header-search {
    background-color:#fff !important;
}


/*
#####
PRODUCT PAGE
#####
 */

/*#image_wrapper {
    position: sticky;
    top:60px;
    margin-bottom:0;
    z-index:1050;
}*/

.niu-image-gallery-image:first-child {
    flex:0 0 100% !important;
    max-width: 99%;
}

.niu-image-gallery {
    gap:6px;
}

/*
.niu-image-gallery {
    .niu-image-gallery-image:first-child {
        max-width: 100%;
        flex:0 0 100% !important;
    }

    .niu-image-gallery-image img {
        mix-blend-mode: darken;
    }
}

*/

/*
#####
PRODUCT LISTING
#####
 */

body[data-page="2"] {
    #result-wrapper  h1, #result-wrapper .h1 {
        font-family: 'Summer Festival' !important;
        font-size: clamp(48px, 3vw, 6vw);
        font-weight:400 !important;
    }
}




/* Attribute */

.product-attributes {
    td.h6 {
        font-size:0.8rem;
        font-weight: 400;
    }

    td.attr-characteristic a.badge {
        font-size: 0.8rem;
        font-weight: 400;
    }
}


#maintenance-mode {
    display:none;
}

#main-wrapper, body, .niu-itembox-option--has-border::before {
    background:#fdfbfa !important;
    background-color:#fdfbfa;
}

.square-image .inner picture, #niu-product-splide {
    mix-blend-mode:darken;
}

.niu-itembox-option--is-card::before, .niu-card-style--flat {
    background-color:#fcf8f7 !important;
}

.dzm-niu-nav-bottom-bar {
    background-color:#f6e5e3;
}

header {
    border-bottom:none !important;
}

header .fa-sup {
    color:white;
}

.dzm-notice-clean {
    padding:4px 0;
}

.sub-categories .caption {
    text-align:center !important;
    font-size:16px;
    font-weight:400;
}

.niu-input-group {
    border:0 !important;

}

/*
#####
Cards
#####
 */

.dzm-csup-wrapper .card, .card-body, .card-header, .card {
    background-color:#FDFBFA;
}


/*
 Product engraver
*/

.engraver-input-active {
    display: grid;
    grid-template-columns:4fr 1fr;
    gap: 0.5rem;

    .engraver-font-controls{
        border-radius: 6px;
        display: flex;
    }

    input,
    textarea {
        border-color: var(--primary);
        border-style: solid;
        border-width: 3px;
        outline: 0;
    }
}

.engraver-font-controls{
    display: none;
    max-height: 50px;
    background-color: #eeccc7;
    color: #4d4d4d !important;
}

.engraver-swatch:hover {
    cursor:pointer;
}

.engraver-swatch {
    width: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dzm-engraver-swatch-group {
    display: grid;
    grid-template-columns:repeat(5, 1fr);
    column-gap: 1rem;
    row-gap: 0.5rem;
}

.swatch-input {
    display: none;
}

.swatch-label {
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    background-color: white;
}


.dzm_product_engraver_add_to_cart_button .btn-checkout:disabled {
    background: #e0e0e0 !important;
    color: #7575 !important;
}

/* Wenn ein Radiobutton `checked` ist, bekommt sein Label die active-Optik */
.swatch-input:checked + .swatch-label {
    border: 2px solid #404a48;
    background-color: #cdcdcd;
}

/* Fehlerhafte Auswahl */
.swatch-group:invalid .swatch-label {
    border-color: #dc3545;
}