/* ========================================================================== 
   UPS BATTERY SHOP — Hero Product Cinema v5.3
   The supplied product video is no longer a site-wide moving wallpaper.
   It now acts as the hero's visual anchor: blended, cinematic and intentional.
   Brand palette: #111111 #FEE01C #FFF3A3 #FEE01C
   ========================================================================== */

body.public:not(.solo){
  --video-navy:#111111;
  --video-steel:#FEE01C;
  --video-ice:#FFF3A3;
  --video-orange:#FEE01C;
}

/* The old global fixed video is intentionally disabled in v5.3. */
.site-video-background{display:none!important}

body.public .wp-video-art{
  position:relative;
  min-height:440px;
  display:grid;
  place-items:center;
  perspective:1200px;
  isolation:isolate;
}

body.public .wp-video-stage{
  --rx:0deg;
  --ry:0deg;
  position:relative;
  width:min(100%,560px);
  min-height:420px;
  display:grid;
  place-items:center;
  transform:rotateX(var(--rx)) rotateY(var(--ry));
  transform-style:preserve-3d;
  transition:transform .55s cubic-bezier(.2,.8,.2,1);
}

body.public .wp-video-stage::before{
  content:"";
  position:absolute;
  width:88%;
  aspect-ratio:1;
  border-radius:50%;
  background:
    radial-gradient(circle at 36% 28%,rgba(255,255,255,.98) 0 8%,transparent 28%),
    radial-gradient(circle at 52% 54%,rgba(255,243,163,.78),rgba(255,243,163,.16) 53%,transparent 72%);
  filter:blur(.1px);
  box-shadow:0 45px 90px rgba(17,17,17,.15),inset 0 0 0 1px rgba(254,224,28,.14);
  transform:translateZ(-42px);
  z-index:-3;
}

body.public .wp-video-stage::after{
  content:"";
  position:absolute;
  inset:10% 5% 5% 8%;
  border-radius:52% 48% 48% 52% / 44% 58% 42% 56%;
  border:1px solid rgba(254,224,28,.28);
  transform:translateZ(-25px) rotate(-5deg);
  z-index:-2;
}

body.public .wp-video-window{
  position:relative;
  width:92%;
  aspect-ratio:1.32/1;
  overflow:hidden;
  border-radius:48% 52% 45% 55% / 44% 48% 52% 56%;
  background:linear-gradient(145deg,#fff 0 58%,rgba(255,243,163,.42));
  box-shadow:
    0 38px 75px rgba(17,17,17,.18),
    0 9px 28px rgba(254,224,28,.12),
    inset 0 0 0 1px rgba(255,255,255,.88);
  transform:translateZ(26px) rotate(-1.25deg);
  isolation:isolate;
}

body.public .wp-video-window::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(115deg,rgba(255,255,255,.40),transparent 28% 70%,rgba(255,243,163,.18)),
    radial-gradient(circle at 72% 15%,rgba(254,224,28,.10),transparent 22%);
  mix-blend-mode:soft-light;
}

body.public .wp-video-window::after{
  content:"";
  position:absolute;
  inset:-1px;
  z-index:3;
  pointer-events:none;
  box-shadow:inset 0 0 48px 20px rgba(255,255,255,.70);
  border-radius:inherit;
}

