@import '../components/faq.css';
@import '../components/Componenti/product-grid-box.css';
@import '../Moduli/Stripe/news-stripe.css';

/* Product Header
------------------------------------------------------------------*/
    #header-content {
        padding-top: 1.82vw; /*35*/
        padding-bottom: 1.82vw; /*35*/
    }
    #breadcrumbs * {
        color: var(--color-main);
        font-family: var(--md-font) !important;
    }
    #breadcrumbs a:hover span {
        color: var(--color-main) !important;
    }

/* Intro stripe
------------------------------------------------------------------*/
    #product-intro.with-bg-logo > .bg-logo {
        transform: unset;
        left: 0;
        bottom: 0;
        width: 39.58vw; /*760*/
        height: 20.26vw; /*389*/
    }

    #product-intro .logos-icon {
        gap: 1.04vw; /*20*/
        padding-bottom: 1.56vw; /*30*/
    }
    #product-intro .logos-icon,
    #product-intro .logos-icon  * {
        margin: 0 !important;
    }
    #product-intro .single-logo {
        width: 5.63vw; /*108*/
        min-width: 5.63vw; /*108*/
        height: 5.63vw; /*108*/
        border-radius: 100%;
    }
    #product-intro .single-logo.v-0 {
        opacity: 0;
    }
    #product-intro .single-logo:before {
        display: none;
    }

    #product-intro .col-description {
        width: 46.82%;
        padding-right: 1.56vw; /*30*/
    }
    #product-intro .col-img {
        width: 53.18%;
        height: 34.9vw; /*670*/
    }
    #product-intro .stripe-container-inner {
        padding-top: 2.71vw; /*52*/
    }

/* Info box stripe
------------------------------------------------------------------*/
    #product-info .allergeni-list,
    #product-info .allergeni-list li,
    #product-info .allergeni-list li *,
    #product-info .info-list,
    #product-info .info-list li,
    #product-info .info-list li * {
        margin: 0 !important;
    }
    #product-info .allergeni-list li:before {
        display: none;
    }
    #product-info .main-product-info {
        gap: 2.6vw 7.29vw; /*50 140*/
    }
    #product-info .main-product-info .col:not(.col-nutritional-values) {
        width: 17.86vw; /*343*/
    }
    #product-info .col-title {
        padding: 0.63vw 1.09vw; /*12 21*/
        height: 3.65vw; /*70*/
    }

    #product-info .col-content {
        padding-top: 1.46vw; /*28*/
        padding-left: 1.09vw; /*21*/
        padding-right: 1.09vw; /*21*/
    }

    #product-info .col-nutritional-values {
        width: 34.64vw; /*665*/
    }
    #product-info .col-nutritional-value .col-content {
        padding-top: 0.57vw; /*11*/
    }
    #product-info .col-nutritional-values .col-title {
        padding-left: 6.25vw; /*120*/
        padding-right: 6.25vw; /*120*/
    }
    #product-info .col-nutritional-values .nutritional-value {
        padding: 0.26vw 0; /*5 0*/
        border-bottom: 1px solid var(--color-main);
    }
    #product-info dd {
        white-space: nowrap;
    }
    #product-info dt {
        padding-right: 35px;
    }

/* Extra Info Box
------------------------------------------------------------------*/
    #additional-info-boxes .col {
        padding: 1.56vw 1.04vw 2.34vw 1.04vw; /*30 20 45 20*/
    }
    #additional-info-boxes .col-title {
        padding-bottom: 0.83vw; /*16*/
    }
    #additional-info-boxes .two-col-grid {
        gap: 1.09vw; /*21*/
    }

/* Line Stripe
------------------------------------------------------------------*/
    #line-presentation {
        margin-top: 4.06vw; /*78*/
    }
    #line-presentation .col.col-img {
        width: 49.1%;
    }
    #line-presentation .col.col-img .col-container {
        min-height: 32.4vw; /*622*/
        height: 100%;
    }
    #line-presentation .col.col-description {
        width: 50.9%;
    }
    #line-presentation .col.col-description .col-container {
        padding: 2.4vw 0; /*46 0*/
    }
    #line-presentation .col.col-description .col-text{
        padding-top: 1.56vw; /*30*/
    }

/* Related Products
------------------------------------------------------------------*/
    #related-products .swiper-pagination {
        position: relative;
        bottom: unset;
        display: none;
    }
    body #related-products .swiper-button-next, 
    body #related-products .swiper-button-prev {
        background-color: unset;
        width: 1.04vw; /*20*/
        height: 1.56vw; /*30*/
        min-width: unset;
        min-height: unset;        
        padding: 0;
        transform: unset;
        top: 16.93vw; /*325*/
    }
    body #related-products .swiper-button-next svg,
    body #related-products .swiper-button-prev svg {
        width: 100%;
        height: 100%;
        min-width: unset;
        min-height: unset;
    }    
    body #related-products .swiper-button-prev {
        left: 0;
    }
    body #related-products .swiper-button-next {
        right: 0;
    }
    body #related-products .swiper-container {
        padding: 0.21vw; /*4*/
    }


