@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,700&display=swap');

body.jtdl_bd_widget_opened{
  max-height: 100vh;
  overflow:hidden;
}

/* animation */
@-webkit-keyframes flip {
  from { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
  to { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }
}

@keyframes flip {
  from { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
  to { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }
}

/*swiper*/
/*
.swiper-button-prev:after{font-family: "Raleway", sans-serif !important; content:"<" !important}
.swiper-button-next:after {
  font-family: "Raleway", sans-serif !important;content:">" !important
}
*/
.swiper-scrollbar-drag{ display:block !important}

/*confetti*/
.confetti-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Prevent interaction */
  overflow: hidden;
  z-index:100000000;
}
@keyframes confetti-fall {
  0% {
    transform: translateY(-100%) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(360deg);
    opacity: 0.8;
  }
}




/*widget*/
#jtdl_bd_widget_container {
  position: relative;
  text-align:center;
  /*border:1px solid #ff0000;*/
  display:none;
}
#jtdl_bd_widget_container_inner{ width:100%; max-width:1400px; margin:0px auto; padding:25px 0px 25px 0px; position:relative; min-height:30px;}

#jtdl_bd_widget_varaints_loading_spin img{ width:30px; height:auto;}

#jtdl_bd_widget_loading_container{
    position: fixed;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    background-color: rgba(255,255,255,1);
    z-index: 100000;
    display: flex;
    justify-content: center;
    align-items: center;

}
#jtdl_bd_widget_loading_container_inner{
    display: flex;
    justify-content: center;
    align-items: center;

}

#jtdl_bd_widget_components_loading_container{
  width:100%;
  height:100%;
  display: flex;
    justify-content: center;
    align-items: center;
  position:absolute;
  top:0px;
  left:0px;
  background-color: rgba(255,255,255,0.5);
    
}
#jtdl_bd_widget_components_loading_container img{ width:30px; height:auto;}

.jtdl_bd_widget_view_more_container{display:none; margin-bottom:15px; max-width: 380px;}
.jtdl_bd_widget_view_more_cta{ cursor:pointer; display: inline-block;
    padding: 5px 10px 5px 10px;
    border-radius: 5px;
    overflow: hidden;
    background-color: #000000;
    text-align: center;
    line-height: normal;
    color:#FFFFFF;
    white-space: nowrap;
    box-sizing:border-box;
    min-width:110px;
}
.jtdl_bd_widget_view_more_title{ flex: 1 1 auto}
.jtdl_bd_widget_view_more_container h1,
.jtdl_bd_widget_view_more_container h2,
.jtdl_bd_widget_view_more_container h3,
.jtdl_bd_widget_view_more_container h4,
.jtdl_bd_widget_view_more_container h5,
.jtdl_bd_widget_view_more_container h6 { margin:0px 0px 0px 0px;}
.jtdl_bd_widget_view_more_container_inner{ display:flex; padding:10px 20px 10px 20px; gap:15px;justify-content: center;align-items:center; border-radius:10px; overflow: hidden}
.jtdl_bd_widget_view_more_container.disabled{ display:none !important;}

#jtdl_bd_widget_close{ display:none; width:20px; height:20px; position:absolute; top:15px; right:15px; cursor:pointer; z-index:100000}
#jtdl_bd_widget_container #jtdl_bd_widget_content_container{ display:none;}
#jtdl_bd_widget_content_container #jtdl_bd_widget_content_container_inner{ display:block; width:100%;background-color:#ffffff; box-sizing: border-box; padding:0px 10px 0px 10px; position:relative; margin:0px auto;}
#jtdl_bd_widget_container #jtdl_bd_widget_content_container.opened{ display:block;}

#jtdl_bd_widget_container input.error{ border:1px solid #ff0000}

