/* PupVibes 8.9.24 — match expected cart geometry.
   The summary card stays aligned with the product list. The mascot is removed
   from document flow and overlaps the top border of the summary card. */

body#cart .pv-cart-summary-shell,
body#cart .pv-cart-summary-stage,
body#cart .pv-cart-summary-card,
body#cart .pv-cart-summary-visual{
  overflow:visible!important;
}

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

/* Keep the recap card exactly in the normal grid flow, aligned with the first
   product card as in the supplied expected screenshot. */
body#cart .pv-cart-summary-stage>.pv-cart-summary-card{
  position:relative!important;
  z-index:2!important;
  width:357px!important;
  max-width:100%!important;
  margin:0!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;
}

/* Mascot does NOT reserve any vertical space. Its hands/rail overlap the top
   edge of the card by 14 px, matching the expected composition. */
body#cart .pv-cart-summary-stage>.pv-cart-summary-visual{
  position:absolute!important;
  z-index:5!important;
  left:50%!important;
  right:auto!important;
  top:auto!important;
  bottom:calc(100% - 14px)!important;
  width:264px!important;
  height:224px!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  pointer-events:none!important;
  transform:translateX(-50%)!important;
}

body#cart .pv-cart-mascot{
  position:absolute!important;
  left:50%!important;
  right:auto!important;
  top:auto!important;
  bottom:0!important;
  display:block!important;
  width:264px!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 .30s 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;
  }
}

/* Ensure no earlier version shifts the aside upward or down. */
@media (min-width:992px){
  body#cart .cart-grid__aside{margin-top:0!important;}
}

body#cart .pv-cart-mascot-sprite{display:none!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:248px!important;
    height:210px!important;
    bottom:calc(100% - 12px)!important;
  }
  body#cart .pv-cart-mascot{width:248px!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:230px!important;
    height:196px!important;
    bottom:calc(100% - 10px)!important;
  }
  body#cart .pv-cart-mascot{width:230px!important;}
}