.oj-navcards{--oj-nc-ink: #111;--oj-nc-hairline: #eee;--oj-nc-fill: #f5f4f2;--oj-nc-card-w: 220px;--oj-nc-media-h: 190px;width:100%}.oj-navcards__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:20px}.oj-navcards__title{margin:0;color:var(--oj-nc-ink);font-size:15px;font-weight:700;line-height:1.3;text-transform:none}.oj-navcards__all{flex:none;color:var(--oj-nc-ink);font-size:13px;line-height:1.3;text-decoration:underline;text-underline-offset:2px}.oj-navcards__row{display:flex;gap:20px;margin:0;padding:0;overflow-x:auto;overscroll-behavior-x:contain;list-style:none;scrollbar-width:none}.oj-navcards__row::-webkit-scrollbar{display:none}.oj-navcards__item{flex:0 0 auto;width:var(--oj-nc-card-w)}.oj-navcards__card{position:relative;display:flex;flex-direction:column;color:var(--oj-nc-ink);text-decoration:none}.oj-navcards__media{position:relative;display:block;overflow:hidden;width:100%;height:var(--oj-nc-media-h);background-color:var(--oj-nc-fill)}.oj-navcards__img{position:absolute;top:0;right:0;bottom:0;left:0;display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}@media(hover:hover){.oj-navcards__card:hover .oj-navcards__img{transform:scale(1.03)}}@media(prefers-reduced-motion:reduce){.oj-navcards__img{transition:none}.oj-navcards__card:hover .oj-navcards__img{transform:none}}.oj-navcards__label{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;background-color:var(--oj-nc-fill)}.oj-navcards__name{font-size:13px;font-weight:700;line-height:1.3}.oj-navcards__arrow{flex:none}@media(hover:hover){.oj-navcards__card:hover .oj-navcards__arrow rect:last-of-type{stroke-dashoffset:0}}.oj-navcards__badge{position:absolute;top:10px;left:10px;z-index:2;padding:4px 9px;background-color:var(--oj-nc-ink);color:#fff;font-size:11px;letter-spacing:.04em;line-height:1.3}@media(max-width:1079px){.oj-navcards__head{display:none}.oj-navcards__row{flex-direction:column;gap:14px;overflow:visible}.oj-navcards__item{width:auto}.oj-navcards__card{flex-direction:row;align-items:center;gap:8px}.oj-navcards__media,.oj-navcards__arrow{display:none}.oj-navcards__label{display:contents}.oj-navcards__name{color:#555;font-size:14px;font-weight:400}.oj-navcards__badge{position:static;order:2;padding:2px 7px;font-size:10px;letter-spacing:.03em}}@media(min-width:1024px){.main-nav__item--primary:after{height:2px;opacity:1}.main-nav>li:has(>details.is-open)>.main-nav__item--primary:after{transform:scaleX(1);transform-origin:left}}@media(min-width:1024px){.main-nav__child.mega-nav:has(.oj-navcards){border-bottom:1px solid var(--oj-nc-hairline, #eee);box-shadow:0 16px 32px #0000000f}.main-nav__child.mega-nav>.mega-nav__grid.mega-menu-cards{max-width:none;margin-inline:0}}.oj-navcards--text .oj-navcards__row{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:0 32px;overflow:visible}.oj-navcards--text .oj-navcards__item{width:auto}.oj-navcards--text .oj-navcards__label{padding:13px 0;background-color:transparent;border-top:1px solid var(--oj-nc-hairline)}.oj-navcards--text .oj-navcards__name{font-weight:500}.oj-navcards__img{transform:scale(1.04)}@media(hover:hover){.oj-navcards__card:hover .oj-navcards__img{transform:scale(1.07)}}@media(prefers-reduced-motion:reduce){.oj-navcards__card:hover .oj-navcards__img{transform:scale(1.04)}}@media(min-width:1024px){.mega-menu-cards>.child-nav>li,.mega-menu-cards .oj-navcards,.mega-menu-cards .oj-navcards__row{min-width:0;max-width:100%}.oj-navcards:not(.oj-navcards--text){--oj-nc-card-w: 150px;--oj-nc-media-h: 146px}.oj-navcards:not(.oj-navcards--text) .oj-navcards__row{display:flex;gap:20px;overflow-x:auto;padding-bottom:14px;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:rgba(17,17,17,.35) transparent}.oj-navcards:not(.oj-navcards--text) .oj-navcards__row::-webkit-scrollbar{display:block;height:4px}.oj-navcards:not(.oj-navcards--text) .oj-navcards__row::-webkit-scrollbar-thumb{background:#11111159}.oj-navcards:not(.oj-navcards--text) .oj-navcards__item{flex:0 0 var(--oj-nc-card-w);width:var(--oj-nc-card-w);scroll-snap-align:start}}@media(min-width:1024px){.oj-navcards--text .oj-navcards__row{display:grid;grid-auto-flow:column;grid-template-rows:repeat(var(--oj-nc-rows, 4),auto);grid-template-columns:none;grid-auto-columns:max-content;gap:0 88px;padding:4px 0 8px}.oj-navcards--text .oj-navcards__card{padding:5px 0}.oj-navcards--text .oj-navcards__label{padding:0;border-top:0;background:none}.oj-navcards--text .oj-navcards__name{color:#333;font-size:15px;font-weight:400;line-height:1.3}.oj-navcards--text .oj-navcards__arrow{display:none}.oj-navcards--text .oj-navcards__card:hover .oj-navcards__name{text-decoration:underline;text-underline-offset:3px}}@media(min-width:1024px){.main-nav__child.mega-nav>.mega-nav__grid:has(.oj-navcards)>.child-nav:has(li:not(.lg\:hidden)){padding-top:22px;padding-bottom:36px}}@media(min-width:1024px){.main-nav__child.mega-nav>.mega-nav__grid:has(.oj-navcards){min-height:var(--oj-mega-min-h, 0px)}main-menu.oj-nav-swap .main-nav__child,main-menu.oj-nav-swap .main-nav__child *{transition:none!important}}@media(min-width:1024px){.oj-navcards:not(.oj-navcards--text) .oj-navcards__row{gap:14px;padding-bottom:0}.oj-navcards:not(.oj-navcards--text) .oj-navcards__label{box-sizing:border-box;gap:8px;min-height:46px;padding:8px 10px}.oj-navcards:not(.oj-navcards--text) .oj-navcards__name{font-size:12px;line-height:1.25}.oj-navcards:not(.oj-navcards--text) .oj-navcards__arrow{width:24px;height:24px}.oj-navcards:not(.oj-navcards--text) .oj-navcards__arrow svg{width:24px;height:24px}.oj-navcards:not(.oj-navcards--text) .oj-navcards__badge{top:6px;left:6px;padding:3px 6px;font-size:10px}}@media(min-width:1024px){.oj-navcards:not(.oj-navcards--text) .oj-navcards__row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,170px);gap:12px;overflow:visible;padding-bottom:0;scroll-snap-type:none}.oj-navcards:not(.oj-navcards--text) .oj-navcards__item{width:auto;min-width:0}.oj-navcards:not(.oj-navcards--text) .oj-navcards__card{container-type:inline-size}@container (max-width: 145px){.oj-navcards__arrow{display:none}.oj-navcards__label{padding-inline:8px}.oj-navcards__name{font-size:11px}}}@media(min-width:1024px){.main-nav__child.mega-nav>.mega-nav__grid:has(.oj-navcards:not(.oj-navcards--text))>.child-nav:has(li:not(.lg\:hidden)){padding-top:12px;padding-bottom:16px}}@media(min-width:1024px){.oj-navcards__viewport{position:relative}.oj-navcards:not(.oj-navcards--text) .oj-navcards__viewport .oj-navcards__row{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-behavior:smooth;scroll-snap-type:x mandatory;scrollbar-width:none}.oj-navcards:not(.oj-navcards--text) .oj-navcards__viewport .oj-navcards__row::-webkit-scrollbar{display:none}.oj-navcards:not(.oj-navcards--text) .oj-navcards__viewport .oj-navcards__item{flex:0 0 calc((100% - (var(--oj-nc-per-view, 6) - 1) * 12px) / var(--oj-nc-per-view, 6));width:auto;min-width:0;scroll-snap-align:start}.oj-navcards__nav{position:absolute;top:calc(var(--oj-nc-media-h) / 2);z-index:3;display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:1px solid var(--oj-nc-ink);border-radius:50%;background:#fff;color:var(--oj-nc-ink);cursor:pointer;transform:translateY(-50%)}.oj-navcards__nav[hidden]{display:none}.oj-navcards__nav--prev{left:10px}.oj-navcards__nav--next{right:10px}.oj-navcards__nav svg{width:18px;height:18px}.oj-navcards__nav:hover{background:var(--oj-nc-ink);color:#fff}.oj-navcards__nav:focus-visible{outline:2px solid var(--oj-nc-ink);outline-offset:2px}}@media(max-width:1023.98px){.oj-navcards__nav{display:none}}@media(min-width:1024px){.main-nav__child.mega-nav:has(.oj-navcards){top:calc(100% - 20px)}}.oj-navcards__img--top{object-position:50% 0%!important}.oj-navcards__img--center{object-position:50% 50%!important}.oj-navcards__img--bottom{object-position:50% 100%!important}@media(min-width:1024px){.oj-navcards:not(.oj-navcards--text){--oj-nc-media-h: 178px}.oj-navcards:not(.oj-navcards--text) .oj-navcards__label{min-height:54px;padding:10px 12px}.oj-navcards:not(.oj-navcards--text) .oj-navcards__name{font-size:13px}.oj-navcards:not(.oj-navcards--text) .oj-navcards__arrow,.oj-navcards:not(.oj-navcards--text) .oj-navcards__arrow svg{width:30px;height:30px}}
/*# sourceMappingURL=/cdn/shop/t/81/assets/oj-nav-cards.css.map */