/** * Hero Woo Filters - CSS * * Desktop styles scoped to #hero-woo-filters. * Mobile trigger/tags scoped to .hwf-mobile. * Mobile panel/overlay use #hwfMobilePanel and #hwfMobileOverlay * (moved to via JS to escape Elementor stacking contexts). * * @package Hero_Woo_Filters */ /* ======================================== CSS VARIABLES ======================================== */ #hero-woo-filters, .hwf-mobile, #hwfMobilePanel, #hwfMobileOverlay { --hwf-color-brown: #533d28; --hwf-color-brown-dark: #3d2d1e; --hwf-color-beige: #EFE9E1; --hwf-color-beige-dark: #E5DDD3; --hwf-color-white: #FFFFFF; --hwf-color-text: #3D3D3D; --hwf-color-text-light: #666666; --hwf-font-main: 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif; --hwf-transition-fast: 0.2s ease; --hwf-transition-medium: 0.3s ease; --hwf-shadow-dropdown: 0 4px 20px rgba(83, 61, 40, 0.15); --hwf-header-height: 80px; --hwf-bar-height: 50px; --hwf-font-size: 14px; } /* ======================================== WRAPPER ======================================== */ #hero-woo-filters { font-family: var(--hwf-font-main); position: relative; z-index: 100; background: var(--hwf-color-beige); width: 100%; margin-bottom: 2px; } .hwf-mobile { font-family: var(--hwf-font-main); position: relative; width: 100%; } /* ======================================== DESKTOP FILTER BAR ======================================== */ #hero-woo-filters .hwf-filter-bar { background: var(--hwf-color-beige); width: 100%; } #hero-woo-filters .hwf-filter-bar-inner { display: flex; width: 100%; gap: 8px; background: var(--hwf-color-beige); } #hero-woo-filters .hwf-filter-item { flex: 1; position: relative; border: 1px solid var(--hwf-color-brown); } /* ======================================== FILTER BUTTON ======================================== */ #hero-woo-filters .hwf-filter-button { width: 100%; height: var(--hwf-bar-height); padding: 0 16px; background: var(--hwf-color-beige); border: none; font-family: var(--hwf-font-main); font-size: var(--hwf-font-size); font-weight: 400; color: var(--hwf-color-text); cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; transition: background-color var(--hwf-transition-fast); } #hero-woo-filters .hwf-filter-button:hover { background-color: var(--hwf-color-beige-dark); } #hero-woo-filters .hwf-filter-button svg { width: 14px; height: 14px; flex-shrink: 0; stroke-width: 2.5; transition: transform var(--hwf-transition-fast); } #hero-woo-filters .hwf-filter-item.open .hwf-filter-button svg { transform: rotate(180deg); } /* ======================================== DROPDOWN ======================================== */ #hero-woo-filters .hwf-filter-dropdown { position: absolute; top: 100%; left: -1px; right: -1px; min-width: 200px; max-height: 300px; overflow-y: auto; background: var(--hwf-color-beige); border: 1px solid var(--hwf-color-brown); border-top: none; box-shadow: var(--hwf-shadow-dropdown); padding: 0; z-index: 9999; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all var(--hwf-transition-fast); } #hero-woo-filters .hwf-filter-item.open .hwf-filter-dropdown { opacity: 1; visibility: visible; transform: translateY(0); } /* ======================================== FILTER OPTION ======================================== */ #hero-woo-filters .hwf-filter-option { display: flex; align-items: center; gap: 10px; padding: 8px 15px; cursor: pointer; transition: background-color var(--hwf-transition-fast); } #hero-woo-filters .hwf-filter-option:hover { background-color: var(--hwf-color-beige-dark); } /* ======================================== CHECKBOX ======================================== */ #hero-woo-filters .hwf-checkbox { width: 18px; height: 18px; border: 1.5px solid var(--hwf-color-brown); border-radius: 2px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all var(--hwf-transition-fast); background: var(--hwf-color-beige); } #hero-woo-filters .hwf-checkbox svg { width: 10px; height: 10px; opacity: 0; transform: scale(0.5); transition: all var(--hwf-transition-fast); } #hero-woo-filters .hwf-filter-option.selected .hwf-checkbox { background-color: var(--hwf-color-brown); border-color: var(--hwf-color-brown); } #hero-woo-filters .hwf-filter-option.selected .hwf-checkbox svg { opacity: 1; transform: scale(1); } /* ======================================== RADIO (desktop) ======================================== */ #hero-woo-filters .hwf-radio { width: 18px; height: 18px; border: 1.5px solid var(--hwf-color-brown); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all var(--hwf-transition-fast); background: var(--hwf-color-beige); } #hero-woo-filters .hwf-radio-dot { width: 8px; height: 8px; border-radius: 50%; background-color: var(--hwf-color-brown); opacity: 0; transform: scale(0); transition: all var(--hwf-transition-fast); } #hero-woo-filters .hwf-filter-option.selected .hwf-radio { border-color: var(--hwf-color-brown); } #hero-woo-filters .hwf-filter-option.selected .hwf-radio-dot { opacity: 1; transform: scale(1); } /* ======================================== RADIO (mobile panel - scoped to #hwfMobilePanel) ======================================== */ #hwfMobilePanel .hwf-radio { width: 18px; height: 18px; border: 1.5px solid var(--hwf-color-brown); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all var(--hwf-transition-fast); background: var(--hwf-color-beige); } #hwfMobilePanel .hwf-radio-dot { width: 8px; height: 8px; border-radius: 50%; background-color: var(--hwf-color-brown); opacity: 0; transform: scale(0); transition: all var(--hwf-transition-fast); } #hwfMobilePanel .hwf-mobile-filter-option.selected .hwf-radio-dot { opacity: 1; transform: scale(1); } /* ======================================== OPTION LABEL & COUNT ======================================== */ #hero-woo-filters .hwf-option-label { font-size: var(--hwf-font-size); color: var(--hwf-color-text); } #hero-woo-filters .hwf-option-count { font-size: 12px; color: var(--hwf-color-text-light); margin-left: auto; } /* ======================================== TAGS SECTION (desktop) ======================================== */ #hero-woo-filters .hwf-tags-section { display: none; background: var(--hwf-color-beige); padding: 12px 20px; } #hero-woo-filters .hwf-tags-section.visible { display: flex; align-items: center; justify-content: space-between; gap: 20px; } #hero-woo-filters .hwf-tags-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; width: 100%; } #hero-woo-filters .hwf-tags { display: flex; flex-wrap: wrap; gap: 8px; } #hero-woo-filters .hwf-tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; background-color: var(--hwf-color-brown); color: var(--hwf-color-white); font-family: var(--hwf-font-main); font-size: 12px; font-weight: 400; border-radius: 0; } #hero-woo-filters .hwf-tag-remove { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; cursor: pointer; background: transparent; border: 2px solid var(--hwf-color-white); border-radius: 50%; padding: 0; transition: opacity var(--hwf-transition-fast); } #hero-woo-filters .hwf-tag-remove:hover { opacity: 0.8; } #hero-woo-filters .hwf-tag-remove svg { width: 20px; height: 20px; stroke-width: 4; } /* ======================================== RESET LINK (desktop) ======================================== */ #hero-woo-filters .hwf-reset-link { display: inline-block; font-family: var(--hwf-font-main); font-size: 12px; font-weight: 600; line-height: 1.4; color: var(--hwf-color-brown); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; background: none; border: none; border-radius: 0; padding: 0; margin: 0; white-space: nowrap; flex-shrink: 0; } #hero-woo-filters .hwf-reset-link:hover, #hero-woo-filters .hwf-reset-link:focus { color: var(--hwf-color-brown-dark); background: none; border: none; } /* ======================================== MOBILE WRAPPER (trigger + tags only) ======================================== */ .hwf-mobile { display: none; font-family: var(--hwf-font-main); } /* ======================================== MOBILE TRIGGER ======================================== */ .hwf-mobile .hwf-mobile-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--hwf-color-beige); border: none; font-family: var(--hwf-font-main); font-size: var(--hwf-font-size); font-weight: 500; line-height: 1.4; color: var(--hwf-color-brown); cursor: pointer; border-radius: 0; margin: 0; } .hwf-mobile .hwf-mobile-trigger:hover, .hwf-mobile .hwf-mobile-trigger:focus { background: var(--hwf-color-beige); border: none; color: var(--hwf-color-brown); } .hwf-mobile .hwf-mobile-trigger-inner { display: flex; align-items: center; gap: 6px; } .hwf-mobile .hwf-mobile-catalogue-title { font-family: var(--hwf-font-main); font-size: 24px; font-weight: 800; color: var(--hwf-color-brown); } .hwf-mobile .hwf-mobile-trigger svg { width: 14px; height: 14px; transition: transform var(--hwf-transition-fast); } /* ======================================== MOBILE TAGS SECTION ======================================== */ .hwf-mobile .hwf-mobile-tags-section { display: none; padding: 16px; background: var(--hwf-color-beige); } .hwf-mobile .hwf-mobile-tags-section.visible { display: block; } .hwf-mobile .hwf-mobile-tags-inner { display: flex; flex-direction: column; gap: 12px; } .hwf-mobile .hwf-mobile-tags { display: flex; flex-wrap: wrap; gap: 8px; } .hwf-mobile .hwf-mobile-tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; background-color: var(--hwf-color-brown); color: var(--hwf-color-white); font-family: var(--hwf-font-main); font-size: 12px; border-radius: 0; } .hwf-mobile .hwf-mobile-tag-remove { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; cursor: pointer; background: transparent; border: 2px solid var(--hwf-color-white); border-radius: 50%; padding: 0; } .hwf-mobile .hwf-mobile-tag-remove svg { width: 20px; height: 20px; stroke-width: 4; } .hwf-mobile .hwf-mobile-reset-link { display: inline-block; font-family: var(--hwf-font-main); font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--hwf-color-brown); text-decoration: underline; text-underline-offset: 3px; text-align: left; cursor: pointer; background: none; border: none; border-radius: 0; padding: 0; margin: 0; } .hwf-mobile .hwf-mobile-reset-link:hover, .hwf-mobile .hwf-mobile-reset-link:focus { color: var(--hwf-color-brown-dark); background: none; border: none; } /* ======================================== MOBILE OVERLAY — scoped to #hwfMobileOverlay (element moved to via JS) ======================================== */ #hwfMobileOverlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); z-index: 999998; opacity: 0; visibility: hidden; transition: opacity var(--hwf-transition-medium), visibility var(--hwf-transition-medium); } #hwfMobileOverlay.open { opacity: 1; visibility: visible; } /* ======================================== MOBILE PANEL — scoped to #hwfMobilePanel (element moved to via JS) ======================================== */ #hwfMobilePanel { position: fixed; top: 0; right: 0; width: 100%; max-width: 400px; height: 100%; background: var(--hwf-color-beige); z-index: 999999; display: flex; flex-direction: column; transform: translateX(100%); transition: transform var(--hwf-transition-medium); font-family: var(--hwf-font-main); } #hwfMobilePanel.open { transform: translateX(0); } /* Panel header */ #hwfMobilePanel .hwf-mobile-panel-header { display: flex; align-items: center; justify-content: flex-end; padding: 20px; border-bottom: 1px solid var(--hwf-color-beige-dark); background: var(--hwf-color-beige); } #hwfMobilePanel .hwf-mobile-panel-title { font-size: 14px; font-weight: 500; color: var(--hwf-color-brown); margin-right: 6px; } #hwfMobilePanel .hwf-mobile-panel-close { display: flex; align-items: center; gap: 6px; background: transparent; border: none; cursor: pointer; color: var(--hwf-color-brown); font-family: var(--hwf-font-main); font-size: 14px; font-weight: 500; } #hwfMobilePanel .hwf-mobile-panel-close svg { width: 14px; height: 14px; transform: rotate(180deg); } /* Panel body */ #hwfMobilePanel .hwf-mobile-panel-body { flex: 1; overflow-y: auto; padding: 16px; padding-bottom: 100px; } /* Accordion */ #hwfMobilePanel .hwf-mobile-accordion-item { margin-bottom: 10px; } #hwfMobilePanel .hwf-mobile-accordion-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: var(--hwf-color-beige); border: 1px solid var(--hwf-color-brown); font-family: var(--hwf-font-main); font-size: var(--hwf-font-size); font-weight: 400; line-height: 1.4; color: var(--hwf-color-text); cursor: pointer; transition: all var(--hwf-transition-fast); border-radius: 0; margin: 0; } #hwfMobilePanel .hwf-mobile-accordion-trigger:hover, #hwfMobilePanel .hwf-mobile-accordion-trigger:focus { background: var(--hwf-color-beige); border: 1px solid var(--hwf-color-brown); color: var(--hwf-color-text); } #hwfMobilePanel .hwf-mobile-accordion-item.open .hwf-mobile-accordion-trigger { border-bottom-color: transparent; } #hwfMobilePanel .hwf-mobile-accordion-item.open .hwf-mobile-accordion-trigger:hover, #hwfMobilePanel .hwf-mobile-accordion-item.open .hwf-mobile-accordion-trigger:focus { border-bottom-color: transparent; } #hwfMobilePanel .hwf-mobile-accordion-trigger svg { width: 14px; height: 14px; stroke-width: 2.5; transition: transform var(--hwf-transition-fast); } #hwfMobilePanel .hwf-mobile-accordion-item.open .hwf-mobile-accordion-trigger svg { transform: rotate(180deg); } #hwfMobilePanel .hwf-mobile-accordion-content { background: var(--hwf-color-beige); border: 1px solid var(--hwf-color-brown); border-top: none; padding: 0 16px; max-height: 0; overflow: hidden; transition: max-height var(--hwf-transition-medium), padding var(--hwf-transition-medium); } #hwfMobilePanel .hwf-mobile-accordion-item.open .hwf-mobile-accordion-content { max-height: 300px; padding: 8px 16px 16px; } /* Filter options */ #hwfMobilePanel .hwf-mobile-filter-option { display: flex; align-items: center; gap: 12px; padding: 10px 0; cursor: pointer; } #hwfMobilePanel .hwf-mobile-filter-option .hwf-checkbox { width: 18px; height: 18px; border: 1.5px solid var(--hwf-color-brown); border-radius: 2px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all var(--hwf-transition-fast); background: var(--hwf-color-beige); } #hwfMobilePanel .hwf-mobile-filter-option .hwf-checkbox svg { width: 10px; height: 10px; opacity: 0; transform: scale(0.5); transition: all var(--hwf-transition-fast); } #hwfMobilePanel .hwf-mobile-filter-option.selected .hwf-checkbox { background-color: var(--hwf-color-brown); border-color: var(--hwf-color-brown); } #hwfMobilePanel .hwf-mobile-filter-option.selected .hwf-checkbox svg { opacity: 1; transform: scale(1); } #hwfMobilePanel .hwf-mobile-filter-option .hwf-option-label, #hwfMobilePanel .hwf-mobile-filter-option .hwf-mobile-option-label { font-size: var(--hwf-font-size); color: var(--hwf-color-text); } #hwfMobilePanel .hwf-option-count { font-size: 11px; color: var(--hwf-color-text-light); margin-left: 4px; } /* Panel footer */ #hwfMobilePanel .hwf-mobile-panel-footer { position: absolute; bottom: 0; left: 0; right: 0; display: flex; gap: 12px; padding: 16px; background: var(--hwf-color-brown); border-top: 1px solid var(--hwf-color-beige-dark); } #hwfMobilePanel .hwf-mobile-btn { flex: 1; padding: 14px 20px; font-family: var(--hwf-font-main); font-size: var(--hwf-font-size); font-weight: 500; cursor: pointer; transition: all var(--hwf-transition-fast); border: none; } #hwfMobilePanel .hwf-mobile-btn-cancel { background: var(--hwf-color-brown); color: var(--hwf-color-white); border: 1px solid var(--hwf-color-beige); } #hwfMobilePanel .hwf-mobile-btn-cancel:hover { background: var(--hwf-color-brown-dark); } #hwfMobilePanel .hwf-mobile-btn-apply { background: var(--hwf-color-beige); color: var(--hwf-color-brown); border: 1px solid var(--hwf-color-beige); } #hwfMobilePanel .hwf-mobile-btn-apply:hover { background: var(--hwf-color-beige-dark); } /* Disabled options */ #hwfMobilePanel .hwf-mobile-filter-option.hwf-option-disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; } #hwfMobilePanel .hwf-mobile-filter-option.hwf-option-disabled .hwf-checkbox, #hwfMobilePanel .hwf-mobile-filter-option.hwf-option-disabled .hwf-radio { background-color: #e0e0e0; border-color: #ccc; } #hwfMobilePanel .hwf-mobile-filter-option.hwf-option-disabled .hwf-option-count { color: #aaa; } /* Locked options */ #hwfMobilePanel .hwf-mobile-filter-option.hwf-option-locked { cursor: default; pointer-events: none; background-color: rgba(83, 61, 40, 0.08); } #hwfMobilePanel .hwf-mobile-filter-option.hwf-option-locked .hwf-checkbox { background-color: var(--hwf-color-brown); border-color: var(--hwf-color-brown); } #hwfMobilePanel .hwf-mobile-filter-option.hwf-option-locked .hwf-checkbox svg { opacity: 1; transform: scale(1); } #hwfMobilePanel .hwf-lock-icon { margin-left: auto; opacity: 0.5; flex-shrink: 0; } /* ======================================== RESPONSIVE BREAKPOINTS ======================================== */ @media (max-width: 900px) { #hero-woo-filters { --hwf-header-height: 60px; } #hero-woo-filters .hwf-desktop { display: none; } #hero-woo-filters .hwf-tags-section { display: none !important; } .hwf-mobile { display: block; z-index: 100; background: var(--hwf-color-beige); } } @media (max-width: 768px) { #hwfMobilePanel { width: 100%; max-width: none; } } /* ======================================== FILTERED RESULTS MESSAGE ======================================== */ .hwf-all-filtered-message { text-align: center; padding: 20px; font-family: var(--hwf-font-main, 'Work Sans', sans-serif); font-size: 14px; color: #666666; } /* ======================================== LOADING OVERLAY ======================================== */ .elementor-loop-container.hwf-loading { position: relative; min-height: 200px; } .hwf-loading-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(239, 233, 225, 0.8); display: flex; align-items: center; justify-content: center; z-index: 100; } .hwf-spinner { width: 40px; height: 40px; border: 3px solid var(--hwf-color-beige-dark, #E5DFD7); border-top-color: var(--hwf-color-brown, #533d28); border-radius: 50%; animation: hwf-spin 0.8s linear infinite; } @keyframes hwf-spin { to { transform: rotate(360deg); } } /* ======================================== LOAD MORE BUTTON ======================================== */ #hero-woo-filters ~ .hwf-load-more-wrapper, .hwf-load-more-wrapper { text-align: center; padding: 30px 20px; } #hwfLoadMore.hwf-load-more-btn, .hwf-load-more-wrapper #hwfLoadMore { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 15px 30px; font-family: "Work Sans", Sans-serif; font-size: 12px; font-weight: 900; letter-spacing: 0.2px; line-height: 1; color: var(--hwf-color-brown, #533d28); background: transparent; border: none; border-radius: 0; cursor: pointer; transition: opacity 0.2s ease; -webkit-appearance: none; appearance: none; } #hwfLoadMore.hwf-load-more-btn:hover { opacity: 0.7; background: transparent; } #hwfLoadMore.hwf-load-more-btn:disabled { opacity: 0.5; cursor: not-allowed; } #hwfLoadMore .hwf-load-more-text { display: block; text-align: center; } #hwfLoadMore .hwf-load-more-icon { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; background-image: url('https://solodolo.com/wp-content/uploads/2025/09/Vector.png'); background-size: contain; background-repeat: no-repeat; background-position: center; } #hwfLoadMore .hwf-load-more-spinner { display: flex; align-items: center; justify-content: center; } #hwfLoadMore .hwf-load-more-spinner svg { width: 24px; height: 24px; fill: var(--hwf-color-brown, #533d28); animation: hwf-spin 1s linear infinite; } /* ======================================== NO RESULTS ======================================== */ .hwf-no-results { grid-column: 1 / -1; text-align: center; padding: 60px 20px; font-family: var(--hwf-font-main, 'Work Sans', sans-serif); font-size: 16px; color: var(--hwf-color-text-light, #666666); } /* ======================================== DISABLED OPTIONS (desktop) ======================================== */ #hero-woo-filters .hwf-filter-option.hwf-option-disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; } #hero-woo-filters .hwf-filter-option.hwf-option-disabled .hwf-checkbox, #hero-woo-filters .hwf-filter-option.hwf-option-disabled .hwf-radio { background-color: #e0e0e0; border-color: #ccc; } #hero-woo-filters .hwf-filter-option.hwf-option-disabled:hover { background-color: transparent; } #hero-woo-filters .hwf-option-count, #hwfMobilePanel .hwf-option-count { font-size: 11px; color: var(--hwf-color-text-light, #888); margin-left: 4px; } #hero-woo-filters .hwf-filter-option.hwf-option-disabled .hwf-option-count { color: #aaa; } /* ======================================== LOCKED OPTIONS (desktop) ======================================== */ #hero-woo-filters .hwf-filter-option.hwf-option-locked { cursor: default; pointer-events: none; background-color: rgba(83, 61, 40, 0.08); } #hero-woo-filters .hwf-filter-option.hwf-option-locked .hwf-checkbox { background-color: var(--hwf-color-brown); border-color: var(--hwf-color-brown); } #hero-woo-filters .hwf-filter-option.hwf-option-locked .hwf-checkbox svg { opacity: 1; transform: scale(1); } #hero-woo-filters .hwf-filter-option.hwf-option-locked:hover { background-color: rgba(83, 61, 40, 0.08); } #hero-woo-filters .hwf-lock-icon { margin-left: auto; opacity: 0.5; flex-shrink: 0; }