.show{
    display: block!important;
}

.hide{
    display: none!important;
}


a:hover{
    text-decoration: none!important;
}
 

.right{
    float: right;
}

.left{
    float: left;
}

.center{
    text-align: center;
}

.text-left{
    text-align: left;
}

.text-right{
    text-align: right;
}

.products-container .item{
    height: auto!important;
    background-color: transparent; /* #fafafa; */
    margin-top: 30px;
    padding-top: 0;
    padding-bottom: 30px;
    border: 1px solid transparent!important;
    border-radius: 6px;
    transition: box-shadow 0.35s ease, border-color 0.35s ease, transform 0.35s ease;
}


.products-container .sold-out img{
    filter: grayscale(100%);
}


.products-container .item-inner{
    border:0!important;
}

/* Premium hover/active state: replace the harsh 1px gold outline with a soft
   elevated shadow + a faint warm border tint. Reads as a lifted card rather
   than a boxed-in rectangle. The same treatment is applied to the similar /
   also carousels for visual parity across the catalog. */
.products-container .item.categories-item-hover,
.similar-items-carousel .item.categories-item-hover,
.also-items-carousel .item.categories-item-hover {
    border: 1px solid rgba(194, 164, 112, 0.35)!important;
    box-shadow: 0 12px 28px -12px rgba(43, 33, 14, 0.22),
                0 4px 10px -4px rgba(43, 33, 14, 0.10);
    z-index: 10;
}

.products-container .item.border-white,
.similar-items-carousel .item.border-white,
.also-items-carousel .item.border-white {
    border-width: 1px;
}

/* Hoist the favourite-heart out of the image overlay and into a small row
   above the gallery. When .svg-box is a direct child of .item-inner (the new
   structure in ProductGrid.tsx) we strip the absolute top-right positioning
   inherited from main.css and right-align it as a normal block instead.
   `position: relative; z-index: 2` lets it sit above the full-card click
   overlay so the heart receives its own clicks. */
.products-container .item .item-inner > .svg-box {
    position: relative;
    z-index: 2;
    width: 32px;
    height: 32px;
    margin: 8px 8px 8px auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Make the entire card clickable: a transparent <Link> overlay covers the
   item-inner, while interactive children (heart, swatches, gallery arrows)
   sit above it via z-index. The overlay is invisible and takes the whole
   card area so any click on background regions (title, price, padding)
   navigates to the product page. */
.products-container .item .item-inner {
    position: relative;
}

.products-container .item .item-inner > .item-click-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
}


.products-container .item-inner{
    height: auto!important;
    background-color: transparent;
}

.products-container .item .desc{
    display: block!important;
    background-color: transparent;
    overflow: visible!important;
    margin-top: 16px;
}

.products-container .item .full-div{
    background-color: transparent;
    height: auto !important;
    aspect-ratio: 1 / 1;
}

/* Match the legacy zarapkhana.ge grid track width (200–305 px) so cards render
   at the same density and the image area stays square at every cell width.
   Column gap widened for visible breathing room between cards; row gap stays
   at 0 because `.item` already provides 30 px top/bottom padding + 30 px
   top-margin (see `.products-container .item` above), so adding row-gap on
   top of that would compound into excessive vertical whitespace. */
.products-container{
    grid-template-columns: repeat(auto-fill, minmax(200px, 305px)) !important;
    grid-column-gap: 24px !important;
    column-gap: 24px !important;
}

/* Filtered listing has a fixed left sidebar — pin the grid to exactly 3 columns
   so cards stay legacy-parity sized instead of stretching to ~400 px wide when
   `auto-fill` decides only 2 of the wider 305 px tracks fit. */
