/* =========================================================================================
   HPFY site search
   1. Search box dropdown   2. Voice search   3. Results page additions on top of the
   results-page layout in sitesearch-results.css.
   ========================================================================================= */

/* ------------------------------------------------------------------ 1. dropdown */
.hpfy-ac-host { position: relative; }
.hpfy-ac {
    position: absolute; top: 100%; left: 0; z-index: 100000; box-sizing: border-box;
    width: 100%; min-width: 320px; max-width: 560px;
    background: #fff; border: 1px solid #d9d9d9; border-top: 0;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
    font-size: 13px; color: #414042; text-align: left;
    max-height: calc(100vh - 150px); overflow-y: auto; overscroll-behavior: contain;
    display: none;
}
.hpfy-ac.hpfy-open { display: block; }
/* the header stylesheet targets elements by position (".header-top-main .row div:nth-child(n)");
   the dropdown uses <section>/<span> only and resets anything inherited from the header */
.hpfy-ac section, .hpfy-ac span, .hpfy-ac ul, .hpfy-ac li { order: 0; float: none; text-align: left; letter-spacing: normal; }
.hpfy-ac section { display: block; width: auto; margin: 0; }
.hpfy-ac .hpfy-ac-head { display: flex; }
.hpfy-ac .hpfy-ac-focus { display: flex; }
.hpfy-ac .hpfy-ac-track { display: flex; }
.hpfy-ac .hpfy-ac-cardimg { display: flex; }
.hpfy-ac .hpfy-ac-viewall { text-align: center; }
/* v1.6: empty-box panel sized like the Klevu panel it replaces - 115% of the search box on desktop (Klevu's
   ratio), exactly the box width below 1200px and on phones; the trending cards resize to fit two side by side */
