/**/ #snackys-tpl #ftr-tp.to-plp-filter { margin: 0 0 34px; padding: 0; border: 0; border-radius: var(--border-radius-sm); background: transparent; color: var(--color-primary-100); font-family: var(--font-family-base); } #snackys-tpl .to-plp-filter__main { display: flex; align-items: stretch; min-height: 56px; overflow: visible; border-radius: var(--border-radius-sm); background: var(--color-secondary-50); } #snackys-tpl .to-plp-filter__group { position: relative; display: flex; flex: 0 0 auto; width: max-content; padding: 8px 24px; align-items: center; gap: var(--spacing-2); } #snackys-tpl .to-plp-filter__group:not(:last-child)::after { position: absolute; top: 0; right: 0; width: 1px; height: 100%; background: var(--color-tertiary-75); content: ""; } #snackys-tpl .to-plp-filter__label { flex: 0 0 auto; color: var(--color-primary-100); font-size: 16px; font-weight: var(--font-weight-regular); line-height: 1; white-space: nowrap; } #snackys-tpl .to-plp-filter__main .to-plp-filter__label { color: var(--color-neutral); } #snackys-tpl .to-plp-filter__chip--compatible .to-plp-filter__brand-mask { display: block; flex: 0 0 auto; width: calc(74px * var(--brand-logo-scale, 1)); height: calc(22px * var(--brand-logo-scale, 1)); background: var(--color-primary-100); -webkit-mask: var(--to-filter-brand-mask) center / contain no-repeat; mask: var(--to-filter-brand-mask) center / contain no-repeat; } #snackys-tpl .to-plp-filter__chip--compatible > span { color: var(--color-primary-100); } #snackys-tpl .to-plp-filter__options { display: flex; min-width: 0; align-items: center; gap: var(--spacing-1); } #snackys-tpl .to-plp-filter__chip { display: inline-flex; flex: 0 0 auto; height: 38px; padding: 0 15px; align-items: center; justify-content: center; gap: 8px; border: 2px solid var(--color-tertiary-50); border-radius: var(--border-radius-sm); background: var(--color-white); color: var(--color-primary-100) !important; font-size: 15px; font-weight: var(--font-weight-regular); line-height: 1; text-decoration: none !important; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; } #snackys-tpl .to-plp-filter__chip:hover, #snackys-tpl .to-plp-filter__chip:focus-visible, #snackys-tpl .to-plp-filter__chip.active { border-color: var(--color-primary-100); background: var(--color-bg-surface); box-shadow: 0 0 0 1px var(--color-primary-100); } #snackys-tpl .to-plp-filter__chip--type { min-width: 118px; } #snackys-tpl .to-plp-filter__chip--compatible { order: 1; } #snackys-tpl .to-plp-filter__chip--original { order: 2; } #snackys-tpl .to-plp-filter__chip--type img { display: block; width: auto; max-width: calc(74px * var(--brand-logo-scale, 1)); height: calc(22px * var(--brand-logo-scale, 1)); margin-left: 2px; object-fit: contain; } #snackys-tpl .to-plp-filter__chip--color { min-width: 0; height: auto; min-height: 38px; padding: var(--spacing-1) var(--spacing-2); font-size: var(--font-size-normal); } #snackys-tpl .to-plp-filter__chip--set { min-width: 0; padding-right: var(--spacing-2); padding-left: var(--spacing-2); gap: var(--spacing-2); order: 1; } #snackys-tpl .to-plp-filter__chip--set strong { color: var(--color-primary-100); font-size: var(--font-size-normal); font-weight: var(--font-weight-bold); line-height: 1; } #snackys-tpl .to-plp-filter__chip--black { order: 2; } #snackys-tpl .to-plp-filter__chip--cyan { order: 3; } #snackys-tpl .to-plp-filter__chip--magenta { order: 4; } #snackys-tpl .to-plp-filter__chip--yellow { order: 5; } #snackys-tpl .to-plp-filter__swatch { display: flex; align-items: center; justify-content: center; gap: var(--spacing-1); } #snackys-tpl .to-plp-filter__swatch.is-group { gap: 0; } #snackys-tpl .to-plp-filter__swatch.is-group i + i { margin-left: -6px; } #snackys-tpl .to-plp-filter__swatch.is-group i.is-black { z-index: 4; } #snackys-tpl .to-plp-filter__swatch.is-group i.is-cyan { z-index: 3; } #snackys-tpl .to-plp-filter__swatch.is-group i.is-magenta { z-index: 2; } #snackys-tpl .to-plp-filter__swatch.is-group i.is-yellow { z-index: 1; } #snackys-tpl .to-plp-filter__swatch i { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 22px; min-width: 22px; height: 22px; padding: 0; border-radius: var(--border-radius-xs); color: var(--color-white); font-size: var(--font-size-normal); font-style: normal; font-weight: var(--font-weight-bold); line-height: 1; } #snackys-tpl .to-plp-filter__swatch i.is-black { background: var(--color-ink-black); } #snackys-tpl .to-plp-filter__swatch i.is-cyan { background: var(--color-ink-cyan); } #snackys-tpl .to-plp-filter__swatch i.is-magenta { background: var(--color-ink-magenta); } #snackys-tpl .to-plp-filter__swatch i.is-yellow { background: var(--color-ink-yellow); } #snackys-tpl .to-plp-filter__group--sorting { margin-left: auto; justify-content: flex-end; } #snackys-tpl .to-plp-filter__sorting { margin: 0; } #snackys-tpl .to-plp-filter__sort-toggle { display: inline-flex; min-height: 42px; padding: 0 2px; align-items: center; gap: 14px; color: var(--color-primary-100) !important; font-size: 16px; line-height: 1; text-decoration: none !important; } #snackys-tpl .to-plp-filter__sort-toggle strong { color: var(--color-primary-100) !important; font-weight: var(--font-weight-bold); } #snackys-tpl .to-plp-filter__sorting.open .to-plp-filter__chevron { transform: rotate(180deg); } #snackys-tpl .to-plp-filter__sorting .dropdown-menu { right: 0; left: auto; min-width: 190px; padding: 8px 0; border: 1px solid var(--color-tertiary-50); background: var(--color-white); box-shadow: var(--shadow-md); } #snackys-tpl .to-plp-filter__sorting .dropdown-menu a { color: var(--color-primary-100); font-size: 14px; } #snackys-tpl .to-plp-filter__sorting .dropdown-menu .active > a, #snackys-tpl .to-plp-filter__sorting .dropdown-menu a:hover, #snackys-tpl .to-plp-filter__sorting .dropdown-menu a:focus { background: var(--color-tertiary-50); color: var(--color-primary-100); } #snackys-tpl .to-plp-filter > .active-filters { margin-top: 12px; } @media (max-width: 1350px) { #snackys-tpl .to-plp-filter__group { padding-right: 16px; padding-left: 16px; gap: 12px; } #snackys-tpl .to-plp-filter__options { gap: var(--spacing-1); } #snackys-tpl .to-plp-filter__chip { padding-right: 12px; padding-left: 12px; } } @media (max-width: 1199px) { #snackys-tpl .to-plp-filter { overflow-x: auto; } } #snackys-tpl #ftr-tg > .btn { border: 1px solid var(--color-tertiary-50); background: var(--color-white); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; } #snackys-tpl #result-wrapper { padding-bottom: 3rem; } #snackys-tpl body[data-page="2"] #result-wrapper { padding-bottom: 0; } @media (max-width: 991px) { #snackys-tpl body.show-sidebar #sp-l { z-index: 80; } } #snackys-tpl #sp-l .caret, #snackys-tpl #ftr-tp .caret { display: inline-block; width: 20px; height: 20px; margin: 0 0 0 auto; border: 0; vertical-align: middle; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .18s ease; } #snackys-tpl #sp-l .panel.open > .panel-heading .caret, #snackys-tpl #ftr-tp .dropdown.open > .dropdown-toggle > .caret { transform: rotate(180deg); } /**/ #snackys-tpl #ftr-tg.to-plp-filter-floating { position: fixed; top: auto; right: auto; bottom: calc(var(--spacing-4) + env(safe-area-inset-bottom, 0px)); left: 50%; z-index: 6; display: flex; justify-content: center; width: max-content; max-width: calc(100% - 2 * var(--spacing-4)); margin: 0; transform: translateX(-50%); }