@media screen and (max-width: 1920px) {
    /* Product Header
    ------------------------------------------------------------------*/
        #header-content {
            padding-top: 35px; /*35*/
            padding-bottom: 35px; /*35*/
        }

    /* Intro stripe
    ------------------------------------------------------------------*/
        #product-intro .logos-icon {
            gap: 20px; /*20*/
            padding-bottom: 30px; /*30*/
        }
        #product-intro .single-logo {
            min-width: 72px;
            min-height: 72px;
        }

        #product-intro .col-description {
            padding-right: 30px; /*30*/
        }
        #product-intro .stripe-container-inner {
            padding-top: 52px; /*52*/
        }

    /* Info box stripe
    ------------------------------------------------------------------*/
        #product-info .main-product-info {
            gap: 50px 7.29vw;
        }       
        #product-info .col-title {
            padding: 12px 21px; /*12 21*/
            height: 70px; /*70*/
        }
        #product-info .nutritional-values .nutritional-value {
            padding: 5px 0; /*5 0*/
        }

    /* Line Stripe
    ------------------------------------------------------------------*/
        #line-presentation .col.col-img .col-container {
            min-height: 622px; /*622*/
        }


    /* Related Products
    ------------------------------------------------------------------*/
        body #related-products .swiper-button-next, 
        body #related-products .swiper-button-prev {
            background-color: unset;
            width: 20px; /*20*/
            height: 30px; /*30*/
        }
        body #related-products .swiper-container {
            padding: 4px; /*4*/
        }
}


@media screen and (max-width: 1600px) {
    #product-info .col-nutritional-values .col-title {
        padding-left: 6vw;
        padding-right: 6vw;
    }
}


@media screen and (max-width: 1440px) {
    #product-info .main-product-info {
        gap: 40px 6.29vw;
    }
    #product-intro .logos-icon {
        padding-bottom: 20px;
        gap: 15px;
    }
    #product-intro .col-img {
        height: 36.16vw;
    }

    #product-info .main-product-info .col:not(.col-nutritional-values) {
        width: 19.51vw; /*281*/
    }
    #product-info .col-nutritional-values {
        width: 41.64vw;
    }    
    #product-info .col-nutritional-values .col-title {
        padding-left: 5.25vw;
        padding-right: 5.25vw;
    }

    #additional-info-boxes .two-col-grid {
        gap: 15px;
    }

    #line-presentation {
        margin-top: 60px;
    }
    #line-presentation .col.col-img .col-container {
        min-height: 530px;
    }
    #line-presentation .col.col-description .col-container {
        padding: 40px 0;
    }
}


@media screen and (max-width: 1280px) {
    #product-intro .logos-icon {
        padding-bottom: 15px;
    }
    #product-info .main-product-info .col:not(.col-nutritional-values) {
        width: 22.7vw;
    }
    #product-info .main-product-info {
        gap: 40px 3.29vw;
    }

    #product-info .col-nutritional-values {
        width: 47.64vw;
    }

    #additional-info-boxes .col {
        padding: 25px 15px 35px 15px;
    }
}


@media screen and (max-width: 1150px) {
    #product-info .stripe-container {
        padding-top: 50px;
    }
    #product-intro .col-description {
        padding-left: 0;
    }
}


@media screen and (max-width: 992px) {
    /* Product Header
    ------------------------------------------------------------------*/

    /* Intro stripe
    ------------------------------------------------------------------*/
        #product-intro .single-logo {
            min-width: 65px;
            min-height: 65px;
        }
        #product-intro .col-img {
            height: 39.72vw;
        }

    /* Info box stripe
    ------------------------------------------------------------------*/
        #product-info .apply-pad-no-gut {
            padding-left: 0;
            padding-right: 0;
        }
        #product-info .main-product-info .col {
            width: 42.7vw !important;
        }
        #product-info .col-nutritional-values .col-title {
            padding-left: 2.25vw;
            padding-right: 2.25vw;
        }

    /* Extra Info Box
    ------------------------------------------------------------------*/
        #additional-info-boxes .two-col-grid {
            padding-left: 0;
            padding-right: 0;
        }

    /* Line Stripe
    ------------------------------------------------------------------*/


    /* Related Products
    ------------------------------------------------------------------*/
}


