/* DynamicBlocks - Frontend CSS
 *
 * @version     1.1
 *
 * Last Modified: 18-Dic-2023
 * Modified By: Esus
 * Modification: Added responsive grid layout with css grid + Separated Style Front-End Backend
 */

/* Esus - DYNAMIC BLOCKS GRID CSS*/
.dynamicblock-loop-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.dynamicblock-grid-container {
    gap: 20px;
}
.dynamicblock-grid-item {
    padding: 5px;
}
.dynamicblock-grid-item .woocommerce-loop-product__title, .dynamicblock-product-title, .dynamicblock-grid-item .product-link h2, .dynamicblock-grid-item .product-link h3, .dynamicblock-grid-item .product-link h4, .dynamicblock-permalink h2, .dynamicblock-permalink h3, .dynamicblock-permalink h4 {
    min-height: 50px;
    font-size: 18px;
    font-weight: 500;
    line-height: 25px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.dynamicblock-short-description {
	padding-top: 10px;
    line-height: 1.3em;
	margin-top: 10px;
	margin-bottom: 10px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
}

/*Accessories & Bundle Block Main Grid Container*/

.dynamicblock-accessories-grid-container, .dynamicblock-bundle-grid-container  {
    display: grid;
    grid-template-columns: 75% 25%;
}
.dynamicblock-accessories-products.dynamicblock-grid-container, .dynamicblock-bundle-products.dynamicblock-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.dynamicblock-accessories-main-product, .dynamicblock-bundle-sidebar {
    padding: 10px;
}
/*END ESUS*/

/*Dynamic Blocks Grid Items*/

.dynamicblock-related-item span.price {
    display: flex;
    width: 100%;
    padding-bottom: 10px;
}
.dynamicblock-related-item span.onsale {
    padding: 10px;
    top: 16px;
    right: 13px;
}
.dynamicblock-loop-wrapper.dynamicblock_hide_cart_btn .add_to_cart_button,
.dynamicblock-loop-wrapper.dynamicblock_hide_cart_btn .product_type_grouped,
.dynamicblock-loop-wrapper.dynamicblock_hide_cart_btn .product_type_external,
.dynamicblock-loop-wrapper.dynamicblock_hide_cart_btn .product_type_variable,
.dynamicblock-loop-wrapper.dynamicblock_hide_cart_btn .product_type_simple {
    display: none;
}

.dynamicblock-loop-wrapper.dynamicblock_hide_excerpt .dynamicblock-short-description {
    display: none;
}

.dynamicblock-block-products a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart:before {
    content: "\f174";
    color: #ffffff;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    font-family: 'dashicons';
    padding: 0;
    margin-right: 5px;
}
.dynamicblock-block-products .woocommerce-LoopProduct-link {
    text-decoration: none;
}

/* ACCESSORIES & BUNDLE BLOCKS FORM ITEMS */

form.cart.dynamicblock-accessories-product-cart-form {
    display: flex;
}
.woocommerce.woocommerce-page form.cart.dynamicblock-accessories-product-cart-form .quantity {
   width: 100%;
   margin-right: 5%;
}
.woocommerce.woocommerce-page .dynamicblock-bundle-item form.cart.dynamicblock-accessories-product-cart-form .quantity {
    width: 100%;
    margin-right: 0;
}
button.single_add_to_cart_button.button.dynamicblock-accessories-product-add-cart {
    width: 100%;
}
.woocommerce.woocommerce-page .dynamicblock-accessories-main-product button.single_add_to_cart_button[disabled], .woocommerce.woocommerce-page .dynamicblock-bundle-sidebar button.single_add_to_cart_button[disabled]  {
    display: none !important;
}
.woocommerce.woocommerce-page button.single_add_to_cart_button.dynamicblock-btn-purple {
    padding: 0 !important;
    min-height: 10px !important;
    line-height: 1.3;
    font-weight: 300;
    padding: 6px 15px !important;
}
.woocommerce.woocommerce-page form.cart.dynamicblock-accessories-product-cart-form input {
    border: none;
    padding: 6px 0;
    width: 100%;
    background: #F0F0F0;
    color: #000;
    position: relative;
    text-align: center;

}
.dynamicblock-accessories-main-price, .dynamicblock-bundle-main-price {
    padding-bottom: 15px;
    border-bottom: 2px solid #F9F9F9;
    text-align: right;
}
.dynamicblock-accessories-acc-price {
    padding: 15px 0;
    border-bottom: 2px solid #F9F9F9;
    text-align: right;
}
.dynamicblock-accessories-bundle-discount {
    padding: 15px 0;
    border-bottom: 2px solid #E3E3E3;
    text-align: right;
}
.dynamicblock-accessories-total-price {
    text-align: right;
    padding: 15px 0;
}
.dynamicblock-accessories-main-product p.dynamicblock-accessories-total, .dynamicblock-bundle-sidebar p.dynamicblock-accessories-total, .dynamicblock-bundle-sidebar p.dynamicblock-final-total{
    font-size: 30px;
}
.dynamicblock-accessories-main-product p.dynamicblock-accessories-savings, .dynamicblock-bundle-sidebar p.dynamicblock-accessories-savings {
    color: #FFB01A;
	margin-top: 15px;
	font-size: 20px;
}
.woocommerce.woocommerce-page .dynamicblock-accessories-total-price button.single_add_to_cart_button.dynamicblock-btn-purple {
    padding: 10px 10px !important;
}

/*OWL CAROUSEL & NAVIGATION*/
.dynamicblock-loop-wrapper.owl-carousel .owl-nav>div {
    visibility: visible;
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    pointer-events: visible;
    position: unset;
    width: 60px;
    height: 40px;
    justify-content: center;
	font-size: 20px;
}
.dynamicblock-loop-wrapper.owl-carousel .owl-nav {
    position: absolute;
    top: -60px;
    display: flex;
    right: 0;
}
.dynamicblock-loop-wrapper.owl-carousel .owl-nav>div:hover ,
.dynamicblock-loop-wrapper.owl-carousel .owl-nav>div.disabled:hover {
    color: #fff;
}
.dynamicblock-loop-wrapper.owl-carousel .owl-nav>div.disabled:hover {
    background-color: #dfc9ff !important;
}
.dynamicblock-loop-wrapper.owl-carousel  .owl-nav>div[class*=prev]:after, .wrap-loading-arrow>div[class*=prev]:after {
    content: " < ";
}
.dynamicblock-loop-wrapper.owl-carousel  .owl-nav>div[class*=next]:before, .wrap-loading-arrow>div[class*=next]:before {
     content: " > ";
 }
.dynamicblock-loop-wrapper.owl-carousel  .owl-nav>div[class*=prev]:before, .wrap-loading-arrow>div[class*=prev]:before,
.dynamicblock-loop-wrapper.owl-carousel  .owl-nav>div[class*=next]:after, .wrap-loading-arrow>div[class*=next]:after {
    font-size: 30px;
    font-weight: 500;
}

.dynamicblock-loop-wrapper .owl-dots {
    text-align: center;
}
.dynamicblock-loop-wrapper .owl-dots button.owl-dot.active,
.owl-dots button.owl-dot:hover {
    background: #020202;
}

.dynamicblock-loop-wrapper .owl-dots button.owl-dot {
    margin: 0 10px;
    border-radius: 100px;
    background: #3d3d3d;
}
.dynamicblock-loop-wrapper .owl-dots button.owl-dot span {
    width: 10px;
    height: 10px;
    display: block;
}
.dynamicblock-loop-wrapper .owl-nav {
    position: absolute;
    top: -70px;
    right: 0px;
}

.dynamicblock-loop-wrapper .owl-nav button.disabled span,.dynamicblock-loop-wrapper .owl-nav div.disabled span {
    color: #bbbbbb;
    cursor: unset !important;
}
.dynamicblock-loop-wrapper .owl-nav button.disabled:hover,.dynamicblock-loop-wrapper .owl-nav div.disabled:hover {
    background-color: #000000;
    cursor: unset;
}
.dynamicblock-loop-wrapper .owl-nav button:not(.disabled):hover,.dynamicblock-loop-wrapper .owl-nav div:not(.disabled):hover {
    background-color: #000000;
}
.dynamicblock-loop-wrapper .owl-nav button:hover span ,.dynamicblock-loop-wrapper .owl-nav div:hover span  {
    color: #fff;
}
.dynamicblock-loop-wrapper.dynamicblock-loop-carousel.owl-carousel .owl-nav>div, .show-arrow .wrap-loading-arrow>div {
    visibility: visible;
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    pointer-events: visible;
}
.dynamicblock-loop-wrapper .owl-nav button:hover,.dynamicblock-loop-wrapper .owl-nav div:hover  {
    background: #000000;
}
.dynamicblock-loop-wrapper .owl-nav span {
    font-size: 35px;
    height: 30px;
    width: 30px;
    display: inline-block;
}
.dynamicblock-loop-wrapper .owl-nav button:focus,.dynamicblock-loop-wrapper .owl-nav div:focus {
    outline: none !important;
}

.dynamicblock-loop-wrapper .no-js .owl-carousel,
.dynamicblock-loop-wrapper .owl-carousel.owl-loaded {
    display: block;
    margin-top: 30px !important;
}

.dynamicblock-loop-wrapper.dynamicblock-loop-carousel {
    position: unset;
}
.owl-carousel.dynamicblock-loop-carousel .owl-nav.disabled {
    display: block;
}
.wp-block-group.woocommerce.product.is-layout-flow.wp-block-group-is-layout-flow {
    overflow: hidden;
}

/*dynamic grid css start*/
.Mobilegridauto,
.Mobilegrid1,
.Tabletgrid1,
.Desktopgrid1 {
    grid-template-columns: repeat(1, 1fr) !important;
}
.Mobilegrid2,
.Tabletgrid2,
.Desktopgrid2 {
    grid-template-columns: repeat(2, 1fr) !important;
}
.Tabletgridauto,
.Tabletgrid3,
.Desktopgrid3 {
    grid-template-columns: repeat(3, 1fr) !important;
}
.Desktopgridauto,
.Tabletgrid4,
.Desktopgrid4 {
    grid-template-columns: repeat(4, 1fr) !important;
}
.Desktopgrid5 {
    grid-template-columns: repeat(5, 1fr);
}
.Desktopgrid6 {
    grid-template-columns: repeat(6, 1fr);
}
.Mobilegridauto .dynamicblock-grid-item,
.Tabletgridauto .dynamicblock-grid-item,
.Desktopgridauto .dynamicblock-grid-item,
.Mobilegrid1 .dynamicblock-grid-item,
.Mobilegrid2 .dynamicblock-grid-item,
.Tabletgrid1 .dynamicblock-grid-item,
.Tabletgrid2 .dynamicblock-grid-item,
.Tabletgrid3 .dynamicblock-grid-item,
.Tabletgrid4 .dynamicblock-grid-item,
.Desktopgrid1 .dynamicblock-grid-item,
.Desktopgrid2 .dynamicblock-grid-item,
.Desktopgrid3 .dynamicblock-grid-item,
.Desktopgrid4 .dynamicblock-grid-item,
.Desktopgrid5 .dynamicblock-grid-item,
.Desktopgrid6 .dynamicblock-grid-item {
    padding: 0 !important;
    overflow: hidden;
    width: 100%;
    display: block;
}
.Mobilegrid1 .dynamicblock-grid-item a,
.Mobilegrid1 .dynamicblock-grid-item a *,
.Mobilegrid2 .dynamicblock-grid-item a,
.Mobilegrid2 .dynamicblock-grid-item a *,
.Tabletgrid1 .dynamicblock-grid-item a,
.Tabletgrid1 .dynamicblock-grid-item a *,
.Tabletgrid2 .dynamicblock-grid-item a,
.Tabletgrid2 .dynamicblock-grid-item a *,
.Tabletgrid3 .dynamicblock-grid-item a,
.Tabletgrid3 .dynamicblock-grid-item a *,
.Tabletgrid4 .dynamicblock-grid-item a,
.Tabletgrid4 .dynamicblock-grid-item a *,
.Desktopgrid1 .dynamicblock-grid-item a,
.Desktopgrid1 .dynamicblock-grid-item a *,
.Desktopgrid2 .dynamicblock-grid-item a,
.Desktopgrid2 .dynamicblock-grid-item a *,
.Desktopgrid3 .dynamicblock-grid-item a,
.Desktopgrid3 .dynamicblock-grid-item a *,
.Desktopgrid4 .dynamicblock-grid-item a,
.Desktopgrid4 .dynamicblock-grid-item a *,
.Desktopgrid5 .dynamicblock-grid-item a,
.Desktopgrid5 .dynamicblock-grid-item a *,
.Desktopgrid6 .dynamicblock-grid-item a,
.Desktopgrid6 .dynamicblock-grid-item a * {
    width: 100%;
    display: block;
}
.dynamicblock-block-products .product a,
.dynamicblock-block-products .product a * {
    display: block;
    width: 100%;
}
/*dynamic grid css end*/

/* Esus - Aggiungi regole CSS specifiche per dispositivi mobili */
@media (max-width: 900px) {
    .dynamicblock-grid-container {
        grid-template-columns: repeat(2, 1fr);
    }
    .dynamicblock-accessories-grid-container, .dynamicblock-bundle-grid-container  {
        display: block;
    }

}

/*VISIBILITY SCREEN CONDITIONS*/
@media (min-width: 1025px){
    .hide_screen_desktop {
        display : none;
    }
}
@media (max-width: 1024px){
    .Desktopgrid6,
    .Desktopgrid5 {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    .Tabletgridauto {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}
/*@media (max-width: 1024px){*/
@media (min-width: 768px) and (max-width: 1024px){

    .hide_screen_tablet {
        display : none;
    }
}
@media (max-width: 767px){
    .hide_screen_mobile {
        display : none;
    }
    .Tabletgrid2,
    .Tabletgrid3,
    .Tabletgrid4,
    .Desktopgrid2,
    .Desktopgrid3,
    .Desktopgrid4,
    .Desktopgrid5,
    .Desktopgrid6 {
        grid-template-columns: repeat(1, 1fr) !important;
    }
    .Mobilegridauto {
        grid-template-columns: repeat(1, 1fr) !important;
    }
}