/* * Zielona Ochrona — FiboSearch header skin. * * FiboSearch appends its suggestion panel to and writes geometry as * inline styles. Keep the panel selectors global, but scope all header layout * changes to the shared Shoptimizer header. */ :root { --zo-search-forest: #005734; --zo-search-forest-deep: #00402a; --zo-search-lime: #8cc63f; --zo-search-orange: #f46b30; --zo-search-ink: #16201b; --zo-search-text: #3a443e; --zo-search-muted: #6b7770; --zo-search-line: #e6ece6; --zo-search-mint: #eef6ef; --zo-search-active: #eaf4db; --zo-search-surface: #fff; --zo-search-radius: 16px; --zo-search-panel-radius: 18px; --zo-search-shadow: 0 22px 58px rgba(0, 64, 42, 0.16), 0 5px 16px rgba(22, 32, 27, 0.08); --zo-search-ease: cubic-bezier(0.2, 0.7, 0.2, 1); } /* Search field ---------------------------------------------------------- */ .site-header .site-search { min-width: 0; } .site-header .dgwt-wcas-search-wrapp { max-width: none; } .site-header .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp { padding: 0; background: transparent; border-radius: var(--zo-search-radius); } .site-header .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input { height: 55px !important; padding: 0 22px 0 52px !important; border: 1.5px solid var(--zo-search-line) !important; border-radius: var(--zo-search-radius) !important; background: var(--zo-search-surface) !important; box-shadow: 0 3px 12px rgba(22, 32, 27, 0.05) !important; color: var(--zo-search-ink) !important; font-family: inherit !important; font-size: 15px !important; font-weight: 500; line-height: 1.3; transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease !important; } .site-header .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input::placeholder { color: var(--zo-search-muted); opacity: 1; } .site-header .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input:hover { border-color: rgba(140, 198, 63, 0.9) !important; background: var(--zo-search-surface) !important; } .site-header .dgwt-wcas-style-pirx.dgwt-wcas-search-focused .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input, .site-header .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input:focus { border-color: var(--zo-search-forest) !important; box-shadow: 0 0 0 4px rgba(140, 198, 63, 0.23), 0 8px 24px rgba(0, 87, 52, 0.1) !important; background: var(--zo-search-surface) !important; outline: 0; } .site-header .dgwt-wcas-style-pirx.dgwt-wcas-search-filled .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input { padding-right: 54px !important; padding-left: 22px !important; } .site-header .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit { top: 11px; left: 14px; width: 33px; height: 33px; min-width: 33px; min-height: 33px; } .site-header .dgwt-wcas-style-pirx.dgwt-wcas-search-filled .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit { right: 14px; left: auto; } .site-header .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit svg path, .site-header .dgwt-wcas-style-pirx.dgwt-wcas-has-submit .dgwt-wcas-search-submit svg path, .site-header .dgwt-wcas-style-pirx .dgwt-wcas-close:not(.dgwt-wcas-inner-preloader) path { fill: var(--zo-search-forest); } .site-header .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit:hover { background: var(--zo-search-mint); box-shadow: 0 0 0 2px var(--zo-search-mint); } /* Desktop header takeover ----------------------------------------------- */ @media (min-width: 993px) { .site-header .main-header { position: relative; isolation: isolate; } .site-header .main-header > .site-branding, .site-header .main-header > .secondary-navigation, .site-header .main-header > .site-header-cart { transition: opacity 150ms ease; } body.dgwt-wcas-focused .site-header, body.dgwt-wcas-open .site-header { z-index: 100001; } body.dgwt-wcas-focused .site-header .main-header > .site-branding, body.dgwt-wcas-focused .site-header .main-header > .secondary-navigation, body.dgwt-wcas-focused .site-header .main-header > .site-header-cart, body.dgwt-wcas-open .site-header .main-header > .site-branding, body.dgwt-wcas-open .site-header .main-header > .secondary-navigation, body.dgwt-wcas-open .site-header .main-header > .site-header-cart { visibility: hidden; opacity: 0; pointer-events: none; } body.dgwt-wcas-focused .site-header .site-search, body.dgwt-wcas-open .site-header .site-search { position: absolute; top: 50%; right: 0; left: 0; z-index: 5; width: 100%; max-width: none; margin: 0; transform: translateY(-50%); } body.dgwt-wcas-focused .site-header .site-search .dgwt-wcas-search-wrapp, body.dgwt-wcas-open .site-header .site-search .dgwt-wcas-search-wrapp { width: 100%; max-width: none; } } .site-header .dgwt-wcas-search-wrapp.dgwt-wcas-search-darkoverl-on .dgwt-wcas-search-form { background: transparent; border-radius: var(--zo-search-radius); } /* Results panel --------------------------------------------------------- */ html:not(.dgwt-wcas-overlay-mobile-on) .dgwt-wcas-suggestions-wrapp { max-width: none !important; max-height: min(620px, calc(100dvh - 180px)) !important; margin-top: 10px !important; border: 1px solid var(--zo-search-line) !important; border-radius: var(--zo-search-panel-radius) !important; background: var(--zo-search-surface) !important; box-shadow: var(--zo-search-shadow) !important; scrollbar-color: rgba(0, 87, 52, 0.35) transparent; scrollbar-width: thin; } .dgwt-wcas-suggestions-wrapp::-webkit-scrollbar { width: 8px; } .dgwt-wcas-suggestions-wrapp::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: rgba(0, 87, 52, 0.3); background-clip: padding-box; } .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion { border-bottom-color: var(--zo-search-line); color: var(--zo-search-text); } .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion.dgwt-wcas-suggestion-product:not([data-taxonomy]) { min-height: 94px; padding: 12px 18px; background: var(--zo-search-surface); transition: background-color 140ms ease !important; } .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion.dgwt-wcas-suggestion-product:not([data-taxonomy]):hover, .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion.dgwt-wcas-suggestion-product:not([data-taxonomy]).dgwt-wcas-suggestion-selected, .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion.dgwt-wcas-suggestion-product:not([data-taxonomy]):focus-visible { background: var(--zo-search-active); } .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion:focus-visible { outline: 2px solid var(--zo-search-forest) !important; outline-offset: -3px; } .dgwt-wcas-suggestions-wrapp .dgwt-wcas-si { width: 70px; min-width: 70px; height: 70px; } .dgwt-wcas-suggestions-wrapp .dgwt-wcas-si img { width: 70px; height: 70px; max-width: 70px; max-height: 70px; padding: 4px; border: 1px solid var(--zo-search-line); border-radius: 12px; object-fit: contain; } .dgwt-wcas-suggestions-wrapp .dgwt-wcas-content-wrapp { min-width: 0; gap: 22px; padding-left: 15px; } .dgwt-wcas-suggestions-wrapp .dgwt-wcas-st { min-width: 0; color: var(--zo-search-text); font-size: 15px; line-height: 1.35; } .dgwt-wcas-suggestions-wrapp .dgwt-wcas-st-title { color: var(--zo-search-ink); font-weight: 650; line-height: 1.35; } .dgwt-wcas-suggestions-wrapp .dgwt-wcas-st-title strong { color: var(--zo-search-forest); font-weight: 750; } .dgwt-wcas-suggestions-wrapp .dgwt-wcas-sku { display: block; margin-top: 5px; color: var(--zo-search-muted); font-size: 12px; line-height: 1.3; } .dgwt-wcas-suggestions-wrapp .zo-fibosearch-product-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 8px; } .dgwt-wcas-suggestions-wrapp .zo-fibosearch-rating { display: inline-flex; align-items: center; gap: 5px; color: var(--zo-search-muted); font-size: 12px; } .dgwt-wcas-suggestions-wrapp .zo-fibosearch-rating .star-rating { display: inline-block; flex: 0 0 auto; font-size: 12px; } .dgwt-wcas-suggestions-wrapp .zo-fibosearch-rating .star-rating::before { background: #d5ded7; } .dgwt-wcas-suggestions-wrapp .zo-fibosearch-rating .star-rating > span::before { background: var(--zo-search-lime); } .dgwt-wcas-suggestions-wrapp .zo-fibosearch-stock { display: inline-flex; align-items: center; gap: 6px; color: var(--zo-search-forest); font-size: 12px; font-weight: 650; } .dgwt-wcas-suggestions-wrapp .zo-fibosearch-stock-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--zo-search-lime); box-shadow: 0 0 0 3px rgba(140, 198, 63, 0.16); } .dgwt-wcas-suggestions-wrapp .zo-fibosearch-stock--on-backorder { color: #b54d21; } .dgwt-wcas-suggestions-wrapp .zo-fibosearch-stock--on-backorder .zo-fibosearch-stock-dot { background: var(--zo-search-orange); box-shadow: 0 0 0 3px rgba(244, 107, 48, 0.14); } .dgwt-wcas-suggestions-wrapp .zo-fibosearch-stock--out-of-stock { color: var(--zo-search-muted); } .dgwt-wcas-suggestions-wrapp .zo-fibosearch-stock--out-of-stock .zo-fibosearch-stock-dot { background: #98a39c; box-shadow: none; } .dgwt-wcas-suggestions-wrapp .dgwt-wcas-meta { flex: 0 0 auto; min-width: 120px; text-align: right; } .dgwt-wcas-suggestions-wrapp .dgwt-wcas-sp { display: block; padding-left: 0; color: var(--zo-search-forest-deep); font-size: 15px; font-weight: 750; line-height: 1.3; } .dgwt-wcas-suggestions-wrapp .dgwt-wcas-sp del { display: block; color: var(--zo-search-muted); font-size: 12px; font-weight: 500; } .dgwt-wcas-suggestions-wrapp .dgwt-wcas-sp ins { color: var(--zo-search-orange); font-weight: 800; text-decoration: none; } /* Native taxonomy suggestions, presented as category chips. */ .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion[data-taxonomy="product_cat"], .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-cat { display: inline-flex !important; width: auto !important; min-height: 34px !important; margin: 5px 0 7px 10px; padding: 7px 12px !important; border: 1px solid #dce8dc !important; border-radius: 999px; background: var(--zo-search-mint); color: var(--zo-search-forest); vertical-align: top; } .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion[data-taxonomy="product_cat"]:hover, .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion[data-taxonomy="product_cat"].dgwt-wcas-suggestion-selected, .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-cat:hover, .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-cat.dgwt-wcas-suggestion-selected { border-color: var(--zo-search-lime) !important; background: var(--zo-search-active) !important; text-decoration: none !important; } .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion[data-taxonomy="product_cat"] .dgwt-wcas-content-wrapp, .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-cat .dgwt-wcas-content-wrapp { gap: 0; padding: 0; } .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion[data-taxonomy="product_cat"] .dgwt-wcas-st, .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion[data-taxonomy="product_cat"] .dgwt-wcas-st-title, .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-cat .dgwt-wcas-st, .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-cat .dgwt-wcas-st-title { color: var(--zo-search-forest); font-size: 13px; font-weight: 700; } .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-cat .dgwt-wcas-st-breadcrumbs { display: none; } .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-headline, .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-headline-v2 { display: block; clear: both; margin: 0; padding: 15px 18px 5px; color: var(--zo-search-muted); font-size: 11px; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; } .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-headline .dgwt-wcas-st, .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-headline-v2 .dgwt-wcas-st { margin: 0; padding: 0; border: 0; color: inherit; font-size: inherit; } /* History, empty result and view-all states. */ .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-searches, .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-history-search, .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-history-product { min-height: 48px; padding: 9px 18px; } .dgwt-wcas-suggestions-wrapp .dgwt-wcas-sugg-hist-clear { color: var(--zo-search-forest); font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: 3px; } .dgwt-wcas-suggestions-wrapp .dgwt-wcas-nores, .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-nores { min-height: 82px; padding: 26px 24px; color: var(--zo-search-text); font-size: 15px; line-height: 1.5; opacity: 1; } .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-more { min-height: 48px; padding: 12px 18px; border-bottom: 0; background: var(--zo-search-mint); color: var(--zo-search-forest); font-size: 12px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; } .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-more:hover, .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-more.dgwt-wcas-suggestion-selected { background: var(--zo-search-active); } /* Mobile header trigger and native FiboSearch overlay ------------------- */ @media (max-width: 992px) { .site-header .site-search { display: block !important; position: absolute; top: 13px; right: 68px; z-index: 3; width: 44px; height: 44px; margin: 0; padding: 0; border: 1px solid var(--zo-search-line); border-radius: 50%; background: var(--zo-search-surface); box-shadow: 0 3px 12px rgba(22, 32, 27, 0.06); } .site-header .site-search::before { content: ""; position: absolute; top: 50%; left: 50%; width: 22px; height: 22px; background: var(--zo-search-forest); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m21 21-4.35-4.35M19 11a8 8 0 1 1-16 0 8 8 0 0 1 16 0Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m21 21-4.35-4.35M19 11a8 8 0 1 1-16 0 8 8 0 0 1 16 0Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; transform: translate(-50%, -50%); pointer-events: none; } .site-header .site-search:focus-within { border-color: var(--zo-search-forest); box-shadow: 0 0 0 4px rgba(140, 198, 63, 0.23); } .site-header .site-search > .dgwt-wcas-search-wrapp { position: absolute; inset: 0; min-width: 0; width: 100%; height: 100%; } .site-header .site-search .dgwt-wcas-search-wrapp:not(.dgwt-wcas-search-wrapp-mobile) .dgwt-wcas-search-form { display: none; } .site-header .site-search .dgwt-wcas-enable-mobile-form { border-radius: 50%; } .min-ck.woocommerce-checkout .site-header .site-search { display: none !important; } .dgwt-wcas-overlay-mobile { position: fixed !important; width: 100vw; height: 100dvh; background: #f7faf7; } .dgwt-wcas-overlay-mobile .dgwt-wcas-om-bar { display: flex; align-items: center; gap: 8px; height: 68px; padding: 8px 12px; border-bottom: 1px solid var(--zo-search-line); background: var(--zo-search-surface); } .dgwt-wcas-overlay-mobile .dgwt-wcas-om-bar button.dgwt-wcas-om-return, .dgwt-wcas-overlay-mobile .dgwt-wcas-om-bar button.dgwt-wcas-om-return:hover, .dgwt-wcas-overlay-mobile .dgwt-wcas-om-bar button.dgwt-wcas-om-return:focus, .dgwt-wcas-overlay-mobile .dgwt-wcas-om-bar button.dgwt-wcas-om-return:active { flex: 0 0 50px; width: 50px; height: 50px; border: 1px solid #dce8dc; border-radius: 14px; background: var(--zo-search-mint); } .dgwt-wcas-overlay-mobile .dgwt-wcas-om-bar button.dgwt-wcas-om-return:focus-visible { outline: 3px solid rgba(140, 198, 63, 0.45); outline-offset: 2px; } .dgwt-wcas-overlay-mobile .dgwt-wcas-om-bar .dgwt-wcas-om-return svg { top: 13px; left: 13px; width: 24px; height: 24px; fill: var(--zo-search-forest); } .dgwt-wcas-overlay-mobile .dgwt-wcas-om-bar .dgwt-wcas-om-return path { fill: var(--zo-search-forest); } .dgwt-wcas-overlay-mobile .dgwt-wcas-search-wrapp-mobile { flex: 1 1 auto; width: auto; min-width: 0; max-width: none; } .dgwt-wcas-overlay-mobile .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp { padding: 0; } .dgwt-wcas-overlay-mobile .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input { height: 50px !important; padding: 0 48px 0 18px !important; border: 1.5px solid var(--zo-search-line) !important; border-radius: 14px !important; background: var(--zo-search-surface) !important; box-shadow: none !important; color: var(--zo-search-ink) !important; font-family: inherit !important; font-size: 16px !important; } .dgwt-wcas-overlay-mobile .dgwt-wcas-style-pirx.dgwt-wcas-search-focused .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input { border-color: var(--zo-search-forest) !important; box-shadow: 0 0 0 3px rgba(140, 198, 63, 0.2) !important; } .dgwt-wcas-overlay-mobile-on .dgwt-wcas-suggestions-wrapp { top: 68px !important; height: calc(100dvh - 68px) !important; padding: 8px 12px 28px; border: 0 !important; border-radius: 0 !important; background: #f7faf7 !important; box-shadow: none !important; } .dgwt-wcas-overlay-mobile-on .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion.dgwt-wcas-suggestion-product:not([data-taxonomy]) { min-height: 84px; padding: 11px 12px; } .dgwt-wcas-overlay-mobile-on .dgwt-wcas-suggestions-wrapp .dgwt-wcas-si, .dgwt-wcas-overlay-mobile-on .dgwt-wcas-suggestions-wrapp .dgwt-wcas-si img { width: 58px; min-width: 58px; height: 58px; max-width: 58px; max-height: 58px; } .dgwt-wcas-overlay-mobile-on .dgwt-wcas-suggestions-wrapp .dgwt-wcas-content-wrapp { gap: 10px; padding-left: 11px; } .dgwt-wcas-overlay-mobile-on .dgwt-wcas-suggestions-wrapp .dgwt-wcas-st { font-size: 14px; } .dgwt-wcas-overlay-mobile-on .dgwt-wcas-suggestions-wrapp .dgwt-wcas-meta { min-width: 84px; } .dgwt-wcas-overlay-mobile-on .dgwt-wcas-suggestions-wrapp .dgwt-wcas-sp { font-size: 13px; } .dgwt-wcas-overlay-mobile-on .dgwt-wcas-suggestions-wrapp .zo-fibosearch-product-meta { gap: 6px 10px; margin-top: 6px; } .dgwt-wcas-overlay-mobile-on .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion[data-taxonomy="product_cat"], .dgwt-wcas-overlay-mobile-on .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-cat { margin-left: 4px; } } @media (max-width: 480px) { .site-header .site-branding .custom-logo-link { transform: translateX(-18px); } .site-header .site-branding .custom-logo-link img { max-width: min(40vw, 158px); } .dgwt-wcas-overlay-mobile-on .dgwt-wcas-suggestions-wrapp .dgwt-wcas-content-wrapp { align-items: flex-start; flex-direction: column; gap: 6px; } .dgwt-wcas-overlay-mobile-on .dgwt-wcas-suggestions-wrapp .dgwt-wcas-meta { min-width: 0; text-align: left; } .dgwt-wcas-overlay-mobile-on .dgwt-wcas-suggestions-wrapp .dgwt-wcas-sp, .dgwt-wcas-overlay-mobile-on .dgwt-wcas-suggestions-wrapp .dgwt-wcas-sp del { display: inline; margin-right: 5px; } } @media (max-width: 360px) { .site-header .site-branding .custom-logo-link img { max-width: 116px; } } @media (prefers-reduced-motion: reduce) { .site-header .dgwt-wcas-search-input, .site-header .main-header > .site-branding, .site-header .main-header > .secondary-navigation, .site-header .main-header > .site-header-cart, .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion { transition: none !important; } }