/*widget button*/
.jtdl_bd_widget_button{ display:inline-block; padding:5px 15px; text-align:center; background-color:#000000; color:#ffffff; border-radius:10px; font-weight:bold}


/* Custom Select wrapper */
.bundleItem .jtdl_bd_select {
  position: relative;
  display: flex;
  width: min(14rem, 90vw);
  /*border-radius: 0.25rem;*/
  overflow: hidden;
  border:1px solid #cccccc;
  width: 100%;
  select {
    flex: 1;
    padding: 6px 10px 6px 10px;
    cursor: pointer;
  }
  &::after {
    content: "\25BC";
    position: absolute;
    right: 0rem;
    top: 0rem;
    width:20px; height:100%;
    background-color: #ffffff;
    transition: 0.25s all ease;
    pointer-events: none;
    font-size:10px;
    justify-content: center;
    align-items: center;
    display: flex;
  }
  &:hover::after {
    color: #f39c12;
    animation: bounce 0.5s infinite;
  }
}

@keyframes bounce {
  25% {
    transform: translatey(3px);
  }
  75% {
    transform: translatey(-3px);
  }
}

/* bundle info*/
#jtdl_bd_widget_info_container{ padding-bottom:20px;}
#jtdl_bd_widget_info_title{ text-align:center; margin-bottom:0.5rem; width:100%; position:relative}
#jtdl_bd_widget_info_title:before{ content:" "; width:100%; height:1px; background: rgb(0,0,0);
background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 20%, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%); overflow:hidden; position: absolute; top:calc( 50% - 1px); left:0px;z-index:0}
#jtdl_bd_widget_info_title__text{ display:inline-block; margin:0px auto; padding:0px 15px; background-color:#FFFFFF; position: relative; z-index:2; font-size: 140%;}
#jtdl_bd_widget_info_title__text:empty { display:none}
#jtdl_bd_widget_info_desc{ text-align:center}

/*bundle picker*/
#jtdl_bd_widget_bundle_picker_container{position: relative}
#jtdl_bd_widget_bundle_picker_container_inner{position: relative; display: grid; gap: 30px; grid-template-columns: calc(100% - 380px) 350px; }


/*my bundles container*/
#jtdl_bd_widget_my_bundle_container{ text-align: left; position: relative;  z-index: 1}
#jtdl_bd_widget_my_bundle_container_inner{ position:sticky; top:30px; box-sizing: border-box;border:1px solid #cccccc;background-color: #ffffff; z-index: 1}
#jtdl_bd_widget_my_bundle_container_inner>div{ padding:15px; border-bottom:1px solid #cccccc;}
#jtdl_bd_widget_my_bundle_container_inner>div:last-child{ border-bottom:0px solid #ffffff;}
#jtdl_bd_widget_my_bundle_header{ text-align:left;}
#my_bundle_list_close{ display:none; width:30px; height:30px; position:absolute; top:15px; right:10px; cursor:pointer; z-index:100000}
#jtdl_bd_widget_my_bundle_error{ display:none; color:#ff0000; padding-bottom:10px; font-size:12px;}
#jtdl_bd_widget_my_bundle_content_container{ 
  display:flex; 
  flex-direction:column; 
  gap: 15px;}
#jtdl_bd_widget_my_bundle_box{  }
#myBundleCount{ position:absolute; color:#ffffff; font-size:10px; line-height:10px; padding:2px; width:15px; height:15px; right:0px; bottom:-3px; border-radius:50%; background-color:#000000;}
#my_bundle_list_container{ 
  width: 100%;
  display:block;
  background-color:#ffffff;}
#my_bundle_list_container.open{display:block}
#my_bundle_list_container_inner{ 
  position: relative; 
  box-sizing: border-box; 
}
#myBundleList{ position:relative; width:100%; overflow-y:scroll; }
#myBundleList_inner{ position:relative; width:100%; box-sizing: border-box;border-bottom:1px solid #cccccc; }
#myBundleList_inner #myBundleItemsHeader{ display:flex; flex-direction: row; align-items: center; }
#myBundleList_inner #myBundleItemsHeader h3{ width:100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; padding:0px; margin-bottom: 10px;margin-top: 5px;}
#myBundleList_inner #myBundleItemsSubTotal{ width:30%; text-align: right; line-height: 90%;}
#myBundleList_inner #myBundleItemsSubTotal .original_price{ display: block}
#myBundleList_inner #myBundleItemsSubTotal .sale_price{display: none}
#myBundleList_inner.bundle_complete #myBundleItemsSubTotal .original_price{font-size:80%; opacity: 0.8; display: block; text-decoration:line-through }
#myBundleList_inner.bundle_complete #myBundleItemsSubTotal .sale_price{ display: block;}

