variant-list-element{display:block;width:100%;contain:layout style;box-sizing:border-box;position:relative;z-index:1;overflow:visible}variant-list-element.spacing-style,variant-list-element[class*=spacing-style]{margin-block:var(--margin-block-start, 15px) var(--margin-block-end, 15px);margin-inline:var(--margin-inline-start, 0) var(--margin-inline-end, 0);padding-block:calc(var(--padding-block-start, 0px) + var(--section-top-offset, 0px)) var(--padding-block-end, 0px);padding-inline:var(--padding-inline-start, 0) var(--padding-inline-end, 0)}@media(max-width:749px){variant-list-element.spacing-style,variant-list-element[class*=spacing-style]{margin-block:var(--margin-block-start-mobile, var(--margin-block-start, 15px)) var(--margin-block-end-mobile, var(--margin-block-end, 15px));padding-block:calc(var(--padding-block-start-mobile, var(--padding-block-start, 0px)) + var(--section-top-offset, 0px)) var(--padding-block-end-mobile, var(--padding-block-end, 0px));padding-inline:var(--padding-inline-start-mobile, var(--padding-inline-start, 0)) var(--padding-inline-end-mobile, var(--padding-inline-end, 0))}}.variant-list{max-width:100%;overflow:visible;box-sizing:border-box}.variant-list__container{display:flex;flex-direction:column;gap:1rem;max-width:100%;overflow:visible;box-sizing:border-box;width:100%}.variant-list__heading{font-size:var(--heading-size, 1.8rem);font-weight:600;margin:0;color:rgb(var(--color-foreground));line-height:1.2}@media(max-width:749px){.variant-list__heading{font-size:var(--heading-size-mobile, var(--heading-size, 1.8rem))}}.variant-list__description{font-size:var(--description-size, 1rem);margin:0;color:rgba(var(--color-foreground),.75);line-height:1.4}@media(max-width:749px){.variant-list__description{font-size:var(--description-size-mobile, var(--description-size, 1rem))}}.variant-list__items{display:flex;flex-direction:column;gap:var(--gap, 16px);max-width:100%;width:100%;box-sizing:border-box}@media(max-width:749px){.variant-list__items{gap:var(--gap-mobile, var(--gap, 16px))}}variant-list-element:has(.variant-list--scrollable){padding-bottom:0!important;overflow:hidden}variant-list-element:has(.variant-list--scrollable) .variant-list__items>:last-child{margin-bottom:var(--padding-block-end)}.variant-list--scrollable .variant-list__items{max-height:var(--max-height, 400px);overflow-y:auto;scroll-behavior:smooth}.variant-list__items--columns-2,.variant-list__items--columns-3{flex-direction:row;flex-wrap:wrap}.variant-list__items--columns-2 .variant-list__item{flex:1 1 calc(50% - var(--gap, 16px) / 2);min-width:calc(50% - var(--gap, 16px) / 2);max-width:calc(50% - var(--gap, 16px) / 2);width:calc(50% - var(--gap, 16px) / 2);box-sizing:border-box}.variant-list__items--columns-3 .variant-list__item{flex:1 1 calc(33.333% - var(--gap, 16px) * 2 / 3);min-width:calc(33.333% - var(--gap, 16px) * 2 / 3);max-width:calc(33.333% - var(--gap, 16px) * 2 / 3);width:calc(33.333% - var(--gap, 16px) * 2 / 3);box-sizing:border-box}@media(max-width:749px){.variant-list__items--columns-mobile-2{flex-direction:row;flex-wrap:wrap}.variant-list__items--columns-mobile-2 .variant-list__item{flex:1 1 calc(50% - var(--gap-mobile, 16px) / 2);min-width:calc(50% - var(--gap-mobile, 16px) / 2);max-width:calc(50% - var(--gap-mobile, 16px) / 2);width:calc(50% - var(--gap-mobile, 16px) / 2);box-sizing:border-box}.variant-list__items--columns-mobile-1 .variant-list__item{min-width:100%;max-width:100%}}.variant-list__item{display:flex;flex-direction:column;align-items:stretch;gap:1rem;transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease;max-width:100%;width:100%;overflow:hidden;position:relative;box-sizing:border-box;flex-shrink:0}.variant-list__item:hover{border-color:rgba(var(--color-foreground),.2);box-shadow:0 2px 8px rgba(var(--color-foreground),.1)}.variant-list__item--horizontal{flex-direction:row;align-items:center}.variant-list__item--horizontal.variant-list__item--horizontal-align-top{align-items:flex-start}.variant-list__item--horizontal.variant-list__item--horizontal-align-center{align-items:center}.variant-list__item--horizontal.variant-list__item--horizontal-align-bottom{align-items:flex-end}.variant-list__item--align-center{text-align:center;align-items:center}.variant-list__item--align-right{text-align:right;align-items:flex-end}.variant-list__item--align-left{text-align:left;align-items:flex-start}@media(max-width:749px){.variant-list__item--align-mobile-center{text-align:center;align-items:center}.variant-list__item--align-mobile-right{text-align:right;align-items:flex-end}.variant-list__item--align-mobile-left{text-align:left;align-items:flex-start}}.variant-list__item-image{flex-shrink:0;width:var(--image-size, 80px);height:var(--image-size, 80px)}.variant-list__item-image img{width:100%;height:100%;border-radius:var(--image-border-radius, 4px);object-fit:cover;border:1px solid rgba(var(--color-foreground),.1)}@media(max-width:749px){.variant-list__item-image{width:var(--image-size-mobile, var(--image-size, 80px));height:var(--image-size-mobile, var(--image-size, 80px))}.variant-list__item-image img{border-radius:var(--image-border-radius-mobile, var(--image-border-radius, 4px))}}.variant-list__item-content{display:flex;flex:1;flex-direction:column;gap:1rem;min-width:0}.variant-list__item-content--horizontal{flex-direction:row;align-items:center;justify-content:space-between;align-self:stretch}@media(max-width:749px){.variant-list__item--horizontal-mobile{flex-direction:row;align-items:center}.variant-list__item--horizontal-align-mobile-top{align-items:flex-start}.variant-list__item--horizontal-align-mobile-center{align-items:center}.variant-list__item--horizontal-align-mobile-bottom{align-items:flex-end}.variant-list__item-content--horizontal-mobile{flex-direction:row;align-items:center;justify-content:space-between}}.variant-list__item-info{flex:1;min-width:0}.variant-list__item-title{font-size:var(--item-title-size, 1rem);font-weight:500;margin-bottom:.25rem;margin-top:.25rem;color:rgb(var(--color-foreground));line-height:1.3;white-space:normal;overflow:visible;text-overflow:initial}@media(max-width:749px){.variant-list__item-title{font-size:var(--item-title-size-mobile, var(--item-title-size, 1rem))}}.variant-list__item-price{display:flex;align-items:center;gap:.5rem;font-size:var(--price-size, 1rem);font-weight:600;color:rgb(var(--color-foreground))}@media(max-width:749px){.variant-list__item-price{font-size:var(--price-size-mobile, var(--price-size, 1rem))}}.variant-list__item--align-left .variant-list__item-price{justify-content:flex-start}.variant-list__item--align-center .variant-list__item-price{justify-content:center}.variant-list__item--align-right .variant-list__item-price{justify-content:flex-end}@media(max-width:749px){.variant-list__item--align-mobile-left .variant-list__item-price{justify-content:flex-start}.variant-list__item--align-mobile-center .variant-list__item-price{justify-content:center}.variant-list__item--align-mobile-right .variant-list__item-price{justify-content:flex-end}}.variant-list__item-compare-price{color:rgba(var(--color-foreground),.5);font-weight:400;text-decoration:line-through}.variant-list__item-quantity{flex-shrink:0;display:flex;justify-content:center;align-items:center;align-self:stretch}.variant-list__item-content--horizontal .variant-list__item-quantity{position:relative}@media(max-width:749){.variant-list__item-content--horizontal-mobile .variant-list__item-quantity{position:relative}}.variant-list__item--align-left .variant-list__item-quantity{justify-content:flex-start}.variant-list__item--align-center .variant-list__item-quantity{justify-content:center}.variant-list__item--align-right .variant-list__item-quantity,.variant-list__item--horizontal .variant-list__item-quantity{justify-content:flex-end}.variant-list__error{background:rgba(var(--color-foreground),.05);text-align:center;padding:1.5rem;border-radius:8px;border:1px solid rgba(var(--color-foreground),.1)}.variant-list__error-message{color:rgba(var(--color-foreground),.75);margin:0;font-size:.95rem;line-height:1.4}.variant-list__quantity{width:var(--quantity-width, 130px);min-height:var(--quantity-height, 50px)}@media(max-width:749px){.variant-list__quantity{width:var(--quantity-width-mobile, var(--quantity-width, 130px));min-height:var(--quantity-height-mobile, var(--quantity-height, 50px))}}.variant-list__quantity:after,.variant-list__quantity:hover:after,.variant-list__quantity{border-radius:var(--quantity-border-radius, 4px)}.variant-list__quantity:before{border-radius:calc(var(--quantity-border-radius, 4px) + var(--inputs-border-width, 1px))}@media(max-width:749px){.variant-list__quantity:after,.variant-list__quantity:hover:after,.variant-list__quantity{border-radius:var(--quantity-border-radius-mobile, var(--quantity-border-radius, 4px))!important}.variant-list__quantity:before{border-radius:calc(var(--quantity-border-radius-mobile, var(--quantity-border-radius, 4px)) + var(--inputs-border-width, 1px))!important}}.variant-list__quantity .quantity__button{width:var(--quantity-button-width, 40px);font-size:var(--quantity-font-size, 14px)}.variant-list__quantity .quantity__input{font-size:var(--quantity-font-size, 14px);padding:0 .25rem}@media(max-width:749px){.variant-list__quantity .quantity__button{width:var(--quantity-button-width-mobile, var(--quantity-button-width, 40px));font-size:var(--quantity-font-size-mobile, var(--quantity-font-size, 14px))}.variant-list__quantity .quantity__input{font-size:var(--quantity-font-size-mobile, var(--quantity-font-size, 14px))}}@media(max-width:749px){.variant-list__item--horizontal:not(.variant-list__item--horizontal-mobile){flex-direction:column;gap:1rem}.variant-list__item-content--horizontal:not(.variant-list__item-content--horizontal-mobile){flex-direction:column;width:100%;gap:1rem;text-align:inherit}.variant-list__item-info{text-align:inherit;width:100%}.variant-list__items--columns-2:not(.variant-list__items--columns-mobile-2){flex-direction:column}.variant-list__items--columns-2:not(.variant-list__items--columns-mobile-2) .variant-list__item{min-width:100%;max-width:100%}}@media(max-width:480px){.variant-list__heading{font-size:var(--heading-size-mobile, calc(var(--heading-size, 1.8rem) * .85))}}.loading-overlay__spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.loading-overlay__spinner.hidden{display:none}.spinner{width:2rem;height:2rem;animation:rotator 1.4s linear infinite}.spinner .path{stroke:currentColor;stroke-dasharray:90,150;stroke-dashoffset:0;stroke-linecap:round;animation:dash 1.4s ease-in-out infinite}@keyframes rotator{0%{transform:rotate(0)}to{transform:rotate(270deg)}}@keyframes dash{0%{stroke-dashoffset:0}50%{stroke-dashoffset:-35;transform:rotate(135deg)}to{stroke-dashoffset:-70;transform:rotate(450deg)}}.variant-list__item-badge{--badge-padding-x: calc(var(--card-padding-inline-start) + calc(var(--card-border-radius) / 3));--badge-padding-y: calc(var(--badge-padding-x) / 3);--badge-border-radius: calc(var(--card-border-radius) / 2);position:absolute;top:0;right:0;background:var(--badge-background-color);color:var(--badge-text-color);padding:calc(var(--badge-padding-y)) var(--badge-padding-x);font-size:var(--badge-font-size, 10px);line-height:1;white-space:nowrap;border-radius:0 0 var(--badge-border-radius) var(--badge-border-radius);max-width:calc(100% + var(--card-padding-inline-end) * 2);text-overflow:ellipsis;overflow:hidden}.variant-list__item--horizontal .variant-list__item-badge{top:0;right:50%;transform:translate(50%) translateY(calc(-1 * var(--card-padding-block-start)))}@media(max-width:749px){.variant-list__item-badge{--badge-padding-x-mobile: calc(var(--card-padding-inline-start-mobile, var(--card-padding-inline-start)) + calc(var(--card-border-radius-mobile, var(--card-border-radius)) / 3));--badge-padding-y-mobile: calc(var(--badge-padding-x-mobile) / 3);font-size:var(--badge-font-size-mobile, var(--badge-font-size, 10px));padding:calc(var(--badge-padding-y-mobile)) var(--badge-padding-x-mobile)}.variant-list__item--horizontal .variant-list__item-badge{transform:translate(50%) translateY(calc(-1 * var(--card-padding-block-start-mobile)))}}@media(max-width:749px){.variant-list__item{padding-block:var(--card-padding-block-start-mobile, var(--card-padding-block-start, 0px)) var(--card-padding-block-end-mobile, var(--card-padding-block-end, 0px))!important;padding-inline:var(--card-padding-inline-start-mobile, var(--card-padding-inline-start, 0px)) var(--card-padding-inline-end-mobile, var(--card-padding-inline-end, 0px))!important;border-radius:var(--card-border-radius-mobile, var(--card-border-radius, 10px))!important}}
/*# sourceMappingURL=/cdn/shop/t/11/assets/component-variant-list.css.map */