/**
 * Theme Name:  Storefront Child Theme 2024
 * Template:    storefront
 * Author:      Eugenio Palazzi
 * Version:     1.0
*/

/* Scrollbar Location Desktop */
:root {
    --scrollbar-bg:         #f1f1f1;
    --scrollbar-thumb:      #888;
    --scrollbar-thumb-hover:#555;
    --mdSlider:             100%;
    --mdSliderHeight:       50vh;
    --lgSlider:             486px;
    --lgSliderHeight:       580px;
    --xlSlider:             570px;
    --xlSliderHeight:       650px;
    --xxlSlider:            730px;
}

body {
    overflow-x: hidden;
}

button:focus, 
.button.alt:focus {
    outline-color: transparent;
}

/* WebKit Browsers */
#scrollLocation::-webkit-scrollbar {
    width: 1px;
}
#scrollLocation::-webkit-scrollbar-track {
    background: var(--scrollbar-bg);
}
#scrollLocation::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 6px;
}
#scrollLocation::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}
/* Firefox */
#scrollLocation {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-bg);
}
/* Internet Explorer and Edge */
#scrollLocation {
    scrollbar-base-color: var(--scrollbar-bg);
    scrollbar-face-color: var(--scrollbar-thumb);
    scrollbar-track-color: var(--scrollbar-bg);
    scrollbar-arrow-color: #000;
    scrollbar-highlight-color: #ffffff;
    scrollbar-3dlight-color: #d4d4d4;
    scrollbar-shadow-color: var(--scrollbar-thumb);
    scrollbar-darkshadow-color: var(--scrollbar-thumb-hover);
}
/* End Scrollbar Location Desktop */

.max-width-1500,
.maxwidth {
    max-width:1500px
}

a:focus,
a:visited,
input:focus, input[type="button"]:focus {
    outline: transparent;
}

img {
    border-radius: 0;
}

.content-area {
float: none!important;
}

header.entry-header {
    display: none;
}

footer ul li ul {
    margin-left: 0;
}

.woocommerce-product-gallery__image a img {
    width: 100%;
}

.wp-block-woocommerce-checkout.alignwide.wc-block-checkout {
    width: 992px!important;
    margin: 8rem auto 0 auto!important;
}

.woocommerce-order > p {
    display: none;
}

.woocommerce-order-received #primary {
    max-width: 992px;
}

.hide-desk {
    display: none!important;
}
.hide-mob {
    display: flex!important;
}

@media screen and (max-width: 576px) {
    .hide-desk {
        display: block!important;
    }
    .hide-mob {
        display: none!important;
    }
}

.woocommerce-Price-amount,
.woocommerce-variation-price span.woocommerce-Price-amount.amount {
    font-family: var(--medium);
    font-size: 21px;
    font-weight: 500;
    color: #000;
}

.woocommerce-product-gallery {
    width: 100%!important;
}

.single-product div.product .images,
.single-product div.product .woocommerce-product-gallery {
    margin-bottom: 0;
}

.single-product div.product .woocommerce-product-gallery .flex-control-thumbs {
    display: flex;
}

.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4 .flex-control-thumbs li {
    margin-right: 0;
}

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
    z-index: 1;
}

.single_add_to_cart_button {
    background-color: #0064E0 !important;
    color: #fff !important;
    text-transform: initial;
    font-size: 1rem !important;
    font-family: var(--semibold) !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-weight: normal !important;
    width: 300px !important;
    height: 46px !important;
}

.single_add_to_cart_button:hover {
    background-color: #0050B3 !important;
}

@media screen and (max-width: 1024px) {
    .single_add_to_cart_button {
        margin-top: 32px;
    }
    .wp-block-woocommerce-checkout.alignwide.wc-block-checkout {
        width: 100%!important;
    }
    .woocommerce-variation.single_variation {
        margin-top: 0!important;
        margin-bottom: 0!important;
    }

    /* Quantity - + fixed bottom mobile */
    .single_variation_wrap .quantity {
        position: fixed;
        bottom: 64px;
        left: 0;
        z-index: 3;
        background: white;
    }
    .single_variation_wrap .quantity .quantity {
        height: 46px;    
        width: 15%;
        display: flex;
        justify-content: center;
    }
    button.single_add_to_cart_button, form.cart button[type=submit]:not(#qib_id):not(#qib_id):not(_):not(_) {
        width: 85%!important;
        right: 0!important;
        left: auto;
    }
}

