/* MFS Search — v1.2.0 * Styled to match the existing Minotaur search bar: grey pill form, * right-aligned side-by-side dropdown (Suggestions + Products). */ .mfs-search-wrap { position: relative; width: 100%; } /* ---------------- Form / input / button ---------------- */ .mfs-search-form, .search_form_post.mfs-search-form { background-color: #eceff1; display: flex; align-items: center; border-radius: 0; width: 100%; } .mfs-search-input-wrap { display: flex; align-items: center; width: 100%; background: transparent; } .mfs-search-input, .mfs-search-form input.search_input_field { flex: 1; border: none !important; outline: none; padding: 10px 16px; font-size: 15px; background-color: transparent; color: #000; font-family: inherit; min-width: 0; } .mfs-search-input::placeholder, .mfs-search-form input.search_input_field::placeholder { color: #5b5b5b; font-size: 15px; font-family: "Roboto", sans-serif; font-weight: 600; opacity: 1; } .mfs-search-btn, .mfs-search-form button.search_icon_btn { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: none !important; background: transparent !important; cursor: pointer; color: #000; flex-shrink: 0; padding: 0; } .mfs-search-btn:hover, .mfs-search-form button.search_icon_btn:hover, .mfs-search-form button.search_icon_btn:focus { background: transparent !important; color: #000; } .mfs-search-btn svg { stroke: #000; } /* ---------------- Dropdown container ---------------- * JS moves the dropdown to and applies position:fixed with * calculated top/left so parent overflow/z-index can't hide it. * The rules here are the fallback defaults. */ .mfs-search-dropdown { display: none; position: absolute; top: 100%; right: 0; width: 660px; max-width: 90vw; z-index: 999999; background: #fff; padding: 20px; box-shadow: 0 2px 8px 0 rgba(99, 99, 99, 0.2); max-height: 75vh; overflow-y: auto; scrollbar-color: #000 #e1e1e1; scrollbar-width: thin; } .mfs-search-dropdown--detached { z-index: 2147483647; } .mfs-search-dropdown--visible { display: block !important; } /* hide legacy dropdown when inactive */ .data_search_show.mfs-search-dropdown:not(.mfs-search-dropdown--visible) { display: none !important; } /* ---------------- Two-column layout (suggestions + products) ---------------- */ .mfs-search-result-box { display: flex; gap: 30px; align-items: flex-start; } .mfs-search-suggestions { width: 40%; flex-shrink: 0; } .mfs-search-products { width: 60%; flex: 1; min-width: 0; max-height: 60vh; overflow-y: auto; scrollbar-color: #000 #e1e1e1; scrollbar-width: thin; padding-right: 4px; } .mfs-search-products-title { margin-bottom: 12px; } /* ---------------- Section titles ---------------- */ .mfs-search-section { margin-bottom: 16px; } .mfs-search-section + .mfs-search-section { padding-top: 4px; } .mfs-search-section-title { font-size: 14px; font-weight: 700; text-transform: uppercase; color: #000; margin-bottom: 10px; letter-spacing: 0.02em; } /* ---------------- Suggestion / tax items ---------------- */ .mfs-search-tax-item { padding: 0; } .mfs-search-tax-item a { display: block; padding: 6px 8px; font-size: 14px; font-weight: 600; color: #000; text-decoration: none; border-radius: 2px; transition: background 0.15s; } .mfs-search-tax-item a:hover, .mfs-search-tax-item.mfs-search-item--active a, .mfs-search-tax-item[aria-selected="true"] a { background: #eceff1; } .mfs-search-tax-count { color: #000; font-weight: 400; font-size: 14px; float: right; margin-left: 10px; } /* ---------------- Product item ---------------- */ .mfs-search-item { border-bottom: 1px solid #eceff1; } .mfs-search-item:last-child { border-bottom: none; } .mfs-search-item-link { display: flex; gap: 20px; padding: 10px; text-decoration: none; color: #000; transition: background 0.15s; } .mfs-search-item-link:hover, .mfs-search-item--active .mfs-search-item-link, .mfs-search-item[aria-selected="true"] .mfs-search-item-link { background: #eceff1; } .mfs-search-item-img { width: 70px; height: 70px; flex-shrink: 0; background: #f5f5f5; overflow: hidden; } .mfs-search-item-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .mfs-search-item-info { flex: 1; min-width: 0; } .mfs-search-item-title { font-size: 15px; font-weight: 500; line-height: 1.3; color: #000; font-family: "'AdihausDIn'", sans-serif; margin-bottom: 2px; } .mfs-search-item-title mark { background: transparent; color: inherit; font-weight: 700; padding: 0; } .mfs-search-item-brand { font-size: 12px; color: #555; margin-bottom: 2px; } .mfs-search-item-meta { display: flex; align-items: center; gap: 10px; margin-top: 2px; } .mfs-search-item-price { font-size: 15px; font-weight: 600; color: #000; font-family: "'AdihausDIn'", sans-serif; } .mfs-search-item-colours { font-size: 13px; font-style: italic; color: #000; margin-top: 3px; font-family: "'AdihausDIn'", sans-serif; } /* ---------------- Empty state / suggestions ---------------- */ .mfs-search-empty { padding: 14px 0 6px; color: #000; font-size: 16px; font-weight: 700; text-transform: uppercase; } .mfs-search-suggest { margin-top: 16px; } /* ---------------- Popular searches (empty focus) ---------------- */ .mfs-search-popular .mfs-search-tax-item a::before { content: "\2315\00a0\00a0"; color: #888; font-size: 13px; } /* ---------------- Loading spinner ---------------- */ .mfs-search-loading { display: flex; align-items: center; gap: 10px; padding: 16px 8px; color: #555; font-size: 14px; } .mfs-search-spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid #e1e1e1; border-top-color: #000; border-radius: 50%; animation: mfs-search-spin 0.8s linear infinite; } @keyframes mfs-search-spin { to { transform: rotate(360deg); } } /* ---------------- View all ---------------- */ .mfs-search-view-all { margin-top: 16px; text-align: left; } .mfs-search-view-all a { display: inline-block; border-radius: 3px; background-color: #000; color: #fff !important; padding: 8px 18px; font-size: 14px; font-weight: 600; text-decoration: none; text-transform: uppercase; letter-spacing: 0.02em; } .mfs-search-view-all a:hover { background: #222; } /* ---------------- Mobile ---------------- */ @media (max-width: 767px) { .mfs-search-input, .mfs-search-form input.search_input_field { padding: 10px 12px; font-size: 16px; /* prevents iOS zoom */ } .mfs-search-dropdown { width: 100vw; max-width: 85vw; right: -51px; max-height: 100vh; padding: 16px; } .mfs-search-result-box { display: block; } .mfs-search-suggestions, .mfs-search-products { width: 100%; } .mfs-search-suggestions { margin-bottom: 20px; } .mfs-search-products { max-height: 55vh; } .mfs-search-item-img { width: 60px; height: 60px; } .mfs-search-view-all a { display: block; text-align: center; } } @media (min-width: 768px) and (max-width: 1024px) { .mfs-search-dropdown { width: 560px; } } /* Hide the "SHOP ALL" button on search results — it's part of the shared * Elementor archive template (used by brand/category pages too) and is * redundant on search results where the user is already searching. Scoped * to search pages only, so brand/category pages still show it. */ body.search-results .elementor-element-7085d63, body.search .elementor-element-7085d63 { display: none !important; } /* ------------------------------------------------------------------------- * Search results grid — force CSS grid on the products UL so product cards * of varying heights don't cause the classic Woo float-layout "stairs" bug * where uneven rows leave first/last row short of products. * ------------------------------------------------------------------------- */ body.search-results ul.products.columns-4, body.search ul.products.columns-4 { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 20px; /* keep side margins 0 so the grid spans the container, but allow a * generous bottom margin — without this the grid sits flush against * pagination and the next page section, looking squashed. */ margin: 0 0 40px !important; padding: 0 !important; list-style: none; /* Default grid align-items: stretch — all cards in a row match the * tallest card's height for a uniform look. */ } /* Force flex-column on each search product card so CSS `order` on the * children takes effect — Elementor's grid rule uses a custom property * (--button-align-display) which isn't always set, leaving the LI as * display:list-item and `order` therefore a no-op. */ body.search-results ul.products.elementor-grid li.product, body.search ul.products.elementor-grid li.product, body.search-results ul.products.columns-4 li.product, body.search ul.products.columns-4 li.product { display: flex !important; flex-direction: column !important; } /* Swatches above, "Available in N colours" below — DOM ships them reversed. */ body.search-results ul.products li.product .wvs-archive-variations-wrapper, body.search ul.products li.product .wvs-archive-variations-wrapper { order: 1; } body.search-results ul.products li.product .count-color, body.search ul.products li.product .count-color { order: 2; } /* Let Elementor's product-grid widget control card layout — we don't need * our own justify-content/align-self overrides now that the search page is * routed through the same custom archive template as brand/category pages. */ /* Zero the default browser margins on the price and count-color paragraphs * so they don't add extra whitespace between siblings in the flex column. */ body.search-results ul.products.columns-4 li.product .custom-after-title, body.search ul.products.columns-4 li.product .custom-after-title { margin: 0 !important; } body.search-results ul.products.columns-4 li.product .count-color, body.search ul.products.columns-4 li.product .count-color { margin: 6px 0 0 !important; } /* On search results, product cards include the full variations wrapper: * colour swatches, size swatches (S/M/L), and a "Clear" reset link. The * size swatches and Clear link are rendered in the DOM but visually blank * — they reserve vertical space inside the card, creating a big empty gap * between the colour swatches and the "Available in N colours" text. Hide * everything in the wrapper except the colour swatch row. */ body.search-results .wvs-archive-variations-wrapper li.wvs_archive_reset_variations, body.search .wvs-archive-variations-wrapper li.wvs_archive_reset_variations, body.search-results .wvs-archive-variations-wrapper ul.button-variable-items-wrapper, body.search .wvs-archive-variations-wrapper ul.button-variable-items-wrapper { display: none !important; } /* Hide the size-attribute

entirely. * :has() is supported by all current browsers; the rule above covers the * inner UL as a defensive fallback for older ones. */ body.search-results .wvs-archive-variations-wrapper li.woo-variation-items-wrapper:has(.button-variable-items-wrapper), body.search .wvs-archive-variations-wrapper li.woo-variation-items-wrapper:has(.button-variable-items-wrapper) { display: none !important; } /* Empty "archive information" div that can still render a min-height. */ body.search-results .wvs-archive-variations-wrapper .wvs-archive-information:empty, body.search .wvs-archive-variations-wrapper .wvs-archive-information:empty { display: none !important; } /* Spacing around the search-results pagination + whatever section follows. */ body.search-results nav.woocommerce-pagination, body.search nav.woocommerce-pagination, body.search-results .mfs-pagination, body.search .mfs-pagination { margin: 24px 0 56px !important; clear: both; } body.search-results .woocommerce-products-header, body.search .woocommerce-products-header { margin-bottom: 24px; } /* Kill the WooCommerce clearfix ::before/::after pseudo-elements. In the * default float layout they're invisible — but when we force display:grid on * the UL, they become grid items and eat the first/last grid cell, causing * the classic "first row has 3 products + empty cell, last row has 1 * orphaned product" layout bug. */ body.search-results ul.products.columns-4::before, body.search-results ul.products.columns-4::after, body.search ul.products.columns-4::before, body.search ul.products.columns-4::after { content: none !important; display: none !important; } body.search-results ul.products.columns-4 li.product, body.search ul.products.columns-4 li.product { margin: 0 !important; float: none !important; width: auto !important; /* Elementor's product grid sets --button-align-justify on li.product * which defaults to space-between/flex-end. With the add-to-cart button * hidden on search archives, that pushes "Available in N colours" to * the bottom of the card and leaves a huge empty gap between the swatches * and the footer text — especially visible on mobile. Force top-aligned * stacking so content packs naturally from the top of each cell. */ justify-content: flex-start !important; --button-align-justify: flex-start; } @media (max-width: 1024px) { body.search-results ul.products.columns-4, body.search ul.products.columns-4 { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 640px) { body.search-results ul.products.columns-4, body.search ul.products.columns-4 { grid-template-columns: repeat(2, 1fr); gap: 10px; } } /* ------------------------------------------------------------------------- * Zero-results page — richer empty state for /?s=... when nothing matched. * ------------------------------------------------------------------------- */ .mfs-search-noresults { max-width: 860px; margin: 24px auto 48px; padding: 32px; background: #f8f9fa; border: 1px solid #e6e8eb; border-radius: 8px; font-size: 15px; line-height: 1.55; color: #23272c; } .mfs-search-noresults__head { text-align: center; margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid #e6e8eb; } .mfs-search-noresults__title { font-size: 22px; font-weight: 600; margin: 0 0 8px; color: #1a1d21; line-height: 1.3; } .mfs-search-noresults__query { color: #c0392b; font-weight: 600; } .mfs-search-noresults__lead { margin: 0; color: #5b6066; font-size: 15px; } .mfs-search-noresults__section { margin-bottom: 24px; } .mfs-search-noresults__section:last-child { margin-bottom: 0; } .mfs-search-noresults__section-title { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; margin: 0 0 12px; color: #5b6066; } .mfs-search-noresults__chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; } .mfs-search-noresults__chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: #fff; border: 1px solid #d0d4d8; border-radius: 999px; color: #1a1d21; text-decoration: none; font-size: 14px; font-weight: 500; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease; } .mfs-search-noresults__chip:hover, .mfs-search-noresults__chip:focus { border-color: #1a1d21; background: #1a1d21; color: #fff; text-decoration: none; } .mfs-search-noresults__chip--suggest { background: #fff6d6; border-color: #f0c14b; color: #6b4e00; } .mfs-search-noresults__chip--suggest:hover, .mfs-search-noresults__chip--suggest:focus { background: #f0c14b; border-color: #c89a2a; color: #1a1d21; } .mfs-search-noresults__chip-count { font-size: 12px; opacity: 0.65; font-weight: 400; } .mfs-search-noresults__browse { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .mfs-search-noresults__group-label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #898f96; margin-bottom: 8px; } .mfs-search-noresults__section--cta { margin-top: 28px; padding-top: 24px; border-top: 1px solid #e6e8eb; text-align: center; } .mfs-search-noresults__cta-text { margin: 0 0 14px; color: #5b6066; font-size: 15px; } .mfs-search-noresults__cta-actions { display: inline-flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .mfs-search-noresults__cta { display: inline-block; padding: 11px 22px; border-radius: 4px; font-weight: 600; font-size: 14px; text-decoration: none; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .mfs-search-noresults__cta--primary { background: #1a1d21; color: #fff; border: 1px solid #1a1d21; } .mfs-search-noresults__cta--primary:hover, .mfs-search-noresults__cta--primary:focus { background: #c0392b; border-color: #c0392b; color: #fff; text-decoration: none; } .mfs-search-noresults__cta--secondary { background: transparent; color: #1a1d21; border: 1px solid #1a1d21; } .mfs-search-noresults__cta--secondary:hover, .mfs-search-noresults__cta--secondary:focus { background: #1a1d21; color: #fff; text-decoration: none; } @media (max-width: 640px) { .mfs-search-noresults { padding: 22px 18px; margin: 16px 8px 32px; } .mfs-search-noresults__title { font-size: 19px; } .mfs-search-noresults__browse { grid-template-columns: 1fr; gap: 18px; } .mfs-search-noresults__cta { flex: 1 1 auto; } }