/* Home hero v5: bold retail-app banner (compact on phones). Also the admin-editable top bar switch. */

@media(min-width:900px){
  #shell-header.no-tb .topbar{display:none}
  #shell-header.no-tb{top:0}
}

.hero.hb{position:relative;margin-top:14px;--fh:clamp(190px,54vw,228px);--r:20px}
.hb-vp{position:relative;height:var(--fh);clip-path:inset(-46px 0 0 0);touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.hb-skel{height:var(--fh);border-radius:var(--r)}
.hb-frame{position:absolute;inset:0}
.hb-s{position:absolute;inset:0;border-radius:var(--r);color:#fff;display:flex;align-items:center;padding:0 clamp(16px,4vw,26px) 0 clamp(18px,5vw,28px);transition:transform .7s cubic-bezier(.22,1,.36,1),opacity .5s ease;will-change:transform,opacity;visibility:hidden;opacity:0;box-shadow:0 14px 30px rgba(11,40,70,.28)}
.hb-s.act{visibility:visible;opacity:1}
.hb-bg{position:absolute;inset:0;border-radius:inherit;overflow:hidden;z-index:0;background:linear-gradient(115deg,var(--c1) 0%,var(--c2) 100%)}
.hb-bg:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 78% 18%,rgba(255,255,255,.34),transparent 46%),radial-gradient(circle at 0% 100%,rgba(0,0,0,.28),transparent 50%),radial-gradient(rgba(255,255,255,.16) 1px,transparent 1.3px);background-size:auto,auto,16px 16px}
.hb-rays{position:absolute;right:-18%;top:50%;width:92%;aspect-ratio:1;margin-top:-46%;border-radius:50%;background:repeating-conic-gradient(rgba(255,255,255,.2) 0 6deg,transparent 6deg 18deg);-webkit-mask-image:radial-gradient(circle,#000 0,transparent 66%);mask-image:radial-gradient(circle,#000 0,transparent 66%)}
.hb-sheen{position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.2) 50%,transparent 65%);background-size:260% 100%;background-position:130% 0}
.hb-sp{position:absolute;width:14px;height:14px;background:#fff;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);opacity:0}
.hb-sp.s1{right:46%;top:12%}.hb-sp.s2{right:6%;top:58%;width:10px;height:10px}.hb-sp.s3{right:30%;bottom:14%;width:12px;height:12px}
.hb-dot{position:absolute;border-radius:50%;background:#fff;opacity:.5}
.hb-dot.d1{width:7px;height:7px;right:40%;top:30%}.hb-dot.d2{width:5px;height:5px;right:12%;top:16%}.hb-dot.d3{width:9px;height:9px;right:3%;bottom:30%;opacity:.3}
.hb-leaf{position:absolute;width:20px;height:20px;border-radius:0 100% 0 100%;background:rgba(255,255,255,.28);transform:rotate(20deg)}
.hb-leaf.l1{right:34%;top:6%}.hb-leaf.l2{right:2%;top:44%;width:14px;height:14px;transform:rotate(-30deg)}
.hb-drop{position:absolute;right:50%;bottom:10%;width:10px;height:10px;border-radius:50% 0 50% 50%;background:rgba(255,255,255,.4);transform:rotate(-45deg)}
.hb-link{position:absolute;inset:0;z-index:3;border-radius:inherit}
/* text */
.hb-tx{position:relative;z-index:4;max-width:56%;pointer-events:none}
.hb-tx a{pointer-events:auto}
.hb-tx h2{color:#fff;margin:0 0 6px;font-weight:800;font-size:clamp(21px,6.3vw,25px);line-height:1.06;letter-spacing:-.03em;text-shadow:0 2px 12px rgba(0,0,0,.22);text-wrap:balance}
.hb-tx h2 .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .02em .1em;margin-bottom:-.1em}
.hb-tx h2 .w>span{display:inline-block}
.hb-tx p{margin:0 0 12px;font-size:12.5px;line-height:1.35;font-weight:600;color:rgba(255,255,255,.96);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb-cta{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:8px;background:linear-gradient(180deg,#fff,#e9f1f4);color:#0b3b46;font-weight:800;font-size:13.5px;border-radius:999px;padding:3px 4px 3px 15px;min-height:38px;box-shadow:0 8px 18px rgba(0,0,0,.28),inset 0 1px 0 #fff;text-decoration:none!important;transition:transform .25s var(--ease),box-shadow .25s}
.hb-cta:before{content:"";position:absolute;top:0;bottom:0;left:-70px;width:44px;background:linear-gradient(100deg,transparent,rgba(255,255,255,.95),transparent);transform:skewX(-20deg)}
.hb-cta i{width:30px;height:30px;border-radius:50%;background:#0b3b46;color:#fff;display:grid;place-items:center;font-style:normal;transition:transform .3s var(--ease)}
.hb-cta i .ic{width:16px;height:16px;stroke-width:2.8}
.hb-cta:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(0,0,0,.34)}
.hb-cta:hover i{transform:translateX(3px)}
.hb-cta:focus-visible{outline:3px solid #fff;outline-offset:3px}
/* product art: big, bleeding off the right and popping above the card, no mask */
.hb-art{position:absolute;z-index:2;right:1%;bottom:-4%;height:96%;aspect-ratio:2/1;pointer-events:none;translate:calc(var(--mx,0)*8px) calc(var(--my,0)*5px);transition:translate .35s ease-out}
.hb-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;filter:drop-shadow(0 12px 12px rgba(0,0,0,.28));transform-origin:70% 100%}
.hb-art img.ld{opacity:1;transition:opacity .4s}
.hb-art .emo{position:absolute;right:12%;bottom:8%;font-size:96px;line-height:1;filter:drop-shadow(0 10px 10px rgba(0,0,0,.3))}
/* sticker */
.hb-sticker{position:absolute;z-index:5;right:5%;top:6%;width:66px;height:66px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;line-height:1;background:linear-gradient(145deg,#ffe066,#ff9f1c);color:#7a2500;transform:rotate(12deg);filter:drop-shadow(0 4px 6px rgba(0,0,0,.3));padding:6px;pointer-events:none}
.hb-sticker b{font-size:14px;font-weight:800;letter-spacing:-.02em}
.hb-sticker small{font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.02em;margin-top:2px;max-width:52px}
/* photo banners */
.hb-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;border-radius:inherit;opacity:0}
.hb-photo.ld{opacity:1;transition:opacity .6s}
.hb-s.act .hb-photo{animation:hbkb 14s ease-out both}
.hb-shade{position:absolute;inset:0;z-index:1;border-radius:inherit;background:linear-gradient(90deg,rgba(6,30,45,.86) 0,rgba(6,30,45,.55) 46%,rgba(6,30,45,.05) 100%)}
.hb-s.has-photo .hb-bg{display:none}
.hb-s.has-photo{background:#0b3b46}
@keyframes hbkb{from{transform:scale(1.02)}to{transform:scale(1.1)}}
/* motion (only the active slide animates) */
.hb-s.act .hb-tx h2 .w>span{animation:hbpop .65s calc(.05s + var(--i)*60ms) cubic-bezier(.34,1.56,.64,1) both}
.hb-s.act .hb-tx p{animation:hbfade .6s .3s var(--ease) both}
.hb-s.act .hb-cta{animation:hbfade .6s .42s var(--ease) both}
.hb-s.act .hb-cta:before{animation:hbshine 3.4s 1.2s ease-in-out infinite}
.hb-s.act .hb-art img.ld{animation:hbart .9s .08s cubic-bezier(.34,1.45,.5,1) both}
.hb-s.act .hb-art{animation:hbfloat 6.5s 1.1s ease-in-out infinite}
.hb-s.act .hb-sticker{animation:hbstick .7s .45s cubic-bezier(.34,1.7,.5,1) both,hbwob 3.2s 1.2s ease-in-out infinite}
.hb-s.act .hb-rays{animation:hbspin 50s linear infinite}
.hb-s.act .hb-sheen{animation:hbsheen 6.5s ease-in-out infinite}
.hb-s.act .hb-sp{animation:hbtw 2.6s ease-in-out infinite}
.hb-s.act .hb-sp.s2{animation-delay:.8s}.hb-s.act .hb-sp.s3{animation-delay:1.5s}
.hb-s.act .hb-dot{animation:hbdrift 5s ease-in-out infinite alternate}
.hb-s.act .hb-dot.d2{animation-delay:1s}.hb-s.act .hb-dot.d3{animation-delay:2s}
.hb-s.act .hb-leaf{animation:hbleaf 6s ease-in-out infinite alternate}
.hb-s.act .hb-leaf.l2{animation-delay:1.6s}
.hb-s.act .hb-drop{animation:hbdrift 4s ease-in-out infinite alternate}
@keyframes hbpop{from{opacity:0;transform:translateY(110%) scale(.9)}to{opacity:1;transform:none}}
@keyframes hbfade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes hbart{0%{opacity:0;transform:translateY(46px) scale(.82)}60%{opacity:1;transform:translateY(-6px) scale(1.03)}100%{opacity:1;transform:none}}
@keyframes hbfloat{50%{transform:translateY(-6px)}}
@keyframes hbstick{from{opacity:0;transform:rotate(-20deg) scale(.2)}to{opacity:1;transform:rotate(12deg) scale(1)}}
@keyframes hbwob{0%,100%{transform:rotate(12deg) scale(1)}50%{transform:rotate(7deg) scale(1.07)}}
@keyframes hbshine{0%{left:-70px}34%,100%{left:130%}}
@keyframes hbspin{to{transform:rotate(360deg)}}
@keyframes hbsheen{0%{background-position:130% 0}55%,100%{background-position:-30% 0}}
@keyframes hbtw{0%,100%{opacity:0;transform:scale(.4) rotate(0)}50%{opacity:.95;transform:scale(1) rotate(45deg)}}
@keyframes hbdrift{to{transform:translate(-6px,-10px)}}
@keyframes hbleaf{to{transform:translate(-8px,-12px) rotate(50deg)}}
/* dots (indicator + autoplay driver) */
.hb-dots{position:absolute;left:0;right:0;top:calc(var(--fh) + 7px);display:flex;justify-content:center;gap:7px;z-index:6;height:16px;align-items:center}
.hb-dots button{position:relative;width:8px;height:8px;padding:0;border:0;border-radius:6px;background:rgba(11,74,85,.22);overflow:hidden;transition:width .45s cubic-bezier(.34,1.4,.5,1),background .3s}
.hb-dots button:before{content:"";position:absolute;inset:-12px -4px}
.hb-dots button.on{width:30px;background:rgba(11,74,85,.2)}
.hb-dots button i{position:absolute;inset:0;border-radius:6px;background:var(--grad);transform:scaleX(0);transform-origin:left;display:block}
.hb-dots button.on i{transform:scaleX(1)}
.hero.autoplay .hb-dots button.on i{transform:scaleX(0);animation:hbprog 6s linear forwards}
.hero.autoplay.paused .hb-dots button.on i{animation-play-state:paused}
@keyframes hbprog{to{transform:scaleX(1)}}
.hb-dots button:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.hero.hb:has(.hb-dots){padding-bottom:26px}
.hb-nav,.hb-feats{display:none}
@media(hover:none){.hb-nav{display:none!important}}

/* tablet + desktop */
@media(min-width:700px){
  .hero.hb{--fh:clamp(330px,29vw,400px);--r:28px;margin-top:18px}
  .hb-s{padding:0 clamp(36px,5vw,76px)}
  .hb-tx{max-width:46%}
  .hb-tx h2{font-size:clamp(34px,3.9vw,56px);line-height:1.02;margin-bottom:12px}
  .hb-tx p{font-size:clamp(14px,1.3vw,17px);white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-bottom:22px;max-width:420px}
  .hb-cta{font-size:16px;min-height:52px;padding:5px 6px 5px 24px;gap:12px}
  .hb-cta i{width:40px;height:40px}
  .hb-cta i .ic{width:19px;height:19px}
  .hb-art{right:-1%;bottom:-4%;height:118%}
  .hb-sticker{width:clamp(84px,8.4vw,116px);height:clamp(84px,8.4vw,116px);right:4%;top:7%}
  .hb-sticker b{font-size:clamp(17px,1.8vw,24px)}
  .hb-sticker small{font-size:clamp(9px,.9vw,11px);max-width:84%}
  .hb-sp{width:20px;height:20px}.hb-dot.d1{width:9px;height:9px}
  .hb-leaf{width:28px;height:28px}
  /* dots sit bottom-left under the text, inside the card */
  .hb-dots{left:clamp(36px,5vw,76px);right:auto;top:calc(var(--fh) - 40px);justify-content:flex-start}
  .hb-dots button{background:rgba(255,255,255,.42)}
  .hb-dots button.on{background:rgba(255,255,255,.35)}
  .hb-dots button i{background:#fff}
  .hero.hb:has(.hb-dots){padding-bottom:0}
  .hb-nav{display:grid;position:absolute;top:calc(var(--fh)/2);z-index:6;width:42px;height:42px;margin-top:-21px;border-radius:50%;border:1px solid rgba(255,255,255,.55);background:rgba(255,255,255,.22);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;place-items:center;opacity:0;transition:opacity .25s,transform .25s var(--ease),background .2s;box-shadow:0 8px 20px rgba(0,0,0,.18)}
  .hb-nav.prev{left:14px}.hb-nav.next{right:14px}
  .hero.hb:hover .hb-nav,.hb-nav:focus-visible{opacity:1}
  .hb-nav:hover{background:rgba(255,255,255,.4);transform:scale(1.08)}
  .hb-nav .ic{width:20px;height:20px;stroke-width:2.6}
}
@media(min-width:900px){
  .hb-feats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
  .hb-feats>div{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px 16px;box-shadow:var(--sh-sm)}
  .hb-feats i{width:42px;height:42px;border-radius:13px;background:var(--grad-soft);color:var(--blue);display:grid;place-items:center;flex:none}
  .hb-feats i .ic{width:22px;height:22px}
  .hb-feats b{display:block;color:var(--teal);font-size:14.5px}
  .hb-feats small{display:block;color:var(--muted);font-size:12.5px;line-height:1.3}
}
@media(prefers-reduced-motion:reduce){
  .hb-s{transition-duration:.01ms}
  .hb-tx h2 .w>span,.hb-tx p,.hb-cta,.hb-art img,.hb-sticker{opacity:1!important;transform:none!important;animation:none!important}
  .hb-sticker{transform:rotate(12deg)!important}
  .hb-rays,.hb-sheen,.hb-sp,.hb-dot,.hb-leaf,.hb-drop,.hb-cta:before,.hb-s.act .hb-photo{animation:none!important}
  .hb-sp{opacity:.6}
}