/* Load after theme-v3.css: 46px controls + 16px padding + 1px border. */
#modal.pd2-dialog {
  --pd2-bar-height: calc(63px + env(safe-area-inset-bottom, 0px));
  position: fixed;
  max-height: 100dvh;
}

#modal.pd2-dialog > .pd2-sheet {
  box-sizing: border-box;
  position: static;
  animation: none !important;
  transform: none !important;
  padding-bottom: var(--pd2-bar-height) !important;
  scroll-padding-bottom: var(--pd2-bar-height);
}

#modal.pd2-dialog .pd2-bar {
  position: absolute !important;
  inset: auto 0 0 !important;
  transform: none !important;
  box-sizing: border-box;
  width: auto !important;
  height: var(--pd2-bar-height);
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  align-items: center !important;
}

#modal.pd2-dialog .pd2-bar-price {
  box-sizing: border-box;
  justify-content: center;
}

body:has(#modal.pd2-dialog[open]) #cart-bar {
  display: none !important;
}

/* breathing room: the bar must not touch the viewport edge and the sheet must
   reserve exactly its height plus a gap, so no content peeks behind it */
#modal.pd2-dialog{--pd2-bar-height:calc(78px + env(safe-area-inset-bottom,0px))!important}
#modal.pd2-dialog .pd2-bar{height:auto!important;min-height:var(--pd2-bar-height)!important;padding:10px 12px calc(16px + env(safe-area-inset-bottom,0px))!important;background:#fbf8f1!important;box-shadow:0 -10px 28px rgb(31 58 43 / 12%)!important}
#modal.pd2-dialog > .pd2-sheet{padding-bottom:calc(var(--pd2-bar-height) + 14px)!important}

/* ADD sits on the price line, not floating in the middle of the card */
.pd2-card-add{top:auto!important;bottom:16px!important;right:16px!important}

/* big, equal controls: price | ADD | Basket | Checkout */
#modal.pd2-dialog .pd2-bar{display:flex!important;align-items:center!important;gap:10px!important}
#modal.pd2-dialog .pd2-bar-price{flex:0 0 auto!important;height:auto!important;min-width:0!important;padding:0 4px 0 2px!important;background:transparent!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important}
#modal.pd2-dialog .pd2-bar-amount strong{font-size:17px!important;color:#1d3a2b!important}
#modal.pd2-dialog .pd2-bar-amount del{font-size:11px!important}
#modal.pd2-dialog .pd2-bar-actions{display:flex!important;align-items:center!important;gap:8px!important;flex:1 1 auto!important;min-width:0!important}
#modal.pd2-dialog .pd2-add{flex:0 0 auto!important}
#modal.pd2-dialog .pd2-add>button,#modal.pd2-dialog .pd2-basket,#modal.pd2-dialog .pd2-checkout{min-height:48px!important;height:48px!important;border-radius:14px!important;font-size:13.5px!important;font-weight:800!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;padding:0 16px!important;white-space:nowrap}
#modal.pd2-dialog .pd2-add>button{min-width:92px!important;background:#eef6ef!important;border:1.5px solid #1d5a37!important;color:#1d5a37!important;box-shadow:0 4px 12px rgb(31 58 43 / 10%)!important}
#modal.pd2-dialog .pd2-add .qty{height:48px!important;min-height:48px!important;border-radius:14px!important;border:1.5px solid #1d5a37!important;background:#eef6ef!important;gap:0!important;padding:0 4px!important}
#modal.pd2-dialog .pd2-add .qty button{width:38px!important;min-width:38px!important;height:38px!important;min-height:38px!important;border:0!important;background:transparent!important;color:#1d5a37!important;font-size:19px!important;font-weight:800!important}
#modal.pd2-dialog .pd2-add .qty b,#modal.pd2-dialog .pd2-add .qty span{min-width:20px!important;text-align:center!important;font-size:14px!important;font-weight:800!important;color:#1d5a37!important}
#modal.pd2-dialog .pd2-basket{flex:0 0 auto!important;min-width:96px!important;background:#fffdf7!important;border:1.5px solid #dcd3bf!important;color:#1d3a2b!important;box-shadow:0 4px 12px rgb(31 58 43 / 8%)!important}
#modal.pd2-dialog .pd2-checkout{flex:1 1 auto!important;min-width:0!important;background:linear-gradient(135deg,#ff7a3c,#e5361f)!important;color:#fff!important;border:0!important;box-shadow:0 10px 24px rgb(229 54 31 / 32%)!important}
#modal.pd2-dialog .pd2-basket span{display:inline!important;font-size:13px!important}
/* the ADD in the card, same 48px scale */
.pd2-card-add{right:16px!important;bottom:16px!important;top:auto!important}
.pd2-card-add>button{min-height:46px!important;min-width:104px!important;font-size:13.5px!important;border-radius:14px!important}
.pd2-card-add .qty{min-height:46px!important;border-radius:14px!important}
.pd2-card-add .qty button{min-width:34px!important;min-height:34px!important;font-size:18px!important}

/* discounted products add a struck MRP to the bar; it must compress, not overflow */
#modal.pd2-dialog .pd2-bar{overflow:hidden!important;flex-wrap:nowrap!important}
#modal.pd2-dialog .pd2-bar-price{flex:0 1 auto!important;min-width:0!important;overflow:hidden!important;gap:4px!important}
#modal.pd2-dialog .pd2-bar-amount{min-width:0!important;overflow:hidden!important;gap:4px!important}
#modal.pd2-dialog .pd2-bar-actions{flex:1 1 auto!important;min-width:0!important;justify-content:flex-end!important}
#modal.pd2-dialog .pd2-add{flex:0 0 auto!important}
#modal.pd2-dialog .pd2-basket{flex:0 0 auto!important;min-width:48px!important}
#modal.pd2-dialog .pd2-checkout{flex:1 1 auto!important;min-width:0!important;padding:0 12px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis}
/* tightening on small phones, widest element first */
@media (max-width:430px){
 #modal.pd2-dialog .pd2-bar-amount del{display:none!important}
 #modal.pd2-dialog .pd2-basket span{display:none!important}
 #modal.pd2-dialog .pd2-basket{min-width:44px!important;padding:0 10px!important}
}
@media (max-width:360px){
 #modal.pd2-dialog .pd2-bar-amount strong{font-size:15px!important}
 #modal.pd2-dialog .pd2-checkout{font-size:12px!important;padding:0 10px!important}
}