/*
    Theme Name: Divi Child Theme MX
    Theme URI:
    Author: Rex Batongbakal
    Author URI: mxmemoxpress.com
    Description: A child theme template for Divi
    Version: 1.0.0
    Template: Divi
    */

    /* Custom CSS below this line only - DO NOT EDIT ABOVE THIS LINE */
      
      .parent-container {
  height: 100vh; /* or any specific height (e.g., 50vh) */
  width: 100%;  /* or any specific width */
  /*border: 1px solid black;*/ /* Optional: just for visualization */
}

.parent-container iframe {
  display: block; /* Removes extra default spacing */
  width: 100%;
  height: 100%;
  border: none; /* Removes default iframe border */
}
      .woocommerce div.product div.images .flex-control-thumbs li{
        margin-right:0px !important;
      }
      .skyro-widget--white{
        margin-top: 0px !important;
        
    margin-bottom: 40px!important;
      }

      .woocommerce-variation-price {
    display: none !important;
}



    /*CSS for Dropdown to Label*/
      .variable-options-group{
        display: flex;
      gap: 10px;
      /*margin: 10px 0;*/
      flex-wrap: wrap;
      }

      .variable-label{
        display: inline-flex;
      padding: 1vw !important;
      border: 1px solid rgba(0,0,0,.09);
      border-radius: 8px;
      cursor: pointer;
      transition: none;
      box-sizing: border-box;
      }

      .variable-option {
      margin: 0;
      }

      .variable-label.selected{
        background-color: black;
      color: #fff!important;
      }

      .variable-label:hover{
        border-color: #29337a;
      }

      .et_pb_wc_add_to_cart_0_tb_body.et_pb_module .et_pb_module_inner form.cart .variations tr{
      display: grid;
      gap: 1vh;
      padding-right: 0!important;
      padding-left: 0!important;
      }

      .woocommerce div.product form.cart .variations td{
        padding: 0 0 0 0 !important;
      max-width: none !important;
      line-height: 1.3em;
      }
  .woocommerce div.product form.cart .variations{
    margin-bottom: 0em;
  }

      .variable-options-group{
      display: flex;
      gap: 10px;
      margin: 0;
      flex-wrap: wrap;
      }

    /*icon for installment*/
      .ins{
      display: flex;
      gap: 5px;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-items: center;
      color: slategray;
      font-weight: 400;
      padding: 2px 2px;
      }

      .material-icons{
      font-size: 20px !important;
      margin-top: 0px;
      height: 18px;
      width: 18px;
      color: black;
      }

      #icon-installment{
      font-size: 24px !important;
        margin-top: 0px;
        color: black;
      }

    /*Specs module*/
      #feats{
      font-weight: 600;
      width: 100%;
      }
      #feats-sub{
      font-weight: 400 !important;
     line-height: 1.5em;
      }
      .table-container{
      border: 1px solid #DADCE0;
      border-radius: 8px;
      padding: 10px 33px;
      display: grid;
      align-items: self-start;
      margin-top: 1vh;
      gap: 2vw;
      }

    .container{
      width: 100% !important;
       }

      .container:before{
          content: "";
      position: absolute;
      top: 0;
      height: 100%;
      width: 0px !important;
      background-color: #e2e2e2;
      }

      #specs-container{
        display: inline-flex;
      align-items: flex-start;
      justify-content: flex-start;
      }

      #highlights-text{
        font-weight: 500;
      font-size: clamp(16px, calc(16px + (24 - 16) * ((100vw - 320px) / (1440 - 320))), 24px);
      color: #535757!important;
      padding: 0vh 0;
      }

      #specs{
      grid-template-columns: repeat(2, 1fr);
      gap: 2vw;
      border: 1px solid #DADCE0;
      border-radius: 8px;
      padding: 16px 33px;
      display: inline-grid;
      align-items: self-start;
      margin-top: 20px;
      width: 100%;
      }

      .features-block-images{
        border: 1px solid #DADCE0;
      border-radius: 8px;
      padding: 16px 33px!important;
      display: inline-block;
      align-items: center;
      margin-top: 20px;
      }

      .features-block-2mF{
      gap: 8vw;
      border: 1px solid #DADCE0;
      border-radius: 8px;
      padding: 16px 33px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 20px;
      }

      .features-blockTitle-hWK{
        max-width: 100%!important;
      width: 120px!important;
      font-size: large!important;
      line-height: 16px!important;
      color: #4C525C!important;
      font-weight: 700!important;
      text-align: left!important;
      padding: 2vw 0 10vw 0;
      }

      .features-blockContent-1PZ{
      width: 100%;
      line-height: 1em !important;
      color: #4C525C;
      }

      .features-highlights-3RV{
      display: grid;
      grid-template-columns: repeat(6, 1fr) !important;
      gap: 2vw;
      }
      .features-highlight-1V0{
      border-radius: 8PX;
      background: #f2f2f2;
      color: black;
      text-align: center;
      padding: .5vw .5vw;
      align-content: center;
      }


    /*Hide Caret in variation*/
      .et_pb_wc_add_to_cart form.cart .variations td.value span:after{
      display: none !important;
      }

    /*CSS Add to cart flickering*/
      .single_variation,
      .woocommerce-variation.single_variation {
      display: none !important;
      }


    /*Hide alert when add to cart*/
      .woocommerce-notices-wrapper{
      display:none !important;
      }

    /*Infinite Loading CSS*/
      .content {
      height: 100%;
      width: 100%;
      padding: 0;
      margin:0;
      text-align: center;
      display: none;
      }
      .noContent {
      color: #000 !important;
      background-color: transparent !important;
      pointer-events: none;
      }
      /*     .loader {
      width: 30px;
      height: 30px;
      border: 4px solid #ccc;
      border-top-color: #333;
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
      }

      @keyframes spin {
      to { transform: rotate(360deg); }
      } */


    /*.et_pb_wc_add_to_cart form.cart .variations td.value span:after{
    display: none !important;
    }*/


      /*Product gallery style*/
      /*mine-customization*/


      /*Wrapper for main image and navigation*/
        .fs-wrap {
        display: inline-flex;
        align-items: flex-end;
        justify-content: center;
        height: fit-content;
        }

      /* Thumbnail Container */
        .flex-control-thumbs {
        flex-basis: 56%;
        z-index: 2;
        height: 500px !important;
        margin-top: 0;
        }

      /* Main Image */
  /*      .woocommerce-product-gallery__image img {
      border-radius: 8px;
      background: #f9f9f9;
      width: 500px !important;
      height: 500px !important;
      object-fit: scale-down;
      object-position: center;
        }*/

      /* Thumbnails */
        .flex-control-thumbs li {
        margin-bottom: 24px !important;
        transition: margin-top 0.4s linear;
            background: #f9f9f9;
    border-width: 1px;
    border-color: #dadada;
    border-radius: 8px;
        }

        .flex-control-thumbs li img {
          /*border-radius: 4px;   
          border: 1px solid #ff9900;*/
          transition: transform 0.3s ease, border-color 0.3s ease;
          }

        .flex-img {
        border: 2px solid orange;
        }

      /* Layout: Move product gallery to left side */
        .woocommerce div.product div.images,
        .woocommerce-page div.product div.images {
        flex-direction: row-reverse;
        column-gap: 20px;
        }

      /* Gallery Structure */
        .woocommerce-product-gallery.woocommerce-product-gallery--with-images {
        display: flex;
        column-gap: 14px;
        margin-bottom: 0;
        justify-content: center;
        }

      /* Main Image Container */
        div.product div.images .flex-viewport {
        flex-basis: 100%;
        }

      /* Thumbnails wrapper */
        .et_pb_wc_images div.images ol.flex-control-thumbs {
        overflow: hidden !important;
        }


      /* Hidden default arrows */
        a.flex-next,
        a.flex-prev {
        visibility: hidden;
        }

        .woocommerce div.product div.images .flex-control-thumbs li{
        width: 75px;
        }


  /*PPOM CSS*/
    .mxuredescription, .ppom-wrapper select{
    font-size: clamp(14px, 1.3vw, 18px) !important;
    font-weight: 400 !important;
    line-height: 1.2em;
    }

      .ppom-wrapper{
        margin-top: 60px;
      }
  /*  Title label */
     .form-control-label{
      font-size: clamp(16px, 1.8vw, 20px);
      font-weight: 600;
      color: black;
      }

  /*Table Price*/
    .ppom-wrapper .table{
    font-size: clamp(14px, 1.3vw, 18px) !important;
    color: dimgray;
    }
    /*Table Text*/
    .ppom-wrapper .table th, .ppom-wrapper .table td{
    font-weight: 500;
    }

    .et-db #et-boc .et-l .et_pb_wc_price_0_tb_body .price{
    display: flex;
    gap: 1vw;
    align-items: center;
    }


    /*CSS cart number of items*/
      /* # WooCommerce Cart Icon*/
        .cart-contents {
        display: flex !important;
        }
        .cart-contents:before {
        /*      font-family: 'dashicons';
        font-weight: 900;
        content: '\f174' !important;
        font-size: 17px;
        color: #000000; */
        }
        .cart-contents:hover {
        text-decoration: none;
        }
        .cart-contents-count {
        position: absolute;
        top: 20px;
        left: 1px;
        transform: translateY(-105%) translateX(-225%);
        font-family: Arial, Helvetica, sans-serif;
        font-weight: normal;
        font-size: 12px;
        line-height: 16px;
        height: 18px;
        width: 18px;
        vertical-align: middle;
        text-align: center;
        color: #fff;
        background: rgba(60,162,125,0.75);
        border-radius: 50%;
        padding: 1px;
        }

    /*button see-more CSS*/
      #btn-seemore{
      padding-top: 10px;
      text-align: center;
      }
      /*See Full Description CSS*/
      a.stylespecs:link{
      color: #3ca27d;
      text-decoration: underline;
      text-underline-position: under;
      }

    /*Video CSS Really Simple Featured Video*/
      .fluid-width-video-wrapper {
      height: 500px !important;
        padding-top: 500px !important;
      }

      .woocommerce-product-gallery__wrapper .zoomImg, 
      .woocommerce-product-gallery__wrapper {
      pointer-events: auto !important; 
      }

      .woocommerce div.product div.images .woocommerce-product-gallery__image:nth-child(n+2) {
      pointer-events: none! important;
      }


      .rsfv-has-video video.rsfv-video,
      .rsfv-has-video iframe.rsfv-video {
      height: 500px !important;
      width: 100% !important;
      aspect-ratio: 16/9;
      }


    /*CSS for variations add to cart module*/

      .variable-label.disabled {
          position: relative;
      }

      .variable-label.disabled::after {
        content: "Not available";
        position: absolute;
        bottom: 110%;
        left: 50%;
        transform: translateX(-50%);
        background: #000;
        color: #fff;
        font-size: 12px;
        padding: 6px 8px;
        border-radius: 4px;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
        z-index: 999;
      }

      .variable-label.disabled::before {
        content: "";
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        border-width: 5px;
        border-style: solid;
        border-color: #000 transparent transparent transparent;
        opacity: 0;
        transition: opacity 0.2s ease;
      }

      .variable-label.disabled:hover::after,
      .variable-label.disabled:hover::before {
        opacity: 1;
      }
      .variable-label{
        font-size: clamp(14px, 1.3vw, 18px) !important;
        font-weight: 400 !important;
      }
        .variations tr{
      padding-top: 1vw;
      }

    
    .discount-badge{
      background: black !important;
      color: white !important;
      font-weight: 600 !important;
      border-radius: 8px !important;
      font-size: 14px !important;
      /* margin-left: 0px; */
      padding: 0 1vh !important;
      text-transform: capitalize !important;
    }



  /*style2 CSS*/
    /*woocommerce-product-gallery*/
      .fs-controls-wrap{
      display: flex;
      padding: 10px 0px;
      gap: 1vw;
      }
      ul.flex-direction-nav{
      position: relative;
      z-index: 99999;
      width: fit-content;
      list-style: none;
      display: flex;
      flex-direction: row;
      padding: 0 !important;
      margin: 0px;
      }
      ul.flex-direction-nav li a{
            color: black;
      display: flex;
      width: 20px;
      }
      a.flex-prev::before{
            visibility: visible;
      content: '\f30a';
      font-family: 'Font Awesome 5 Free';
      font-size: 20px;
      font-weight: bold;
      color: black;
        cursor: pointer;
      }
      a.flex-next::after{
            visibility: visible;
      content: '\f30b';
      font-family: 'Font Awesome 5 Free';
      font-size: 20px;
      font-weight: bold;
        cursor: pointer;
      }
      .wc-gallery-pagination{
            margin-left: 50px;
      font-family: sans-serif, "Inter";
      font-size: 15px;
      }
      .woocommerce div.product div.images .flex-control-thumbs{
            display: flex;
      margin-top: 0 !important;
      flex-basis: 100%;
      flex-direction: column;
      align-items: center;
      }
      .woocommerce div.product div.images.woocommerce-product-gallery{
      display: flex;
      flex-direction: column;
      }

      a.flex-next:active, a.flex-prev:active{
            background-color: #666;
      border-color: #666
      }    
      a.flex-next:hover, a.flex-prev:hover{
      background-color: #666;
      border-color: #666
      opacity: 50%;
      }
      .woocommerce-product-gallery__image.flex-active-slide{
      display: flex !important;
      justify-content: center;
      }
      .woocommerce-product-gallery__image img{
      border-radius: 8px;
      height: 500px !important;
      object-fit: contain;
      object-position: left;
      }

      .flex-viewport{
      height: 500px !important;
      background-color: #f9f9f9;
      }

      .wc-gallery-container{
        display: flex;
      }
      .wc-thumbs-wrap{
      padding: 0 1vw;
      }

      .discount-badge.hidden {
      display: none;
      }
      .pd-frame{
        height: 100vh;
      }
      #page-container{
        overflow: hidden !important;
      }
         



