.eyenk-colours{--circle: 14rem;--ring-width: .3rem;--gap: 3.2rem}.eyenk-colours--small{--circle: 11rem}.eyenk-colours--large{--circle: 16.4rem}@media screen and (max-width:749px){.eyenk-colours{--circle: 9.6rem;--ring-width: .25rem;--gap: 1.6rem}.eyenk-colours--small{--circle: 8.2rem}.eyenk-colours--large{--circle: 11rem}}.eyenk-colours__ar{display:none}html[lang=ar] .eyenk-colours__ar{display:inline}html[lang=ar] .eyenk-colours__en{display:none}.eyenk-colours__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.6rem 1.6rem;margin-bottom:2rem}.eyenk-colours__heading{margin:0}.eyenk-colours__sub{flex-basis:100%;margin:0;color:rgba(var(--color-foreground),.75)}.eyenk-colours__clear{font-size:1.3rem}.eyenk-colours__list{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:2.4rem var(--gap);margin:0;padding:0;list-style:none}@media screen and (min-width:750px){.eyenk-colours__list{--gx: var(--grid-desktop-horizontal-spacing, 2.4rem);display:grid;grid-template-columns:repeat(var(--n, 7),minmax(0,calc((100% - 5 * var(--gx)) / 6)));justify-content:start;gap:2.4rem var(--gx)}.eyenk-colours__list .eyenk-colours__li{width:auto;min-width:0}.eyenk-colours__item .eyenk-colours__ring{width:84%;height:auto;aspect-ratio:1}}@media screen and (max-width:749px){.eyenk-colours .page-width{padding-left:0;padding-right:0}.eyenk-colours__head{padding:0 1.5rem}.eyenk-colours__list{flex-wrap:nowrap;justify-content:flex-start;padding:.4rem 1.5rem .8rem;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:1.5rem;-webkit-overflow-scrolling:touch;scrollbar-width:none}.eyenk-colours__list::-webkit-scrollbar{display:none}.eyenk-colours__li{scroll-snap-align:start}}.eyenk-colours__li{flex:none;width:var(--circle)}.eyenk-colours__item{display:flex;flex-direction:column;align-items:center;gap:.8rem;color:rgb(var(--color-foreground));text-decoration:none;text-align:center}.eyenk-colours__ring{display:block;width:var(--circle);height:var(--circle);padding:var(--ring-width);border-radius:50%;background:var(--ring);background:conic-gradient(from 210deg,color-mix(in srgb,var(--ring) 55%,white),var(--ring) 35%,color-mix(in srgb,var(--ring) 70%,black) 70%,color-mix(in srgb,var(--ring) 55%,white));transition:transform .25s ease,box-shadow .25s ease}.eyenk-colours__disc{position:relative;display:block;width:100%;height:100%;padding:.3rem;border-radius:50%;background:rgb(var(--color-background))}.eyenk-colours__img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:50% 48%;transform:scale(1.08);transition:transform .35s ease}.eyenk-colours__img--swatch{background:var(--ring)}.eyenk-colours__disc:after{content:"";position:absolute;top:.3rem;right:.3rem;bottom:.3rem;left:.3rem;border-radius:50%;box-shadow:inset 0 0 0 .1rem #00000014,inset 0 -1.2rem 2rem #0000001f;pointer-events:none}.eyenk-colours__check{position:absolute;right:.2rem;bottom:.2rem;display:none;width:2.4rem;height:2.4rem;align-items:center;justify-content:center;border-radius:50%;background:rgb(var(--color-foreground));color:rgb(var(--color-background));box-shadow:0 0 0 .25rem rgb(var(--color-background))}.eyenk-colours__check svg{width:1.2rem;height:1.2rem}.eyenk-colours__check svg path{fill:currentColor}.eyenk-colours__label{font-size:1.4rem;font-weight:600;letter-spacing:.02em;line-height:1.2}.eyenk-colours__count{margin-top:-.4rem;font-size:1.2rem;color:rgba(var(--color-foreground),.6)}@media(hover:hover){.eyenk-colours__item:hover .eyenk-colours__ring{transform:translateY(-.3rem);box-shadow:0 1rem 2rem -1rem color-mix(in srgb,var(--ring) 70%,transparent)}.eyenk-colours__item:hover .eyenk-colours__img{transform:scale(1.18)}}.eyenk-colours__item:focus-visible{outline:none}.eyenk-colours__item:focus-visible .eyenk-colours__ring{box-shadow:0 0 0 .3rem rgb(var(--color-background)),0 0 0 .5rem rgba(var(--color-foreground),.6)}.eyenk-colours__item.is-active .eyenk-colours__ring{background:rgb(var(--color-foreground));padding:var(--ring-width)}.eyenk-colours__item.is-active .eyenk-colours__check{display:flex}.eyenk-colours__item.is-active .eyenk-colours__label{text-decoration:underline;text-underline-offset:.3rem}@media(prefers-reduced-motion:reduce){.eyenk-colours__ring,.eyenk-colours__img{transition:none}}
/*# sourceMappingURL=/cdn/shop/t/48/assets/eyenk-shop-by-colour.css.map */