@media screen and (max-width: 767px) {
    header#header-no-img #header-content {
        margin-top: 30px;
        padding-top: 55px;
        padding-bottom: 54px;
    }

    /* Intro stripe
    ------------------------------------------------------------------*/
        #product-intro .single-logo.v-0 {
            display: none;
        }
        #product-intro .stripe-container {
            padding-left: 0;
            padding-right: 0;
        }
        #product-intro .stripe-container-inner {
            padding-top: 35px;
        }
        #product-intro .stripe-container-inner > * {
            width: 100%;
        }
        #product-intro .stripe-container-inner > * {
            padding: 0;
        }

        #product-intro .col-description {
            order: 2;
            padding-left: calc(32px + 18.6vw);
            padding-right: 32px;
            padding-bottom: 102px
        }

        #product-intro .col-img {
            order: 1;
            height: 77.91vw;
        }

        #product-intro .single-logo {
            min-width: 80px;
            min-height: 80px;
        }
        #product-intro .logos-icon {
            padding-bottom: 0;
        }
        #product-intro .product-text {
            padding-top: 24px;
        }
        #product-intro.with-bg-logo > .bg-logo {
            width: 315px;
            height: 135px;
            left: calc(-32px + -50px);
        }

    /* Info box stripe
    ------------------------------------------------------------------*/
        #product-info .stripe-container {
            padding-top: 0;
        }
        #product-info .main-product-info {
            display: block;
        }
        #product-info .main-product-info .col {
            width: 74vw !important;
            margin: 0 auto;
            padding-bottom: 60px;
        }
        #product-info .main-product-info .col:last-child {
            padding-bottom: 0;
        }
        #product-info .col-title {
            height: unset;
            padding: 24px 21px;
        }
        #product-info .col-content {
            padding: 30px 0 0 0;
        }
        #product-info .col-nutritional-values .nutritional-value {
            padding: 5px 0;
        }

        #product-info {
            position: relative;
        }
        .bg-tax-icon {
            display: block !important;
            position: absolute;
            top: 91%;
            right: 0;
            width: 338px;
            height: 338px;
            z-index: -1;
            opacity: 0.05;
            overflow: hidden;
        }
        .bg-tax-icon img {
            right: -30px;
            width: 100%;
            height: 100%;
            position: relative;
        }
        .hide-logo-mob.bg-tax-icon {
            top: 80%;
        }        

    /* Extra Info Box
    ------------------------------------------------------------------*/
        #additional-info-boxes .stripe-container {
            padding-top: 140px;
        }
        #additional-info-boxes .two-col-grid {
            gap: 90px 0;
        }
        #additional-info-boxes .col {
            padding: 38px 29px 35px 29px;
        }
        #additional-info-boxes .col-title {
            padding-bottom: 20px;
        }
        #additional-info-boxes .col-text > * {
            font-size: 18px;
        }        

    /* FAQ
    ------------------------------------------------------------------*/
        #faq .stripe-container {
            padding-top: 85px;
        }
        #faq.hide-logo-mob .faq-golfera-logo {
            display: none;
        }
        #faq.hide-logo-mob .stripe-container {
            padding-top: 200px;
        }

    /* Line Stripe
    ------------------------------------------------------------------*/
        #line-presentation {
            margin-top: 100px;
        }    
        #line-presentation .stripe-container {
            padding: 0;
        }
        #line-presentation .stripe-container-inner > * {
            width: 100% !important;
        }
        #line-presentation .col-img {
            order: 1;
        }
        #line-presentation .col.col-img .col-container {
            height: 100vw;
            max-height: 550px;
            min-height: unset;
        }
        #line-presentation .col-description {
            order: 2;
            padding-left: 32px;
        }
        #line-presentation .col.col-description .col-container {
            padding: 70px 0 60px 0;
        }
        #line-presentation .col.col-description .col-text {
            padding-top: 30px;
        }
        #line-presentation .button-container {
            padding-top: 60px;
            text-align: center;
        }
        #line-presentation .button-container .btn {
            margin-top: 0;
        }

    /* Related Products
    ------------------------------------------------------------------*/
        #related-products .stripe-container {
            padding-top: 140px;
        }
        #related-products h2 {
            padding-bottom: 0 !important;
        }
        #related-products .slider-buttons {
            display: none !important;
        }
        #related-products .swiper-pagination {
            display: block;
            padding-bottom: 0;
            padding-top: 95px;
        }
}

@media screen and (max-width: 600px) {
    #product-info .main-product-info .col {
        width: 100% !important;
        padding-left: 32px;
        padding-right: 32px;
    }

    #product-info .col-title {
        position: relative;
    }
    #product-info .col-title:before {
        content: '';
        width: 100vw;
        height: 100%;
        display: block;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        background-color: var(--color-gold-50);
        z-index: -1;
    }    
}