.ecsf{--ecsf-product-image-radius:0px;--ecsf-card-gap-image:var(--ecsf-card-gap-image-desktop,12px);--ecsf-card-gap-name:var(--ecsf-card-gap-name-desktop,4px);--ecsf-card-gap-price:var(--ecsf-card-gap-price-desktop,6px);--ecsf-card-gap-swatches:var(--ecsf-card-gap-swatches-desktop,6px)}
.ecsf .ecsf-product-media{position:relative;min-width:0;margin:0 0 12px;padding-bottom:36px}
.ecsf .ecsf-product-media:not(.ecsf-product-media-single){--ecsf-gallery-reserve:36px;padding-bottom:var(--ecsf-gallery-reserve);margin-bottom:max(0px,calc(var(--ecsf-card-gap-image) - var(--ecsf-gallery-reserve)))}
.ecsf .ecsf-media-frame{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:var(--ecsf-product-image-radius);background:var(--ecsf-surface);touch-action:pan-y pinch-zoom}
.ecsf .ecsf-media-link{display:block;width:100%;height:100%;color:inherit}
.ecsf .ecsf-media-link:focus-visible{outline-offset:-3px}
.ecsf .ecsf-media-track{display:flex;width:100%;height:100%;transition:transform 300ms cubic-bezier(.22,.61,.36,1)}
.ecsf .ecsf-media-replacing .ecsf-media-track{transition:none}
.ecsf .ecsf-media-previous{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1;z-index:4;transition:opacity 150ms ease-out;pointer-events:none}
.ecsf .ecsf-media-previous.is-leaving{opacity:0}
.ecsf .ecsf-media-previous[data-fit=contain]{object-fit:contain}
.ecsf .ecsf-media-slide{display:block;flex:0 0 100%;min-width:0;height:100%}
.ecsf.ecsf-product-archive .ecsf-content ul.products li.product .ecsf-media-frame img,.ecsf .ecsf-media-frame .ecsf-media-image{display:block;width:100%;height:100%;margin:0;object-fit:cover;object-position:center;transform:none;border-radius:var(--ecsf-product-image-radius);pointer-events:none}
.ecsf .ecsf-media-hover-image{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity 225ms ease-out}
.ecsf.ecsf-product-archive .ecsf-content ul.products li.product .ecsf-media-frame img[data-fit=contain],.ecsf .ecsf-media-frame .ecsf-media-image[data-fit=contain]{object-fit:contain}
.ecsf .ecsf-media-hover .ecsf-media-hover-image{opacity:1}
.ecsf .ecsf-media-dragging .ecsf-media-track{transition:none;will-change:transform}
.ecsf .ecsf-media-controls{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:center;min-height:36px}
.ecsf .ecsf-media-controls button{display:flex;align-items:center;justify-content:center;min-width:28px;min-height:32px;padding:4px;border:0;background:none;color:var(--ecsf-text);cursor:pointer}
.ecsf .ecsf-media-controls>button{min-width:36px}
.ecsf .ecsf-media-controls button:disabled{opacity:.3;cursor:default}
.ecsf .ecsf-media-dots{display:flex;flex-wrap:nowrap;justify-content:flex-start;min-width:0;max-width:100%;overflow-x:auto;scrollbar-width:none}
.ecsf .ecsf-media-dots::-webkit-scrollbar{display:none}
.ecsf .ecsf-media-dots button{flex:0 0 28px}
.ecsf .ecsf-media-dots button:focus-visible{outline-offset:-3px}
.ecsf .ecsf-media-dots button::before{content:'';width:4px;height:4px;border:1px solid currentColor;border-radius:50%}
.ecsf .ecsf-media-dots button[aria-pressed=true]::before{background:currentColor}
.ecsf[data-mode=dark] .ecsf-media-dots button{color:#929497}
.ecsf[data-mode=dark] .ecsf-media-dots button[aria-pressed=true]{color:#e1e2e4}
@media(prefers-color-scheme:dark){.ecsf[data-mode=system] .ecsf-media-dots button{color:#929497}.ecsf[data-mode=system] .ecsf-media-dots button[aria-pressed=true]{color:#e1e2e4}}
.ecsf .ecsf-card-colors{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:var(--ecsf-card-gap-price) 0 0}
.ecsf.ecsf-product-archive .ecsf-card-colors{column-gap:11px}
.ecsf.ecsf-product-archive .ecsf-rating{margin-top:var(--ecsf-card-gap-swatches)}
.ecsf .ecsf-card-color{display:flex;align-items:center;justify-content:center;min-height:34px;min-width:34px;padding:1px;border:1px solid transparent;color:var(--ecsf-muted);font-size:.75rem;text-decoration:none}
.ecsf .ecsf-card-color[aria-current=true]{color:var(--ecsf-text)}
.ecsf .ecsf-color-chip,.ecsf .ecsf-swatch-image{position:relative;display:block;flex:none;width:27.3px;height:27.3px;border:1px solid var(--ecsf-line);border-radius:50%}
.ecsf .ecsf-card-color[aria-current=true] :is(.ecsf-color-chip,.ecsf-swatch-image)::after{content:'';position:absolute;inset:-4px;border:1px solid var(--ecsf-text);border-radius:50%;pointer-events:none}
.ecsf .ecsf-card-color[aria-current=true]>span:not(.ecsf-color-chip):not(.ecsf-swatch-image){text-decoration:underline;text-underline-offset:3px}
.ecsf.ecsf-product-archive .ecsf-content ul.products li.product .ecsf-card-color img,.ecsf .ecsf-card-color img{width:100%;height:100%;margin:0;object-fit:cover;border-radius:50%}
.ecsf .ecsf-card-favorite{position:absolute;right:0;top:calc((1.4em - 44px)/2);display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:12px;border:0;background:transparent;color:var(--ecsf-text);cursor:pointer}
.ecsf .ecsf-card-favorite svg{display:block;width:20px;height:20px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.ecsf .ecsf-card-favorite .ecsf-heart-contrast{display:none}
.ecsf .ecsf-card-favorite[aria-pressed=true] .ecsf-heart-outline{fill:currentColor;fill-opacity:.8}
.ecsf .ecsf-card-favorite:focus-visible{outline:2px solid currentColor;outline-offset:-4px;border-radius:50%}
@media(max-width:599px),(pointer:coarse){.ecsf .ecsf-card-color{min-width:40px;min-height:44px}.ecsf .ecsf-card-colors{gap:0}.ecsf.ecsf-product-archive .ecsf-card-colors{column-gap:5px}}
@media(max-width:599px){.ecsf{--ecsf-card-gap-image:var(--ecsf-card-gap-image-mobile,48px);--ecsf-card-gap-name:var(--ecsf-card-gap-name-mobile,4px);--ecsf-card-gap-price:var(--ecsf-card-gap-price-mobile,6px);--ecsf-card-gap-swatches:var(--ecsf-card-gap-swatches-mobile,6px)}}
@media(max-width:599px){.ecsf .ecsf-product-media:not(.ecsf-product-media-single) .ecsf-media-controls>button{display:none}}
.ecsf .ecsf-product-media-single{width:48%;float:left;margin-bottom:32px}
.ecsf .ecsf-media-zoom{padding:40px 12px 12px;max-width:95vw;max-height:95dvh;border:1px solid var(--ecsf-line);background:var(--ecsf-bg);color:var(--ecsf-text)}
.ecsf .ecsf-media-zoom::backdrop{background:rgb(0 0 0/.65)}
.ecsf .ecsf-media-zoom>button{position:absolute;right:4px;top:0;width:40px;height:40px;background:none;border:0;color:inherit;font-size:28px}
.ecsf .ecsf-media-zoom>img{display:block;max-width:85vw;max-height:80dvh;width:auto;height:auto}
@media(max-width:899px){.ecsf .ecsf-product-media-single{width:100%;float:none}}
@media(hover:hover) and (pointer:fine){.ecsf .ecsf-product-media:not(.ecsf-product-media-single){--ecsf-gallery-reserve:0px}.ecsf .ecsf-product-media:not(.ecsf-product-media-single) .ecsf-media-controls{visibility:hidden;background:var(--ecsf-bg)}.ecsf .ecsf-product-media:focus-within .ecsf-media-controls{visibility:visible}}
@media(prefers-reduced-motion:reduce){.ecsf .ecsf-media-track,.ecsf .ecsf-media-hover-image,.ecsf .ecsf-media-previous{transition:none}}

.ecsf-card-title-row{position:relative;padding-right:48px;font-size:var(--ecsf-card-name-desktop-size,1.125rem)}
@media(max-width:599px){.ecsf-card-title-row{font-size:var(--ecsf-card-name-mobile-size,1.125rem)}}

.ecsf .ecsf-card-favorite .ecsf-favorite-thumb{display:none}
.ecsf[data-mode=dark] .ecsf-card-favorite .ecsf-favorite-heart{display:none}
.ecsf[data-mode=dark] .ecsf-card-favorite .ecsf-favorite-thumb{display:block}
@media(prefers-color-scheme:dark){.ecsf[data-mode=system] .ecsf-card-favorite .ecsf-favorite-heart{display:none}.ecsf[data-mode=system] .ecsf-card-favorite .ecsf-favorite-thumb{display:block}}

/* A cold image can load independently while its slide finishes moving. */
.ecsf .ecsf-media-slide{position:relative}
.ecsf .ecsf-media-slide.is-loading::after{content:'';position:absolute;left:calc(50% - 10px);top:calc(50% - 10px);width:20px;height:20px;box-sizing:border-box;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;opacity:.5;animation:ecsf-media-loading .8s linear infinite;pointer-events:none}
@keyframes ecsf-media-loading{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.ecsf .ecsf-media-slide.is-loading::after{animation:none}}