.hpfy-ac.hpfy-ac-wide { width: 100%; min-width: 380px; max-width: 760px; }
@media (min-width: 1200px) {
    .hpfy-ac.hpfy-ac-wide { width: 115%; }
}
.hpfy-ac ul { list-style: none; margin: 0; padding: 0; }
/* the header form styles every <button> as the search button - undo that inside the dropdown */
.hpfy-ac-host .hpfy-ac button {
    position: static; top: auto; right: auto; width: auto; height: auto; padding: 0;
    background: none; background-color: transparent; color: #999; border: 0; font-size: 14px; line-height: 1.2;
}
.hpfy-ac a { color: #414042; text-decoration: none; display: block; }
.hpfy-ac-section { padding: 8px 0 6px; border-bottom: 1px solid #ededed; }
.hpfy-ac-section:last-child { border-bottom: 0; }
.hpfy-ac-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 2px 10px 4px; font-size: 11px; color: #777; letter-spacing: .2px;
}
.hpfy-ac-head.hpfy-upper { text-transform: uppercase; color: #414042; }
.hpfy-ac-head a { display: inline; color: #1a73b8; font-size: 12px; }
.hpfy-ac-head a:hover { text-decoration: underline; }
.hpfy-ac-item > a { padding: 3px 16px; line-height: 1.45; }
.hpfy-ac-item > a strong { font-weight: 700; color: #111; }
.hpfy-ac-item.hpfy-active > a, .hpfy-ac-item > a:hover { background: #f3f3f3; }
.hpfy-ac-recent { display: flex; align-items: center; }
.hpfy-ac-recent > a { flex: 1; }
.hpfy-ac-host .hpfy-ac .hpfy-ac-recent button { background: none; border: 0; color: #999; cursor: pointer; padding: 0 12px; font-size: 14px; }
.hpfy-ac-host .hpfy-ac button.hpfy-ac-clear { background: none; border: 0; color: #1a73b8; cursor: pointer; font-size: 11px; padding: 0; }

/* product rows */
.hpfy-ac-product > a { display: flex; gap: 12px; padding: 8px 16px; border-bottom: 1px solid #f1f1f1; }
.hpfy-ac-product:last-child > a { border-bottom: 0; }
.hpfy-ac-thumb { flex: 0 0 60px; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hpfy-ac-thumb img { max-width: 60px; max-height: 60px; width: auto; height: auto; }
.hpfy-ac-info { flex: 1; min-width: 0; }
.hpfy-ac-name { font-weight: 600; color: #222; font-size: 13px; line-height: 1.3; white-space: normal; overflow-wrap: anywhere; }
.hpfy-ac-desc { color: #777; font-size: 12px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hpfy-ac-price { margin-top: 3px; font-size: 13px; }
.hpfy-ac-price del { color: #999; margin-right: 6px; }
.hpfy-ac-price b { color: #222; }
.hpfy-ac-variants { color: #777; font-size: 11px; margin-left: 6px; }
.hpfy-ac-viewall { text-align: center; padding: 8px 0 10px; }
.hpfy-ac-viewall a { display: inline-block; color: #1a73b8; font-weight: 600; }
.hpfy-ac-viewall a:hover, .hpfy-ac-viewall.hpfy-active a { text-decoration: underline; }
.hpfy-ac-empty { padding: 12px 16px; color: #777; }

/* empty-box layout: popular searches left, trending products right  */
.hpfy-ac-focus { display: flex; padding: 10px 4px 14px; }
.hpfy-ac-focus .hpfy-ac-popular { flex: 0 0 32%; max-width: none; min-width: 0; }
.hpfy-ac-focus .hpfy-ac-trending { flex: 1; min-width: 0; }
.hpfy-ac-focus .hpfy-ac-item > a { padding: 3px 10px; }
.hpfy-ac-carousel { position: relative; padding: 4px 22px 0 22px; }
.hpfy-ac-track { display: flex; gap: 12px; overflow: hidden; scroll-behavior: smooth; }
.hpfy-ac-card { flex: 0 0 calc((100% - 12px) / 2); width: auto; min-width: 0; }
.hpfy-ac-card a { display: block; }
.hpfy-ac-card .hpfy-ac-cardimg { height: 150px; border: 1px solid #eee; display: flex; align-items: center; justify-content: center; overflow: hidden; }
@supports (aspect-ratio: 1 / 1) {
    .hpfy-ac-card .hpfy-ac-cardimg { height: auto; aspect-ratio: 1 / 1; }
}
.hpfy-ac-card img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.hpfy-ac-card .hpfy-ac-cardname { font-size: 12px; line-height: 18px; margin-top: 6px; color: #666; font-weight: 500; white-space: normal; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.hpfy-ac-card.hpfy-active .hpfy-ac-cardimg, .hpfy-ac-card a:hover .hpfy-ac-cardimg { border-color: #9a9a9a; }
.hpfy-ac-host .hpfy-ac button.hpfy-ac-arrow {
    position: absolute; top: 4px; width: 22px; height: 22px; border-radius: 50%;
    /* centred on the square card images: image height = card width = (carousel width - 44px paddings - 12px gap) / 2,
       so its middle is at 0.25 x (width - 56px); margin % is taken from the width */
    margin-top: calc(0.25 * (100% - 56px) - 11px);
    border: 1px solid #ccc; background: #fff; color: #666; cursor: pointer; padding: 0; line-height: 18px; font-size: 14px;
}
.hpfy-ac-host .hpfy-ac button.hpfy-ac-arrow.hpfy-next { right: 0; }
.hpfy-ac-host .hpfy-ac button.hpfy-ac-arrow.hpfy-prev { left: 0; display: none; }

@media (max-width: 767px) {
    .hpfy-ac { min-width: 0; max-width: none; left: 0; right: 0; width: auto; position: absolute; }
    /* phones: exactly the search box width (the 380px desktop minimum pushed it off the right edge of the screen) */
    .hpfy-ac.hpfy-ac-wide { width: auto; min-width: 0; max-width: none; }
    .hpfy-ac-focus { flex-direction: column; }
    .hpfy-ac-focus .hpfy-ac-popular { flex: none; margin-bottom: 10px; }
    .hpfy-ac-focus .hpfy-ac-popular { max-width: none; }
}

/* ------------------------------------------------------------------ 2. voice search */
.hpfy-ac-host button.hpfy-voice {
    position: absolute; right: 42px; top: 50%; margin-top: -12px; z-index: 9;
    width: 24px; height: 24px; border-radius: 50px; border: 0; padding: 3px;
    background: #ededed; background-color: #ededed; cursor: pointer; line-height: 0; box-sizing: border-box;
    display: flex; align-items: center; justify-content: center;
}
.hpfy-ac-host button.hpfy-voice svg { width: 16px; height: 16px; fill: #555; }
.hpfy-ac-host button.hpfy-voice:hover svg { fill: #508426; }
.hpfy-ac-host button.hpfy-voice.hpfy-listening { background: #d93025; background-color: #d93025; animation: hpfy-pulse 1.2s infinite; }
.hpfy-ac-host button.hpfy-voice.hpfy-listening svg { fill: #fff; }
@keyframes hpfy-pulse { 0% { box-shadow: 0 0 0 0 rgba(217, 48, 37, .45); } 100% { box-shadow: 0 0 0 10px rgba(217, 48, 37, 0); } }
.hpfy-ac-host input[name="searchterms"].hpfy-has-voice { padding-right: 72px; }

/* ------------------------------------------------------------------ 3. results page */
.hpfy-search-page { position: relative; min-height: 300px; }
.hpfy-search-page.hpfy-loading::after {
    content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 5;
    background: rgba(255, 255, 255, .65) url(/VirtualContent/Content/Styles/sitesearch-img/loader.gif) no-repeat center 120px;
}
/* grid / list view icons */
.hpfy-search-page .kuView .kuGridviewBtn { background-image: url(/VirtualContent/Content/Styles/sitesearch-img/grid-view.png); }
.hpfy-search-page .kuView .kuListviewBtn { background-image: url(/VirtualContent/Content/Styles/sitesearch-img/list-view.png); }

.hpfy-search-page .kuTabs a { color: #414042; text-decoration: none; display: inline-block; }
.hpfy-search-page .kuTabs a.kuTabSelected { font-weight: 600; }
.hpfy-search-page .kuTabs a + a { border-left: 1px solid #c7c8ca; }
.hpfy-search-page .kuResultList.hpfy-full { float: none; width: 100%; }
/* the sort/per-page/view controls are floats; contain them so the product grid never ends up squeezed beside them */
.hpfy-search-page .kuSortHeader { height: auto; min-height: 40px; display: flow-root; }
.hpfy-search-page #kuResultsView, .hpfy-search-page .kuBottomPagi, .hpfy-search-page .kuOtherContentView { clear: both; }
.hpfy-search-page .kuPagination a.hpfy-ellipsis { cursor: default; }

/* filters */
.hpfy-search-page .kuFilterBox { height: auto; max-height: 190px; margin-bottom: 0; }
.hpfy-search-page .kuFilterBox.hpfy-expanded { max-height: none; }
.hpfy-search-page .kuFilterBox.hpfy-closed { max-height: 36px; }
.hpfy-search-page .kuFilterBox.hpfy-closed + .kuShowOpt { display: none; }
.hpfy-search-page .kuShowOpt { margin: 0; padding: 6px 0 14px; text-align: center; }
.hpfy-search-page .kuShowOpt a { letter-spacing: 2px; color: #414042; font-size: 14px; }
.hpfy-search-page .kuFilterBox:not(.hpfy-has-more) { margin-bottom: 18px; }
.hpfy-search-page .kuFilterNames ul li a span.kuFilterLabel { position: relative; }
.hpfy-search-page .kuFilterNames ul li a:focus { outline: 1px dotted #414042; }

/* price slider */
.hpfy-search-page .hpfy-price-box { max-height: none; margin-bottom: 20px; }
.hpfy-price { position: relative; margin: 26px 18px 10px; height: 46px; }
.hpfy-price-track { position: absolute; left: 0; right: 0; top: 8px; height: 4px; border-radius: 4px; background: #c7c8ca; }
.hpfy-price-fill { position: absolute; top: 0; bottom: 0; background: #414042; border-radius: 4px; }
.hpfy-price input[type=range] {
    position: absolute; left: -2px; width: calc(100% + 4px); top: 0; margin: 0; height: 20px;
    background: none; pointer-events: none; -webkit-appearance: none; appearance: none;
}
.hpfy-price input[type=range]::-webkit-slider-thumb {
    pointer-events: auto; -webkit-appearance: none; appearance: none; width: 18px; height: 18px;
    border-radius: 50%; border: 1px solid #414042; background: #fff; cursor: pointer; position: relative; z-index: 2;
}
.hpfy-price input[type=range]::-moz-range-thumb {
    pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; border: 1px solid #414042; background: #fff; cursor: pointer;
}
.hpfy-price input[type=range]::-webkit-slider-runnable-track { background: none; }
.hpfy-price input[type=range]::-moz-range-track { background: none; }
.hpfy-price-labels { position: absolute; left: -8px; right: -8px; top: 26px; display: flex; justify-content: space-between; font-size: 13px; }

/* product cards */
.hpfy-search-page .kuGridView ul { display: flex; flex-wrap: wrap; }
.hpfy-search-page .kuGridView ul li { width: calc(25% - 10px); margin: 0 10px 20px 0 !important; min-height: 330px; }
.hpfy-search-page .kuGridView ul li .kuName a { font-size: 15px; line-height: 1.35; }
.hpfy-search-page .hpfy-mfr { font-size: 12px; font-weight: 700; text-transform: uppercase; margin-top: 6px; color: #414042; }
.hpfy-search-page .kuListView .hpfy-mfr { padding: 0 5px; text-align: left; }
.hpfy-search-page .kuGridView ul li .kuPrice { padding-left: 0; }
.hpfy-search-page .kuGridView ul li .kuOrigPrice { color: #414042; margin-right: 4px; }
.hpfy-search-page .kuGridView ul li .kuVariants { text-align: center; font-size: 13px; margin-top: 2px; }
.hpfy-search-page .kuListView ul li .kuVariants { font-size: 13px; }
.hpfy-search-page .kuListView ul li .kuSalePrice { display: block; }
.hpfy-search-page .kuOtherContentView ul li .kuNameDesc { width: 100%; }
.hpfy-search-page .hpfy-content-type { font-size: 11px; text-transform: uppercase; color: #777; padding: 0 5px; }
.hpfy-search-page #ku-search-filter-tags .ku-search-filter-remove { margin-left: 4px; }
.hpfy-search-page .kuNoResults-lp { padding: 10px 5%; }
.hpfy-search-page .kuNoResults-lp-message p { margin: 0 0 10px; }
.hpfy-search-page .kuNoResults-lp-pSearch a { margin: 0 2px; }

.kuFilterRefineMobile { display: none; }

@media (max-width: 1199px) {
    .hpfy-search-page .kuGridView ul li { width: calc(33.333% - 10px); }
}
@media (max-width: 640px) {
    .kuFilterRefineMobile { display: block; position: relative; }
    .hpfy-search-page .kuFilters { display: none !important; }
    .hpfy-search-page.hpfy-filters-open .kuFilters { display: block !important; }
    .hpfy-search-page .kuGridView ul li { width: calc(50% - 8px); margin: 0 8px 16px 0 !important; min-height: 300px; }
    .hpfy-search-page .kuGridView .hpfyImgWrap { height: 160px !important; }
    .hpfy-search-page .kuGridView img { max-height: 150px !important; }
}