.wats-root,
.wats-root * {
    box-sizing: border-box;
	font-family: Manrope, sans-serif;
}

.wats-root{
	display: flex;
}

.wats-open {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #111;
    font: inherit;
    cursor: pointer;
}

.wats-icon {
    width: 24px;
    height: 24px;
    display: inline-block;
    position: relative;
    flex: 0 0 24px;
    color: #1e1e1e;
}

.wats-icon::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M15.334 15.335L19.999 20.001M17.334 10.507C17.334 14.278 14.277 17.335 10.506 17.335C6.73498 17.335 3.67798 14.278 3.67798 10.507C3.67798 6.73602 6.73498 3.67902 10.506 3.67902C14.277 3.67902 17.334 6.73602 17.334 10.507Z' stroke='black' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M15.334 15.335L19.999 20.001M17.334 10.507C17.334 14.278 14.277 17.335 10.506 17.335C6.73498 17.335 3.67798 14.278 3.67798 10.507C3.67798 6.73602 6.73498 3.67902 10.506 3.67902C14.277 3.67902 17.334 6.73602 17.334 10.507Z' stroke='black' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.wats-open .wats-icon {
    color: #8d8d95;
}

.wats-open:hover, .wats-open:focus{
	background: transparent!important;
	color: inherit;
}

.wats-open:hover .wats-icon,
.wats-open:focus-visible .wats-icon {
    color: #EA921E;
}



.wats-overlay {
    position: fixed;
    z-index: 999999;
    top: 0;
    left: 0;
    right: 0;
    min-height: 220px;
    background: #fff;
    transform: translateY(-110%);
    opacity: 0;
    pointer-events: none;
    transition: transform .25s ease, opacity .25s ease;
    box-shadow: 0 8px 22px rgba(0,0,0,.08);
}

body.wats-lock {
    overflow-x: hidden;
}

.wats-overlay.is-active {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.wats-panel {
    width: min(760px, calc(100% - 32px));
    margin: 48px auto 36px;
}

.wats-panel button:hover, .wats-panel button:focus{
	background: transparent!important;
	opacity: .8;
}

.wats-search-row {
    display: flex;
    align-items: center;
    gap: 36px;
}

.wats-input-wrap {
    position: relative;
    flex: 1;
    height: 62px;
    display: flex;
    align-items: center;
    color: #1d1d1f;
}

.wats-input {
    width: 100%;
    height: 62px;
    border: 1px solid #c4c4c4!important;
    border-radius: 32px;
    background: #f7f7f9;
    padding: 0 54px 0 56px;
    outline: none;
    font-size: 18px;
    color: #111827;
    transition: border-color .2s ease, background .2s ease;
	background-color: #f6f6f9!important;
	border-radius: 100px!important;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
	padding-left: 60px !important;
}

.wats-input::placeholder {
    color: #b5b5bd;
}

.wats-input:focus {
    border-color: #999aa3;
    background: #fff;
}

.wats-input-wrap .wats-icon {
    position: absolute;
    left: 21px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    color: #1e1e1e;
}

.wats-clear {
    position: absolute;
    right: 14px;
    top: 50%;
    width: 25px;
    height: 25px;
    transform: translateY(-50%);
    border: 0;
    border-radius: 50%;
    background: #e9e9eb;
    color: #333;
    font-size: 23px;
    line-height: 22px;
    cursor: pointer;
    display: none;
    padding: 0;
	padding-bottom: 5px;
}

.wats-clear.is-visible {
    display: block;
}

.wats-close {
    width: 46px;
    height: 46px;
    border: 0;
    background: transparent;
    position: relative;
    cursor: pointer;
    flex: 0 0 46px;
}

.wats-close::before,
.wats-close::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 22px;
    width: 38px;
    height: 1px;
    background: #1d1d1f;
}

.wats-close::before {
    transform: rotate(45deg);
}

.wats-close::after {
    transform: rotate(-45deg);
}

.wats-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 28px;
}

.wats-tag {
    height: 31px;
    padding: 0 12px;
    border: 1px solid #c9c9cf;
    border-radius: 999px;
    background: #fff;
    color: #8a8a92;
    font-size: 16px;
    cursor: pointer;
}

