/* Final checkout readability and compact empty coupon state. */

#checkoutDialog{width:min(1120px,96vw);max-height:94dvh;overflow-y:auto}
#checkoutDialog form{padding:32px}
#checkoutDialog .checkout-head h2{font-size:24px;line-height:1.4}
#checkoutDialog .checkout-head p{font-size:10px}
#checkoutDialog .checkout-head button{min-width:44px;min-height:44px;font-size:32px}
#checkoutDialog .fields,#checkoutDialog .checkout-summary{min-width:0}
#checkoutDialog .fields label,#checkoutDialog legend{font-size:12px;line-height:1.6}
#checkoutDialog .fields label>span{font-size:9px}
#checkoutDialog .fields input,#checkoutDialog .fields textarea,#checkoutDialog .fields select{font-size:13px;line-height:1.5;padding:13px 12px}
#checkoutDialog .fields .method{min-height:58px;padding:14px 12px;gap:10px}
#checkoutDialog .fields .method input{flex:0 0 auto;width:18px;height:18px;padding:0;margin:0}
#checkoutDialog .fields .method>span{min-width:0;gap:8px}
#checkoutDialog .fields .method b{font-size:12px;line-height:1.6}
#checkoutDialog .fields .method small{font-size:10px;line-height:1.6}
#checkoutDialog .checkout-summary h3{font-size:24px;line-height:1.55}
#checkoutDialog .checkout-summary>p,#checkoutDialog .checkout-summary>p:last-of-type{font-size:13px;line-height:1.8}
#checkoutDialog .checkout-summary .review-line{font-size:14px;line-height:1.8;gap:16px}
#checkoutDialog .checkout-summary .review-line.schedule{font-size:12px}
#checkoutDialog .checkout-summary .review-line.final{font-size:22px;margin-top:14px}
#checkoutDialog .checkout-summary .review-item strong{font-size:15px}
#checkoutDialog .checkout-summary .review-item small{font-size:12px}
#checkoutDialog .checkout-summary .shipping-zone-label,#checkoutDialog .payment-note{font-size:10px}
#checkoutDialog .checkout-member-status>span,#checkoutDialog .checkout-member-status small,#checkoutDialog .checkout-member-status a{font-size:10px}
#checkoutDialog .checkout-member-status strong{font-size:13px}
#checkoutDialog .form-error{font-size:12px;line-height:1.6}
#checkoutDialog .submit{font-size:15px;min-height:58px}
@media(min-width:901px){
 #checkoutDialog .checkout-grid{grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr);gap:38px}
}
@media(max-width:900px){
 #checkoutDialog form{padding:30px}
 #checkoutDialog .checkout-grid{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:700px){
 #checkoutDialog .fields .method>span{flex-wrap:wrap}
 #checkoutDialog .fields .method small{flex:1 1 100%;text-align:left;justify-content:flex-start}
 #checkoutDialog .pickup-method .pickup-offer{justify-content:flex-start}
 #checkoutDialog .checkout-summary .review-line>b{max-width:65%;white-space:normal;text-align:right;overflow-wrap:anywhere}
}
@media(max-width:560px){
 #checkoutDialog{width:100vw;max-width:none;height:100dvh;max-height:100dvh;margin:0;border:0}
 #checkoutDialog form{padding:24px 18px 80px}
 #checkoutDialog .checkout-head h2{font-size:22px}
 #checkoutDialog .checkout-summary h3{font-size:24px}
}

/* Keep the empty coupon in its original framed panel, with a smaller hint. */
#checkoutDialog .checkout-coupon.is-empty{display:block;min-height:0;margin:12px 0 14px;padding:10px 14px;border:1px solid rgba(85,61,43,.18);background:rgba(255,255,255,.42);box-shadow:none}
#checkoutDialog .checkout-coupon.is-empty .checkout-coupon-title{display:block;margin:0 0 4px;color:#70401f;font-size:11px;line-height:1.5;letter-spacing:.025em}
#checkoutDialog .checkout-coupon.is-empty .checkout-coupon-empty{display:block;margin:0;color:#81756e;font-size:11px;line-height:1.6;letter-spacing:.025em}
#checkoutDialog .checkout-coupon:not(.is-empty)>label{font-size:13px}

/* Keep mobile inputs readable and avoid focus zoom on iPhone. */
@media(max-width:560px){
 #checkoutDialog .fields input:not([type=radio]),#checkoutDialog .fields textarea,#checkoutDialog .fields select{font-size:16px}
}

#checkoutDialog .checkout-summary .shipping-zone-label{font-size:11px}

/* 2026-10-12: widen the desktop dialog without changing typography. */
@media(min-width:901px){#checkoutDialog{width:min(1240px,96vw)}}