@media screen and (max-width: 768px) {
    .single_variation_wrap .quantity .quantity {
        width: 30%;
    }
    button.single_add_to_cart_button, form.cart button[type=submit]:not(#qib_id):not(#qib_id):not(_):not(_) {
        width: 70%!important;
    }
}

.quantity .quantity {
    border: 1px solid #000;
}
.quantity input.qty {
    background: #fff;
    box-shadow: none;
}
.quantity .minus,
.quantity .plus {
    background: #fff;
}
.quantity .qty {
    width: 28px;
    padding-left: 0;
    padding-right: 0;
}
input.input-text.qty.text,
input.qty_button.plus,
input.qty_button.minus {
    font-family: ocr-b-std, monospace;
    color: #000;
}
input.qty_button.plus,
input.qty_button.minus {
    font-size: 1.2rem;
    padding: 0 16px;
}

.woocommerce-variation.single_variation {
    margin-top: 30px;
    margin-bottom: 30px;
}

.hide-location-header {
    transition: margin-top .2s ease-out;
    margin-top: -55px;
}

@media screen and (min-width: 1024px) and (max-width: 1280px) {
    .woocommerce-variation.single_variation {
        margin-top: 0px;
        margin-bottom: 0px;
    }
}

@media screen and (min-width: 1280px) {
    .wp-block-woocommerce-cart {
        margin-top: 10rem;
    }
}

/* Set Yotpo widget stars on product page */
.yotpo-widget-instance {
    margin-top: -4px;
}
#yotpo-star-rating-reviews-summary {
    margin-bottom: 4px;
}

span.onsale {
    display: none;
}

/* Product page slider  */
    #containerSlider {
        width: 100%;
    }

    #mainSlider {
        width: 100%;
        height: 60vh;
    }

    #single {
        grid-auto-rows: 100px;
    }
    
    /* @media screen and (min-width: 768px) {
        #containerSlider {
            width: var(--mdSlider);
        }
    
        #mainSlider {
            width: var(--mdSlider);
            height: var(--mdSliderHeight);
        }

        #single {
            grid-template-columns: repeat(7, 1fr);
            grid-auto-rows: calc((var(--mdSliderHeight) / 7) - 5px);
        }
    } */

    @media screen and (min-width: 1024px) {
        #containerSlider {
            width: var(--lgSlider);
        }
    
        #mainSlider {
            width: var(--lgSlider);
            height: var(--lgSliderHeight);
        }

        #single {
            grid-template-columns: repeat(7, 1fr);
            grid-auto-rows: calc((var(--lgSlider) / 7) - 5px);
        }

        .main-image:hover .zoom-image {
            cursor: crosshair; 
        }
    }

    @media screen and (min-width: 1280px) {
        #containerSlider {
            width: var(--xlSlider);
        }
    
        #mainSlider {
            width: var(--xlSlider);
            height: var(--xlSliderHeight);
        }

        #single {
            grid-template-columns: repeat(7, 1fr);
            grid-auto-rows: calc((var(--xlSlider) / 7) - 5px);
        }
    }

    @media screen and (min-width: 1536px) {
        #containerSlider {
            width: var(--xxlSlider);
        }
    
        #mainSlider {
            width: var(--xxlSlider);
            height: var(--xxlSlider);
        }

        #single {
            grid-template-columns: repeat(7, 1fr);
            grid-auto-rows: calc((var(--xxlSlider) / 7) - 5px);
        }
    }

    #mainSlider {
        overflow: hidden;
        position: relative;
    }

    #mainSlider .main-image {
        width: 100%;
        height: 100%; 
    }

    .relativeSlider {
        position: relative;
        overflow: hidden; 
    }

    .translate {
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        gap: 5px;
        transition: all .5s ease; 
    }

    .redRed,
    .yellowYellow,
    .blueBlue,
    .orangeOrange,
    .greenGreen,
    .greyGrey,
    .redRedVarTwo,
    .yellowYellowVarTwo,
    .blueBlueVarTwo,
    .orangeOrangeVarTwo,
    .greenGreenVarTwo,
    .greyGreyVarTwo,
    .redRedVarThree,
    .yellowYellowVarThree,
    .blueBlueVarThree,
    .orangeOrangeVarThree,
    .greenGreenVarThree,
    .greyGreyVarThree,
    .redRedVarFour,
    .yellowYellowVarFour,
    .blueBlueVarFour,
    .orangeOrangeVarFour,
    .greenGreenVarFour,
    .greyGreyVarFour,
    .yt-thumb {
        background-size: cover;
        background-position: center;
    }

    #single {
        display: grid;
        /* grid-template-columns: repeat(7, 1fr); */
        gap: 5px;
        margin-top: 5px; 
    }

    .arrowLeft,
    .arrowRight {
        position: absolute;
        width: 30px;
        height: auto;
        background: rgba(255, 255, 255, 0);
        z-index: 1;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        top: calc(50% - 12px); 
    }

    .arrowLeft {
        left: 0; 
    }

    .arrowRight {
        right: 0; 
    }

    #varCont > div {
        display: flex; 
    }

    .zoom-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.4s ease;
        position: absolute; 
    }

    .single-image {
        opacity: .4;
        transition: opacity 0.3s ease; 
    }

    .single-image.selected {
        opacity: 1; 
    }

    @media screen and (max-width: 1024px) {
        #single {
            gap: 0;
            width: 100%;
            padding: 0 15px;
            margin-top: -25px;
            margin-left: auto;
            margin-right: auto;
            height: 30px;
        }
        .single-image {
            height: 2px;
            background: white!important;
            opacity: 1!important;
            z-index: 1;
        }
        .single-image.selected {
            background: black!important;
            z-index: 1!important;
        }
    }

