/*CSS*/

:root {
--clr-dark-bg: #10003f;
--clr-dark-lighter: rgba(255,255,255,0.1);
}

.swal2-close, 
.close-btn
{display: none !important}

.add-to-home-screen {
 position: absolute;
 top: 57px;
 left: calc(50% - 68px);
 transition: opacity 0.3s ease-in-out;
 opacity: 1;
 z-index: 1;
}
.add-to-home-screen.fade-out {
 opacity: 0;
}
.add-to-home-screen button {
 border: none;
 background-color: rgba(0,0,0,0.23);
 backdrop-filter: blur(8px);
 font-family: 'SF Pro Display', sans-serif;
 font-size: 13px;
 font-weight: 500;
 color: #fff;
 line-height: 1.5;
 padding: 6px 12px;
 border-radius: 24px;
 display: flex;
 gap: 10px;
}
.add-to-home-screen button svg {
 height: 16px;
 fill: #fff;
}


.gtranslate_wrapper {
 display: flex;
 justify-content: center;
 gap: 16px;
 margin-bottom: 16px;}

.row {
 display: flex;
 margin-block: 8px;
 gap: 16px;
}

.promocodeCopy20, .promocodeCopy30 {
 position: relative;
 overflow: hidden;
 border: none;
 padding: 16px;
 flex: 1;
 border-radius: 12px;
 background-color: #f8f7f5;
}

.promocodeCopy20:after {
 content: '';
 position: absolute;
 height: 350%;
 width: 200%;
 top: 0;
 left: -100%;
 background: rgb(115 69 253 / 20%);
 border-radius: 100%;
 -ms-transform: scale(0);
 transform: scale(0);
 z-index: 20;
 animation-timing-function: linear;
 animation-iteration-count: infinite;
 animation-name: ripple;
 animation-duration: 3s !important;
}