#myBundleList_inner #myOptionalItemsHeader h3{ width:100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; padding:0px; margin-bottom: 10px;margin-top: 5px;}

#myBundleList_inner #myBundleItems{ padding-left:15px;}
#myBundleList_inner #myOptionalItems{ padding-left:15px;}
#myBundleList_inner #myOptionalItemsContainer{ display: none}
#myBundleList_inner #myOptionalItemsContainer:has(.myBundleItem){ display:block}
#myBundleList_inner .myBundleItem{ display: flex; flex-wrap:nowrap; justify-content:left; align-items:center; gap:10px; margin-bottom:10px;}
#myBundleList_inner .myBundleSet h4{ margin-bottom: 5px;margin-top: 5px;}
#myBundleList_inner .myBundleSet h4 small{ font-size:12px;}
#myBundleList_inner .myBundleSet .myBundleItem{ /*margin-left:10px;*/}
#myBundleList_inner .myBundleSet .myBundleItem.small{ font-size:12px;}
#myBundleList_inner .myBundleItem .item_img{ width:40px;  min-width:40px; height:40px; overflow:hidden}
#myBundleList_inner .myBundleItem .item_img img{ width:100%; height:100%; object-fit:cover}
#myBundleList_inner .myBundleItem .item_qty{ width:30px;  min-width:30px;overflow:hidden; text-align:right}
#myBundleList_inner .myBundleItem .item_price{ width:60px;  min-width:60px;overflow:hidden; text-align:right; display: none}
#myBundleList_inner .myBundleItem .item_price span.original_price{ display: block}
#myBundleList_inner .myBundleItem .item_price span.sale_price{ display: none}
#myBundleList_inner .myBundleItem .item_price:has(.original_price) {}

#myBundleList_inner .myBundleItem.optional .item_price{ display: block}
#myBundleList_inner .myBundleItem.optional .item_qty{ display:none}

#myBundleList_inner.bundle_complete .myBundleItem.optional .item_price span.original_price{ font-size:80%; opacity: 0.8; display: block; text-decoration: line-through}
#myBundleList_inner.bundle_complete .myBundleItem.optional .item_price span.sale_price{ display: block}
#myBundleList_inner.bundle_complete .myBundleItem.optional .item_price:has(.original_price) {line-height: 90%}


#myBundleList_inner .myBundleItem .item_title{ width:100%;}
#myBundleList_inner .myBundleItem .item_act{font-family: "Raleway", sans-serif !important; width:10px; min-width:10px; overflow:hidden; font-size:14px; text-align:right; cursor: pointer}
#myBundleList_inner .myBundleItem .item_act:hover{ /*text-decoration:underline;*/ font-weight: bold;}
#myBundleList_inner .myBundleItem .item_title{ width:auto; overflow:hidden; white-space:nowrap; text-overflow: ellipsis; flex:1 1 auto; text-align:left; line-height:18px;}

#myBundleList_inner .myBundleItem .item_title .variant_title{ font-size:12px;}
#myBundleLite{ display:block;}
#myBundleRemark{ padding:5px 0px; text-align:center; font-size:12px;}
#myBundleExpand{display:none;width:40px; height: 40px;}
#myBundleExpand svg{ width:100%; height: 100%;}
#myBundleTotal{ text-align: right; padding:5px 0px 5px 0px; display:flex; flex-direction: column; gap:2px; align-items: end; justify-content: end}
#myBundleTotal .subtotal{/*text-decoration: line-through;*/ opacity: 0.7; font-size:90%; display: flex; flex-direction: row-reverse; gap:5px; display: none;}
#myBundleTotal .subtotal::after{ content:"Subtotal: "}
#myBundleTotal .discount{font-size:90%; display: flex; flex-direction: row-reverse; gap:5px; display: none;}
#myBundleTotal .discount::after{ content:"Discount: ";}
#myBundleTotal .total{font-weight: bold; display: flex; flex-direction: row-reverse; gap:5px; font-size:110%;}
#myBundleTotal .total::after{ content:"Total: "}

/*expanded*/
#jtdl_bd_widget_my_bundle_container.expended #myBundleList{ }

