@property --slot-index{syntax: "<integer>"; inherits: false; initial-value: 0;}@property --slot-count{syntax: "<integer>"; inherits: true; initial-value: 1;}scent-canvas[data-has-applicator=false] .canvas-layer--applicator{display:none}scent-canvas{position:relative;display:block;width:100%;height:100%;overflow:hidden;--slot-width: auto;--slot-height: 23%;--slot-bottom: 50%;--slot-start: 45.5%;--slot-end: 75%;--slot-end-visible: 88.5%;--bar-left: 15.6%;--bar-bottom: 46.2%;--bar-height: 44.1%;--slot-pitch: 10.4%;--slot-recentre: .55;--group-shift: calc((var(--slot-count) - 1) * var(--slot-pitch) * var(--slot-recentre))}scent-canvas[data-has-applicator=false]{--slot-height: 38%;--slot-start: 10%;--slot-end: 68%;--slot-end-visible: 90.3%}scent-canvas.scent-canvas--xl[data-has-applicator=false]{--slot-height: 48%;--slot-start: 4%;--slot-end: 72%;--slot-end-visible: 90.3%}scent-canvas[hidden]{display:none}scent-canvas:not([data-canvas-layout=pitch])[data-slot-count="1"],scent-canvas:not([data-canvas-layout=pitch])[data-slot-count="2"]{--slot-height: 23%;--slot-bottom: 54%;--slot-start: 49.1%;--slot-end: 63%}scent-canvas:not([data-canvas-layout=pitch])[data-has-applicator=false][data-slot-count="1"],scent-canvas:not([data-canvas-layout=pitch])[data-has-applicator=false][data-slot-count="2"]{--slot-height: 33%;--slot-start: 33%;--slot-end: 55%}scent-canvas.scent-canvas--xl:not([data-canvas-layout=pitch])[data-has-applicator=false][data-slot-count="2"]{--slot-height: 41%;--slot-start: 30%;--slot-end: 59%}scent-canvas:not([data-canvas-layout=pitch])[data-slot-count="1"]{--slot-start: 61%;--applicator-shift: 6%}scent-canvas:not([data-canvas-layout=pitch])[data-slot-count="2"]{--slot-start: 53%;--slot-end: 67%;--applicator-shift: 0%}scent-canvas:not([data-canvas-layout=pitch]):not([data-has-applicator=false]):not([data-slot-count="1"]):not([data-slot-count="2"]){--slot-start: 35.5%;--slot-end: 65%;--slot-end-visible: 78.5%;--applicator-shift: -10%}scent-canvas:not([data-canvas-layout=pitch])[data-has-applicator=false][data-slot-count="1"]{--slot-start: 44%}scent-canvas:not([data-canvas-layout=pitch])[data-slot-count="1"] img,scent-canvas:not([data-canvas-layout=pitch])[data-slot-count="2"] img{scale:1.4}@media screen and (max-width:767px){scent-canvas:not([data-canvas-layout=pitch])[data-has-applicator=false][data-slot-count="2"]{--slot-height: 41%;--slot-start: 30%;--slot-end: 59%}scent-canvas:not([data-canvas-layout=pitch])[data-has-applicator=false][data-slot-count="3"]{--slot-height: 46%;--slot-start: 12%;--slot-end: 64%}}scent-canvas[data-canvas-layout=pitch]{--slot-height: 37.5%;--slot-start: 41.5%;--slot-bottom: 50%;--slot-pitch: 10.4%;--bar-left: 15.6%;--bar-bottom: 46.2%;--bar-height: 44.1%}.product__media--scent-canvas[hidden],.product__thumbnail--scent-canvas[hidden]{display:none!important}.canvas-layer{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:contain;pointer-events:none;opacity:1;transition:opacity .2s ease}.canvas-layer[hidden]{display:block;opacity:0;pointer-events:none}.canvas-layer--bg{z-index:0}.canvas-layer--bar{inset:auto;bottom:var(--bar-bottom);transform:translateY(50%);left:calc(var(--bar-left) - var(--group-shift));width:auto;height:var(--bar-height);z-index:1;object-fit:contain;object-position:left bottom;transition:left .25s ease}.canvas-layer--applicator{z-index:10;transition:none;transform:translate(var(--applicator-shift, 0%))}.canvas-layer--scent{inset:auto;bottom:var(--slot-bottom);transform:translateY(50%);width:var(--slot-width);--slot-shrink: calc(4/max(var(--slot-count), 4)) ;height:calc(var(--slot-height) * var(--slot-shrink));--slot-end-effective: calc( var(--slot-end-visible) - (var(--slot-end-visible) - var(--slot-end)) * var(--slot-shrink) );left:calc(var(--slot-start) + (var(--slot-end-effective) - var(--slot-start)) * var(--slot-index) / max(var(--slot-count) - 1,1));z-index:calc(2 + var(--slot-index));object-fit:contain;object-position:left bottom;transition:opacity .25s ease,left .25s ease}scent-canvas[data-canvas-layout=pitch] .canvas-layer--scent{height:var(--slot-height);left:calc(var(--slot-start) + var(--slot-index) * var(--slot-pitch) - var(--group-shift))}
/*# sourceMappingURL=/cdn/shop/t/149/assets/scent-canvas.css.map */