/* Shared constraints also apply when switching a currently open dialog. */
dialog#dialog {
  box-sizing:border-box;
  min-width:0;
  max-height:calc(var(--dialog-vv-height, 100dvh) - 24px);
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable;
}
dialog#dialog :where(form,section,article,details,div,fieldset,label,dl,dt,dd) {min-width:0;}
dialog#dialog :where(p,h2,h3,label,summary,.field-help,.tag,.note,.error,dd,strong) {overflow-wrap:anywhere;}
dialog#dialog :where(input:not([type=checkbox]):not([type=radio]),select,textarea) {min-width:0;max-width:100%;box-sizing:border-box;}
dialog#dialog :where(img,video,canvas) {max-width:100%;}
dialog#dialog .actions {flex-wrap:wrap;}
dialog#dialog .actions>button {max-width:100%;white-space:normal;}
dialog#dialog .table-wrap {min-width:0;max-width:100%;overflow-x:auto;}
dialog#dialog .payment-source {flex-wrap:wrap;}
dialog#dialog .payment-source span {flex:1 1 140px;max-width:100%;min-width:0;}
dialog#dialog .payment-source strong {white-space:normal;max-width:100%;}
dialog#dialog .cart-order-line {min-width:0;flex-wrap:wrap;}
dialog#dialog .cart-order-line>.check {flex:1 1 150px;min-width:0;max-width:100%;}
dialog#dialog .cart-order-line .check>span {min-width:0;overflow-wrap:anywhere;}
dialog#dialog .cart-quantity-controls {flex-wrap:wrap;max-width:100%;}
dialog#dialog .shop-cart-sheet>.tabs {top:0;max-width:100%;}
dialog#dialog .artwork-full img {width:auto;max-width:100%;max-height:calc(var(--dialog-vv-height,100dvh) - 125px);object-fit:contain;}
dialog#dialog #pickup-video {max-height:min(300px,calc(var(--dialog-vv-height,100dvh) * .4));}
dialog#dialog>.close {
  float:right;position:sticky;top:0;z-index:30;
  width:44px;min-height:44px;padding:8px;
  margin:-4px -2px 6px 8px;
  background:#fff;border-color:#d6e4df;
}
dialog#dialog>h2 {padding-inline-end:52px;}

@media (max-width:700px), (max-height:550px) and (pointer:coarse) {
  dialog#dialog[open] {
    --dialog-left-gap:max(10px,env(safe-area-inset-left,0px));
    --dialog-right-gap:max(10px,env(safe-area-inset-right,0px));
    --dialog-top-gap:max(10px,env(safe-area-inset-top,0px));
    --dialog-bottom-gap:max(10px,env(safe-area-inset-bottom,0px));
    position:fixed;inset:auto;
    left:calc(var(--dialog-vv-left,0px) + var(--dialog-left-gap));
    top:calc(var(--dialog-vv-top,0px) + var(--dialog-top-gap));
    width:calc(var(--dialog-vv-width,100vw) - var(--dialog-left-gap) - var(--dialog-right-gap));
    max-width:calc(var(--dialog-vv-width,100vw) - var(--dialog-left-gap) - var(--dialog-right-gap));
    max-height:calc(var(--dialog-vv-height,100dvh) - var(--dialog-top-gap) - var(--dialog-bottom-gap));
    margin:0;transform:none;
    padding:16px 12px 18px;border-radius:16px;
    scrollbar-gutter:auto;
  }
  dialog#dialog :where(input:not([type=checkbox]):not([type=radio]),select,textarea) {font-size:16px;}
  dialog#dialog .row {flex-wrap:wrap;}
  dialog#dialog .gorpay-brand {gap:8px;flex-wrap:wrap;padding-inline-end:48px;}
  dialog#dialog .gorpay-brand>span {flex-basis:100%;max-width:100%;margin-left:0;text-align:left;}
  dialog#dialog .gorpay-amount {font-size:clamp(23px,7.5vw,34px);letter-spacing:-.7px;overflow-wrap:anywhere;}
  dialog#dialog .pickup-qr-surface {width:100%;max-width:300px;padding:12px;}
  dialog#dialog .payment-details dd {min-width:0;overflow-wrap:anywhere;}
  dialog#dialog .shop-cart-sheet>.tabs {position:sticky;top:0;background:#fff;z-index:5;padding-block:6px;}
  dialog#dialog .cart-checkout {min-width:0;max-width:100%;white-space:normal;}
}