.variant-swatch-list{display:flex;column-gap:var(--grid-mobile-horizontal-spacing);row-gap:var(--grid-mobile-vertical-spacing);--color-foreground: var(--color-interactive)}.variant-swatch-list__item{border-radius:var(--border-radius-2);flex:0 0 auto;width:9rem;aspect-ratio:1 / 1.5;position:relative}.variant-swatch-list__item:before{content:"";display:block;padding-bottom:150%}@media screen and (max-width: 989px){.variant-swatch-list{grid-template-columns:repeat(auto-fill,minmax(6rem,1fr));grid-template-rows:repeat(2,auto);grid-auto-flow:column;justify-content:flex-start;align-items:flex-start;overflow-x:auto;white-space:nowrap;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scroll-padding-left:1rem;padding:.3rem .3rem 1.6rem}.variant-swatch-list__item{scroll-snap-align:start}}@media screen and (min-width: 990px){.variant-swatch-list{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--grid-mobile-vertical-spacing) var(--grid-mobile-horizontal-spacing)}.variant-swatch-list__item{width:auto}}.variant-swatch-thumbnail{position:absolute;top:0;left:0;display:block;height:100%;width:100%;padding:0;color:rgb(var(--color-foreground));cursor:pointer;background-color:transparent;border:solid .1rem var(--color-white);border-radius:var(--border-radius-2);aspect-ratio:1 / 1.5}.variant-swatch-thumbnail:not([aria-current],.disabled):hover{outline:.1rem solid rgba(var(--color-interactive),.4)}.variant-swatch-thumbnail[aria-current]{box-shadow:0 0 0 .1rem rgb(var(--color-foreground));border-color:rgb(var(--color-foreground))}.variant-swatch-thumbnail[aria-current]:focus-visible{box-shadow:0 0 0 .1rem rgb(var(--color-background)),0 0 0 .5rem rgba(var(--color-foreground),.5)}.variant-swatch-thumbnail[aria-current]:focus,.variant-swatch-thumbnail.focused{outline:0;box-shadow:0 0 0 .1rem rgb(var(--color-background)),0 0 0 .5rem rgba(var(--color-foreground),.5)}@media (forced-colors: active){.variant-swatch-thumbnail[aria-current]:focus,.variant-swatch-thumbnail.focused{outline:transparent solid .2rem}}.variant-swatch-thumbnail[aria-current]:focus:not(:focus-visible){outline:0;box-shadow:0 0 0 .1rem rgb(var(--color-foreground))}.variant-swatch-thumbnail img{object-fit:cover;width:100%;height:100%;pointer-events:none}.product-customization__notice{border-radius:var(--border-radius-2);border:solid .1rem var(--color-primary-02);background-color:var(--color-primary-00);font-size:1rem;padding:.6rem 1rem;margin-top:1rem;display:flex;align-items:flex-start}.product-customization__notice svg{flex-shrink:0;width:1.2rem;height:1.2rem;margin-right:.7rem;margin-top:.3rem;color:var(--color-primary-darken-07)}variant-confetti-card{display:block}.variant-swatch-list.product-variant--confettis{grid-template-columns:repeat(3,1fr)}.variant-swatch-list .swatch-input__label,.variant-swatch-list .swatch{width:100%}.variant-swatch-list .swatch{background-color:rgb(var(--swatch--background-color));max-width:100%}.variant-swatch-list input[type=radio]{clip:rect(0,0,0,0);overflow:hidden;position:absolute;height:.1rem;width:.1rem}.variant-swatch-list input[type=radio]+label{background-color:rgb(var(--color-background));color:rgba(var(--color-foreground));border-radius:var(--variant-pills-radius);display:inline-block;margin:0;font-size:1.4rem;letter-spacing:.1rem;line-height:1;text-align:center;transition:border var(--duration-short) ease;cursor:pointer;position:relative}.variant-swatch-list input[type=radio]+label:before{content:"";position:absolute;top:calc(var(--variant-pills-border-width) * -1);right:calc(var(--variant-pills-border-width) * -1);bottom:calc(var(--variant-pills-border-width) * -1);left:calc(var(--variant-pills-border-width) * -1);z-index:-1;border-radius:var(--variant-pills-radius)}.variant-swatch-list input[type=radio]+label.swatch-input__label--square,.variant-swatch-list input[type=radio]+label.swatch-input__label--square:before,.variant-swatch-list input[type=radio]+label.swatch-input__label--portrait,.variant-swatch-list input[type=radio]+label.swatch-input__label--portrait:before{border-radius:var(--swatch-input--border-radius, .2rem)}.variant-swatch-list input[type=radio]:checked+label:after{content:"\2713";position:absolute;left:0;top:0;width:1.6rem;height:1.3rem;border-top-left-radius:calc(var(--swatch--border-radius) - var(--variant-pills-border-width));border-bottom-right-radius:var(--swatch--border-radius);background-color:rgb(var(--color-interactive));color:var(--color-white);font-size:1rem;line-height:1.2rem;font-weight:700;text-align:center;transform:translate(-.2rem,-.2rem)}.variant-swatch-list input[type=radio]+label:hover{border-color:rgb(var(--color-foreground))}.variant-swatch-list input[type=radio]:checked+label{background-color:rgb(var(--color-foreground));color:rgb(var(--color-background))}.variant-swatch-list input[type=radio]:not(.disabled)+label>.visually-hidden{display:none}@media screen and (forced-colors: active){.variant-swatch-list input[type=radio]:checked+label{text-decoration:underline}}.variant-swatch-list input[type=radio]:checked+label::selection{background-color:rgba(var(--color-background),.3)}.variant-swatch-list input[type=radio]:disabled+label,.variant-swatch-list input[type=radio].disabled+label{border-color:rgba(var(--color-foreground),.1);color:rgba(var(--color-foreground),.6);text-decoration:line-through}.variant-swatch-list input[type=radio].disabled:checked+label,.variant-swatch-list input[type=radio]:disabled:checked+label{color:rgba(var(--color-interactive),.6)}.variant-swatch-list input[type=radio]:focus-visible+label{box-shadow:0 0 0 .3rem rgb(var(--color-interactive)),0 0 0 .5rem rgba(var(--color-interactive),.55)}.variant-swatch-list input[type=radio].focused+label{box-shadow:0 0 0 .3rem rgb(var(--color-interactive)),0 0 0 .5rem rgba(var(--color-interactive),.55)}
/*# sourceMappingURL=/cdn/shop/t/21/assets/customization-variant-swatch.css.map */