/* home banner slideshow: slide 1 is the original portal title, the others carry real product photos */
.hero.hs{display:block;padding:0;min-height:clamp(250px,34vw,330px)}
.hs-track{position:relative;z-index:1;display:grid;min-height:inherit}
.hs-slide{grid-area:1/1;position:relative;display:grid;align-items:center;gap:30px;padding:clamp(26px,5vw,56px) clamp(26px,5vw,56px) calc(clamp(26px,5vw,56px) + 12px);opacity:0;visibility:hidden;transform:translateX(-18px);transition:opacity .55s ease,transform .55s ease,visibility 0s .55s}
.hs-slide.on{opacity:1;visibility:visible;transform:none;transition:opacity .55s ease,transform .55s ease}
.hs-slide.title{grid-template-columns:minmax(0,1.2fr) minmax(220px,.8fr)}
.hs-slide.pic{grid-template-columns:1fr;color:var(--ms-navy);overflow:hidden}
.hero.hs[data-slide=pic]{background:linear-gradient(116deg,#fff8e1 0%,#fff3d0 55%,#ffe9a8 100%);border-color:rgba(5,25,52,.08)}
.hero.hs[data-slide=pic]:before,.hero.hs[data-slide=pic]:after{opacity:.35}
.hs-slide.title h1{position:relative;max-width:620px}
.hs-copy{position:relative;z-index:1;display:grid;gap:10px;justify-items:start;max-width:min(52%,520px)}
.hs-copy h2{margin:0;color:var(--ms-navy);font-size:clamp(24px,3.4vw,38px);line-height:1.45;letter-spacing:-.02em}
.hs-copy p{margin:0;max-width:44ch;color:#4a4330;font-size:clamp(14px,1.5vw,16px);line-height:1.9}
.hs-cta{display:inline-flex;align-items:center;gap:8px;min-height:46px;margin-top:6px;padding:0 20px;border-radius:14px;background:var(--ms-navy);color:#fff;font:800 15px/1 Estedad,Tahoma,sans-serif;text-decoration:none;box-shadow:0 10px 24px rgba(5,25,52,.22);transition:transform .15s}
.hs-cta:hover{transform:translateY(-2px)}
.hs-cta svg{width:18px;height:18px}
.hs-art{position:absolute;inset:0 0 34px;z-index:0;display:block}
.hs-art img{display:block;width:100%;height:100%;object-fit:contain;object-position:left center}

.hs-dots{position:absolute;z-index:3;left:50%;bottom:5px;translate:-50% 0;display:flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;background:rgba(5,25,52,.35);backdrop-filter:blur(6px)}
.hs-dot{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.55);cursor:pointer;transition:width .2s,background .2s}
.hs-dot[aria-selected=true]{width:22px;border-radius:999px;background:var(--ms-gold,#ffcc2a)}
.hs-pause{display:grid;place-items:center;width:22px;height:22px;margin-inline-start:4px;padding:0;border:0;border-radius:50%;background:transparent;color:#fff;cursor:pointer}
.hs-pause svg{width:12px;height:12px}
.hs-pause .pl{display:none}.hs-pause.on .pa{display:none}.hs-pause.on .pl{display:block}
.hs-dot:focus-visible,.hs-pause:focus-visible,.hs-cta:focus-visible{outline:3px solid #90adff;outline-offset:2px}

/* the bell sits on top of the slides and stays readable on the light picture slides */
.hero.hs .upd-bell{z-index:4}
.hero.hs[data-slide=pic] .upd-bell{background:rgba(5,25,52,.08);border-color:rgba(5,25,52,.15);color:var(--ms-navy)}
.hero.hs.has-bell .hs-slide.pic .hs-copy h2{padding-inline-start:54px}

/* greeting slide of an occasion: the tone of the occasion tints the whole banner */
.hero.hs[data-tone=mint]{background:linear-gradient(116deg,#f1fbf4 0%,#dff5e7 55%,#c4ebd2 100%)}
.hero.hs[data-tone=rose]{background:linear-gradient(116deg,#fff3f6 0%,#ffe3ea 55%,#ffcbd8 100%)}
.hero.hs[data-tone=sky]{background:linear-gradient(116deg,#f2f8ff 0%,#dfeafc 55%,#c5dcf8 100%)}
.hero.hs[data-tone=sun]{background:linear-gradient(116deg,#fff8e8 0%,#ffeac2 55%,#ffd28f 100%)}
.hero.hs[data-tone=plum]{background:linear-gradient(116deg,#241031 0%,#3b1a4d 55%,#5a2468 100%);border-color:rgba(255,255,255,.1)}
.hs-slide.event[data-tone=plum] .hs-copy h2,.hs-slide.event[data-tone=plum] .hs-copy p{color:#fff}
.hs-slide.event[data-tone=plum] .hs-cta{background:#ffcc2a;color:#051934}
.hero.hs[data-slide=pic][data-tone=plum] .upd-bell{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3);color:#fff}
.hs-slide.event{min-height:inherit}

@media(max-width:760px){
  .hero.hs{min-height:0}
  .hs-slide{padding:24px 18px 46px}
  .hs-slide.title{grid-template-columns:1fr}
  .hs-slide.pic{min-height:420px;align-items:start}
  .hs-copy{max-width:none}
  .hs-copy p{display:none}
  /* on a phone the picture is a row under the words and takes all the room that is left, so it is big and still never under the text */
  .hs-slide.pic{grid-template-rows:auto minmax(210px,1fr);gap:8px}
  .hs-art{position:relative;inset:auto;height:100%;min-height:210px;margin-bottom:34px}
  .hs-art img{position:absolute;inset:0;object-position:center}
}
@media(prefers-reduced-motion:reduce){.hs-slide,.hs-slide.on{transition:none;transform:none}}
.hs-dots[hidden]{display:none}

/* a fair slide: the picture sits whole (never cropped) in its own box on the side away from the text, so it can never go under the words */
.hs-slide.fair .hs-art{inset:14px auto 48px 18px;width:min(40%,420px)}
.hs-slide.fair .hs-art img{transform:none;object-fit:contain;object-position:center}
.hs-slide.fair .hs-copy{max-width:min(54%,560px)}
.hs-slide.fair .hs-copy p{max-width:48ch}
@media(max-width:760px){
  .hs-slide.fair .hs-art{inset:auto;width:auto;height:100%}
  .hs-slide.fair .hs-art img{object-position:center}
  .hs-slide.fair .hs-copy{max-width:none}
}
.hs-dot{position:relative}.hs-dot::before{content:"";position:absolute;inset:-14px -4px}
.hs-pause{position:relative}.hs-pause::before{content:"";position:absolute;inset:-8px}

/* phones, final: the banner pictures are tall with the empty part on top, so the picture takes the whole slide, sits at the bottom and is as wide
   as the slide (big); the words are above it. A fair picture is square, so it keeps its own row below the words instead. */
@media(max-width:760px){
  .hs-slide.pic{grid-template-rows:none;min-height:400px}
  .hs-art{position:absolute;inset:0 0 34px;height:auto;min-height:0;margin:0}
  .hs-art img{position:static;width:100%;height:100%;object-fit:contain;object-position:center bottom}
  .hs-slide.fair{grid-template-rows:auto minmax(220px,1fr);min-height:470px}
  .hs-slide.fair .hs-art{position:relative;inset:auto;height:100%;min-height:220px;margin:0 0 34px}
  .hs-slide.fair .hs-art img{position:absolute;inset:0;object-position:center}
}

/* direction of the slides (right-to-left page): next comes in from the left and the old slide leaves to the right */
.hero[data-dir=next] .hs-slide{transform:translateX(34px)}
.hero[data-dir=prev] .hs-slide{transform:translateX(-34px)}
.hero .hs-slide.on{transform:none}
.hero[data-dir=next] .hs-slide.on{animation:hs-in-l .6s cubic-bezier(.2,.8,.2,1) both}
.hero[data-dir=prev] .hs-slide.on{animation:hs-in-r .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes hs-in-l{from{opacity:0;transform:translateX(-34px)}to{opacity:1;transform:none}}
@keyframes hs-in-r{from{opacity:0;transform:translateX(34px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.hero[data-dir] .hs-slide.on{animation:none}}

/* visitors: fairs show only as banner slides, with no button to the fairs page */
html[data-anon] .hs-slide.fair .hs-cta{display:none}