/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 51
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

    
/*Globales Styling*/

html { scroll-behavior: smooth; }

body {background-color: var(--gn-bg-main);}


/*Eigene Variablen definieren*/
:root {
    --gn-text-color: #000;
    --gn-text-hover-color: #bbb;
    --gn-link-color: #999;
    --gn-border-color: #eaeaea;
    --gn-bg-main: #fdfdfd;
    --gn-bg-grey: #f8f8f8;
    --gn-bg-secondary: #f9f5f1;
    --gn-green: #4ab866;
    --gn-blue: #0058ff;

    --gn-text-font-size-small: 13px;

    --gn-max-container-width: 1600px;
}

.is-small, 
.is-small.button {
    font-size: 1em;
}

/* Deaktivieren der Flatsome Text-Transformation */
.uppercase,
.is-uppercase,
h6,
th,
td,
span.widget-title {
    text-transform: none;
    letter-spacing: 0;
    line-height: 1em;
}

label,
.label,
.shop_table,
td,
th,
.ux-swatch-selected-value,
.product p.wc-gzd-additional-info {
    font-size: 1em;
}


/*Farben*/

/* Achtung: Background-colors der Seite (#wrapper, #main, .header-main) werden über Flatsome -> Advanced -> Custom CSS gesetzt */

.is--hellbeige {
    background-color: #edebe7;
}

.is--text-center,
.medium-text-center {
    text-align: center;
}

.is--text-underline {
    text-decoration: underline;
}

.nobr {
    white-space: nowrap;
}

.dark,
.dark a {
    color: #fff;
}

.dark a:hover {
    color: var(--gn-text-hover-color);
}

/*Überschriften*/
.title2,
.accordion_title {
    font-size: 28px;
    line-height: 34px;
    font-weight: 700;
    margin: 2.25rem 0rem 2rem 0rem;
}

.title3 {
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
    margin: 1.25rem 0rem .625rem 0rem;
}

/*Buttons global definieren*/
.button,
.button.alt, 
.button.checkout, 
.checkout-button, 
.secondary { 
    background-color: #000;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 2.5em;
    touch-action: manipulation;

    &:hover {
        background-color: #fff;
        box-shadow: none;
        color: #000;
        border-color: #000;
    }
}

.form-flat input:not([type=submit]), 
.form-flat select,
.form-flat textarea,
.form-flat button,
.form-flat input {
    border-radius: 0;
}

/* Call to action Button */
.cta-button {
    width: 280px;
    padding: 0 2rem;
    line-height: 72px;
    border: 1px solid #000;
    display: flex;
    background-color: #000;
    color: #fff;
    font-size: 16px;
    text-align: center;
    align-items: center;
    justify-content: space-around;
    touch-action: manipulation;

    #arrow-small-right {
        fill: #fff;
    }

    &:hover {
        background-color: #fff;
        color: #000;

        #arrow-small-right {
            fill: var(--gn-text-color);
        }
    }

}

/* Call to action ohne Hintergrund */
.cta-button-no-bg {
    width: auto;
    max-width: 280px;
    padding: 0 2rem;
    line-height: 40px;
    display: flex;
    color: #fff;
    text-align: center;
    align-items: center;
    justify-content: space-around;
    touch-action: manipulation;

    #arrow-small-right {
        fill: #fff;
    }

    &:hover {
        color: var(--gn-text-hover-color);

        #arrow-small-right {
            fill: var(--gn-text-hover-color);
        }
    }

}

.btn--is-centered {
    margin: 0rem  auto;
}

/*Scroll to Top Button*/
.button.icon.circle {
    background-color: #fff;

    &:hover {
        color: var(--gn-text-hover-color);
        background-color: #fff;
    }
}

/* Touch-Empfindlichkeit erhöhen */
a,
button,
.button {
  touch-action: manipulation;
}

select {
    box-shadow: none;

    &:focus { box-shadow: none; }
}

body {
    font-family: 'TTNorms', sans-serif;
}

.col {
    padding: 0 1rem;
}

.form-flat select {
    height: 48px;
    font-size: 14px;
    line-height: 48px;
    background-color: transparent;
    color: var(--gn-text-color) !important;
}

