/* =====================================================================
   Custom (layer) hero slides.
   Shared by the homepage and by the admin builder preview, so what you
   arrange in the builder is what visitors get.
   Font sizes use cqw (1% of the banner width) so text scales with the
   banner. Positions are percentages of the slide.
   Devices: desktop (default), tablet (max 1100px), mobile (max 820px).
   ===================================================================== */

.srh-slide__layers{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}

.srh-ly{
	position:absolute;
	left:var(--x,0%);top:var(--y,0%);width:var(--w,40%);height:var(--h,auto);
	display:var(--dd,block);
	font-size:calc(var(--fs,4) * 1cqw);
	line-height:var(--lh,1.15);font-weight:var(--fw,600);letter-spacing:var(--ls,0);
	color:var(--c,#fff);text-align:var(--al,left);opacity:var(--op,1);
	pointer-events:auto;box-sizing:border-box;margin:0;
	font-family:var(--srh-text,'Geist',system-ui,-apple-system,'Segoe UI',sans-serif);
}
.srh-ly *{box-sizing:border-box}
.srh-ly--disp{font-family:var(--srh-display,'Bricolage Grotesque','Geist',system-ui,sans-serif)}
.srh-ly--upper .srh-ly__in{text-transform:uppercase}

/* Reset theme typography inside a layer so nothing overrides the builder's choices. */
body .srh .srh-ly .srh-ly__in,
body .srhb__stage .srh-ly .srh-ly__in{
	margin:0;padding:0;color:inherit!important;font:inherit!important;letter-spacing:inherit!important;
	line-height:inherit!important;text-transform:inherit;text-align:inherit;
}

/* Text */
.srh-ly--text .srh-ly__in{display:inline-block;max-width:100%;white-space:pre-line;overflow-wrap:break-word;text-shadow:var(--tsh,none);text-wrap:balance}
.srh-ly--text.srh-ly--pill .srh-ly__in{background:var(--bgc,transparent);padding:var(--py,.55em) var(--px,1.1em);box-sizing:border-box;border-radius:calc(var(--rad,0) * .1cqw);text-wrap:wrap}

/* Image */
.srh-ly--img .srh-ly__in{display:block;width:100%}
.srh-ly--img img{display:block;width:100%;height:auto;max-width:none;object-fit:contain}
.srh-ly--sh img{filter:drop-shadow(0 2.4cqw 2.8cqw rgba(0,0,0,.42))}
.srh-ly--img a{display:block}

/* Button */
.srh-ly--btn .srh-ly__in{display:inline-block}
.srh-ly__btn{
	display:inline-flex;align-items:center;justify-content:center;gap:.6em;padding:.9em 1.7em;
	border-radius:calc(var(--rad,500) * .1cqw);font:inherit;font-weight:var(--fw,600);line-height:1;text-decoration:none;
	border:.09em solid transparent;transition:background .2s,color .2s,transform .2s;white-space:nowrap;cursor:pointer;
}
.srh-ly__btn:hover{transform:translateY(-1px)}
.srh-ly__btn svg{width:1.05em;height:1.05em;flex:none}
.srh-ly__btn--light{background:#fff;color:#111!important}
.srh-ly__btn--light:hover{background:#ffcf3a}
.srh-ly__btn--red{background:#d6301f;color:#fff!important}
.srh-ly__btn--red:hover{background:#b8271a}
.srh-ly__btn--yellow{background:#ffcf3a;color:#111!important}
.srh-ly__btn--yellow:hover{background:#fff}
.srh-ly__btn--dark{background:#111;color:#fff!important}
.srh-ly__btn--dark:hover{background:#d6301f}
.srh-ly__btn--outline{background:transparent;color:inherit!important;border-color:currentColor}
.srh-ly__btn--outline:hover{background:#fff;color:#111!important;border-color:#fff}

/* Shape */
.srh-ly--shape{background:var(--bgc,rgba(0,0,0,.35));border-radius:calc(var(--rad,0) * .1cqw);pointer-events:none}

/* Tablet + mobile positions (front end) */
@media (max-width:1100px){
	.srh-slide .srh-ly{left:var(--tx);top:var(--ty);width:var(--tw);height:var(--th,auto);font-size:calc(var(--tfs) * 1cqw);display:var(--dt,block)}
}
@media (max-width:820px){
	.srh-slide .srh-ly{left:var(--mx);top:var(--my);width:var(--mw);height:var(--mh,auto);font-size:calc(var(--mfs) * 1cqw);display:var(--dm,block)}
}

/* Same switch for the admin preview, driven by the device buttons. */
.srhb__stage[data-dev="t"] .srh-ly{left:var(--tx);top:var(--ty);width:var(--tw);height:var(--th,auto);font-size:calc(var(--tfs) * 1cqw);display:var(--dt,block)}
.srhb__stage[data-dev="m"] .srh-ly{left:var(--mx);top:var(--my);width:var(--mw);height:var(--mh,auto);font-size:calc(var(--mfs) * 1cqw);display:var(--dm,block)}

/* Entrance animations: play each time the slide becomes active. */
@keyframes srh-ly-fade{from{opacity:0}to{opacity:var(--op,1)}}
@keyframes srh-ly-up{from{opacity:0;transform:translateY(5cqw)}to{opacity:var(--op,1);transform:none}}
@keyframes srh-ly-down{from{opacity:0;transform:translateY(-5cqw)}to{opacity:var(--op,1);transform:none}}
@keyframes srh-ly-left{from{opacity:0;transform:translateX(-7cqw)}to{opacity:var(--op,1);transform:none}}
@keyframes srh-ly-right{from{opacity:0;transform:translateX(7cqw)}to{opacity:var(--op,1);transform:none}}
@keyframes srh-ly-zoom{from{opacity:0;transform:scale(.72)}to{opacity:var(--op,1);transform:none}}
@keyframes srh-ly-blur{from{opacity:0;filter:blur(14px)}to{opacity:var(--op,1);filter:none}}
@keyframes srh-ly-spin{from{opacity:0;transform:rotate(-14deg) scale(.8)}to{opacity:var(--op,1);transform:none}}
@keyframes srh-ly-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.8cqw)}}

.srh-slide.is-active .srh-ly[data-a],
.srhb__stage.is-playing .srh-ly[data-a]{animation-duration:var(--ad,.7s);animation-delay:var(--ade,0s);animation-timing-function:cubic-bezier(.2,.8,.2,1);animation-fill-mode:both}
.srh-slide.is-active .srh-ly[data-a="fade"],.srhb__stage.is-playing .srh-ly[data-a="fade"]{animation-name:srh-ly-fade}
.srh-slide.is-active .srh-ly[data-a="up"],.srhb__stage.is-playing .srh-ly[data-a="up"]{animation-name:srh-ly-up}
.srh-slide.is-active .srh-ly[data-a="down"],.srhb__stage.is-playing .srh-ly[data-a="down"]{animation-name:srh-ly-down}
.srh-slide.is-active .srh-ly[data-a="left"],.srhb__stage.is-playing .srh-ly[data-a="left"]{animation-name:srh-ly-left}
.srh-slide.is-active .srh-ly[data-a="right"],.srhb__stage.is-playing .srh-ly[data-a="right"]{animation-name:srh-ly-right}
.srh-slide.is-active .srh-ly[data-a="zoom"],.srhb__stage.is-playing .srh-ly[data-a="zoom"]{animation-name:srh-ly-zoom}
.srh-slide.is-active .srh-ly[data-a="blur"],.srhb__stage.is-playing .srh-ly[data-a="blur"]{animation-name:srh-ly-blur}
.srh-slide.is-active .srh-ly[data-a="spin"],.srhb__stage.is-playing .srh-ly[data-a="spin"]{animation-name:srh-ly-spin}

/* Endless gentle hover for products. */
.srh-slide.is-active .srh-ly[data-l="bob"] .srh-ly__in,
.srhb__stage.is-playing .srh-ly[data-l="bob"] .srh-ly__in{animation:srh-ly-bob 5s ease-in-out 1s infinite}

@media (prefers-reduced-motion:reduce){
	.srh-slide .srh-ly,.srh-slide .srh-ly .srh-ly__in{animation:none!important}
}