/* The Print Centre Storefront v2.3.0: homepage hero product slider. */
.tpc-hs{
	--hs-ink:#202b40;--hs-muted:#5d6b82;--hs-tint:#e8edf7;
	--hs-accent:#d7f65b;--hs-accent-ink:#202b40;
	--hs-ease:cubic-bezier(.22,.8,.24,1);--hs-pop:cubic-bezier(.34,1.45,.55,1);
	display:flex;flex-direction:column;gap:12px;
	background:var(--hs-tint);transition:background-color .9s ease;
	isolation:isolate;-webkit-tap-highlight-color:transparent
}
.tpc-hs[data-accent=lime]{--hs-tint:#eaf0e1}
.tpc-hs[data-accent=pink]{--hs-tint:#f6e7ef}
.tpc-hs[data-accent=cyan]{--hs-tint:#e2f1f5}
.tpc-hs[data-accent=orange]{--hs-tint:#f6eedf}
.tpc-hs[data-accent=purple]{--hs-tint:#ece6f7}
.tpc-hs-slide[data-accent=lime]{--hs-accent:#d7f65b;--hs-accent-ink:#202b40}
.tpc-hs-slide[data-accent=pink]{--hs-accent:#c8176f;--hs-accent-ink:#fff}
.tpc-hs-slide[data-accent=cyan]{--hs-accent:#17bbd2;--hs-accent-ink:#202b40}
.tpc-hs-slide[data-accent=orange]{--hs-accent:#f9a51a;--hs-accent-ink:#202b40}
.tpc-hs-slide[data-accent=purple]{--hs-accent:#8048dc;--hs-accent-ink:#fff}

/* Header row */
.tpc-hs-top{display:flex;align-items:center;justify-content:space-between;gap:12px;position:relative;z-index:3}
.tpc-home-page .tpc-hs .hp-art-label,.tpc-hs .hp-art-label{margin:0}
.tpc-home-page .tpc-hs .tpc-hs-count,.tpc-hs .tpc-hs-count{margin:0;font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--hs-muted);font-variant-numeric:tabular-nums;line-height:1}
.tpc-hs-count [data-hs-current]{color:var(--hs-ink)}
.tpc-hs-count-sep{margin:0 5px;opacity:.5}

/* Stage */
.tpc-hs-viewport{position:relative;flex:1 1 auto;display:grid;min-height:340px;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.tpc-hs-slide{grid-area:1/1;position:relative;visibility:hidden;pointer-events:none}
.tpc-hs-slide.is-active{visibility:visible;pointer-events:auto;z-index:2}
.tpc-hs-slide.is-leaving{visibility:visible;z-index:1}

/* Printed piece */
.tpc-hs-print{
	--x:26%;--r:7deg;--s:.9;
	position:absolute;left:4%;top:3%;width:66%;aspect-ratio:.96;display:block;
	background:#fff;border-radius:10px;
	box-shadow:0 1px 2px #20304a14,0 22px 40px -12px #20304a40;
	opacity:0;transform:translate3d(var(--x),0,0) rotate(var(--r)) scale(var(--s));
	transition:none;will-change:transform,opacity
}
.tpc-hs-slide.is-active .tpc-hs-print{--x:0%;--r:-6deg;--s:1;opacity:1;transition:transform .9s var(--hs-ease),opacity .55s ease,box-shadow .35s ease}
.tpc-hs-slide.is-leaving .tpc-hs-print{--x:-30%;--r:-17deg;--s:.88;opacity:0;transition:transform .8s var(--hs-ease),opacity .5s ease .1s}
.tpc-hs[data-dir=prev] .tpc-hs-slide:not(.is-active):not(.is-leaving) .tpc-hs-print{--x:-30%;--r:-17deg}
.tpc-hs[data-dir=prev] .tpc-hs-slide.is-leaving .tpc-hs-print{--x:26%;--r:7deg}
.tpc-hs-print .tpc-hs-img{position:absolute;inset:0;width:100%;height:100%!important;object-fit:cover;border-radius:inherit;transform:scale(1.001);transition:transform .6s var(--hs-ease)}
.tpc-hs.is-playing .tpc-hs-slide.is-active .tpc-hs-img{animation:tpcHsDrift calc(var(--hs-interval,6000ms) + 1.2s) ease-out both}
.tpc-hs.is-paused .tpc-hs-slide.is-active .tpc-hs-img{animation-play-state:paused}
a.tpc-hs-print:hover{box-shadow:0 1px 2px #20304a14,0 30px 50px -14px #20304a59}
.tpc-hs-slide.is-active a.tpc-hs-print:hover{--r:-4deg;--s:1.015}

/* Crop marks around the printed piece */
.tpc-hs-crop{position:absolute;inset:-15px;pointer-events:none;--c:#8592a8;opacity:.55;
	background:
		linear-gradient(var(--c),var(--c)) left 0 top 15px/9px 1px no-repeat,
		linear-gradient(var(--c),var(--c)) left 15px top 0/1px 9px no-repeat,
		linear-gradient(var(--c),var(--c)) right 0 top 15px/9px 1px no-repeat,
		linear-gradient(var(--c),var(--c)) right 15px top 0/1px 9px no-repeat,
		linear-gradient(var(--c),var(--c)) left 0 bottom 15px/9px 1px no-repeat,
		linear-gradient(var(--c),var(--c)) left 15px bottom 0/1px 9px no-repeat,
		linear-gradient(var(--c),var(--c)) right 0 bottom 15px/9px 1px no-repeat,
		linear-gradient(var(--c),var(--c)) right 15px bottom 0/1px 9px no-repeat}
.tpc-hs-tag{position:absolute;left:12px;top:12px;z-index:1;padding:5px 9px 4px;border-radius:99px;background:#ffffffeb;color:var(--hs-ink);font-size:9px;font-weight:800;letter-spacing:.14em;line-height:1.2;text-transform:uppercase;box-shadow:0 2px 8px #20304a1f}

/* Sticker with copy + call to action */
.tpc-hs-sticker{
	position:absolute;right:0;bottom:2%;z-index:2;width:min(240px,56%);
	display:flex;flex-direction:column;gap:8px;padding:20px 20px 17px;
	background:var(--hs-accent);color:var(--hs-accent-ink)!important;text-decoration:none!important;
	box-shadow:0 14px 26px -10px #20304a4d;border-radius:3px;
	opacity:0;transform:translate3d(0,22px,0) rotate(9deg) scale(.94);transition:none
}
.tpc-hs-slide.is-active .tpc-hs-sticker{opacity:1;transform:translate3d(0,0,0) rotate(5deg) scale(1);transition:transform .75s var(--hs-pop) .28s,opacity .4s ease .28s,box-shadow .3s ease}
.tpc-hs-slide.is-leaving .tpc-hs-sticker{opacity:0;transform:translate3d(0,14px,0) rotate(2deg) scale(.96);transition:transform .4s ease,opacity .3s ease}
.tpc-hs-headline{display:block;font-size:21px;line-height:1.08;letter-spacing:-.04em;font-weight:600;text-transform:uppercase}
.tpc-hs-headline strong{display:block;font-weight:800}
.tpc-hs-caption{display:block;font-size:11.5px;line-height:1.45;opacity:.88}
.tpc-hs-price{align-self:flex-start;font-size:11px;font-weight:800;padding:3px 8px;border-radius:99px;background:color-mix(in srgb,var(--hs-accent-ink) 12%,transparent)}
.tpc-hs-cta{display:block;margin-top:2px;font-size:12px;line-height:1.35;font-weight:800;letter-spacing:.01em}
.tpc-hs-cta svg{display:inline-block;vertical-align:-3px;margin-left:5px;width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s ease}
a.tpc-hs-sticker:hover{box-shadow:0 20px 32px -12px #20304a66}
a.tpc-hs-sticker:hover .tpc-hs-cta svg,a.tpc-hs-sticker:focus-visible .tpc-hs-cta svg{transform:translateX(4px)}
a.tpc-hs-sticker:hover .tpc-hs-cta{text-decoration:underline;text-underline-offset:3px}
.tpc-hs a:focus-visible,.tpc-hs button:focus-visible{outline:3px solid var(--pms-blue,#438cf1);outline-offset:3px}

/* Controls */
.tpc-hs-controls{display:flex;align-items:center;justify-content:space-between;gap:10px;position:relative;z-index:3}
.tpc-hs-dots{display:flex;align-items:center;flex-wrap:wrap}
.tpc-hs .tpc-hs-dot{appearance:none;border:0;background:none;margin:0;padding:14px 4px;cursor:pointer;line-height:0;min-height:0;box-shadow:none}
.tpc-hs-dot-fill{position:relative;display:block;width:8px;height:8px;border-radius:99px;overflow:hidden;background:#20304a2e;transition:width .45s var(--hs-ease),background-color .3s}
.tpc-hs-dot:hover .tpc-hs-dot-fill{background:#20304a52}
.tpc-hs-dot[aria-current=true] .tpc-hs-dot-fill{width:38px;background:#20304a24}
.tpc-hs-dot-fill::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--hs-ink);transform:scaleX(0);transform-origin:left center}
.tpc-hs-dot[aria-current=true] .tpc-hs-dot-fill::after{transform:scaleX(1)}
.tpc-hs.is-playing .tpc-hs-dot[aria-current=true] .tpc-hs-dot-fill::after{animation:tpcHsProgress var(--hs-interval,6000ms) linear forwards}
.tpc-hs.is-paused .tpc-hs-dot[aria-current=true] .tpc-hs-dot-fill::after{animation-play-state:paused}
.tpc-hs-buttons{display:flex;gap:6px}
.tpc-hs .tpc-hs-btn{appearance:none;display:grid;place-items:center;width:40px;height:40px;min-height:0;padding:0;margin:0;border-radius:50%;border:1px solid #20304a1f;background:#fff;color:var(--hs-ink);cursor:pointer;box-shadow:0 2px 6px #20304a14;transition:background-color .2s,color .2s,transform .2s}
.tpc-hs .tpc-hs-btn:hover{background:var(--hs-ink);color:#fff}
.tpc-hs .tpc-hs-btn:active{transform:scale(.94)}
.tpc-hs-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.tpc-hs-btn .i-play{fill:currentColor;stroke-width:1.4}
.tpc-hs-play .i-play,.tpc-hs.is-stopped .tpc-hs-play .i-pause{display:none}
.tpc-hs.is-stopped .tpc-hs-play .i-play{display:block}

@keyframes tpcHsProgress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes tpcHsDrift{from{transform:scale(1.001)}to{transform:scale(1.06)}}

/* Before the script runs, show only the first slide. */
.tpc-hs:not(.is-ready) .tpc-hs-slide:first-child .tpc-hs-print{--x:0%;--r:-6deg;--s:1;opacity:1}
.tpc-hs:not(.is-ready) .tpc-hs-slide:first-child .tpc-hs-sticker{opacity:1;transform:rotate(5deg)}

@media (max-width:900px){
	.tpc-hs-viewport{min-height:310px}
	.tpc-hs-sticker{width:min(205px,58%);padding:16px 16px 14px}
	.tpc-hs-headline{font-size:18px}
}
@media (max-width:600px){
	.tpc-hs.hp-hero-art{min-height:0;padding:20px 18px 12px}
	.tpc-hs-viewport{min-height:0;aspect-ratio:1/.92}
	.tpc-hs-print{left:3%;top:4%;width:64%}
	.tpc-hs-crop{inset:-11px}
	.tpc-hs-sticker{width:min(190px,60%);bottom:0;gap:6px;padding:14px 14px 12px}
	.tpc-hs-headline{font-size:16px}
	.tpc-hs-caption{font-size:10.5px}
	.tpc-hs-tag{left:9px;top:9px;font-size:8px}
}

@media (prefers-reduced-motion:reduce){
	.tpc-hs .tpc-hs-img{animation:none!important}
	.tpc-hs{transition:none}
	.tpc-hs-slide .tpc-hs-print,.tpc-hs-slide .tpc-hs-sticker,.tpc-hs[data-dir] .tpc-hs-slide .tpc-hs-print{--x:0%;--s:1;--r:-6deg}
	.tpc-hs-slide .tpc-hs-sticker{transform:rotate(5deg)}
	.tpc-hs-slide.is-active .tpc-hs-print,.tpc-hs-slide.is-active .tpc-hs-sticker,.tpc-hs-slide.is-leaving .tpc-hs-print,.tpc-hs-slide.is-leaving .tpc-hs-sticker{transition:opacity .35s ease}
	.tpc-hs-slide.is-active .tpc-hs-sticker{transform:rotate(5deg)}
	.tpc-hs-slide.is-active a.tpc-hs-print:hover{--r:-6deg;--s:1}
}
