/** Shopify CDN: Minification failed

Line 455:3 Unexpected "/"

**/
 .ai-creations-wrapper {
      background:transparent;
      /* border-radius: 16px; */
      padding: 0px;
      color: #fff;
        margin: 0;
    }
   [data-nametag="shop-portal-provider"] {
    display: none !important;
}
     .info-white{
          color:white;
        }
        .info-section{
          display: flex;
          flex-direction: column;
          align-items: stretch;
          gap: 12px; 
        }
        .info-box.green-box{
          font-family: 'Instrument Sans';
          font-style: normal;
          font-weight: 400;
          font-size: 12px;
          line-height: 140%;
          display: flex;
          align-items: center;
          color: #33FF00;
          display: flex;
          flex-direction: row;
          align-items: center;
          padding: 12px 16px;
          gap: 10px;
          background: rgba(51, 255, 0, 0.1);
            
        }
        .infoicon{
          width: 20px;
          height: 20px;
          margin-right: 5px;
        }
        .info-box.orange-box{
          display: flex;
          flex-direction: row;
          align-items: start;
          padding: 12px 16px;
          gap: 10px;
          background: rgba(255, 119, 0, 0.1);
          font-weight: 500;
          font-size: 12px;
          line-height: 140%;
          display: flex;
          align-items: center;
          color: #FF7700;
        }

        .info-icons{
          display: grid;
          grid-template-columns: 1fr 1fr 1fr 1fr;
          justify-content: center;
          align-items: start;
          padding: 0px;
          justify-items: center;
          font-weight: 400;
          font-size: 10px;
          line-height: 15px;
          text-transform: capitalize;
          color: #FFFFFF;
        }
        .info-item{
         display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    align-content: center;
    justify-content: flex-start;
        }
.orientation-options{
      width: 100%;
      display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: flex-start;
       align-items: stretch;
    gap: 12px;
  overflow: hidden;  
    flex-direction: column;
}
.orientation-options.col-1{
      width: 100%;
      display: grid;
    grid-template-columns: 1fr;
    justify-content: flex-start;
       align-items: stretch;
    gap: 12px;
  overflow: hidden;    flex-direction: column;
}
.orientation-options.open {
  transform: scaleY(1);
  opacity: 1;
}
.orientation-options.is-grid{
  width: 100%;
    display: grid!important;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    justify-content: center;
    gap: 0px;
        max-height: 100% !important;
    overflow: hidden;
    opacity:1 !important;
        align-items: stretch;
}
.orientation-options.is-grid label {
  width:100%;
  padding: 10px 0px;
  text-align: center;
}
.orientation-options label input{
  display: none;
}
    .ai-creations-label {
    font-family: 'Instrument Sans';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 140%;
    color: #FFFFFF;
      margin: 0 0 10px;
      display: flex;
        align-items: center;
        gap: 6px;
        
    justify-content: center;

    }

    .ai-thumbnails-grid {
      display: grid;
      grid-template-columns: repeat(4,  1fr);
      gap: 10px;
      position: relative;
    }

    .ai-thumbnails-grid img {
      aspect-ratio: 1;
      width: 100%;
      height: auto;
      /* border-radius: 6px; */
      object-fit: cover;
      display: block;
    }

    .ai-button-full {
      display: flex;
    justify-content: center;
    align-items: stretch;
    flex-direction: column;
    gap: 16px;
    }
 
   .btn-col-2-wrap{
     display: grid;
     grid-template-columns: 53px 53px 1fr;
     gap: 16px;
   }
     .link-wrap{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
    .link-wrap a{
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 300;
  font-size: 12px;
  line-height: 140%;
  text-align: center;
  text-decoration-line: underline;
  text-transform: capitalize;
  color: #FFFFFF;

    }
    .contols-box{
     height: 100%;
    gap: 20px;
    display: flex;
    flex-direction: column;
    }
    .reset-btn {
     cursor: pointer;
    background: transparent;
    border: none;
    padding: 0;
    width: auto ;
    background: none ;
    display: flex;
    align-items: center;
    justify-content: center;

}
.reset-btn.is-new{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 12px 24px;
  gap: 10px;
  position: absolute;
  right: 20px;
  top: 20px;
  z-index: 999;
  background: #000;
  border: 1px solid #FFFFFF;
  backdrop-filter: blur(10px);
  /* border-radius: 8px; */
  font-weight: 600;
  font-size: 14px;
  line-height: 140%;
  text-align: center;
  text-transform: capitalize;
  color: #FFFFFF;
}
.reset-btn.is-new:hover{
background: rgba(255, 255, 255, 0.1);
border: 1px solid #FFFFFF;
backdrop-filter: blur(10px);
/* border-radius: 8px; */

}
.tool-btn-wrap{
        display: flex;
    flex-direction: row;
    gap: 20px;
    justify-content: center;
}

 .toggle-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0px;
  }

  /* Tooltip container */
  .tooltip-box {
     pointer-events: none !important;
    position: absolute;
    bottom: -50%;
    left: -130%;
    transform: translateX(-50%) scale(0.95);
    color: #fff;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all 0.25s ease;
    font-size: 13px;
    min-width: 180px;
    text-align: center;
     z-index:10;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 15px;
    gap: 0px;
    background: #000000;
    border: 1px solid rgba(255, 255, 255, 0.1);
    /* border-radius: 10px; */
    max-width: 280px;
  }

  .tooltip-box::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -12px;
    transform: rotate(-90deg);
    
    margin-left: -6px;
    border-width: 6px;
    border-style: solid;
    border-color: #000 transparent transparent transparent;
   
  }


 /* Tooltip content styling */
  .tooltip-title {
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 140%;
    text-transform: capitalize;
    color: #FFFFFF;
    margin: 0px;
  }
