/* ===================================================================== Nordenbeauty — Filter Everything skin --------------------------------------------------------------------- Styles the Filter Everything ("[fe_widget]" / "[fe_chips]") output to match the Nordenbeauty shop design. Targets the plugin's REAL frontend markup (.wpc-* classes), scoped under .nb-shop so nothing else on the site is affected. Load this in (render-blocking) — see functions snippet — so the filter NEVER flashes as an unstyled bullet list (no FOUC). ===================================================================== */ .nb-shop { /* Local design tokens (from the approved mockup) */ --nbf-text: #000000; --nbf-bg: #ffffff; --nbf-accent: #ff0000; --nbf-muted: #d9d9d9; --nbf-line: #ebebeb; --nbf-soft: #f5f5f5; --nbf-num: #999999; --nbf-font: "Montserrat", Arial, Helvetica, sans-serif; --nbf-pill: 999px; --nbf-card: 20px; --nbf-s2: 8px; --nbf-s3: 12px; --nbf-s4: 16px; --nbf-s5: 20px; --nbf-s6: 24px; } /* ===================================================================== 1. SHOP LAYOUT (sidebar + main) ===================================================================== */ .nb-shop { display: grid; grid-template-columns: 280px 1fr; gap: 40px; align-items: start; font-family: var(--nbf-font); } .nb-sidebar { position: sticky; top: 24px; align-self: start; min-width: 0; } .nb-main { min-width: 0; } /* ===================================================================== 2. SIDEBAR HEAD (Filtrid / Tühjenda) ===================================================================== */ .nb-filter-head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: var(--nbf-s4); border-bottom: 2px solid var(--nbf-text); margin-bottom: var(--nbf-s2); } .nb-filter-head h2 { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -0.02em; text-transform: uppercase; line-height: 1; } .nb-filter-clear, .nb-filter-clear:hover, .nb-filter-clear:focus, .nb-filter-clear:active, .nb-filter-clear:focus-visible { font-size: 12px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; color: #555 !important; /* never turns red */ background: none !important; /* never gets the theme's black fill */ border: none !important; box-shadow: none !important; outline: none !important; transform: none !important; /* no press animation */ cursor: pointer; padding: 0; } /* ===================================================================== 3. ACTIVE FILTER CHIPS — HIDDEN (globally) The user does not want any "selected filter" pills. These can render OUTSIDE .nb-shop (the plugin injects a chips bar near the page title / archive description), so the hide must NOT be scoped to .nb-shop. The "Tühjenda" button still clears everything (handled in the JS). Also turn "Show selected filters / chips" OFF in the plugin settings. ===================================================================== */ .wpc-filter-chips-list, ul.wpc-filter-chips-list, .wpc-selected-filters, .wpc-filters-labels-selected, .wpc-chips-wrapper, .wpc-reset-filters-wrapper, li.wpc-filter-chip, li.wpc-chip-reset-all { display: none !important; } /* hide the admin-only "Edit Filter Set" link the plugin prints in the widget */ .nb-sidebar .wpc-edit-filter-set, .nb-sidebar .wpc-edit-filterset, .nb-sidebar .wpc-edit-filters, .nb-sidebar .wpc-filterset-edit-link, .nb-sidebar a.wpc-edit-link, .wpc-filters-main-wrap .wpc-edit-filter-set { display: none !important; } /* ===================================================================== 4. FILTER SECTIONS (.wpc-filters-section) — accordion behaviour The plugin handles open/close when you enable "Collapsible" per filter (adds .wpc-opened / .wpc-closed to the section). We just style it. ===================================================================== */ .nb-sidebar .wpc-filters-main-wrap { margin: 0; } .nb-sidebar .wpc-filters-section { margin: 0 !important; border-bottom: 1px solid var(--nbf-line); position: relative; } /* Section title = accordion header */ .nb-sidebar .wpc-filter-title { margin: 0 !important; padding: var(--nbf-s5) 0; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--nbf-text); cursor: pointer; display: flex; align-items: center; justify-content: space-between; transition: color .15s ease; line-height: 1; } .nb-sidebar .wpc-filter-title:hover { color: var(--nbf-accent); } .nb-sidebar .wpc-filter-title h3, .nb-sidebar .wpc-filter-title .wpc-filter-title-text { margin: 0; font: inherit; } /* +/- indicator (drawn by us, keyed to the section open/close state) */ .nb-sidebar .wpc-filter-collapsible .wpc-filter-title::after { content: ""; width: 12px; height: 12px; position: relative; flex-shrink: 0; background: linear-gradient(currentColor, currentColor) center/12px 2px no-repeat, linear-gradient(currentColor, currentColor) center/2px 12px no-repeat; transition: transform .2s ease; } /* opened → hide the vertical bar (becomes a minus) */ .nb-sidebar .wpc-filter-collapsible.wpc-opened .wpc-filter-title::after { background: linear-gradient(currentColor, currentColor) center/12px 2px no-repeat; } .nb-sidebar .wpc-filter-collapsible.wpc-closed .wpc-filter-title::after, .nb-sidebar .wpc-filter-collapsible:not(.wpc-opened) .wpc-filter-title::after { transform: rotate(0deg); } /* hide the plugin's own +/- control in the title if present (we draw our own) */ .nb-sidebar .wpc-filter-title .wpc-open-close-filters, .nb-sidebar .wpc-filter-title .wpc-collapse-filter-button { display: none !important; } /* Section body */ .nb-sidebar .wpc-filter-content { padding: 0 0 var(--nbf-s5); } /* ===================================================================== 5. TERM LIST (checkboxes / radio) — .wpc-term-item ===================================================================== */ .nb-sidebar ul.wpc-filters-ul-list, .nb-sidebar ul.wpc-filters-ul-list ul.children { list-style: none; margin: 0; padding: 0; } .nb-sidebar li.wpc-term-item { margin: 0 !important; padding: 0 !important; border: none !important; } /* the flex row: [checkbox] [label/link] [count] [toggle] */ .nb-sidebar .wpc-term-item-content-wrapper { display: flex; align-items: center; gap: 10px; padding: 7px 0; position: relative; } /* custom checkbox / radio drawn from the native input */ .nb-sidebar li.wpc-term-item input[type="checkbox"], .nb-sidebar li.wpc-term-item input[type="radio"] { -webkit-appearance: none; appearance: none; margin: 0 !important; width: 16px; height: 16px; flex-shrink: 0; border: 1.5px solid var(--nbf-text); border-radius: 3px; background: #fff; cursor: pointer; position: relative; transition: background .12s ease, border-color .12s ease; } .nb-sidebar li.wpc-term-item input[type="radio"] { border-radius: 50%; } .nb-sidebar .wpc-term-item-content-wrapper:hover input[type="checkbox"], .nb-sidebar .wpc-term-item-content-wrapper:hover input[type="radio"] { border-color: var(--nbf-accent); } .nb-sidebar li.wpc-term-item input[type="checkbox"]:checked, .nb-sidebar li.wpc-term-item input[type="radio"]:checked { background: var(--nbf-text); } .nb-sidebar li.wpc-term-item input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .nb-sidebar li.wpc-term-item input[type="radio"]:checked::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #fff; } /* label + term link */ .nb-sidebar li.wpc-term-item label { flex: 1; margin: 0 !important; padding: 0 !important; font-size: 13px; font-weight: 400; line-height: 1.3; cursor: pointer; user-select: none; } .nb-sidebar li.wpc-term-item label a { color: var(--nbf-text); text-decoration: none !important; font-size: 13px; transition: color .12s ease; } .nb-sidebar li.wpc-term-item label a:hover, .nb-sidebar li.wpc-term-item label:hover a { color: var(--nbf-accent); text-decoration: none !important; } /* Kill underlines everywhere in the sidebar (the theme underlines links, and the selected term's subtree uses a slightly different markup that a label-scoped rule missed). Also clear any border-bottom "underline". */ .nb-sidebar a, .nb-sidebar a:hover, .nb-sidebar a:focus, .nb-sidebar a:active, .nb-sidebar a:visited { text-decoration: none !important; border-bottom: 0 !important; } /* selected term — never underlined or bold */ .nb-sidebar li.wpc-term-item.wpc-term-selected > .wpc-term-item-content-wrapper label a { text-decoration: none !important; font-weight: 400 !important; } /* count */ .nb-sidebar .wpc-term-count { color: var(--nbf-num); font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; flex-shrink: 0; } /* the plugin hides the brackets by default; keep counts clean */ .nb-sidebar .wpc-term-count-brackets-open, .nb-sidebar .wpc-term-count-brackets-close { display: none; } /* ===================================================================== 6. HIERARCHY (parent → children) — ALWAYS EXPANDED The children are forced open so the user never has to click to reveal sub-categories. !important beats the plugin's inline collapse style. ===================================================================== */ /* all category names normal weight — no bold parents (user request) */ .nb-sidebar li.wpc-term-item > .wpc-term-item-content-wrapper > label a { font-weight: 400 !important; } .nb-sidebar > * li.wpc-term-item:has(> ul.children) > .wpc-term-item-content-wrapper label a, .nb-sidebar li.wpc-checkbox-item:has(ul.children) > .wpc-term-item-content-wrapper label a { font-weight: 400 !important; } /* children visible by default (override plugin collapse) */ .nb-sidebar ul.children { display: block !important; margin: 2px 0 6px 8px !important; padding-left: 12px !important; border-left: 1px solid var(--nbf-line); } .nb-sidebar ul.children .wpc-term-item-content-wrapper { padding: 5px 0; } .nb-sidebar ul.children li.wpc-term-item label a { font-weight: 400 !important; } /* hide the expand/collapse toggle entirely — categories stay open */ .nb-sidebar i.wpc-toggle-children-list { display: none !important; } /* ===================================================================== 7. LABELS / PILLS LAYOUT (.wpc-filter-layout-labels → tech pills) ===================================================================== */ .nb-sidebar ul.wpc-filters-labels { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; } .nb-sidebar ul.wpc-filters-labels li.wpc-term-item { width: auto !important; margin: 0 !important; } .nb-sidebar ul.wpc-filters-labels li.wpc-term-item label { margin: 0 !important; border: 1.5px solid var(--nbf-text) !important; border-radius: var(--nbf-pill) !important; background: #fff; cursor: pointer; transition: all .12s ease; } .nb-sidebar ul.wpc-filters-labels li.wpc-term-item label span.wpc-filter-label-wrapper, .nb-sidebar ul.wpc-filters-labels li.wpc-term-item label a { display: inline-flex !important; align-items: center; padding: 7px 12px !important; border: none !important; background: transparent !important; font-size: 12px; font-weight: 600; letter-spacing: 0.01em; color: var(--nbf-text); border-radius: var(--nbf-pill); } .nb-sidebar ul.wpc-filters-labels li.wpc-term-item label:hover { background: var(--nbf-soft); } /* selected pill */ .nb-sidebar ul.wpc-filters-labels li.wpc-term-item input.wpc-label-input:checked + label, .nb-sidebar ul.wpc-filters-labels li.wpc-term-item.wpc-term-selected label { background: var(--nbf-text) !important; border-color: var(--nbf-text) !important; } .nb-sidebar ul.wpc-filters-labels li.wpc-term-item input.wpc-label-input:checked + label span.wpc-filter-label-wrapper, .nb-sidebar ul.wpc-filters-labels li.wpc-term-item input.wpc-label-input:checked + label a, .nb-sidebar ul.wpc-filters-labels li.wpc-term-item.wpc-term-selected label a { color: #fff !important; } /* ===================================================================== 7b. iOS-STYLE TOGGLE FILTERS (Soodusega / Laos olemas) --------------------------------------------------------------------- For a single-option filter (e.g. On-sale, In-stock). In the plugin: add the CSS class `nb-switch-filter` to that filter and turn its "Collapsible" OFF. The filter TITLE becomes the row label and the one checkbox becomes the switch on the right. ===================================================================== */ .nb-sidebar .nb-switch-filter { display: flex; align-items: center; justify-content: space-between; gap: var(--nbf-s3); padding: var(--nbf-s4) 0; } .nb-sidebar .nb-switch-filter .wpc-filter-title { padding: 0 !important; cursor: default; flex: 1; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .nb-sidebar .nb-switch-filter .wpc-filter-title:hover { color: var(--nbf-text); } .nb-sidebar .nb-switch-filter .wpc-filter-title::after { display: none !important; } /* no +/- */ .nb-sidebar .nb-switch-filter .wpc-filter-content { padding: 0 !important; flex: 0 0 auto; } .nb-sidebar .nb-switch-filter ul.wpc-filters-ul-list, .nb-sidebar .nb-switch-filter li.wpc-term-item, .nb-sidebar .nb-switch-filter .wpc-term-item-content-wrapper { margin: 0 !important; padding: 0 !important; gap: 0; } /* the title carries the name → hide the term label + count */ .nb-sidebar .nb-switch-filter .wpc-term-item-content-wrapper label, .nb-sidebar .nb-switch-filter .wpc-term-count { display: none !important; } /* turn the checkbox into a 38×22 switch */ .nb-sidebar .nb-switch-filter input[type="checkbox"] { -webkit-appearance: none; appearance: none; width: 38px !important; height: 22px !important; border: none !important; border-radius: var(--nbf-pill) !important; background: var(--nbf-muted) !important; position: relative; cursor: pointer; flex-shrink: 0; transition: background .18s ease; } .nb-sidebar .nb-switch-filter input[type="checkbox"]::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border: none; border-radius: 50%; background: #fff; transform: none; transition: transform .18s ease; } .nb-sidebar .nb-switch-filter input[type="checkbox"]:checked { background: var(--nbf-accent) !important; } .nb-sidebar .nb-switch-filter input[type="checkbox"]:checked::after { transform: translateX(16px); } /* ===================================================================== 7c. BRAND ROWS (bordered row + status dot) --------------------------------------------------------------------- Add the CSS class `nb-brand-filter` to the brand attribute filter in the plugin. Renders each term as a bordered pill-row with a dot. ===================================================================== */ .nb-sidebar .nb-brand-filter ul.wpc-filters-ul-list { display: flex; flex-direction: column; gap: 6px; } .nb-sidebar .nb-brand-filter .wpc-term-item-content-wrapper { border: 1px solid var(--nbf-line); border-radius: 10px; padding: 8px 12px !important; gap: 10px; transition: border-color .15s ease, background .15s ease; } .nb-sidebar .nb-brand-filter .wpc-term-item-content-wrapper:hover { border-color: var(--nbf-text); } .nb-sidebar .nb-brand-filter input[type="checkbox"] { display: none !important; } .nb-sidebar .nb-brand-filter label { flex: 1; font-weight: 600 !important; letter-spacing: -0.01em; } .nb-sidebar .nb-brand-filter label a { font-weight: 600 !important; } /* status dot (before the count) */ .nb-sidebar .nb-brand-filter .wpc-term-item-content-wrapper::after { content: ""; order: 5; width: 8px; height: 8px; border-radius: 50%; background: var(--nbf-line); flex-shrink: 0; transition: background .15s ease; } .nb-sidebar .nb-brand-filter li.wpc-term-selected .wpc-term-item-content-wrapper { border-color: var(--nbf-text); background: var(--nbf-soft); } .nb-sidebar .nb-brand-filter li.wpc-term-selected .wpc-term-item-content-wrapper::after { background: var(--nbf-accent); } /* ===================================================================== 8. PRICE RANGE (jQuery UI slider) — .wpc-filter-range-form ===================================================================== */ .nb-sidebar .wpc-filter-range-form { margin: 0; } .nb-sidebar .wpc-filters-range-inputs .ui-slider, .nb-sidebar .ui-slider-horizontal { position: relative; height: 2px; margin: 14px 8px 18px; background: var(--nbf-muted); border: none; border-radius: 2px; } .nb-sidebar .ui-slider-horizontal .ui-slider-range { height: 2px; background: var(--nbf-text); border: none; } .nb-sidebar .ui-slider-horizontal .ui-slider-handle { width: 16px; height: 16px; top: 50%; margin-top: -8px; margin-left: -8px; background: var(--nbf-text); border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px var(--nbf-text); cursor: grab; outline: none; } .nb-sidebar .ui-slider-horizontal .ui-slider-handle:hover, .nb-sidebar .ui-slider-horizontal .ui-slider-handle:active { cursor: grabbing; } /* min / max value display + inputs */ .nb-sidebar .wpc-price-filter-amount, .nb-sidebar .wpc-filter-range-values { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; margin-bottom: 4px; } .nb-sidebar .wpc-filter-range-form input[type="text"], .nb-sidebar .wpc-filter-range-form input[type="number"] { width: 70px; padding: 6px 8px; border: 1px solid var(--nbf-line); border-radius: 6px; font-size: 12px; font-family: inherit; text-align: center; } .nb-sidebar .wpc-filter-range-form .wpc-range-apply, .nb-sidebar .wpc-filter-range-form button { margin-top: 10px; padding: 8px 14px; border: 1px solid var(--nbf-text); border-radius: var(--nbf-pill); background: #fff; font-size: 12px; font-weight: 600; cursor: pointer; } .nb-sidebar .wpc-filter-range-form button:hover { background: var(--nbf-text); color: #fff; } /* ===================================================================== 9. APPLY / RESET BUTTONS (manual submission mode) ===================================================================== */ .nb-sidebar .wpc-filter-layout-submit-button button, .nb-sidebar button.wpc-reset-button, .nb-sidebar a.wpc-reset-button { padding: 10px 16px; border-radius: var(--nbf-pill); font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; border: 1px solid var(--nbf-text); } .nb-sidebar .wpc-filter-layout-submit-button .wpc-submit-button, .nb-sidebar button.wpc-submit-button { background: var(--nbf-text); color: #fff; border-color: var(--nbf-text); } .nb-sidebar .wpc-reset-button { background: #fff; color: var(--nbf-text); } /* AJAX loading state on the results (FE adds a class while filtering) */ #nb-shop-results.wpc-loading, #nb-shop-results.wpc-filtering { position: relative; } #nb-shop-results.wpc-loading::after, #nb-shop-results.wpc-filtering::after { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,0.6); z-index: 5; } /* ===================================================================== 10. MAIN — TOOLBAR (Filtrid button + result count + sort, one row) The Filtrid button + count + sort all live in .nb-results-bar so they update together on AJAX. Button is mobile-only (shown in section 12). ===================================================================== */ .nb-results-bar { display: flex; align-items: center; gap: var(--nbf-s4); flex-wrap: wrap; padding-bottom: var(--nbf-s4); border-bottom: 1px solid var(--nbf-line); margin-bottom: var(--nbf-s6); } /* result count sits in the middle and takes the free space */ .nb-results-bar .woocommerce-result-count { margin: 0; flex: 1; font-size: 13px; color: #666; font-weight: 500; } .nb-results-bar .woocommerce-result-count strong, .nb-results-bar .woocommerce-result-count b { color: var(--nbf-text); font-weight: 700; } /* sort label + dropdown on the right */ .nb-results-bar label[for="woocommerce-orderby"] { font-size: 12px; font-weight: 600; color: #666; margin-right: 6px; } .nb-results-bar .woocommerce-ordering { margin: 0; display: inline-flex; align-items: center; } .nb-results-bar select.orderby { padding: 8px 14px; border: 1px solid var(--nbf-text); border-radius: var(--nbf-pill); font-size: 12px; font-weight: 600; font-family: inherit; background: #fff; cursor: pointer; } /* ===================================================================== 11. PRODUCT GRID inside the narrower main column (We DO NOT restyle the cards — theme handles prices/cards.) Uses CSS GRID with a fixed column count so the theme's `li.product{max-width:19.75rem}` and the leftover `.swiper-wrapper` flex rules cannot force the cards onto one column. Grid tracks determine the width; max-width:none lets cards fill the cell. ===================================================================== */ .nb-shop .nb-main ul.products { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: var(--nbf-s5) !important; margin: 0 !important; padding: 0 !important; /* neutralise any leftover swiper transform/flex */ transform: none !important; } .nb-shop .nb-main ul.products li.product { margin: 0 !important; width: auto !important; max-width: none !important; min-width: 0 !important; float: none !important; } @media (max-width: 1200px) { .nb-shop .nb-main ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* ===================================================================== 12. MOBILE — drawer + overlay + filter button ===================================================================== */ .nb-mobile-filter-btn { display: none; } .nb-filter-overlay { display: none; } @media (max-width: 980px) { .nb-shop { grid-template-columns: 1fr; gap: var(--nbf-s5); } .nb-sidebar { position: fixed; top: 0; left: 0; width: min(340px, 92vw); height: 100vh; height: 100dvh; background: #fff; padding: var(--nbf-s5); overflow-y: auto; transform: translateX(-100%); transition: transform .25s ease; z-index: 1000; box-shadow: 0 0 40px rgba(0,0,0,0.15); } .nb-sidebar.is-open { transform: translateX(0); } .nb-mobile-filter-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1.5px solid var(--nbf-text); border-radius: var(--nbf-pill); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; background: #fff; color: var(--nbf-text) !important; /* theme sets button color:#fff → force black */ cursor: pointer; font-family: inherit; } .nb-mobile-filter-btn .nb-filter-icon { color: var(--nbf-text); } .nb-mobile-filter-btn__label { color: var(--nbf-text); } .nb-mobile-filter-btn .badge-count { background: var(--nbf-accent); color: #fff; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; } .nb-mobile-filter-btn .badge-count:empty { display: none; } /* toolbar on mobile: [Filtrid] [453 tulemust] [Sorteeri] */ .nb-results-bar { gap: var(--nbf-s3); } .nb-results-bar .woocommerce-result-count { text-align: center; flex: 1; } .nb-results-bar label[for="woocommerce-orderby"] { display: none; } /* save space on mobile */ .nb-filter-overlay { display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 999; opacity: 0; pointer-events: none; transition: opacity .2s ease; } .nb-filter-overlay.is-open { opacity: 1; pointer-events: auto; } /* close button shown inside the drawer */ .nb-sidebar .nb-filter-head .nb-filter-clear { order: 3; } } @media (max-width: 600px) { .nb-shop .nb-main ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: var(--nbf-s3) !important; } } /* ===================================================================== 13. ANTI-FOUC CRITICALS These guarantee the filter looks structured even if the plugin's own CSS has not finished loading yet (it is also duplicated as inline critical CSS in by the functions snippet). ===================================================================== */ /* NB: children are intentionally NOT force-hidden here. - "Expanded hierarchy" mode (what matches the mockup): the plugin shows children by default → they must stay visible. - "Collapsible children" mode: the plugin adds its OWN inline style to collapse/expand them, which beats this stylesheet. Forcing display:none here trapped children permanently hidden in expanded mode (the .wpc-opened re-show rule never matched, because .wpc-opened is a SECTION class, not a term-
  • class). */ .nb-sidebar .wpc-filter-collapsible.wpc-closed .wpc-filter-content { display: none; } .nb-sidebar .wpc-hidden, .nb-shop .wpc-hidden { display: none !important; }