/**-------------------------------------
       * Tablet Styles < 820px
---------------------------------------**/

@media (min-width: 576px) and (max-width: 820px) {
  /*Video CSS Really Simple Featured Video*/
  .rsfv-iframe-wrapper{
  padding-bottom: 100% !important;
  }
  .features-highlights-3RV{
  display: grid;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 2vw;
  }

  .woocommerce-product-gallery__image.flex-active-slide{
  display: flex !important;
  justify-content: center !important;
  /*width: 768px  !important;*/
  border-right: solid;
  border-color: white;
  border-width: 10px;
  }

  ul.flex-direction-nav{
  position: relative; 
  z-index: 99999;
  width: fit-content;
  list-style: none;
  display: none !important;
  padding: 0 !important;
  margin: 0px;
  }

  .woocommerce div.product div.images .flex-control-thumbs{
  display: flex;
  margin-top: 0 !important;
  flex-basis: 100%;
  flex-direction: row !important;
  align-items: center;
  height: fit-content !important;
  gap: 2vw;
  width: 820px;
  }

  .wc-thumbs-wrap{
  padding: 3vw 0;
  width: -webkit-fill-available;
  }

  .woocommerce div.product div.images.woocommerce-product-gallery{
  display: flex;
  flex-direction: column;
  gap: 3vw;
  }

  .woocommerce div.product div.images .flex-control-thumbs li{
  width: 75px;
  margin-right: 0px !important;
  }

  .fs-controls-wrap{
  display: none;
  }

  .wc-gallery-container{
  display: flex;
  flex-direction: column-reverse;
  }

  .pd-frame{
  height: 100vh;
  }
        .parent-container {
  height: 120vh; /* or any specific height (e.g., 50vh) */
  width: 100%;  /* or any specific width */
  /*border: 1px solid black;*/ /* Optional: just for visualization */
}

.parent-container iframe {
  display: block; /* Removes extra default spacing */
  width: 100%;
  height: 100%;
  border: none; /* Removes default iframe border */
}


}