.tooltip-size-title{
      text-align: left;
    text-wrap: auto;

  font-style: normal;
  font-weight: 500;
  font-size: 10px;
  line-height: 140%;
  text-transform: capitalize;
  color: #FFFFFF;
  margin: 10px 0px 4px 0px;

}
  .tooltip-sizes {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    padding: 0px;
    gap: 4px;
  }

  .tooltip-sizes span {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 4px 10px;
    gap: 12px;
    background: rgba(30, 31, 37, 0.2);
    /* border-radius: 50px; */
    font-style: normal;
    font-weight: 400;
    font-size: 8px;
    line-height: 140%;
    display: flex;
    align-items: center;
    text-align: center;
    text-transform: capitalize;
    color: #FFFFFF;
  }

  .tooltip-note {
       word-wrap: break-word;
    font-style: normal;
    font-weight: 400;
    font-size: 8px;
    line-height: 140%;
    color: rgba(255, 255, 255, 0.8);
    margin: 10px 0px 0px 0px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    width: 100%;
    text-wrap: auto;
    text-align: left;
  }
    .ai-toggle-option:hover .tooltip-box {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) scale(1);
  }

.reimage-btn.is-manual{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 8px;
    gap: 10px;
    background: #000000;
    border: 1px solid #FFFFFF;
    /* border-radius: 6px; */
    height:30px;
    width:30px;
    line-height: 10px;
    text-align: center;
    margin-right:20px;
    justify-content: center;
    cursor: pointer;
  }
   .reimage-btn.is-manual svg{
    height: 10px;
   }

    .reimage-btn:hover {
      border-color: #1F8FE5;
      /* background: linear-gradient(#2a2a2a, #2a2a2a) padding-box,
                  #1F8FE5 border-box; */
    }

    .reimage-btn:hover svg path {
      fill: #1F8FE5 !important;
    }
 .tool-btn-wrap.is-1 button {
  position: relative;
  width: 100%;
  font-weight: 600;
  font-size: 16px;
  line-height: 140%;
  padding: 14px;
  color: #000000;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: #1F8FE5;
  font-family: 'Instrument Sans';
  font-style: normal;
  /* border-radius: 8px; */
  border: 2px solid #1F8FE5;;
  /* background: transparent; */
  overflow: hidden;
  z-index: 1;
}
 .tool-btn-wrap.is-1 button:hover {
  background-color: #000000;
  color: #1F8FE5;
 }
/* 
.tool-btn-wrap.is-1 button::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: linear-gradient(28deg, #f94a5c, #a346f1, #3f88ff);
  z-index: -2;
  transition: opacity 0.3s ease;
} */


/* .tool-btn-wrap.is-1 button::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  padding: 2px; 
  background: linear-gradient(28deg, #f94a5c, #a346f1, #3f88ff);
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  z-index: -1;
  transition: opacity 0.3s ease;
} */


.tool-btn-wrap.is-1 button:hover::before {
  background: #000;   
}

.tool-btn-wrap.is-1 button:hover::after {
  opacity: 1;         
} */

