/* One cute mascot per page, alternating sides and facing the content */
:root{--m-tomato:url(../img/mascots/tomato.webp);--m-rice:url(../img/mascots/rice.webp);--m-milk:url(../img/mascots/milk.webp);--m-onion:url(../img/mascots/onion.webp)}
body::before{content:'';position:fixed;bottom:-8px;z-index:-1;pointer-events:none;background:no-repeat bottom center/contain;
  width:clamp(160px,24vw,400px);height:clamp(160px,24vw,400px);opacity:.34;filter:drop-shadow(0 18px 20px rgba(196,120,40,.25)) saturate(1.05);animation:mBob 6s ease-in-out infinite}
@keyframes mBob{50%{transform:translateY(-12px) rotate(1.5deg)}}
@keyframes mBobF{0%,100%{transform:scaleX(-1)}50%{transform:scaleX(-1) translateY(-12px) rotate(1.5deg)}}
body[data-view="home"]::before{left:0;background-image:var(--m-tomato)}
body[data-view="product"]::before{right:0;background-image:var(--m-rice);animation-name:mBobF}
body[data-view="cart"]::before{left:0;background-image:var(--m-milk)}
body[data-view="checkout"]::before{right:0;background-image:var(--m-onion);animation-name:mBobF}
@media(max-width:640px){body::before{opacity:.26;width:170px;height:170px}body[data-view="home"]::before,body[data-view="cart"]::before{left:-30px}body[data-view="product"]::before,body[data-view="checkout"]::before{right:-30px}}

/* panels stay readable while the mascot peeks through the gaps */
.nb-view{position:relative}
.nb-card-box,.nb-pd-info,.nb-list-head{background:rgba(255,253,247,.94)}
.hm-footer{margin-top:44px}

/* empty cart gets a friendly mascot */
#cartItemsList .nb-empty>i{display:none}
#cartItemsList .nb-empty::before{content:'';display:block;width:200px;height:200px;margin:0 auto 6px;background:var(--m-rice) center/contain no-repeat;animation:mBob 4.5s ease-in-out infinite;filter:drop-shadow(0 12px 14px rgba(196,120,40,.3))}
@media(prefers-reduced-motion:reduce){body::before,#cartItemsList .nb-empty::before{animation:none!important}}

/* mascots standing on top of the bill summary (cart) and order summary (checkout) – static, no animation */
.nb-cart-side>.nb-bill:first-child,.nb-checkout-side>.nb-bill:first-child{position:relative;overflow:visible;margin-top:0;z-index:20}
.nb-cart-side>.nb-bill:first-child::before,.nb-checkout-side>.nb-bill:first-child::before{content:'';position:absolute;left:50%;bottom:calc(100% - 4px);width:190px;height:190px;
  background:no-repeat bottom center/contain;transform:translateX(-50%) scaleX(-1);pointer-events:none;z-index:30;animation:none;filter:drop-shadow(0 8px 10px rgba(196,120,40,.28))}
.nb-cart-side>.nb-bill:first-child::before{background-image:var(--m-tomato)}
.nb-checkout-side>.nb-bill:first-child::before{background-image:var(--m-rice)}
@media(max-width:640px){.nb-cart-side>.nb-bill:first-child::before,.nb-checkout-side>.nb-bill:first-child::before{width:160px;height:160px}}

/* keep the summary mascot fully visible below the sticky topbar */
@media(min-width:900px){
  .nb-cart-side,.nb-checkout-side{--mh:150px;top:calc(84px + var(--mh) - 6px)}
  .nb-cart-side>.nb-bill:first-child::before,.nb-checkout-side>.nb-bill:first-child::before{width:var(--mh);height:var(--mh)}
}
@media(min-width:900px) and (max-height:780px){.nb-cart-side,.nb-checkout-side{--mh:105px}}

/* mobile: cart + checkout mascots sit above the footer so they never cover content */
@media(max-width:640px){
  body[data-view="cart"]::before,body[data-view="checkout"]::before{display:none}
  .nb-cart-side>.nb-bill:first-child::before,.nb-checkout-side>.nb-bill:first-child::before{display:none}
  body[data-view="cart"] .hm-footer,body[data-view="checkout"] .hm-footer{margin-top:150px}
  body[data-view="cart"] .hm-footer::after,body[data-view="checkout"] .hm-footer::after{content:'';position:absolute;left:0;right:0;bottom:calc(100% + 24px);height:110px;pointer-events:none;
    background-repeat:no-repeat;background-size:110px 110px,110px 110px;background-position:left 14px bottom,right 14px bottom;filter:drop-shadow(0 6px 8px rgba(196,120,40,.28))}
  body[data-view="cart"] .hm-footer::after{background-image:var(--m-milk),var(--m-tomato)}
  body[data-view="checkout"] .hm-footer::after{background-image:var(--m-onion),var(--m-rice)}
}