.box-text-products {
    .title-wrapper {
        font-weight: bold;
        margin-bottom: 5px;
    }

    .price-wrapper {
        .amount {
            font-weight: normal;
        }
    }
}

.wpcf7 {
    input[type=submit] {
        all: unset;
        width: 200px;
        padding: 0 2rem;
        line-height: 72px;
        border: 1px solid #000;
        box-shadow: none;
        display: flex;
        background-color: #000;
        color: #fff;
        text-align: center;
        align-items: center;
        justify-content: space-around;
        margin: 2rem 0 0 0;

        #arrow-small-right {
            fill: #fff;
        }

        &:hover {
            background-color: #fff;
            color: #000;
            box-shadow: none;

            #arrow-small-right {
            fill: var(--gn-text-color);
            }
        }

    }

    .wpcf7-spinner {
        display: none;
    }

    .wpcf7-response-output {
        padding: 12px 16px !important;
        margin: 2em 0em 1em !important;
        border-radius: 5px;
        font-size: 16px;
        border: none !important;
    }

    form.invalid .wpcf7-response-output {
        background: #ffb9001f;
        color: #e1ae29;
    }

    form.sent .wpcf7-response-output {
        background: #21bd3c26;
        color: #21bd3c;
    }
}

.wpcf7-form-control-wrap {
    input,
    textarea {
        width: 100%;
        color: #000;
        font-size: 14px;
        box-shadow: none;

        &::placeholder {
            color: var(--gn-link-color)
        }

        &:active,
        &:hover,
        &:focus {
            border-color: var(--gn-text-color);
            box-shadow: none;
        }

    }

    input {
        height: 48px;
    }

}

.form-privacy {
    font-size: 10px;
    color: #999;
    padding: 1.5rem 0 0 0;
}

.grecaptcha-badge { 
    visibility: hidden; 
}



/*-------------------  Header Styling  -------------------*/

.header-top {
    .container {
        padding: 0;

        .header-block {
            width: 100vw;
            margin: 0;
            font-size: 13px;
            text-align: center;
        }
    }

    .nav > li > a {
        font-size: 13px;
    }

    .nav-center {
        justify-content: space-around;
    }

    .rotate-content {
        padding: 10px;
        font-size: 12px;

        p {display:none;}
    }
}

.header-main {

    .header-inner {
        padding: 0 28px;
    }

    .header-nav-main.nav > li > a {
        font-size: 14px;
        font-weight: 700;
        padding: 6px 0;

        .icon-angle-down {
            display: none;
        }
    }

    .nav > li {
        margin: 0 12px;
    }

    .nav-line-grow>li>a:before {
        height: 2px;
        top: unset;
        bottom: 0;

    }

    .nav>li>a>i {
        &.icon-menu {
            font-size: 22px;
            min-width: 40px;
        }

        &.icon-search {
            font-size: 16px !important;
        }
    }

}

.header:not(.transparent) {
    .nav > li {
        a { 
            color: var(--gn-text-color); 
        }
    }
}

.header-wrapper.stuck {
    box-shadow: none;
}

.cart-icon strong {
    font-size: 8px;
    height: 16px !important;
    width: 16px !important;
    line-height: 12px !important;

    &:after {
        height: 6px !important;
        margin-left: -6px !important;
        width: 12px !important;
    }
}

.header_logo {
    max-width: 130px;
}

/*Search Lightbox Styling auch für Advanced Woo Search Plugin*/
.mfp-content:has(#search-lightbox) {
    transform: none;
    vertical-align: top;
    top: 150px;
}

.aws-container .aws-search-form {
    height: 60px;

    .aws-search-field {
        padding: 1rem;
        border: none;
        border-bottom: 1px solid;
        font-size: 16px;
    }

    .aws-search-btn.aws-form-btn {
        border: none;
        border-bottom: 1px solid;
        background-color: hsla(0, 0%, 100%, .2) !important;
        border-color: hsla(0, 0%, 100%, .09);
        margin: 0;

        svg {fill: #fff;}
    }
}

.aws-search-result {

    .aws_result_link {
        padding: 1rem;
    }

    .aws_result_image { 
        padding: 0 16px 0 0;

        img {
            width: 90px;
        }
    }

    .aws_result_content {
        .aws_result_title {
            color: var(--gn-text-color);
            font-weight: 700;
            font-size: 14px;
        }

        .aws_result_price,
        span.amount {
            color: var(--gn-text-color);
            font-weight: 400;
            font-size: 13px;
        }

    }

    .aws_search_more a {
        color: var(--gn-text-color);
    }
}


#search-lightbox {

    .mfp-close {
        display: none;
    }

    .form-flat input:not([type=submit]) {
        border-radius: 0;
    }
}