.tool-btn-wrap.is-1 button, .generation-btn{
  
    width: 100%;
    font-weight: 600;
    font-size: 16px;
    line-height: 140%;
    padding: 14px;
    color: #FFFFFF;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Instrument Sans';
    font-style: normal;
    position: relative;
    z-index: 50;
    text-align: center;
justify-content: center;
    /* border-radius: 8px; */

    border: 1px solid rgba(0, 0, 0, 0.69);
    background: linear-gradient(28deg, #f94a5c, #a346f1, #3f88ff);
}
.tool-btn-wrap.is-1 button:hover:not(:disabled) ,.generation-btn:hover:not(:disabled){
  box-shadow: none !important;
background: linear-gradient(#000, #000) padding-box, linear-gradient(28deg, #f94a5c, #a346f1, #3f88ff) border-box;
    
    /* border-radius: 8px; */
}
.tool-btn-wrap.is-2 button{
    width: 100%;
    font-weight: 600;
    font-size: 16px;
    line-height: 140%;
    padding: 14px;
    color: #FFFFFF;
    background: #00731C;
    border: none;
    /* border-radius: 8px; */
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Instrument Sans';
    font-style: normal;
}
.save-btn{
  position: absolute;
    bottom: 30px;
    right: 30px;
    box-sizing: border-box;
    display: none;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 12px 20px;
    gap: 10px;
    margin: 0 auto;
    background: rgba(30, 31, 37, 1);
    border: 1px solid #434651;
    /* border-radius: 8px; */
    font-family: 'Instrument Sans';
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 140%;
    text-align: center;
    text-transform: capitalize;
    color: #FFFFFF;
    cursor: pointer;
}
.ai-card, .ai-card-mode, .ai-dropdown, .ai-text-card, .ai-toggle-card, .ai-svg-box, .ai-thumbnails, .ai-button {
      background:#101011;
      padding: 20px;
      /* border-radius: 12px; */
    }
    .ai-input-box.transparent{
       background: transparent;
    }
    .input-msg-wrap{
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: 0px;
      margin-top: 4px;
      gap: 5px;
    }
    .save-image-btn.disabled , .download-btn.disabled{
  pointer-events: none;
  opacity: 0.5;
  cursor: not-allowed;
}
      .input-msg-wrap p{
        margin: 0px;
        font-style: normal;
        font-weight: 400;
        font-size: 10px;
        line-height: 140%;
        color: #FF3C3C;
    }
    .ai-card-mode{
      display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    }
    .note-text{
      font-family: 'Instrument Sans';
      font-style: normal;
      font-weight: 600;
      font-size: 10px;
      line-height: 140%;
      text-align: left;
      text-transform: capitalize;
      color: rgba(255, 255, 255, 0.8);
      margin: 0px;
    }
    .note-text span{
font-family: 'Instrument Sans';
font-style: normal;
font-weight: 400;
font-size: 10px;
line-height: 140%;
  text-align: left;
      text-transform: none;
        color: rgba(255, 255, 255, 0.6);
    }
      .card-title {
        gap: 6px;
    display: flex;
    font-family: 'Instrument Sans';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 140%;
    color: #FEFEFE;
    flex-direction: row;
    margin: 0;
    align-items: center;
    }
 .ai-input-box {
  width:100%;
      position: relative;
      z-index: 98;
      flex-direction: column;
    }
    .ai-input-box textarea {
      width: 100%;
      padding: 16px;
      border: 1px solid #444;
      /* border-radius: 12px; */
      background: #000;
      color: #fff;
      resize: none;
    }
    .ai-input-box label {
            /* position: absolute; */
        top: -10px;
        left: 28px;
        background: transparent;
        /* padding: 0 16px; */
        display: block;
        width: fit-content;
        z-index: 1;
        margin: 0;
        margin-right: auto;
        background: linear-gradient(to bottom, #000 0% 60%, #1e1f2500 0% 0%);
      margin-bottom: 10px;
    font-weight: 600;
    font-size: 14px;
    line-height: 140%;
    color: #FFFFFF;
    }
      .ai-input-box {
      margin-top: 0;
      position: relative;
        padding: 0;
    }
      .input-wrapper {
      display: flex;
      align-items: center;
      background: #111;
      border: 1px solid #444;
      /* border-radius: 12px; */
      padding: 0;
      position: relative;
      width: 100%;
    }

    .input-wrapper textarea {
      background: rgba(16, 16, 17, 0.5);
      border: none;
      resize: none;
      outline: none;
      color: #fff;
      font-size: 16px;
      width: 100%;
      line-height: 1.4;
      outline: none;
      padding:20px;
      font-family: inherit;
      overflow: auto;
      scrollbar-width: none;
      box-shadow: none;
    }
   .more-card{
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 500;
  cursor: pointer;
}
    
.more-card.rotated{
  transform: translateX(-50%) rotate(180deg);
}

.accordion-content > ol {
  padding-inline-start : 20px;
}
    @media(max-width: 768px) {
     .reset-btn.is-new{
      top: 10px;
      right: 10px;
        padding: 4px 10px;
        font-size: 12px;
}
      .ai-input-box label {
    background: linear-gradient(to bottom, #000 0% 66%, #1e1f2500 0% 0%);
    font-size: 12px;
}
  .tooltip-box{
    bottom: revert-layer;
    top: 108%;
    left: 50%;
    z-index: 99;
    width:100%;
    min-width:100%;
  }
  .tooltip-box::after{
    top: -12px;
    left: 50%;
    transform: rotate(-180deg);
    right: unset;
  }
  .tool-btn-wrap{
    gap: 16px;
}
.tool-btn-wrap.is-save {
  gap: 10px !important;
}
  
}

.lock-access{
  /* border-radius: 10px; */
    background: hsl(0deg 0% 0% / 50%);
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    position: absolute;
    z-index: 500;
    flex-direction: column;
    align-items: center;
}
#art-anh-prompt-group {
  display: none;
  margin: 10px 0 0 0;
}

.edit-pdp-tool-wrap{
      display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding:12px;
    gap: 12px;
    background: #101011;
    border: 2px solid rgba(255, 255, 255, 0.1);
}
.edit-options{
      display: flex;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
}
.top-edit-options, .bottom-edit-options{
      align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

}
.left-side-options{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 0px;
gap: 12px;

}
.edit-img-btn{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 12px 20px;
gap: 10px;
background: #16181c;
border: 1px solid #434651;
/* border-radius: 10px; */
cursor: pointer;
}

.green-btn{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 14px 28px;
gap: 10px;
background: #00731C;
/* border-radius: 8px; */
font-family: 'Instrument Sans';
font-style: normal;
font-weight: 600;
font-size: 18px;
line-height: 140%;
text-align: center;
text-transform: capitalize;
color: #FFFFFF;
}
.save-image-btn, .download-btn{
  box-shadow: none !important;
    padding: 14px;
    color: #fff;
    border: 1px solid #1F8FE5 ;
    /* border-radius: 8px; */
    cursor: pointer;
    transition: all .3s ease;
    font-family: 'Instrument Sans';
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 140%;
    text-align: center;
    text-transform: capitalize;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    height: 53px;
    width: 53px;
    /* aspect-ratio: 1; */
}
.save-image-btn.disable{
  opacity: 0.5;
    cursor: not-allowed;
}
.save-image-btn:hover, .download-btn:hover{
  background: #000;
  border: 1px solid #FFFFFF;
  backdrop-filter: blur(10px);
  /* border-radius: 8px; */
}

.tool-btn-wrap.is-save {
    margin-top: 16px;
    display: none;
    align-items: stretch;
    gap: 20px;
    grid-template-columns : 53px 53px 1fr;
}
.controls-main-wrap{
      display: flex;
    flex-direction: column;
    gap: 30px;
}
  .regenerate-btn{
        font-family: 'Instrument Sans';
        font-style: normal;
        font-weight: 600;
        font-size: 14px;
        line-height: 140%;
        text-align: center;
        text-transform: capitalize;
        color: #FFFFFF;
        padding: 4px;
        border-bottom: 1px solid white;
        cursor: pointer;
    }
    .regenerate-btn:hover{
      
        color:rgba(255, 255, 255, 0.70);
        border-bottom: 1px solid rgba(255, 255, 255, 0.70);
    }
.error-border {
  border: 2px solid #e63946 !important; /* strong red */

  transition: border 0.3s ease;
}

/* width */
.frame-size-options::-webkit-scrollbar {
  width: 10px;
  height:90% !important;
  margin-right: 5px !important;
}

/* Track */
.frame-size-options::-webkit-scrollbar-track {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 4px 2px;
  gap: 10px;
  background: rgba(255, 255, 255, 0.1);
  /* border-radius: 10px; */
  position: relative;
}
 
/* Handle */
.frame-size-options::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  /* border-radius: 50px; */
  width: 10px !important;
}

/* Handle on hover */
.frame-size-options::-webkit-scrollbar-thumb:hover {
   box-shadow: 0px 0px 10px 1px rgba(255, 255, 255, 0.1);
}
   .product-pricing-section {

    display: GRID;
    grid-template-columns: max-content 1fr;
    align-items: center;
    padding: 12px;
    gap: 5px;
    background: linear-gradient(0deg, rgba(31, 143, 229, 0.2), rgba(31, 143, 229, 0.2)), #000000;
    border: 2px solid #1F8FE5;
    justify-content: space-between
    
}
.save-box {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding:0px;
    gap: 10px;
    border-radius: 0;
} 
.price-right-section{
       display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    width: 100%;
}
   .upload-btn {
    
                      display: flex;
                      flex-direction: row;
                      justify-content: center;
                      align-items: center;
                      padding: 16px 40px;
                      gap: 10px;
                      background: linear-gradient(0deg, #16181c, #16181c), #000000;
                      border: 1px solid #434651;
                    font-style: normal;
                    font-family: 'Instrument Sans';
                    font-weight: 700;
                    font-size: 14px;
                    line-height: 140%;
                    text-align: center;
                    text-transform: capitalize;
                    color: #FFFFFF;
                   cursor: pointer;
             
                  }
             @media screen and (min-width: 1160px) {
                    .left-pdp-sticky{
                      display: block;
                position: sticky;
                top: 138px;
                z-index: 2;
                min-height: 80svh;
            }
          }         

            .upload-wrapper {
              padding-block: 20px;
            }
     @media screen and (min-width: 750px) {
                    .left-pdp-sticky{
                      display: block;
                position: sticky;
                padding-top: 0px;
                z-index: 2;
                min-height: 80svh;
            }
            #galleryWrapper, #galleryWrapper .product__column-sticky,.product__media.media.media--transparent,.global-media-settings:after{
          
                 /* max-width:626px; */
                 width: 100%;
                 margin: auto;
            }
            .product-media-container.constrain-height .media img{
              max-width:100%;
                      max-height: calc(80svh - 75px);
            }
          }


.edit-left-tool-wrap{
      display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 12px;
}
.edit-right-tool-wrap > .reset-pdp{
  display: none;
}
.canvas-zoom-wrap{
  margin-left: 10px;
}
.edit-control-btn{
    width: 32px;
    height: 32px;
    display: flex;
    background: #16181c;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0px;
    align-items: center;
    justify-content: center;
    
    cursor: pointer;
}
.edit-right-tool-wrap {
      display: flex;
    align-items: center;
}

.mode-btn.active{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 8px 20px;
  gap: 10px;
  background: #1F8FE5;
  border-radius: 0px;
  font-style: normal;
  font-weight: 700;
  font-size: 12px;
  line-height: 140%;
  text-align: center;
  text-transform: capitalize;
  color: #000000;
}
.mode-btn.edit.active.tag{
        background-color: #1F8FE550;
    color: #fff;
}
.mode-btn{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 8px 20px;
  gap: 10px;
  border: 1px solid #1F8FE5;
  border-radius: 0px;
  font-weight: 700;
  font-size: 12px;
  line-height: 140%;
  text-align: center;
  text-transform: capitalize;
   cursor: pointer;
  color: #FFFFFF;
}
#zoomIn, #zoomOut{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 0px;
gap: 12px;
min-width: 30px;
min-height: 30px;
background: #1E1F25;
border-radius: 0px;
 border: 1px solid #333;
  cursor: pointer;
}
#zoomIn:hover, #zoomOut:hover{
  border: 1px solid #1F8FE5;
}

 .zoomslider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 0px;
  background: linear-gradient(to right,rgba(0, 91, 255, 1) 50%, rgba(255, 255, 255) 50%);
  outline: none;
  cursor: pointer;
}

