.collection-variant-display{--collection-variant-display-max-width: none;--collection-variant-display__header-max-width: 940px;--collection-variant-display-padding-block: var(--scale-64);--collection-variant-display-padding-inline: 0;--collection-variant-display-column-gap: var(--scale-8);--collection-variant-display-row-gap: var(--scale-8);--collection-variant-display-card-background: transparent;--collection-variant-display-media-aspect-ratio: 1 / 1;--collection-variant-display-media-margin-bottom: 6.98px;--collection-variant-display-default-height: 100%;--collection-variant-display-animation-height: 136.68%;--collection-variant-display-product-aspect-ratio: 178 / 1979;--collection-variant-display-product-position-x: 50%;--collection-variant-display-product-position-y: 50%;--collection-variant-display-product-rotation: -20deg;--collection-variant-display-top-open-offset: -32.684%;--collection-variant-display-closed-offset: -9.702%;--collection-variant-display-rest-scale: .66;--collection-variant-display-rest-shift: 2%;--collection-variant-display-open-scale: .55;--collection-variant-display-open-shift: 8%;--collection-variant-display-center-left: 14.326%;--collection-variant-display-center-top: 11.976%;--collection-variant-display-center-width: 71.348%;--collection-variant-display-center-height: 71.349%;--collection-variant-display-top-left: 0;--collection-variant-display-top-top: 0;--collection-variant-display-top-width: 100%;--collection-variant-display-top-height: 39.01%;--collection-variant-display-bottom-left: 0;--collection-variant-display-bottom-top: 48.56%;--collection-variant-display-bottom-width: 100%;--collection-variant-display-bottom-height: 51.44%;--collection-variant-display-transition-duration: .9s;--collection-variant-display-fade-duration: .45s;--collection-variant-display-transition-easing: cubic-bezier(.4, 0, .2, 1);--collection-variant-display-stage-top: 43.67px;--collection-variant-display-stage-right: 89px;--collection-variant-display-stage-bottom: 0;--collection-variant-display-stage-left: 90px;display:block;width:100%;padding-block:var(--collection-variant-display-padding-block);padding-inline:var(--collection-variant-display-padding-inline)}.collection-variant-display__inner{width:100%;max-width:var(--collection-variant-display-max-width);margin-inline:auto}.collection-variant-display__header{width:100%;max-width:var(--collection-variant-display__header-max-width);margin-inline:auto;margin-block:var(--scale-48);text-align:center}.collection-variant-display__heading{margin-bottom:var(--scale-8);font-family:var(--font-family-sackers-gothic);font-weight:var(--font-weight-medium);text-transform:uppercase;display:flex;justify-content:center;align-items:baseline;gap:var(--scale-8)}.collection-variant-display__title{font-size:var(--font-size-desktop-29);line-height:var(--font-line-height-desktop-40);letter-spacing:var(--font-letter-spacing-4-5)}.collection-variant-display__pricing{font-size:var(--font-size-desktop-20);line-height:var(--font-line-height-desktop-28);letter-spacing:var(--font-letter-spacing-3)}.collection-variant-display__subheading{color:var(--colour-neutral-800);font-family:var(--font-family-tt-commons-pro);font-size:var(--font-size-desktop-14);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-desktop-18);letter-spacing:var(--font-letter-spacing-2);text-transform:uppercase;padding-bottom:var(--scale-8)}.collection-variant-display__content{color:var(--colour-neutral-800);text-align:center;font-family:var(--font-family-tt-commons-pro);font-size:var(--font-size-desktop-17);font-weight:var(--font-weight-regular);line-height:var(--font-line-height-desktop-20)}.collection-variant-display__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var( --collection-variant-display-column-gap );row-gap:var(--collection-variant-display-row-gap);padding-inline:var(--scale-20)}.collection-variant-display__card{min-width:0;overflow:hidden;background:var( --collection-variant-display-card-background )}.collection-variant-display__card-link{display:block;width:100%;padding:0;color:inherit;text-align:inherit;text-decoration:none;background:transparent;border:0;cursor:pointer}.collection-variant-display__card-link:focus-visible{outline:2px solid var(--colour-primary-black);outline-offset:-2px}.collection-variant-display__media{position:relative;width:100%;overflow:hidden;aspect-ratio:var( --collection-variant-display-media-aspect-ratio );margin-bottom:var( --collection-variant-display-media-margin-bottom )}.collection-variant-display__default-media{position:absolute;z-index:2;top:var(--collection-variant-display-stage-top);right:var(--collection-variant-display-stage-right);bottom:var(--collection-variant-display-stage-bottom);left:var(--collection-variant-display-stage-left);visibility:visible;opacity:1;pointer-events:none}.collection-variant-display__image{position:absolute;top:var( --collection-variant-display-product-position-y );left:var( --collection-variant-display-product-position-x );display:block;width:auto;max-width:none;height:var( --collection-variant-display-default-height );object-fit:contain;transform:translate(-50%,-50%)}.collection-variant-display__card--has-animation .collection-variant-display__image{transform:translate(-50%,-50%) rotate(var(--collection-variant-display-product-rotation))}.collection-variant-display__placeholder{display:block;width:100%;height:100%;background:var( --collection-variant-display-card-background )}.collection-variant-display__animation{position:absolute;z-index:3;top:var(--collection-variant-display-stage-top);right:var(--collection-variant-display-stage-right);bottom:var(--collection-variant-display-stage-bottom);left:var(--collection-variant-display-stage-left);visibility:visible;pointer-events:none}.collection-variant-display__part{position:absolute;top:var( --collection-variant-display-product-position-y );left:var( --collection-variant-display-product-position-x );height:var( --collection-variant-display-animation-height );aspect-ratio:var( --collection-variant-display-product-aspect-ratio );transform-origin:center;transform:translate(-50%,-50%) translateY(var(--collection-variant-display-pen-shift)) rotate(var(--collection-variant-display-product-rotation)) scale(var(--collection-variant-display-pen-scale)) translateY(var(--collection-variant-display-layer-offset))}.collection-variant-display__part--top{--collection-variant-display-layer-offset: var(--collection-variant-display-top-offset);z-index:3}.collection-variant-display__part--top .collection-variant-display__part-image{position:absolute;top:var(--collection-variant-display-top-top);left:var(--collection-variant-display-top-left);width:var(--collection-variant-display-top-width);height:var(--collection-variant-display-top-height)}.collection-variant-display__part--center{--collection-variant-display-layer-offset: var(--collection-variant-display-body-offset);z-index:1}.collection-variant-display__part--center .collection-variant-display__part-image{position:absolute;top:var(--collection-variant-display-center-top);left:var(--collection-variant-display-center-left);width:var(--collection-variant-display-center-width);height:var(--collection-variant-display-center-height)}.collection-variant-display__part--bottom{--collection-variant-display-layer-offset: var(--collection-variant-display-body-offset);z-index:2}.collection-variant-display__part--bottom .collection-variant-display__part-image{position:absolute;top:var(--collection-variant-display-bottom-top);left:var(--collection-variant-display-bottom-left);width:var(--collection-variant-display-bottom-width);height:var(--collection-variant-display-bottom-height)}.collection-variant-display__part-image{display:block;object-fit:contain}.collection-variant-display__card--has-animation{--collection-variant-display-pen-scale: var(--collection-variant-display-rest-scale);--collection-variant-display-pen-shift: var(--collection-variant-display-rest-shift);--collection-variant-display-top-offset: 0px;--collection-variant-display-body-offset: var(--collection-variant-display-closed-offset)}.collection-variant-display__card--has-animation.is-active{--collection-variant-display-pen-scale: var(--collection-variant-display-open-scale);--collection-variant-display-pen-shift: var(--collection-variant-display-open-shift);--collection-variant-display-top-offset: var(--collection-variant-display-top-open-offset);--collection-variant-display-body-offset: 0px}.collection-variant-display__card--has-animation{position:relative}.collection-variant-display__card--has-animation .collection-variant-display__media{position:static}.collection-variant-display__card--has-animation .collection-variant-display__animation{top:0;right:0;bottom:0;left:0}.collection-variant-display__card--has-animation .collection-variant-display__content{position:relative;z-index:4}.collection-variant-display__details{min-width:0}.collection-variant-display__title,.collection-variant-display__variant-title{margin:0}.collection-variant-display__variant-title{margin-block-start:var(--scale-4)}.collection-variant-display__price{flex-shrink:0}.collection-variant-display__empty{padding-block:var(--scale-40);text-align:center}.collection-variant-display__empty p{margin:0}@media(prefers-reduced-motion:no-preference){.collection-variant-display__default-media{transition:opacity var(--collection-variant-display-fade-duration) ease}.collection-variant-display__part{transition:transform var(--collection-variant-display-transition-duration) var(--collection-variant-display-transition-easing)}}.collection-variant-display__variant-nav{display:none}@media(max-width:989px){.collection-variant-display{--collection-variant-display-default-height: 100%;--collection-variant-display-padding-block: var(--scale-56);--collection-variant-display-stage-top: var(--scale-24);--collection-variant-display-stage-right: var(--scale-48);--collection-variant-display-stage-bottom: 0;--collection-variant-display-stage-left: var(--scale-48);--collection-variant-display__header-max-width: 256px;--collection-variant-display-nav-top: calc( var(--site-header-height, 64px) + var(--scale-8) );--collection-variant-display-nav-background: var(--colour-primary-white);--collection-variant-display-nav-border-colour: var(--colour-neutral-300);--collection-variant-display-nav-border-radius: var(--border-radius-r-4);--collection-variant-display-nav-shadow: 0 2px 8px rgb(0 0 0 / 12%);--collection-variant-display-nav-padding-block: var(--scale-10);--collection-variant-display-nav-padding-inline: var(--scale-16);--collection-variant-display-nav-gap: var(--scale-12);--collection-variant-display-swatch-size: 24px;--collection-variant-display-swatch-gap: var(--scale-8);--collection-variant-display-swatch-active-padding: var(--scale-12);--collection-variant-display-swatch-border-width: .5px;--collection-variant-display-swatch-border-colour: var(--colour-primary-black);--collection-variant-display-swatch-border-radius: 600px;--collection-variant-display-swatch-label-max-width: 120px;--collection-variant-display-nav-transition-duration: .5s;--collection-variant-display-nav-transition-easing: cubic-bezier(.4, 0, .2, 1)}.collection-variant-display__header{margin-block:var(--scale-28) var(--scale-20)}.collection-variant-display__grid{grid-template-columns:minmax(0,1fr)}.collection-variant-display__card:nth-child(2n) .collection-variant-display__default-media,.collection-variant-display__card:nth-child(2n) .collection-variant-display__animation{transform:scaleX(-1)}.collection-variant-display__variant-nav{position:sticky;z-index:20;top:var(--collection-variant-display-nav-top);display:flex;justify-content:center;width:100%;margin-block-end:var(--scale-28);padding-inline:var(--scale-16);pointer-events:none}.collection-variant-display__variant-nav-inner{display:flex;align-items:center;width:fit-content;max-width:100%;min-height:40px;padding:var(--collection-variant-display-nav-padding-block) var(--collection-variant-display-nav-padding-inline);gap:var(--collection-variant-display-nav-gap);background:var(--collection-variant-display-nav-background);border:1px solid var(--collection-variant-display-nav-border-colour);border-radius:var(--collection-variant-display-nav-border-radius);box-shadow:var(--collection-variant-display-nav-shadow);pointer-events:auto}.collection-variant-display__title{font-size:var(--font-size-mobile-23);line-height:var(--font-line-height-mobile-30);letter-spacing:var(--font-letter-spacing-3-5)}.collection-variant-display__pricing{font-size:var(--font-size-mobile-16);line-height:var(--font-line-height-mobile-22);letter-spacing:var(--font-letter-spacing-2-5)}.collection-variant-display__subheading{font-size:var(--font-size-mobile-11);line-height:var(--font-line-height-mobile-14);letter-spacing:var(--font-letter-spacing-1-5)}.collection-variant-display__content{font-size:var(--font-size-mobile-13);line-height:var(--font-line-height-mobile-16)}.collection-variant-display__variant-nav-prefix{flex:0 0 auto;color:var(--colour-primary-black);font-family:var(--font-family-tt-commons-pro);font-size:var(--font-size-mobile-11);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-mobile-14);letter-spacing:var(--font-letter-spacing-1-5);text-transform:uppercase;white-space:nowrap}.collection-variant-display__variant-swatches{display:flex;align-items:center;min-width:0;max-width:calc(100vw - 96px);gap:var(--collection-variant-display-swatch-gap);overflow-x:auto;overflow-y:visible;overscroll-behavior-inline:contain;scrollbar-width:none}.collection-variant-display__variant-swatches::-webkit-scrollbar{display:none}.collection-variant-display__variant-swatch{position:relative;display:flex;align-items:center;justify-content:center;flex:0 0 var(--collection-variant-display-swatch-size);width:var(--collection-variant-display-swatch-size);min-width:var(--collection-variant-display-swatch-size);height:var(--collection-variant-display-swatch-size);padding:0;overflow:hidden;-webkit-appearance:none;appearance:none;color:var(--colour-primary-white);background-color:var( --collection-variant-display-swatch-colour, var(--colour-neutral-400) );background-image:var( --collection-variant-display-swatch-image, none );background-position:center;background-repeat:no-repeat;background-size:cover;border:var(--collection-variant-display-swatch-border-width) solid var(--collection-variant-display-swatch-border-colour);border-radius:var(--collection-variant-display-swatch-border-radius);cursor:pointer}.collection-variant-display__variant-swatch--active{flex-basis:auto;width:auto;min-width:var(--collection-variant-display-swatch-size);padding-inline:var( --collection-variant-display-swatch-active-padding )}.collection-variant-display__variant-swatch-label{display:block;width:auto;max-width:0;overflow:hidden;color:inherit;font-family:var(--font-family-tt-commons-pro);font-size:var(--font-size-mobile-11);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-mobile-14);letter-spacing:var(--font-letter-spacing-1-5);text-transform:uppercase;white-space:nowrap;opacity:0}.collection-variant-display__variant-swatch--active .collection-variant-display__variant-swatch-label{max-width:var( --collection-variant-display-swatch-label-max-width );opacity:1}.collection-variant-display__variant-swatch--empty{background-color:var(--colour-neutral-400);background-image:linear-gradient(135deg,var(--colour-neutral-300),var(--colour-neutral-500))}.collection-variant-display__variant-swatch:focus-visible{outline:2px solid var(--colour-primary-black);outline-offset:2px}.collection-variant-display__card{scroll-margin-top:calc(var(--collection-variant-display-nav-top) + 56px)}}@media(max-width:989px)and (prefers-reduced-motion:no-preference){.collection-variant-display__variant-swatch{transition:width var(--collection-variant-display-nav-transition-duration) var(--collection-variant-display-nav-transition-easing),flex-basis var(--collection-variant-display-nav-transition-duration) var(--collection-variant-display-nav-transition-easing),padding var(--collection-variant-display-nav-transition-duration) var(--collection-variant-display-nav-transition-easing)}.collection-variant-display__variant-swatch-label{transition:max-width var(--collection-variant-display-nav-transition-duration) var(--collection-variant-display-nav-transition-easing),opacity .2s ease}.collection-variant-display__variant-swatch--active .collection-variant-display__variant-swatch-label{transition:max-width var(--collection-variant-display-nav-transition-duration) var(--collection-variant-display-nav-transition-easing),opacity .25s ease .15s}}@media(prefers-reduced-motion:reduce){.collection-variant-display__default-media,.collection-variant-display__animation,.collection-variant-display__part--top,.collection-variant-display__part--center,.collection-variant-display__part--bottom,.collection-variant-display__variant-swatch,.collection-variant-display__variant-swatch-label{transition-duration:.01ms}}
/*# sourceMappingURL=/cdn/shop/t/2/assets/section-collection-variant-display.css.map */