.mfp-container {
    padding: 1rem;
}

.mfp-bg.mfp-ready {
    opacity: .6;
}

.mfp-close {
    mix-blend-mode: normal;
    opacity: 1 !important;
    transition: none;
    height: 50px;
    line-height: 50px;
    width: 50px;
}

/* Styling der Alert messages*/
.message-wrapper {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 16px;

    &:focus-visible {
        outline: none;
    }

    .message-container {
        padding: 12px;
        border-radius: 5px;
        font-size: 16px;
    }

    .alert-color {
        background: #ffe2e2;
    }

    .success-color {
        background: #21bd3c26;

        .icon-checkmark {
            display: none;
        }
    }
}


/* ---------------------------------------- Styling der Produktseite --------------------------------------------------- */

.breadcrumbs {
    position: relative;
    z-index: 9999;
    padding: 5px 5px 15px 0px;

    a {
        font-size: 12px;
    }
}

.badge-container {
    margin: 36px 0 0;
}

.woocommerce-product-gallery__wrapper,
.flickity-slider {
    touch-action: pan-y !important;
    overscroll-behavior: contain !important;
}

.product-thumbnails .is-nav-selected a, 
.product-thumbnails a:hover {    
    border-color: transparent;
    border-bottom: 1px solid rgba(0, 0, 0, .2);
}

.product-thumbnails img {
    opacity: 1 !important;
} 

.flickity-prev-next-button {
    background-color: transparent !important;
    height: 100%;
    top: 0;
    bottom: unset;

    &:hover {
        background-color: transparent !important;
    }
}

.flickity-prev-next-button.next { right: 3%;}
.flickity-prev-next-button.previous { left: 3%;}


.gn-productpage-config-inner-row {
    margin: 0 auto !important;
    padding: 4rem 1rem 0 1rem !important;
    font-size: var(--gn-text-font-size-small);

    .col {
        padding: 0;
    }

    form.cart {
        margin-bottom: 0;
    }

    .product-title {
        font-size: 22px;
    }

    .product-price-container {
        margin: 1rem 0 2rem 0;

        .amount {
            font-weight: 400;
            font-size: 18px;
        }
    }

    .product-short-description {
        font-size: 14px;
    }


    .woocommerce-variation-availability {
        margin: 3rem 0 2rem 0;
        font-size: var(--gn-text-font-size-small);
        font-weight: 700;
        display: none;
    }

    .wc-no-matching-variations .woocommerce-info {
        color: var(--fs-color-alert);
        font-size: 14px;
        margin: 1rem 0;
    }


    .product-section {
        .col {
            flex-basis: 50%;
            max-width: 50%;
        }

        .woocommerce-LoopProduct-link {
            font-size: var(--gn-text-font-size-small);
        }

        .woocommerce-Price-amount {
            font-weight: 400;
            font-size: var(--gn-text-font-size-small);
        }
    }

    .upsells-wrapper {
        margin-top: 2rem;

        .product-section-title {
            font-size: 18px;
        }

        .container, 
        .row {
            margin: 0;
        }
    }

}

.woocommerce-product-rating {
    font-size: var(--gn-text-font-size-small);
    cursor: pointer;

    .star-rating {
        font-size: 12px;
        letter-spacing: 3px;
        height: 14px;
        width: 6.09em;
            margin: 0 0 0 0;
    }

    .woocommerce-review-link {
        font-size: 100%;
        margin-right: 4px;
    }
}

.woocommerce-variation-add-to-cart, form.cart {
    gap: 0.5em;
}

