/* ========================================================================== Sumisu Knives — live zoeken (sep 2026) ========================================================================== */ /* zoekveld (vorm blijft zoals in header-CSS; dit is de basis) */ div.search_bar.sk-search{ width:100% !important; max-width:100% !important; position:relative; } form.asearch{ display:flex; align-items:center; flex-wrap:nowrap; border-radius:50px; padding:0 14px 0 6px; } form.asearch .sk-search__btn{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; padding:0 !important; border:0 !important; background:none !important; color:inherit; cursor:pointer; opacity:.75; } form.asearch .sk-search__input{ flex:1 1 auto; width:100%; min-width:0; border:0 !important; background:transparent; outline:none; box-shadow:none !important; } form.asearch .sk-search__input::-webkit-search-cancel-button{ -webkit-appearance:none; } /* paneel (hangt aan , position:fixed) */ .sk-search-panel{ position:fixed; z-index:100080; overflow-y:auto; overscroll-behavior:contain; background:#fff; border:1px solid #e4e1dc; border-radius:14px; box-shadow:0 30px 70px -25px rgba(0,0,0,.45); font-family:'Inter',system-ui,sans-serif; opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .18s ease, transform .22s cubic-bezier(.2,.7,.2,1), visibility 0s linear .22s; } .sk-search-panel::before{ content:""; display:block; height:3px; background:linear-gradient(90deg,#b87935,#e6b76f); border-radius:14px 14px 0 0; } .sk-search-panel.is-open{ opacity:1; visibility:visible; transform:none; transition:opacity .18s ease, transform .22s cubic-bezier(.2,.7,.2,1), visibility 0s; } .sk-sp__group{ padding:10px 10px 4px; } .sk-sp__group + .sk-sp__group{ border-top:1px solid #f0ece6; } .sk-sp__label{ padding:6px 10px 8px; font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:#8a5a26; } .sk-sp__item{ display:flex; align-items:center; gap:14px; padding:9px 10px; border-radius:10px; text-decoration:none !important; color:#111 !important; transition:background .15s ease; } .sk-sp__item:hover, .sk-sp__item.is-sel{ background:#f7f3ee; } .sk-sp__thumb{ flex:0 0 auto; width:54px; height:54px; border-radius:8px; overflow:hidden; background:#fff; border:1px solid #e4e1dc; } .sk-sp__thumb img{ width:100%; height:100%; object-fit:contain; padding:3px; box-sizing:border-box; display:block; } .sk-sp__txt{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; } .sk-sp__title{ font-size:14px; font-weight:600; line-height:1.3; color:#111; overflow:hidden; text-overflow:ellipsis; } .sk-sp__item--product .sk-sp__title{ font-family:'Cormorant Garamond',Georgia,serif; font-size:18px; font-weight:500; } .sk-sp__meta{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:#8a7d70; } .sk-sp__title mark{ background:rgba(200,169,110,.25); color:inherit; padding:0 1px; border-radius:2px; } .sk-sp__price{ flex:0 0 auto; font-size:14px; font-weight:600; color:#8a5a26; text-align:right; white-space:nowrap; } .sk-sp__price del{ display:block; font-size:11.5px; font-weight:400; color:#a89c90; } .sk-sp__price ins{ text-decoration:none; background:none; } .sk-sp__price.is-oos{ opacity:.55; } .sk-sp__price .woocommerce-Price-currencySymbol{ display:inline !important; } .sk-sp__price .screen-reader-text{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); } .sk-sp__item--page{ padding:10px 10px; } .sk-sp__pico{ flex:0 0 auto; width:34px; height:34px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:#f7f3ee; color:#8a5a26; } .sk-sp__item--page .sk-sp__title{ flex:1 1 auto; } .sk-sp__go{ color:#c8a96e; opacity:0; transform:translateX(-4px); transition:all .15s ease; } .sk-sp__item--page:hover .sk-sp__go, .sk-sp__item--page.is-sel .sk-sp__go{ opacity:1; transform:none; } .sk-sp__all{ display:flex; align-items:center; justify-content:center; gap:8px; margin:6px 10px 10px; padding:13px 14px; border-radius:10px; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; text-decoration:none !important; color:#111 !important; background:#f7f3ee; border:1px solid rgba(200,169,110,.35); transition:all .15s ease; } .sk-sp__all:hover, .sk-sp__all.is-sel{ background:linear-gradient(135deg,#b87935,#e6b76f); border-color:transparent; } .sk-sp__empty, .sk-sp__loading{ padding:22px 20px 10px; font-size:14px; color:#555; text-align:center; } .sk-sp__loading{ display:flex; align-items:center; justify-content:center; gap:10px; padding-bottom:22px; } .sk-sp__spin{ width:16px; height:16px; border-radius:50%; border:2px solid #eadfcd; border-top-color:#b87935; animation:sk-sp-spin .7s linear infinite; } @keyframes sk-sp-spin{ to{ transform:rotate(360deg); } } @media (max-width:700px){ .sk-sp__thumb{ width:48px; height:48px; } .sk-sp__item--product .sk-sp__title{ font-size:16px; } } /* topbalk: zoekveld rechts (naast taalkeuze), vaste breedte zoals voorheen */ .topbar-search{ display:flex !important; justify-content:flex-end !important; align-items:center; } .topbar-search div.search_bar.sk-search{ width:178px !important; max-width:178px !important; }