.products-with-filter .products-container{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* On mobile the filter sidebar moves off-canvas, so the 3-column rationale
   above no longer applies. Stack cards one per row so titles and prices have
   the full viewport width to breathe. */
@media (max-width: 750px) {
    .products-container,
    .products-with-filter .products-container {
        grid-template-columns: 1fr !important;
        grid-column-gap: 0 !important;
        column-gap: 0 !important;
    }

    /* Touch devices have no :hover, so the gallery prev/next arrows
       (revealed by .item:hover in main.css) would never appear. Force
       them visible on mobile so users can swipe through images. */
    .products-container .item .full-div .slick-arrow {
        opacity: 1 !important;
        display: block !important;
    }
}



.products-container .item .price-info{
    display: none;
}

.products-container .item .price-info.show{
    display: block;
}

.product-image-slider{
    width: 200px;
    display: none;
    opacity: 0;
}

.product-image-slider .slick-track{
    margin:0;
}


.product-image-slider .slick-prev:before {
    display: none;
}

.product-image-slider .slick-next:before {
    display: none;
}


.product-image-slider .slick-prev {
    left: -25px;
    background: url(./images/arrow-prev.png) center center no-repeat;
    z-index: 9999;
}

.product-image-slider .slick-next {
    right: -25px;
    background: url(./images/arrow-next.png) center center no-repeat;
    z-index: 9999;
}

/* Rounded hover effect for product navigation buttons */
.products-container .item .full-div .slick-prev,
.products-container .item .full-div .slick-next {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.3s ease;
    font-size: 0;
    line-height: 0;
    top: 50%;
    transform: translateY(-50%);
}

.products-container .item .full-div .slick-prev:hover,
.products-container .item .full-div .slick-next:hover {
    background-color: rgba(255, 255, 255, 0.9);
}

.products-container .item .full-div .slick-prev::before,
.products-container .item .full-div .slick-next::before {
    font-size: 24px;
    line-height: 30px;
    position: relative;
    top: -2px;
}

/* Closest shops - align items with space between */
.closest-shops > .container {
    justify-content: space-between;
}

/* Product Detail Gallery - Thumbnails on left, main image on right */
.item-detail-carousel-container {
    display: flex;
    gap: 20px;
}

.carousel-thumbnails {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 100px;
}

.carousel-thumbnails .thumbnail {
    cursor: pointer;
    transition: all 0.3s ease;
}

.carousel-thumbnails .thumbnail:hover {
    opacity: 0.8;
}

.item-detail-carousel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login {
    width: 100%;
    margin: 0 auto 80px;
    max-width: 350px;
}

.login .part {
    padding: 25px 15px;
}

.login .login-head {
    border-bottom: 0;
}


.login .form-control-part {
    background: #ffffff;
    padding: 15px 15px;
    margin-left: -15px;
    margin-right: -15px;
    border-top: 0;
    border-radius: 5px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.login .or{
	display: block;
    text-align: center;
    padding: 15px 0 0 0;
    text-transform: uppercase;
}

.login .info {
    padding: 15px 0;
    text-align: left;
    margin-right: -15px;
    margin-left: -15px;
    font-size: 12px;
    font-family: 'Firago';
    text-align: left;
}


.login .msg {
    color: red;
    font-family: 'Firago';
    display: block;
    margin-left: -15px;
    margin-right: -15px;
    FONT-SIZE: 14PX;
}

.login .success {
    color: #008092;
    font-family: 'Zarafxana-Bold';
    display: block;
    margin-left: -15px;
    margin-right: -15px;
    FONT-SIZE: 18PX;
    text-align: center;
}


.login .input {
    padding: 15px 0 0 0;
    margin-right: -15px;
    margin-left: -15px;
}


.login .title2 {
    font-family: 'Firago';
    font-weight: 700;
    font-size: 16px;
    padding-bottom: 0;
}


.login h1 {
    margin: 50px 0 0 0;
    text-transform: uppercase;
    padding-left: 50px;
    display: inline-block;
    position: relative;
    color: #4b4b4b;
}


.login h1:before {
    position: absolute;
    top: 50%;
    height: 2px;
    width: 40px;
    left: 0;
    content: '';
    display: block;
    background: #4b4b4b;
}


.login .field-title{
	display: block;
	padding: 3px 0;
    text-transform: uppercase;
    color: #666666;
}

.login input[type="text"],
.login input[type="password"]{
	display: block;
    width: 100%;
    height: 50px;
    border: 1px solid #ebebeb;
	border-radius: 4px;
	padding-left: 30px;
    transition: 0.3s;
    color: #666666;

}

.login input[type="text"]{
	background: url('./images/user-(7).png') left 8px center no-repeat;
}

.login input[type="text"]:hover{
	border: 1px solid #666666;
    box-shadow: 1px 1px 10px 3px #00000012;
}

.login input[type="password"]{
	background: url('./images/icons8-unlock-24-(1).png') left 8px center no-repeat;
}

.login input[type="password"]:hover{
	border: 1px solid #666666;
    box-shadow: 1px 1px 10px 3px #00000012;
}


.login .button{
	display: block;
    width: 100%;
	height: 50px;
    line-height: 50px;
	background: #008092;
	border: 0;
	color: #fff;
	text-transform: uppercase;
	border-radius: 4px;
}


.login .facebook-but{
	display: block!important;
    background: #1877F2 url(./images/szGrb_tkxMW.png) no-repeat;
    color: #fff;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border-radius: 4px;
    background-position: 10px center;
    text-decoration: none;
}

.login .fp{
	text-transform: uppercase;
	color: #666666;
}


.login .regtitle{
	color: #666666;
}




.Profile {
    width: 100%;
    margin: 0 auto 80px;
    max-width: 350px;
}

.Profile .part {
    padding: 25px 15px;
}

.Profile .Profile-head {
    border-bottom: 0;
}


.Profile .form-control-part {
    background: #ffffff;
    padding: 15px 15px;
    margin-left: -15px;
    margin-right: -15px;
    border-top: 0;
    border-radius: 5px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.Profile .or{
	display: block;
    text-align: center;
    padding: 15px 0 0 0;
    text-transform: uppercase;
}

.Profile .info {
    padding: 15px 0;
    text-align: left;
    margin-right: -15px;
    margin-left: -15px;
    font-size: 12px;
    font-family: 'Firago';
    text-align: left;
}


.Profile .msg {
    color: red;
    display: block;
    margin-left: -15px;
    margin-right: -15px;
    FONT-SIZE: 14PX;
}


.Profile .input {
    padding: 15px 0 0 0;
    margin-right: -15px;
    margin-left: -15px;
}

.Profile .input label {
    display: block;
    margin-bottom: 5px;
}


.Profile .title2 {
    font-family: 'Firago';
    font-weight: 700;
    font-size: 16px;
    padding-bottom: 0;
}


.Profile h1 {
    margin: 50px 0 0 0;
    text-transform: uppercase;
    padding-left: 50px;
    display: inline-block;
    position: relative;
    color: #4b4b4b;
}


.Profile h1:before {
    position: absolute;
    top: 50%;
    height: 2px;
    width: 40px;
    left: 0;
    content: '';
    display: block;
    background: #4b4b4b;
}


.Profile .field-title{
	display: block;
	padding: 3px 0;
	text-transform: uppercase;
}

.Profile input[type="text"],
.Profile input[type="password"]{
	display: block;
    width: 100%;
    height: 50px;
    border: 1px solid #ebebeb;
	border-radius: 4px;
	padding-left: 7px;
	transition: 0.3s;
}


.Profile textarea{
	display: block;
    width: 100%;
    height: 100px;
    border: 1px solid #ebebeb;
	border-radius: 4px;
	padding-left: 7px;
	transition: 0.3s;
}

.Profile textarea:hover{
	border: 1px solid #008092;
    box-shadow: 1px 1px 10px 3px #00000012;
}


.Profile input[type="text"]:hover{
	border: 1px solid #008092;
    box-shadow: 1px 1px 10px 3px #00000012;
}

.Profile input[type="password"]:hover{
	border: 1px solid #008092;
    box-shadow: 1px 1px 10px 3px #00000012;
}


.Profile .button{
	display: block;
    width: 100%;
	height: 50px;
    line-height: 50px;
	background: #008092;
	border: 0;
	color: #fff;
	text-transform: uppercase;
	border-radius: 4px;
}


.Profile .facebook-but{
	display: block!important;
    background: #1877F2 url(./images/szGrb_tkxMW.png) no-repeat;
    color: #fff;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border-radius: 4px;
    background-position: 10px center;
}

.Profile .fp{
	text-transform: uppercase;
	color: #000;
}


.mybasket {
    display: inline-block;
    padding-left: 20px;
    background: url('./images/mypage/icons8-shopping-bag-24.png') center left no-repeat;
    background-size: 16px auto;
}


.Profile .regtitle{
	
}


.login-content-part{
	background: #fbfbfb;
}


.Profile .form-control-part{
	background: transparent;
}


.mypage-panel .title-part {
    background: #fbfbfb;
    max-width: initial;
    margin-bottom: 5px;
}


.mypage-panel h1{
	padding: 15px;
    margin: 0;
    display: block;
    text-align: left;
    font-size: 22px;
}


.mypage-panel h1:before{
	display: none;
}




.cart-item{
	background: #fbfbfb;
	padding: 30px 15px 15px;
	position:relative;
	margin-bottom: 15px;
}


.cart-item .devh{
	display: block;
    height: 1px;
    background: #f4f4f4;
    border: 0;
    margin: 20px 0;
}


.cart-item .desc{
	margin-bottom: 40px;
}


.cart-item .cancel{
	content: '';
    display: block;
    width: 12px;
    height: 12px;
    TOP: 0;
    RIGHT: 0;
    position: absolute;
    background: url(images/cancel.png) center center no-repeat;
	margin: 20px;
}


.cart-item img{
	border: 1px solid #f1f1f1;
	border-radius: 5px;
	width: 100%;
	height: auto;
}


.cart-item .but{
    display: block;
    padding: 8px;
    text-align: center;
    background: #008092;
    color: #fff;
    border-radius: 5px;
    margin: 0 0 15px 0;
    text-decoration: none;
}


.cart-item .price{
	color: #4b4b4b;
    text-align: center;
    display: block;
    font-size: 22px;
}


.cart-item-table{
	display: table;
	position:absolute;
	width:100%;
	height: 100%;
}


.cart-item-table-cell{
	display: table-cell;
	position:relative;
	width: 100%;
	height: 100%;
	vertical-align:middle;
}



.total-price-display{
	background: #fbfbfb;
    padding: 15px;
    border-radius: 6px;
}

.total-price-display .title{
	display:block;
	border-bottom: 1px solid #f4f4f4;
	padding: 0 0 15px 0;
}

.total-price-display .display-row:after{
	content: '';
	position: relative;
	display: block;
	clear:both;
}


.checkout-but{
	position: relative;
    display: block;
    text-align: center;
    padding: 12px;
    background: #7e9289;
    color: #fff;
    margin: 15px 0;
    text-decoration: none;
}


.total-price-display .display-row{
	margin-bottom: 20px;
}


.mypage-page{
	background: #fbfbfb;
    padding: 15px;
}


.cart-item .part{
	padding: 0 0 15px 0;
	position: relative;
    height: 100%;
}

.cart-item .title{
	display: block;
    color: #4b4b4b;
}




.mypage-menu{
	display: block;
    background: #fbfbfb;
    padding: 40px 0px;
}


.mypage-menu .item{
	display: block;
	padding: 15px 15px 15px 65px;
	position:relative;
	color: #4b4b4b;
}

.mypage-menu .item:before{
	content: '';
	display: block;
	width: 5px;
	height: 100%;
	top:0;
	left: 0;
	background: #008092; 
	position: absolute;
	transition: 0.4s;
	opacity: 0;
}

.mypage-menu .item:hover{
	color: #008092;
}

.mypage-menu .item.active{
	color: #008092;
}

.mypage-menu .item.active:before{
	opacity: 1;
}

.mypage-menu .item:hover:before{
	opacity: 1;
}



.mypage-menu .myprofile{
	background:  url('./images/mypage/icons8-customer-24.png') left 22px center no-repeat;
}

.mypage-menu .myprofile:hover{
	background: #f7f8f9 url('./images/mypage/icons8-customer-24.png') left 22px center no-repeat;
}

.mypage-menu .myprofile.active{
	background: #f7f8f9 url('./images/mypage/icons8-customer-24.png') left 22px center no-repeat;
}

.mypage-menu .myorders{
	background:  url('./images/mypage/icons8-shopping-bag-24.png') left 22px center no-repeat;
}

.mypage-menu .myorders:hover{
	background: #f7f8f9 url('./images/mypage/icons8-shopping-bag-24.png') left 22px center no-repeat;
}

.mypage-menu .myorders.active{
	background: #f7f8f9 url('./images/mypage/icons8-shopping-bag-24.png') left 22px center no-repeat;
}

.mypage-menu .favorites{
	background:  url('./images/mypage/icons8-heart-24.png') left 22px center no-repeat;
}

.mypage-menu .favorites:hover{
	background: #f7f8f9 url('./images/mypage/icons8-heart-24.png') left 22px center no-repeat;
}

.mypage-menu .favorites.active{
	background: #f7f8f9 url('./images/mypage/icons8-heart-24.png') left 22px center no-repeat;
}


.mypage-menu .payments{
	background:  url('./images/mypage/icons8-wallet-24.png') left 22px center no-repeat;
}

.mypage-menu .payments:hover{
	background: #f7f8f9 url('./images/mypage/icons8-wallet-24.png') left 22px center no-repeat;
}

.mypage-menu .payments.active{
	background: #f7f8f9 url('./images/mypage/icons8-wallet-24.png') left 22px center no-repeat;
}

.mypage-menu .passwords{
	background:  url('./images/icons8-unlock-24-(1).png') left 22px center no-repeat;
}


.mypage-menu .passwords:hover{
	background: #f7f8f9 url('./images/icons8-unlock-24-(1).png') left 22px center no-repeat;
}

.mypage-menu .passwords.active{
	background: #f7f8f9 url('./images/icons8-unlock-24-(1).png') left 22px center no-repeat;
}

.mypage-menu .signout{
	background:  url('./images/mypage/icons8-sign-out-24.png') left 22px center no-repeat;
}

.mypage-menu .signout:hover{
	background: #f7f8f9 url('./images/mypage/icons8-sign-out-24.png') left 22px center no-repeat;
}

.mypage-menu .signout.active{
	background: #f7f8f9 url('./images/mypage/icons8-sign-out-24.png') left 22px center no-repeat;
}


.wrapper{
    margin-top: 140px;
}


.filter {
    min-height: 50px;
    background: #fff;
    padding: 21px;
    display: block;
    margin-bottom: 20px;
    max-width: 250px;
}


.arrow22 {
    border: solid #999999;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    float: right;
    top: 0;
    margin-top: -35px;
    margin-right: 15px;
  }
  
  .arrow22-right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
  }
  
  .arrow22-left {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
  }
  
  .arrow22-up {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
  }
  
  .arrow22-down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
  }

.filter .title {
    color: #666666;
    padding: 20px 0 0 0;
}


.filter .block {
    position: relative;
    margin: 0;
}

.filter .devider{
   /* border-top: 1px solid #DFDFDF;*/
}


.filter .block .title2 {
    padding: 0 0 4px 0;
    color: #008092;
}


.filter .block .part {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
    opacity: 0;
}

.filter .block .part.open {
    max-height: 1000px;
    opacity: 1;
    transition: max-height 0.4s ease-in, opacity 0.4s ease-in;
}

.filter .block .part ul {
    overflow: hidden;
}


.filter .block li {
    position: relative;
    padding: 3px 0;
}

.filter .block li:first-child{
    padding-top: 15px;
}


.filter .block label {
    font-weight: bold;
    line-height: 24px;
    margin-bottom: 0px;
    display: block;
    width: 100%;
}


.customCheckbox {
    float: left;
    position: relative;
    width: 20px;
    height: 20px;
    background: transparent;
    border-radius: 2px;
    border: 1px solid #9F9F9F;
    box-shadow: inset 0px 1px 0px rgba(0, 0, 0, 0.1);
    margin-right: 10px;
    overflow: hidden;
    display: inline-block;
}


.customCheckbox.customCheckboxChecked {
    background: #008092;
    border: 0;
}

.filter .checkbox-title {
    display: inline-block;
    vertical-align: top;
    width: 80%;
    color: #666666;
}


.customCheckbox input {
    opacity: 0;
    cursor: pointer;
    z-index: 5;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}


.customCheckbox span {
    display: none;
    text-align: center;
    line-height: 20px;
    font-size: 90%;
    color: white!important;
    font-family: Tahoma;
    --font-family-sans-serif: Tahoma;
    --font-family-monospace: Tahoma;
}


.filter .block .show-all {
    font-family: "Zarafxana-Bold";
    font-weight: 700;
    /* font-size: 12px; */
    color: #000;
    /* background: #008092; */
    padding: 10px;
    text-decoration: none;
    padding: 0 0 15px 0;
    color: #999999;
    border-bottom: 1px solid #c4c4c4;
    display: block;
}

.filter .part{
    margin: 0 0 18px 0;
}

.clear-filter-block {
    font-family: 'Firago';
    font-size: 12px;
    color: rgb(61, 61, 61);
    /* float: right; */
    text-decoration: none;
    display: block;
    
    /*
    width: 25px;
    height: 30px;
    background: url('images/recycle-bin-icon-trash-symbol-garbage-free-vector.png');
    background-size: auto 100%;
    background-repeat: no-repeat;
    position: relative;
    margin-top: -5px;*/
}


.PriceRange{
	margin: 20px;
}


.noUi-connect {
    background: #008092;
}


.noUi-handle:after, .noUi-handle:before{
	display:none;
}

.noUi-handle {
	border: 5px solid #008092;
    border-radius: 3px;
    background: #FFF;
    cursor: default;
    box-shadow: none;
    border-radius: 50%;
    width: 25px!important;
    height: 25px!important;
    /* background: #008092; */
    margin-top: -3px;
}


.noUi-target {
    background: #e0e0e0;
    border-radius: 4px;
    border: 0;
    box-shadow: none;
}

.filter .block .price-part{
	overflow:visible;
}


.noUi-horizontal {
	height: 8px;
	margin-top: 30px;
}


.noUi-horizontal .noUi-tooltip {
    -webkit-transform: translate(-50%,0);
    transform: translate(-50%,0);
    left: 50%;
    bottom: 150%;
}




.item .price-old{
    display: inline-block;
    margin-right: 8px;
    text-decoration: line-through;
    opacity: 0.7;
    padding: 0;
    color: #666666;
    font-size: 14px;
    font-family: "Firago-Bold";
    white-space: nowrap;
}

.item .price-new{
    display: inline-block;
    padding: 0;
    margin-right: 8px;
    color: #666666;
    font-size: 14px;
    font-family: "Firago-Bold";
    white-space: nowrap;
}

.item .price-new2{
    display: inline-block;
    padding: 13px 0 0 0;
    margin-right: 15px;
    font-size: 27px;
    color: #008092;
}


.item .price-discount{
    display: inline-block;
    font-family: 'Firago';
    font-weight: 700;
    font-size: 12px;
    color: #fff;
    background: #008092;
    padding: 10px;
    text-decoration: none;
}


.product-mo-other{
    padding: 15px 0;
}


.product-mo-other a{
    display: inline-block;
    margin-right: 15px;
}

.product-mo-other a:hover{
    border: 1px solid #dbdbdb;
}

.product-mo-other .active{
    border: 1px solid #c1a371!important;
}

.product-number{
    display: block;
    padding: 15px 0 15px 0;
    font-size: 14px;
}


.simple-but{
    display: inline-block;
    padding: 13px 0 0 0;
    font-family: 'Firago';
    font-weight: 700;
    font-size: 12px;
    color: #fff;
    background: #008092;
    padding: 10px 20px;
    text-decoration: none;
}

.gold-but{
    display: block;
    padding: 13px 0 0 0;
    font-family: 'Zarafxana-bold';
    font-weight: 700;
    font-size: 26px;
    color: #fff;
    background: #c1a371;
    padding: 10px 20px;
    text-decoration: none;
    width: 100%;
    max-width: 260px;
    text-align: center;
    margin: 35px 0 0;
}

.gold-but1{
    display: block;
    padding: 13px 0 0 0;
    font-family: 'Zarafxana-bold'!important;
    font-weight: 700;
    font-size: 26px!important;
    color: #fff!important;
    background: #c1a371!important;
    padding: 10px 20px!important;
    text-decoration: none;
    width: 100%;
    /* max-width: 260px;*/ 
    text-align: center;
    margin: 35px 0 0;
}

.gold-but:hover{
    color: #fff;
}

.product-desc-title{
    color: #c1a371;
    font-size: 17px;
    font-family: "Zarafxana-Bold";
    display: block;
    padding: 7px 0;
}

.product-desc-1,
.product-desc-2{
    display: none;
}

.tab-but{
    display: inline-block;
    margin-right: 15px;
}

.tab-active{
    color: #919191!important;
    text-decoration: none;
}


.tab-active-item{
    display: block;
}

.product-desc-title2{
    color: #919191;
    font-size: 14px;
    font-family: "Firago";
    display: block;
    padding: 4px 0;
}

.product-desc{
    color: #919191;
    font-size: 12px;
    font-family: "Firago";
    padding: 15px 0;
    line-height: 22px;
}

@keyframes ldio-k505yta52gr {
    0%    { transform: translate(2px,2px) }
   33.33% { transform: translate(102px,2px) }
   66.66% { transform: translate(42px,102px) }
  100%    { transform: translate(2px,2px) }
}


.ldio-k505yta52gr > div {
  transform: scale(0.8);
  transform-origin: 100px 100px;
}

.ldio-k505yta52gr > div > div {
  animation: ldio-k505yta52gr 1s linear infinite;
  position: absolute
}

.ldio-k505yta52gr > div > div div:nth-child(1) {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 12px solid #4996a2;
  background: #fff;
}

.ldio-k505yta52gr > div > div div:nth-child(2) {
  width: 17px;
  height:  51px;
  transform: rotate(-45deg);
  background: #4996a2;
  border-radius: 0 0 8px 8px;
  position: absolute;
  top: 68px;
  left: 85px
}
.loadingio-spinner-magnify-iwa53w0511 {
    width: 200px;
    height: 200px;
    display: inline-block;
    overflow: hidden;
    /* background: #f1f2f3; */
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 99999;
    margin-top: -100px;
    margin-left: -100px;
}
.ldio-k505yta52gr {
  width: 100%;
  height: 100%;
  position: relative;
  transform: translateZ(0) scale(1);
  backface-visibility: hidden;
  transform-origin: 0 0; /* see note above */
}
.ldio-k505yta52gr div { box-sizing: content-box; }
/* generated by https://loading.io/ */

.products-grid-wrapper {
    position: relative;
    flex: 1;
    min-width: 0;
}

@media (min-width: 751px) {
    .products-with-filter > #fixed {
        min-width: 250px;
    }
}