.variations {

    .label {
        grid-gap:1rem;
    }

    tbody {
        display: block;
        padding: 1rem 0 0rem 0;
    }

    tr {
        display: block;
        padding: 1.5rem 0 0 0;

        &:first-child {
            padding: 0.5rem 0 0 0;
        }
    }

    .ux-swatches {
        --swatch-size-medium: 32px;
    }

    .ux-swatch-selected-value__separator { display: none !important; }
    
    .ux-swatch-selected-value {
        color: #aaa;
    }

    .ux-swatch {
        overflow: hidden;
        transform: translateZ(0); /* Trick, um den Box-Shadow zentriert zu halten (Rendering-Problem)*/
    }

}




.woocommerce-variation >
    .woocommerce-variation-price,
    .reset_variations,
    .ux-quantity.quantity.buttons_added.form-flat { display: none !important;}


/*Styling Sonderanfertigungen möglich - Button*/
.gn-sonderbutton-link {
    display: inline-flex;
    gap: 8px;

    .material-symbols-outlined {
            font-size: 17px;
            line-height: 23px;
    }

    .gn-sonderbutton-text {
        text-decoration: underline;
        font-size: var(--gn-text-font-size-small);
    }

}

/* Popup Shopseiten mit Infos zu individuellen Anpassungsmöglichkeiten */

#sonder {max-width: 600px !important;}

.custom-options {
    max-width: 800px;
    margin: 0 auto 2rem auto;
    padding: 1rem 1rem 0 1rem;

    .co-headline {
        margin-bottom: 52px;
        border-bottom: 1px solid var(--gn-border-color);
        
        h2 {
            font-size: 24px;
            text-align: center;
            margin: 0;
            line-height: 100px;
        }
    }

    .custom-options-point { 
        display: grid;
        grid-template-columns: 1fr 18fr;
        grid-gap: 1rem;
        padding: 1rem 0rem;

        .cot-head {
            font-size: 16px;
            line-height: 22px;
        }	

        .cot-text {
            color:#999;
            font-size: 14px;
        }	
    }

    .custom-options-info {
        padding: 3rem 0 1rem 0;
    }

    .custom-options-button {
        .cta-button {
            max-width: 300px;
            width: 100%;
        }
    }
}

/*ddms Lieferzeitanzeige auf feste Höhe, damit der Konfigurator beim nachladen der LZ nicht springt*/
.gn-productpage-upper {
    .ddms-delivery-time {
        height: 91px;
    }
}  

.single_add_to_cart_button {
    width: 100%;
    height: 68px;
    line-height: 68px;
    font-size: 14px;
    margin: 1rem 0;
}


#product-assembly-container {

    label {
        display: flex;
        gap: 8px;
        font-weight: 400;
        font-size: var(--gn-text-font-size-small);
    }

    #assembly-message-checkbox {
        margin: 0;
    }
}


.gn-productpage-description {
    max-width: 1200px;
    margin: 0 auto;
    padding: 4rem 2rem 0 2rem !important;

    .col { padding: 0}
}

.gn-productpage-bottom {
    max-width: var(--gn-max-container-width);
    margin: 0 auto;
    padding: 2rem 1rem 0 1rem !important;

        .product-section {
            .product-section-title {
                font-size: 28px;
                line-height: 34px;
                text-align: center;
            }
        }
}

.ddms-shipping-description {
    .shippingflag {
        margin-right: 10px;
        height: 10px;
        vertical-align: baseline;
    }
}

.product-section {
    border: none;

    .product-section-title {
        text-transform: none;
        letter-spacing: 0;
        margin-bottom: 17px;
    }
}

.video-image-wrapper {
    display: flex;
    justify-content: center;
    margin: 2rem 0;
    max-width: 900px;
    justify-self: center;

    iframe { max-height: 300px;}
}

.related-products-wrapper {
    .flickity-button,
    .flickity-prev-next-button:hover {
        height: calc(100% - 118px);
        background-color: transparent;
        box-shadow: none;
    }

    .flickity-prev-next-button {
        width: 25px !important;

        svg {
            margin-top: 0 !important;
        }
            
        /* &.previous {
            left: 25px !important;
        }

        &.next {
            right: 25px !important;
        }
        */
    }
}

/*Styling der Popup Gallery auf der Produktseite*/
.pswp__bg {
    background-color: #fff !important;
}