/**-------------------------------------
* Mobile Styles < 576px
---------------------------------------**/

@media screen and (max-width: 575px) {

  /*Video CSS Really Simple Featured Video*/
  .rsfv-iframe-wrapper{
    padding-bottom: 100% !important;
  }

  .rsfv-has-video video.rsfv-video,
  .rsfv-has-video iframe.rsfv-video {
    height: 350px !important;
    width: 100% !important;
    aspect-ratio: 1/1 !important;
  }

  .fluid-width-video-wrapper{
    height: 350px !important;
  }


  /*PPOM Mobile*/
  .mxuredescription, .ppom-wrapper select{
  font-size: clamp(16px, 1.8vw, 20px);
  }
  /*.form-control-label{
  font-size: clamp(16px, 1.8vw, 20px);
  }
  */

  /*Woo Product Images*/

  /*Gallery Structure Mobile*/
  .fs-wrap{
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: fit-content;
    width: 100%;
  }

    /*Arrows*/
  ul.flex-direction-nav{
    position: relative;
    z-index: 99999;
    width: fit-content;
    list-style: none;
    display: none;
    flex-direction: row;
    padding: 0 !important;
    margin: 0px;
  }

  /* Fix selector (.div → div) */
  .woocommerce div.product div.images, .woocommerce-page div.product div.images{
    flex-direction: column;
    column-gap: 20px;
  }

  /*Active Slide*/
  .woocommerce-product-gallery__image.flex-active-slide{
    display: flex !important;
    height: 350px !important;
    border-right: none !important;
    border-color: none !important;
    border-width: 0px;
  }

  /* Main Image Container */
  div.product div.images .flex-viewport {
    flex-basis: auto !important;
  }

  .flex-control-thumbs{
    flex-basis: 56%;
    z-index: 2;
    height: fit-content;
    margin-top: 0;
  }
  .flex-control-thumbs li{
    width: 20%;
    margin-bottom: 0px !important;
    transition: margin-top 0.4s linear;
  }

  .flex-viewport{
    height: 350px !important;
  }

  /* Main Image */
  .woocommerce-product-gallery__image img {
    border-radius: 8px;
    background: #f9f9f9;
    width: 350px !important;
    height: 350px !important;
    object-fit: scale-down;
    object-position: center;
  }

      
  /*    Specs for Mobile Layout */
  #specs{
    grid-template-columns: repeat(2, 1fr);
    gap: 2vw;
    border: 1px solid #DADCE0;
    border-radius: 8px;
    padding: 8px 16px;
    display: inline-grid;
    align-items: self-start;
    margin-top: 20px;
  }

  .features-highlights-3RV{
    display: grid;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2vw;
  }
  
  .features-block-2mF{    
    gap: 8vw;
    border: 1px solid #DADCE0;
    border-radius: 8px;
    padding: 16px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    
  }


  /*style 2*/

  .wc-gallery-container{
    display: flex;
    flex-direction: column;
    gap: 3vw;
  }

  .fs-controls-wrap{
    display: flex;
    padding: 10px 0px;
    gap: 1vw;
    justify-content: center;
  }

  .woocommerce div.product div.images .flex-control-thumbs{
    display: flex;
    margin-top: 0 !important;
    flex-basis: 100%;
    flex-direction: row !important;
    align-items: center;
    width: fit-content;
    gap: 6vw;
  }

  .wc-thumbs-wrap{
    padding: 0 1vw;
    width: 495px;
  }

  .woocommerce div.product div.images.woocommerce-product-gallery{
    display: flex;
    flex-direction: column;
    gap: 3vw;
  }

  .woocommerce div.product div.images .flex-control-thumbs li{
    margin: 0;
    width: 50px;
  }

 .pd-frame{
    height: 100vh;
  }

  .ppom-wrapper{
    margin-top: 0 !important;
  }

  .skyro-widget{
    height: 50px !important;
  }
  .skyro-widget--white{
    margin-bottom: 3vw !important;
    margin-top: 0px !important;
  }

  .et-db #et-boc .et-l .et_flex_column,.et-db #et-boc .et-l .et_flex_group,.et-db #et-boc .et-l .et_flex_module {
    --flex-direction: column;
    --horizontal-gap: var(--module-gutter);
    --vertical-gap: 0px;
  }
  
        .parent-container {
  height: 120vh; /* or any specific height (e.g., 50vh) */
  width: 100%;  /* or any specific width */
  /*border: 1px solid black;*/ /* Optional: just for visualization */
}

.parent-container iframe {
  display: block; /* Removes extra default spacing */
  width: 100%;
  height: 100%;
  border: none; /* Removes default iframe border */
}

}



      /**-------------------------------------
       * Desktop Styles < 992px
       ---------------------------------------**/

/*    @media (min-width: 992px) {


    }*/