body.public .wp-video-window video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  opacity:.90;
  filter:saturate(.72) contrast(.96) brightness(1.04);
  transform:scale(1.08);
  -webkit-mask-image:radial-gradient(ellipse 84% 79% at 50% 50%,#000 0 58%,rgba(0,0,0,.88) 68%,rgba(0,0,0,.25) 86%,transparent 100%);
  mask-image:radial-gradient(ellipse 84% 79% at 50% 50%,#000 0 58%,rgba(0,0,0,.88) 68%,rgba(0,0,0,.25) 86%,transparent 100%);
}

body.public .wp-video-orbit{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  z-index:-1;
}
body.public .wp-video-orbit.orbit-a{
  width:88%;aspect-ratio:1;
  border:1px dashed rgba(254,224,28,.42);
  animation:wpVideoOrbit 22s linear infinite;
}
body.public .wp-video-orbit.orbit-b{
  width:73%;aspect-ratio:1;
  border:1px solid rgba(254,224,28,.34);
  border-right-color:transparent;
  border-bottom-color:transparent;
  animation:wpVideoOrbitBack 16s linear infinite;
}
body.public .wp-video-accent{
  position:absolute;
  width:56px;height:9px;
  border-radius:999px;
  background:var(--video-orange);
  top:8.5%;left:12%;
  box-shadow:0 8px 24px rgba(254,224,28,.32);
  transform:rotate(-23deg) translateZ(48px);
  z-index:4;
}
body.public .wp-video-bubble{
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(254,224,28,.32);
  background:linear-gradient(145deg,rgba(255,255,255,.75),rgba(255,243,163,.22));
  box-shadow:inset 4px 5px 12px rgba(255,255,255,.7),0 9px 22px rgba(17,17,17,.08);
  pointer-events:none;
  z-index:4;
}
body.public .wp-video-bubble.bubble-a{width:30px;height:30px;right:7%;top:18%;animation:wpBubble 5.8s ease-in-out infinite}
body.public .wp-video-bubble.bubble-b{width:17px;height:17px;right:2%;top:31%;animation:wpBubble 4.6s ease-in-out -2s infinite}

body.public .wp-video-label{
  position:absolute;
  z-index:7;
  inset-inline-start:1.5%;
  bottom:7.5%;
  min-width:176px;
  padding:11px 14px 11px 16px;
  border-radius:18px 18px 18px 6px;
  border:1px solid rgba(255,255,255,.78);
  background:rgba(255,255,255,.80);
  box-shadow:0 18px 45px rgba(17,17,17,.15);
  backdrop-filter:blur(16px) saturate(120%);
  transform:translateZ(62px);
}
body.public .wp-video-label>span{
  position:absolute;
  inset-inline-start:0;
  top:13px;
  width:4px;height:29px;
  border-radius:0 8px 8px 0;
  background:var(--video-orange);
}
body.public .wp-video-label b{display:block;color:var(--video-navy);font-size:10.5px;line-height:1.7}
body.public .wp-video-label small{display:block;margin-top:2px;color:var(--video-steel);font-size:8.5px}

/* Re-compose the existing trust notes around the video rather than the old photo card. */
body.public .wp-video-stage .wp-float-note{
  z-index:8;
  border:1px solid rgba(254,224,28,.16);
  background:rgba(255,255,255,.90);
  backdrop-filter:blur(14px) saturate(115%);
  box-shadow:0 18px 45px rgba(17,17,17,.13);
  transform:translateZ(72px);
}
body.public .wp-video-stage .wp-float-note.top{top:13%;inset-inline-start:-1.5%}
body.public .wp-video-stage .wp-float-note.bottom{bottom:17%;inset-inline-end:-2%}
body.public .wp-video-stage .wp-float-note>svg{color:var(--video-orange)!important;background:rgba(254,224,28,.12)!important}

/* Hero canvas gets a stronger visual composition now that motion is contained here. */
body.public .wp-hero-grid{
  overflow:visible;
  background:
    radial-gradient(520px 420px at 14% 48%,rgba(255,243,163,.37),transparent 70%),
    linear-gradient(112deg,rgba(255,255,255,.97) 0 48%,rgba(246,250,252,.94) 48% 100%)!important;
}
body.public .wp-hero-grid::before{
  opacity:.62;
}

@keyframes wpVideoOrbit{to{transform:rotate(360deg)}}
@keyframes wpVideoOrbitBack{to{transform:rotate(-360deg)}}
@keyframes wpBubble{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-6px,-15px,0) scale(1.08)}}

@media (max-width:1100px){
  body.public .wp-video-stage{width:min(100%,500px);min-height:390px}
  body.public .wp-video-window{width:91%}
  body.public .wp-video-stage .wp-float-note.top{inset-inline-start:0}
  body.public .wp-video-stage .wp-float-note.bottom{inset-inline-end:0}
}

@media (max-width:780px){
  body.public .wp-video-art{order:-1;min-height:350px;margin-bottom:-6px}
  body.public .wp-video-stage{width:min(100%,440px);min-height:340px}
  body.public .wp-video-window{width:88%;aspect-ratio:1.34/1}
  body.public .wp-video-label{bottom:2%;inset-inline-start:7%;min-width:155px;padding:9px 12px}
  body.public .wp-video-stage .wp-float-note{min-width:132px;padding:8px 9px}
  body.public .wp-video-stage .wp-float-note.top{top:10%;inset-inline-start:2%}
  body.public .wp-video-stage .wp-float-note.bottom{bottom:15%;inset-inline-end:1%}
  body.public .wp-video-orbit.orbit-a{width:83%}
  body.public .wp-video-orbit.orbit-b{width:68%}
}