.loading-back{
    display: block;
    background: rgba(255, 255, 255, 1);
    width:100%;
    height: 100%;
    top:0;
    left:0;
    position:absolute;
    z-index:99998;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
}


.loading-back-show{
    opacity: 1;
    visibility: visible;
}


.main-header .header-navigation .header-navigation-inner .left{
    opacity:0;
    transition: 0.5s;
}

.main-header .header-navigation .header-navigation-inner .left-show{
    opacity: 1;
}


.similar-products .item .price-info {
    display: none;
}


.similar-products .product-image-slider{
    margin: auto;
}

.similar-products .product-option-icon img{
    width: initial;
}

.product-option-icon img{
    width: 25px;
    height: 25px;
}

.similar-products .item{
    min-height: 360px;
}

/* Horizontal scroller styles for similar/also products */
.similar-products,
.also-products {
    width: 100%;
    max-width: 1170px;
    margin: 0 auto;
    overflow: hidden;
    padding: 0 15px;
    box-sizing: border-box;
}

.similar-products .products-container,
.also-products .products-container {
    display: flex !important;
    grid-template-columns: none !important;
    width: 100%;
    /* Scrollbar styling now lives in globals.css via SimpleBar overrides
       on .simplebar-scrollbar — see ProductGrid horizontal mode. */
}