.promocodeCopy30:after {
 content: '';
 position: absolute;
 height: 350%;
 width: 200%;
 top: 0;
 left: -100%;
 background: rgb(115 69 253 / 20%);
 border-radius: 100%;
 -ms-transform: scale(0);
 transform: scale(0);
 z-index: 20;
 animation-timing-function: linear;
 animation-iteration-count: infinite;
 animation-name: ripple;
 animation-duration: 3s !important;
}
.custom-page__p{
 border-radius: 12px; background-color: #f6f6f6; padding: 12px;}



/* = = = = = DARK MODE = = = = = */
html.dark body{background-color: #10003f;}
html.dark .shop{background-color: #10003f;}
html.dark .add-to-cart {background-color: var(--clr-dark-lighter);}
html.dark .menubar{background-color: #0e1621;}
html.dark .menubar .page-link{color: #fff;}
html.dark .generic-block .phone-link{color: #fff;}
html.dark .control-panel{background-color: var(--clr-dark-lighter);}
html.dark .menu__button{background-color: #10003f;}
html.dark .menu__button svg{fill: #fff;}
html.dark .product__inner{background-color: var(--clr-dark-lighter);}
html.dark .promocodeCopy20{background-color: var(--clr-dark-lighter);}
html.dark .promocodeCopy30{background-color: var(--clr-dark-lighter);}
html.dark .promocodeCopy20{color: #fff;}
html.dark .promocodeCopy30{color: #fff;}
html.dark .chips-categories__name{color: #fff;}
html.dark .chips-card__title{color: #fff;}
html.dark .product .product__title{color: #fff;}
html.dark .product .price-box__price{color: #fff;}
html.dark .alsoitem-menu__list .alsoitem-card__title{color: #fff;}
html.dark .footer{background-color: #10003f;}
html.dark .footer .page-link{color: #fff;}
html.dark .shop-header__logo img svg{fill: #fff;}
/* - - - INNER - - - */
html.dark .swal2-popup{background-color: #10003f;}
html.dark .swiper-zoom-container{background-color: #10003f;}
html.dark .price-box__price{color: rgba(255,255,255,0.7);}
html.dark .product-modal__name,
html.dark .option__name,
html.dark .opt-val-name {color: #fff;}
html.dark .alsoproduct-modal__category {background-color: var(--clr-dark-lighter); color: rgba(255,255,255,0.7);}
html.dark .product-modal-popup .swal2-footer {background-color: #10003f;}
html.dark .product-modal-actions .add-to-cart.done:not(.stock-out):not(.err):not(.with-options),
html.dark .product-modal-actions .add-to-cart:not([data-count="0"]):not(.with-options).wait {
 --btn-color: rgba(255,255,255,0.7);
 background-color: var(--clr-dark-lighter);
 color: rgba(255,255,255,0.7);
}
/* - - - CART - - - */
html.dark .order,
html.dark .order-header{background-color: #10003f;}
html.dark .mode-back-btn {background-color: var(--clr-dark-lighter); color: rgba(255,255,255,0.7);}
html.dark .checkout__header h2, 
html.dark .order-header h2 {color: #fff;}
html.dark .cart-item__price,
html.dark .cart-item__name,
html.dark .cart-total__label,
html.dark .total__val {color: #fff;}
html.dark .qty{background-color: var(--clr-dark-lighter); color: rgba(255,255,255,0.7);}
html.dark .qty__btn svg{fill: rgba(255,255,255,0.7);}
/* - - - CHECKOUT - - - */
html.dark .checkout,
html.dark .checkout__header{background-color: #10003f;}
html.dark .checkout__title,
html.dark .payment__title,
html.dark .delivery__title,
html.dark .delivery__description,
html.dark .checkout_fields .label,
html.dark .checkout-total .amount__label,
html.dark .checkout-total .amount__value
{color: #fff;}
html.dark .checkout-field .check__title, 
html.dark .delivery__title, 
html.dark .methods-list .label, 
html.dark .payment__title, 
html.dark .radio-item .radio-title {color: rgba(255,255,255,0.7);}
html.dark .payment .radio__box,
html.dark .radio__box,
html.dark .checkout-field .check__box {border: 1px solid rgba(255,255,255,0.7)};
html.dark :where([type=date], [type=datetime-local], [type=time], [type=email], [type=file], [type=tel], [type=text], textarea) 
{background-color: #182533;
 color: rgba(255,255,255,0.7);}

html.dark [type=date],
html.dark [type=datetime-local],
html.dark [type=time],
html.dark [type=email],
html.dark [type=file],
html.dark [type=tel],
html.dark [type=text],
html.dark textarea 
{background-color: var(--clr-dark-lighter);
 color: rgba(255,255,255,0.7);}

html.dark #SVGRepo_iconCarrier path {
 stroke: #fff !important;
}
/* - - - CUSTOM PAGE - - - */
html.dark .custom-page__p{background-color: var(--clr-dark-lighter); color: rgba(255,255,255,0.7);}

.fav{
 position: absolute;
 top: 8px;
 right: 8px;
 height: 40px;
 width: 40px;
 border-radius: 8px;
 outline: none;
 border: none;
 background-color: rgba(0,0,0,0.1);
 cursor: pointer;
 z-index: 100;
}
.no-favorites {
 display: none;
 color: #222;
 font-size: 14px;
 text-align: center;
 margin-top: 20px;
 grid-column: span 2;
}
html.dark .no-favorites {
 color: #fff;
}
#filter-favorites{
 display: flex;
}
#filter-favorites,
#reset-filter{
 background-color: var(--tgs-white);
 border: 0;
 border-radius: 8px;
 color: var(--tgs-dark);
 cursor: pointer;
 height: var(--tgs-control-size);
 padding: 0;
 min-width: var(--tgs-control-size);
 justify-content: center;
 align-items: center;
}
#filter-favorites img {
 height: 20px;
}
#filter-favorites svg {
 height: 20px;
}
#filter-favorites svg path{
 fill: #222;
}
html.dark #filter-favorites svg path{
 fill: #fff;
}
#reset-filter{
 color: #222;
 min-width: fit-content;
 padding-inline: 8px;
 display: none;
}
html.dark #reset-filter{
 color: #fff;
}
html.dark #filter-favorites,
html.dark #reset-filter{
 background-color: #10003f;
}
.control-panel {
 gap: 8px;
}
#likeButton {
 position: absolute;
 right: 16px;
 top: 432px;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 0;
 transition: color .1s, box-shadow .1s;
 cursor: pointer;
 --close-size: 44px;
 border: 0;
 border-radius: 8px;
 color: var(--tgs-secondary);
 height: var(--close-size);
 user-select: none;
 width: var(--close-size);
 z-index: 100;
 background-color: var(--clr-dark-lighter);
 transform: translateY(80px);
}
#likeButton svg {
 max-height: 24px;
}
.fav img {
 width: 100%;
 height: 100%;
}
.copy {
 display: flex;
 gap: 4px;
 justify-content: center;
 background-color: var(--tgs-light);
 }
 html.dark .copy {
 background-color: var(--bg-dark);
 color: #fff;
 }
 html.dark .copy_link {
 color: #fff;
 }
 .copy_link {
 color: #222;
 }

.menubar {
 display: flex;
 flex-direction: column;
}
.menubar__main {
 order: 3;
}
.menubar__filter {
 display: flex;
 flex-wrap: wrap;
 gap: 16px;
 justify-content: space-between;
 height: 100%;
 margin-bottom: 2em;
 
 padding: 16px;
}
.menubar form label {
 font-size: 0.85em;
 text-transform: uppercase;
 display: flex;
 align-items: center;
 align-content: stretch;
 padding: 8px 12px;
 background-color: #eeeeee;
 border-radius: 12px;
 flex: 1;
 gap: 8px;
 color: #222;
}
html.dark .menubar form label {
 background-color: #182533;
 color: #fff;
}

.menuber__filter:has([name="Принцесса"]:checked) .product[data-category="Помолвочные кольца"][data-category="Украшения с муассанитами"][data-cut="Принцесса"],
.menuber__filter:has([name="Груша"]:checked) .product[data-cut="Груша"],
.menuber__filter:has([name="Сердце"]:checked) .product[data-cut="Сердце"],
.menuber__filter:has([name="Круглая К57"]:checked) .product[data-cut="Круглая К57"],
.menuber__filter:has([name="Триллиант"]:checked) .product[data-cut="Триллиант"],
.menuber__filter:has([name="Овал"]:checked) .product[data-cut="Овал"] {
 display: block;
}

/* FULL SCREEN */
.shop .container,
.product-modal__inner
{
 position: relative;
 max-width: min(100vw, 1024px);
 margin-top: 96px;
 margin-bottom: 48px;
}
.itc-slider__item {
 height: auto !important;
}
.products {
 display: grid;
 max-width: 1200px;
}
.product__title {
 min-height: 72px;
}

@media (width > 1000px) {
 .header {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 16px;
 align-items: center;
 }
 .gtranslate_wrapper,
 .control-panel
 {
 grid-column: 3 / 4;
 }
 .menu {
 display: none;
 }
 .product-modal {
 display: flex;
 justify-content: center;
 }
 .product-modal__inner {
 display: grid;
 grid-template-columns: 480px 480px;
 margin-top: 96px;
 gap: 16px;
 }
 .product-modal .swiper-horizontal {
 position: relative !important;
 max-width: 460px;
 height: 520px;
 margin-bottom: 0;
 grid-column: 1 / 2;
 grid-row: 1 / 2;
 }
 .product-modal__content {
 box-shadow: none;
 grid-column: 2 / 3;
 grid-row: 1 / 2;
 padding: 0;
 margin: 0;
 height: fit-content;
 }
 .swiper-pagination {
 top: 398px !important;
 }
 .zhemchugswarovski {
 position: absolute;
 top: 480px;
 left: 64px;
 width: 382px;
 }
 
}