@media (max-width:520px){
  body.public .wp-video-art{min-height:292px}
  body.public .wp-video-stage{min-height:285px}
  body.public .wp-video-window{width:94%;aspect-ratio:1.44/1;border-radius:38% 48% 42% 50% / 40% 43% 49% 52%}
  body.public .wp-video-window video{transform:scale(1.12);opacity:.86}
  body.public .wp-video-label{min-width:0;max-width:150px;bottom:-1%;inset-inline-start:5%;padding:8px 10px}
  body.public .wp-video-label b{font-size:8.8px}
  body.public .wp-video-label small{font-size:7.6px}
  body.public .wp-video-stage .wp-float-note{min-width:112px;padding:6px 7px;border-radius:12px}
  body.public .wp-video-stage .wp-float-note b{font-size:8px}
  body.public .wp-video-stage .wp-float-note small{font-size:7px}
  body.public .wp-video-stage .wp-float-note.top{top:4%;inset-inline-start:0}
  body.public .wp-video-stage .wp-float-note.bottom{bottom:17%;inset-inline-end:-1%}
  body.public .wp-video-bubble.bubble-a{width:22px;height:22px}
  body.public .wp-video-bubble.bubble-b{display:none}
  body.public .wp-video-accent{width:42px;height:7px;top:7%;left:9%}
}

@media (prefers-reduced-motion:reduce){
  body.public .wp-video-stage{transform:none!important;transition:none}
  body.public .wp-video-orbit,body.public .wp-video-bubble{animation:none!important}
}

/* ========================================================================== 
   V5.4 — Hero clarity fixes
   - Promo code layout cannot overlap at desktop/mobile widths.
   - The product video is intentionally obvious and readable instead of
     disappearing into the white hero background.
   ========================================================================== */