.also-products .item .price-info {
    display: none;
}


.also-products .product-image-slider{
    margin: auto;
}

.also-products .product-option-icon img{
    width: initial;
}

.product-option-icon img{
    width: 25px;
    height: 25px;
}

.also-products .item{
    min-height: 360px;
}

/* PDP cross-sell tiles (Also products / Similar products) render ProductGrid
   in horizontal mode → wrapped in .products-row-scroll (NOT .products-container),
   so none of the .products-container .item rules above reach them. Re-establish
   the same behaviour here, keyed on .products-row-scroll (present on both the
   .also-items-carousel and .similar-items-carousel rows). Loaded after main.css
   so these win on cascade order at equal specificity. Fixes: (a) dead card body
   — the .item-click-overlay <a> had no positioning and was collapsed to 0x0 by
   main.css `.*-items-carousel a { display:flex }`; (b) image overlapping text —
   .full-div had a fixed height:245px (image overflowed) and .desc was display:none. */
.products-row-scroll .item { height: auto !important; }

.products-row-scroll .item .item-inner { position: relative; }

.products-row-scroll .item .item-inner > .item-click-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
}

.products-row-scroll .item .item-inner > .svg-box {
    position: relative;
    z-index: 2;
}

.products-row-scroll .item .full-div {
    aspect-ratio: 1 / 1;
    height: auto !important;
    background-color: transparent;
}