/*bundle container*/
#jtdl_bd_widget_components_container{ box-sizing: border-box; overflow-x: visible; overflow-y: visible; margin:0px auto; width: 100%;}
#jtdl_bd_widget_components_container #jtdl_bd_widget_components_container_inner{ display:grid; grid-template-columns: 1fr 1fr 1fr; column-gap: 20px; row-gap: 20px; justify-items: center; }
#jtdl_bd_widget_components_container.dynamic{ }
#jtdl_bd_widget_components_container{ overflow-y:visible;}


/*bundle item*/
.bundleItem{ 
  overflow:hidden; 
  width:100%; 
  max-width: 500px; 
  position:relative; 
  border:1px solid rgba(0,0,0,0.05); 
  border-radius: 10px;
  -webkit-box-shadow:0px 0px 10px 1px rgba(0,0,0,0.05) ;
  -moz-box-shadow:0px 0px 10px 1px rgba(0,0,0,0.05) ;
  box-shadow:0px 0px 10px 1px rgba(0,0,0,0.05); 
  transition: all 0.2s;
  box-sizing: border-box;
}
.bundleItem:hover{
  -webkit-box-shadow:0px 0px 10px 3px rgba(0,0,0,0.1);
  -moz-box-shadow:0px 0px 10px 3px rgba(0,0,0,0.1);
  box-shadow:0px 0px 10px 3px rgba(0,0,0,0.1);
}
.bundleItemInner{ 
  position:relative; 
  display:flex; 
  flex-direction:column; 
  justify-content: start; 
  align-items:stretch; 
  flex-wrap: nowrap; 
  box-sizing: border-box; 
  padding:0px;
  padding-bottom:45px;
  height: 100%;
}
.bundleItem_img { width:100%; overflow: hidden; position:relative; box-sizing: border-box;}
.bundleItem_img:before{ content:" "; display:block; width:100%; padding-top:75%}
.bundleItem_img img{ display:block; position:absolute; top:0px; left:0px; width:100%; height:100%; object-fit: cover;/* object-fit: contain; */}
.bundleItem_info{ 
  width:100%; 
  box-sizing: border-box; 
  display:flex; 
  flex-direction:column; 
  align-items:start; 
  justify-content:start; 
  gap:5px;
  margin-top:10px;
}
.bundleItem_info>div{ padding:0px 12px; width:100%; text-align: left;}
.bundleItem_info_title{font-weight:bold; line-height: 25px; text-overflow: ellipsis; white-space:nowrap; overflow: hidden; position: relative}
.single_variant .bundleItem_info_title{white-space:wrap;max-height:48px;}
.single_variant .bundleItem_info_title::after{ content: " "; position: absolute; left:0px; top:32px; height:16px; width:100%;background: #ffffff;
background: linear-gradient(360deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.6) 40%, rgba(255, 255, 255, 0) 100%); opacity: 0}
.bundleItem_info_variants{ display:flex; flex-direction: row; gap:5px; width:45%; min-width: 45%;}
.bundleItem_info_variants label{ display:none}
.bundleItem_quantity{ display:flex; flex-wrap:nowrap; 
  border-top:1px solid rgba(0,0,0,0.05);  width:100%; padding:0px !important;
                      position: absolute; bottom:0px;
                    }

.bundleItem_quantity .bundleItem_info_price{ font-weight:bold; width:calc(100% - 35px); text-align:center; height:35px; display: flex; justify-content: center; align-items: center; gap:10px;}
.bundleItem_quantity .bundleItem_info_price .original{/*text-decoration: line-through; opacity: 0.6*/ display: none;}
.bundleItem_quantity .bundleItem_info_price .sale{ display:block}
.no-discount .bundleItem_quantity .bundleItem_info_price{text-decoration: none;}
.fixed:not(.no-discount) .bundleItem_info_price .original{text-decoration: line-through; opacity: 0.6}
.bundleItem.compare_at_price .bundleItem_quantity .bundleItem_info_price .original{/*text-decoration: line-through; opacity: 0.6*/ display: block;}
.bundleItem.compare_at_price .bundleItem_quantity .bundleItem_info_price .sale{ display:none}