body.public .hero-promo-card{
  width:min(100%,620px)!important;
  display:flex!important;
  align-items:stretch!important;
  justify-content:space-between!important;
  gap:14px!important;
  margin:18px 0 0!important;
  padding:10px!important;
  border:1px solid rgba(254,224,28,.28)!important;
  border-radius:18px!important;
  background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(255,243,163,.25))!important;
  box-shadow:0 13px 34px rgba(17,17,17,.07),inset 0 1px 0 rgba(255,255,255,.96)!important;
  overflow:hidden!important;
  text-align:right!important;
}
body.public .hero-promo-card::before{opacity:.42!important;pointer-events:none}
body.public .hero-promo-content{
  min-width:0!important;flex:1 1 auto!important;
  display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;
  grid-template-rows:auto auto!important;align-items:center!important;
  column-gap:10px!important;row-gap:3px!important;padding:2px 4px!important;
}
body.public .hero-promo-label{
  grid-column:1!important;grid-row:1!important;
  color:#C7A900!important;font-size:10px!important;font-weight:800!important;white-space:nowrap!important;
}
body.public .hero-promo-card .promo-code{
  grid-column:2!important;grid-row:1!important;justify-self:start!important;
  display:inline-flex!important;align-items:center!important;min-height:28px!important;
  padding:3px 10px!important;border-radius:9px!important;
  background:#111111!important;color:#fff!important;font-size:11px!important;font-weight:900!important;
  letter-spacing:.12em!important;direction:ltr!important;white-space:nowrap!important;
}
body.public .hero-promo-card p{
  grid-column:1/-1!important;grid-row:2!important;
  margin:0!important;padding:0!important;border:0!important;
  color:#86898B!important;font-size:9.5px!important;line-height:1.85!important;
  white-space:normal!important;overflow-wrap:anywhere!important;
}
body.public .hero-promo-copy{
  flex:0 0 auto!important;align-self:center!important;
  min-width:92px!important;min-height:42px!important;padding:8px 12px!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;
  border:1px solid rgba(254,224,28,.28)!important;border-radius:12px!important;
  background:#fff!important;color:#111111!important;font-size:9.5px!important;font-weight:850!important;
  white-space:nowrap!important;position:relative!important;z-index:2!important;
}
body.public .hero-promo-copy:hover{border-color:#FEE01C!important;box-shadow:0 10px 22px rgba(254,224,28,.14)!important}

body.public .wp-video-art{min-height:445px!important;padding:10px 0!important}
body.public .wp-video-stage{
  width:min(100%,570px)!important;min-height:430px!important;
  padding:24px 8px 18px!important;
}
body.public .wp-video-stage::before{
  width:86%!important;
  background:radial-gradient(circle at 50% 48%,#fff 0 42%,rgba(255,243,163,.38) 70%,transparent 72%)!important;
  box-shadow:0 42px 90px rgba(17,17,17,.12),inset 0 0 0 1px rgba(254,224,28,.12)!important;
}
body.public .wp-video-window{
  width:min(92%,510px)!important;aspect-ratio:16/11!important;
  border-radius:34px 34px 34px 12px!important;
  background:#fff!important;
  border:1px solid rgba(254,224,28,.22)!important;
  box-shadow:0 34px 74px rgba(17,17,17,.15),0 8px 24px rgba(254,224,28,.11),inset 0 1px 0 #fff!important;
  transform:translateZ(28px) rotate(-.4deg)!important;
}
body.public .wp-video-window::before{
  background:linear-gradient(125deg,rgba(255,255,255,.18),transparent 28% 78%,rgba(255,243,163,.12))!important;
  mix-blend-mode:normal!important;
}
body.public .wp-video-window::after{
  box-shadow:inset 0 0 28px 7px rgba(255,255,255,.38)!important;
}
body.public .wp-video-window video{
  width:100%!important;height:100%!important;object-fit:cover!important;object-position:center center!important;
  opacity:1!important;filter:saturate(.92) contrast(1.035) brightness(1.01)!important;
  transform:scale(1.02)!important;
  -webkit-mask-image:linear-gradient(#000,#000)!important;mask-image:linear-gradient(#000,#000)!important;
  background:#fff!important;
}
body.public .wp-video-kicker{
  position:absolute;z-index:10;top:3.5%;inset-inline-end:7%;
  display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border-radius:999px;
  color:#111111;background:rgba(255,255,255,.92);border:1px solid rgba(254,224,28,.23);
  box-shadow:0 11px 28px rgba(17,17,17,.09);backdrop-filter:blur(10px);
  font-size:9px;font-weight:850;transform:translateZ(58px);
}
body.public .wp-video-kicker svg{color:#FEE01C}
body.public .wp-video-label{
  inset-inline-start:3%!important;bottom:5%!important;min-width:205px!important;max-width:255px!important;
  background:rgba(255,255,255,.94)!important;border-color:rgba(254,224,28,.19)!important;
}
body.public .wp-video-label b{font-size:10.5px!important}
body.public .wp-video-label small{font-size:8.5px!important;line-height:1.7!important}
body.public .wp-video-stage .wp-float-note.top{top:18%!important;inset-inline-start:-2%!important}
body.public .wp-video-stage .wp-float-note.bottom{bottom:18%!important;inset-inline-end:-2%!important}

@media(max-width:780px){
  body.public .hero-promo-card{width:100%!important;margin-top:14px!important}
  body.public .wp-video-art{min-height:350px!important}
  body.public .wp-video-stage{min-height:340px!important;padding-top:20px!important}
  body.public .wp-video-window{width:92%!important;aspect-ratio:16/11!important;border-radius:26px 26px 26px 10px!important}
  body.public .wp-video-kicker{top:1%;inset-inline-end:5%;font-size:8.3px;padding:6px 9px}
  body.public .wp-video-stage .wp-float-note.top{top:15%!important;inset-inline-start:0!important}
  body.public .wp-video-stage .wp-float-note.bottom{bottom:17%!important;inset-inline-end:0!important}
}
@media(max-width:560px){
  body.public .hero-promo-card{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:8px!important;padding:8px!important}
  body.public .hero-promo-content{display:block!important;padding:2px!important}
  body.public .hero-promo-label{display:block!important;margin-bottom:5px!important;font-size:8.8px!important}
  body.public .hero-promo-card .promo-code{display:inline-flex!important;font-size:10px!important;margin-bottom:5px!important}
  body.public .hero-promo-card p{font-size:8.6px!important;line-height:1.75!important}
  body.public .hero-promo-copy{min-width:76px!important;min-height:38px!important;padding:7px 9px!important;font-size:8.5px!important}
  body.public .wp-video-art{min-height:292px!important}
  body.public .wp-video-stage{min-height:285px!important;padding-inline:0!important}
  body.public .wp-video-window{width:96%!important;aspect-ratio:16/11!important;border-radius:22px 22px 22px 9px!important}
  body.public .wp-video-label{inset-inline-start:1%!important;bottom:0!important;min-width:0!important;max-width:165px!important;padding:8px 10px!important}
  body.public .wp-video-label b{font-size:8.6px!important}.wp-video-label small{font-size:7.4px!important}
  body.public .wp-video-stage .wp-float-note{display:none!important}
  body.public .wp-video-kicker{top:0;inset-inline-end:2%;font-size:7.8px}
}