/* Update background dynamically */
.zoomslider::-webkit-slider-runnable-track {
  height: 10px;
  border-radius: 0px;
}
.zoomslider::-moz-range-track {
  height: 10px;
  border-radius: 0px;
}

.zoomslider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width:16px;
  height:16px;
  border-radius: 0;
  background: rgba(0, 91, 255, 1);
  border: 3px solid rgba(0, 91, 255, 1);
  margin-top: -3px; /* align thumb */
  box-shadow: 0 0 3px rgba(0,0,0,0.3);
  cursor: pointer;
}
.zoomslider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 0%;
  background: rgba(0, 91, 255, 1);
  
  margin-top: -3px; /* align thumb */
  border: 3px solid rgba(0, 91, 255, 1);
  box-shadow: 0 0 3px rgba(0,0,0,0.3);
  cursor: pointer;
}
.selected-size{
font-family: 'Instrument Sans';
font-style: normal;
font-weight: 700;
font-size: 20px;
line-height: 140%;
color: #FFFFFF;
    text-wrap-mode: nowrap;
}
.product-title{
font-style: normal;
font-weight: 300;
font-size: 20px;
line-height: 140%;
color: #FFFFFF;
margin: 0px;
        flex-wrap: wrap;
}
  .upload-wrapper {
                     display: flex;
                      justify-content: center;
                      padding-block: 20px;
                      border-radius: 0px;
                      /* position: absolute; */
                      bottom: 0px;
                      z-index: 50;
                      width: 100%;
                      left: 0;
                      }