button.pswp__button,
.pswp__button--arrow--left:before, 
.pswp__button--arrow--right:before {
    background-image: url(woocommerce/assets/css/photoswipe/default-skin/default-skin.png) !important;
}

button.pswp__button--arrow--left, 
button.pswp__button--arrow--right {
    background-image: none !important;
}

.pswp__button--arrow--left, 
.pswp__button--arrow--right,
.pswp__ui--idle .pswp__top-bar {
    opacity: 1 !important;
    visibility: visible !important;
    transition: none !important;
    background-image: none !important;
}

.pswp__caption, .pswp__top-bar {
    background-color: transparent !important;
}

.pswp__ui--idle .pswp__button--arrow--left, 
.pswp__ui--idle .pswp__button--arrow--right {
    opacity: 1;
}

.pswp--svg {
    .pswp__button--arrow--left, 
    .pswp__button--arrow--right {
        display: none;
    }
}

.pswp__ui--fit .pswp__top-bar {
    background-color: #fff !important;
}

.pswp--zoom-allowed .pswp__button--zoom,
.pswp--supports-fs .pswp__button--fs,
.pswp__button--share,
.pswp__preloader,
.pswp__caption {
    display: none;
}

.pswp__counter {
    color: var(--gn-text-color);
}

.pswp__ui {
    opacity: 1 !important;
    visibility: visible !important;
    transition: none !important;
}

.pswp__button {
    opacity: 1 !important;
    visibility: visible !important;
}


/* ddms- Accordion Tabs auf der Produktseite */
.ddms-tab-content {
    h4 {
        margin: 12px 0 8px 0;
    }

    div {
        margin-bottom: 3rem;
    }

    .ddms-dimension-image {
        display: inline-flex;
        margin-right: 0;
        margin-bottom: 3rem;
        justify-content: center;

        img {
            max-height: 350px;
        }
    }
}


    

@media only screen and (min-width: 550px) {
/*************** Tablet Viewport Breakpoint ***************/

    .header_logo {
        max-width: 166px;
    }
    

    /*Styling der Produktseite*/
    .video-image-wrapper {
        margin: 4rem 4rem 2rem 4rem;
        max-width: 700px;

        iframe { max-height: 400px;}
    }


}




@media only screen and (min-width: 850px) {
/*************** Tablet Landscape Breakpoint ***************/
    
    /*Header Styling*/
    .header-main {
        padding: 0 2rem;
    }

    .header_logo {
        max-width: 190px;
    }

    /*Search Lightbox Styling*/
    .mfp-content:has(#search-lightbox) {
        top: 250px !important;
    }

    /*Styling der Produktseite*/
    .gn-productpage-upper {
        .mb-half {
            margin-bottom: 0px;
        }
    }

    .gn-productpage-description {
        padding: 8rem 2rem 0rem 2rem !important;
    }

    .video-image-wrapper {
        margin: 4rem auto;

        iframe { max-height: 700px;}
    }

    .gn-productpage-bottom {
        padding-top: 5rem !important;
    }

    /*Pfeile in der Produktgallerie Lightbox ab jetzt anzeigen*/
    .pswp--svg {
        .pswp__button--arrow--left, 
        .pswp__button--arrow--right {
            display: block;
        }
    }

    /* ddms- Accordion Tabs auf der Produktseite */
    .ddms-tab-content .ddms-dimension-image {
        width: 50%;
    }

}




@media only screen and (min-width: 1110px) {
/*************** Desktop Breakpoint ***************/

    /*Überschriften*/
    .title2,
    .accordion_title {
        font-size: 36px;
        line-height: 42px;
    }

    /*Header Styling*/
    .header-main {
        padding: 0 6rem;
   
        .nav > li { margin: 0 22px }
    }

    /*Styling der Produktseite*/
    .gn-productpage-config-inner-row {
            padding-top: 8rem;
    }

    .gn-productpage-bottom {
        padding: 4rem 8rem 2rem 8rem !important;
    
        .product-section .product-section-title {
                font-size: 36px;
                line-height: 42px;
        }
    }

    .video-image-wrapper {
        max-width: 800px;
    }
  

}