.hx-search-overlay {
position: fixed;
inset: 0;
z-index: 260;
background: #f4f1ea;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .24s ease, visibility .24s ease;
overscroll-behavior: none;
}
.hx-header.is-search-open .hx-search-overlay {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.hx-search-overlay,
.hx-search-overlay *,
.hx-search-overlay *::before,
.hx-search-overlay *::after {
box-sizing: border-box;
}
.hx-search-overlay__inner {
width: 100%;
height: 100dvh;
min-height: 100svh;
display: flex;
flex-direction: column;
overflow: hidden;
background: #f4f1ea;
overscroll-behavior: contain;
}
.hx-search-overlay__top {
position: relative;
z-index: 5;
display: grid;
grid-template-columns: 48px 1fr 48px;
align-items: center;
min-height: 88px;
padding:
calc(14px + env(safe-area-inset-top))
max(24px, env(safe-area-inset-right))
14px
max(24px, env(safe-area-inset-left));
border-bottom: 1px solid rgba(18, 17, 16, .09);
background: #f4f1ea;
flex: 0 0 auto;
}
.hx-search-overlay__top-spacer {
grid-column: 1;
width: 48px;
height: 48px;
}
.hx-search-overlay__brand {
grid-column: 2;
justify-self: center;
color: rgba(18, 17, 16, .86);
text-decoration: none;
white-space: nowrap;
font-family: "Prata", Georgia, "Times New Roman", serif;
font-size: 28px;
font-weight: 400;
line-height: 1;
letter-spacing: .11em;
text-transform: uppercase;
}
.hx-search-overlay__close {
grid-column: 3;
justify-self: end;
position: relative;
width: 48px;
height: 48px;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.hx-search-overlay__close span {
position: absolute;
top: 23px;
left: 13px;
width: 22px;
height: 1px;
background: #121110;
}
.hx-search-overlay__close span:first-child {
transform: rotate(45deg);
}
.hx-search-overlay__close span:last-child {
transform: rotate(-45deg);
}
.hx-search-overlay__close:focus-visible {
outline: 1px solid rgba(18, 17, 16, .55);
outline-offset: 2px;
}
.hx-search-overlay__body {
width: min(1280px, calc(100% - 80px));
margin-inline: auto;
padding: clamp(30px, 4.2vh, 52px) 0 32px;
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
}
.hx-search-overlay__kicker {
width: 100%;
max-width: 1180px;
margin: 0 auto 16px;
font-family: "JetBrains Mono", monospace;
font-size: 10px;
font-weight: 400;
line-height: 1.2;
letter-spacing: .18em;
text-transform: uppercase;
color: rgba(18, 17, 16, .40);
}
.hx-search-form {
position: relative;
width: 100%;
max-width: 1180px;
margin: 0 auto;
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
}
.hx-search-field {
width: 100%;
min-width: 0;
padding: 0 0 16px;
border: 0;
border-bottom: 1px solid rgba(18, 17, 16, .16);
border-radius: 0;
background: transparent;
box-shadow: none;
outline: none;
color: #121110;
caret-color: #121110;
font-family: "Prata", Georgia, serif;
font-size: clamp(30px, 3vw, 42px);
font-weight: 400;
line-height: 1.05;
letter-spacing: -.01em;
-webkit-appearance: none;
appearance: none;
}
.hx-search-field:focus {
border-bottom-color: rgba(18, 17, 16, .42);
}
.hx-search-field::placeholder {
color: rgba(18, 17, 16, .28);
font-family: "Inter", Arial, sans-serif;
font-size: .48em;
font-weight: 400;
line-height: 1.2;
letter-spacing: 0;
}
.hx-search-field::-webkit-search-decoration,
.hx-search-field::-webkit-search-cancel-button,
.hx-search-field::-webkit-search-results-button,
.hx-search-field::-webkit-search-results-decoration,
.hx-mobile-menu__search-input::-webkit-search-decoration,
.hx-mobile-menu__search-input::-webkit-search-cancel-button,
.hx-mobile-menu__search-input::-webkit-search-results-button,
.hx-mobile-menu__search-input::-webkit-search-results-decoration {
-webkit-appearance: none;
appearance: none;
display: none;
}
.hx-search-field::-ms-clear,
.hx-search-field::-ms-reveal,
.hx-mobile-menu__search-input::-ms-clear,
.hx-mobile-menu__search-input::-ms-reveal {
display: none;
width: 0;
height: 0;
}
.hx-search-results-slot {
position: relative;
width: 100%;
flex: 1 1 auto;
min-height: 0;
margin-top: 26px;
padding: 2px 8px 24px 0;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: rgba(18, 17, 16, .18) transparent;
}
.hx-search-results-slot::-webkit-scrollbar {
width: 4px;
}
.hx-search-results-slot::-webkit-scrollbar-thumb {
background: rgba(18, 17, 16, .18);
}
#hx-search-results .relevanssi-live-search-results {
position: static !important;
width: 100% !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.hx-search-results-layout {
min-width: 0;
}
.hx-search-results-layout--with-products {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
gap: clamp(56px, 6vw, 96px);
align-items: start;
}
.hx-search-results-layout--products-only {
display: block;
}
.hx-search-results-layout--text-only {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(56px, 8vw, 120px);
max-width: 880px;
}
.hx-search-results-side {
display: flex;
flex-direction: column;
gap: 42px;
min-width: 0;
}
.hx-search-group {
min-width: 0;
}
.hx-search-group__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 18px;
margin: 0 0 18px;
}
.hx-search-group__title {
margin: 0;
color: rgba(18, 17, 16, .46);
font-family: "JetBrains Mono", monospace;
font-size: 10px;
font-weight: 400;
line-height: 1.2;
letter-spacing: .17em;
text-transform: uppercase;
}
.hx-search-group__all {
position: relative;
display: inline-flex;
align-items: center;
min-height: 24px;
color: rgba(18, 17, 16, .52);
text-decoration: none;
font-family: "Inter", Arial, sans-serif;
font-size: 11px;
font-weight: 400;
line-height: 1.25;
letter-spacing: .025em;
white-space: nowrap;
transition: color .2s ease;
}
.hx-search-group__all::after {
content: "";
position: absolute;
left: 0;
bottom: 1px;
width: 100%;
height: 1px;
background: currentColor;
transform: scaleX(.52);
transform-origin: left;
transition: transform .22s ease;
}
.hx-search-group__all:hover,
.hx-search-group__all:focus-visible {
color: rgba(18, 17, 16, .78);
}
.hx-search-group__all:hover::after,
.hx-search-group__all:focus-visible::after {
transform: scaleX(1);
}
.hx-search-product-grid {
display: grid;
grid-template-columns: repeat(3, minmax(150px, 220px));
gap: 26px;
justify-content: start;
align-items: start;
}
.hx-search-results-layout--products-only .hx-search-product-grid {
grid-template-columns: repeat(4, minmax(150px, 220px));
}
.hx-search-product-card {
min-width: 0;
margin: 0;
}
.hx-search-product-card__link {
display: block;
color: #121110;
text-decoration: none;
}
.hx-search-product-card__media {
width: 100%;
aspect-ratio: 4 / 5;
overflow: hidden;
background: #e7e2d7;
}
.hx-search-product-card__media img {
display: block;
width: 100%;
height: 100%;
margin: 0;
object-fit: cover;
transform: scale(1);
transition: transform .35s ease, opacity .25s ease;
}
.hx-search-product-card__title {
margin-top: 11px;
overflow-wrap: normal;
word-break: normal;
-webkit-hyphens: none;
hyphens: none;
color: rgba(18, 17, 16, .88);
font-family: "Inter", Arial, sans-serif;
font-size: 13px;
font-weight: 400;
line-height: 1.35;
letter-spacing: .005em;
text-transform: none;
transition: color .2s ease;
}
.hx-search-product-card__link:hover .hx-search-product-card__media img,
.hx-search-product-card__link:focus-visible .hx-search-product-card__media img {
transform: scale(1.012);
opacity: .97;
}
.hx-search-product-card__link:hover .hx-search-product-card__title,
.hx-search-product-card__link:focus-visible .hx-search-product-card__title {
color: rgba(18, 17, 16, .62);
}
.hx-search-text-list {
display: flex;
flex-direction: column;
}
.hx-search-text-item {
margin: 0;
border-top: 1px solid rgba(18, 17, 16, .09);
}
.hx-search-text-item:last-child {
border-bottom: 1px solid rgba(18, 17, 16, .09);
}
.hx-search-text-item__link {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 18px;
align-items: center;
min-height: 48px;
padding: 11px 0;
color: rgba(18, 17, 16, .78);
text-decoration: none;
transition: color .2s ease;
}
.hx-search-text-item__title {
min-width: 0;
overflow-wrap: normal;
word-break: normal;
-webkit-hyphens: none;
hyphens: none;
font-family: "Inter", Arial, sans-serif;
font-size: 13px;
font-weight: 400;
line-height: 1.45;
}
.hx-search-text-item__arrow {
color: rgba(18, 17, 16, .38);
font-family: "JetBrains Mono", monospace;
font-size: 10px;
transition: transform .2s ease, color .2s ease;
}
.hx-search-text-item__link:hover,
.hx-search-text-item__link:focus-visible {
color: #121110;
}
.hx-search-text-item__link:hover .hx-search-text-item__arrow,
.hx-search-text-item__link:focus-visible .hx-search-text-item__arrow {
color: #121110;
transform: translate(2px, -2px);
}
.hx-search-empty {
max-width: 520px;
padding-top: 8px;
}
.hx-search-empty__title {
margin: 0;
color: rgba(18, 17, 16, .82);
font-family: "Inter", Arial, sans-serif;
font-size: 15px;
font-weight: 400;
line-height: 1.5;
}
.hx-search-empty__text,
#hx-search-results .relevanssi-live-search-didyoumean {
margin: 8px 0 0;
color: rgba(18, 17, 16, .52);
font-family: "Inter", Arial, sans-serif;
font-size: 13px;
font-weight: 400;
line-height: 1.55;
}
#hx-search-results .relevanssi-live-search-didyoumean a {
color: #121110;
text-decoration: none;
border-bottom: 1px solid rgba(18, 17, 16, .24);
}
html.is-search-open,
body.is-search-open {
height: 100%;
overflow: hidden;
overscroll-behavior: none;
}
@media (max-width: 1200px) {
.hx-search-results-layout--with-products,
.hx-search-results-layout--text-only {
grid-template-columns: 1fr;
gap: 42px;
}
.hx-search-results-side {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 40px;
}
.hx-search-product-grid,
.hx-search-results-layout--products-only .hx-search-product-grid {
grid-template-columns: repeat(3, minmax(160px, 220px));
}
}
@media (max-width: 767px) {
.hx-search-overlay__top {
grid-template-columns: 44px 1fr 44px;
min-height: 72px;
padding:
calc(10px + env(safe-area-inset-top))
max(14px, env(safe-area-inset-right))
8px
max(14px, env(safe-area-inset-left));
}
.hx-search-overlay__brand {
font-size: 21px;
letter-spacing: .10em;
}
.hx-search-overlay__close {
width: 44px;
height: 44px;
}
.hx-search-overlay__close span {
top: 21px;
left: 12px;
width: 20px;
}
.hx-search-overlay__body {
width: calc(100% - 40px);
padding: 24px 0 max(24px, env(safe-area-inset-bottom));
}
.hx-search-overlay__kicker {
margin-bottom: 14px;
font-size: 9.5px;
}
.hx-search-field {
padding-bottom: 14px;
font-size: clamp(28px, 9vw, 36px);
}
.hx-search-field::placeholder {
font-size: .46em;
}
.hx-search-results-slot {
margin-top: 22px;
padding-right: 2px;
}
.hx-search-results-layout--with-products,
.hx-search-results-layout--text-only {
gap: 36px;
}
.hx-search-results-side {
grid-template-columns: 1fr;
gap: 34px;
}
.hx-search-product-grid,
.hx-search-results-layout--products-only .hx-search-product-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px 14px;
}
.hx-search-product-card__title {
margin-top: 9px;
font-size: 12.5px;
}
.hx-search-group__head {
margin-bottom: 15px;
}
.hx-search-group__all {
font-size: 10px;
}
.hx-search-text-item__link {
min-height: 46px;
}
}
@media (max-width: 359px) {
.hx-search-overlay__body {
width: calc(100% - 28px);
}
.hx-search-overlay__brand {
font-size: 18px;
}
.hx-search-field {
font-size: 27px;
}
.hx-search-product-grid,
.hx-search-results-layout--products-only .hx-search-product-grid {
grid-template-columns: 1fr;
max-width: 228px;
}
.hx-search-group__head {
gap: 12px;
}
.hx-search-group__all {
white-space: normal;
text-align: right;
}
}
@media (prefers-reduced-motion: reduce) {
.hx-search-overlay,
.hx-search-product-card__media img,
.hx-search-text-item__arrow,
.hx-search-group__all::after {
transition-duration: .01ms;
}
}