.wats-tag:hover {
    color: #111;
    border-color: #999aa3;
}

.wats-results {
    border-top: 1px solid #f1f1f1;
    min-height: 110px;
    padding: 36px max(16px, calc((100vw - 1160px) / 2)) 48px;
    background: #fff;
}

.wats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

.wats-product {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 12px;
    color: inherit;
    text-decoration: none;
    border: 1px solid #ededed;
    background: #fff;
    transition: box-shadow .2s ease, transform .2s ease;
}

.wats-product:hover {
    box-shadow: 0 10px 24px rgba(0,0,0,.07);
    transform: translateY(-1px);
}

.wats-product-img {
    width: 74px;
    height: 74px;
    flex: 0 0 74px;
    background: #f7f7f7;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.wats-product-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.wats-product-title {
    display: block;
    font-size: 15px;
    line-height: 1.25;
    color: #111827;
}

.wats-product-price {
    display: block;
    margin-top: 7px;
    font-size: 14px;
    color: #777;
}

.wats-empty {
    color: #333;
    text-align: center;
    padding: 12px 0 0;
    font-size: 18px;
}

.wats-empty-icon {
    width: 35px;
    height: 43px;
    margin: 0 auto 18px;
    display: block;
    background-image: url("data:image/svg+xml,%3Csvg width='35' height='43' viewBox='0 0 35 43' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='0.56'%3E%3Cpath d='M15.1899 12.513C15.1899 11.3091 14.2139 10.3331 13.01 10.3331C11.8061 10.3331 10.8301 11.3091 10.8301 12.513C10.8301 13.7169 11.8061 14.6929 13.01 14.6929C14.2139 14.6929 15.1899 13.7169 15.1899 12.513Z' fill='%23464646'/%3E%3Cpath d='M24.9145 12.513C24.9145 11.3091 23.9385 10.3331 22.7346 10.3331C21.5307 10.3331 20.5547 11.3091 20.5547 12.513C20.5547 13.7169 21.5307 14.6929 22.7346 14.6929C23.9385 14.6929 24.9145 13.7169 24.9145 12.513Z' fill='%23464646'/%3E%3Cpath d='M22.9029 24.4184C22.9029 23.0263 20.6506 17.7111 17.8723 17.7111C15.094 17.7111 12.8418 23.0263 12.8418 24.4184C12.8418 24.4184 15.094 24.4185 17.8723 24.4185C20.6506 24.4185 22.9029 24.4184 22.9029 24.4184Z' fill='%23464646'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 37.9787C0 35.2369 2.2227 33.0142 4.96454 33.0142H35V35.4964H4.96454C3.59362 35.4964 2.48227 36.6078 2.48227 37.9787C2.48227 39.3496 3.59362 40.461 4.96454 40.461H35V42.9432H4.96454C2.2227 42.9432 0 40.7205 0 37.9787Z' fill='%23464646'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M34.9998 1.24119L34.9998 34.2554L32.5176 34.2554L32.5176 1.24119L34.9998 1.24119Z' fill='%23464646'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 6.20567C0 2.77838 2.77838 0 6.20567 0H35V2.48227H6.20567C4.14929 2.48227 2.48227 4.14929 2.48227 6.20567V38.1028H0V6.20567Z' fill='%23464646'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.wats-loader {
    width: 34px;
    height: 34px;
    margin: 12px auto;
    border: 3px solid #eee;
    border-top-color: #777;
    border-radius: 50%;
    animation: wats-spin .8s linear infinite;
}

@keyframes wats-spin {
    to { transform: rotate(360deg); }
}

@media (max-width: 900px) {
    .wats-panel {
        margin-top: 24px;
    }
    .wats-search-row {
        gap: 14px;
    }
    .wats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .wats-panel {
        width: calc(100% - 24px);
        margin-bottom: 22px;
    }
    .wats-input,
    .wats-input-wrap {
        height: 52px;
    }
    .wats-input {
        font-size: 16px;
    }
    .wats-search-row {
        gap: 8px;
    }
    .wats-close {
        width: 38px;
        flex-basis: 38px;
    }
    .wats-close::before,
    .wats-close::after {
        left: 5px;
        width: 31px;
    }
    .wats-grid {
        grid-template-columns: 1fr;
    }
}