/* PupVibes 8.9.23 — definitive cart mascot layout.
   Structural fix: visual remains AFTER the card in DOM so the existing
   card:hover + visual selector keeps working, but flex order places it BEFORE
   the card visually. No absolute stage positioning, no translateY guessing. */

body#cart .pv-cart-summary-shell{
  position:relative!important;
  width:357px!important;
  max-width:100%!important;
  overflow:visible!important;
}

body#cart .pv-cart-summary-stage{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  width:357px!important;
  max-width:100%!important;
  margin:0!important;
  padding:0!important;
  gap:0!important;
  overflow:visible!important;
}

body#cart .pv-cart-summary-stage>.pv-cart-summary-visual{
  order:-1!important;
  position:relative!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;
  z-index:5!important;
  align-self:center!important;
  width:302px!important;
  height:242px!important;
  min-height:242px!important;
  margin:0 0 -1px 0!important;
  padding:0!important;
  overflow:visible!important;
  pointer-events:none!important;
  transform:none!important;
}

body#cart .pv-cart-summary-stage>.pv-cart-summary-card{
  order:0!important;
  position:relative!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;
  z-index:2!important;
  width:357px!important;
  max-width:100%!important;
  margin:0!important;
  overflow:visible!important;
}

/* Both images occupy the same slot and are bottom-aligned so the rail/hands
   land on exactly the same Y position even though the source PNG heights differ. */
body#cart .pv-cart-mascot{
  position:absolute!important;
  left:50%!important;
  right:auto!important;
  top:auto!important;
  bottom:0!important;
  display:block!important;
  width:302px!important;
  max-width:none!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  object-fit:contain!important;
  object-position:center bottom!important;
  pointer-events:none!important;
  user-select:none!important;
  transform:translate3d(-50%,0,0)!important;
  backface-visibility:hidden!important;
  will-change:opacity!important;
  transition:opacity .34s cubic-bezier(.22,.61,.36,1)!important;
}

body#cart .pv-cart-mascot--rest{
  opacity:1!important;
  visibility:visible!important;
}
body#cart .pv-cart-mascot--hover{
  opacity:0!important;
  visibility:visible!important;
}

@media (hover:hover) and (pointer:fine){
  body#cart .pv-cart-summary-card:hover + .pv-cart-summary-visual .pv-cart-mascot--rest,
  body#cart .pv-cart-summary-card:focus-within + .pv-cart-summary-visual .pv-cart-mascot--rest{
    opacity:0!important;
  }
  body#cart .pv-cart-summary-card:hover + .pv-cart-summary-visual .pv-cart-mascot--hover,
  body#cart .pv-cart-summary-card:focus-within + .pv-cart-summary-visual .pv-cart-mascot--hover{
    opacity:1!important;
  }
}

/* Prevent all former mascot implementations from interfering. */
body#cart .pv-cart-mascot-sprite{display:none!important;}

@media (min-width:992px){
  body#cart .cart-grid__aside{margin-top:0!important;}
}

@media (max-width:991.98px){
  body#cart .cart-grid__aside{margin-top:0!important;}
  body#cart .pv-cart-summary-shell,
  body#cart .pv-cart-summary-stage{
    width:357px!important;
    max-width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  body#cart .pv-cart-summary-stage>.pv-cart-summary-visual{
    width:280px!important;
    height:225px!important;
    min-height:225px!important;
  }
  body#cart .pv-cart-mascot{width:280px!important;}
}

@media (max-width:640px){
  body#cart .pv-cart-summary-shell,
  body#cart .pv-cart-summary-stage,
  body#cart .pv-cart-summary-stage>.pv-cart-summary-card{
    width:100%!important;
  }
  body#cart .pv-cart-summary-stage>.pv-cart-summary-visual{
    width:256px!important;
    height:206px!important;
    min-height:206px!important;
  }
  body#cart .pv-cart-mascot{width:256px!important;}
}