.product__info-wrapper{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 00px;
  gap: 24px;
  max-width: 500px;
  background: #101011;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 0px;
}
/* Active (checked) style with gradient border + gradient text */
        .frame-size-btn input:checked + span ,.frame-color-label input:checked + span{
  border: none;
  font-weight: 700;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px 12px;
  gap: 10px;
  background: rgba(31, 143, 229, 0.18);
  border: 1px solid #3B82F6 !important;
  border-radius: 0px;
  height: 100%;
    box-shadow: 0px 4px 6px rgba(59, 130, 246, 0.5);

        }
 .color-swatch{
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          padding: 8px 16px;
          height: 60px;
          background: #000000;
        }
    
        .frame-size-btn input:checked + span:hover,  .frame-color-label input:checked + span:hover{
          -webkit-text-fill-color: #fff;
          color: #fff;
          background: #0C0C0C;
        }
         .frame-size-btn input ,.frame-color-label input {
          display: none !important;
        } 
   /* Base button style */
        .frame-size-btn span ,.frame-color-label span {

    justify-content: center;
display: flex;
flex-direction: row;
align-items: center;
padding: 10px 12px;
gap: 10px;
background: rgba(30, 31, 37, 0.2);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 0px;

          position: relative;
         
          font-weight: 600;
          font-size: 14px;
          line-height: 140%;
          color: #fff;
          cursor: pointer;
          transition: all 0.3s ease;
          border: 1px solid #333;
          background: transparent;
          z-index: 1;
          text-align: center;
        }
        .frame-size-btn span{

          min-width: 87px;
        }
 .frame-size-options{ 
            overflow: auto;
            box-sizing: border-box;
            display: flex;
            flex-wrap: wrap;
            flex-direction: row;
            align-items: center;
            gap: 14px;
  
         }
        
         .frame-color-options{
          display: grid;
          grid-template-columns: 1fr 1fr 1fr;
          width: 100%;
          min-height: 60px;
              gap: 10px;
         }
         
         .image-conform-btn{
display: flex;
        width: 100%;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 12px 20px;
gap: 10px;
background: #1F8FE5;
border: 2px solid #1F8FE5;
font-weight: 700;
font-size: 14px;
line-height: 140%;
text-align: center;
text-transform: capitalize;
color: #FFFFFF;
  cursor: pointer;
}
.ready-made-addtocart{
  padding: 10px 24px;
  color: #000000;
  background-color : white;
  font-family: Instrument Sans;
  font-weight: 700;
  font-size: 14px;
  line-height: 140%;
  text-align: center;
  text-transform: capitalize;
  display: flex;
  justify-content: center;
  align-items: center;
}

