.noneLink{display:none;}
.button{border-radius: 20px; 
    color: #fff; height:40px; line-height:35px; font-size:16px; margin-top: 20px;}
.inpx{ background: #FFE4FC; border-radius: 15px; }
.bm{ border-radius: 15px; }
.row-flex {
  display: flex;
  flex-wrap: wrap;
}

    .xcolor{
     color: #ed008c; 
    }
    .tz{
     font-size: 13px;
    }
    .x-menu {
      position: relative;
      display: inline-block;
    }
    .x-log {
      right: -35px;  
    }
    .x-cat {
      left: 0;  
    }
    .x-login {
      position: absolute;
      top: 100%;
      background: white;
      border-radius: 15px;
      box-shadow: 0 10px 25px rgba(0,0,0,0.15);
      width: 160px auto;
      padding: 15px;
      transform: scale(0.75);
      opacity: 0;
      pointer-events: none;
      transform-origin: top right;
      transition: transform 0.2s ease, opacity 0.2s ease;
      z-index: 999;
    }

    .x-menu:hover .x-login {
      transform: scale(1.03);
      opacity: 1;
      pointer-events: auto;
    }
    .x-font{
    font-size: 20px;
    padding: 4px;
    color: #ed008c;
    }
    .catx{
        width: 130px; 
        height: auto; 
        background: #FFFFFF; 
        color: #ed008c;
        border-radius: 50px; 
        padding: 5px 5px 5px 15px;
    }
    .catx:hover{
     background: #ed008c; 
     color: #FFFFFF;
    }
    .menux{
        width: auto; 
        height: auto; 
        background: rgba(255,255,255,0.30); 
        color: #ed008c;
        border-radius: 50px; 
        padding: 5px 15px 5px 15px;
    }
    .menux:hover{
     background: #ed008c; 
     color: #FFFFFF;
    }
    .header-quick-categories{
        display: flex;
        align-items: center;
        gap: 7px;
        overflow: hidden;
        padding-left: 20px;
        white-space: nowrap;
    }
    .header-quick-categories .menux{
        display: inline-block;
        flex: 0 0 auto;
        text-decoration: none;
    }
.sticky-header.sticky {
  position: fixed;
  z-index: 999;
  width: 100%;
  top: 0;
  height: 90px auto;
 background: rgba(214,36,236,0.20); 
  backdrop-filter:blur(10px) brightness(110%);
  -webkit-backdrop-filter:blur(10px) brightness(110%);
  /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.11); */
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
  -webkit-animation-duration: 900ms;
  animation-duration: 900ms;
  -webkit-animation-timing-function: cubic-bezier(0.2, 1, 0.22, 1);
  animation-timing-function: cubic-bezier(0.2, 1, 0.22, 1);
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-direction: normal;
  animation-direction: normal;
  -webkit-animation-fill-mode: none;
  animation-fill-mode: none;
  -webkit-animation-play-state: running;
  animation-play-state: running;
  border-bottom: 0;
  display: block;
}

    .bxn{
      position: absolute; 
      top: 0px; 
      left: 0;
      width: 150px;
      height: 45px;
      /* border: 1px solid #262728; */
      background: #fbcef0;
      color: white;
      box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
      transform: translateX(-300px);
      transition: transform 0.3s ease;
      z-index: 88;
      border-radius: 15px;
    }
  .hover:hover + .bxn,
    .bxn:hover {
      transform: translateX(40px);
    }
/*product detail*/
    .image-section {
      flex: 1;
    }

    .main-image {
      width: 100%;
      border-radius: 15px;
    }
    
        /* Mobile Swiper hidden on desktop */
    .mobile-swiper {
      display: none;
    }
    
        /* Responsive */
    @media (max-width: 768px) {

      .desktop-gallery {
        display: none;
      }

      .mobile-swiper {
        display: block;
        margin-bottom: 10px;
      }

      .swiper {
        width: 100%;
      }

      .swiper-slide img {
        width: 100%;
        height: auto;
        border-radius: 15px;
      }
    }
    
    .inactiveLink {
       pointer-events: none;
       cursor: default;
       /*padding: 5px 10px;
       margin: 5px;*/
       padding: 5px 10px;
       margin: 5px;
       color: #eee;
       border: 1px solid #eee;
       /*padding: 5px 12px;*/
    }

    .activeLink {
       color: #333;
       padding: 5px 10px;
       margin: 5px;
       border: 1px solid #eee;

    }

    .inactive_cart_link {
       pointer-events: none;
       cursor: default;
       background-color: #ddd;
    }
		.number{
            width: 83px;
            text-align: center;
			margin:2px;
            padding: 1px;
            border-radius:50px;
            border:1px solid #ddd;
		}
		.minus, .plus{
			width:25px;
			height:25px;
            font-size: 19px;
			background:#f2f2f2; 
			border-radius:50%;
			/* padding:8px 5px 8px 5px; */
			border:0px solid #ddd;
      display: inline-block;
      vertical-align: middle;
      text-align: center;
      cursor: pointer;
		}
		input.z{
			height:28px;
      width: 18px;
      text-align: center;
      font-size: 16px;
      background: transparent;
      border: none;
			/* border:1px solid #ddd;
			border-radius:4px; */
      display: inline-block;
      vertical-align: middle;
            
}
    .d{
        border-radius: 50px;
        overflow: hidden;
    }
    /* Only show zoom on desktop */
@media (min-width: 769px) {
  .zoom-container {
    position: relative;
    overflow: hidden;
    cursor: zoom-in;
  }

  .zoom-container img {
    display: block;
    width: 100%;
    height: auto;
    transition: opacity 0.3s;
  }

  .zoom-container:hover img {
    opacity: 0;
  }

  .zoom-container {
    background-repeat: no-repeat;
    background-size: 200%; /* Zoom level */
  }
}

        .play {
            width: 20px;
            height: 20px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            justify-content: center;
            align-items: center;
            color: white;
            font-weight: bold;
            border-radius: 50px;
    }
/* ============ DEFAULTS =========== */
.modal .form-heading {
    padding: 0 15px 15px 15px;
    color: #3C4857;
    ;
}
.modal .form-heading .title {
    font-size: 22px;
}
.description {
    font-size: 13px;
    float: left;
    margin-bottom: 15px;
}

.modal form {
    background: #fff;
    padding: 0 15px 15px 15px;
    position: relative;
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 6px 10px -4px rgba(0, 0, 0, 0.15);
}

.modal .form-control {
    position: relative;
    z-index: 2;
    margin: 0;
    width: 100%;
    height: 40px;
    display: block;
    border: 1px solid #DDD;
    color: #3C4857;
    will-change: background-position;
    transition: all .3s cubic-bezier(.64, .09, .08, 1);
    background-position: -100%;
    background-size: 100%;
    background-repeat: no-repeat;
    font-size: 14px;
    margin-bottom: 15px;
}

.modal .form-control:focus {
    border: 1px solid #f55a4e !important;
    box-shadow: none;
    outline: 0 none;
}


/* ============ MODAL =========== */
@media only screen and (min-width: 992px) {
.modal-body {
    position: relative;
    padding: 0px;

}
 }
 @media only screen and (max-width: 992px) {
.modal-body {
    position: relative;
    padding: 0px;
	max-height: calc(100vh - 200px);
    overflow-y: auto;
}
 }
.modal-header {
    padding: 10px;
    border: none;
}

.modal-dialog {
    /* max-width: 360px; */
    margin: 80px auto;
}

button.close {
    color: #f55a4e;
    outline: none;
}

.close {
    color: #3C4857;
    opacity: 0.9;
}


/* ============ LABEL =========== */

label {
    color: #3C4857;
    font-weight: 300;
    transition: all .3s cubic-bezier(.64, .09, .08, 1);
    display: inline-block;
    font-size: 12px;
}

.floating-label {
    -webkit-transform: translateY(-18px);
    transform: translateY(-18px);
    position: absolute
}

.label-required:before {
    content: '*';
    color: #f55a4e;
    position: absolute;
    margin-left: -15px
}

/* ============ FONT AWESOME SOCIAL ICONS =========== */

.social-line {
    margin: 10px 0;
}

.social-line a {
    font-size: 18px;
    color: #3C4857;
}

.fa-facebook {
    background-color: #3b5998;
    color: #fff;
    border-radius: 50px;
    height: 36px;
    width: 36px;
    min-width: 36px;
    padding: 11px 8px 8px 8px;
}

.fa-twitter {
    background-color: #55acee;
    color: #fff;
    border-radius: 50px;
    height: 36px;
    width: 36px;
    min-width: 36px;
    padding: 11px 8px 8px 8px;
}

.fa-google-plus {
    background-color: #dd4b39;
    color: #fff;
    height: 36px;
    width: 36px;
    min-width: 36px;
    border-radius: 50px;
    padding: 11px 8px 8px 8px;
}

/* Hide the native number spinner while keeping numeric input behavior. */
input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}