@depict-ai/react-ui 0.0.79 → 0.0.80

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (42) hide show
  1. package/dist/index.d.ts +1 -1
  2. package/dist/main.js +1 -1
  3. package/dist/module.js +1 -1
  4. package/dist/styles/components/PLP/Buttons.scss +152 -0
  5. package/dist/styles/components/PLP/MorphingSign.scss +32 -0
  6. package/dist/styles/components/PLP/PLPResults.scss +27 -0
  7. package/dist/styles/components/PLP/ProductListingPage.scss +165 -0
  8. package/dist/styles/components/PLP/ScrollStatus.scss +28 -0
  9. package/dist/styles/components/PLP/SelectedFilters.scss +81 -0
  10. package/dist/styles/components/PLP/SlidableItems.scss +118 -0
  11. package/dist/styles/components/PLP/SortAndFilter/FloatingButtons.scss +76 -0
  12. package/dist/styles/components/PLP/SortAndFilter/SortAndFilter.scss +816 -0
  13. package/dist/styles/components/PLP/SortAndFilter/SortAndFilterModal.scss +157 -0
  14. package/dist/styles/components/PLP/Toast.scss +61 -0
  15. package/dist/styles/components/PLP/index.scss +15 -0
  16. package/dist/styles/components/category/BreadCrumbs.scss +25 -0
  17. package/dist/styles/components/category/CategoryTitle.scss +33 -0
  18. package/dist/styles/components/category/QuickLinks.scss +57 -0
  19. package/dist/styles/components/category/index.scss +7 -0
  20. package/dist/styles/components/search/Autocomplete.scss +182 -0
  21. package/dist/styles/components/search/CategorySuggestions.scss +53 -0
  22. package/dist/styles/components/search/InstantCard.scss +119 -0
  23. package/dist/styles/components/search/InstantResults.scss +12 -0
  24. package/dist/styles/components/search/PreviousSearches.scss +83 -0
  25. package/dist/styles/components/search/SearchField.scss +160 -0
  26. package/dist/styles/components/search/SearchModal.scss +86 -0
  27. package/dist/styles/components/search/SearchRecommendations.scss +28 -0
  28. package/dist/styles/components/search/ShowingResultsFor.scss +7 -0
  29. package/dist/styles/components/search/index.scss +12 -0
  30. package/dist/styles/{plain-css-fallback-styling.css → default.css} +1 -1
  31. package/dist/styles/helpers/color_inference.scss +112 -0
  32. package/dist/styles/helpers/custom_input.scss +194 -0
  33. package/dist/styles/helpers/supports-hover.scss +7 -0
  34. package/dist/styles/helpers/utils.scss +110 -0
  35. package/dist/styles/index.scss +57 -1
  36. package/dist/styles/package.json +31 -0
  37. package/dist/styles/variables.scss +312 -0
  38. package/dist-server/index.d.ts +1 -1
  39. package/dist-server/main.js +1 -1
  40. package/dist-server/module.js +1 -1
  41. package/package.json +11 -18
  42. package/README.md +0 -3