#ready-made-addtocart, #ready-made-buynow{
  cursor: pointer;
}
@media (max-width: 680px){
  .ready-made-addtocart {
    padding: 8px;
    font-size: 12px;
  }
  #ready-made-addtocart{
    width: 32.8px;
    height: 37.8px;
  }
}
   .boost-img-btn{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 6px 12px;
        gap: 10px;
        background: #000000;
        border-radius: 0px;
        font-weight: 700;
        font-size: 14px;
        line-height: 140%;
        text-align: center;
        text-transform: capitalize;
        color: #FFFFFF;
        border: 2px solid rgba(31, 143, 229, 1);
        cursor: pointer;
      }  
    
.zoom-tooltip {
  position: fixed;
  color: white;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 500;
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 999999;
background: #16181c;
border-width: 2px;
border-style: solid;
border-color: rgba(255, 255, 255, 0.1);
border-radius: 0px;

}
.zoom-tooltip.show {
  opacity: 1;
  transform: translateY(0);

}

 .preview-btn-pdp{
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 16px 32px;
            background: transparent;
            font-family: 'Instrument Sans';
            font-style: normal;
            font-weight: 600;
            font-size: 16px;
            line-height: 140%;
            background: #1F8FE5;
border: none;
            transition: all 0.3s ease;
            z-index: 1;
            width: 100%;
            text-align: center;
            color: #000;
            cursor: pointer;
         }
.preview-btn-pdp:hover{       
            color: #fff;
            text-decoration: none; 
                }
    
             @media(max-width: 746px){
                  .edit-pdp-tool-wrap {
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;
    align-items: stretch;
    padding: 12px;
    gap: 12px;
    background: #101011;
    border: 2px solid rgba(255, 255, 255, 0.1);
}      
.edit-right-tool-wrap{
      display: grid;
      grid-template-columns: auto max-content max-content;
}
.edit-right-tool-wrap.col-2{
      display: grid;
             grid-template-columns: max-content auto max-content;
}
.toggle-3d-wrap{
      display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
}
.toggle-label{
  font-size: 10px !important;
  margin: 0px !important;
}
.edit-right-tool-wrap > .reset-pdp{
  display: flex !important;
}
 
.edit-left-tool-wrap > .reset-pdp{
  display: none !important;
}

             }      
                @media(max-width: 1160px){
             
.edit-right-tool-wrap{
  gap:10px !important;
}

.edit-right-tool-wrap .switch{
  margin: 0px !important;
}
.mode-btn {
  height: 100%;
}
                }

                 @media (max-width: 480px) {
.edit-left-tool-wrap{
       flex-wrap: wrap;
       gap: 5px;
}

.mode-btn, .mode-btn.active{
  padding: 5px;
}
.edit-control-btn, .reset-pdp{
  width: 28px;
  height: 28px;
  padding: 0px 1px !important;
}
.canvas-zoom-wrap > div >div:nth-child(1) {
  width: 28px !important;
  height: 28px !important;
}

.canvas-zoom-wrap > div > div:nth-child(2) {
  padding: 0px 5px !important;
  height: 28px  !important;
}
.canvas-zoom-wrap > div > div:nth-child(3) {
  width: 28px !important;
  height: 28px !important;
}
.canvas-zoom-wrap > div > div:nth-child(4) {
  width: 28px !important;
  height: 28px !important;
}
.product-title{
 display: flex;
        flex-direction: row;
        align-items: center;
        gap: 5px;
}
/* .price--on-sale .price__sale {
    display: grid !important;
    grid-template-columns: auto auto auto;
} */

                 }

