Water Bottles - Destinations

/* ========================================================= Destinations: shop filter sidebar (matches Figma) Scope: the Elementor container with class "dst-filters" Extra classes to add on widgets (Elementor > Advanced > CSS Classes): dst-boxes -> Size (square boxes) dst-list -> Brand, World, Gender and every "... Type" filter (checkbox list) Colour needs no class (swatches are detected automatically). ========================================================= */ .dst-filters { --dst-ink: #1c1c1c; --dst-text: #555555; --dst-muted: #8c8c8c; --dst-line: #e4e4e4; --dst-box: #d9d9d9; gap: 0 !important; } .dst-filters > .elementor-widget { margin: 0 !important; } /* ---------- group spacing, dividers, headings ---------- */ .dst-filters .widget_layered_nav, .dst-filters .widget_price_filter { padding: 22px 0; border-bottom: 1px solid var(--dst-line); } .dst-filters > .elementor-widget:first-child .widget_layered_nav { padding-top: 0; } .dst-filters > .elementor-widget:last-child .widget_layered_nav, .dst-filters > .elementor-widget:last-child .widget_price_filter { border-bottom: 0; } .dst-filters h5, .dst-filters .widget_price_filter .widget-title { font-size: 12px !important; font-weight: 600 !important; line-height: 1.2 !important; text-transform: uppercase; letter-spacing: .08em; color: var(--dst-ink); margin: 0 0 16px !important; } /* ---------- shared list reset ---------- */ .dst-filters ul.cfvsw-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 !important; padding: 0 !important; list-style: none; } .dst-filters ul.cfvsw-filters li { margin: 0 !important; padding: 0 !important; } .dst-filters ul.cfvsw-filters a { display: block; text-decoration: none; } /* ---------- COLOUR: round swatches (auto, no class needed) ---------- */ .dst-filters .cfvsw-swatches-option:not(.cfvsw-label-option) { width: 22px; height: 22px; min-width: 22px !important; min-height: 22px !important; border: 1px solid rgba(0, 0, 0, .12) !important; box-shadow: none !important; transition: box-shadow .15s ease; } .dst-filters a:hover .cfvsw-swatches-option:not(.cfvsw-label-option) { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--dst-muted) !important; } .dst-filters li.chosen .cfvsw-swatches-option:not(.cfvsw-label-option), .dst-filters .cfvsw-selected-swatch:not(.cfvsw-label-option) { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--dst-ink) !important; } /* terms that currently have no colour set */ .dst-filters [data-slug="white"]:not(.cfvsw-label-option) { background: #ffffff !important; } .dst-filters [data-slug="yellow"]:not(.cfvsw-label-option) { background: #f2c94c !important; } .dst-filters [data-slug="multicolour"]:not(.cfvsw-label-option) { background: conic-gradient(#e74c3c, #f1c40f, #2ecc71, #3498db, #9b59b6, #e74c3c) !important; } /* ---------- SIZE: square boxes (.dst-boxes) ---------- */ .dst-filters .dst-boxes a, .dst-filters .dst-boxes .cfvsw-swatches-option { border-radius: 2px !important; } .dst-filters .dst-boxes .cfvsw-label-option { display: flex; align-items: center; justify-content: center; min-width: 40px !important; height: 32px; min-height: 32px !important; padding: 0 10px !important; background: #fff !important; border: 1px solid var(--dst-box) !important; box-shadow: none !important; font-size: 12px; font-weight: 400; color: var(--dst-ink); transition: border-color .15s ease; } .dst-filters .dst-boxes a:hover .cfvsw-label-option { border-color: #9a9a9a !important; } .dst-filters .dst-boxes li.chosen .cfvsw-label-option, .dst-filters .dst-boxes .cfvsw-selected-swatch { border-color: var(--dst-ink) !important; box-shadow: inset 0 0 0 1px var(--dst-ink) !important; font-weight: 500; } /* hide non-sizes */ .dst-filters .dst-boxes li:has([data-slug="ns"]), .dst-filters .dst-boxes li:has([data-slug="no-size"]), .dst-filters .dst-boxes li:has([data-slug="os"]) { display: none !important; } /* ---------- BRAND / WORLD / GENDER / TYPES: checkbox list (.dst-list) ---------- */ .dst-filters .dst-list ul.cfvsw-filters { flex-direction: column; flex-wrap: nowrap; gap: 12px; } .dst-filters .dst-list li { display: flex; align-items: center; } .dst-filters .dst-list a { flex: 1; border-radius: 0 !important; } .dst-filters .dst-list .cfvsw-swatches-container { display: block; } .dst-filters .dst-list .cfvsw-label-option { display: flex !important; align-items: center; justify-content: flex-start !important; gap: 12px; width: auto !important; min-height: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-size: 14px; line-height: 1.3; color: var(--dst-text); text-align: left; } .dst-filters .dst-list .cfvsw-label-option::before { content: ""; flex: none; width: 16px; height: 16px; border: 1px solid #cfcfcf; border-radius: 3px; background: #fff center / 10px no-repeat; transition: background-color .15s ease, border-color .15s ease; } .dst-filters .dst-list a:hover .cfvsw-label-option { color: var(--dst-ink); } .dst-filters .dst-list a:hover .cfvsw-label-option::before { border-color: #9a9a9a; } .dst-filters .dst-list li.chosen .cfvsw-label-option, .dst-filters .dst-list .cfvsw-selected-swatch { color: var(--dst-ink); } .dst-filters .dst-list li.chosen .cfvsw-label-option::before, .dst-filters .dst-list .cfvsw-selected-swatch::before { background-color: var(--dst-ink); border-color: var(--dst-ink); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E"); } /* product counts, if the widget outputs them */ .dst-filters .dst-list .count { margin-left: auto; padding-left: 12px; font-size: 12px; color: var(--dst-muted); } /* ---------- PRICE: WooCommerce "Filter Products by Price" widget ---------- */ .dst-filters .price_slider_wrapper .ui-widget-content { height: 2px; margin: 12px 8px 20px; background: #e6e6e6; border: 0; border-radius: 0; } .dst-filters .price_slider_wrapper .ui-slider-range { height: 2px; background: var(--dst-ink); } .dst-filters .price_slider_wrapper .ui-slider-handle { top: -7px; width: 16px; height: 16px; margin-left: -8px; background: #fff; border: 2px solid var(--dst-ink); border-radius: 50%; cursor: grab; outline: none; } .dst-filters .price_slider_amount { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--dst-muted); } .dst-filters .price_slider_amount .price_label { order: 1; } .dst-filters .price_slider_amount .button { order: 2; padding: 6px 14px !important; font-size: 11px !important; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--dst-ink) !important; background: #fff !important; border: 1px solid var(--dst-ink) !important; border-radius: 2px !important; } .dst-filters .price_slider_amount .button:hover { color: #fff !important; background: var(--dst-ink) !important; }