.bundleItem_quantity label{ display:none}
.bundleItem_quantity .jtdl_bd_quantity-input{display:none; flex-wrap:nowrap; 
  overflow: hidden;
  border:1px solid #cccccc;
  position: relative;
  }
.bundleItem_quantity .jtdl_bd_quantity-input.disabled{ border:0px solid #ffffff;}
.bundleItem_quantity .jtdl_bd_quantity-input button{ background-color:transparent; padding:0px; width:20px; height:max(20px, 100%); border:0px solid #ffffff; padding:5px; display:none}
.jtdl_bd_quantity-input .error{ border:1px solid #ff0000;}  
.bundleItem_add_to_cart{ display:none; width:35px;min-width: 35px; height:35px; overflow: hidden}
.bundleItem_add_to_cart .jtdl_bd_widget_button{ width:100%; height:100%; border-radius: 0px !important; text-align: center; padding:0px !important; font-size:20px; font-weight: bold;}
.bundleItem_add_to_cart .jtdl_bd_widget_button:hover{ transform: scale(1.1);}

.bundleItem input{
  max-width:80px;
  width:100%;
  border:0px solid #cccccc;
  padding: 0.5em;
  text-align:left;
  background-color: transparent;
  box-sizing: border-box;
}
.bundleItem select {
  appearance: none;
  border: 0;
  outline: 0;
  background: none;
  color: inherit;
  box-shadow: none;
}
.bundleItem select::-ms-expand {
  display: none;
}



#jtdl_bd_widget_components_container .bundleItem:nth-of-type(odd){
  justify-self: start;
}
#jtdl_bd_widget_components_container .bundleItem:nth-of-type(even){
  justify-self: end;
}
@media only screen and (max-width: 1024px) {
  #jtdl_bd_widget_components_container .bundleItem:nth-of-type(odd){
  justify-self: center;
}
#jtdl_bd_widget_components_container .bundleItem:nth-of-type(even){
  justify-self: center;
}
}