.frm-image-note{
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 16px 20px;
gap: 16px;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    max-width:350px;
background: #130F00;
border-left: 2px solid #A28100;

}
.frm-note-close{
  cursor:pointer;
}
.frm-note-title{
font-weight: 700;
font-size: 16px;
line-height: 100%;
display: flex;
align-items: center;
color: #FFCE0D !important;
padding: 0px;
margin: 0px;

}
.frm-description{
font-weight: 400;
font-size: 14px;
line-height: 130%;
color: #FFFFFF !important;
padding: 0px;
margin: 0px;

}
 @media (max-width:680px) {
  .frm-image-note{
padding: 8px 10px;
gap: 8px;
    position: absolute;

}
.frm-note-title{
font-size: 14px;


}
.frm-description{
font-size: 12px;

}
 }

.full-content{
  display:none;
}

.valentine-red{
  padding: 2px 4px;
  font-family: Instrument Sans;
font-weight: 700;
line-height: 140%;
text-align: center;
color: #FF0600;
text-transform: capitalize;
background-color: #FADFE4;
}

.valentine-pink{
  color: #F4B6C2;
}
.valentine-div{
  display: flex;
  justify-content: space-between;
  align-items: center;
  
}
.valentine-div  *{
  font-size: 12px;
  margin: 0;
}
.discount-copy{
  cursor: pointer;
}
.gold-gdt{
background: linear-gradient(90deg, #FFD659 0%, #D09D00 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}
  .product__modal-opener .product__media-icon {
    display:none;
  }

  .blocked-toast {
  position: fixed;
  top: 20px;
  right: 50%;
  width: 100%;
  max-width: 800px;
  transform: translatex(50%);
  background: #222;
  color: #fff;
  padding: 14px 18px;
  font-size: 14px;
  opacity: 0;
  transform: translateX(100%);
  transition: all 0.4s ease;
  z-index: 999999;
}

/* show */
.blocked-toast.show {
  opacity: 1;
  transform: translateX(50%);
}

/* types */
.blocked-toast.success {
  background: #28a745;
}
.blocked-toast.error {
  background: #dc3545;
}
.blocked-toast.warning {
  background: #ffc107;
  color: #000;
}

.order-title-wrap {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: row;
    gap: 10px;
    flex-wrap: wrap;
}
.order-title-content{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.order-title-content p {
  margin: 0px !important;
}
.order-main-content-wrap{
      display: grid;
    grid-template-columns: auto max-content;
    gap: 24px;
    align-items: start;
}
.order-container{
  display: flex;
    flex-direction: column;
    gap: 24px;
}
.order-details{
      top: 30px;
    position: sticky;
  border: 1px solid #434651;
  border-collapse: collapse;
}
.order-details th,
.order-details td {
  border-top: 1px solid #434651;
}

.order-details.order-summary th,
.order-details.order-summary td {
  border: none;
}

#ColumnProduct{
  text-align: left;
}
.order-details.main th{
background: #080808;
font-weight: 500;
font-size: 20px;
line-height: 140%;
padding: 16px 0px;
color: #FFF;
}
.order-details.main tbody tr td{
padding: 16px 0px;
font-weight: 400;
font-size: 16px;
line-height: 140%;

color: rgba(255, 255, 255, 0.8);

}
.order-details.order-summary{
  position: static;
  width:100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px;
  gap: 20px;
  background: #080808;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.order-summary-wrap{
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.address-box{
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 20px;
gap: 10px;
border: 1px solid rgba(255, 255, 255, 0.1);

}
.address-box h2{
font-weight: 700;
font-size: 20px;
line-height: 140%;
padding-bottom: 10px;
}

.status{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 6px 10px;
gap: 10px;
}

.status-paid {
background:rgba(11, 183, 131, 0.1);
border: 1px solid #0bb783;

}

.status-pending {
  background:rgba(255, 200, 0, 0.1);
border: 1px solid #ffc700;

}

.status-refunded {
  background:rgba(241, 65, 65, 0.1);
border: 1px solid rgb(241, 65, 65);

}
.status-voided{
  background:rgba(82, 82, 82, 0.1);
border: 1px solid rgb(82, 82, 82);
}
.status-authorized {
  background:rgba(0, 156, 247, 0.1);
border: 1px solid #009ef7;
}
.table-data-center {
    text-align: center !important;
}
.table-data-right{
  padding-left: 20px !important;
}
.table-data-left{
  padding-right: 20px !important;
}
.cancelled-box{
      display: flex;
    flex-direction: column;
    gap: 5px;
    border: 1px solid red;
    background: hwb(0deg 0% 0% / 10%);
    padding: 15px;
    width: 100%;
}
@media screen and (max-width: 749px) {
  .order-main-content-wrap {
    grid-template-columns: 1fr;
  }
  .order-details {
    position: static;
    border: 1px solid #434651;
    border-collapse: collapse;
}

.order-details.main th, #RowSubtitle{
font-size: 14px !important;
padding: 8px 0px;
}
.order-details.main tbody tr td, .order-details.order-summary td{
padding: 8px 0px;
font-size: 14px !important;
}
.order-details.order-summary{
  padding: 15px;
  gap: 15px;
}

.address-box{
padding: 15px;
gap: 10px;

}
.address-box h2{
font-size: 16px;
line-height: 140%;
}


}

.price-main-wrap .product-title{
font-weight: 400;
font-size: 14px;
line-height: 120%;

}
.price-main-wrap .selected-size{
font-weight: 700;
font-size: 12px;
line-height: 120%;

}
.highlight-title-text{
  color: #ACF0FF;
}
.other-pdp-link{
display: flex;
flex-direction: row;
align-items: center;
padding: 10px;
gap: 10px;
background: rgba(30, 31, 37, 0.2);
border: 1px solid rgba(255, 255, 255, 0.2);
text-decoration: none;
font-weight: 600;
font-size: 12px;
line-height: 140%;
text-align: center;
text-transform: capitalize;
color: #FFFFFF;
justify-content: center;

}
.other-pdp-tab{
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 0px;
  gap: 14px;
  margin-bottom: 12px;
}
.other-pdp-link.active{
background: rgba(31, 143, 229, 0.18);
border: 1px solid #3B82F6;
}

.accordion-title-wrap{
    display: flex;
    gap: 5px;
    align-items: center;
}
.accordion-image, .accordion-image img{
      height: 20px;
          width: 20px;
}

.accordion-content[data-block-title="Top Quality, Check"] ul {
  list-style: none;
  padding-left: 0;
}

/* Style li */
.accordion-content[data-block-title="Top Quality, Check"] ul li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 10px;
}

/* Add custom image as marker */
.accordion-content[data-block-title="Top Quality, Check"] ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 18px;
  height: 18px;
  background-image: url('');
  background-size: contain;
  background-repeat: no-repeat;
}