.products-row-scroll .item .desc {
    display: block !important;
    margin-top: 16px;
    overflow: visible;
    background-color: transparent;
}

.products-row-scroll .item .desc .text {
    display: block;
    text-align: center;
    width: 100%;
}


/* Moved to Header.global.scss */

.menu-div-item{
    margin-bottom: 15px;
}

.menu-div-item a{
    color: #000000!important;
}

.main-dropdown__container .row{
    width: 100%;
}

 
.main-slider-container.slider-margin .slider-item{
    min-height: 25vh;
    height: auto;
   /* max-height: 80vh; */
    overflow: hidden;
}

.product-header-item img{
    height: auto;
    position: relative;
}


.main-collection__container {
    margin-bottom: 50px;
}

.main-collection__container .collection-item{
    max-height: 55vh;
}


.main-section-banner .slider-btn {
    cursor: pointer;
    outline: none;
    min-width: 200px;
    height: 50px;
    padding: 0 10px;
    font-size: 16px;
    color: #c2a470;
    font-family: "Firago";
    background-color: #fff;
    border: 1px solid #c2a470;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


.main-section-banner .slider-btn:hover {
    color: #fff;
    border-color: #008092;
    background-color: #008092;
}



.news-inner .imagebox img{
    height: auto;
    position: relative;
}

.news-inner .imagebox{
    height: auto;
}


.collection-item .slider-item2{
    left: 150px;
    right: initial;
}

.collection-slider__container .owl-nav{
    left: 60px;
    right: initial;
}

.heart-svg-a{
    display: block;
    padding: 0 15px;
    position: relative;
}

.heart-svg{
    display: block;
    margin: 0;
    position: relative;
}

.swal-button {
    background-color: #008092!important;
    color: #fff;
    border: none;
    box-shadow: none;
    border-radius: 5px;
    font-weight: 600;
    font-size: 14px;
    padding: 10px 24px;
    margin: 0;
    cursor: pointer;
}


.swal-modal {
    width: 478px;
    opacity: 0;
    pointer-events: none;
    background-color: rgb(255 255 255 / 82%);
    text-align: center;
    border-radius: 5px;
    position: static;
    margin: 20px auto;
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    z-index: 10001;
    transition: opacity .2s,-webkit-transform .3s;
    transition: transform .3s,opacity .2s;
    transition: transform .3s,opacity .2s,-webkit-transform .3s;
}


.swal-text {
    font-size: 16px;
    position: relative;
    float: none;
    line-height: normal;
    vertical-align: top;
    text-align: left;
    display: inline-block;
    margin: 0;
    padding: 0 10px;
    font-weight: 400;
    color: #000;
    max-width: calc(100% - 20px);
    overflow-wrap: break-word;
    box-sizing: border-box;
}


.swal-footer {
    text-align: center;
    padding-top: 13px;
    margin-top: 13px;
    padding: 13px 16px;
    border-radius: inherit;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}


.product-title{
	padding: 20px;
}



@media (max-width:1023px){
    .collection-slider__container .owl-nav {
        left: initial;
        /* right: initial; */
    }
    .jewels-banner .desc-table {
        position: relative;
        text-align: center;
        padding: 30px 30px;
        width: 100%;
        display: table;
        height: 100%;
    }

    .wrapper{
        margin-top: 55px;
    }

    .slider-item{
        margin-top: 0;
    }

    .main-slider .owl-dots{
        top: 30px;
    }
}


@media (max-width:723px){
	
	.product-title{
		font-size: 14px;
	}
	
    .collection-slider__container .owl-nav {
        left: initial;
        right: initial;
        /* margin: auto; */
        display: flex;
        left: 50%;
        margin-left: -360px;
        position: absolute;
    }


    .our-products .grid .four-item .four-item-row .item{
        /*height: auto!important;*/
    }


    .our-products .grid .four-item .four-item-row .item img{
        height: 100%;
        width: auto;
        margin: auto;
    }


    .our-products .grid .four-item{
        height: 450px;
    }

    .our-products .grid .grid-item1 {
        height: 470px;
    }
}



.products-container .item .desc .text{
    display: block;
    text-align: center;
    width: 100%;
}


.products-container .item .fav {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    background: url(./images/fav.png);
    background-position: center 0px;
    transition: 0.3s;
    display: block;
    z-index: 9;
    background-size: 100% auto;
}


.products-container .item .delete {
    position: absolute;
    top: 10px;
    right: 10px;
    background-position: center 0px;
    transition: 0.3s;
    display: block;
    z-index: 9;
    background-size: 100% auto;
}


.products-container .item .fav:hover {
    background-position: center 28px;
}


.header-navigation-inner .nice-select .current{
    color: #999999;
}


.modal-header{
    border-bottom: 0;
}

.modal-footer{
    border-top: 0;
}


.modal-header .back{
    font-family: "Firago";
    font-size: 14px;
    /* float: right; */
    position: absolute;
    right: 45px;
    padding: 2px;
    color: #000;
}

.modal-footer .back{
    font-family: "Firago";
    font-size: 14px;
    position: relative;
    padding: 0 17px 17px;
    color: #000;
}



.field{
    border: 1px solid #acacac;
    background: #fff;
    border-radius: 4px;
    line-height: normal;
    vertical-align: middle;
    transition: border-color 0.1s;
    padding: 6px 8px;
    font-size: 16px;
    height: 36px;
    width:100%;
    max-width: 350px;
}

.area{
    border: 1px solid #acacac;
    background: #fff;
    border-radius: 4px;
    line-height: normal;
    vertical-align: middle;
    transition: border-color 0.1s;
    padding: 6px 8px;
    font-size: 16px;
    height: 150px;
    width:100%;
    max-width: 350px;
}



fieldset {
    display: block;
    margin-inline-start: 2px;
    margin-inline-end: 2px;
    padding-block-start: 0.35em;
    padding-inline-start: 0.75em;
    padding-inline-end: 0.75em;
    padding-block-end: 0.625em;
    min-inline-size: min-content;
    border-width: 1px;
    border-style: groove;
    border-color: #fff;
    border-image: initial;
    border: 1px solid #d1d1d1;
    border-radius: 5px;
}


legend {
    display: block;
    width:auto;
    padding-inline-start: 2px;
    padding-inline-end: 2px;
    border-width: initial;
    border-style: none;
    border-color: initial;
    border-image: initial;
    padding: 10px;
}

.order-item-cart-menu-opened-wrapper{
    position:relative;
}

.order-item-cart-menu-opened{
    margin-top: 27px;    
}

.fixed-menu {
    position: fixed;
    right: auto;
    top: 125px;
}


object-room-loader {
    display: block;
    margin-top: 28px;
}


.absolute-menu {
    
    right: auto;
}


.absolute-menu-bottom {
    bottom: 15px;
}

.err{
    border: 1px solid red;
}


.search-tool-filter-but {
    width: 50px;
    height: 49px;
    background: #008092 url(../../images/lupa.png) center center no-repeat;
    display: none;
    position: fixed;
    left: 0;
    top: 50%;
    z-index: 9999;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    background-size: 80% auto;
}




.no-scroll{
    overflow: hidden;
}


.close-mobile-search {
    display: none;
    position: fixed;
    width: 30px!important;
    height: 30px;
    background: #fff url(../../images/close_button_2-512.png) center center no-repeat;
    top: 0!important;
    z-index: 99999;
    border-radius: 50%;
    background-size: 100% auto;
    left: -50px;
}


.btn {
    position: relative;
    box-sizing: border-box;
    display: inline-block;
    line-height: 1;
    padding: 0 15px;
    outline: 0;
    border: none;
    background: transparent;
    text-align: center;
    text-decoration: none!important;
    vertical-align: middle;
    cursor: pointer;
    white-space: nowrap;
    border-radius: 4px;
    color: #006C8E;
    border: 1px solid #ebebeb;
    background: #fff;
    box-shadow: none;
    height: 38px;
    line-height: 38px;
    font-size: 18px;
    transition: all .15s;
}


.dropdown-item{
    white-space: initial;
}



/* Moved to Header.global.scss */

.mobile-menu > ul{
    z-index: 2;
    list-style: none;

    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0;
}

.mobile-menu .mobile-menu-back{
    width: 100%;
    height: 100%;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index: -1;
}


.mobile-menu{
    overflow: hidden;
    z-index: 99991;
}


.no-scroll{
    overflow: hidden;
}





.sorting{
    display: block;
    height: 70px;
    color: #999999;
}

.sorting .select {
    display: inline-block;
    
    height: 30px;
    border-radius: 3px;
    overflow: hidden;
    vertical-align: middle;
    position: relative;
    background: #fff;
    color: #999999;

}


.sorting .select:before {
    content: '';
    display: none;
    position: absolute;
    top: 0;
    right: 30px;
    width: 1px;
    height: 30px;
    border-left: 1px solid #d1d1d1;
    z-index: 0;
}

.sorting .select:after {
    content: '';
    display: none;
    width: 5px;
    height: 5px;
    border-top: 5px solid #6b6b6b;
    border-left: 5px solid #fff;
    top: 50%;
    right: 9px;
    border-right: 5px solid #fff;
    position: absolute;
    margin-top: -1px;
}

.sorting .select select {
    border: 0;
    height: 30px;
    padding: 0 30px 0 10px;
    border-radius: 3px;
    width: 100%;
    background: #fff;
    color: #999999;
    border: 1px solid #d1d1d1;
    outline: none;
}


.sorting .select select::-ms-expand {
    display: none;
}



.view .th {
    background: #fff;
    padding: 16px 5px;
    font-weight: bold;
}

/*
.view .row:hover .view-td {
    background: #008092;
    color: #fff;
}*/


.view .view-td {
    padding: 5px;
    line-height: 40px;
    font-size: 12px;
}


.row2 .view-td {
    background-color: #F7F8FB;
}



a.dg-order-check-button {
    background: rgba(65, 138, 234, 0.1) url(../../images/icon_print_s.svg) 3px 2px no-repeat;
    border-radius: 4px;
    color: #418AF2 !important;
    display: inline-block;
    font-size: 12px;
    line-height: 14px;
    margin-left: 4px;
    padding: 3px 6px 3px 20px;
    text-decoration: none;
}



.dg-order-det-bot .order-details-appear {
    position: absolute;
    background-color: #fff;
    border-radius: 0 5px 5px 5px;
    box-shadow: 0 2px 12px -1px rgb(0 0 0 / 35%);
    z-index: 40000;
    /* display: none; */
    padding: 10px 15px;
    visibility: hidden;
    opacity: 0;
    padding: 10px 15px;
    transition: all .2s ease-in .1s;
	width: 500px;
}


.order-details-appear {
    min-width: 300px;
    max-width: 640px;
	padding: 30px;
}


.order-details-appear .row {
    text-align: left;
    margin-bottom: 3px;
    overflow: hidden;
}


.order-details-appear .row div.col-1 {
    color: #999;
    width: 50%;
	float: left;
}

.order-details-appear .row div.col-2 {
    width: 15%;
    text-align: right;
    color: #999;
}

.order-details-appear .row div.col-3 {
    width: 35%;
    text-align: right;
    float: right;
}


.order-details-appear .row.separator-line {
    border-bottom: 1px solid rgba(0,0,0,0.1);
    margin: 16px 0 16px;
}



.tbc-button{
    display: block;
    height: 40px;
    background: #00adee;
    border-radius: 3px;
    margin-bottom: 10px;
}

.tbc-button .left{
    color: #fff;
    line-height: 40px;
    padding: 0 15px;
    position: relative;
}

.tbc-button .left:after{
    content: '';
    background: url(./assets/tbc-logo-small.jpg);
    position: absolute;
    right: -36px;
    width: 40px;
    height: 40px;
    background-size: 90%;
    background-repeat: no-repeat;
    top: 10%;
}

.tbc-button .right{
    color: #fff;
    line-height: 40px;
    padding: 0 15px;
}


.credo-loan-button {
    background-image: url(./assets/credo-logo-eng.png);
    height: 50px;
    width: 100%;
    margin-bottom: 30px;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
    
}



.slider-item{
    height: auto;
}

.slider-item img{
    width: 100%;
    height: auto!important;
    position:relative;
}

@media (max-width: 991px){


.main-header .header-navigation .header-navigation-inner .main-logo{
	overflow: visible;
}

.main-header .header-navigation .header-navigation-inner .main-logo img{
	width: 300%;
}

.main-header .header-navigation .header-navigation-inner .main-logo .main-logo-mobile{
	width: 100%;
}
    
    .owl-carousel .owl-item img{
        display: block;
        width: 100%;
        margin: 0;
        padding: 0;
        top: 0;
    }


    .slider-item {
        height: auto;
    }


    .slider-item img {
        width: 100%;
        height: auto;
        -o-object-fit: fill;
        object-fit: fill;
        -o-object-position: center;
        object-position: center;
        position: relative;
    }
    
    .filter .sizebox {
        padding: 15px!important;
    }


    .gold-but{
        margin: auto;
    }

    .search-tools-bg-container {
        display: none;
        z-index: 99997!important;
        width: 100%;
        height: auto;
        position: fixed;
        overflow-y: scroll;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0,0,0,0.1);
        -webkit-overflow-scrolling: touch;
    }
    
    .products .filter{
        padding:0 15px;
    }

    .show-close-mobile-search {
        left: 284px;
        display: block;
    }


    .search-tools-bg-show-filter {
        left: 0!important;
    }

    .search-tools-bg-show {
        display: block;
    }

    .search-tool-filter-but {
        display: block;
    }



    #fixed .filter {
        border: 1px solid #DADADA;
        min-height: 50px;
        background: #fff;
        max-width: 300px!important;
        position:absolute;
        left: -100%;
        transition: 0.4s;
        box-shadow: 0 0 11px 9px rgb(159 159 159 / 50%);
        width: 100%;
    }


    .fixed-menu {
        position: relative;
        top: initial;
        margin-bottom: 30px;
    }


    .field{
        width:100%;
        max-width: initial;
    }
    
    .area{
        width:100%;
        max-width: initial;
    }
}




@media only screen and (max-width: 1023px){
    .item-detail-carousel-container .owl-thumbs {
        display: block;
        position: relative;
        top: initial;
        left: initial;
        transform: initial;
        margin-top: 10px;
    }
}


@media only screen and (max-width: 764px) {
    .product-header-item .item-detail-carousel-container {
        width: 100%;
    }


    .item-detail-carousel-container {
        padding: 40px 0;
    }


    .item-detail-description .icons {
        right: 40px;
        z-index: 10;
        top: 105px;
    }
}