.background-home-blog {
    background: url('https://einova.com/eu/wp-content/themes/storefront-child/assets/images/2023/background.jpg');
}

@media screen and (max-width: 1023px) {
    .bg-category-power-banks {
        background-image: url('https://einova.com/eu/wp-content/themes/storefront-child/assets/images/2024/bg-pb-max-lg.svg');
    }
}

@media screen and (max-width: 1279px) {
    .bg-category-power-banks {
        background-image: url('https://einova.com/eu/wp-content/themes/storefront-child/assets/images/2024/bg-pb-max-xl.svg');
    }
}

@media screen and (max-width: 1535px) {
    .bg-category-power-banks {
        background-image: url('https://einova.com/eu/wp-content/themes/storefront-child/assets/images/2024/bg-pb-max-2xl.svg');
    }
}

@media screen and (min-width: 1536px) {
    .bg-category-power-banks {
        background-image: url('https://einova.com/eu/wp-content/themes/storefront-child/assets/images/2024/bg-pb-2xl.svg');
    }
}

@media screen and (max-width: 1023px) {
    .bg-category-power-adapters {
        background-image: url('https://einova.com/eu/wp-content/themes/storefront-child/assets/images/2024/bg-pa-max-lg.svg');
    }
}

@media screen and (max-width: 1279px) {
    .bg-category-power-adapters {
        background-image: url('https://einova.com/eu/wp-content/themes/storefront-child/assets/images/2024/bg-pa-max-xl.svg');
    }
}

@media screen and (max-width: 1535px) {
    .bg-category-power-adapters {
        background-image: url('https://einova.com/eu/wp-content/themes/storefront-child/assets/images/2024/bg-pa-max-2xl.svg');
    }
}

@media screen and (min-width: 1536px) {
    .bg-category-power-adapters {
        background-image: url('https://einova.com/eu/wp-content/themes/storefront-child/assets/images/2024/bg-pa-2xl.svg');
    }
}

@media screen and (max-width: 1023px) {
    .bg-category-wireless-power {
        background-image: url('https://einova.com/eu/wp-content/themes/storefront-child/assets/images/2024/bg-wp-max-lg.svg');
    }
}

@media screen and (max-width: 1279px) {
    .bg-category-wireless-power {
        background-image: url('https://einova.com/eu/wp-content/themes/storefront-child/assets/images/2024/bg-wp-max-xl.svg');
    }
}

@media screen and (max-width: 1535px) {
    .bg-category-wireless-power {
        background-image: url('https://einova.com/eu/wp-content/themes/storefront-child/assets/images/2024/bg-wp-max-2xl.svg');
    }
}