/*add to cart button*/
.jtdl_bd_widget_button{ width:100%; cursor: pointer; position: relative; overflow: hidden; background-color:#000000; color:#ffffff; border-radius:0px; border:0px solid #ffffff; padding:5px 10px 5px 0px; text-align:center;transition: transform .2s ease;}
.jtdl_bd_widget_button.disabled{ opacity: 0.5;}
.jtdl_bd_widget_button:hover{ transform: scale(1.05);}
.jtdl_bd_widget_button.disabled:hover{ transform: scale(1);}
.jtdl_bd_widget_button label{opacity: 1;}
.jtdl_bd_widget_button .img{opacity: 0; position: absolute; width: 40%; top:0px; left: 30%;}
.jtdl_bd_widget_button .img img{ height: 40px; width: auto;}
.jtdl_bd_widget_button.loading label{opacity: 0;}
.jtdl_bd_widget_button.loading .img{opacity: 1;}


/*out of stock*/
.bundleItem_add_to_cart .jtdl_bd_widget_button.out-of-stock{ opacity: 0.5}
.bundleItem.out-of-stock .bundleItem_img img{ opacity: 0.5}
.bundleItem.out-of-stock::after{ content: "Out Of Stock"; position: absolute; top:10px; left: -1px; background-color: #000000; color:#ffffff; padding:3px; font-size:10px; line-height: 12px; border-top-right-radius: 3px;border-bottom-right-radius: 3px;   }
#jtdl_bd_widget_addtocart_btn.out-of-stock{opacity: 0.5}
#jtdl_bd_widget_addtocart_btn label.out-of-stock{display:none}
#jtdl_bd_widget_addtocart_btn.out-of-stock label{display: none}
#jtdl_bd_widget_addtocart_btn.out-of-stock label.out-of-stock{display: block}

#jtdl_bd_widget_addtocart_btn label.member-only{display:none}
#jtdl_bd_widget_addtocart_btn.member-only label{display: none}
#jtdl_bd_widget_addtocart_btn.member-only label.member-only{display: block}

/*popup*/

#jtdl_bd_widget_content_container.popup #jtdl_bd_widget_components_container{overflow-y:scroll;}
#jtdl_bd_widget_content_container.popup #jtdl_bd_widget_content_container_inner{ width:96%; min-width: auto; max-height:90%; min-height: 80%; box-sizing: border-box; padding:30px; overflow: hidden;}

#jtdl_bd_widget_content_container.popup #jtdl_bd_widget_content_container_inner #jtdl_bd_widget_close{ display:block;}
#jtdl_bd_widget_container.popup #jtdl_bd_widget_view_more_container{ max-width:96%; margin:0px auto;}
#jtdl_bd_widget_content_container.popup{ display:none; position:fixed; width:100%; height:100%; top:0px; left:0px; background-color:rgba(0,0,0,0.9);z-index:100000; }
#jtdl_bd_widget_content_container.popup.opened{ display:flex; justify-content:center; align-items:center;}


@media only screen and (max-width: 1200px) {
  #jtdl_bd_widget_components_container #jtdl_bd_widget_components_container_inner{ grid-template-columns: 1fr 1fr; }
}
@media only screen and (max-width: 1024px) {
  #jtdl_bd_widget_bundle_picker_container_inner{display: flex; gap: 30px; flex-direction: column;}  
  #jtdl_bd_widget_components_container_inner{ grid-template-columns: 1fr;column-gap: 0px;}
  .popup #jtdl_bd_widget_components_container_inner{padding-bottom:200px;}
  #jtdl_bd_widget_content_container #jtdl_bd_widget_content_container_inner{ padding:0px 0px 0px 0px;}
  #jtdl_bd_widget_components_container{ padding-left:0px; padding-right:0px;}
  .bundleItem_info{ gap:5px !important;}
  #jtdl_bd_widget_content_container.popup #jtdl_bd_widget_content_container_inner{ padding:20px 15px;}
  #jtdl_bd_widget_content_container.popup #jtdl_bd_widget_my_bundle_container{ position: absolute; width:calc(100% + 30px); left:-15px; bottom:-20px;}
  #jtdl_bd_widget_my_bundle_container{ position: sticky; bottom: 0px; width:100%;}
  #jtdl_bd_widget_my_bundle_container_inner{ border-bottom-right-radius: 0px !important; border-bottom-left-radius: 0px !important; /*border-bottom:0px !important; border-left:0px !important;border-right:0px !important;*/ }
  #jtdl_bd_widget_my_bundle_header{ display: none;}
  #myBundleList{ display:none}
  #myBundleLite{ display:flex; flex-direction: row-reverse; align-items: center; gap: 20px;}
  #myBundleExpand{ display:block;}
  #myBundleRemark{ width:100%;}

  #myBundleTotal{}
  #myBundleTotal .subtotal{ display:none}
  #myBundleTotal .discount{ display:none}


    
  /*expanded*/
  #jtdl_bd_widget_my_bundle_container.expanded{ z-index: 10;}
  #jtdl_bd_widget_my_bundle_container.expanded #jtdl_bd_widget_my_bundle_header{ display:block;}
  #jtdl_bd_widget_my_bundle_container.expanded #myBundleList{ display:block;}
  #jtdl_bd_widget_my_bundle_container.expanded #myBundleExpand{ display:none}
  #jtdl_bd_widget_my_bundle_container.expanded #my_bundle_list_close{ display:block;}
  #jtdl_bd_widget_my_bundle_container.expanded::before{ content: " "; display:block; width:100%; height:1000px; position: absolute; left:0px; bottom:0px; background-color: rgba(0,0,0,0.8)}
  
  #jtdl_bd_widget_my_bundle_container.expanded #myBundleTotal .subtotal{ display:flex}
  #jtdl_bd_widget_my_bundle_container.expanded #myBundleTotal .discount{ display:flex}
}

/*narrow */
/*
.narrow #jtdl_bd_widget_content_container #jtdl_bd_widget_content_container_inner{ padding:0px 0px 0px 0px;}
.narrow #jtdl_bd_widget_components_container{ padding-left:0px; padding-right:0px;}
.narrow #jtdl_bd_widget_components_container #jtdl_bd_widget_components_container_inner{ display:flex; flex-direction: column;}
.narrow .bundleItem_info{ gap:5px !important;}
.narrow #jtdl_bd_widget_bundle_picker_container_inner{display: flex; gap: 30px; flex-direction: column;}  
.narrow #jtdl_bd_widget_my_bundle_container{ position: sticky; bottom: 0px; width:100%;}
.narrow #jtdl_bd_widget_my_bundle_container_inner{ border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; }
*/



.narrow #jtdl_bd_widget_bundle_picker_container_inner{display: flex; gap: 30px; flex-direction: column;}  
.narrow #jtdl_bd_widget_components_container_inner{ grid-template-columns: 1fr;column-gap: 0px;}
.narrow #jtdl_bd_widget_content_container #jtdl_bd_widget_content_container_inner{ padding:0px 0px 0px 0px;}
.narrow #jtdl_bd_widget_components_container{ padding-left:0px; padding-right:0px;}
.narrow .bundleItem_info{ gap:5px !important;}
.narrow #jtdl_bd_widget_content_container.popup #jtdl_bd_widget_content_container_inner{ padding:20px 15px;}
.narrow #jtdl_bd_widget_content_container.popup #jtdl_bd_widget_my_bundle_container{ position: absolute; width:calc(100% + 30px); left:-15px; bottom:-20px;}
.narrow #jtdl_bd_widget_my_bundle_container{ position: sticky; bottom: 0px; width:100%;}
.narrow #jtdl_bd_widget_my_bundle_container_inner{ border-bottom-right-radius: 0px !important; border-bottom-left-radius: 0px !important; /*border-bottom:0px !important; border-left:0px !important;border-right:0px !important;*/ }
.narrow #jtdl_bd_widget_my_bundle_header{ display: none;}
.narrow #myBundleList{ display:none}
.narrow #myBundleLite{ display:flex; flex-direction: row-reverse; align-items: center; gap: 20px;}
.narrow #myBundleExpand{ display:block;}
.narrow #myBundleRemark{ width:100%;}

.narrow #myBundleTotal{}
.narrow #myBundleTotal .subtotal{ display:none}
.narrow #myBundleTotal .discount{ display:none}


  
/*expanded*/
.narrow #jtdl_bd_widget_my_bundle_container.expanded{ z-index: 10;}
.narrow #jtdl_bd_widget_my_bundle_container.expanded #jtdl_bd_widget_my_bundle_header{ display:block;}
.narrow #jtdl_bd_widget_my_bundle_container.expanded #myBundleList{ display:block;}
.narrow #jtdl_bd_widget_my_bundle_container.expanded #myBundleExpand{ display:none}
.narrow #jtdl_bd_widget_my_bundle_container.expanded #my_bundle_list_close{ display:block;}
.narrow #jtdl_bd_widget_my_bundle_container.expanded::before{ content: " "; display:block; width:100%; height:1000px; position: absolute; left:0px; bottom:0px; background-color: rgba(0,0,0,0.8)}

.narrow #jtdl_bd_widget_my_bundle_container.expanded #myBundleTotal .subtotal{ display:flex}
.narrow #jtdl_bd_widget_my_bundle_container.expanded #myBundleTotal .discount{ display:flex}



/*my bundle box*/


/* fixed bundle*/
#jtdl_bd_widget_content_container.fixed #jtdl_bd_widget_my_bundle_content{display:none;}
#jtdl_bd_widget_content_container.fixed #jtdl_bd_widget_bundle_picker_container_inner{display: flex; gap: 30px; flex-direction: column;}
#jtdl_bd_widget_content_container.fixed #jtdl_bd_widget_my_bundle_header{ display:none}
#jtdl_bd_widget_content_container.fixed #jtdl_bd_widget_my_bundle_container_inner{ 
  border:0px solid #ffffff !important;
    -webkit-box-shadow:0px 0px 0px 0px #ffffff !important;
    -moz-box-shadow:0px 0px 0px 0px  #ffffff !important;
    box-shadow:0px 0px 0px 0px  #ffffff !important; 
}
#jtdl_bd_widget_content_container.fixed .jtdl_bd_quantity-input{ display:block;width:35px;min-width: 35px; height:35px; overflow: hidden; font-weight: bold; line-height: 35px; text-align: center;}
#jtdl_bd_widget_content_container.fixed .jtdl_bd_quantity-input .qty{ display:block; line-height: 35px; text-align: center; font-weight: bold;}
#jtdl_bd_widget_content_container.fixed .jtdl_bd_quantity-input input{ display:none}

/* dynamic bundle*/
#jtdl_bd_widget_content_container.dynamic .bundleItem_add_to_cart{ display:block}
#jtdl_bd_widget_content_container.dynamic #jtdl_bd_widget_my_bundle_content{display:block;}


/*set*/
#jtdl_bd_widget_components_container.set #jtdl_bd_widget_components_container_inner{ display:block;}
#jtdl_bd_widget_components_container.set #jtdl_bd_widget_components_container_inner .set_option_container{ width:100%;}
#jtdl_bd_widget_components_container.set #jtdl_bd_widget_components_container_inner .set_option_container_inner{ width:100%;}
#jtdl_bd_widget_components_container.set #jtdl_bd_widget_components_container_inner .set_components_container{ width:100%; padding-bottom:10px; margin-top: 10px;}
#jtdl_bd_widget_components_container.set #jtdl_bd_widget_components_container_inner .set_components_container_inner{ width:100%; display: flex; }
#jtdl_bd_widget_components_container.set #jtdl_bd_widget_components_container_inner .setOptionTitle h3{ margin-bottom: 5px;}
#jtdl_bd_widget_content_container.set .bundleItem_add_to_cart{ display:block}


/*optaional*/
 
#jtdl_bd_widget_components_container #jtdl_bd_widget_optional_components_container_inner{ display:block; margin-top: 20px;}
#jtdl_bd_widget_components_container #jtdl_bd_widget_optional_components_container_inner .optional_container{ width:100%;}
#jtdl_bd_widget_components_container #jtdl_bd_widget_optional_components_container_inner .optional_container_inner{ width:100%;}
#jtdl_bd_widget_components_container #jtdl_bd_widget_optional_components_container_inner .optional_components_container{ width:100%; padding-bottom:10px; margin-top: 10px;}
#jtdl_bd_widget_components_container #jtdl_bd_widget_optional_components_container_inner .optional_components_container_inner{ width:100%; 
                                                                                                                                 display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 20px;
    row-gap: 20px;
    justify-items: center;}
