.on-top-button {
     display: none;
     position:fixed;
     bottom:400px;
     right:15px;
     cursor: pointer;
     z-index: 2000;
     opacity: 0.8;
}
 .on-top-button img{
     width:48px;
     height: 48px;
}

.show-header{
     border-bottom: 1px solid rgb(231, 231, 231);
     color: rgb(250, 249, 249);
     background-color: rgb(214, 185, 151);
     width: 100%;
     height: 48px;
     padding-top: 8px;
     padding-right: 20px;
     padding-left: 20px;
}
.show-header a{text-decoration: none;}
.show-header img{width:24px; height:24px; float:left;margin-top:4px;}
.show-header span{
     float:right;
     color: black;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 1.2rem;
}

.new-product{
     font-family: Arial, Helvetica, sans-serif;
     margin-left: 16px;
     margin-top: 10px;
     color: var(--text-info);
}
/* .product-show{
     max-width: 1260px;
} */

.display-product{
     position:relative;
     padding: 8px;
     background-color: transparent;
     text-align: left;
     font-weight: normal;
     letter-spacing: 1px;
     margin-left: 12px;
     margin-bottom: 20px;
     display:inline-block;
     width: 90%;

}
.display-product-info{
    /* font-size: 1rem; */
    width: 100%;
    text-align: left;
    height: 140px;
}
.product-sale {
    position: absolute;
    bottom: 0;
    right: 12px;
    z-index:10;
}
.pendant-sizes{
     position:absolute;
     top:10px;
     left:0;
     width: 80px;
     z-index: 10;
     opacity: 0.9;
}
.pendant-sizes img{
     width: 100%;
     aspect-ratio: 1/1;
}
/* ------------------------- */
.pantalla {
     width: 100%;
     aspect-ratio: 1/1;
     position: relative;
     display: block;
     cursor:pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     }
.product-front-image{
     z-index: 100;
     display: block;
     width:100%; 
}

.product-back-image{
     z-index: 100;
     display: none;
}
.product-video{
     position: absolute;
     top: 0;
     left: 0;
     display:none; 
     opacity: 0;
     z-index: 100;
}

 .productname {
     font-family: 'SansCondensedLight';
     text-align: left;
     color: black;
     overflow-wrap: break-word ;
     font-size: 1rem;
}
.productname::first-letter{
     text-transform: uppercase;
}

.product-params {
     text-align: center;
     color: rgb(43, 1, 1);
     font-size: 0.8rem;
     border-top: 0.5px solid gray;
     margin-top: 12px;
    font-family: SansCondensedLight;

}

.stone, .metal, .params, .-info{
     display:block;
     font-weight: normal;
     color: var(--text-info);
}
 .prod-name {
     font-family: 'SansCondensedLight';
     text-align: center;
     color: black;
     font-weight: bold;
     text-transform: uppercase;
     font-size: 0.9rem;
}
 .prod-id {
     font-family: 'SansCondensedLight';
     color: black;
     font-size: 0.9rem;
     margin-right: 8px;
     font-weight: bold;
     text-transform: uppercase;
}
.reserved-img{
    position: absolute;
    top: 0;
    right: 12px;
    width: 60%;
    z-index: 1000;
}

.video-thumb, .info-button{
     float: left;
     width: 30px;
     height: 30px;
     margin-right: 6px;
     margin-top: 6px;
     cursor:pointer;
}
.tooltip> .tooltip-inner {
     margin-top: 15px;
     background-color: rgb(240, 229, 211);
     border: 1px solid black;
     font-weight: normal;
     letter-spacing: 2px;
     color: rgb(64, 31, 7);
     padding: 5px;
}

 .thumbs {
     width: 100%;
     margin-top: 10px;
     width: 100px;
     height: 100px;     
     border-radius: 12px;
} 
 .thumb{
     width: 100px;
     height: 100px;
     margin-right: 20px;
     border: 1px solid gray;
     cursor:pointer;
     border-radius: 12px;
}

.thumb:hover{
     border: 3px solid darkseagreen;
}

 .price{
     font-size: 1.1rem;
     font-family: Arial, Helvetica, sans-serif;
     color:rgb(0, 77, 0);
     text-align: right;
}
 .price::after{
     font-size: 0.9rem;
     content: "\20BD";
}
 .price-offer{
     text-decoration: line-through;
     font-size: 0.9rem;
     color:gray;
}
 .price-offer::after{
     content: '₽';
}
 .price-label{
     font-style: italic;
     font-weight: 200;
     font-size: 0.9rem;
}
 .price-label::after, .price-label-bold::after{
     content:" - ";
}
 .price-label-bold{
     font-size: 1.3rem;
     font-weight: bold;
     color:green;
}
 .offerprice{
     display: block;
     font-size: 0.9rem;
     color: gray;
}
 .offerprice::after{
     content: '₽';
}
 .total-price{
     display: inline;
     font-size: 1.4rem;
     text-align: right;
}

.bottom-btn{
     padding:0 8px;
}

