#category-bodytext {} #category-wrapper > #category-subcategories { /*display: none;*/ overflow: hidden; } .category-subcategories-inner { max-height: 77px; position: relative; } .category-subcategories-inner.catwithimage { max-height: none; padding: .5em; } .category-subcategories-inner.multilevel { visibility: hidden; height: 41px; } #category-subcategories { margin-bottom: 30px; } #category-wrapper .category-subcategories-inner.onelevel ul {position: relative; display: flex; align-items: stretch; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; /*overflow: hidden; */ padding: 8px 0; gap: 10px; } #category-wrapper .category-subcategories-inner.onelevel:before, #category-wrapper .category-subcategories-inner.onelevel:after { width: 8%; pointer-events: none; } #category-wrapper .category-subcategories-inner.onelevel:after { background: linear-gradient(270deg,#fff,hsla(0,0%,100%,0)); right: 0;} #category-wrapper .category-subcategories-inner.onelevel:after, #category-wrapper .category-subcategories-inner.onelevel:before { content: ""; display: block; height: 100%; width: 0; max-width: 50px; position: absolute; top: 0; z-index: 1; transition: width .25s ease; } #category-wrapper .category-subcategories-inner.onelevel:before { left: 0; background: linear-gradient(90deg,#fff,hsla(0,0%,100%,0)); } #category-wrapper .category-subcategories-inner.onelevel:before, #category-wrapper .category-subcategories-inner.onelevel:after { width: 8%; } #category-wrapper .category-subcategories-inner.catwithimage.onelevel ul { flex-wrap: wrap; } #category-wrapper .category-subcategories-inner.catwithimage.onelevel:before, #category-wrapper .category-subcategories-inner.catwithimage.onelevel:after { display: none;} #category-wrapper .category-subcategories-inner.onelevel li { flex: none; scroll-snap-align: start; /*width: 50%;*/ } #category-wrapper .category-subcategories-inner.onelevel.catwithimage li { flex: 1 0 47%; } #category-wrapper .category-subcategories-inner.onelevel.catwithimage .catImage img { display: block; } #category-wrapper.leftnav .category-subcategories-inner.onelevel li { /*width: 25%;*/ width: auto; } #category-wrapper.leftnav .category-subcategories-inner.onelevel li .btnToggle { display: none; } #category-wrapper.leftnav .category-subcategories-inner.onelevel li .subhidden { display: none; } #category-wrapper.leftnav .category-subcategories-inner.onelevel li h2 { padding: 0; font-size: 1em; font-weight: normal; } #category-wrapper.leftnav .category-subcategories-inner.onelevel li h2:after { content: "..."; } #category-wrapper.leftnav #category-subcategories h3 { display: none; } #informationPage #category-wrapper.leftnav #category-subcategories h3 {} #category-wrapper.leftnav #category-subcategories h3 { background-color: #565656; padding: 15px; color: #fff; } #category-wrapper.leftnav #category-subcategories h3 .headerback { display: inline-flex; vertical-align: bottom; margin-right: 5px; margin-left: -6px; } #category-wrapper.leftnav #category-subcategories h3 .headerback:hover svg, #category-wrapper.leftnav #category-subcategories h3 .headerback:focus-visible svg { fill: #fff; } #category-wrapper.leftnav #category-subcategories h3 svg { width: 29px; fill: #b2b2b2; border-right: 1px solid #9d9d9d; padding-right: 8px; } #category-wrapper .category-subcategories-inner.onelevel a { padding: 3px 20px; font-weight: 500; min-height: 44px; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: center; border-radius: var(--border-radius-small-tag-2); background-color: #fff; border: 2px solid #0083ad; transition: all .2s ease-in-out;} #category-wrapper .category-subcategories-inner.onelevel a:hover, #category-wrapper .category-subcategories-inner.onelevel a:focus-visible { background-color: #eee; } #category-wrapper .category-subcategories-inner.onelevel a#activesub { isolation: isolate; color: #fff; position: relative; border-color: #0083ad; } #category-wrapper .category-subcategories-inner.onelevel.catwithimage a#activesub .head { background-color: #333; border-radius: 20px; padding: 5px 11px; } #category-wrapper .category-subcategories-inner.onelevel a#activesub img { mix-blend-mode: normal; } #category-wrapper .category-subcategories-inner.onelevel a#activesub:after { top: 100%; left: 50%; content: ""; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(59, 151, 216, 0); border-top-color: var(--button-alternative-color); border-width: 8px; margin-left: -8px; } #category-wrapper .category-subcategories-inner.onelevel a .head { display: flex; align-items: center; height: 100%; } #category-wrapper .category-subcategories-inner.onelevel a:focus-visible { outline: var(--default-focus-visible-outline); } #category-wrapper .category-subcategories-inner.onelevel > :not(.catwithimage) a#activesub { background-color: #00759B; color: #fff; } #category-wrapper .category-subcategories-inner.onelevel .catwithimage a { padding: .5em; background-color: transparent; border: 0 /*1px solid var(--border-color-to-wrapper-bg)*/; } #category-wrapper .category-subcategories-inner.onelevel .catwithimage .catImage { isolation: isolate; height: 200px; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; min-height: 184px; } #category-wrapper .category-subcategories-inner.onelevel .catwithimage .catImage img { max-height: 200px; /*height: 100%;*/ width: auto; /*mix-blend-mode: multiply;*/ } #category-wrapper .category-subcategories-inner.onelevel .catwithimage .head { margin-top: 5px; font-size: .9em; font-weight: 600; background-color: #00759B; color: #fff; padding: .5em 1.5em; border-radius: 3em; text-align: center; } #category-wrapper .category-subcategories-inner.multilevel ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); grid-gap: 10px; } #category-wrapper.leftnav .category-subcategories-inner.multilevel ul { grid-gap: 2px; } #category-wrapper .category-subcategories-inner.multilevel li { display: flex; flex-direction: column; width: auto; height: auto; margin: 0;position: relative; transition: all .2s ease-in-out; } #category-wrapper .category-subcategories-inner.multilevel li.toplevel { } #category-wrapper .category-subcategories-inner.multilevel li.toplevel a { position: relative; } #category-wrapper .category-subcategories-inner.multilevel li.toplevel a:hover h2, #category-wrapper .category-subcategories-inner.multilevel li.toplevel a:focus h2 {color: #1a74e9;} #category-wrapper .category-subcategories-inner.multilevel li.toplevel ul li { padding-left: 15px; } #category-wrapper .category-subcategories-inner.multilevel li.toplevel ul li a { padding: 10px 0; } #category-wrapper .category-subcategories-inner.multilevel li.toplevel h2, #category-wrapper .category-subcategories-inner.multilevel li.toplevel .alone { font-size: 1em; text-align: left; background-color: #fff; padding: 15px;} #category-wrapper .category-subcategories-inner.multilevel li.toplevel a[aria-current="page"] .alone { background-color: #000; color: #fff; position: relative; } #category-wrapper .category-subcategories-inner.multilevel li.toplevel a[aria-current="page"] .alone:after { right: 0; top: 50%; content: ""; height: 0; width: 0; position: absolute;pointer-events: none; border-color: rgba(235, 235, 235, 0); border-left-color: #f7f7f7; border-width: 10px; margin-top: -10px; transform: rotate(180deg); } #category-wrapper .category-subcategories-inner.multilevel li.toplevel .expanel { background-color: #fff; max-height: 0; overflow: hidden; } #category-wrapper .category-subcategories-inner.multilevel li.toplevel .expanelexpanded { height: 100%; background-color: #fff; } #category-wrapper .category-subcategories-inner.multilevel li.toplevel .expanelexpanded ul { padding: 0 15px 15px 15px; } #category-wrapper .category-subcategories-inner.multilevel li.toplevel .expanelexpanded ul a { color: #1387a9; } #category-wrapper .category-subcategories-inner.multilevel li.toplevel .btnToggle { position: absolute; top: 50%; right: 5px; transform: translate3d(0,-50%,0); } #category-wrapper .category-subcategories-inner.multilevel li.toplevel.catwithimage .btnToggle { top: auto; bottom: -17px; } #category-wrapper .category-subcategories-inner.multilevel li.toplevel button { border: 0; cursor: pointer; width: 42px; height: 42px; background-color: #f6f6f6; transition: all 0.3s ease; border-radius: 100%; } #category-wrapper .category-subcategories-inner.multilevel li.toplevel button:before, #category-wrapper .category-subcategories-inner.multilevel li.toplevel button:after { content: ""; display: block; width: 9px; height: 1px; background: #333; position: absolute; top: 50%; transition: transform .5s; transform: translate3d(0,-50%,0);; } #category-wrapper .category-subcategories-inner.multilevel li.toplevel button:before { right: 18px; border-top-left-radius: 10px; border-bottom-left-radius: 10px; transform: rotate(45deg); } #category-wrapper .category-subcategories-inner.multilevel li.toplevel button:after { right: 12px; transform: rotate(-45deg); } #category-wrapper .category-subcategories-inner.multilevel li.toplevel button:hover, #category-wrapper .category-subcategories-inner.multilevel li.toplevel button:focus-visible { background-color: #f7f7f7; } #category-wrapper .category-subcategories-inner.multilevel li.toplevel button[aria-expanded=true]:before { transform: rotate(-45deg); } #category-wrapper .category-subcategories-inner.multilevel li.toplevel button[aria-expanded=true]:after { transform: rotate(45deg); } #category-wrapper .category-subcategories-inner.multilevel li.toplevel button span { display: none; } #category-wrapper .category-subcategories-inner.multilevel li.toplevel button:focus { outline: none; } #category-wrapper .category-subcategories-inner.multilevel li.toplevel button:focus-visible { outline: 1px solid #000; } #category-wrapper .category-subcategories-inner.multilevel li.toplevel h2 .toggleicon { position: absolute; top: 17px; right: 17px; pointer-events: none; } #category-wrapper .category-subcategories-inner.multilevel li.toplevel .subhidden{ transition: max-height 0.3s ease-in; max-height: 0; overflow: hidden; } #category-wrapper .category-subcategories-inner.multilevel li.toplevel .subhidden.subactive, #category-wrapper .category-subcategories-inner.multilevel li.toplevel .subhidden.subactive .expanel { transition: max-height 0.3s ease-in; max-height: 9999px; } #category-wrapper .category-subcategories-inner.multilevel li.toplevel .subhidden.subactive .expanel { padding: 0 15px 15px 15px; } #category-wrapper .category-subcategories-inner.multilevel li.toplevel .catImage { justify-content: center; display: flex;height: 200px; margin-bottom: 20px; } #category-wrapper .category-subcategories-inner.multilevel li.toplevel .catImage img { max-height: 200px; width: auto;} #category-subcategories-inner .inner { margin-bottom: 25px; /*display: none;*/ } #category-subcategories-inner .inner ul { display: flex; align-items: stretch; /*flex-wrap: nowrap;*/ overflow-x: auto; scroll-snap-type: x mandatory; background-image: linear-gradient(to right, #f7f7f7, #f7f7f7), linear-gradient(to right, #f7f7f7, #f7f7f7), linear-gradient(to right, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0)); background-position: left center, right center, left center, right center; background-repeat: no-repeat; background-size: 20px 100%, 20px 100%, 10px 100%, 10px 100%; background-attachment: local, local, scroll, scroll; } #category-subcategories-inner .inner ul.catwithimage { flex-wrap: wrap; justify-content: flex-start; background-image: none; gap: 10px; padding: 0 10px; } #category-subcategories-inner .inner li { flex: none; margin-right: 1%; scroll-snap-align: start; width: 47%; } #category-subcategories-inner .inner a#activesub { background-color: #AF150D; color: #fff; } #category-subcategories-inner .inner .catwithimage a { padding: 10px; transition: all 0.3s cubic-bezier(.25,.8,.25,1); } #category-subcategories-inner .inner .catwithimage a:hover, #category-subcategories-inner .inner .catwithimage a:focus-visible { box-shadow: 0 6px 10px rgba(0,0,0,.25), 0 1px 4px rgba(0,0,0,.22); } #category-subcategories-inner .inner a { padding: 6px 20px; display: flex; flex-direction: column; align-items: center; height: 100%; /*justify-content: center;*/ justify-content: flex-start; border-radius: 4px; border: 1px solid #ccc; background-color: #fff; } #category-subcategories-inner .inner .catwithimage .head { margin-top: 5px; font-size: 1em; font-weight: 600; overflow-wrap: break-word; word-break: break-word; } #category-subcategories-inner .inner .catwithimage .catImage { height: 100px; margin-bottom: 20px; display: flex; align-items: center;justify-content: center; } #category-subcategories-inner .inner .catwithimage .catImage img { max-height: 100px;width: auto; } .category-listing .category-listing-image { display: none; } .bodytext .category-listing-image { float: left; isolation: isolate; background-color: #f5f3f1; display: flex; align-items: center; justify-content: center; margin: 0 20px 40px 0; padding: 1em; border-radius: 20px; } .bodytext .category-listing-image img { max-height: 100px; mix-blend-mode: multiply;} @media (min-width: 768px) { /* Special from mobile, to avoid flicker when showing/transforming menu in mobile ... */ .category-subcategories-inner.multilevel { visibility: visible; height: auto; /*animation: fadein 1s;*/ } #category-subcategories-inner .inner { display: block; } #category-subcategories-inner .inner ul { flex-wrap: wrap; background: none; } #category-subcategories-inner .inner li { margin-bottom: 1em; width: 30%; } #category-subcategories-inner .inner li { width: 19%; } #category-subcategories-inner .inner ul.catwithimage { justify-content: flex-start; gap: 0; padding: 0; } .category-listing { display: flex; align-items: center; } .category-listing .category-listing-image { display: block; margin-right: 0; margin-left: auto; isolation: isolate; } .category-listing .category-listing-image img { max-height: 150px; width: auto; mix-blend-mode: multiply;} #category-wrapper.leftnav #category-subcategories h3 { display: block; } .category-subcategories-inner { max-height: none; } #category-wrapper > #category-subcategories { display: block; } #category-wrapper .category-subcategories-inner.onelevel li { width: auto; } #category-wrapper.leftnav .category-subcategories-inner.onelevel li { width: 100%; } #category-wrapper .category-subcategories-inner.onelevel ul { flex-wrap: wrap; background: none; } #category-wrapper .category-subcategories-inner.onelevel li { } #category-subcategories a svg { width: 20px; height: 20px; } #category-wrapper .category-subcategories-inner.onelevel:before, #category-wrapper .category-subcategories-inner.onelevel:after { display: none; } #category-wrapper .category-subcategories-inner.onelevel a#activesub:after { display: none; } #category-wrapper .category-subcategories-inner.onelevel.catwithimage li { max-width: 24%; } #category-wrapper.leftnav { display: flex; } #category-wrapper.leftnav #category-subcategories { width: 320px; margin-right: 25px; /*background-color: #f9f9f9;*/ background: rgba(250,250,250,1); background: -moz-linear-gradient(top, rgba(250,250,250,1) 0%, rgba(246,246,246,1) 53%, rgba(255,255,255,1) 100%); background: -webkit-linear-gradient(top, rgba(250,250,250,1) 0%, rgba(246,246,246,1) 53%, rgba(255,255,255,1) 100%); background: -o-linear-gradient(top, rgba(250,250,250,1) 0%, rgba(246,246,246,1) 53%, rgba(255,255,255,1) 100%); background: -ms-linear-gradient(top, rgba(250,250,250,1) 0%, rgba(246,246,246,1) 53%, rgba(255,255,255,1) 100%); background: linear-gradient(to bottom, rgba(250,250,250,1) 0%, rgba(246,246,246,1) 53%, rgba(255,255,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#fff', GradientType=0 ); } #category-wrapper.leftnav #contentWrapper { flex: 1; } #category-wrapper.leftnav .category-subcategories-inner.onelevel ul { display: flex; flex-wrap: wrap; flex-direction: column; gap: 0;} #category-wrapper.leftnav .category-subcategories-inner.onelevel li { display: flex; border-bottom: 1px solid #ccc; margin: 0; } #category-wrapper.leftnav .category-subcategories-inner.onelevel li a { padding: 12px 10px; width: 100%; border: 0; border-radius: 0; align-items: flex-start; background-color: transparent; } #category-wrapper.leftnav .category-subcategories-inner.onelevel a#activesub { background-color: #dedede; color: #AF150D; } #category-wrapper.leftnav .category-subcategories-inner.multilevel ul { grid-gap: 2px; padding: 5px; } #category-wrapper.leftnav .category-subcategories-inner.multilevel li.sublevel { padding-left: 15px;} #category-wrapper.leftnav .category-subcategories-inner.multilevel li.sublevel a { padding: 5px 0; } #category-wrapper.leftnav .productListContainer { display: grid; grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); grid-gap: 10px; } #category-wrapper.leftnav #axFilter { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); padding: 0; } #category-wrapper.leftnav .productListContainer { grid-template-columns: repeat(auto-fill, minmax(245px, 1fr)); } } /* Category and filters */ @keyframes easyfade { 0% { opacity: 0; } 100% { opacity: 0.3; } } @keyframes slide-down { 0% { opacity: 0; transform: translate3d(0,-40%,0);; } 100% { opacity: 0.9; transform: translate3d(0,0,0);; } } @keyframes slide-up { 0% { transform: translate3d(0,-40%,0);; } 100% { transform:translate3d(0,0,0); } } /*body.filteropen { overflow: hidden; position: relative; width: calc(100%); }*/ #axFilterMask.open { opacity: .3; width: 100%; height: 100%; animation: easyfade 0.3s cubic-bezier(.59,.12,.64,.58); transition: none; z-index: 111; } #axFilterMask { background: #000; opacity: 0; width: 0; height: 0; position: fixed; top: 0; transition: opacity 0.3s cubic-bezier(.59,.12,.64,.58), width 0s ease 0.3s, height 0s ease 0.3s; } #axFilterInner .fadeout { display: none; z-index: 1; height: 6em; left: 0; position: absolute; bottom: 0; width: 100%; background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255)); background-image: linear-gradient(rgba(255, 255, 255, 0) 0%,rgba(247, 247, 247, 1) 77%); } #axFilterInner.collapsed { position: relative; max-height: 110px; overflow: hidden; transition: max-height 0.5s cubic-bezier(0, 1, 0, 1); margin-bottom: 30px; padding-bottom: 45px; } #axFilterInner.collapsed.expand { max-height: 9999px; transition: max-height 0.5s cubic-bezier(0, 1, 0, 1); overflow: visible;} #axFilterInner .cpToggleFilter { display: none; z-index: 1; position: absolute; left: 50%; bottom: 5px; transform: translate3d(-50%,0,0);; } #axFilterInner .cpToggleFilter button { font-weight: 700; border: 0; background-color: #000; padding: 10px 15px; border-radius: 20px; align-items: center; width: max-content; cursor: pointer; color: #fff; transition: background-color .3s ease-in; } #axFilterInner .cpToggleFilter button:hover, #axFilterInner .cpToggleFilter button:focus { background-color: #000; outline: none;} #axFilterInner .cpToggleFilter button:focus-visible { outline: 1px solid #000;} .axmobilebuttons { display: block; padding: 5px; box-shadow: 2px 1px 3px 2px #f1f1f1; } #btnExitFilterWrapper { height: 70px; background-color: #fff; border-top: 1px solid #d3d3d3; bottom: 0; position: absolute; width: 100%; text-align: center; z-index: 10;} #btnExitFilterWrapper button { width: 100%; z-index: 10; height: 100%; border-radius: 0; } #btnAxCategoriesClose, #btnAxCategoriesClose:hover i, #btnAxCategoriesClose:focus i, #btnAxFilterShow { border: 0; width: 90%; margin: 0 auto;position: relative; transition: background-color 0.3s ease; background-color: var(--button-alternative-color); padding: 13px 0; color: #fff; font-weight: 600; display: flex; align-items: center; justify-content: center; border-radius: 40px; } #btnAxFilterShow:focus, #btnAxFilterShow:hover{ background-color: var(--button-alternative-color-hover); } #btnAxFilterShow svg { width: 20px; height: 20px; fill: #fff; margin-right: 10px; } #btnAxFilterShow:focus, #btnAxCategoriesShow:focus { outline: 2px solid #000; outline-offset: 2px; } #btnAxFilterShow.fullwidth, #btnAxCategoriesShow.fullwidth, #btnAxFilterShow.fixed.fullwidth, #btnAxCategoriesShow.fixed.fullwidth{ width: 100%; } #btnAxCategoriesShow i, #btnAxFilterShow i { color: #555555; padding-right: 4px; font-size: 19px; } #btnAxFilterShow.fixed i, #btnAxCategoriesShow.fixed i { color: #a7a7a7; } #btnAxFilterShow.fixed, #btnAxCategoriesShow.fixed { animation:slide-down 0.4s; position: fixed; z-index: 1111; right: 0; transform: translateZ(0); top:60px; /* top shuld be same as #menuTop height and the jumpfix class */ width: 50%; border-radius: 0; margin: 0; background-color: #464646; color: #fff; font-weight: normal; } #btnAxCategoriesShow.fixed { display: block; border-right: 1px solid #383838; left: 0; right: auto; } .jumpfix { height: 70px; } #filtercount { background-color: #333; color: #fff; width: 20px; height: 20px; border-radius: 100%; font-size: 13px; display: none; margin-left: 10px; } #btnAxFilterShow.fixed #filtercount { position: absolute; top: 14px; right: 18%; background-color: #333; width: 20px; height: 20px; border-radius: 100%; font-size: 13px; line-height: 20px; display: none; } #filtercount.active { display: flex; align-items: center; justify-content: center; } #axcategories { display: none; } body.mobile #axcategories { display: block; margin: 0; padding: 0; transform: translate3d(-114%,0,0); max-width:90%; min-width:90%; position: fixed; top: 0; left: 0; background-color: #fff; height: 100%; opacity: 0; z-index: 4111; transition: all 0.45s ease; visibility: hidden; } body.mobile #axcategories, body.mobile #axcategories > * { transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86), opacity 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86), box-shaow 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86); } body.mobile #axcategories.active { max-width: 90%; min-width: 90%; opacity: 1; transform: translate3d(0,0,0); box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15); visibility: visible; } body.mobile #axcategories .inner{ height: 100%; overflow-y: auto; padding: 0 0 70px; } body.mobile #axcategories h2 { display: block; background-color: #f7f7f7; height: 60px; line-height: 42px; text-align: left; border-bottom: 0; font-size: .9em;} body.mobile #axcategories h2 i { display: inline-block; padding-left: 6px; } body.mobile #axcategories h2.styled { font-size: 1em; background: #ebebeb; color: var(--default-text-color); font-weight: 600; border-bottom: 1px solid #a1a1a1 !important; } body.mobile #axcategories ul { list-style-type: none; } body.mobile #axcategories ul li { display: flex; color: var(--default-text-color); width: 100%; outline: none; cursor: pointer; text-align: left; margin: 0; border-bottom: 1px solid #d1d1d1; overflow: hidden; text-overflow: ellipsis; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; font-size: 16px; background-color: transparent; padding: 10px 28px 10px 15px; } body.mobile #axcategories ul li a { margin-left: 10px; display: block; width: 100%; } body.mobile #axcategories ul li.maincat { background-color: #fff; } body.mobile #axcategories ul li.maincat i { margin-right: 5px; padding-left: 4px; } body.mobile #axcategories ul li span.check { display: flex; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: relative; width: 20px; height: 20px; border-radius: 100%; border: 2px solid rgba(0, 0, 0, .3); cursor: pointer; overflow: hidden; color: #fff; text-align: center; -webkit-transition: background .25s linear; transition: background .25s linear; background-color: rgba(0, 0, 0, 0); } body.mobile #axcategories ul li.current span.check { border-color: var(--button-default-color); background: #009300; transition: background .25s linear; -webkit-transition: background .25s linear; } body.mobile #axcategories ul li.current span::before { content: ""; box-sizing: content-box; position: absolute; top: 2px; left: 5px; width: 3px; height: 8px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg); transition: opacity .25s linear; -webkit-transition: opacity .25s linear; opacity: 1; } body.mobile #axcategories ul li.check::before { display: inline-block; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: relative; width: 20px; height: 20px; border-radius: 7px; border: 2px solid rgba(0,0,0,.3); cursor: pointer; overflow: hidden; color: #fff; text-align: center; margin: 0; -webkit-transition: background .25s linear; transition: background .25s linear; } #attributesWrapper {} #attributes { position: fixed; top: 0; right: 0; } #attributes { margin: 10px 0; display: block; } #attributes h2 { display: none; } body.mobile #axFilter { grid-gap: 0; padding: 0 0 75px; } body.mobile #attributes { visibility: hidden; margin: 0; padding: 0; background-color: #fff; height: 100%; z-index: 200; transition: all 0.45s ease; position: fixed; top: 0;bottom: 0; right:0; transform: translate3d(85vw,0,0); } body.mobile #attributes .inner{ height: 100%; padding: 0 0 70px; overscroll-behavior-y: contain; overflow-y: auto; } body.mobile #attributes h2 { display: block; background-color: #ebebeb; height: 60px; line-height: 42px; text-align: left; border-bottom: 0; font-size: .9em;} body.mobile #attributes h2 i { display: inline-block; } body.mobile #attributes h2.styled { font-size: 1em; color: var(--default-text-color); font-weight: 600; border-bottom: 1px solid #a1a1a1 !important; } body.mobile #active_filters_clones { display: none; } body.mobile #active_filters_clones.active { display: flex; flex-wrap: wrap; justify-content: flex-start; margin-top: 10px; padding: 0 15px} body.mobile .combobox-container { width: 100%; margin-bottom: 0; grid-column: 1; padding: 0; background-color: transparent; } body.mobile .combobox-container label { font-size: 16px; border-radius: 0; border-top-width: 1px; border-right-width: 1px; border-left-width: 1px; border-bottom-width: 1px; background-color: transparent; padding: 16px 28px 2px 0; } body.mobile .combobox-container.slider-container { font-size: 1em; padding: 15px 15px 25px 15px; border-bottom: 1px solid #6b6b6b; } body.mobile .combobox-container.slider-container label { display: flex; justify-content: flex-start; margin-bottom: 30px;} body.mobile .combobox-container.slider-container input.sliderFirst, body.mobile .combobox-container.slider-container input.sliderSecond { width: 50px; font-size: 10px; pointer-events: none; } body.mobile .combobox .listbox { border: 0; position: relative; border-radius: 0; border-bottom: 1px solid gainsboro; background-color: transparent; padding: 10px; max-height: none; /*position: fixed; height: 100%; max-height: none; top: 61px; border: 0; overflow-y: auto; width: 100%; padding-top: 5px; padding-bottom: 130px;*/ } body.mobile .combobox li { padding-left: 15px; font-size:16px;} body.mobile .combobox input { font-size: 16px; border-radius: 0; background-color: transparent; padding: 0 15px 10px; } body.mobile .combobox input:focus { outline:none !important;} body.mobile .combobox input:focus-visible { outline:1px solid #000;} body.mobile .combobox .role_combobox[aria-expanded=true] {border-bottom: 0;} body.mobile .combobox button.toggle { height: 74px; border: 0; border-bottom: 1px solid #6b6b6b; } button.toggle.chevron.bottom:focus-visible { outline: var(--default-focus-visible-outline); } body.mobile .combobox .active_options { top:28px; right: 65px; } body.mobile .chevron.bottom:before { right: 25px; left: auto; top: 50%; transform: translateY(-50%) rotate(135deg);} body.mobile #axFilter .resetFilter { margin: 5px 5px 0 0; flex-basis: 100%;} body.mobile #filterheader { padding-left: 12px; } body.mobile #filtername { display: none; border-left: 1px solid #ccc; margin-left: 8px; padding-left: 8px; color: #e46400; } body.mobile #active_filters_clones .head { display: block;padding-left: 15px; } body.mobile #active_filters_clones ul#li_clones { margin-top: 5px; overflow-x: auto; justify-content: flex-start; flex-wrap: nowrap;} body.mobile #active_filters_clones li { margin: 5px 5px 5px 0; } body.mobile #axFilter .resetFilter a, body.mobile #axFilter .resetFilter button { margin-left: 0; margin-top: 20px; justify-content: center;} #axFilterInner { display: grid; grid-template-columns: repeat(auto-fill, minmax(100%, 1fr)); /*background-color: #f3f3f3; padding: 10px;*/ } @media (min-width: 768px) { /*#catFilters { background-color: #f8f8f8; padding: 1em; }*/ #attributesWrapper { /* background-color: #f0f0f0; border-radius: 13px; padding: .5em 1em; */ } #attributes { position: relative; top: auto; right: auto; } #filterheader { display: none; } #btnExitFilterWrapper { display: none; } #btnAxFilterShow { display: none; visibility: hidden; } #btnAxCategoriesShow { display: none !important; visibility: hidden; } #btnAxFilterClose { display: none; visibility: hidden; } .axmobilebuttons { display: none; visibility: hidden; } #axFilterInner { grid-gap: 10px; } #axFilterInner { grid-template-columns: repeat(auto-fill, minmax(307px, 1fr)); } .combobox button.toggle { border-radius: 10px; } } .combobox-container.slider-container {} .combobox-container.slider-container label { display: flex; justify-content: center; margin-bottom: 17px; margin-top: -12px; font-size: .9em; } .combobox-container { display: flex; /*background-color: #eaeaea;*/ /*padding: 15px;*/ flex-direction: column; transition: background-color .3s } .combobox-container label { font-size: .8em; margin: 0 0 8px; font-weight: normal; } .combobox-container:hover { /*background-color: #e0e0e0;*/ } .combobox-container input:focus { box-shadow: none; margin: 0; } .combobox { width: 100%; display: inline-block; position: relative; } .combobox input[type=text] { border-radius: var(--border-radius-dropdown); color: var(--default-text-color); width: 100%; outline: none; cursor: pointer; padding: 8px 28px 8px 10px; margin: 0; border: 1px solid #6b6b6b; overflow: hidden; text-overflow: ellipsis; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .combobox input[readonly] { background-color: #fff; } .combobox input:focus { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;border: 1px solid #d1d1d1; background-color: #fff !important; } .combobox input.selections { color: var(--default-text-color); background-color: #fff; transition: none; } .combobox .role_combobox[aria-expanded=false] { transition: none; } .combobox .role_combobox[aria-expanded=true] { border-bottom-left-radius: 0; border-bottom-right-radius: 0; transition: none; border-bottom-color: #ccc !important;} .combobox .role_combobox:focus, .combobox .role_combobox:hover{ -webkit-tap-highlight-color: rgba(255, 255, 255, 0);} .combobox button.toggle { cursor: pointer; background: #fff; width: 100%; padding: 10px; display: flex; position: relative; align-items: center; border: 1px solid #6b6b6b; } .combobox button.toggle .act { margin-left: 10px; font-size: .8em; color: #6d6d6d; } .combobox button.toggle:focus { outline: none; box-shadow: none; } .combobox .listbox { display: none; list-style: none; border-radius: 10px; background-color: #fff; font-size: 1em; width: 100%; margin: 0; padding: 10px 0; border: 1px solid #6b6b6b; position: absolute; z-index:3; max-height: var(--dynamic-max-height); overflow-y: auto; border-top:0; } .combobox .listbox:focus { outline: none; } .combobox li { padding: 0 10px; margin: 4px 0; position: relative; cursor: pointer; display: flex; align-items: center; -webkit-box-align: center; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); font-size:.9em; } .combobox li.activedescendant, .combobox li:hover{ background-color: #f3f3f3; color: var(--default-text-color); } .combobox li[aria-selected=true] {color: var(--default-text-color);} .combobox li[aria-selected=true].activedescendant, .combobox li[aria-checked=true] {color: var(--default-text-color);} .combobox li[checked=true].activedescendant {color: #069;} .combobox li span.check { display: flex; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: relative; width: 20px; height: 20px; border-radius: 100%; border: 2px solid rgba(0, 0, 0, .3); cursor: pointer; overflow: hidden; color: #fff; text-align: center; -webkit-transition: background .25s linear; transition: background .25s linear; background-color: rgba(0, 0, 0, 0); } .combobox li span.name { display: flex; /*width: 90%;*/ align-items: center;} .combobox li span.attrRef { margin-right: 0; margin-left: auto; } .combobox li span.attrRef .attrRefInner { width: 25px; height: 25px; display: block; transition: all .3s ease; } .combobox li span.attrRef .attrRefInner.hex { border-radius: 100%; } .combobox li span.attrRef .attrRefInner.url { background-size: contain; background-repeat: no-repeat; } .combobox li[aria-checked=true] span.check{ border-color: #000; background: #000; transition: background .25s linear; -webkit-transition: background .25s linear; } .combobox li.activedescendant[aria-checked=false] span.check, .combobox li[aria-checked=false]:hover span.check{ border-color: #000; background: #fff; transition: background .25s linear; -webkit-transition: background .25s linear; } .combobox li span.check::before { display: inline-block; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: relative; width: 20px; height: 20px; border-radius: 7px; border: 2px solid rgba(0,0,0,.3); cursor: pointer; overflow: hidden; color: #fff; text-align: center; margin: 0; -webkit-transition: background .25s linear; transition: background .25s linear; } .combobox li[aria-checked=true] span.check::before{ content: ""; box-sizing: content-box; position: absolute; top: 2px; left: 5px; width: 3px; height: 8px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg); transition: opacity .25s linear; -webkit-transition: opacity .25s linear; opacity: 1; } .combobox input.dropdown-search { display: block; border: 1px solid #e6e6e6; width: 94%; padding: 5px 10px 5px 5px; font-size: .9em; font-style: italic; border-radius: 7px; } .combobox .c_selections { display: none; } .combobox .active_options { display: none; z-index: 1; position: absolute; top: -10px; right: -10px; cursor: pointer; background-color: #000; height: 20px; width: 20px; line-height: 19px; border-radius: 100%; text-align: center; font-size: 12px; color: #fff; border: 1px solid #000; } .chevron::before { pointer-events: none; transition: transform 0.2s ease; transform-origin: center center; border-style: solid; border-width: 1px 1px 0 0; content: ""; display: inline-block; height: 0.6em; left: 0.15em; position: relative; top: 0.15em; transform: rotate(-45deg); vertical-align: top; width: 0.6em; } .chevron.right:before { left: 0; transform: rotate(45deg); } .combobox .chevron.bottom:before { top: 12px; transform: rotate(135deg); right: 15px; left: auto; position: absolute; } .chevron.left:before { left: 0.25em; transform: rotate(-135deg); } .chevron.bottom[aria-expanded=true]::before { transform: rotate(-45deg); transition: all 0.2s ease; top: 16px; } #axFilter .resetFilter { /*margin-left: 10px;*/ } #axFilter .resetFilter a, #axFilter .resetFilter button { cursor: pointer; font-size: .9em; border: 1px solid #000; padding: 4px 7px; margin-right: 5px; background-color: #000; border-radius: 18px; color: #fff; display: flex; align-items: center; min-width: 125px; justify-content: center;} #axFilter .resetFilter a:focus, #axFilter .resetFilter a:hover, #axFilter .resetFilter button:focus, #axFilter .resetFilter button:hover{ background-color: #000; text-decoration: none; outline: 2px solid #000; outline-offset: 2px;} #axFilter .resetFilter svg { width: 18px; height: 18px; margin-left: 8px;} .filterOptionInner { width: 100%; display: flex; align-items: center; padding: 4px 0; /*background-color: #fff;*/ } .filterOptionInner label { flex: 1; font-size: 1em; margin: 0; } .filterOptionInner input[type=checkbox]:checked, .filterOptionInner input[type=checkbox]:not(:checked) { position: absolute; left: -9999px; } .filterOptionInner input[type=checkbox]:checked + label, .filterOptionInner input[type=checkbox]:not(:checked) + label { position: relative; cursor: pointer; margin-left: 35px; margin-right: 5px; font-weight: normal; background-color: transparent; padding: 5px 10px; color: #000; } .filterOptionInner input[type=checkbox]:checked + label { /* background-color: var(--activeSelectionColor); color: #fff;*/ } .filterOptionInner input[type=checkbox]:checked + label:before, .filterOptionInner input[type=checkbox]:not(:checked) + label:before { pointer-events: none; content: ''; position: absolute; /*left: 10px;*/ left: -30px; top: 50%; width: 25px; height: 25px; border: 2px solid var(--rdoBorderColor); border-radius: 0; background: var(--rdoBgColor); transform: translateY(-50%); } .filterOptionInner input[type=checkbox]:checked + label:after, .filterOptionInner input[type=checkbox]:not(:checked) + label:after { content: ''; width: 25px; height: 25px; background-color: var(--activeSelectionColor); position: absolute; top: 50%; border-radius: 0; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; /*left: 15px;*/ left: -30px; transform: translateY(-50%); outline: 3px solid #fff; outline-offset: -4px;} .filterOptionInner input[type=checkbox]:not(:checked) + label:after { opacity: 0; } .filterOptionInner input[type=checkbox]:checked + label:after { opacity: 1; /*-webkit-transform: scale(1); transform: scale(1);*/ } .filterOptionInner input[type=checkbox]:not(:checked) + label:hover:after, .filterOptionInner input[type=checkbox]:not(:checked) + label:focus-visible:after { background-color: #ccc; opacity: .8; } .filterOptionInner input[type=checkbox]:hover + label:before, .filterOptionInner input[type=checkbox]:focus-visible + label:before { outline: var(--default-focus-visible-outline); background-color: #ccc; } #active_filters_clones { display: none; grid-column: 1 / span 3; } #active_filters_clones.active { display: flex; grid-column: 1/3; margin: 10px 0 15px; } #active_filters_clones li { margin: 0; display: inline-block; } #active_filters_clones li a, #active_filters_clones li button { color: #fff; cursor: pointer; font-size: .9em; border: 0; padding: 0 0 0 10px; margin-right: 5px; background-color: var(--activeSelectionColor); border-radius: 18px; display: flex; align-items: center; white-space: nowrap; } #active_filters_clones li a, #active_filters_clones li button .name { padding: 5px 10px; } #active_filters_clones li a:focus, #active_filters_clones li a:hover, #active_filters_clones li button:focus, #active_filters_clones li button:hover { background-color: var(--activeSelectionColor-hover); text-decoration: none; outline: 2px solid #000; outline-offset: 2px; } #active_filters_clones li a:after, #active_filters_clones li button:after { content: "x"; display: flex; color: #fff; background-color: var(--activeSelectionColor-hover); height: 100%; padding: 5px 11px; border-top-right-radius: 13px; border-bottom-right-radius: 13px; margin-left: 13px;} #active_filters_clones li a:hover:after, #active_filters_clones li button:hover:after { color: #fff; } #active_filters_clones .small {font-size: .8em; display: inline-block;} #active_filters_clones .fa-filter { color: #888; font-size: 1.2em; display: inline-block; vertical-align: middle; } #active_filters_clones h4 { display: inline-block; font-size: .9em; font-weight: 600; } #active_filters_clones .head { display: inline-block; } #active_filters_clones ul#li_clones, #active_filters_clones ul#li_clones ul { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: flex-start; gap: 10px; }