.etheme-search-form {
position: relative;
--et_inputs-border-radius: 0px;
}
.etheme-search-form-select {
color: #222;
border-width: 0;
-webkit-transition: max-width 0.2s ease-in-out;
transition: max-width 0.2s ease-in-out;
padding: 0 27px 0 15px;
height: auto;
line-height: 2rem;
min-height: var(--s-min-height, 40px);
}
.etheme-search-form-select[style] {
width: 100%;
}
.etheme-search-form-submit {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
white-space: nowrap;
height: var(--s-min-height, 40px);
padding: 0;
min-width: var(--s-button-min-width, 120px);
-webkit-box-shadow: var(--s-form-shadow, 0px 0px 0px 0px) var(--s-form-shadow-color, transparent);
box-shadow: var(--s-form-shadow, 0px 0px 0px 0px) var(--s-form-shadow-color, transparent);
}
.etheme-search-form-submit .button-text,
.etheme-search-form-submit svg {
vertical-align: middle;
}
.etheme-search-form-submit svg {
width: 1em;
height: 1em;
fill: currentColor;
}
.etheme-search-form-tabs {
position: sticky;
top: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
justify-content: space-around;
padding: 10px 0 0;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
color: #222;
background-color: #fff;
}
.etheme-search-form-tab {
position: relative;
color: currentColor;
-webkit-text-fill-color: currentColor;
cursor: pointer;
padding: 0 5px 10px;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
text-align: center;
opacity: 0.5;
white-space: nowrap;
text-transform: uppercase;
border-bottom: 1px solid currentColor;
}
.etheme-search-form-tab:after {
position: absolute;
bottom: -1px;
z-index: 12;
content: '';
height: 2px;
width: 0;
right: 0;
-webkit-transition: width 0.3s;
transition: width 0.3s;
background: currentColor;
}
.etheme-search-form-tab:not(.active) {
overflow: hidden;
text-overflow: ellipsis;
}
.etheme-search-form-tab.active {
opacity: 1;
}
.etheme-search-form-tab.active:after {
width: 100%;
left: 0;
right: auto;
}
.etheme-search-form-tab-content:not(.active) {
display: none !important;
}
.etheme-search-form-title {
position: sticky;
top: 0;
font-size: var(--title-size, 0.85em);
z-index: 1;
}
.etheme-search-form-title,
.etheme-search-form-more {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: var(--title-align-h, center);
-ms-flex-pack: var(--title-align-h, center);
justify-content: var(--title-align-h, center);
text-transform: uppercase;
padding: var(--v-title-space, 10px) var(--h-item-space, 15px);
margin: 0;
color: #000;
background: var(--title-bg, #f9f9f9);
}
.etheme-search-form-more {
padding-top: 0;
padding-bottom: 0;
font-size: var(--title-size, 1em);
--et_btn-dark-bg-color: transparent;
--et_btn-dark-bg-color-hover: transparent;
--et_btn-dark-color: currentColor;
--et_btn-dark-color-hover: currentColor;
--et_btn-dark-br-color: transparent;
--et_btn-dark-br-color-hover: transparent;
-webkit-box-pack: var(--title-align-h, flex-start);
-ms-flex-pack: var(--title-align-h, flex-start);
justify-content: var(--title-align-h, flex-start);
}
.etheme-search-form-more button {
width: var(--s-results-button-width, 100%);
text-align: var(--s-results-button-align, start);
height: auto;
border: none;
text-transform: none;
font-size: 1em;
padding: var(--v-title-space, 15px) 0;
}
.etheme-search-form-more button span {
border-bottom: 1px dashed currentColor;
}
.etheme-search-form-more button:hover {
--s-more-button-icon-transformX: 3px;
}
.etheme-search-form-more svg {
-webkit-margin-start: 5px;
margin-inline-start: 5px;
width: 0.75em;
height: 0.75em;
-webkit-transform: translateX(var(--s-more-button-icon-transformX, 0px));
transform: translateX(var(--s-more-button-icon-transformX, 0px));
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.etheme-search-form-title span {
margin-left: auto;
font-size: var(--item-element-size, 1em);
text-transform: none;
}
.etheme-search-form-item-title span {
background-image: -webkit-gradient(linear, left top, right top, from(currentcolor), to(currentcolor));
background-image: linear-gradient(90deg, currentcolor, currentcolor);
background-size: var(--item-title-animation-size, 0% 1px);
background-repeat: no-repeat;
background-position: left bottom;
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.etheme-search-form-item-title,
.etheme-search-form-item-stock {
margin: 0;
}
.etheme-search-form-item-price,
.etheme-search-form-item-date {
white-space: nowrap;
font-size: var(--item-element-size, 0.95em);
}
.etheme-search-form-item-info {
width: 100%;
}
.etheme-search-form-item-info:not(:last-child) {
margin-right: 20px;
}
.etheme-search-form-item-info > *:last-child {
margin-bottom: 0;
}
.etheme-search-form-item-info-inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 5px;
font-size: 0.85em;
--item-info-element-space: 0;
--item-info-element-size: 1em;
}
.etheme-search-form-item-info-separator {
opacity: 0.3;
}
.etheme-search-form .autocomplete-suggestions {
position: static !important;
width: 100%;
text-transform: none;
color: #222;
--et_link-color: currentColor;
background-color: #fff;
text-align: start;
max-height: var(--items-max-height, 350px);
overflow: auto;
overflow-x: hidden;
}
.etheme-search-form .autocomplete-suggestions:before,
.etheme-search-form .autocomplete-suggestions:after {
content: '';
display: var(--items-suggestion-clearfix-display, table);
clear: both;
}
.etheme-search-form .autocomplete-suggestion {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
float: left;
-webkit-box-align: var(--v-item-align, center);
-ms-flex-align: var(--v-item-align, center);
align-items: var(--v-item-align, center);
-webkit-box-pack: var(--h-item-align, flex-start);
-ms-flex-pack: var(--h-item-align, flex-start);
justify-content: var(--h-item-align, flex-start);
width: 100%;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
margin: 0;
-webkit-animation: var(--item-animation, none);
animation: var(--item-animation, none);
}
.etheme-search-form .autocomplete-suggestion > a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: var(--item-flex-wrap, '');
flex-wrap: var(--item-flex-wrap, '');
min-height: var(--item-min-height, 30px);
}
.etheme-search-form .autocomplete-suggestion .etheme-search-form-item {
width: 100%;
padding: var(--v-item-space, 10px) var(--h-item-space, 15px);
}
.etheme-search-form .autocomplete-suggestion img {
max-width: var(--item-img-width, 4rem);
margin: var(--item-img-margin, 0 20px 0 0);
}
.rtl .etheme-search-form .autocomplete-suggestion img {
margin: var(--item-img-margin, 0 0 0 20px);
}
.etheme-search-form .autocomplete-suggestion .stock,
.etheme-search-form .autocomplete-suggestion .sku_wrapper {
margin-bottom: var(--item-info-element-space, 3px);
font-size: var(--item-info-element-size, 0.85em);
}
.etheme-search-form .autocomplete-suggestion .stock.in-stock.step-1 {
color: var(--product-stock-step-1-active-color);
}
.etheme-search-form .autocomplete-suggestion .stock.in-stock.step-2 {
color: var(--product-stock-step-2-active-color);
}
.etheme-search-form .autocomplete-suggestion .stock.in-stock.step-3 {
color: var(--product-stock-step-2-active-color);
}
.etheme-search-form .autocomplete-no-suggestion {
color: #222;
padding: var(--v-item-space, 10px) var(--h-item-space, 15px);
min-height: var(--item-min-height, 30px);
}
.etheme-search-form .autocomplete-selected {
background: var(--item-selected-background-color, #fafafa);
--item-title-animation-size: 100% 1px;
}
.etheme-search-ajax-results {
position: absolute;
top: calc(100% + var(--s-results-offset, 5px));
width: 100%;
z-index: 9999;
overflow: hidden;
-webkit-box-shadow: var(--s-form-shadow, none) #fff;
box-shadow: var(--s-form-shadow, none) #fff;
}
.etheme-modal-popup-content .etheme-search-ajax-results {
position: static;
}
.etheme-search-form:not(.searching, .trending-searches-shown) .etheme-search-ajax-results,
.etheme-search-form.searching.loading .etheme-search-ajax-results {
display: none;
}
.etheme-search-input-form-wrapper,
.etheme-search-form-button-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.etheme-search-form-select {
border: var(--s-border-width, 1px) var(--s-border-style, none) var(--s-border-color, #e1e1e1);
}
input.etheme-search-form-input,
.etheme-search-input-placeholder {
border: var(--s-border-width, 1px) var(--s-border-style, none) var(--s-border-color, #e1e1e1);
width: 100%;
height: auto;
min-height: var(--s-min-height, 40px);
}
input.etheme-search-form-input:focus {
border-color: var(--s-border-color, #e1e1e1);
}
.etheme-search-form[type=separated] .etheme-search-form-select,
.etheme-search-form[type=separated] input.etheme-search-form-input,
.etheme-search-form[type=separated] .etheme-search-input-placeholder,
.etheme-search-form[type=separated] .etheme-search-form-submit {
border-radius: var(--s-border-radius, 0px);
}
.etheme-search-form[type=separated] .etheme-search-form-select,
.etheme-search-form[type=separated] .etheme-search-input-wrapper {
margin-right: var(--s-form-space, 10px);
-webkit-box-shadow: var(--s-form-shadow, none) var(--s-form-shadow-color);
box-shadow: var(--s-form-shadow, none) var(--s-form-shadow-color);
}
.etheme-search-form:not([type=separated]) .etheme-search-form-select,
.etheme-search-form:not([type=separated]) input.etheme-search-form-input,
.etheme-search-form:not([type=separated]) .etheme-search-input-placeholder {
border-width: 0;
}
.etheme-search-form:not([type=separated]) .etheme-search-input-form-wrapper {
border: var(--s-border-width, 1px) var(--s-border-style, none) var(--s-border-color, #e1e1e1);
border-radius: var(--s-border-radius, 0px);
-webkit-box-shadow: var(--s-form-shadow, none) var(--s-form-shadow-color);
box-shadow: var(--s-form-shadow, none) var(--s-form-shadow-color);
overflow: hidden;
}
.etheme-search-form:not([type=separated]) .etheme-search-form-select {
border-right-width: var(--s-border-width, 1px);
}
.etheme-search-form:not([type=separated]) .etheme-search-form-submit {
border-radius: 0 var(--s-border-radius, 0px) var(--s-border-radius, 0px) 0;
}
.etheme-search-input-wrapper {
width: 100%;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.etheme-search-form-clear {
position: absolute;
right: 10px;
color: #000;
-webkit-transition: all 0.3s;
transition: all 0.3s;
cursor: pointer;
}
.etheme-search-form-clear:before {
content: '';
width: 1em;
height: 1em;
position: absolute;
right: calc(100% + 7px);
border-radius: 50%;
border: 1px solid #e1e1e1;
border-right-color: #555;
-webkit-animation: rotate 0.3s infinite linear;
animation: rotate 0.3s infinite linear;
top: calc(50% - .5em);
line-height: 1;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
body.rtl .etheme-search-form-clear {
right: auto;
left: 10px;
}
body.rtl .etheme-search-form-clear:before {
right: auto;
left: calc(100% + 7px);
}
.etheme-search-form:not(.searching) .etheme-search-form-clear {
opacity: 0;
visibility: hidden;
-webkit-transform: translateX(3px);
transform: translateX(3px);
}
.etheme-search-form:not(.loading) .etheme-search-form-clear:before {
display: none;
}
.etheme-modal-popup-inner:has(.etheme-search-form[type=popup]) {
height: 100%;
}
.etheme-search-form[type=popup] {
display: grid;
-ms-flex-line-pack: stretch;
align-content: stretch;
grid-template-rows: var(--s-popup-rows, -webkit-max-content 1fr);
grid-template-rows: var(--s-popup-rows, max-content 1fr);
max-height: 100%;
height: 100%;
grid-gap: 40px;
--s-results-button-width: auto;
--s-results-button-align: center;
--title-bg: transparent;
--title-align-h: center;
--item-min-height: 50px;
--item-element-size: 1.14rem;
--h-item-space: 0px;
--items-suggestion-clearfix-display: none;
}
.etheme-search-form[type=popup] .etheme-search-form-title {
--title-size: calc(var(--h3-size-proportion, 1.7) * 1rem);
}
.etheme-search-form[type=popup].loading,
.etheme-search-form[type=popup]:not(.loading):not(:has(.etheme-search-additional-content-wrapper)) {
--s-popup-rows: max-content;
}
.etheme-search-form[type=popup].searching {
--s-additional-content-display: none;
}
.etheme-search-form[type=popup] .autocomplete-suggestions::-webkit-scrollbar,
.etheme-search-form[type=popup] .etheme-search-additional-content-wrapper::-webkit-scrollbar {
display: none;
}
.etheme-search-form[type=popup] .autocomplete-suggestions {
display: grid;
grid-template-columns: repeat(var(--cols, 5), 1fr);
grid-gap: 0 var(--items-gap, 20px);
max-height: 100% !important;
}
.etheme-search-form[type=popup] .autocomplete-suggestions:has(.autocomplete-no-suggestion) {
--cols: 1;
text-align: center;
}
.etheme-search-form[type=popup] .autocomplete-suggestions h2 {
font-size: 1.1rem;
}
.etheme-search-form[type=popup] .autocomplete-suggestions .meta-post {
font-size: 1rem;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.etheme-search-form[type=popup] .etheme-search-form-title,
.etheme-search-form[type=popup] .autocomplete-suggestion:has([data-type]:not([data-type="product"], [data-type="post"])),
.etheme-search-form[type=popup] .etheme-search-form-tabs,
.etheme-search-form[type=popup] .etheme-search-form-more {
grid-column-start: 1;
grid-column-end: calc(var(--cols, 5) + 1);
}
.etheme-search-form[type=popup] .autocomplete-suggestion:has([data-type="product"], [data-type="post"]) {
--item-selected-background-color: transparent;
--item-element-size: 1rem;
--items-separator: none;
--item-flex-wrap: wrap;
--v-item-align: flex-start;
--h-item-align: center;
--item-img-width: 100%;
--item-img-margin: 0 auto 20px;
--h-item-space: 0;
--v-item-space: 0;
--item-animation: fadeIn 0.5s linear;
}
.etheme-search-form[type=popup] .autocomplete-no-suggestion {
font-size: var(--title-size, 1.14rem);
}
.etheme-search-form[type=popup] .etheme-search-form-title,
.etheme-search-form[type=popup] .etheme-search-form-tabs {
position: static;
margin-bottom: var(--items-gap, 20px);
}
.etheme-search-form[type=popup] .etheme-search-form-title {
padding: 0;
}
.etheme-search-form[type=popup] .etheme-search-form-item-title {
font-size: 1.14rem;
}
.etheme-search-form[type=popup] .etheme-search-form-more {
text-align: center;
}
.etheme-search-form[type=popup] .etheme-search-form-more:not(:last-child) {
margin-bottom: calc(var(--items-gap, 20px) * 2);
}
.etheme-search-form[type=popup] .etheme-search-form-more:last-child {
margin-top: calc(var(--items-gap, 20px) * 2);
}
.etheme-search-form[type=popup] .content-product,
.etheme-search-form[type=popup] article.blog-post,
.etheme-search-form[type=popup] article.post-grid {
margin-bottom: var(--items-gap, 20px);
}
.etheme-search-form[type=popup] .product-details {
padding-bottom: 0;
}
.etheme-search-form[type=popup] .footer-product .button {
padding-left: 10px;
padding-right: 10px;
}
.etheme-modal-popup-content:has(.etheme-search-form[type=popup]) {
-webkit-transition: height 1s ease, -webkit-transform 1s cubic-bezier(0.19, 1, 0.22, 1);
transition: height 1s ease, -webkit-transform 1s cubic-bezier(0.19, 1, 0.22, 1);
transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1), height 1s ease;
transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1), height 1s ease, -webkit-transform 1s cubic-bezier(0.19, 1, 0.22, 1);
--popup-animation-timing-function: ubic-bezier(0.19, 1, 0.22, 1);
}
.etheme-modal-popup-content[data-height=auto]:has(.etheme-search-form[type=popup].searching):has(.autocomplete-suggestion) {
height: calc(100vh - var(--wp-admin--admin-bar--height,0)) !important;
}
.etheme-search-form .etheme-search-form-heading {
text-align: center;
margin-bottom: 20px;
}
.etheme-search-input-form-wrapper-before {
max-width: 750px;
width: 100%;
margin: 0 auto;
}
.etheme-search-tags-title {
text-transform: uppercase;
font-size: 114%;
-webkit-margin-end: 5px;
margin-inline-end: 5px;
}
.etheme-search-tags {
font-size: 14px;
margin: 20px 0;
}
.etheme-search-tags:last-child {
margin-bottom: 0;
}
.etheme-search-tags a {
display: inline-block;
padding: 5px 12px;
margin: 3px;
line-height: 1;
background: #f3f3f3;
color: var(--et_dark-color);
}
.etheme-search-tags a:hover {
color: #fff;
background-color: var(--et_active-color);
}
.etheme-search-additional-content-wrapper {
display: var(--s-additional-content-display, '');
-webkit-animation: fadeIn 0.3s linear;
animation: fadeIn 0.3s linear;
overflow: hidden;
overflow-y: auto;
}
.etheme-search-input-placeholder {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0 1.07em;
background-color: var(--et_inputs-bg-color, var(--et_white-2-light-dark));
border-radius: var(--et_inputs-border-radius, 0);
width: 100%;
color: var(--et_main-color);
font-size: 1.14rem;
text-align: start;
}
.etheme-search-input-placeholder:not(.hidden) ~ input {
display: none;
}
.etheme-search-placeholder-text {
-webkit-animation: et-fadeIn 0.3s linear, et-toTop 0.3s linear;
animation: et-fadeIn 0.3s linear, et-toTop 0.3s linear;
-webkit-margin-start: 5px;
margin-inline-start: 5px;
}
.etheme-search-placeholder-text:not(.etheme-search-placeholder-text-active) {
display: none;
}
.etheme-search-trending-searches-wrapper {
width: 100%;
color: #222;
background-color: #fff;
text-align: start;
max-height: var(--items-max-height, 350px);
overflow: auto;
overflow-x: hidden;
}
.etheme-search-trending-searches-refresh {
cursor: pointer;
}
.etheme-search-trending-search-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
min-height: var(--item-min-height, 30px);
width: 100%;
padding: var(--v-item-space, 10px) var(--h-item-space, 15px);
cursor: pointer;
}
.etheme-search-trending-search-wrapper:hover {
background: var(--item-selected-background-color, #fafafa);
}
.etheme-search-trending-search-icon {
background: var(--title-bg, #f9f9f9);
border-radius: 50%;
padding: 0.7em;
font-size: 0.75em;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-margin-end: 10px;
margin-inline-end: 10px;
}
.etheme-search-trending-search-item {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.etheme-search-form:has(.add-overlay-body-on-focus:focus, .add-overlay-body-on-focus.focused, .add-overlay-body-on-focus:focus-within, .add-overlay-body-on-hover:hover) {
--s-form-shadow: 0px 0px 2px 4px;
--s-form-shadow-color: var(--hover-overlay-items-shadow-color, #fff);
}