.four-buttons{
     padding-top: 6px;
     height: 45px;
}
.four-buttons .col2-4{  /* place to show img*/
     position: relative;
     width: 50px;
     height: 40px;
}
/* ========================================== */
.four-buttons .col2-4 img{
     width: 36px;
     aspect-ratio: 1/1;
     position:absolute; 
     bottom: 0; 
     right: 0;
}

.four-buttons .col2-4 .check{
     top: 12px;
     text-decoration:none;
     color:green;
}

/* =============================================== */
.prod-edit{
     position: absolute;
     top:0;
     left:0;
     border-radius: 50%;
     width:42px;
     background-color: #ea1710c0;
     z-index: 400;
     margin-bottom: 10px;
}
.edit-img{
     width: 34px;
     height: 34px;
     padding: 4px;
     background-color: white;
     border-radius: 50%;
}
.user-info{
     padding: 4px;
     margin-top: 4px;
     background-color: var(--bg-info);
}

.megusta-item{
    font-family: Arial, Helvetica, sans-serif;
    height:120px;
    margin-bottom: 6px;
}
.megusta-item-img{
    width:60px; height: 60px;
    border-radius: 8px;
}

.mg-item{
     width: 30%;
     text-align: center;
     font-size: 0.9rem;
     color: var(--text-info);
     background-color: bisque;
     border: 2px solid rgb(201, 201, 201);
}
.mg-item span{
     font-family: 'SansCondensedBold';
     display: block;
     padding: 10px;
}
.mg-item img{
     width: 40px;
     aspect-ratio: 1/1;
     cursor: pointer;
     padding: 7px;
     border: 1px solid var(--dark-gray);
     border-radius: 50%;
}
.mg-item:hover{
     border: 2px solid var(--alma-green);
     background-color: var( --soft-orange);
}

.mg-info-container{
     font-family: 'SansCondensedLight';
     font-size: 0.8rem;
     padding: 2px 40px;
}
.mg-info{
     display:none;
     color: (var--text-info)
}
.on-line{
     text-align: right;
}



.cart-price{
     padding: 10px 30px;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 0.85rem;
     color: rgb(79, 78, 78);
}

.cart-price span{
     display:block;
}
.badge{
     font-size: 14px!important;
     color:black;
}

.fin-table{
    width: 100%;
    text-align: right;
}
 .fin-price{
     font-size: 0.9rem;
     color:rgb(0, 77, 0);
     text-align: right;
}
 .fin-price::after{
     font-size: 0.9rem;
     content: "\20BD";
}
.fin-param{
    width: 80px;
}

 .fin-result{
     text-align: right;
     font-family: 'arial';
     font-size: 0.8rem;
}
/* ------------------------------------ */
.video-icon{
     position:absolute;
     right: 1px;
     bottom: 1px;
}
.video-icon img{ 
     width: 45px;
     height: 45px;
}
/* ------------------------------------ */
.megusta-icon{
     width: 28px;
     height: 28px;
}
.megusta-icon img{
     width: 100%;
     }
/* ---------------------------------- */
.megusta-item{
     float:left;
     position: relative;
     width: 140px!important;
     height: 86px;
     margin: 5px;
     padding: 5px;
     background-color: rgb(255, 250, 230);
     font-family: 'SansCondensedLight';
     font-size: 12px;
}    
.megusta-item img{
    width: 70px;
    height: 70px;
    border-radius: 12px;
}
.megusta-item .params{
     text-align: right;
     float:right;
     color: black;
     text-transform: uppercase;
}
.megusta-item text{
     font-family: 'SansCondensedBold';
     font-weight: bold;
     color:red;
     display: block;
     text-align: right;
     text-decoration: none;
} 

.order-btn{
     font-family: 'SansCondensedBold';
     color: green!important;
}


.spinner {
     position: absolute;
     top: 80px;
     left: 40%;
     z-index: 1000;
     display: none;
     width: 80px;
     height: 80px;
     border-radius: 50%;

     animation: rotate 1s linear infinite
     }
     .spinner::before , .spinner::after {
     content: "";
     box-sizing: border-box;
     position: absolute;
     inset: 0px;
     border-radius: 50%;
     border: 8px solid #fa0000;
     animation: prixClipFix 2s linear infinite ;
     }
     .spinner::after{
     border-color: #fcfbfa;
     animation: prixClipFix 2s linear infinite , rotate 0.5s linear infinite reverse;
     inset: 6px;
     }

      @keyframes rotate {
        0%   {transform: rotate(0deg)}
        100%   {transform: rotate(360deg)}
      }

      @keyframes prixClipFix {
          0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
          25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
          50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
          75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
          100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
      }

      .register-info{
          font-size: 12px;color:brown;
          text-align: center;
          /* display:block; */
      }
      .reservation-header{
          background-color: rgb(96, 94, 88);
          color:white;
          padding: 4px;
          text-align: center;
      }
      .reservation-info{
          text-align: center;
          font-size: 0.8rem;
          color:rgb(245, 249, 241);
      }