@media screen and (min-width: 1536px) {
    .bg-category-wireless-power {
        background-image: url('https://einova.com/eu/wp-content/themes/storefront-child/assets/images/2024/bg-wp-2xl.svg');
    }
}

/* Format prices */
span.price ins,
.sottotitolo__card--prodotto ins {
    text-decoration: none;
}
del span.woocommerce-Price-amount {
    color: #bbbbbb;
}

/* Del text decoration line */
span.woocommerce-Price-amount.amount {
	position: relative;
}
span.price del span.woocommerce-Price-amount.amount bdi::after {
	content: '';
	width: 100%;
	height: 2px;
	position: absolute;
	display: block;
	position: absolute;
	top: 42%;
	left: 0;
	background: black;
}
del,
ins {
	text-decoration: none;
}

/* Button 'effettua ordine' checkout */
button.wc-block-components-button.wp-element-button.wc-block-components-checkout-place-order-button.wc-block-components-checkout-place-order-button--full-width,
button.wc-block-components-button.wp-element-button.wc-block-components-checkout-place-order-button {
    background: #0064E0;
    color: #fff;
}

/* Cart page (block) */
#secondary.widget-area,
.wp-block-woocommerce-cart-cross-sells-block {
    display: none;
}
#express-payment-method-amazon_payments_advanced_express {
    height: 55px;
}
.wc-block-components-button.wc-block-cart__submit-button {
    background-color: #0064E0;
    border-radius: 4px;
}
.wc-block-components-button.wc-block-cart__submit-button:hover {
    background-color: #0050B3;
    border-radius: 4px; 
}
.wp-block-woocommerce-empty-cart-block {
    height: 38vh;
    font-family: var(--medium);
}
.wp-block-buttons.wp-block-buttons-is-layout-flex {
    width: max-content;
    margin: 20px auto;
}
.wp-block-button__link {
    background-color: #0064E0;
    border-radius: 4px!important;
    font-weight: unset!important;
}
.wp-block-button__link:hover {
    background-color: #0050B3!important;
    border-radius: 4px!important; 
}
.wc-block-components-button__text {
    color: #fff!important;
}

/* Keep navigation width fix without layout shift */
@media screen and (min-width: 1280px) {
    nav.sottotitolo__card--prodotto {
        width: 924px;
    }
    nav.sottotitolo__card--prodotto ul:first-child {
        width: 711px;
    }
}
@media screen and (min-width: 1536px) {
    nav.sottotitolo__card--prodotto {
        width: 1208px;
    }
    nav.sottotitolo__card--prodotto ul:first-child {
        width: 840px;
    }
}

/* Type-C Tips product page slider */
.single-product div.product .woocommerce-product-gallery {
    margin-right: 0;
}
.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger::before {
    display: none;
}
.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
    background-color: transparent;

}
.woocommerce-product-gallery.woocommerce-product-gallery--with-images.woocommerce-product-gallery--columns-4.images,
.woocommerce-product-gallery.woocommerce-product-gallery--with-images.woocommerce-product-gallery--columns-4.images figure,
.woocommerce-product-gallery.woocommerce-product-gallery--with-images.woocommerce-product-gallery--columns-4.images figure div.woocommerce-product-gallery__image {
    height: 100%;
}
.woocommerce-product-gallery.woocommerce-product-gallery--with-images.woocommerce-product-gallery--columns-4.images figure div.woocommerce-product-gallery__image a img {
    height: 100%;
    object-fit: cover;
}
.single-product div.product .woocommerce-product-gallery div.woocommerce-product-gallery__image img {
    width: 100%;
}

/* Apple Pay / Google Pay button */
#wc-stripe-express-checkout-element {
    display: block;
}
@media screen and (max-width: 576px) {
    #wc-stripe-express-checkout-element {
        display: block;
        position: fixed;
        bottom: 110px;
        left: 0;
        z-index: 99;
        width: 100%;
        margin: 0;
    }
}

.ship-note {
    background: rgb(218,255,228);
    padding: 12px;
    margin-bottom: 3rem;
    border-radius: 4px;
}

@media screen and (max-width: 1279px) {
    .wp-block-woocommerce-checkout.alignwide.wc-block-checkout {
        margin-top: 0!important;
    }
}