.en-compare-before,
.en-compare-after {
user-select: none;
 -webkit-user-drag: none;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 pointer-events: none;
}

.canvas-edit-wrap{
  width: 100%;
  height: 100%;
}
.edit-right-tool-wrap .switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 25px;
  margin-right:20px;
}

.edit-right-tool-wrap .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.edit-right-tool-wrap .slider {
  position: absolute;
  cursor: pointer;
  background-color: #ccc;
  border-radius: 34px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: .3s;
}

.edit-right-tool-wrap .slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  border-radius: 50%;
  transition: .3s;
}

.edit-right-tool-wrap input:checked + .slider {
  background-color: #1F8FE5;
}

.edit-right-tool-wrap input:checked + .slider:before {
  transform: translateX(24px);
}

.toggle-label{
  margin-right: 10px;
font-weight: 600;
font-size: 14px;
line-height: 140%;
text-align: center;
color: #FFFFFF;

}
.canvas-edit-wrap{
   display: flex;
}
.canvas-panel {
  height: 100%;
   transition: width 0.3s ease;
}

.canvas-panel.left-panel {
  width: 100%;
  
}

.canvas-panel.right-panel {
  width: 50%;
    justify-content: center;
    align-items: center;

  }

.canvas-edit-wrap .divider {
  width: 2px;
  background: rgb(255 255 255 / 20%);
  /* cursor: col-resize; */
  position: relative;
  z-index: 10;
}
.divider-center-box{
  position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%) translateX(-50%);
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #101011;
    border-radius: 50%;
    border: 1px solid rgb(255 255 255 / 20%);
}
.hide-wrap {
  display: none !important;
}

.show-flex {
  display: flex !important;
}
.canvas-edit-wrap .disabled .divider {
  cursor: not-allowed;
  background: #777;
}