package/dist/styles/{plain-css-fallback-styling.css → default.css} RENAMED
@@ -1 +1 @@
1
- .depict.plp{color:#0f0f0f}.depict.plp button{border:none}.depict.plp .listing-page{flex-direction:column;display:flex}.depict.plp .listing-page .no-results{background:#fff;flex-direction:column;flex-grow:2;justify-content:flex-start;align-items:center;padding:40px;display:flex}.depict.plp .listing-page .no-results .hint{cursor:pointer;color:#333335;text-decoration:underline}.depict.plp .listing-page{padding:20px 10px}@media (max-width:651px){.depict.plp .listing-page{padding:16px 8px}}.depict.plp .listing-page,.depict.plp .listing-page *{box-sizing:border-box}.depict.plp .listing-page>.filter-results-for-one-row,.depict.plp .listing-page>.results-for{margin-bottom:10px}@media (max-width:651px){.depict.plp .listing-page>.filter-results-for-one-row,.depict.plp .listing-page>.results-for{margin-bottom:8px}}.depict.plp .listing-page>.sort-and-filter-buttons{margin-top:10px;margin-bottom:10px}@media (max-width:651px){.depict.plp .listing-page>.sort-and-filter-buttons{margin-top:8px;margin-bottom:8px}}.depict.plp .listing-page .PLP-results{margin-top:10px;display:flex}@media (max-width:651px){.depict.plp .listing-page .PLP-results{margin-top:8px}}.depict.plp .listing-page .PLP-results>.filters,.depict.plp .listing-page .PLP-results>.sorting{margin-left:12px}.depict.plp .listing-page .cards{flex-flow:wrap;flex-grow:1;align-content:flex-start;display:flex;overflow:hidden}.depict.plp .listing-page .selected-filters .inner{align-items:center;margin-top:0;margin-bottom:0;display:flex}.depict.plp .listing-page .selected-filters .inner .title{margin-right:10px}@media (max-width:651px){.depict.plp .listing-page .selected-filters .inner{margin-top:10px;margin-bottom:10px}}.depict.plp .listing-page .selected-filters .inner .title{text-transform:uppercase;color:#0f0f0f;font-size:1.1em}@media (max-width:600px){.depict.plp .listing-page .selected-filters .inner .title{display:none}}.depict.plp .listing-page .selected-filters .inner .depict-slider{width:unset;overflow:hidden}.depict.plp .listing-page .selected-filters .inner .depict-slider .clear-filter{border:1px solid #0f0f0f}.depict.plp .listing-page .selected-filters .inner .depict-slider .clear-filter svg{width:12.64px;height:12.64px}.depict.plp .listing-page .selected-filters .inner .depict-slider .clear-all-filters{border:1px solid #0f0f0f}.depict.plp .listing-page .selected-filters .inner .depict-slider .clear-filter,.depict.plp .listing-page .selected-filters .inner .depict-slider .clear-all-filters{box-sizing:border-box;white-space:nowrap;cursor:pointer;border-radius:4px;flex:none;align-items:center;padding:5px 10px;font-size:1em;line-height:1;display:flex}.depict.plp .listing-page .selected-filters .inner .depict-slider .clear-filter>:not(:first-child),.depict.plp .listing-page .selected-filters .inner .depict-slider .clear-all-filters>:not(:first-child){margin-left:2.5px}.depict.plp .listing-page .selected-filters .inner .depict-slider .clear-filter>:not(:last-child),.depict.plp .listing-page .selected-filters .inner .depict-slider .clear-all-filters>:not(:last-child){margin-right:2.5px}.depict.plp .scroll-status{pointer-events:none;white-space:nowrap;z-index:calc(5000 + 4);opacity:0;justify-content:center;align-items:center;display:flex;position:sticky;bottom:10vh}.depict.plp .scroll-status .text{color:#fff;background:#333335bf;border-radius:20px;padding:10px 20px}.depict.plp .major-minor-transition{transition:filter .15s ease-in-out,background .25s ease-in-out,color .25s ease-in-out,border .25s ease-in-out}.depict.plp .filter-results-for-one-row{justify-content:space-between;align-items:center;display:flex}.depict.plp :not(.filter-results-for-one-row)>.sort-and-filter-buttons .inner{justify-content:space-between}.depict.plp .sorting-attributes,.depict.plp .sorting-direction{flex-direction:column;padding:10px;display:flex}.depict.plp .sorting-attributes>:not(:first-child),.depict.plp .sorting-direction>:not(:first-child){margin-top:5px}.depict.plp .sorting-attributes>:not(:last-child),.depict.plp .sorting-direction>:not(:last-child){margin-bottom:5px}.depict.plp .sort-and-filter-buttons .outer{margin-top:-5px}.depict.plp .sort-and-filter-buttons .inner{justify-content:flex-end;align-items:center;padding-top:5px;display:flex;overflow:hidden}.depict.plp .sort-and-filter-buttons .inner>:not(:first-child){margin-left:5px}.depict.plp .sort-and-filter-buttons .inner>:not(:last-child){margin-right:5px}.depict.plp .sort-and-filter-buttons.fake .toggle-button{transition:none}.depict.plp .sort-and-filter-buttons .toggle-button{white-space:nowrap;position:relative}.depict.plp .sort-and-filter-buttons .toggle-button>:not(:first-child){margin-left:2.5px}.depict.plp .sort-and-filter-buttons .toggle-button>:not(:last-child){margin-right:2.5px}.depict.plp .sort-and-filter-buttons .toggle-button svg path{transition-duration:.25s}.depict.plp .sort-and-filter-buttons .toggle-button.major.for-sorting>:not(:first-child){margin-left:5px}.depict.plp .sort-and-filter-buttons .toggle-button.major.for-sorting>:not(:last-child){margin-right:5px}.depict.plp .sort-and-filter-buttons .num-filters{color:#fff;width:20px;height:20px;z-index:calc(1 + 1);background:#0f0f0f;border-radius:13px;justify-content:center;align-items:center;font-size:12px;line-height:1;transition:opacity .25s ease-in-out;display:flex;position:absolute;top:-4px;right:-4px}.depict.plp .sort-and-filter-buttons .open-filters-button-container{position:relative}.depict.plp label{margin:0}.depict.plp .PLP-results .sorting,.depict.plp .PLP-results .filters{flex-shrink:0;flex-basis:330px}.depict.plp .filters .body,.depict.plp .sorting .body{flex-direction:column;display:flex}.depict.plp .filters .body .input-row,.depict.plp .sorting .body .input-row{cursor:pointer;position:relative}.depict.plp .filters .body .input-row .custom-indicator,.depict.plp .sorting .body .input-row .custom-indicator{margin-right:10px;position:relative}.depict.plp .filters .body .input-row input,.depict.plp .sorting .body .input-row input{opacity:0;cursor:pointer;height:0;width:0;position:absolute}.depict.plp .filters .body .input-row .custom-indicator:after,.depict.plp .sorting .body .input-row .custom-indicator:after{content:"";display:none;position:absolute}.depict.plp .filters .body .input-row input[type=checkbox]~.custom-indicator,.depict.plp .sorting .body .input-row input[type=checkbox]~.custom-indicator{background-color:#fff;border-radius:2px;padding:calc(max(20px,1em)/2 - 1px)}.depict.plp .filters .body .input-row input[type=checkbox]~.custom-indicator:not(.color),.depict.plp .sorting .body .input-row input[type=checkbox]~.custom-indicator:not(.color){border:1px solid #333335}.depict.plp .filters .body .input-row input[type=checkbox]~.custom-indicator.color,.depict.plp .sorting .body .input-row input[type=checkbox]~.custom-indicator.color{padding:calc(max(20px,1em)/2)}.depict.plp .filters .body .input-row input[type=checkbox]~.custom-indicator.color.outline,.depict.plp .sorting .body .input-row input[type=checkbox]~.custom-indicator.color.outline{border:.5px solid #868689;padding:calc(max(20px,1em)/2 - .5px)}.depict.plp .filters .body .input-row input[type=checkbox]:checked~.custom-indicator,.depict.plp .sorting .body .input-row input[type=checkbox]:checked~.custom-indicator{background-color:#0f0f0f}.depict.plp .filters .body .input-row input[type=checkbox]:checked~.custom-indicator:after,.depict.plp .sorting .body .input-row input[type=checkbox]:checked~.custom-indicator:after{fill:#fff;color:#fff;width:12px;height:10px;background-image:url("data:image/svg+xml;utf8,<svg fill=\"%23FFFFFF\" width=\"12\" height=\"10\" viewBox=\"0 0 12 10\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12 2.0001L10.6 0.600098L4 7.2001L1.4 4.6001L0 6.0001L4 10.0001L12 2.0001Z\" /></svg>");display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.depict.plp .filters .body .input-row input[type=checkbox]:checked~.custom-indicator.color:after,.depict.plp .sorting .body .input-row input[type=checkbox]:checked~.custom-indicator.color:after{background-image:url("data:image/svg+xml;utf8,<svg fill=\"%23FFFFFF\" width=\"12\" height=\"10\" viewBox=\"0 0 12 10\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12 2.0001L10.6 0.600098L4 7.2001L1.4 4.6001L0 6.0001L4 10.0001L12 2.0001Z\" /></svg>")}.depict.plp .filters .body .input-row input[type=checkbox]:checked~.custom-indicator.color.check-dark:after,.depict.plp .sorting .body .input-row input[type=checkbox]:checked~.custom-indicator.color.check-dark:after{background-image:url("data:image/svg+xml;utf8,<svg fill=\"%23000000\" width=\"12\" height=\"10\" viewBox=\"0 0 12 10\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12 2.0001L10.6 0.600098L4 7.2001L1.4 4.6001L0 6.0001L4 10.0001L12 2.0001Z\" /></svg>")}.depict.plp .filters .body .input-row input[type=checkbox]:checked~.custom-indicator.color.check-multi:after,.depict.plp .sorting .body .input-row input[type=checkbox]:checked~.custom-indicator.color.check-multi:after{background-image:url("data:image/svg+xml;utf8,<svg fill=\"%23FFFFFF\" width=\"12\" height=\"10\" viewBox=\"0 0 12 10\" xmlns=\"http://www.w3.org/2000/svg\"><path style=\"stroke:black;stroke-width:1px\" d=\"M12 2.0001L10.6 0.600098L4 7.2001L1.4 4.6001L0 6.0001L4 10.0001L12 2.0001Z\" /></svg>")}.depict.plp .filters .body .input-row input[type=checkbox]:focus-visible~.custom-indicator,.depict.plp .sorting .body .input-row input[type=checkbox]:focus-visible~.custom-indicator{background-color:#f3f3f5}.depict.plp .filters .body .input-row input[type=checkbox]:focus-visible~.custom-indicator.color,.depict.plp .sorting .body .input-row input[type=checkbox]:focus-visible~.custom-indicator.color{filter:drop-shadow(-2px -2px 4px #418fc3cc)drop-shadow(2px 2px 4px #418fc3cc)}.depict.plp .filters .body .input-row input[type=checkbox]:checked:focus-visible~.custom-indicator,.depict.plp .sorting .body .input-row input[type=checkbox]:checked:focus-visible~.custom-indicator{background-color:#333335}@media not all and (hover:none){.depict.plp .filters .body .input-row:hover input[type=checkbox]~.custom-indicator,.depict.plp .sorting .body .input-row:hover input[type=checkbox]~.custom-indicator{background-color:#f3f3f5}.depict.plp .filters .body .input-row:hover input[type=checkbox]~.custom-indicator:not(.color),.depict.plp .sorting .body .input-row:hover input[type=checkbox]~.custom-indicator:not(.color){border:2px solid #0f0f0f;padding:calc(max(20px,1em)/2 - 2px)}.depict.plp .filters .body .input-row:hover input[type=checkbox]:checked~.custom-indicator,.depict.plp .sorting .body .input-row:hover input[type=checkbox]:checked~.custom-indicator{background-color:#333335}}.depict.plp .filters .body .input-row input[type=radio]~.custom-indicator,.depict.plp .sorting .body .input-row input[type=radio]~.custom-indicator{background-color:#fff;border:1px solid #333335;border-radius:50%;padding:calc(max(20px,1em)/2 - 1px)}.depict.plp .filters .body .input-row input[type=radio]:checked~.custom-indicator,.depict.plp .sorting .body .input-row input[type=radio]:checked~.custom-indicator{background-color:#0000}.depict.plp .filters .body .input-row input[type=radio]:checked~.custom-indicator:after,.depict.plp .sorting .body .input-row input[type=radio]:checked~.custom-indicator:after{width:14px;height:14px;background-color:#0f0f0f;border-radius:50%;display:block;top:50%;left:50%;transform:translate(-50%,-50%)}.depict.plp .filters .body .input-row input[type=radio]:focus-visible~.custom-indicator,.depict.plp .sorting .body .input-row input[type=radio]:focus-visible~.custom-indicator{background:#e6e6e6}.depict.plp .filters .body .input-row input[type=radio]:checked:focus-visible~.custom-indicator:after,.depict.plp .sorting .body .input-row input[type=radio]:checked:focus-visible~.custom-indicator:after{background:#4f4f4f}@media not all and (hover:none){.depict.plp .filters .body .input-row:hover input[type=radio]~.custom-indicator,.depict.plp .sorting .body .input-row:hover input[type=radio]~.custom-indicator{border:2px solid #0f0f0f;padding:calc(max(20px,1em)/2 - 2px)}}.depict.plp .filters .body .input-row{justify-content:space-between;padding-top:5px;padding-bottom:5px}.depict.plp .filters .body .input-row,.depict.plp .filters .body .input-row>.left{align-items:center;display:flex}.depict.plp .filters .body .input-row .text{text-overflow:ellipsis;white-space:pre-line;overflow-wrap:anywhere;color:#333335;-webkit-line-clamp:1;word-break:break-word;-webkit-box-orient:vertical;font-weight:400;line-height:max(20px,1em);display:-webkit-box;overflow:hidden}.depict.plp .filters .body .input-row :checked~.text,.depict.plp .filters .body .input-row .fake-checked~.text{color:#0f0f0f;font-weight:500}.depict.plp .filters .body .input-row.count-0 *+.text{color:#868689}.depict.plp .filters .body .input-row .count,.depict.plp .filters .body .hierarchical .checkbox-details.expandable .category-parent .count{color:#868689;font-weight:400}.depict.plp .filters .body .input-row:hover .count{color:#000}.depict.plp .filters .body .selected-w-sign{align-items:center;display:flex}.depict.plp .filters .body .selected-w-sign>:not(:first-child){margin-left:5px}.depict.plp .filters .body .selected-w-sign>:not(:last-child){margin-right:5px}.depict.plp .filters .body .selected-w-sign .show-selected{color:#868689;fill:#868689;align-items:center;display:flex}.depict.plp .filters .body .selected-w-sign .show-selected>:not(:first-child){margin-left:2.5px}.depict.plp .filters .body .selected-w-sign .show-selected>:not(:last-child){margin-right:2.5px}.depict.plp .filters .body .selected-w-sign .show-selected span{line-height:1}.depict.plp .filters .body .ungrouped{margin-top:25px}.depict.plp .filters .body .clear-all-filters{text-transform:uppercase;margin-top:5px;padding:.7em;font-size:1.1em;font-weight:400}.depict.plp .filters .body details summary{cursor:pointer;list-style:none}.depict.plp .filters .body details summary::-webkit-details-marker{display:none}.depict.plp .filters .body details summary>.summary{justify-content:space-between;align-items:center;display:flex}.depict.plp .filters .body details.filter-collapsible{border-top:1px solid #cbcbcc}.depict.plp .filters .body details.filter-collapsible .filter-group-summary:focus{outline:none}.depict.plp .filters .body details.filter-collapsible .filter-group-summary:focus-visible{background:#f3f3f5}@media not all and (hover:none){.depict.plp .filters .body details.filter-collapsible .filter-group-summary:hover{background:#f3f3f5}}.depict.plp .filters .body details.filter-collapsible .filter-group-summary:active{background:#eeeef0}.depict.plp .filters .body details.filter-collapsible .filter-group-summary>.summary{color:#333335;padding:15px 10px}.depict.plp .filters .body details.filter-collapsible .filter-group-summary>.summary>svg{transform:rotate(270deg)}.depict.plp .filters .body details.filter-collapsible[open] .filter-group-summary{border-bottom:1px solid #e4e4e5}.depict.plp .filters .body details.filter-collapsible[open] .filter-group-summary>.summary>span{font-weight:500}.depict.plp .filters .body .filter-collapsible-body{border-radius:0 0 4px 4px;flex-direction:column;margin-bottom:15px;display:flex;overflow:hidden}.depict.plp .filters .body .filter-collapsible-body>:not(:first-child){margin-top:.5px}.depict.plp .filters .body .filter-collapsible-body>:not(:last-child){margin-bottom:.5px}.depict.plp .filters .body .filter-collapsible-body .view-more-clear{border-top:1px solid #e4e4e5;justify-content:space-between;display:flex}.depict.plp .filters .body .filter-collapsible-body .view-more-clear .clear-group{margin-left:auto}.depict.plp .filters .body .filter-collapsible-body .view-more-clear .clear-group>:not(:first-child){margin-left:1.839px}.depict.plp .filters .body .filter-collapsible-body .view-more-clear .clear-group>:not(:last-child){margin-right:1.839px}.depict.plp .filters .body .filter-collapsible-body .view-more-clear .clear-group svg{width:11px;height:12px}.depict.plp .filters .body .filter-collapsible-body .view-more-clear .expand-filter{margin-right:auto}.depict.plp .filters .body .filter-collapsible-body .view-more-clear .expand-filter>:not(:first-child){margin-left:5px}.depict.plp .filters .body .filter-collapsible-body .view-more-clear .expand-filter>:not(:last-child){margin-right:5px}.depict.plp .filters .body .filter-collapsible-body .view-more-clear .expand-filter.expanded svg{clip-path:polygon(20% 48%,80% 48%,80% 50.8%,20% 50.8%);transform:scale(1.6)}.depict.plp .filters .body .filter-collapsible-body .view-more-clear button{color:#333335;cursor:pointer;text-transform:uppercase;background:0 0;border:none;justify-content:center;align-items:center;margin-bottom:0;margin-left:0;margin-right:0;padding:10px;display:flex}.depict.plp .filters .body .filter-collapsible-body .view-more-clear button svg path{fill:#333335}@media not all and (hover:none){.depict.plp .filters .body .filter-collapsible-body .view-more-clear button:hover{color:#4c4c4f}}.depict.plp .filters .body .filter-collapsible-body .view-more-clear button:active{color:#000}.depict.plp .filters .body .filter-collapsible-body .view-more-clear button:focus-visible{filter:drop-shadow(-2px -2px 4px #418fc3cc)drop-shadow(2px 2px 4px #418fc3cc);outline:none}.depict.plp .filters .body .filter-collapsible-body .filter-part{flex-direction:column;padding:15px 10px 20px;display:flex}.depict.plp .filters .body .filter-collapsible-body .filter-part>:not(:first-child){margin-top:5px}.depict.plp .filters .body .filter-collapsible-body .filter-part>:not(:last-child){margin-bottom:5px}.depict.plp .filters .body :not(.ungrouped)>form{margin-top:-5px;margin-bottom:-5px}.depict.plp .filters .body .hierarchical{margin-left:-20px}.depict.plp .filters .body .hierarchical.any-expandable .count{margin-right:30px}.depict.plp .filters .body .hierarchical .checkbox-details{padding-left:20px}.depict.plp .filters .body .hierarchical .checkbox-details.expandable{position:relative}.depict.plp .filters .body .hierarchical .checkbox-details.expandable summary:before,.depict.plp .filters .body .hierarchical .checkbox-details.expandable summary:after{pointer-events:none;content:"";height:1px;width:calc(100% - 20px);background:#f3f3f5;position:absolute;right:0}.depict.plp .filters .body .hierarchical .checkbox-details.expandable summary:before{top:-.5px}.depict.plp .filters .body .hierarchical .checkbox-details.expandable summary:after{bottom:-.5px}@media not all and (hover:none){.depict.plp .filters .body .hierarchical .checkbox-details.expandable summary:hover:after,.depict.plp .filters .body .hierarchical .checkbox-details.expandable summary:hover:before,.input-row:hover~details>.depict.plp .filters .body .hierarchical .checkbox-details.expandable summary:after,.input-row:hover~details>.depict.plp .filters .body .hierarchical .checkbox-details.expandable summary:before{z-index:1;background:#e4e4e5}}.depict.plp .filters .body .hierarchical .checkbox-details.expandable summary:focus-visible:after,.depict.plp .filters .body .hierarchical .checkbox-details.expandable summary:focus-visible:before,.input-row~details:focus-visible>.depict.plp .filters .body .hierarchical .checkbox-details.expandable summary:after,.input-row~details:focus-visible>.depict.plp .filters .body .hierarchical .checkbox-details.expandable summary:before{z-index:1;background:#e4e4e5}.depict.plp .filters .body .hierarchical .checkbox-details.expandable>.input-row{padding-right:30px;position:absolute}.depict.plp .filters .body .hierarchical .checkbox-details.expandable>details:not([open]),.depict.plp .filters .body .hierarchical .checkbox-details.expandable>details[open]>.category-parent>.summary{padding-top:5px;padding-bottom:5px}.depict.plp .filters .body .hierarchical .checkbox-details.expandable>details .category-parent:focus,.depict.plp .filters .body .hierarchical .checkbox-details.expandable>details .category-parent:focus-visible{box-shadow:none;outline:none}@supports selector(:focus-visible){@media not all and (hover:none){.depict.plp .filters .body .hierarchical .checkbox-details.expandable>details .category-parent:not(:focus-visible):not(:hover) .morphing-sign span{background:#333335}.depict.plp .filters .body .hierarchical .checkbox-details.expandable>details .category-parent:not(:focus-visible):not(:hover) .morphing-sign span:first-child{width:5%;left:47.5%}.depict.plp .filters .body .hierarchical .checkbox-details.expandable>details .category-parent:not(:focus-visible):not(:hover) .morphing-sign span:last-child{height:5%;top:47.5%}}@media (hover:none){.depict.plp .filters .body .hierarchical .checkbox-details.expandable>details .category-parent:not(:focus-visible) .morphing-sign span{background:#333335}.depict.plp .filters .body .hierarchical .checkbox-details.expandable>details .category-parent:not(:focus-visible) .morphing-sign span:first-child{width:5%;left:47.5%}.depict.plp .filters .body .hierarchical .checkbox-details.expandable>details .category-parent:not(:focus-visible) .morphing-sign span:last-child{height:5%;top:47.5%}}@media not all and (hover:none){.depict.plp .filters .body .hierarchical .checkbox-details.expandable>details .category-parent:hover .morphing-sign{transform:scale(1.5)}.depict.plp .filters .body .hierarchical .checkbox-details.expandable>details .category-parent:hover .count{color:#000}}.depict.plp .filters .body .hierarchical .checkbox-details.expandable>details .category-parent:focus-visible .count{color:#000}.depict.plp .filters .body .hierarchical .checkbox-details.expandable>details .category-parent:focus-visible .morphing-sign{transform:scale(1.5)}}@supports not selector(:focus-visible){@media not all and (hover:none){.depict.plp .filters .body .hierarchical .checkbox-details.expandable>details .category-parent:not(:hover) .morphing-sign span{background:#333335}.depict.plp .filters .body .hierarchical .checkbox-details.expandable>details .category-parent:not(:hover) .morphing-sign span:first-child{width:5%;left:47.5%}.depict.plp .filters .body .hierarchical .checkbox-details.expandable>details .category-parent:not(:hover) .morphing-sign span:last-child{height:5%;top:47.5%}.depict.plp .filters .body .hierarchical .checkbox-details.expandable>details .category-parent:hover .morphing-sign{transform:scale(1.5)}.depict.plp .filters .body .hierarchical .checkbox-details.expandable>details .category-parent:hover .count{color:#000}}@media (hover:none){.depict.plp .filters .body .hierarchical .checkbox-details.expandable>details .category-parent .morphing-sign span{background:#333335}.depict.plp .filters .body .hierarchical .checkbox-details.expandable>details .category-parent .morphing-sign span:first-child{width:5%;left:47.5%}.depict.plp .filters .body .hierarchical .checkbox-details.expandable>details .category-parent .morphing-sign span:last-child{height:5%;top:47.5%}}}.depict.plp .filters .body .hierarchical .checkbox-details.expandable>details .category-parent>.summary{justify-content:flex-end}.depict.plp .filters .body .hierarchical .checkbox-details.expandable>details .category-parent>.summary .count{margin-right:calc(30px + -1*max(20px,1em))}.depict.plp .filters .body .hierarchical .checkbox-details.expandable>details .category-parent>.summary .morphing-sign{width:max(20px,1em);height:max(20px,1em);transition-duration:.15s;transition-timing-function:ease-in-out}.depict.plp .filters .body .hierarchical .checkbox-details.expandable>details .category-parent>.summary .morphing-sign span{background:#333335;transition-duration:.15s;transition-timing-function:ease-in-out}.depict.plp .filters .body .range .input-group{width:100%;padding-top:10px;padding-bottom:25px;display:flex}.depict.plp .filters .body .range .input-group .field{width:100%;align-items:center;display:flex}.depict.plp .filters .body .range .input-group .field input{width:100%;text-align:center;-moz-appearance:textfield;color:#868689;background:#f3f3f5;border:.5px solid #0f0f0f;outline:none;padding-top:8px;padding-bottom:8px;transition-duration:50ms}.depict.plp .filters .body .range .input-group .field input:focus-visible{background:#e4e4e5}@media not all and (hover:none){.depict.plp .filters .body .range .input-group .field input:hover{background:#e4e4e5}}.depict.plp .filters .body .range .input-group .field input::-webkit-outer-spin-button,.depict.plp .filters .body .range .input-group .field input::-webkit-inner-spin-button{-webkit-appearance:none}.depict.plp .filters .body .range .input-group .separator{color:#333335;flex-shrink:0;flex-basis:25px;justify-content:center;align-items:center;font-size:19px;display:flex}.depict.plp .filters .body .range .slider{height:5px;background:#ddd;border-radius:5px;position:relative}.depict.plp .filters .body .range .slider .progress{height:100%;background:#0f0f0f;border-radius:5px;position:absolute;left:25%;right:25%}.depict.plp .filters .body .range .range-group{position:relative}.depict.plp .filters .body .range .range-group input{width:100%;height:0;pointer-events:none;-webkit-appearance:none;-moz-appearance:none;background:0 0;margin:0;position:absolute;top:-2.5px}.depict.plp .filters .body .range .range-group input:focus{outline:none}.depict.plp .filters .body .range .range-group input::-webkit-slider-thumb{cursor:pointer;height:20px;width:20px;pointer-events:auto;-webkit-appearance:none;background:#0f0f0f;border-radius:50%;box-shadow:0 0 6px #0000000d}@media not all and (hover:none){.depict.plp .filters .body .range .range-group input::-webkit-slider-thumb:hover{background:#333335}}.depict.plp .filters .body .range .range-group input::-moz-range-thumb{cursor:pointer;height:20px;width:20px;pointer-events:auto;-moz-appearance:none;background:#fff;border:none;border-radius:50%;box-shadow:0 0 6px #0000000d}@media not all and (hover:none){.depict.plp .filters .body .range .range-group input::-moz-range-thumb:hover{background:#333335}}.depict.plp .filters .body .range .range-group input:focus-visible::-webkit-slider-thumb{background:#333335}.depict.plp .filters .body .range .range-group input:focus-visible::-moz-range-thumb{background:#333335}.depict.plp .filters .body .range .value-text{color:#333335;justify-content:space-between;padding-top:10px;display:flex}.depict.plp .filters .body .checkbox-grid{flex-wrap:wrap;margin:-5px;display:flex}.depict.plp .filters .body .checkbox-grid>*{margin:5px}.depict.plp .filters .body .checkbox-grid .major,.depict.plp .filters .body .checkbox-grid .minor{padding:5px 10px}.depict.plp .filters .body .checkbox-grid .major.minor,.depict.plp .filters .body .checkbox-grid .minor.minor{border:1px solid #d5d5d5}.depict.plp .filters .body .checkbox-color{flex-wrap:wrap;justify-content:space-between;display:flex}.depict.plp .filters .body .checkbox-color .input-row{width:calc(50% - 10px)}.depict.plp .sorting .body{color:#333335;line-height:1}.depict.plp .sorting .body>:not(:first-child){margin-top:.5px}.depict.plp .sorting .body>:not(:last-child){margin-bottom:.5px}.depict.plp .sorting .body .input-row{justify-content:flex-start;align-items:center;display:flex}.depict.plp .morphing-sign{width:1.5em;height:1.5em;border:0;position:relative}.depict.plp .morphing-sign span{background:#333335;border-radius:2px;position:absolute}.depict.plp .morphing-sign span:first-child{width:10%;top:25%;bottom:25%;left:45%}.depict.plp .morphing-sign span:last-child{height:10%;top:45%;left:25%;right:25%}.depict.plp .depict-filter-sort-modal-backdrop{z-index:5000;touch-action:none;will-change:opacity;opacity:0;background:#000000b3;position:fixed;inset:0}.depict.plp .dismiss-modal{z-index:5003;cursor:pointer;background:0 0;border:none;padding:0;line-height:0;position:fixed;top:14px;left:4px;transform:translateY(calc(-100% - 14px))}.depict.plp .dismiss-modal svg{transform:scale(.6646)}.depict.plp .dismiss-modal svg path{fill:#fff}.depict.plp .filter-sort-modal{z-index:calc(5000 + 2);width:calc(100% - 30px);height:100%;will-change:transform;background:#fff;flex-direction:column;justify-content:space-between;display:flex;position:fixed;top:0;left:30px;transform:translateY(100%)}.depict.plp .filter-sort-modal details.sorting>summary,.depict.plp .filter-sort-modal details.filters>summary{list-style:none}.depict.plp .filter-sort-modal details.sorting>summary::-webkit-details-marker,.depict.plp .filter-sort-modal details.filters>summary::-webkit-details-marker{display:none}.depict.plp .filter-sort-modal details.sorting .sort-filter-summary>.summary,.depict.plp .filter-sort-modal details.filters .sort-filter-summary>.summary{cursor:pointer;color:#0f0f0f;background:#fff;border-top:1px solid #f4f4f4;justify-content:space-between;padding:13px 20px;font-weight:400;display:flex;box-shadow:0 4px 4px #0000000d}.depict.plp .filter-sort-modal details.sorting .sort-filter-summary>.summary .left-els,.depict.plp .filter-sort-modal details.filters .sort-filter-summary>.summary .left-els{align-items:center;display:flex}.depict.plp .filter-sort-modal details.sorting .sort-filter-summary>.summary .left-els>:not(:first-child),.depict.plp .filter-sort-modal details.filters .sort-filter-summary>.summary .left-els>:not(:first-child){margin-left:5px}.depict.plp .filter-sort-modal details.sorting .sort-filter-summary>.summary .left-els>:not(:last-child),.depict.plp .filter-sort-modal details.filters .sort-filter-summary>.summary .left-els>:not(:last-child){margin-right:5px}.depict.plp .filter-sort-modal details[open] .sort-filter-summary>.summary{font-weight:600}.depict.plp .filter-sort-modal .filter-icon,.depict.plp .filter-sort-modal .sort-icon{fill:#0f0f0f}.depict.plp .filter-sort-modal>.body{flex-direction:column;display:flex;overflow-y:auto}.depict.plp .filter-sort-modal>.body>:not(:first-child){margin-top:1px}.depict.plp .filter-sort-modal>.body>:not(:last-child){margin-bottom:1px}.depict.plp .filter-sort-modal .filters .body,.depict.plp .filter-sort-modal .sorting .body{color:#333335}.depict.plp .filter-sort-modal .filters>summary .morphing-sign span,.depict.plp .filter-sort-modal .sorting>summary .morphing-sign span{background:#0f0f0f}.depict.plp .filter-sort-modal .filters .filter-collapsible-body{background:0 0}.depict.plp .filter-sort-modal .filters .body{background:unset;padding:10px}.depict.plp .filter-sort-modal .filters .body .filter-part,.depict.plp .filter-sort-modal .filters .body .view-more-clear{background:#fdfdfd}.depict.plp .filter-sort-modal .sorting .body{background:#eeeef0;border-radius:4px;margin:10px;padding:0}.depict.plp .filter-sort-modal .bottom-row{flex-shrink:0;justify-content:space-between;padding:10px;display:flex}.depict.plp .filter-sort-modal .bottom-row>:not(:first-child){margin-left:5px}.depict.plp .filter-sort-modal .bottom-row>:not(:last-child){margin-right:5px}.depict.plp .filter-sort-modal .bottom-row>button{border-radius:4px;padding-top:12px;padding-bottom:12px}.depict.plp .filter-sort-modal .bottom-row .show-results{flex-grow:1;font-size:1.1em;font-weight:500}.depict.plp .filter-sort-modal .bottom-row .clear{font-size:1.1em}.depict.plp .floating-buttons{z-index:calc(5000 + 4);opacity:0;justify-content:flex-start;align-items:center;padding-left:12px;transition-duration:.3s;transition-timing-function:ease-in-out;display:flex;position:sticky;bottom:12px}.depict.plp .floating-buttons:not(.show-them){pointer-events:none}.depict.plp .floating-buttons.show-them{opacity:1}.depict.plp .floating-buttons .filter{margin-right:5px}.depict.plp .floating-buttons .sort{margin-left:5px;margin-right:5px}.depict.plp .floating-buttons .up{margin-left:5px}.depict.plp .floating-buttons .sort,.depict.plp .floating-buttons .filter,.depict.plp .floating-buttons .up{filter:drop-shadow(2px 2px 4px #0000001a)drop-shadow(-2px -2px 4px #ffffff4d);background:#f3f3f5;border:1px solid #0f0f0f;border-radius:20px;padding:10px}@media not all and (hover:none){.depict.plp .floating-buttons .sort:hover,.depict.plp .floating-buttons .filter:hover,.depict.plp .floating-buttons .up:hover{background:#e4e4e5}}.depict.plp .floating-buttons .sort:focus,.depict.plp .floating-buttons .filter:focus,.depict.plp .floating-buttons .up:focus{outline:none}.depict.plp .floating-buttons .sort:focus-visible,.depict.plp .floating-buttons .filter:focus-visible,.depict.plp .floating-buttons .up:focus-visible{background:#e4e4e5}.depict.plp .floating-buttons .sort div,.depict.plp .floating-buttons .filter div,.depict.plp .floating-buttons .up div{display:flex}.depict.plp .floating-buttons .sort svg path,.depict.plp .floating-buttons .filter svg path,.depict.plp .floating-buttons .up svg path{fill:#333335}.depict.plp .depict-slider{width:100%;position:relative}.depict.plp .depict-slider .sliding{height:100%;-ms-overflow-style:none;scrollbar-width:none;flex-flow:row;align-items:center;display:flex;overflow-x:scroll}.depict.plp .depict-slider .sliding>:not(:first-child){margin-left:5px}.depict.plp .depict-slider .sliding>:not(:last-child){margin-right:5px}.depict.plp .depict-slider .sliding::-webkit-scrollbar{display:none}.depict.plp .depict-slider .d-navbutton{z-index:2;touch-action:manipulation;cursor:pointer;height:calc(100% + 2px);width:26px;background:linear-gradient(270deg,#fff 50%,#0000 105%);border:none;justify-content:flex-end;align-items:center;padding:0 1px 0 0;transition-duration:.2s;display:flex;position:absolute;top:50%;transform:translateY(-50%)}.depict.plp .depict-slider .d-navbutton.hidden{cursor:default;opacity:0;animation-name:depict_slider_button_unclickable;animation-duration:5s;animation-fill-mode:forwards}.depict.plp .depict-slider .d-navbutton.left{left:-1px;transform:translateY(-50%)rotate(180deg)}.depict.plp .depict-slider .d-navbutton.right{right:-1px}.depict.plp .depict-slider .d-navbutton img{width:100%;height:100%}.depict.plp .depict-slider .d-navbutton>div{display:flex}@media not all and (hover:none){.depict.plp .depict-slider .d-navbutton:hover svg{transform:scale(1.2)}}.depict.plp .depict-slider .d-navbutton:focus-visible svg{transform:scale(1.5)}.depict.plp .depict-slider .d-navbutton:focus-visible svg path{filter:drop-shadow(-2px -2px 4px #418fc3cc)drop-shadow(2px 2px 4px #418fc3cc)}.depict.plp .depict-slider .d-navbutton svg{transition-duration:.15s}.depict.plp .depict-slider .d-navbutton:active{opacity:.9}@keyframes depict_slider_button_unclickable{0%{pointer-events:all}to{pointer-events:none;visibility:hidden}}.depict.plp button.major{color:#fff;white-space:pre-wrap;cursor:pointer;background:#0f0f0f;border:1px solid #0000;border-radius:4px;justify-content:center;align-items:center;padding:10px 20px;transition:filter .15s ease-in-out,background .1s ease-in-out;display:flex}.depict.plp button.major svg path{fill:#fff}@media not all and (hover:none){.depict.plp button.major:hover{filter:drop-shadow(-2px -2px 4px #ffffff40)drop-shadow(2px 2px 4px #00000026);background:#333335}}.depict.plp button.major:active{filter:drop-shadow(2px 2px 4px #ffffff40)drop-shadow(-2px -2px 4px #00000026);background:#000}.depict.plp button.major:focus{outline-style:none}.depict.plp button.major:focus-visible{filter:drop-shadow(2px 2px 4px #418fc3cc)drop-shadow(-2px -2px 4px #418fc3cc);background:#333335}.depict.plp button.minor{color:#0f0f0f;white-space:pre-wrap;cursor:pointer;background:#fff;border:1px solid #0f0f0f;border-radius:4px;justify-content:center;align-items:center;padding:10px 20px;transition:filter .15s ease-in-out,background .1s ease-in-out;display:flex}.depict.plp button.minor svg path{fill:#0f0f0f}@media not all and (hover:none){.depict.plp button.minor:hover{filter:drop-shadow(-2px -2px 4px #ffffff40)drop-shadow(2px 2px 4px #00000026);background:#f3f3f5}}.depict.plp button.minor:active{filter:drop-shadow(2px 2px 4px #ffffff40)drop-shadow(-2px -2px 4px #00000026);background:#e4e4e5}.depict.plp button.minor:focus{outline-style:none}.depict.plp button.minor:focus-visible{filter:drop-shadow(-2px -2px 4px #418fc3cc)drop-shadow(2px 2px 4px #418fc3cc);background:#f3f3f5}.depict.search .previous-searches{flex-direction:column;display:flex}.depict.search .previous-searches>:not(:first-child){margin-top:7.5px}.depict.search .previous-searches>:not(:last-child){margin-bottom:7.5px}.depict.search .previous-searches .list{flex-direction:column;display:flex}.depict.search .previous-searches .list>:not(:first-child){margin-top:2.5px}.depict.search .previous-searches .list>:not(:last-child){margin-bottom:2.5px}.depict.search .previous-searches .list .item{overflow-wrap:anywhere;border-radius:4px;justify-content:space-between;align-items:center;padding:10px 20px;display:flex}.depict.search .previous-searches .list .item .left{align-items:center;display:flex}.depict.search .previous-searches .list .item .left>:not(:first-child){margin-left:5px}.depict.search .previous-searches .list .item .left>:not(:last-child){margin-right:5px}.depict.search .previous-searches .list .item .left svg{min-width:12px}.depict.search .previous-searches .list .item .left svg path{fill:#333335}.depict.search .previous-searches .list .item .delete{height:100%;cursor:pointer;background:0 0;justify-content:center;align-items:center;padding:0 10px;display:flex}.depict.search .previous-searches .list .item .delete:focus{outline:none}.depict.search .previous-searches .list .item .delete svg{width:13px;height:13px;transition-duration:.15s}.depict.search .previous-searches .list .item .delete svg path{fill:#333335}.depict.search .previous-searches .list .item .delete:hover svg{transform:scale(1.2)}.depict.search .previous-searches .list .item .delete:hover svg path{fill:#000}.depict.search .previous-searches .list .item .delete:focus-visible{filter:drop-shadow(-2px -2px 4px #418fc3cc)drop-shadow(2px 2px 4px #418fc3cc)}.depict.search .previous-searches .list .item .delete:focus-visible svg{transform:scale(1.2)}.depict.search .previous-searches .list .item .delete:focus-visible svg path{fill:#000}.depict.search .previous-searches .text,.depict.search .suggestions .text{color:#333335;margin-top:0;font-size:16px;font-weight:700}.depict.search .previous-searches .item,.depict.search .previous-searches .suggestion,.depict.search .suggestions .item,.depict.search .suggestions .suggestion{color:#333335;background:#fff;font-weight:400}.depict.search .previous-searches .item.selected,.depict.search .previous-searches .suggestion.selected,.depict.search .suggestions .item.selected,.depict.search .suggestions .suggestion.selected{background:#e4e4e5}.depict.search .previous-searches .item:focus-visible,.depict.search .previous-searches .suggestion:focus-visible,.depict.search .suggestions .item:focus-visible,.depict.search .suggestions .suggestion:focus-visible{filter:drop-shadow(-2px -2px 4px #418fc3cc)drop-shadow(2px 2px 4px #418fc3cc);outline:none}.depict.search .previous-searches .item:active,.depict.search .previous-searches .suggestion:active,.depict.search .suggestions .item:active,.depict.search .suggestions .suggestion:active{background:#cbcbcc}.depict.search .suggestions{flex-direction:column;display:flex}.depict.search .suggestions>:not(:first-child){margin-top:10px}.depict.search .suggestions>:not(:last-child){margin-bottom:10px}.depict.search .suggestions:not(.compact)>.suggestion-container>:not(:first-child),.depict.search .suggestions.compact>.suggestion-container:not(.query)>:not(:first-child){margin-top:2.5px}.depict.search .suggestions:not(.compact)>.suggestion-container>:not(:last-child),.depict.search .suggestions.compact>.suggestion-container:not(.query)>:not(:last-child){margin-bottom:2.5px}.depict.search .suggestions .suggestion-container{flex-direction:column;display:flex}.depict.search .suggestions .suggestion-container .suggestion{overflow-wrap:anywhere;border-radius:4px;justify-content:space-between;align-items:center;padding:10px 20px;display:flex}.depict.search .suggestions .suggestion-container .suggestion svg{flex-shrink:0}.depict.search .suggestions .suggestion-container .suggestion svg path{fill:#333335}.depict.search .suggestions .suggestion-container .suggestion .search-icon{max-width:12px;max-height:13px}.depict.search .suggestions .suggestion-container .suggestion .search-icon svg{transform:matrix(.6,0,0,.6,-4.14,-4.32)}.depict.search .suggestions .suggestion-container .suggestion .has-history-match{color:#333335 y;font-weight:400}.depict.search .suggestions .suggestion-container .suggestion .has-history-match .highlighted-part{color:#333335;font-weight:500}.depict.search .suggestions .suggestion-container .suggestion .category{margin-right:20px}.depict.search .suggestions .suggestion-container .suggestion .type{color:#868689;text-transform:capitalize}.depict.search .suggestions .suggestion-container.query{flex-direction:column}.depict.search .suggestions .suggestion-container.query .suggestion{justify-content:flex-start}.depict.search .suggestions .suggestion-container.query .suggestion>:not(:first-child){margin-left:4px}.depict.search .suggestions .suggestion-container.query .suggestion>:not(:last-child){margin-right:4px}.depict.search .suggestions.compact>.suggestion-container.query{flex-flow:wrap;margin:-2.5px}.depict.search .suggestions.compact>.suggestion-container.query>*{margin:2.5px}.depict.search .category-suggestions{display:flex}.depict.search .category-suggestions .sliding{margin-bottom:-2px;padding-bottom:2px}.depict.search .category-suggestions .title{font-weight:500}.depict.search .category-suggestions .category-suggestion{color:#0f0f0f;height:100%;background:#fff;border:1px solid #e4e4e5;justify-content:space-between;align-items:center;padding:10px 20px;transition:background .1s ease-in-out;display:flex}.depict.search .category-suggestions .category-suggestion:focus-visible{background:#f3f3f5}@media not all and (hover:none){.depict.search .category-suggestions .category-suggestion:hover{background:#f3f3f5}}.depict.search .category-suggestions .category-suggestion:active{background:#e4e4e5}.depict.search .category-suggestions .category-suggestion>:not(:first-child){margin-left:5px}.depict.search .category-suggestions .category-suggestion>:not(:last-child){margin-right:5px}.depict.search .category-suggestions .category-suggestion .parent-title{font-weight:300}.depict.search .category-suggestions .category-suggestion>*{white-space:nowrap;font-size:.85em}.depict.search .instant-results{flex-direction:column;display:flex}.depict.search .instant-results>:not(:first-child){margin-top:2.5px}.depict.search .instant-results>:not(:last-child){margin-bottom:2.5px}.depict.search .instant-results .instant-card{background:#fff;border-radius:4px;flex:100%;padding:5px 20px;display:flex;overflow:hidden}.depict.search .instant-results .instant-card:hover,.depict.search .instant-results .instant-card:focus{z-index:2;box-shadow:2px 2px 4px #00000026,-4px -4px 4px #ffffff4d}.depict.search .instant-results .instant-card>:not(:first-child){margin-left:.75vw}.depict.search .instant-results .instant-card>:not(:last-child){margin-right:.75vw}.depict.search .instant-results .instant-card .img-part{flex:0 0 100px}.depict.search .instant-results .instant-card .right-part{flex-grow:1;justify-content:space-between;display:flex}.depict.search .instant-results .instant-card .right-part>:not(:first-child){margin-left:.75vw}.depict.search .instant-results .instant-card .right-part>:not(:last-child){margin-right:.75vw}.depict.search .instant-results .instant-card .right-part .title-brand-tagline{justify-content:center;align-items:center;display:flex}@media (min-width:601px){.depict.search .instant-results .instant-card .right-part .title-brand-tagline>:not(:first-child){margin-left:.75vw}.depict.search .instant-results .instant-card .right-part .title-brand-tagline>:not(:last-child){margin-right:.75vw}}@media (max-width:600px){.depict.search .instant-results .instant-card .right-part .title-brand-tagline{flex-direction:column;align-items:flex-start}.depict.search .instant-results .instant-card .right-part .title-brand-tagline>:not(:first-child){margin-top:.75vw}.depict.search .instant-results .instant-card .right-part .title-brand-tagline>:not(:last-child){margin-bottom:.75vw}}.depict.search .instant-results .instant-card .right-part .title-brand-tagline .title{text-overflow:ellipsis;white-space:pre-line;overflow-wrap:anywhere;-webkit-line-clamp:2;word-break:break-word;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.depict.search .instant-results .instant-card .right-part .title-brand-tagline .tagline{color:#868689;font-size:.9em}.depict.search .instant-results .instant-card .right-part .price-container{justify-content:center;align-items:center;display:flex}@media (min-width:601px){.depict.search .instant-results .instant-card .right-part .price-container>:not(:first-child){margin-left:.75vw}.depict.search .instant-results .instant-card .right-part .price-container>:not(:last-child){margin-right:.75vw}}.depict.search .instant-results .instant-card .right-part .price-container .price:not(.orig){color:#0f0f0f;font-weight:700}.depict.search .instant-results .instant-card .right-part .price-container .price.orig{color:#868689;text-decoration:line-through}.depict.search .instant-results .instant-card .right-part .price-container .price.sales-price{color:#ff2e3e}@media (max-width:600px){.depict.search .instant-results .instant-card .right-part .price-container{flex-direction:column}.depict.search .instant-results .instant-card .right-part .price-container>:not(:first-child){margin-top:.75vw}.depict.search .instant-results .instant-card .right-part .price-container>:not(:last-child){margin-bottom:.75vw}.depict.search .instant-results .instant-card .right-part .price-container .price:not(.orig){order:0}.depict.search .instant-results .instant-card .right-part .price-container .price.orig{order:1}}.depict.search .search-field{z-index:calc(1 + 5);border-radius:10px;display:flex;box-shadow:0 4px 4px #0000000d}.depict.search .search-field input,.depict.search .search-field button{margin:0}.depict.search .search-field .query{font-size:initial;width:100%;color:#333335;background-color:#fff;border:none;border-radius:10px 0 0 10px;flex-grow:1;padding:14px 55px 14px 20px}.depict.search .search-field .query:focus{color:#000;outline:none}@media not all and (hover:none){.depict.search .search-field .query:hover{color:#000;outline:none}}.depict.search .search-field .query.has-adjacent-back-button{border-top-left-radius:0;border-bottom-left-radius:0;padding-left:0}.depict.search .search-field .field{flex-grow:1;display:flex;position:relative}.depict.search .search-field .back{cursor:pointer;background-color:#fff;border:none;border-top-left-radius:10px;border-bottom-left-radius:10px;justify-content:center;align-items:center;padding:14px 15px 14px 10px;display:flex}.depict.search .search-field .back svg path{fill:#333335}.depict.search .search-field .back:focus{outline:none}.depict.search .search-field .back:focus-visible{filter:drop-shadow(-2px -2px 4px #418fc3cc)drop-shadow(2px 2px 4px #418fc3cc)}.depict.search .search-field .back:focus-visible svg path{fill:#0f0f0f}@media not all and (hover:none){.depict.search .search-field .back:hover svg path{fill:#0f0f0f}}.depict.search .search-field .clear,.depict.search .search-field .submit{cursor:pointer}.depict.search .search-field .clear{background-color:#fff;border:none;padding:0;position:absolute;top:50%;right:30px;transform:translateY(-50%)scale(.8)}.depict.search .search-field .clear svg path{fill:#333335}.depict.search .search-field .clear:focus{outline:none}.depict.search .search-field .clear:focus-visible{filter:drop-shadow(-2px -2px 4px #418fc3cc)drop-shadow(2px 2px 4px #418fc3cc)}.depict.search .search-field .clear:focus-visible svg path{fill:#000}@media not all and (hover:none){.depict.search .search-field .clear:hover svg path{fill:#000}}.depict.search .search-field .submit{min-width:50px;border:none;border-radius:0 10px 10px 0;padding:0}.depict.search .search-field:not(.in-modal) .query{border-top:1px solid #cbcbcc;border-bottom:1px solid #cbcbcc;border-left:1px solid #cbcbcc}.depict.search .search-field:not(.in-modal) .submit{border-top:1px solid #cbcbcc;border-bottom:1px solid #cbcbcc;border-right:1px solid #cbcbcc}.depict.search .depict-search-modal-backdrop{z-index:5000;touch-action:none;background:#0006;position:fixed;inset:0}.depict.search .depict-search-modal{justify-content:center;display:flex}.depict.search .depict-search-modal .search-field{z-index:calc(5000 + 5)}.depict.search .depict-search-modal .body{max-width:800px;z-index:calc(5000 + 1);background:#f3f3f5;border-radius:10px;flex-direction:column;display:flex}@media (hover:hover) and (pointer:fine) and (max-height:790px){.depict.search .depict-search-modal .body{max-height:100%;position:fixed;top:0}}@media (hover:hover) and (pointer:fine) and (max-height:790px) and (max-width:600px){.depict.search .depict-search-modal .body{width:calc(100% - 30px);left:30px}}@media not all and (hover:hover) and (pointer:fine){@media (max-height:1000px){.depict.search .depict-search-modal .body{max-height:100%;position:fixed;top:0}}@media (max-height:1000px) and (max-width:600px){.depict.search .depict-search-modal .body{width:calc(100% - 30px);background:red;left:30px}}}.depict.search .depict-search-modal .body .padded>*,.depict.search .depict-search-modal .body .search-field{flex-shrink:0}.depict.search .depict-search-modal .body .padded{flex-direction:column;padding-top:20px;padding-left:max(1vw,10px);padding-right:max(1vw,10px);display:flex;overflow:auto}.depict.search .depict-search-modal .body .padded>:not(:first-child){margin-top:10px}.depict.search .depict-search-modal .body .padded>:not(:last-child){margin-bottom:10px}.depict.search .depict-search-modal .body .discover-more{justify-content:center;display:flex}.depict.search .depict-search-modal .body .discover-more button{text-transform:uppercase;margin:20px 0;padding:12px 18px}.depict.search .listing-page .search-field{width:min(100%,800px);align-self:center;margin-top:40px;margin-bottom:20px}@media (max-width:651px){.depict.search .listing-page .search-field{margin-top:16px;margin-bottom:16px}}.depict.search .listing-page .search-field~.category-suggestions .category-suggestion:last-child{margin-right:auto}.depict.search .listing-page .search-field~.category-suggestions .category-suggestion:first-child{margin-left:auto}.depict.search .listing-page .category-suggestions{margin-bottom:20px}@media (max-width:651px){.depict.search .listing-page .category-suggestions{margin-bottom:16px}}@media (min-width:652px){.depict.search .listing-page .search-field+.filter-results-for-one-row,.depict.search .listing-page .search-field+.results-for{margin-top:20px}}.depict.search .listing-page .search-recs{margin-top:60px;padding-top:60px}@media (max-width:651px){.depict.search .listing-page .search-recs{margin-top:48px;padding-top:48px}}.depict.search .listing-page .PLP-results.nothing+.search-recs{margin-top:30px;padding-top:30px}@media (max-width:651px){.depict.search .listing-page .PLP-results.nothing+.search-recs{margin-top:24px;padding-top:24px}}.depict.search .listing-page .search-recs{border-top:2px solid #e4e4e5;flex-direction:column;display:flex}.depict.search .listing-page .search-recs .search-recs-title{margin-top:0;margin-bottom:20px;font-size:24px;font-weight:600;line-height:1}.depict.search .listing-page .search-recs .load-more-container{justify-content:center;margin-top:30px;display:flex}.depict.search .results-for{overflow-wrap:anywhere;font-size:1.5em}.depict.category .crumbs{flex-wrap:wrap;display:flex}.depict.category .crumbs .crumb{color:#333335}.depict.category .crumbs .crumb:hover{text-decoration:underline}.depict.category .crumbs .crumb:last-of-type{color:#0f0f0f;font-weight:500}.depict.category .crumbs .separator{color:#868689;margin-left:10px;margin-right:10px}.depict.category .quicklinks{overflow:hidden}.depict.category .quicklinks .quicklink{white-space:nowrap;color:#0f0f0f;background:#fff;border:1px solid #cbcbcc;border-radius:4px;padding:10px 20px;transition:all 75ms ease-in-out}.depict.category .quicklinks .quicklink:focus{outline:none}@media not all and (hover:none){.depict.category .quicklinks .quicklink:hover{background:#f3f3f5}}.depict.category .quicklinks .quicklink:focus-visible{filter:drop-shadow(-2px -2px 4px #418fc3cc)drop-shadow(2px 2px 4px #418fc3cc);background:#f3f3f5}.depict.category .quicklinks .quicklink:active{background:#e4e4e5}.depict.category .quicklinks .quicklink.selected{color:#fff;background:#0f0f0f;border:1px solid #0000}@media not all and (hover:none){.depict.category .quicklinks .quicklink.selected:hover{background:#333335}}.depict.category .quicklinks .quicklink.selected:focus-visible{filter:drop-shadow(2px 2px 4px #418fc3cc)drop-shadow(-2px -2px 4px #418fc3cc);background:#333335}.depict.category .quicklinks .quicklink.selected:active{background:#000}.depict.category .category-title{overflow-wrap:anywhere;flex-wrap:wrap;align-items:center;font-size:1.5em;display:flex}.depict.category .category-title *{align-items:center;display:flex}.depict.category .category-title .title{font-weight:700;font-size:inherit;margin-right:10px}.depict.category .category-title .explanation{color:#868689;font-weight:500}.depict.category .category-title .explanation .product-count{margin-left:10px}.depict.category .listing-page .quicklinks,.depict.category .listing-page .crumbs{margin-bottom:20px}@media (max-width:651px){.depict.category .listing-page .quicklinks,.depict.category .listing-page .crumbs{margin-bottom:16px}}.depict.plp.toast{z-index:calc(5000 + 5);white-space:nowrap;border-bottom-style:solid;border-bottom-width:2px;background:#fff;border-image-source:linear-gradient(90deg,#0f0f0f 0% 100%);border-image-slice:0 0 100%;border-radius:4px;padding:10px 20px;position:fixed;bottom:10px;left:50%;transform:translate(-50%);box-shadow:2px 2px 4px #0000000d}.depict.plp.toast *,.depict.plp.toast *{-webkit-user-select:none;user-select:none}@media (min-width:1000px){.depict.plp.toast{padding:10px 40px}}.depict.plp.toast,.depict.plp.toast .buttons{justify-content:center;align-items:center;display:flex}@media (max-width:999px){.depict.plp.toast>:not(:first-child),.depict.plp.toast .buttons>:not(:first-child){margin-left:5px}.depict.plp.toast>:not(:last-child),.depict.plp.toast .buttons>:not(:last-child){margin-right:5px}}@media (min-width:1000px){.depict.plp.toast>:not(:first-child),.depict.plp.toast .buttons>:not(:first-child){margin-left:15px}.depict.plp.toast>:not(:last-child),.depict.plp.toast .buttons>:not(:last-child){margin-right:15px}}.depict.plp.toast{color:#0f0f0f}.depict.plp.toast button{cursor:pointer;border-radius:4px;padding:5px 20px}
1
+ .depict.plp{color:#0f0f0f}.depict.plp button{border:none}.depict.plp .listing-page{flex-direction:column;display:flex}.depict.plp .listing-page .no-results{background:#fff;flex-direction:column;flex-grow:2;justify-content:flex-start;align-items:center;padding:40px;display:flex}.depict.plp .listing-page .no-results .hint{cursor:pointer;color:#333335;text-decoration:underline}.depict.plp .listing-page{padding:20px 10px}@media (max-width:651px){.depict.plp .listing-page{padding:16px 8px}}.depict.plp .listing-page,.depict.plp .listing-page *{box-sizing:border-box}.depict.plp .listing-page>.filter-results-for-one-row,.depict.plp .listing-page>.results-for{margin-bottom:10px}@media (max-width:651px){.depict.plp .listing-page>.filter-results-for-one-row,.depict.plp .listing-page>.results-for{margin-bottom:8px}}.depict.plp .listing-page>.sort-and-filter-buttons{margin-top:10px;margin-bottom:10px}@media (max-width:651px){.depict.plp .listing-page>.sort-and-filter-buttons{margin-top:8px;margin-bottom:8px}}.depict.plp .listing-page .PLP-results{margin-top:10px;display:flex}@media (max-width:651px){.depict.plp .listing-page .PLP-results{margin-top:8px}}.depict.plp .listing-page .PLP-results>.filters,.depict.plp .listing-page .PLP-results>.sorting{margin-left:12px}.depict.plp .listing-page .cards{flex-flow:wrap;flex-grow:1;align-content:flex-start;display:flex;overflow:hidden}.depict.plp .listing-page .selected-filters .inner{align-items:center;margin-top:0;margin-bottom:0;display:flex}.depict.plp .listing-page .selected-filters .inner .title{margin-right:10px}@media (max-width:651px){.depict.plp .listing-page .selected-filters .inner{margin-top:10px;margin-bottom:10px}}.depict.plp .listing-page .selected-filters .inner .title{text-transform:uppercase;color:#0f0f0f;font-size:1.1em}@media (max-width:600px){.depict.plp .listing-page .selected-filters .inner .title{display:none}}.depict.plp .listing-page .selected-filters .inner .depict-slider{width:unset;overflow:hidden}.depict.plp .listing-page .selected-filters .inner .depict-slider .clear-filter{border:1px solid #0f0f0f}.depict.plp .listing-page .selected-filters .inner .depict-slider .clear-filter svg{width:12.64px;height:12.64px}.depict.plp .listing-page .selected-filters .inner .depict-slider .clear-all-filters{border:1px solid #0f0f0f}.depict.plp .listing-page .selected-filters .inner .depict-slider .clear-filter,.depict.plp .listing-page .selected-filters .inner .depict-slider .clear-all-filters{box-sizing:border-box;white-space:nowrap;cursor:pointer;border-radius:4px;flex:none;align-items:center;padding:5px 10px;font-size:1em;line-height:1;display:flex}.depict.plp .listing-page .selected-filters .inner .depict-slider .clear-filter>:not(:first-child),.depict.plp .listing-page .selected-filters .inner .depict-slider .clear-all-filters>:not(:first-child){margin-left:2.5px}.depict.plp .listing-page .selected-filters .inner .depict-slider .clear-filter>:not(:last-child),.depict.plp .listing-page .selected-filters .inner .depict-slider .clear-all-filters>:not(:last-child){margin-right:2.5px}.depict.plp .scroll-status{pointer-events:none;white-space:nowrap;z-index:calc(5000 + 4);opacity:0;justify-content:center;align-items:center;display:flex;position:sticky;bottom:10vh}.depict.plp .scroll-status .text{color:#fff;background:#333335bf;border-radius:20px;padding:10px 20px}.depict.plp .major-minor-transition{transition:filter .15s ease-in-out,background .25s ease-in-out,color .25s ease-in-out,border .25s ease-in-out}.depict.plp .filter-results-for-one-row{justify-content:space-between;align-items:center;display:flex}.depict.plp :not(.filter-results-for-one-row)>.sort-and-filter-buttons .inner{justify-content:space-between}.depict.plp .sorting-attributes,.depict.plp .sorting-direction{flex-direction:column;padding:10px;display:flex}.depict.plp .sorting-attributes>:not(:first-child),.depict.plp .sorting-direction>:not(:first-child){margin-top:5px}.depict.plp .sorting-attributes>:not(:last-child),.depict.plp .sorting-direction>:not(:last-child){margin-bottom:5px}.depict.plp .sort-and-filter-buttons .outer{margin-top:-5px}.depict.plp .sort-and-filter-buttons .inner{justify-content:flex-end;align-items:center;padding-top:5px;display:flex;overflow:hidden}.depict.plp .sort-and-filter-buttons .inner>:not(:first-child){margin-left:5px}.depict.plp .sort-and-filter-buttons .inner>:not(:last-child){margin-right:5px}.depict.plp .sort-and-filter-buttons.fake .toggle-button{transition:none}.depict.plp .sort-and-filter-buttons .toggle-button{white-space:nowrap;position:relative}.depict.plp .sort-and-filter-buttons .toggle-button>:not(:first-child){margin-left:2.5px}.depict.plp .sort-and-filter-buttons .toggle-button>:not(:last-child){margin-right:2.5px}.depict.plp .sort-and-filter-buttons .toggle-button svg path{transition-duration:.25s}.depict.plp .sort-and-filter-buttons .toggle-button.major.for-sorting>:not(:first-child){margin-left:5px}.depict.plp .sort-and-filter-buttons .toggle-button.major.for-sorting>:not(:last-child){margin-right:5px}.depict.plp .sort-and-filter-buttons .num-filters{color:#fff;width:20px;height:20px;z-index:calc(1 + 1);background:#0f0f0f;border-radius:13px;justify-content:center;align-items:center;font-size:12px;line-height:1;transition:opacity .25s ease-in-out;display:flex;position:absolute;top:-4px;right:-4px}.depict.plp .sort-and-filter-buttons .open-filters-button-container{position:relative}.depict.plp label{margin:0}.depict.plp .PLP-results .sorting,.depict.plp .PLP-results .filters{flex-shrink:0;flex-basis:330px}.depict.plp .filters .body,.depict.plp .sorting .body{flex-direction:column;display:flex}.depict.plp .filters .body .input-row,.depict.plp .sorting .body .input-row{cursor:pointer;position:relative}.depict.plp .filters .body .input-row .custom-indicator,.depict.plp .sorting .body .input-row .custom-indicator{margin-right:10px;position:relative}.depict.plp .filters .body .input-row input,.depict.plp .sorting .body .input-row input{opacity:0;cursor:pointer;height:0;width:0;position:absolute}.depict.plp .filters .body .input-row .custom-indicator:after,.depict.plp .sorting .body .input-row .custom-indicator:after{content:"";display:none;position:absolute}.depict.plp .filters .body .input-row input[type=checkbox]~.custom-indicator,.depict.plp .sorting .body .input-row input[type=checkbox]~.custom-indicator{background-color:#fff;border-radius:2px;padding:calc(max(20px,1em)/2 - 1px)}.depict.plp .filters .body .input-row input[type=checkbox]~.custom-indicator:not(.color),.depict.plp .sorting .body .input-row input[type=checkbox]~.custom-indicator:not(.color){border:1px solid #333335}.depict.plp .filters .body .input-row input[type=checkbox]~.custom-indicator.color,.depict.plp .sorting .body .input-row input[type=checkbox]~.custom-indicator.color{padding:calc(max(20px,1em)/2)}.depict.plp .filters .body .input-row input[type=checkbox]~.custom-indicator.color.outline,.depict.plp .sorting .body .input-row input[type=checkbox]~.custom-indicator.color.outline{border:.5px solid #868689;padding:calc(max(20px,1em)/2 - .5px)}.depict.plp .filters .body .input-row input[type=checkbox]:checked~.custom-indicator,.depict.plp .sorting .body .input-row input[type=checkbox]:checked~.custom-indicator{background-color:#0f0f0f}.depict.plp .filters .body .input-row input[type=checkbox]:checked~.custom-indicator:after,.depict.plp .sorting .body .input-row input[type=checkbox]:checked~.custom-indicator:after{fill:#fff;color:#fff;width:12px;height:10px;background-image:url("data:image/svg+xml;utf8,<svg fill=\"%23FFFFFF\" width=\"12\" height=\"10\" viewBox=\"0 0 12 10\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12 2.0001L10.6 0.600098L4 7.2001L1.4 4.6001L0 6.0001L4 10.0001L12 2.0001Z\" /></svg>");display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.depict.plp .filters .body .input-row input[type=checkbox]:checked~.custom-indicator.color:after,.depict.plp .sorting .body .input-row input[type=checkbox]:checked~.custom-indicator.color:after{background-image:url("data:image/svg+xml;utf8,<svg fill=\"%23FFFFFF\" width=\"12\" height=\"10\" viewBox=\"0 0 12 10\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12 2.0001L10.6 0.600098L4 7.2001L1.4 4.6001L0 6.0001L4 10.0001L12 2.0001Z\" /></svg>")}.depict.plp .filters .body .input-row input[type=checkbox]:checked~.custom-indicator.color.check-dark:after,.depict.plp .sorting .body .input-row input[type=checkbox]:checked~.custom-indicator.color.check-dark:after{background-image:url("data:image/svg+xml;utf8,<svg fill=\"%23000000\" width=\"12\" height=\"10\" viewBox=\"0 0 12 10\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12 2.0001L10.6 0.600098L4 7.2001L1.4 4.6001L0 6.0001L4 10.0001L12 2.0001Z\" /></svg>")}.depict.plp .filters .body .input-row input[type=checkbox]:checked~.custom-indicator.color.check-multi:after,.depict.plp .sorting .body .input-row input[type=checkbox]:checked~.custom-indicator.color.check-multi:after{background-image:url("data:image/svg+xml;utf8,<svg fill=\"%23FFFFFF\" width=\"12\" height=\"10\" viewBox=\"0 0 12 10\" xmlns=\"http://www.w3.org/2000/svg\"><path style=\"stroke:black;stroke-width:1px\" d=\"M12 2.0001L10.6 0.600098L4 7.2001L1.4 4.6001L0 6.0001L4 10.0001L12 2.0001Z\" /></svg>")}.depict.plp .filters .body .input-row input[type=checkbox]:focus-visible~.custom-indicator,.depict.plp .sorting .body .input-row input[type=checkbox]:focus-visible~.custom-indicator{background-color:#f3f3f5}.depict.plp .filters .body .input-row input[type=checkbox]:focus-visible~.custom-indicator.color,.depict.plp .sorting .body .input-row input[type=checkbox]:focus-visible~.custom-indicator.color{filter:drop-shadow(-2px -2px 4px #418fc3cc)drop-shadow(2px 2px 4px #418fc3cc)}.depict.plp .filters .body .input-row input[type=checkbox]:checked:focus-visible~.custom-indicator,.depict.plp .sorting .body .input-row input[type=checkbox]:checked:focus-visible~.custom-indicator{background-color:#333335}@media not all and (hover:none){.depict.plp .filters .body .input-row:hover input[type=checkbox]~.custom-indicator,.depict.plp .sorting .body .input-row:hover input[type=checkbox]~.custom-indicator{background-color:#f3f3f5}.depict.plp .filters .body .input-row:hover input[type=checkbox]~.custom-indicator:not(.color),.depict.plp .sorting .body .input-row:hover input[type=checkbox]~.custom-indicator:not(.color){border:2px solid #0f0f0f;padding:calc(max(20px,1em)/2 - 2px)}.depict.plp .filters .body .input-row:hover input[type=checkbox]:checked~.custom-indicator,.depict.plp .sorting .body .input-row:hover input[type=checkbox]:checked~.custom-indicator{background-color:#333335}}.depict.plp .filters .body .input-row input[type=radio]~.custom-indicator,.depict.plp .sorting .body .input-row input[type=radio]~.custom-indicator{background-color:#fff;border:1px solid #333335;border-radius:50%;padding:calc(max(20px,1em)/2 - 1px)}.depict.plp .filters .body .input-row input[type=radio]:checked~.custom-indicator,.depict.plp .sorting .body .input-row input[type=radio]:checked~.custom-indicator{background-color:#0000}.depict.plp .filters .body .input-row input[type=radio]:checked~.custom-indicator:after,.depict.plp .sorting .body .input-row input[type=radio]:checked~.custom-indicator:after{width:14px;height:14px;background-color:#0f0f0f;border-radius:50%;display:block;top:50%;left:50%;transform:translate(-50%,-50%)}.depict.plp .filters .body .input-row input[type=radio]:focus-visible~.custom-indicator,.depict.plp .sorting .body .input-row input[type=radio]:focus-visible~.custom-indicator{background:#e6e6e6}.depict.plp .filters .body .input-row input[type=radio]:checked:focus-visible~.custom-indicator:after,.depict.plp .sorting .body .input-row input[type=radio]:checked:focus-visible~.custom-indicator:after{background:#4f4f4f}@media not all and (hover:none){.depict.plp .filters .body .input-row:hover input[type=radio]~.custom-indicator,.depict.plp .sorting .body .input-row:hover input[type=radio]~.custom-indicator{border:2px solid #0f0f0f;padding:calc(max(20px,1em)/2 - 2px)}}.depict.plp .filters .body .input-row{justify-content:space-between;padding-top:5px;padding-bottom:5px}.depict.plp .filters .body .input-row,.depict.plp .filters .body .input-row>.left{align-items:center;display:flex}.depict.plp .filters .body .input-row .text{text-overflow:ellipsis;white-space:pre-line;overflow-wrap:anywhere;color:#333335;-webkit-line-clamp:1;word-break:break-word;-webkit-box-orient:vertical;font-weight:400;line-height:max(20px,1em);display:-webkit-box;overflow:hidden}.depict.plp .filters .body .input-row :checked~.text,.depict.plp .filters .body .input-row .fake-checked~.text{color:#0f0f0f;font-weight:500}.depict.plp .filters .body .input-row.count-0 *+.text{color:#868689}.depict.plp .filters .body .input-row .count,.depict.plp .filters .body .hierarchical .checkbox-details.expandable .category-parent .count{color:#868689;font-weight:400}.depict.plp .filters .body .input-row:hover .count{color:#000}.depict.plp .filters .body .selected-w-sign{align-items:center;display:flex}.depict.plp .filters .body .selected-w-sign>:not(:first-child){margin-left:5px}.depict.plp .filters .body .selected-w-sign>:not(:last-child){margin-right:5px}.depict.plp .filters .body .selected-w-sign .show-selected{color:#868689;fill:#868689;align-items:center;display:flex}.depict.plp .filters .body .selected-w-sign .show-selected>:not(:first-child){margin-left:2.5px}.depict.plp .filters .body .selected-w-sign .show-selected>:not(:last-child){margin-right:2.5px}.depict.plp .filters .body .selected-w-sign .show-selected span{line-height:1}.depict.plp .filters .body .ungrouped{margin-top:25px}.depict.plp .filters .body .clear-all-filters{text-transform:uppercase;margin-top:5px;padding:.7em;font-size:1.1em;font-weight:400}.depict.plp .filters .body details summary{cursor:pointer;list-style:none}.depict.plp .filters .body details summary::-webkit-details-marker{display:none}.depict.plp .filters .body details summary>.summary{justify-content:space-between;align-items:center;display:flex}.depict.plp .filters .body details.filter-collapsible{border-top:1px solid #cbcbcc}.depict.plp .filters .body details.filter-collapsible .filter-group-summary:focus{outline:none}.depict.plp .filters .body details.filter-collapsible .filter-group-summary:focus-visible{background:#f3f3f5}@media not all and (hover:none){.depict.plp .filters .body details.filter-collapsible .filter-group-summary:hover{background:#f3f3f5}}.depict.plp .filters .body details.filter-collapsible .filter-group-summary:active{background:#eeeef0}.depict.plp .filters .body details.filter-collapsible .filter-group-summary>.summary{color:#333335;padding:15px 10px}.depict.plp .filters .body details.filter-collapsible .filter-group-summary>.summary>svg{transform:rotate(270deg)}.depict.plp .filters .body details.filter-collapsible[open] .filter-group-summary{border-bottom:1px solid #e4e4e5}.depict.plp .filters .body details.filter-collapsible[open] .filter-group-summary>.summary>span{font-weight:500}.depict.plp .filters .body .filter-collapsible-body{border-radius:0 0 4px 4px;flex-direction:column;margin-bottom:15px;display:flex;overflow:hidden}.depict.plp .filters .body .filter-collapsible-body>:not(:first-child){margin-top:.5px}.depict.plp .filters .body .filter-collapsible-body>:not(:last-child){margin-bottom:.5px}.depict.plp .filters .body .filter-collapsible-body .view-more-clear{border-top:1px solid #e4e4e5;justify-content:space-between;display:flex}.depict.plp .filters .body .filter-collapsible-body .view-more-clear .clear-group{margin-left:auto}.depict.plp .filters .body .filter-collapsible-body .view-more-clear .clear-group>:not(:first-child){margin-left:1.839px}.depict.plp .filters .body .filter-collapsible-body .view-more-clear .clear-group>:not(:last-child){margin-right:1.839px}.depict.plp .filters .body .filter-collapsible-body .view-more-clear .clear-group svg{width:11px;height:12px}.depict.plp .filters .body .filter-collapsible-body .view-more-clear .expand-filter{margin-right:auto}.depict.plp .filters .body .filter-collapsible-body .view-more-clear .expand-filter>:not(:first-child){margin-left:5px}.depict.plp .filters .body .filter-collapsible-body .view-more-clear .expand-filter>:not(:last-child){margin-right:5px}.depict.plp .filters .body .filter-collapsible-body .view-more-clear .expand-filter.expanded svg{clip-path:polygon(20% 48%,80% 48%,80% 50.8%,20% 50.8%);transform:scale(1.6)}.depict.plp .filters .body .filter-collapsible-body .view-more-clear button{color:#333335;cursor:pointer;text-transform:uppercase;background:0 0;border:none;justify-content:center;align-items:center;margin-bottom:0;margin-left:0;margin-right:0;padding:10px;display:flex}.depict.plp .filters .body .filter-collapsible-body .view-more-clear button svg path{fill:#333335}@media not all and (hover:none){.depict.plp .filters .body .filter-collapsible-body .view-more-clear button:hover{color:#4c4c4f}}.depict.plp .filters .body .filter-collapsible-body .view-more-clear button:active{color:#000}.depict.plp .filters .body .filter-collapsible-body .view-more-clear button:focus-visible{filter:drop-shadow(-2px -2px 4px #418fc3cc)drop-shadow(2px 2px 4px #418fc3cc);outline:none}.depict.plp .filters .body .filter-collapsible-body .filter-part{flex-direction:column;padding:15px 10px 20px;display:flex}.depict.plp .filters .body .filter-collapsible-body .filter-part>:not(:first-child){margin-top:5px}.depict.plp .filters .body .filter-collapsible-body .filter-part>:not(:last-child){margin-bottom:5px}.depict.plp .filters .body :not(.ungrouped)>form{margin-top:-5px;margin-bottom:-5px}.depict.plp .filters .body .hierarchical{margin-left:-20px}.depict.plp .filters .body .hierarchical.any-expandable .count{margin-right:30px}.depict.plp .filters .body .hierarchical .checkbox-details{padding-left:20px}.depict.plp .filters .body .hierarchical .checkbox-details.expandable{position:relative}.depict.plp .filters .body .hierarchical .checkbox-details.expandable summary:before,.depict.plp .filters .body .hierarchical .checkbox-details.expandable summary:after{pointer-events:none;content:"";height:1px;width:calc(100% - 20px);background:#f3f3f5;position:absolute;right:0}.depict.plp .filters .body .hierarchical .checkbox-details.expandable summary:before{top:-.5px}.depict.plp .filters .body .hierarchical .checkbox-details.expandable summary:after{bottom:-.5px}@media not all and (hover:none){.depict.plp .filters .body .hierarchical .checkbox-details.expandable summary:hover:after,.depict.plp .filters .body .hierarchical .checkbox-details.expandable summary:hover:before,.input-row:hover~details>.depict.plp .filters .body .hierarchical .checkbox-details.expandable summary:after,.input-row:hover~details>.depict.plp .filters .body .hierarchical .checkbox-details.expandable summary:before{z-index:1;background:#e4e4e5}}.depict.plp .filters .body .hierarchical .checkbox-details.expandable summary:focus-visible:after,.depict.plp .filters .body .hierarchical .checkbox-details.expandable summary:focus-visible:before,.input-row~details:focus-visible>.depict.plp .filters .body .hierarchical .checkbox-details.expandable summary:after,.input-row~details:focus-visible>.depict.plp .filters .body .hierarchical .checkbox-details.expandable summary:before{z-index:1;background:#e4e4e5}.depict.plp .filters .body .hierarchical .checkbox-details.expandable>.input-row{padding-right:30px;position:absolute}.depict.plp .filters .body .hierarchical .checkbox-details.expandable>details:not([open]),.depict.plp .filters .body .hierarchical .checkbox-details.expandable>details[open]>.category-parent>.summary{padding-top:5px;padding-bottom:5px}.depict.plp .filters .body .hierarchical .checkbox-details.expandable>details .category-parent:focus,.depict.plp .filters .body .hierarchical .checkbox-details.expandable>details .category-parent:focus-visible{box-shadow:none;outline:none}@supports selector(:focus-visible){@media not all and (hover:none){.depict.plp .filters .body .hierarchical .checkbox-details.expandable>details .category-parent:not(:focus-visible):not(:hover) .morphing-sign span{background:#333335}.depict.plp .filters .body .hierarchical .checkbox-details.expandable>details .category-parent:not(:focus-visible):not(:hover) .morphing-sign span:first-child{width:5%;left:47.5%}.depict.plp .filters .body .hierarchical .checkbox-details.expandable>details .category-parent:not(:focus-visible):not(:hover) .morphing-sign span:last-child{height:5%;top:47.5%}}@media (hover:none){.depict.plp .filters .body .hierarchical .checkbox-details.expandable>details .category-parent:not(:focus-visible) .morphing-sign span{background:#333335}.depict.plp .filters .body .hierarchical .checkbox-details.expandable>details .category-parent:not(:focus-visible) .morphing-sign span:first-child{width:5%;left:47.5%}.depict.plp .filters .body .hierarchical .checkbox-details.expandable>details .category-parent:not(:focus-visible) .morphing-sign span:last-child{height:5%;top:47.5%}}@media not all and (hover:none){.depict.plp .filters .body .hierarchical .checkbox-details.expandable>details .category-parent:hover .morphing-sign{transform:scale(1.5)}.depict.plp .filters .body .hierarchical .checkbox-details.expandable>details .category-parent:hover .count{color:#000}}.depict.plp .filters .body .hierarchical .checkbox-details.expandable>details .category-parent:focus-visible .count{color:#000}.depict.plp .filters .body .hierarchical .checkbox-details.expandable>details .category-parent:focus-visible .morphing-sign{transform:scale(1.5)}}@supports not selector(:focus-visible){@media not all and (hover:none){.depict.plp .filters .body .hierarchical .checkbox-details.expandable>details .category-parent:not(:hover) .morphing-sign span{background:#333335}.depict.plp .filters .body .hierarchical .checkbox-details.expandable>details .category-parent:not(:hover) .morphing-sign span:first-child{width:5%;left:47.5%}.depict.plp .filters .body .hierarchical .checkbox-details.expandable>details .category-parent:not(:hover) .morphing-sign span:last-child{height:5%;top:47.5%}.depict.plp .filters .body .hierarchical .checkbox-details.expandable>details .category-parent:hover .morphing-sign{transform:scale(1.5)}.depict.plp .filters .body .hierarchical .checkbox-details.expandable>details .category-parent:hover .count{color:#000}}@media (hover:none){.depict.plp .filters .body .hierarchical .checkbox-details.expandable>details .category-parent .morphing-sign span{background:#333335}.depict.plp .filters .body .hierarchical .checkbox-details.expandable>details .category-parent .morphing-sign span:first-child{width:5%;left:47.5%}.depict.plp .filters .body .hierarchical .checkbox-details.expandable>details .category-parent .morphing-sign span:last-child{height:5%;top:47.5%}}}.depict.plp .filters .body .hierarchical .checkbox-details.expandable>details .category-parent>.summary{justify-content:flex-end}.depict.plp .filters .body .hierarchical .checkbox-details.expandable>details .category-parent>.summary .count{margin-right:calc(30px + -1*max(20px,1em))}.depict.plp .filters .body .hierarchical .checkbox-details.expandable>details .category-parent>.summary .morphing-sign{width:max(20px,1em);height:max(20px,1em);transition-duration:.15s;transition-timing-function:ease-in-out}.depict.plp .filters .body .hierarchical .checkbox-details.expandable>details .category-parent>.summary .morphing-sign span{background:#333335;transition-duration:.15s;transition-timing-function:ease-in-out}.depict.plp .filters .body .range .input-group{width:100%;padding-top:10px;padding-bottom:25px;display:flex}.depict.plp .filters .body .range .input-group .field{width:100%;align-items:center;display:flex}.depict.plp .filters .body .range .input-group .field input{width:100%;text-align:center;-moz-appearance:textfield;color:#868689;background:#f3f3f5;border:.5px solid #0f0f0f;outline:none;padding-top:8px;padding-bottom:8px;transition-duration:50ms}.depict.plp .filters .body .range .input-group .field input:focus-visible{background:#e4e4e5}@media not all and (hover:none){.depict.plp .filters .body .range .input-group .field input:hover{background:#e4e4e5}}.depict.plp .filters .body .range .input-group .field input::-webkit-outer-spin-button,.depict.plp .filters .body .range .input-group .field input::-webkit-inner-spin-button{-webkit-appearance:none}.depict.plp .filters .body .range .input-group .separator{color:#333335;flex-shrink:0;flex-basis:25px;justify-content:center;align-items:center;font-size:19px;display:flex}.depict.plp .filters .body .range .slider{height:5px;background:#ddd;border-radius:5px;position:relative}.depict.plp .filters .body .range .slider .progress{height:100%;background:#0f0f0f;border-radius:5px;position:absolute;left:25%;right:25%}.depict.plp .filters .body .range .range-group{position:relative}.depict.plp .filters .body .range .range-group input{width:100%;height:0;pointer-events:none;-webkit-appearance:none;-moz-appearance:none;background:0 0;margin:0;position:absolute;top:-2.5px}.depict.plp .filters .body .range .range-group input:focus{outline:none}.depict.plp .filters .body .range .range-group input::-webkit-slider-thumb{cursor:pointer;height:20px;width:20px;pointer-events:auto;-webkit-appearance:none;background:#0f0f0f;border-radius:50%;box-shadow:0 0 6px #0000000d}@media not all and (hover:none){.depict.plp .filters .body .range .range-group input::-webkit-slider-thumb:hover{background:#333335}}.depict.plp .filters .body .range .range-group input::-moz-range-thumb{cursor:pointer;height:20px;width:20px;pointer-events:auto;-moz-appearance:none;background:#fff;border:none;border-radius:50%;box-shadow:0 0 6px #0000000d}@media not all and (hover:none){.depict.plp .filters .body .range .range-group input::-moz-range-thumb:hover{background:#333335}}.depict.plp .filters .body .range .range-group input:focus-visible::-webkit-slider-thumb{background:#333335}.depict.plp .filters .body .range .range-group input:focus-visible::-moz-range-thumb{background:#333335}.depict.plp .filters .body .range .value-text{color:#333335;justify-content:space-between;padding-top:10px;display:flex}.depict.plp .filters .body .checkbox-grid{flex-wrap:wrap;margin:-5px;display:flex}.depict.plp .filters .body .checkbox-grid>*{margin:5px}.depict.plp .filters .body .checkbox-grid .major,.depict.plp .filters .body .checkbox-grid .minor{padding:5px 10px}.depict.plp .filters .body .checkbox-grid .major.minor,.depict.plp .filters .body .checkbox-grid .minor.minor{border:1px solid #d5d5d5}.depict.plp .filters .body .checkbox-color{flex-wrap:wrap;justify-content:space-between;display:flex}.depict.plp .filters .body .checkbox-color .input-row{width:calc(50% - 10px)}.depict.plp .sorting .body{color:#333335;line-height:1}.depict.plp .sorting .body>:not(:first-child){margin-top:.5px}.depict.plp .sorting .body>:not(:last-child){margin-bottom:.5px}.depict.plp .sorting .body .input-row{justify-content:flex-start;align-items:center;display:flex}.depict.plp .morphing-sign{width:1.5em;height:1.5em;border:0;position:relative}.depict.plp .morphing-sign span{background:#333335;border-radius:2px;position:absolute}.depict.plp .morphing-sign span:first-child{width:10%;top:25%;bottom:25%;left:45%}.depict.plp .morphing-sign span:last-child{height:10%;top:45%;left:25%;right:25%}.depict.plp .depict-filter-sort-modal-backdrop{z-index:5000;touch-action:none;will-change:opacity;opacity:0;background:#000000b3;position:fixed;inset:0}.depict.plp .dismiss-modal{z-index:5003;cursor:pointer;background:0 0;border:none;padding:0;line-height:0;position:fixed;top:14px;left:4px;transform:translateY(calc(-100% - 14px))}.depict.plp .dismiss-modal svg{transform:scale(.6646)}.depict.plp .dismiss-modal svg path{fill:#fff}.depict.plp .filter-sort-modal{z-index:calc(5000 + 2);width:calc(100% - 30px);height:100%;will-change:transform;background:#fff;flex-direction:column;justify-content:space-between;display:flex;position:fixed;top:0;left:30px;transform:translateY(100%)}.depict.plp .filter-sort-modal details.sorting>summary,.depict.plp .filter-sort-modal details.filters>summary{list-style:none}.depict.plp .filter-sort-modal details.sorting>summary::-webkit-details-marker,.depict.plp .filter-sort-modal details.filters>summary::-webkit-details-marker{display:none}.depict.plp .filter-sort-modal details.sorting .sort-filter-summary>.summary,.depict.plp .filter-sort-modal details.filters .sort-filter-summary>.summary{cursor:pointer;color:#0f0f0f;background:#fff;border-top:1px solid #f4f4f4;justify-content:space-between;padding:13px 20px;font-weight:400;display:flex;box-shadow:0 4px 4px #0000000d}.depict.plp .filter-sort-modal details.sorting .sort-filter-summary>.summary .left-els,.depict.plp .filter-sort-modal details.filters .sort-filter-summary>.summary .left-els{align-items:center;display:flex}.depict.plp .filter-sort-modal details.sorting .sort-filter-summary>.summary .left-els>:not(:first-child),.depict.plp .filter-sort-modal details.filters .sort-filter-summary>.summary .left-els>:not(:first-child){margin-left:5px}.depict.plp .filter-sort-modal details.sorting .sort-filter-summary>.summary .left-els>:not(:last-child),.depict.plp .filter-sort-modal details.filters .sort-filter-summary>.summary .left-els>:not(:last-child){margin-right:5px}.depict.plp .filter-sort-modal details[open] .sort-filter-summary>.summary{font-weight:600}.depict.plp .filter-sort-modal .filter-icon,.depict.plp .filter-sort-modal .sort-icon{fill:#0f0f0f}.depict.plp .filter-sort-modal>.body{flex-direction:column;display:flex;overflow-y:auto}.depict.plp .filter-sort-modal>.body>:not(:first-child){margin-top:1px}.depict.plp .filter-sort-modal>.body>:not(:last-child){margin-bottom:1px}.depict.plp .filter-sort-modal .filters .body,.depict.plp .filter-sort-modal .sorting .body{color:#333335}.depict.plp .filter-sort-modal .filters>summary .morphing-sign span,.depict.plp .filter-sort-modal .sorting>summary .morphing-sign span{background:#0f0f0f}.depict.plp .filter-sort-modal .filters .filter-collapsible-body{background:0 0}.depict.plp .filter-sort-modal .filters .body{background:unset;padding:10px}.depict.plp .filter-sort-modal .filters .body .filter-part,.depict.plp .filter-sort-modal .filters .body .view-more-clear{background:#fdfdfd}.depict.plp .filter-sort-modal .sorting .body{background:#eeeef0;border-radius:4px;margin:10px;padding:0}.depict.plp .filter-sort-modal .bottom-row{flex-shrink:0;justify-content:space-between;padding:10px;display:flex}.depict.plp .filter-sort-modal .bottom-row>:not(:first-child){margin-left:5px}.depict.plp .filter-sort-modal .bottom-row>:not(:last-child){margin-right:5px}.depict.plp .filter-sort-modal .bottom-row>button{border-radius:4px;padding-top:12px;padding-bottom:12px}.depict.plp .filter-sort-modal .bottom-row .show-results{flex-grow:1;font-size:1.1em;font-weight:500}.depict.plp .filter-sort-modal .bottom-row .clear{font-size:1.1em}.depict.plp .floating-buttons{z-index:calc(5000 + 4);opacity:0;justify-content:flex-start;align-items:center;padding-left:12px;transition-duration:.3s;transition-timing-function:ease-in-out;display:flex;position:sticky;bottom:12px}.depict.plp .floating-buttons:not(.show-them){pointer-events:none}.depict.plp .floating-buttons.show-them{opacity:1}.depict.plp .floating-buttons .filter{margin-right:5px}.depict.plp .floating-buttons .sort{margin-left:5px;margin-right:5px}.depict.plp .floating-buttons .up{margin-left:5px}.depict.plp .floating-buttons .sort,.depict.plp .floating-buttons .filter,.depict.plp .floating-buttons .up{filter:drop-shadow(2px 2px 4px #0000001a)drop-shadow(-2px -2px 4px #ffffff4d);background:#f3f3f5;border:1px solid #0f0f0f;border-radius:20px;padding:10px}@media not all and (hover:none){.depict.plp .floating-buttons .sort:hover,.depict.plp .floating-buttons .filter:hover,.depict.plp .floating-buttons .up:hover{background:#e4e4e5}}.depict.plp .floating-buttons .sort:focus,.depict.plp .floating-buttons .filter:focus,.depict.plp .floating-buttons .up:focus{outline:none}.depict.plp .floating-buttons .sort:focus-visible,.depict.plp .floating-buttons .filter:focus-visible,.depict.plp .floating-buttons .up:focus-visible{background:#e4e4e5}.depict.plp .floating-buttons .sort div,.depict.plp .floating-buttons .filter div,.depict.plp .floating-buttons .up div{display:flex}.depict.plp .floating-buttons .sort svg path,.depict.plp .floating-buttons .filter svg path,.depict.plp .floating-buttons .up svg path{fill:#333335}.depict.plp .depict-slider{width:100%;position:relative}.depict.plp .depict-slider .sliding{height:100%;-ms-overflow-style:none;scrollbar-width:none;flex-flow:row;align-items:center;display:flex;overflow-x:scroll}.depict.plp .depict-slider .sliding>:not(:first-child){margin-left:5px}.depict.plp .depict-slider .sliding>:not(:last-child){margin-right:5px}.depict.plp .depict-slider .sliding::-webkit-scrollbar{display:none}.depict.plp .depict-slider .d-navbutton{z-index:2;touch-action:manipulation;cursor:pointer;height:calc(100% + 2px);width:26px;background:linear-gradient(270deg,#fff 50%,#0000 105%);border:none;justify-content:flex-end;align-items:center;padding:0 1px 0 0;transition-duration:.2s;display:flex;position:absolute;top:50%;transform:translateY(-50%)}.depict.plp .depict-slider .d-navbutton.hidden{cursor:default;opacity:0;animation-name:depict_slider_button_unclickable;animation-duration:5s;animation-fill-mode:forwards}.depict.plp .depict-slider .d-navbutton.left{left:-1px;transform:translateY(-50%)rotate(180deg)}.depict.plp .depict-slider .d-navbutton.right{right:-1px}.depict.plp .depict-slider .d-navbutton img{width:100%;height:100%}.depict.plp .depict-slider .d-navbutton>div{display:flex}@media not all and (hover:none){.depict.plp .depict-slider .d-navbutton:hover svg{transform:scale(1.2)}}.depict.plp .depict-slider .d-navbutton:focus-visible svg{transform:scale(1.5)}.depict.plp .depict-slider .d-navbutton:focus-visible svg path{filter:drop-shadow(-2px -2px 4px #418fc3cc)drop-shadow(2px 2px 4px #418fc3cc)}.depict.plp .depict-slider .d-navbutton svg{transition-duration:.15s}.depict.plp .depict-slider .d-navbutton:active{opacity:.9}@keyframes depict_slider_button_unclickable{0%{pointer-events:all}to{pointer-events:none;visibility:hidden}}.depict.plp button.major{color:#fff;white-space:pre-wrap;cursor:pointer;background:#0f0f0f;border:1px solid #0000;border-radius:4px;justify-content:center;align-items:center;padding:10px 20px;transition:filter .15s ease-in-out,background .1s ease-in-out;display:flex}.depict.plp button.major svg path{fill:#fff}@media not all and (hover:none){.depict.plp button.major:hover{filter:drop-shadow(-2px -2px 4px #ffffff40)drop-shadow(2px 2px 4px #00000026);background:#333335}}.depict.plp button.major:active{filter:drop-shadow(2px 2px 4px #ffffff40)drop-shadow(-2px -2px 4px #00000026);background:#000}.depict.plp button.major:focus{outline-style:none}.depict.plp button.major:focus-visible{filter:drop-shadow(2px 2px 4px #418fc3cc)drop-shadow(-2px -2px 4px #418fc3cc);background:#333335}.depict.plp button.minor{color:#0f0f0f;white-space:pre-wrap;cursor:pointer;background:#fff;border:1px solid #0f0f0f;border-radius:4px;justify-content:center;align-items:center;padding:10px 20px;transition:filter .15s ease-in-out,background .1s ease-in-out;display:flex}.depict.plp button.minor svg path{fill:#0f0f0f}@media not all and (hover:none){.depict.plp button.minor:hover{filter:drop-shadow(-2px -2px 4px #ffffff40)drop-shadow(2px 2px 4px #00000026);background:#f3f3f5}}.depict.plp button.minor:active{filter:drop-shadow(2px 2px 4px #ffffff40)drop-shadow(-2px -2px 4px #00000026);background:#e4e4e5}.depict.plp button.minor:focus{outline-style:none}.depict.plp button.minor:focus-visible{filter:drop-shadow(-2px -2px 4px #418fc3cc)drop-shadow(2px 2px 4px #418fc3cc);background:#f3f3f5}.depict.search .previous-searches{flex-direction:column;display:flex}.depict.search .previous-searches>:not(:first-child){margin-top:7.5px}.depict.search .previous-searches>:not(:last-child){margin-bottom:7.5px}.depict.search .previous-searches .list{flex-direction:column;display:flex}.depict.search .previous-searches .list>:not(:first-child){margin-top:2.5px}.depict.search .previous-searches .list>:not(:last-child){margin-bottom:2.5px}.depict.search .previous-searches .list .item{overflow-wrap:anywhere;border-radius:4px;justify-content:space-between;align-items:center;padding:10px 20px;display:flex}.depict.search .previous-searches .list .item .left{align-items:center;display:flex}.depict.search .previous-searches .list .item .left>:not(:first-child){margin-left:5px}.depict.search .previous-searches .list .item .left>:not(:last-child){margin-right:5px}.depict.search .previous-searches .list .item .left svg{min-width:12px}.depict.search .previous-searches .list .item .left svg path{fill:#333335}.depict.search .previous-searches .list .item .delete{height:100%;cursor:pointer;background:0 0;justify-content:center;align-items:center;padding:0 10px;display:flex}.depict.search .previous-searches .list .item .delete:focus{outline:none}.depict.search .previous-searches .list .item .delete svg{width:13px;height:13px;transition-duration:.15s}.depict.search .previous-searches .list .item .delete svg path{fill:#333335}.depict.search .previous-searches .list .item .delete:hover svg{transform:scale(1.2)}.depict.search .previous-searches .list .item .delete:hover svg path{fill:#000}.depict.search .previous-searches .list .item .delete:focus-visible{filter:drop-shadow(-2px -2px 4px #418fc3cc)drop-shadow(2px 2px 4px #418fc3cc)}.depict.search .previous-searches .list .item .delete:focus-visible svg{transform:scale(1.2)}.depict.search .previous-searches .list .item .delete:focus-visible svg path{fill:#000}.depict.search .previous-searches .text,.depict.search .suggestions .text{color:#333335;margin-top:0;font-size:16px;font-weight:700}.depict.search .previous-searches .item,.depict.search .previous-searches .suggestion,.depict.search .suggestions .item,.depict.search .suggestions .suggestion{color:#333335;background:#fff;font-weight:400}.depict.search .previous-searches .item.selected,.depict.search .previous-searches .suggestion.selected,.depict.search .suggestions .item.selected,.depict.search .suggestions .suggestion.selected{background:#e4e4e5}.depict.search .previous-searches .item:focus-visible,.depict.search .previous-searches .suggestion:focus-visible,.depict.search .suggestions .item:focus-visible,.depict.search .suggestions .suggestion:focus-visible{filter:drop-shadow(-2px -2px 4px #418fc3cc)drop-shadow(2px 2px 4px #418fc3cc);outline:none}.depict.search .previous-searches .item:active,.depict.search .previous-searches .suggestion:active,.depict.search .suggestions .item:active,.depict.search .suggestions .suggestion:active{background:#cbcbcc}.depict.search .suggestions{flex-direction:column;display:flex}.depict.search .suggestions>:not(:first-child){margin-top:10px}.depict.search .suggestions>:not(:last-child){margin-bottom:10px}.depict.search .suggestions:not(.compact)>.suggestion-container>:not(:first-child),.depict.search .suggestions.compact>.suggestion-container:not(.query)>:not(:first-child){margin-top:2.5px}.depict.search .suggestions:not(.compact)>.suggestion-container>:not(:last-child),.depict.search .suggestions.compact>.suggestion-container:not(.query)>:not(:last-child){margin-bottom:2.5px}.depict.search .suggestions .suggestion-container{flex-direction:column;display:flex}.depict.search .suggestions .suggestion-container .suggestion{overflow-wrap:anywhere;border-radius:4px;justify-content:space-between;align-items:center;padding:10px 20px;display:flex}.depict.search .suggestions .suggestion-container .suggestion svg{flex-shrink:0}.depict.search .suggestions .suggestion-container .suggestion svg path{fill:#333335}.depict.search .suggestions .suggestion-container .suggestion .search-icon{max-width:12px;max-height:13px}.depict.search .suggestions .suggestion-container .suggestion .search-icon svg{transform:matrix(.6,0,0,.6,-4.14,-4.32)}.depict.search .suggestions .suggestion-container .suggestion .has-history-match{color:#333335 y;font-weight:400}.depict.search .suggestions .suggestion-container .suggestion .has-history-match .highlighted-part{color:#333335;font-weight:500}.depict.search .suggestions .suggestion-container .suggestion .category{margin-right:20px}.depict.search .suggestions .suggestion-container .suggestion .type{color:#868689;text-transform:capitalize}.depict.search .suggestions .suggestion-container.query{flex-direction:column}.depict.search .suggestions .suggestion-container.query .suggestion{justify-content:flex-start}.depict.search .suggestions .suggestion-container.query .suggestion>:not(:first-child){margin-left:4px}.depict.search .suggestions .suggestion-container.query .suggestion>:not(:last-child){margin-right:4px}.depict.search .suggestions.compact>.suggestion-container.query{flex-flow:wrap;margin:-2.5px}.depict.search .suggestions.compact>.suggestion-container.query>*{margin:2.5px}.depict.search .category-suggestions{display:flex}.depict.search .category-suggestions .sliding{margin-bottom:-2px;padding-bottom:2px}.depict.search .category-suggestions .title{font-weight:500}.depict.search .category-suggestions .category-suggestion{color:#0f0f0f;height:100%;background:#fff;border:1px solid #e4e4e5;justify-content:space-between;align-items:center;padding:10px 20px;transition:background .1s ease-in-out;display:flex}.depict.search .category-suggestions .category-suggestion:focus-visible{background:#f3f3f5}@media not all and (hover:none){.depict.search .category-suggestions .category-suggestion:hover{background:#f3f3f5}}.depict.search .category-suggestions .category-suggestion:active{background:#e4e4e5}.depict.search .category-suggestions .category-suggestion>:not(:first-child){margin-left:5px}.depict.search .category-suggestions .category-suggestion>:not(:last-child){margin-right:5px}.depict.search .category-suggestions .category-suggestion .parent-title{font-weight:300}.depict.search .category-suggestions .category-suggestion>*{white-space:nowrap;font-size:.85em}.depict.search .instant-results{flex-direction:column;display:flex}.depict.search .instant-results>:not(:first-child){margin-top:2.5px}.depict.search .instant-results>:not(:last-child){margin-bottom:2.5px}.depict.search .instant-results .instant-card{background:#fff;border-radius:4px;flex:100%;padding:5px 20px;display:flex;overflow:hidden}.depict.search .instant-results .instant-card:hover,.depict.search .instant-results .instant-card:focus{z-index:2;box-shadow:2px 2px 4px #00000026,-4px -4px 4px #ffffff4d}.depict.search .instant-results .instant-card>:not(:first-child){margin-left:.75vw}.depict.search .instant-results .instant-card>:not(:last-child){margin-right:.75vw}.depict.search .instant-results .instant-card .img-part{flex:0 0 100px}.depict.search .instant-results .instant-card .right-part{flex-grow:1;justify-content:space-between;display:flex}.depict.search .instant-results .instant-card .right-part>:not(:first-child){margin-left:.75vw}.depict.search .instant-results .instant-card .right-part>:not(:last-child){margin-right:.75vw}.depict.search .instant-results .instant-card .right-part .title-brand-tagline{justify-content:center;align-items:center;display:flex}@media (min-width:601px){.depict.search .instant-results .instant-card .right-part .title-brand-tagline>:not(:first-child){margin-left:.75vw}.depict.search .instant-results .instant-card .right-part .title-brand-tagline>:not(:last-child){margin-right:.75vw}}@media (max-width:600px){.depict.search .instant-results .instant-card .right-part .title-brand-tagline{flex-direction:column;align-items:flex-start}.depict.search .instant-results .instant-card .right-part .title-brand-tagline>:not(:first-child){margin-top:.75vw}.depict.search .instant-results .instant-card .right-part .title-brand-tagline>:not(:last-child){margin-bottom:.75vw}}.depict.search .instant-results .instant-card .right-part .title-brand-tagline .title{text-overflow:ellipsis;white-space:pre-line;overflow-wrap:anywhere;-webkit-line-clamp:2;word-break:break-word;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.depict.search .instant-results .instant-card .right-part .title-brand-tagline .tagline{color:#868689;font-size:.9em}.depict.search .instant-results .instant-card .right-part .price-container{justify-content:center;align-items:center;display:flex}@media (min-width:601px){.depict.search .instant-results .instant-card .right-part .price-container>:not(:first-child){margin-left:.75vw}.depict.search .instant-results .instant-card .right-part .price-container>:not(:last-child){margin-right:.75vw}}.depict.search .instant-results .instant-card .right-part .price-container .price:not(.orig){color:#0f0f0f;font-weight:700}.depict.search .instant-results .instant-card .right-part .price-container .price.orig{color:#868689;text-decoration:line-through}.depict.search .instant-results .instant-card .right-part .price-container .price.sales-price{color:#ff2e3e}@media (max-width:600px){.depict.search .instant-results .instant-card .right-part .price-container{flex-direction:column}.depict.search .instant-results .instant-card .right-part .price-container>:not(:first-child){margin-top:.75vw}.depict.search .instant-results .instant-card .right-part .price-container>:not(:last-child){margin-bottom:.75vw}.depict.search .instant-results .instant-card .right-part .price-container .price:not(.orig){order:0}.depict.search .instant-results .instant-card .right-part .price-container .price.orig{order:1}}.depict.search .search-field{z-index:calc(1 + 5);border-radius:10px;display:flex;box-shadow:0 4px 4px #0000000d}.depict.search .search-field input,.depict.search .search-field button{margin:0}.depict.search .search-field .query{font-size:initial;width:100%;color:#333335;background-color:#fff;border:none;border-radius:10px 0 0 10px;flex-grow:1;padding:14px 55px 14px 20px}.depict.search .search-field .query:focus{color:#000;outline:none}@media not all and (hover:none){.depict.search .search-field .query:hover{color:#000;outline:none}}.depict.search .search-field .query.has-adjacent-back-button{border-top-left-radius:0;border-bottom-left-radius:0;padding-left:0}.depict.search .search-field .field{flex-grow:1;display:flex;position:relative}.depict.search .search-field .back{cursor:pointer;background-color:#fff;border:none;border-top-left-radius:10px;border-bottom-left-radius:10px;justify-content:center;align-items:center;padding:14px 15px 14px 10px;display:flex}.depict.search .search-field .back svg path{fill:#333335}.depict.search .search-field .back:focus{outline:none}.depict.search .search-field .back:focus-visible{filter:drop-shadow(-2px -2px 4px #418fc3cc)drop-shadow(2px 2px 4px #418fc3cc)}.depict.search .search-field .back:focus-visible svg path{fill:#0f0f0f}@media not all and (hover:none){.depict.search .search-field .back:hover svg path{fill:#0f0f0f}}.depict.search .search-field .clear,.depict.search .search-field .submit{cursor:pointer}.depict.search .search-field .clear{background-color:#fff;border:none;padding:0;position:absolute;top:50%;right:30px;transform:translateY(-50%)scale(.8)}.depict.search .search-field .clear svg path{fill:#333335}.depict.search .search-field .clear:focus{outline:none}.depict.search .search-field .clear:focus-visible{filter:drop-shadow(-2px -2px 4px #418fc3cc)drop-shadow(2px 2px 4px #418fc3cc)}.depict.search .search-field .clear:focus-visible svg path{fill:#000}@media not all and (hover:none){.depict.search .search-field .clear:hover svg path{fill:#000}}.depict.search .search-field .submit{min-width:50px;border:none;border-radius:0 10px 10px 0;padding:0}.depict.search .search-field:not(.in-modal) .query{border-top:1px solid #cbcbcc;border-bottom:1px solid #cbcbcc;border-left:1px solid #cbcbcc}.depict.search .search-field:not(.in-modal) .submit{border-top:1px solid #cbcbcc;border-bottom:1px solid #cbcbcc;border-right:1px solid #cbcbcc}.depict.search .depict-search-modal-backdrop{z-index:5000;touch-action:none;background:#0006;position:fixed;inset:0}.depict.search .depict-search-modal{justify-content:center;display:flex}.depict.search .depict-search-modal .search-field{z-index:calc(5000 + 5)}.depict.search .depict-search-modal .body{max-width:800px;z-index:calc(5000 + 1);background:#f3f3f5;border-radius:10px;flex-direction:column;display:flex}@media (hover:hover) and (pointer:fine) and (max-height:790px){.depict.search .depict-search-modal .body{max-height:100%;position:fixed;top:0}}@media (hover:hover) and (pointer:fine) and (max-height:790px) and (max-width:600px){.depict.search .depict-search-modal .body{width:calc(100% - 30px);left:30px}}@media not all and (hover:hover) and (pointer:fine){@media (max-height:1000px){.depict.search .depict-search-modal .body{max-height:100%;position:fixed;top:0}}@media (max-height:1000px) and (max-width:600px){.depict.search .depict-search-modal .body{width:calc(100% - 30px);left:30px}}}.depict.search .depict-search-modal .body .padded>*,.depict.search .depict-search-modal .body .search-field{flex-shrink:0}.depict.search .depict-search-modal .body .padded{flex-direction:column;padding-top:20px;padding-left:max(1vw,10px);padding-right:max(1vw,10px);display:flex;overflow:auto}.depict.search .depict-search-modal .body .padded>:not(:first-child){margin-top:10px}.depict.search .depict-search-modal .body .padded>:not(:last-child){margin-bottom:10px}.depict.search .depict-search-modal .body .discover-more{justify-content:center;display:flex}.depict.search .depict-search-modal .body .discover-more button{text-transform:uppercase;margin:20px 0;padding:12px 18px}.depict.search .listing-page .search-field{width:min(100%,800px);align-self:center;margin-top:40px;margin-bottom:20px}@media (max-width:651px){.depict.search .listing-page .search-field{margin-top:16px;margin-bottom:16px}}.depict.search .listing-page .search-field~.category-suggestions .category-suggestion:last-child{margin-right:auto}.depict.search .listing-page .search-field~.category-suggestions .category-suggestion:first-child{margin-left:auto}.depict.search .listing-page .category-suggestions{margin-bottom:20px}@media (max-width:651px){.depict.search .listing-page .category-suggestions{margin-bottom:16px}}@media (min-width:652px){.depict.search .listing-page .search-field+.filter-results-for-one-row,.depict.search .listing-page .search-field+.results-for{margin-top:20px}}.depict.search .listing-page .search-recs{margin-top:60px;padding-top:60px}@media (max-width:651px){.depict.search .listing-page .search-recs{margin-top:48px;padding-top:48px}}.depict.search .listing-page .PLP-results.nothing+.search-recs{margin-top:30px;padding-top:30px}@media (max-width:651px){.depict.search .listing-page .PLP-results.nothing+.search-recs{margin-top:24px;padding-top:24px}}.depict.search .listing-page .search-recs{border-top:2px solid #e4e4e5;flex-direction:column;display:flex}.depict.search .listing-page .search-recs .search-recs-title{margin-top:0;margin-bottom:20px;font-size:24px;font-weight:600;line-height:1}.depict.search .listing-page .search-recs .load-more-container{justify-content:center;margin-top:30px;display:flex}.depict.search .results-for{overflow-wrap:anywhere;font-size:1.5em}.depict.category .crumbs{flex-wrap:wrap;display:flex}.depict.category .crumbs .crumb{color:#333335}.depict.category .crumbs .crumb:hover{text-decoration:underline}.depict.category .crumbs .crumb:last-of-type{color:#0f0f0f;font-weight:500}.depict.category .crumbs .separator{color:#868689;margin-left:10px;margin-right:10px}.depict.category .quicklinks{overflow:hidden}.depict.category .quicklinks .quicklink{white-space:nowrap;color:#0f0f0f;background:#fff;border:1px solid #cbcbcc;border-radius:4px;padding:10px 20px;transition:all 75ms ease-in-out}.depict.category .quicklinks .quicklink:focus{outline:none}@media not all and (hover:none){.depict.category .quicklinks .quicklink:hover{background:#f3f3f5}}.depict.category .quicklinks .quicklink:focus-visible{filter:drop-shadow(-2px -2px 4px #418fc3cc)drop-shadow(2px 2px 4px #418fc3cc);background:#f3f3f5}.depict.category .quicklinks .quicklink:active{background:#e4e4e5}.depict.category .quicklinks .quicklink.selected{color:#fff;background:#0f0f0f;border:1px solid #0000}@media not all and (hover:none){.depict.category .quicklinks .quicklink.selected:hover{background:#333335}}.depict.category .quicklinks .quicklink.selected:focus-visible{filter:drop-shadow(2px 2px 4px #418fc3cc)drop-shadow(-2px -2px 4px #418fc3cc);background:#333335}.depict.category .quicklinks .quicklink.selected:active{background:#000}.depict.category .category-title{overflow-wrap:anywhere;flex-wrap:wrap;align-items:center;font-size:1.5em;display:flex}.depict.category .category-title *{align-items:center;display:flex}.depict.category .category-title .title{font-weight:700;font-size:inherit;margin-right:10px}.depict.category .category-title .explanation{color:#868689;font-weight:500}.depict.category .category-title .explanation .product-count{margin-left:10px}.depict.category .listing-page .quicklinks,.depict.category .listing-page .crumbs{margin-bottom:20px}@media (max-width:651px){.depict.category .listing-page .quicklinks,.depict.category .listing-page .crumbs{margin-bottom:16px}}.depict.plp.toast{z-index:calc(5000 + 5);white-space:nowrap;border-bottom-style:solid;border-bottom-width:2px;background:#fff;border-image-source:linear-gradient(90deg,#0f0f0f 0% 100%);border-image-slice:0 0 100%;border-radius:4px;padding:10px 20px;position:fixed;bottom:10px;left:50%;transform:translate(-50%);box-shadow:2px 2px 4px #0000000d}.depict.plp.toast *,.depict.plp.toast *{-webkit-user-select:none;user-select:none}@media (min-width:1000px){.depict.plp.toast{padding:10px 40px}}.depict.plp.toast,.depict.plp.toast .buttons{justify-content:center;align-items:center;display:flex}@media (max-width:999px){.depict.plp.toast>:not(:first-child),.depict.plp.toast .buttons>:not(:first-child){margin-left:5px}.depict.plp.toast>:not(:last-child),.depict.plp.toast .buttons>:not(:last-child){margin-right:5px}}@media (min-width:1000px){.depict.plp.toast>:not(:first-child),.depict.plp.toast .buttons>:not(:first-child){margin-left:15px}.depict.plp.toast>:not(:last-child),.depict.plp.toast .buttons>:not(:last-child){margin-right:15px}}.depict.plp.toast{color:#0f0f0f}.depict.plp.toast button{cursor:pointer;border-radius:4px;padding:5px 20px}
package/dist/styles/helpers/color_inference.scss ADDED
@@ -0,0 +1,112 @@
1
+ @use "sass:map";
2
+ @use "sass:color";
3
+ @use "./utils";
4
+
5
+ @function get-possible-inferred-or-merged-something($default-values-map, $user-overrides-map, $type, $state) {
6
+ $value-from-merged-map: map.get(map.get(map.deep-merge($default-values-map, $user-overrides-map), $type), $state);
7
+ // If the color is specified as override, just return it.
8
+ @if map.has-key($user-overrides-map, $type) and map.has-key(map.get($user-overrides-map, $type), $state) {
9
+ @return $value-from-merged-map;
10
+ }
11
+ $infer-defaults-return-value: infer-defaults($user-overrides-map, $type);
12
+ $safe-overrides-map: map.get($infer-defaults-return-value, "map");
13
+ $changed-direction: map.get($infer-defaults-return-value, "changed-direction");
14
+ // If we don't have overrides or don't have a "default" override, don't infer and return from the merged map.
15
+ @if (not map.has-key($safe-overrides-map, $type)) or (not map.has-key(map.get($safe-overrides-map, $type), "default"))
16
+ {
17
+ @return $value-from-merged-map;
18
+ }
19
+
20
+ // If the color is specified as override NOW, just return it.
21
+ @if map.has-key($safe-overrides-map, $type) and map.has-key(map.get($safe-overrides-map, $type), $state) {
22
+ @return map.get(map.get($safe-overrides-map, $type), $state);
23
+ }
24
+
25
+ // We're good to infer
26
+ $our-color: map.get(map.get($safe-overrides-map, $type), "default");
27
+ $direction-to-go: if(
28
+ not $changed-direction,
29
+ if(color.lightness($our-color) >= 50%, "darken", "lighten"),
30
+ $changed-direction
31
+ );
32
+
33
+ //"hover": get-merged($base-colors-defaults, $base-colors, 600),
34
+ //"pressed": get-merged($base-colors-defaults, $base-colors, 1000),
35
+ //"disabled": get-merged($base-colors-defaults, $base-colors, 400),
36
+ @if $direction-to-go == "darken" {
37
+ @if $state == "hover" {
38
+ @return color.adjust($our-color, $lightness: -12%, $saturation: -7%);
39
+ } @else if $state == "pressed" {
40
+ @return color.adjust($our-color, $lightness: -20%, $saturation: -10%);
41
+ } @else if $state == "disabled" {
42
+ @return color.adjust($our-color, $lightness: -30%, $saturation: -5%);
43
+ }
44
+ } @else {
45
+ @if $state == "hover" {
46
+ @return color.adjust($our-color, $lightness: 10%, $saturation: 5%);
47
+ } @else if $state == "pressed" {
48
+ @return color.adjust($our-color, $lightness: 20%);
49
+ } @else if $state == "disabled" {
50
+ @return color.adjust($our-color, $lightness: 30%);
51
+ }
52
+ }
53
+ }
54
+
55
+ @function infer-defaults($user-overrides-map, $type) {
56
+ @if (not map.has-key($user-overrides-map, "base")) or
57
+ (not map.has-key(map.get($user-overrides-map, "base"), "default"))
58
+ {
59
+ // If no base to fallback this function is useless
60
+ @return ("map": $user-overrides-map, "changed-direction": false);
61
+ }
62
+ // Check if have default
63
+ @if (not map.has-key($user-overrides-map, $type)) or (not map.has-key(map.get($user-overrides-map, $type), "default"))
64
+ {
65
+ $default-color: map.get(map.get($user-overrides-map, "base"), "default");
66
+ // it's important to always go in the same direction with our inference but since
67
+ // default color is the same for base, neutral and subtle we don't need to preserve the direction somewhere else, it will automatically be consistent
68
+ $changed-color: black;
69
+ $changed-direction: false;
70
+ @if $type == "neutral" {
71
+ @if color.lightness($default-color) >= 50% {
72
+ $changed-color: color.adjust($default-color, $lightness: -25%, $saturation: -10%);
73
+ $changed-direction: "darken";
74
+ } @else {
75
+ $changed-color: color.adjust($default-color, $lightness: 25%);
76
+ $changed-direction: "lighten";
77
+ }
78
+ } @else if $type == "subtle" {
79
+ @if color.lightness($default-color) >= 50% {
80
+ // Please never change lightness by more than 50% as the distance won't be the same between neutral and subtle anymore
81
+ // If you do, find out the max change possible for a certain color and only change neutral half of that (I think that's like using color.scale but that function doesn't work in the black-direction IIRC?)
82
+ $changed-color: color.adjust($default-color, $lightness: -30%, $saturation: -20%);
83
+ $changed-direction: "darken";
84
+ } @else {
85
+ $changed-color: color.adjust(
86
+ $default-color,
87
+ $lightness: 30%,
88
+ $saturation:
89
+ if((color.saturation($default-color)) < 30% and (color.saturation($default-color) > 2%), 20%, -20%)
90
+ );
91
+ $changed-direction: "lighten";
92
+ }
93
+ } @else if $type == "inverse" {
94
+ // Invert color and ensure saturation is same as input color
95
+ $changed-color: color.change(color.invert($default-color), $saturation: color.saturation($default-color));
96
+ } @else {
97
+ @debug "Unknown type: #{$type}";
98
+ }
99
+ // Merge in default
100
+ $modified-map: map.deep-merge(
101
+ $user-overrides-map,
102
+ (
103
+ $type: (
104
+ "default": $changed-color,
105
+ ),
106
+ )
107
+ );
108
+ @return ("map": $modified-map, "changed-direction": $changed-direction);
109
+ }
110
+
111
+ @return ("map": $user-overrides-map, "changed-direction": false);
112
+ }
package/dist/styles/helpers/custom_input.scss ADDED
@@ -0,0 +1,194 @@
1
+ @use "sass:string";
2
+ @use "sass:color";
3
+ @use "supports-hover";
4
+ @use "sass:map";
5
+ @use "utils";
6
+ @use "../components/PLP/Buttons";
7
+
8
+ // https://selleo.com/til/posts/rc5qli22jp-pass-hex-color-to-fill-svg-in-background-url-scss
9
+ @function escape-url-hex-color($hex_color) {
10
+ $ie-color-string: color.ie-hex-str($hex_color);
11
+ $string: string.quote($ie-color-string);
12
+ $color: string.slice($string, 4);
13
+ @return "%23" + $color;
14
+ }
15
+
16
+ @mixin custom_input(
17
+ $checkbox-background-color,
18
+ $checkbox-checked-background-color,
19
+ $checkbox-checkmark-color,
20
+ $checkbox-border-radius,
21
+ $checkbox-border,
22
+ $checkbox-left-offset,
23
+ $checkbox-top-offset,
24
+ $radio-border,
25
+ $radio-background-color,
26
+ $radio-selected-dot-color,
27
+ $radio-selected-dot-size,
28
+ $radio-selected-offset,
29
+ $hovered-checkbox-bg,
30
+ $hovered-checkbox-checked-background-color,
31
+ $hovered-checkbox-border,
32
+ $hovered-radio-border,
33
+ $input-row-height,
34
+ $largest-border-on-custom-input
35
+ ) {
36
+ $width-and-height: calc(
37
+ #{$input-row-height} - calc(#{$largest-border-on-custom-input} * 2)
38
+ ); // border is on both sides
39
+ /* Customize the label (the container) */
40
+ .input-row {
41
+ position: relative;
42
+ cursor: pointer;
43
+
44
+ .custom-indicator {
45
+ position: relative;
46
+ // space to text
47
+ margin-right: 10px;
48
+ }
49
+
50
+ /* Hide the browser's default radio/checkbox input element */
51
+ input {
52
+ position: absolute;
53
+ opacity: 0;
54
+ cursor: pointer;
55
+ height: 0;
56
+ width: 0;
57
+ }
58
+ /* Create the custom-indicator (hidden when not checked) */
59
+ .custom-indicator:after {
60
+ content: "";
61
+ position: absolute;
62
+ display: none;
63
+ }
64
+
65
+ /* Create a custom checkbox */
66
+ input[type="checkbox"] {
67
+ & ~ .custom-indicator {
68
+ padding: calc(#{$width-and-height} / 2);
69
+ background-color: $checkbox-background-color;
70
+ border-radius: $checkbox-border-radius;
71
+ &:not(.color) {
72
+ border: $checkbox-border;
73
+ }
74
+ &.color {
75
+ padding: calc(#{$input-row-height} / 2); // doesn't have border so needs more size
76
+ &.outline {
77
+ $border-width: 0.5px;
78
+ padding: calc(calc(#{$input-row-height} - calc(#{$border-width} * 2)) / 2);
79
+ border: $border-width solid #868689;
80
+ }
81
+ }
82
+ }
83
+ /* When the checkbox is checked, add a blue background */
84
+ &:checked ~ .custom-indicator {
85
+ // background-color: #000;
86
+ background-color: $checkbox-checked-background-color;
87
+ &:after {
88
+ background-image: url('data:image/svg+xml;utf8,<svg fill="#{escape-url-hex-color($checkbox-checkmark-color)}" width="12" height="10" viewBox="0 0 12 10" xmlns="http://www.w3.org/2000/svg"><path d="M12 2.0001L10.6 0.600098L4 7.2001L1.4 4.6001L0 6.0001L4 10.0001L12 2.0001Z" /></svg>');
89
+ fill: #fff;
90
+ color: #fff;
91
+ position: absolute;
92
+ top: calc(50% + $checkbox-top-offset);
93
+ left: calc(50% + $checkbox-left-offset);
94
+ transform: translate(-50%, -50%);
95
+
96
+ display: block; // Show the custom-indicator when checked
97
+
98
+ /* Style the custom-indicator */
99
+ width: 12px;
100
+ height: 10px;
101
+ }
102
+ &.color:after {
103
+ // Force this to be white for color checkboxes
104
+ background-image: url('data:image/svg+xml;utf8,<svg fill="#{escape-url-hex-color(#fff)}" width="12" height="10" viewBox="0 0 12 10" xmlns="http://www.w3.org/2000/svg"><path d="M12 2.0001L10.6 0.600098L4 7.2001L1.4 4.6001L0 6.0001L4 10.0001L12 2.0001Z" /></svg>');
105
+ }
106
+ &.color.check-dark:after {
107
+ background-image: url('data:image/svg+xml;utf8,<svg fill="#{escape-url-hex-color(#000)}" width="12" height="10" viewBox="0 0 12 10" xmlns="http://www.w3.org/2000/svg"><path d="M12 2.0001L10.6 0.600098L4 7.2001L1.4 4.6001L0 6.0001L4 10.0001L12 2.0001Z" /></svg>');
108
+ }
109
+ &.color.check-multi:after {
110
+ background-image: url('data:image/svg+xml;utf8,<svg fill="#{escape-url-hex-color(#fff)}" width="12" height="10" viewBox="0 0 12 10" xmlns="http://www.w3.org/2000/svg"><path style="stroke:black;stroke-width:1px" d="M12 2.0001L10.6 0.600098L4 7.2001L1.4 4.6001L0 6.0001L4 10.0001L12 2.0001Z" /></svg>');
111
+ }
112
+ }
113
+ &:focus-visible ~ .custom-indicator {
114
+ background-color: $hovered-checkbox-bg;
115
+ &.color {
116
+ filter: map.get(Buttons.get-secondary-button-properties(), "focus-visible-filter");
117
+ }
118
+ }
119
+ &:checked:focus-visible ~ .custom-indicator {
120
+ background-color: $hovered-checkbox-checked-background-color;
121
+ }
122
+ }
123
+ @include supports-hover.supports-hover() {
124
+ &:hover input[type="checkbox"] {
125
+ & ~ .custom-indicator {
126
+ background-color: $hovered-checkbox-bg;
127
+ &:not(.color) {
128
+ border: $hovered-checkbox-border;
129
+ $hovered-border-width: get_border_width($hovered-checkbox-border);
130
+ $border-width: get_border_width($checkbox-border);
131
+ padding: calc(calc(#{$width-and-height} / 2) - calc(#{$hovered-border-width} - #{$border-width}));
132
+ }
133
+ }
134
+ &:checked ~ .custom-indicator {
135
+ background-color: $hovered-checkbox-checked-background-color;
136
+ }
137
+ }
138
+ }
139
+
140
+ /* Create a custom radio button */
141
+ input[type="radio"] {
142
+ ~ .custom-indicator {
143
+ padding: calc(#{$width-and-height} / 2);
144
+ border-radius: 50%;
145
+ border: $radio-border;
146
+ background-color: $radio-background-color;
147
+ }
148
+ &:checked ~ .custom-indicator {
149
+ background-color: transparent;
150
+ &:after {
151
+ display: block; // Show the custom-indicator when checked
152
+
153
+ /* Style the custom-indicator */
154
+ width: $radio-selected-dot-size;
155
+ height: $radio-selected-dot-size;
156
+ left: calc(50% + $radio-selected-offset);
157
+ top: calc(50% + $radio-selected-offset);
158
+ transform: translate(-50%, -50%);
159
+
160
+ // width: 8px;
161
+ // height: 8px;
162
+ // top: 6px;
163
+ // left: 6px;
164
+ background-color: $radio-selected-dot-color;
165
+ border-radius: 50%;
166
+ }
167
+ }
168
+ &:focus-visible ~ .custom-indicator {
169
+ @include utils.highlight-background($radio-background-color);
170
+ }
171
+ &:checked:focus-visible ~ .custom-indicator:after {
172
+ @include utils.highlight-background($radio-selected-dot-color, 15%, 25%);
173
+ }
174
+ }
175
+ @include supports-hover.supports-hover() {
176
+ &:hover input[type="radio"] ~ .custom-indicator {
177
+ border: $hovered-radio-border;
178
+ $hovered-border-width: get_border_width($hovered-radio-border);
179
+ $border-width: get_border_width($radio-border);
180
+ padding: calc(calc(#{$width-and-height} / 2) - calc(#{$hovered-border-width} - #{$border-width}));
181
+ }
182
+ }
183
+
184
+ @content;
185
+ }
186
+ }
187
+
188
+ @function get_border_width($border-declaration) {
189
+ @if $border-declaration == "none" or $border-declaration == "unset" {
190
+ @return 0px;
191
+ } @else {
192
+ @return nth($border-declaration, 1);
193
+ }
194
+ }
package/dist/styles/helpers/supports-hover.scss ADDED
@@ -0,0 +1,7 @@
1
+ /// Wraps @content in a media query that targets devices that support `:hover` in a non-fallback way.
2
+
3
+ @mixin supports-hover {
4
+ @media not all and (hover: none) {
5
+ @content;
6
+ }
7
+ }