/** Shopify CDN: Minification failed Line 409:330 Unexpected "}" Line 918:766 Unexpected "}" Line 942:463 Unexpected "}" **/ .product-form__info-item { display: table-row; float: left; width: 100%; } .length_cover label { width: 100%; float: left; } .length_cover input[type="text"] { padding: 10px; border: 1px solid #d4d6d8; margin-top:5px; } #looxReviews{ max-width: inherit; } .slick-slide { cursor: grab; } .product-item__price-list span { font-size: 14px !important; } .length_cover label{ color: #ff0000; } .quick-links__image-ie-fix { max-width: 100% !important; } a.download_pdf { width: 100%; display: flex; align-items: center; } .download_pdf span { margin-right: 10px; } .download_pdf img { height: 50px; margin: 0; margin-top: 5px; } .template-cart .line-item__property-list { display: none; } .inner-logos .slick-slide img, .inner-logos .slick-slide a { display: block; max-height: 150px; margin: 0 auto; align-items: center; } .inner-logos .slick-prev, .inner-logos .slick-next{width:40px; height:40px;} .inner-logos .slick-slide { cursor: grab; align-items: center; display: flex!important; min-height: 150px; background: #fff; margin-left: 5px; margin-right: 5px; padding: 5px; } .template-collection #shopify-section-client-logo { padding-top: 30px; margin-bottom: 20px; } .inner-logos .slick-prev { left: 0; z-index:9; } .inner-logos .slick-next { right: 0; z-index:9; } .inner-logos .slick-prev:before, .inner-logos .slick-next:before{display:none;} .product-form__payment-container { width:100%; } .st_msg{ color: #008a00; position: relative; padding-left: 14px; } .st_msg::before { position: absolute; display: inline-block; content: ""; width: 8px; height: 8px; left: 0; top: 11px; border-radius: 100%; background: #008a00; } @media only screen and (max-width: 768px) { .quick-links .quick-links__link { width:50% !important; } } /* ============================================ PROFESSIONAL HEADER - EDITORIAL GRADE Superior UX: clean, trusted, authoritative ============================================ */ /* TOP BAR: Dark navy - authority & trust */ #shopify-section-top-bar .top-bar_cover { background: #1a1a2e !important; color: #e8e8e8 !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0.04em !important; padding: 8px 0 !important; } #shopify-section-top-bar .top-bar_cover a, #shopify-section-top-bar .top-bar_cover span, #shopify-section-top-bar .top-bar_cover p { color: #e8e8e8 !important; } #shopify-section-top-bar .top-bar_cover strong, #shopify-section-top-bar .top-bar_cover b { color: #FFD814 !important; font-weight: 700 !important; } /* HEADER: Clean white with subtle yellow accent border */ header.header { background: #ffffff !important; border-bottom: 3px solid #FFD814 !important; box-shadow: 0 2px 12px rgba(0,0,0,0.07) !important; padding: 8px 0 !important; } /* Header inner — perfect flex layout */ .header__inner { display: flex !important; align-items: center !important; gap: 20px !important; min-height: 58px !important; } /* Logo — compact, professional */ .header__logo { flex-shrink: 0 !important; margin: 0 !important; } .header__logo img { max-height: 54px !important; width: auto !important; display: block !important; } /* SEARCH BAR — dominant, full-width like Amazon */ .header__search-bar-wrapper { flex: 1 1 auto !important; max-width: 700px !important; } .search-bar { display: flex !important; align-items: stretch !important; border: 2px solid #FFD814 !important; border-radius: 6px !important; overflow: hidden !important; background: #fff !important; height: 42px !important; } .search-bar:focus-within { border-color: #f0a500 !important; box-shadow: 0 0 0 3px rgba(255,216,20,0.25) !important; } .search-bar input[type="search"], .search-bar input[type="text"], .search-bar .search-bar__input, .search-bar input:not([type="submit"]) { border: none !important; outline: none !important; padding: 0 16px !important; font-size: 14px !important; color: #111 !important; background: transparent !important; flex: 1 !important; height: 100% !important; box-shadow: none !important; } .search-bar button[type="submit"], .search-bar .search-bar__submit { background: #FFD814 !important; border: none !important; padding: 0 20px !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; transition: background 0.15s ease !important; } .search-bar button[type="submit"]:hover { background: #f0c800 !important; } .search-bar button[type="submit"] svg, .search-bar button[type="submit"] use, .search-bar button[type="submit"] .icon { fill: #111 !important; color: #111 !important; width: 18px !important; height: 18px !important; } /* Category filter dropdown in search */ .search-bar select { border: none !important; border-right: 1px solid #e0e0e0 !important; background: #f5f5f5 !important; padding: 0 8px !important; font-size: 13px !important; color: #333 !important; cursor: pointer !important; height: 100% !important; min-width: 100px !important; } /* ACCOUNT & CART: Professional stacked layout */ .header__action-list { display: flex !important; align-items: center !important; gap: 2px !important; flex-shrink: 0 !important; } .header__action-item { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; padding: 6px 12px !important; border-radius: 6px !important; transition: background 0.15s ease !important; cursor: pointer !important; text-decoration: none !important; } .header__action-item:hover { background: #f5f5f5 !important; } /* Small label "Hello, sign in" style */ .header__action-item-title { font-size: 11px !important; color: #666 !important; font-weight: 400 !important; line-height: 1.2 !important; white-space: nowrap !important; } /* Bold action label "My Account" */ .header__action-item-content { font-size: 13px !important; font-weight: 700 !important; color: #111 !important; line-height: 1.2 !important; white-space: nowrap !important; } /* Cart action specifically */ .header__action-item--cart .header__action-item-link { display: flex !important; align-items: center !important; gap: 8px !important; font-weight: 700 !important; font-size: 15px !important; color: #111 !important; text-decoration: none !important; } .header__action-item--cart svg, .header__action-item--cart .icon { color: #111 !important; width: 26px !important; height: 26px !important; } /* NAVIGATION BAR — dark, authoritative, professional */ nav.nav-bar { background: #1a1a2e !important; border-top: none !important; border-bottom: none !important; } nav.nav-bar .nav-bar__inner { display: flex !important; align-items: center !important; } nav.nav-bar a, nav.nav-bar button, .nav-bar__link, nav.nav-bar .nav-link { color: #e8e8e8 !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0.02em !important; padding: 12px 14px !important; text-decoration: none !important; white-space: nowrap !important; transition: color 0.15s, background 0.15s !important; background: transparent !important; border: none !important; } nav.nav-bar a:hover, nav.nav-bar button:hover, .nav-bar__link:hover { color: #FFD814 !important; background: rgba(255,255,255,0.07) !important; } nav.nav-bar svg, nav.nav-bar .icon { color: #aaa !important; fill: #aaa !important; } nav.nav-bar a:hover svg, nav.nav-bar button:hover svg { color: #FFD814 !important; fill: #FFD814 !important; } /* PRODUCT CARDS — subtle lift on hover */ .card { border-radius: 8px !important; border: 1px solid #ebebeb !important; box-shadow: 0 1px 4px rgba(0,0,0,0.05) !important; transition: box-shadow 0.22s ease, transform 0.22s ease !important; overflow: hidden !important; } .card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.11) !important; transform: translateY(-3px) !important; border-color: #ddd !important; } /* SECTION HEADINGS — editorial weight */ .section__header h2, h2.section__title, .featured-collection__heading, .collection__title { font-size: 22px !important; font-weight: 800 !important; color: #111 !important; letter-spacing: -0.01em !important; } /* ======================================== BUG FIXES - Search bar gap + Nav overflow ======================================== */ /* FIX 1: Search bar - make input area fill full width (no yellow gap) */ .search-bar__top-wrapper { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; } .search-bar__top { width: 100% !important; } .search-bar__top .search-bar__input-wrapper { flex: 1 1 auto !important; min-width: 0 !important; } .search-bar__top input[type="text"] { flex: 1 1 auto !important; width: 100% !important; min-width: 0 !important; } /* FIX 2: Nav bar - fit all items on one row */ nav.nav-bar .nav-bar__linklist { width: 100% !important; max-width: 100% !important; display: flex !important; flex-wrap: nowrap !important; justify-content: center !important; align-items: stretch !important; margin: 0 !important; padding: 0 !important; } nav.nav-bar .nav-bar__item { display: flex !important; align-items: center !important; white-space: nowrap !important; } nav.nav-bar .nav-bar__link, nav.nav-bar .nav-bar__item > a, nav.nav-bar .nav-bar__item > button { padding: 10px 10px !important; font-size: 12px !important; letter-spacing: 0.1px !important; white-space: nowrap !important; } } } } } } } } /* ============================================================ PREMIUM SEARCH BAR UPGRADE - Professional App-Grade UX Features: instant results, product cards, category tags, popular searches, smart dropdown, keyboard nav indicators ============================================================ */ /* --- SEARCH BAR WRAPPER: ensure overflow visible for dropdown --- */ header.header, .header__inner, .header__search-bar-wrapper { overflow: visible !important; } /* --- SEARCH FORM: clean full-width layout --- */ form.search-bar { position: relative !important; display: flex !important; align-items: stretch !important; width: 100% !important; max-width: 660px !important; height: 46px !important; background: #fff !important; border: 2px solid #FFD814 !important; border-radius: 8px !important; box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important; overflow: visible !important; transition: border-color 0.2s, box-shadow 0.2s !important; } form.search-bar:focus-within { border-color: #F0A500 !important; box-shadow: 0 0 0 3px rgba(255,216,20,0.25), 0 2px 12px rgba(0,0,0,0.12) !important; } /* --- TOP WRAPPER: takes full width --- */ .search-bar__top-wrapper { flex: 1 1 auto !important; min-width: 0 !important; display: flex !important; align-items: stretch !important; overflow: hidden !important; border-radius: 6px 0 0 6px !important; } /* --- SEARCH TOP ROW: input + category pill --- */ .search-bar__top { display: flex !important; align-items: center !important; width: 100% !important; height: 100% !important; gap: 0 !important; } /* --- TEXT INPUT --- */ .search-bar__input-wrapper { flex: 1 1 auto !important; min-width: 0 !important; display: flex !important; align-items: center !important; padding: 0 12px !important; } .search-bar__input, .search-bar__top input[type="text"] { flex: 1 1 auto !important; width: 100% !important; min-width: 0 !important; height: 100% !important; border: none !important; outline: none !important; background: transparent !important; font-size: 14px !important; font-weight: 400 !important; color: #111 !important; letter-spacing: 0.01em !important; } .search-bar__top input[type="text"]::placeholder { color: #999 !important; font-style: normal !important; } /* --- CATEGORY FILTER DROPDOWN --- */ .search-bar__filter { position: relative !important; display: flex !important; align-items: center !important; border-left: 1px solid #e8e8e8 !important; height: 100% !important; flex-shrink: 0 !important; } .search-bar__filter-label { display: flex !important; align-items: center !important; gap: 6px !important; padding: 0 12px !important; height: 100% !important; cursor: pointer !important; font-size: 13px !important; font-weight: 500 !important; color: #333 !important; white-space: nowrap !important; user-select: none !important; background: #fafafa !important; } .search-bar__filter-label:hover { background: #f3f3f3 !important; color: #111 !important; } .search-bar__filter-label svg, .search-bar__filter-label .icon { width: 12px !important; height: 12px !important; opacity: 0.6 !important; } .search-bar__filter select { position: absolute !important; inset: 0 !important; opacity: 0 !important; cursor: pointer !important; width: 100% !important; height: 100% !important; } /* --- SEARCH SUBMIT BUTTON --- */ .search-bar__submit, form.search-bar button[type="submit"] { flex-shrink: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 52px !important; height: 100% !important; background: #FFD814 !important; border: none !important; border-radius: 0 6px 6px 0 !important; cursor: pointer !important; transition: background 0.15s, transform 0.1s !important; color: #111 !important; } .search-bar__submit:hover, form.search-bar button[type="submit"]:hover { background: #F0A500 !important; } .search-bar__submit:active, form.search-bar button[type="submit"]:active { transform: scale(0.96) !important; } .search-bar__submit svg, form.search-bar button[type="submit"] svg { width: 18px !important; height: 18px !important; color: #111 !important; fill: #111 !important; } /* ============================================================ DROPDOWN RESULTS PANEL - Premium App-Grade Design ============================================================ */ /* --- INNER CONTAINER: positions dropdown below header --- */ .search-bar__inner { position: absolute !important; top: calc(100% + 6px) !important; left: -2px !important; width: calc(100% + 4px) !important; z-index: 9999 !important; overflow: visible !important; pointer-events: none !important; } .search-bar__inner-animation { overflow: visible !important; } /* --- RESULTS PANEL: the floating card --- */ .search-bar__results { background: #fff !important; border: 1px solid #e0e0e0 !important; border-radius: 12px !important; box-shadow: 0 8px 40px rgba(0,0,0,0.16), 0 2px 8px rgba(0,0,0,0.08) !important; overflow: hidden !important; max-height: 520px !important; overflow-y: auto !important; pointer-events: auto !important; scrollbar-width: thin !important; scrollbar-color: #FFD814 #f5f5f5 !important; } .search-bar__results::-webkit-scrollbar { width: 4px !important; } .search-bar__results::-webkit-scrollbar-track { background: #f5f5f5 !important; } .search-bar__results::-webkit-scrollbar-thumb { background: #FFD814 !important; border-radius: 4px !important; } /* --- SECTION LABEL (e.g. "Products") --- */ .search-bar__results > p, .search-bar__results-inner > p, .search-bar__result-products > p, .search-bar__result-category > p { margin: 0 !important; padding: 10px 16px 6px !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: #999 !important; background: #fafafa !important; border-bottom: 1px solid #f0f0f0 !important; } /* --- INDIVIDUAL PRODUCT RESULT ITEM --- */ .search-bar__result-item:not(.search-bar__result-item--skeleton) { display: flex !important; align-items: center !important; gap: 14px !important; padding: 12px 16px !important; text-decoration: none !important; border-bottom: 1px solid #f5f5f5 !important; transition: background 0.12s !important; cursor: pointer !important; position: relative !important; } .search-bar__result-item:not(.search-bar__result-item--skeleton):hover { background: #fffbea !important; } .search-bar__result-item:not(.search-bar__result-item--skeleton):last-child { border-bottom: none !important; } /* --- PRODUCT IMAGE: larger, rounded --- */ .search-bar__image-container { flex-shrink: 0 !important; width: 72px !important; height: 72px !important; border-radius: 8px !important; overflow: hidden !important; background: #f7f7f7 !important; border: 1px solid #efefef !important; } .search-bar__image-container img { width: 100% !important; height: 100% !important; object-fit: contain !important; padding: 4px !important; } /* --- PRODUCT INFO BLOCK --- */ .search-bar__item-info { flex: 1 1 auto !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 4px !important; } /* --- PRODUCT TITLE: dark, bold, readable --- */ .search-bar__item-title { font-size: 14px !important; font-weight: 600 !important; color: #111 !important; line-height: 1.3 !important; white-space: normal !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } /* Highlight matched text */ .search-bar__item-title .highlight { color: #b8860b !important; background: #fff9c4 !important; font-weight: 700 !important; border-radius: 2px !important; padding: 0 2px !important; } /* --- PRODUCT PRICE: prominent, green for value --- */ .search-bar__item-price { display: flex !important; align-items: center !important; gap: 8px !important; font-size: 15px !important; font-weight: 700 !important; color: #c7281e !important; line-height: 1 !important; } .search-bar__item-price .exemptify_ex_vat { font-size: 11px !important; font-weight: 400 !important; color: #777 !important; } /* --- IN STOCK BADGE next to price (if exists) --- */ .search-bar__item-info::after { content: "In Stock" !important; display: inline-block !important; font-size: 10px !important; font-weight: 600 !important; color: #2e7d32 !important; background: #e8f5e9 !important; padding: 1px 7px !important; border-radius: 10px !important; width: fit-content !important; letter-spacing: 0.02em !important; } /* --- ARROW INDICATOR on hover --- */ .search-bar__result-item:not(.search-bar__result-item--skeleton)::after { content: "→" !important; position: absolute !important; right: 16px !important; top: 50% !important; transform: translateY(-50%) translateX(4px) !important; opacity: 0 !important; font-size: 18px !important; color: #FFD814 !important; font-weight: 700 !important; transition: opacity 0.15s, transform 0.15s !important; pointer-events: none !important; } .search-bar__item-info::after { position: static !important; content: "✓ In Stock" !important; } .search-bar__result-item:not(.search-bar__result-item--skeleton):hover::after { opacity: 1 !important; transform: translateY(-50%) translateX(0) !important; } /* --- VIEW ALL FOOTER LINK --- */ .search-bar__view-all { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; padding: 14px 20px !important; background: linear-gradient(135deg, #1a1a2e 0%, #2d2d44 100%) !important; color: #FFD814 !important; text-decoration: none !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; transition: background 0.15s !important; border-top: 2px solid #FFD814 !important; } .search-bar__view-all:hover { background: linear-gradient(135deg, #FFD814 0%, #F0A500 100%) !important; color: #111 !important; } .search-bar__view-all .icon { width: 14px !important; height: 14px !important; } /* --- SKELETON LOADING STATE: shimmer effect --- */ .search-bar__result-item--skeleton { pointer-events: none !important; padding: 12px 16px !important; } .skeleton-image, .skeleton-text, .skeleton-paragraph { background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%) !important; background-size: 200% 100% !important; animation: shimmer 1.4s infinite !important; border-radius: 6px !important; } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .skeleton-image { width: 72px !important; height: 72px !important; border-radius: 8px !important; } /* --- HEADER OVERFLOW FIX for dropdown visibility --- */ #shopify-section-header { overflow: visible !important; position: relative !important; z-index: 500 !important; } .header__search-bar-wrapper { overflow: visible !important; position: relative !important; z-index: 600 !important; } /* --- POPULAR SEARCHES placeholder label styling --- */ .search-bar__results-title, .search-bar__popular-label { padding: 12px 16px 4px !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; color: #999 !important; } /* --- CATEGORY BADGES in results --- */ .search-bar__result-category a { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 8px 16px !important; font-size: 13px !important; color: #333 !important; text-decoration: none !important; border-bottom: 1px solid #f5f5f5 !important; width: 100% !important; transition: background 0.1s !important; } .search-bar__result-category a:hover { background: #fffbea !important; color: #b8860b !important; } .search-bar__result-category a::before { content: "🗂" !important; font-size: 14px !important; } /* --- INPUT CLEAR BUTTON --- */ .search-bar__input-clear { display: flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; height: 28px !important; border-radius: 50% !important; background: #f0f0f0 !important; color: #666 !important; cursor: pointer !important; font-size: 16px !important; flex-shrink: 0 !important; transition: background 0.1s !important; } .search-bar__input-clear:hover { background: #e0e0e0 !important; color: #333 !important; } /* --- KEYBOARD NAVIGATION: highlight active item --- */ .search-bar__result-item:not(.search-bar__result-item--skeleton):focus, .search-bar__result-item:not(.search-bar__result-item--skeleton)[aria-selected="true"], .search-bar__result-item:not(.search-bar__result-item--skeleton).is-active { background: #fffbea !important; outline: 2px solid #FFD814 !important; outline-offset: -2px !important; } /* ============================================================ POPULAR SEARCH TAGS (injected by custom JS below) ============================================================ */ .scp-popular-searches { padding: 14px 16px !important; border-bottom: 1px solid #f0f0f0 !important; background: #fafafa !important; } .scp-popular-searches__label { font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; color: #999 !important; margin-bottom: 10px !important; } .scp-popular-searches__tags { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; } .scp-popular-tag { display: inline-flex !important; align-items: center !important; gap: 5px !important; padding: 5px 12px !important; background: #fff !important; border: 1px solid #e8e8e8 !important; border-radius: 20px !important; font-size: 12px !important; font-weight: 500 !important; color: #333 !important; cursor: pointer !important; text-decoration: none !important; transition: all 0.12s !important; white-space: nowrap !important; } .scp-popular-tag:hover { background: #FFD814 !important; border-color: #FFD814 !important; color: #111 !important; transform: translateY(-1px) !important; box-shadow: 0 2px 8px rgba(255,216,20,0.3) !important; } .scp-popular-tag::before { content: "🔍" !important; font-size: 11px !important; } } } } } } } /* VIEW ALL BUTTON - full width fix */ button.search-bar__view-all { width: 100% !important; box-sizing: border-box !important; border: none !important; border-top: 2px solid #FFD814 !important; } .search-bar__results-inner { display: block !important; width: 100% !important; } /* RESULTS inner container full width */ .search-bar__result-products, .search-bar__result-category { display: block !important; width: 100% !important; } } /* === CRITICAL BUG FIXES v2 === */ /* Fix 1: Remove 660px cap - make search form fill its wrapper fully */ form.search-bar { width: 100% !important; max-width: 100% !important; } /* Fix 2: Fix search inner dropdown pointer-events so it is clickable */ .search-bar__inner { pointer-events: auto !important; } .search-bar__inner-animation { pointer-events: auto !important; } .search-bar__results { pointer-events: auto !important; } /* Fix 3: View-all button must be full width */ button.search-bar__view-all, .search-bar__view-all { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; display: block !important; flex: none !important; } /* Fix 4: Search top-wrapper fills form fully, no overflow clip */ .search-bar__top-wrapper { flex: 1 1 auto !important; width: 100% !important; overflow: visible !important; } /* Fix 5: Ensure dropdown is visible and properly positioned */ .search-bar__inner { position: absolute !important; top: calc(100% + 4px) !important; left: 0 !important; width: 100% !important; z-index: 99999 !important; pointer-events: auto !important; } /* Fix 6: Prevent header from clipping search dropdown */ header.header, .header__inner, .header__search-bar-wrapper, #shopify-section-header { overflow: visible !important; } /* Fix 7: Chemical Bund section - ensure product images load */ /* === END CRITICAL BUG FIXES v2 === */ /* ============================================================ */ /* PREMIUM SEARCH BAR v3 - Professional App-Level Redesign */ /* ============================================================ */ /* --- SEARCH FORM SHELL --- */ form.search-bar { position: relative !important; display: flex !important; align-items: stretch !important; width: 100% !important; max-width: none !important; height: 52px !important; background: #fff !important; border: 2px solid #e8e8e8 !important; border-radius: 10px !important; box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important; overflow: visible !important; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; } form.search-bar:focus-within { border-color: #FFD814 !important; box-shadow: 0 0 0 3px rgba(255,216,20,0.2), 0 4px 16px rgba(0,0,0,0.12) !important; } /* --- INPUT AREA --- */ .search-bar__top-wrapper { flex: 1 1 auto !important; display: flex !important; align-items: stretch !important; width: 100% !important; overflow: visible !important; min-width: 0 !important; } .search-bar__top { flex: 1 1 auto !important; display: flex !important; align-items: center !important; width: 100% !important; } .search-bar__input-wrapper { flex: 1 1 auto !important; display: flex !important; align-items: center !important; position: relative !important; padding-left: 14px !important; min-width: 0 !important; } .search-bar__input, .search-bar__top input[type="text"] { flex: 1 1 auto !important; width: 100% !important; min-width: 0 !important; border: none !important; outline: none !important; background: transparent !important; font-size: 15px !important; font-weight: 400 !important; color: #1a1a1a !important; line-height: 1.4 !important; padding: 0 8px 0 0 !important; } .search-bar__input::placeholder, .search-bar__top input[type="text"]::placeholder { color: #9ca3af !important; font-size: 14px !important; font-style: italic !important; } /* --- SEARCH ICON INSIDE INPUT (injected via JS) --- */ .scp-search-icon { display: flex !important; align-items: center !important; justify-content: center !important; width: 20px !important; height: 20px !important; flex-shrink: 0 !important; margin-right: 10px !important; color: #9ca3af !important; pointer-events: none !important; } form.search-bar:focus-within .scp-search-icon { color: #FFD814 !important; } /* --- CATEGORY FILTER DIVIDER --- */ .search-bar__filter { flex-shrink: 0 !important; display: flex !important; align-items: center !important; border-left: 1px solid #e5e7eb !important; padding: 0 !important; margin: 8px 0 !important; } .search-bar__filter-label { display: flex !important; align-items: center !important; gap: 4px !important; padding: 0 12px !important; cursor: pointer !important; font-size: 13px !important; font-weight: 500 !important; color: #4b5563 !important; white-space: nowrap !important; user-select: none !important; } .search-bar__filter select { position: absolute !important; opacity: 0 !important; width: 100% !important; height: 100% !important; cursor: pointer !important; } /* --- SUBMIT BUTTON --- */ button.search-bar__submit, .search-bar__submit { flex-shrink: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 56px !important; height: 100% !important; background: #FFD814 !important; border: none !important; border-radius: 0 8px 8px 0 !important; cursor: pointer !important; transition: background 0.2s ease, transform 0.1s ease !important; } button.search-bar__submit:hover, .search-bar__submit:hover { background: #f5ca00 !important; } button.search-bar__submit:active, .search-bar__submit:active { transform: scale(0.96) !important; background: #e5bc00 !important; } button.search-bar__submit svg, .search-bar__submit svg { width: 20px !important; height: 20px !important; color: #1a1a1a !important; } /* --- DROPDOWN CONTAINER --- */ .search-bar__inner { position: absolute !important; top: calc(100% + 6px) !important; left: -2px !important; right: -2px !important; width: auto !important; z-index: 99999 !important; pointer-events: auto !important; filter: drop-shadow(0 8px 32px rgba(0,0,0,0.14)) !important; } .search-bar__inner-animation { background: #fff !important; border-radius: 12px !important; border: 1px solid #e8e8e8 !important; overflow: hidden !important; pointer-events: auto !important; } .search-bar__results { pointer-events: auto !important; max-height: 420px !important; overflow-y: auto !important; } .search-bar__results::-webkit-scrollbar { width: 5px !important; } .search-bar__results::-webkit-scrollbar-track { background: #f9f9f9 !important; } .search-bar__results::-webkit-scrollbar-thumb { background: #FFD814 !important; border-radius: 4px !important; } /* --- DROPDOWN HEADER LABEL --- */ .search-bar__results-label, .search-bar__result-label { display: block !important; padding: 12px 16px 6px !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: #9ca3af !important; } /* --- RESULT ITEMS --- */ .search-bar__result-item { display: flex !important; align-items: center !important; gap: 14px !important; padding: 10px 16px !important; cursor: pointer !important; text-decoration: none !important; border-bottom: 1px solid #f3f4f6 !important; transition: background 0.15s ease !important; } .search-bar__result-item:hover, .search-bar__result-item.is-active { background: #fffbeb !important; } .search-bar__result-item:last-child { border-bottom: none !important; } /* --- PRODUCT IMAGE --- */ .search-bar__image-container { flex-shrink: 0 !important; width: 68px !important; height: 68px !important; border-radius: 8px !important; overflow: hidden !important; background: #f3f4f6 !important; border: 1px solid #e5e7eb !important; } .search-bar__image-container img { width: 100% !important; height: 100% !important; object-fit: cover !important; } /* --- PRODUCT INFO --- */ .search-bar__item-info { flex: 1 1 auto !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 4px !important; } .search-bar__item-title { font-size: 13px !important; font-weight: 600 !important; color: #111 !important; line-height: 1.4 !important; overflow: hidden !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; } .search-bar__item-title .highlight, .search-bar__item-title em { font-style: normal !important; background: #FEF08A !important; color: #92400e !important; border-radius: 2px !important; padding: 0 2px !important; font-weight: 700 !important; } .search-bar__item-price { display: flex !important; align-items: center !important; gap: 6px !important; } .search-bar__item-price .price { font-size: 14px !important; font-weight: 700 !important; color: #c7281e !important; } .search-bar__item-price .price--compare { font-size: 12px !important; color: #9ca3af !important; text-decoration: line-through !important; font-weight: 400 !important; } /* --- IN STOCK BADGE --- */ .scp-instock-badge { display: inline-flex !important; align-items: center !important; gap: 4px !important; font-size: 11px !important; font-weight: 600 !important; color: #15803d !important; background: #dcfce7 !important; border-radius: 4px !important; padding: 2px 6px !important; } /* --- VIEW ALL FOOTER --- */ button.search-bar__view-all, .search-bar__view-all { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; width: 100% !important; max-width: none !important; padding: 14px 20px !important; background: #1a1f2e !important; color: #FFD814 !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; border: none !important; border-top: 2px solid #FFD814 !important; cursor: pointer !important; text-decoration: none !important; transition: background 0.2s ease !important; box-sizing: border-box !important; } button.search-bar__view-all:hover, .search-bar__view-all:hover { background: #111827 !important; } /* --- POPULAR SEARCHES PANEL --- */ .scp-popular-panel { padding: 14px 16px 10px !important; } .scp-popular-label { font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: #9ca3af !important; margin-bottom: 10px !important; display: block !important; } .scp-popular-tags { display: flex !important; flex-wrap: wrap !important; gap: 7px !important; } .scp-popular-tag { display: inline-flex !important; align-items: center !important; gap: 5px !important; padding: 5px 11px !important; background: #f3f4f6 !important; border: 1px solid #e5e7eb !important; border-radius: 20px !important; font-size: 12px !important; font-weight: 500 !important; color: #374151 !important; cursor: pointer !important; transition: all 0.15s ease !important; text-decoration: none !important; white-space: nowrap !important; } .scp-popular-tag:hover { background: #FFD814 !important; border-color: #FFD814 !important; color: #1a1a1a !important; } /* --- RECENT SEARCHES ROW --- */ .scp-recent-item { display: flex !important; align-items: center !important; gap: 10px !important; padding: 9px 16px !important; cursor: pointer !important; border-bottom: 1px solid #f3f4f6 !important; transition: background 0.15s !important; } .scp-recent-item:hover { background: #fffbeb !important; } .scp-recent-icon { width: 14px !important; height: 14px !important; color: #9ca3af !important; flex-shrink: 0 !important; } .scp-recent-text { font-size: 13px !important; color: #374151 !important; flex: 1 !important; } /* --- CLEAR X BUTTON --- */ .search-bar__input-clear { display: flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; height: 28px !important; border-radius: 50% !important; background: #f3f4f6 !important; border: none !important; cursor: pointer !important; color: #6b7280 !important; flex-shrink: 0 !important; transition: background 0.15s !important; margin-right: 8px !important; } .search-bar__input-clear:hover { background: #FFD814 !important; color: #1a1a1a !important; } /* --- HEADER OVERFLOW FIX --- */ header.header, .header__inner, .header__search-bar-wrapper, #shopify-section-header { overflow: visible !important; } /* ============================================================ */ /* END PREMIUM SEARCH BAR v3 */ /* ============================================================ */ /* === FIX: Results absolute position + view-all sticky bottom === */ .search-bar__inner-animation { position: relative !important; display: flex !important; flex-direction: column !important; } .search-bar__results { position: static !important; flex: 1 1 auto !important; max-height: 360px !important; overflow-y: auto !important; } button.search-bar__view-all, .search-bar__view-all { flex-shrink: 0 !important; position: static !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: none !important; padding: 14px 20px !important; background: #1a1f2e !important; color: #FFD814 !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; border: none !important; border-top: 2px solid #FFD814 !important; box-sizing: border-box !important; cursor: pointer !important; text-decoration: none !important; } /* === END FIX === */ /* === FIX: Wheelie Bins mega-menu dropdown sub-items visibility === */ /* Theme hides a.mega-menu__title.heading by default, but we need them visible */ a.mega-menu__title.heading { display: block !important; color: #333333 !important; font-size: 14px !important; font-weight: 500 !important; text-decoration: none !important; padding: 6px 0 !important; transition: color 0.2s ease !important; } a.mega-menu__title.heading:hover { color: #f5a623 !important; text-decoration: underline !important; } /* === END FIX === */ /* === FIX: All dropdown menu text - dark colour on white background === */ .nav-dropdown__link { color: #1a1a2e !important; font-size: 14px !important; font-weight: 600 !important; } .nav-dropdown__link:hover { color: #ffd814 !important; } a.mega-menu__title.heading { color: #1a1a2e !important; } a.mega-menu__title.heading:hover { color: #ffd814 !important; } /* === END DROPDOWN TEXT FIX === */ /* v2 */ /* === FIX: Override nav.nav-bar a rule which makes ALL nav links near-white === */ nav.nav-bar a.nav-dropdown__link, nav.nav-bar .nav-dropdown__link { color: #1a1a2e !important; } nav.nav-bar a.nav-dropdown__link:hover, nav.nav-bar .nav-dropdown__link:hover { color: #ffd814 !important; } nav.nav-bar a.mega-menu__title { color: #1a1a2e !important; } nav.nav-bar a.mega-menu__title:hover { color: #ffd814 !important; } /* === END OVERRIDE === */