#jtdl_bd_widget_components_container #jtdl_bd_widget_optional_components_container_inner .optional_desc{ margin-bottom: 5px;}

#jtdl_bd_widget_components_container #jtdl_bd_widget_optional_components_container_inner .optional_title{ text-align:center; margin-bottom:0.5rem; width:100%; position:relative}
#jtdl_bd_widget_components_container #jtdl_bd_widget_optional_components_container_inner .optional_title:before{ content:" "; width:100%; height:1px; background: rgb(0,0,0);
background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 20%, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%); overflow:hidden; position: absolute; top:calc( 50% - 1px); left:0px;z-index:0}


#jtdl_bd_widget_components_container #jtdl_bd_widget_optional_components_container_inner .optional_title h4{ display:inline-block; margin:0px auto; padding:0px 15px; background-color:#FFFFFF; position: relative; z-index:2; font-size: 130%;}
#jtdl_bd_widget_components_container #jtdl_bd_widget_optional_components_container_inner .optional_title h4:empty { display:none}
@media only screen and (max-width: 1200px) {
  #jtdl_bd_widget_components_container #jtdl_bd_widget_optional_components_container_inner .optional_components_container_inner{
    grid-template-columns: 1fr 1fr;}
}

/*bundle item to add ani*/
#jtdl_bd_widget_bundle_item_to_add_ani{position:absolute;overflow:hidden;top:0px; left:0px; display:none; transform:scale(1); border-radius:10px;translate3d(0,0,0);transition: transform .3s ease-in; z-index:1000000} 
#jtdl_bd_widget_bundle_item_to_add_ani img{ width:100%; height:100%; object-fit: cover}
#jtdl_bd_widget_bundle_item_to_add_ani.play{display:block; animation: addToBundle 0.3s 1;}
@keyframes addToBundle {
  0% {
    transform:scale(1);
    opacity:1
  }
  99% {
    transform:scale(0);
    opacity:1
  }
  100% {
    opacity:0;
  }
}






/*testing*/
/*#jtdl_bd_widget_info_title__text{ opacity:0;}*/