/* Cart, checkout and the success address row. Other success and account styles stay unchanged. */
#cartSubtotal{font-size:15px}
#cartItems>.cart-item{padding-top:10px;padding-bottom:10px}
#checkout,#continueShopping{font-size:15px;border-radius:10px}
#checkout{justify-content:center}
/* Reference checkout: one readable column on phones and desktop. Heights remain
   content-driven for long addresses, optional scheduling and coupon restrictions. */
#orderDialog:has(#orderFormWrap:not([hidden])){width:min(420px,calc(100vw - 12px));max-height:calc(100dvh - 12px);padding:20px 16px 0;border:1px solid #e8e0d5;border-radius:16px;background:linear-gradient(135deg,#fffdf8,#faf7ef);color:#482c25;overflow:auto;overscroll-behavior:contain;scroll-padding-block:18px 90px}
#orderDialog:has(#orderFormWrap:not([hidden]))>#closeDialog{top:12px;right:13px;width:36px;height:36px;margin-top:0;padding:0;font-size:25px;line-height:1;color:#482c25}
#orderFormWrap{position:relative;isolation:isolate}
#orderFormWrap>.eyebrow{position:relative;margin:7px 0 8px;padding-top:0;font-size:10px;font-weight:500;letter-spacing:1.6px;color:#e35944}
#orderFormWrap>h2{position:relative;margin:0 0 7px;padding-top:0;font-size:29px;line-height:1.25;font-weight:800;color:#482c25}
.checkout-snack-art{position:absolute;right:-12px;top:12px;width:133px;height:90px;pointer-events:none;z-index:-1}
#orderFormWrap>#customerCheckoutHint{position:relative;margin:0 0 12px;padding:0 115px 0 0;background:none;border:0;font-size:12px;line-height:1.55;color:#766b63;min-height:30px;border-radius:0}
#orderForm{display:block;margin:0}
#orderForm [hidden]{display:none!important}
.checkout-section{position:relative;min-width:0;padding:13px 12px 14px;margin:0 0 10px;border:1px solid #eee6db;border-radius:14px;background:#fffdf9e6}
.checkout-section-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:14px}
.checkout-section-heading h3{display:flex;align-items:center;gap:9px;margin:0;font-size:17px;line-height:1.3;color:#492e26}
.checkout-icon{display:inline-block;width:21px;height:21px;flex:none;background:#dc4934;mask:var(--checkout-icon) center/contain no-repeat}
.icon-person,#orderForm label:has([name=name]){--checkout-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='6' r='5'/%3E%3Cpath d='M2 23v-5c0-8 20-8 20 0v5z'/%3E%3C/svg%3E")}
.icon-truck{--checkout-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 3h14v14H1zm15 5h4l4 6v3h-8z'/%3E%3Ccircle cx='6' cy='19' r='3'/%3E%3Ccircle cx='19' cy='19' r='3'/%3E%3C/svg%3E")}
.icon-tag{--checkout-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M1 10 11 1h11v11L12 23 1 12zm16-6a2 2 0 1 0 0 4 2 2 0 0 0 0-4'/%3E%3C/svg%3E")}
.checkout-badge{padding:3px 8px;border-radius:8px;background:#f3eddf;color:#8b7a67;font-size:10px;font-weight:400;white-space:nowrap}
#orderForm .checkout-section>label{position:relative;display:block;margin:12px 0 0;font-size:11px;line-height:1.5;font-weight:600;color:#48413b}
#orderForm .checkout-section>label:has(input[name=name]),#orderForm .checkout-section>label:has(#fulfillment){margin-top:-5px}
#orderForm .checkout-contact{padding-top:8px;padding-bottom:8px;margin-top:-10px}
#orderForm .checkout-delivery{padding-top:8px;padding-bottom:0}
#orderForm input:not([type=radio]):not([type=checkbox]):not([type=hidden]),#orderForm select,#orderForm textarea{width:100%;min-width:0;min-height:38px;margin-top:5px;padding:8px 12px 8px 36px;border:1px solid #e5ded4;border-radius:8px;background-color:#fffdfa;color:#413b36;font:400 13px/1.45 Arial, sans-serif;outline-color:#d96049;box-shadow:0 1px 3px #442b1910 inset}
#orderForm select{appearance:auto;padding-right:8px}
#orderForm textarea{height:50px;min-height:50px;resize:vertical}
#orderForm input::placeholder,#orderForm textarea::placeholder{color:#a29a90;opacity:1}
#orderForm .checkout-section>label:before{content:'';position:absolute;left:12px;top:32px;width:14px;height:14px;background:#6b4940;mask:var(--checkout-icon) center/contain no-repeat;pointer-events:none}
#orderForm label:has([name=phone]){--checkout-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 2 1 6c0 8 9 17 17 17l5-4-6-5-3 3c-3-2-5-4-7-7l3-3z'/%3E%3C/svg%3E")}
#orderForm label:has([name=email]){--checkout-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 4h20v16H2z' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='m2 5 10 8L22 5' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E")}
#orderForm label:has([name=fulfillment]){--checkout-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m1 11 11-9 11 9M5 8v14h14V8M9 22v-9h6v9' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E")}
#orderForm label:has([name=address]){--checkout-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 24S2 14 2 9a10 9 0 1 1 20 0c0 5-10 15-10 15zm0-19a4 4 0 1 0 0 8 4 4 0 0 0 0-8'/%3E%3C/svg%3E")}
#orderForm label:has([name=note]){--checkout-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 2h20v20H2zM6 7h12M6 12h12M6 17h8' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E")}
#orderForm #scheduleField{--checkout-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M12 5v7h6' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E")}
#orderForm .checkout-contact input.is-account-email{padding-right:66px;background-color:#f0efeb}
.checkout-email-badge{position:absolute;right:8px;bottom:8px;border:1px solid #dfd4c5;background:#fffbf3}
#orderForm .order-note-count{font-size:10px;margin:4px 0 0;color:#968c82;font-weight:400}
#orderForm .pickup-info,#orderForm .schedule-hint{font-size:11px;line-height:1.6;margin:8px 0 0;color:#807469;white-space:pre-line}
#orderForm .checkout-offers{padding-bottom:12px}
#orderForm .checkout-offers .checkout-section-heading{align-items:center}
#orderForm .checkout-offers .checkout-section-heading h3{flex-shrink:0}
.checkout-offer-rules{min-width:0;flex:1;font-size:10px;font-weight:400;line-height:1.5;color:#827568}
#orderForm #promotionChoice{display:grid;grid-template-columns:minmax(0,1fr) 70px;align-items:end;gap:6px 8px;padding:0;margin:0}
#orderForm #promotionChoice>label,#orderForm #customerWalletCheckout:not([hidden])+#promotionChoice>label{margin:0;font-size:11px;font-weight:500;color:#544239}
#orderForm #promotionChoice>label:before{content:'♧';color:#da4937;margin-right:8px;font-size:16px}
#orderForm #manualCouponCode{padding:9px 10px;font-size:12px}
#applyCouponCode{height:38px;border:0;border-radius:7px;background:#765248;color:#fff;font-size:12px;cursor:pointer}
#orderForm #manualCouponCode:disabled{background:#f0efeb;color:#857b72;cursor:not-allowed;opacity:1}
#orderForm #manualCouponCode:disabled::placeholder{color:#857b72}
#applyCouponCode:disabled{opacity:.5;cursor:not-allowed}
#orderForm #couponCodeHint:not([hidden]){grid-column:1/-1;margin:3px 0 0;font-size:11px;line-height:1.5}
#orderForm #couponCodeHint.valid{color:#946e4c}
/* Compact tickets; keep all eligibility messages and accessible selection controls. */
#orderForm #customerWalletCheckout{margin:0;padding:0;position:relative;min-width:0;container:checkout-coupons / inline-size}
#orderForm #customerWalletCheckout fieldset{display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:14px;align-items:start;min-width:0;margin:-5px 0 0;padding:0}
#orderForm #customerWalletCheckout legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
/* Ticket styles are shared with My Coupons; only checkout selection differs. */
#orderForm #customerWalletCheckout .customer-wallet-ticket{order:1;grid-column:1/-1;container-type:normal;margin:0 0 10px}
#orderForm #customerWalletCheckout .customer-wallet-ticket:not(.is-wallet-inactive){padding-block:0}
#orderForm #customerWalletCheckout .customer-coupon-card.is-selected{border-color:#e92235;box-shadow:0 0 0 1px #e9223522}
#orderForm #customerWalletCheckout .customer-coupon-body{min-height:0;padding:0;margin:0}
#orderForm #customerWalletCheckout .customer-coupon-select{position:relative;flex-direction:row;min-height:34px;margin:0;padding:5px 8px;gap:4px;border:1px solid #e92235;border-radius:10px;background:#e92235;color:#fff;font-size:11px;white-space:nowrap}
#orderForm #customerWalletCheckout .customer-coupon-select input{width:12px;height:12px;min-height:0;margin:0;accent-color:#b72b1c}
#orderForm #customerWalletCheckout .customer-coupon-reason{margin:6px 0 0;font-size:10px;line-height:1.5;color:#875143}
/* Nested checkout cards have less room than the account wallet at the same viewport. */
@container checkout-coupons (max-width:320px){
  #orderForm #customerWalletCheckout .customer-wallet-ticket{grid-template-columns:72px minmax(0,1fr);padding-inline:7px}
  #orderForm #customerWalletCheckout .customer-coupon-benefit{font-size:32px}
  #orderForm #customerWalletCheckout [data-shipping=true] .customer-coupon-benefit{font-size:18px}
  #orderForm #customerWalletCheckout .customer-coupon-details{padding-left:8px}
  #orderForm #customerWalletCheckout .customer-coupon-minimum{padding-right:0}
  #orderForm #customerWalletCheckout .customer-coupon-summary{grid-template-columns:minmax(0,1fr)}
  #orderForm #customerWalletCheckout .customer-coupon-action{justify-self:end;transform:none}
  #orderForm #customerWalletCheckout .customer-coupon-action::before,#orderForm #customerWalletCheckout .customer-coupon-action::after{display:none}
}
/* Keep both disclosures in a stable row above the full-width coupon lists. */
#orderForm #customerWalletCheckout .checkout-coupon-controls{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;margin:0 0 6px}
#orderForm #customerWalletCheckout .customer-coupon-toggle,#orderForm #customerWalletCheckout .checkout-history-toggle{align-self:start;display:flex;align-items:flex-start;height:auto;min-height:32px;min-width:0;margin:0;padding:6px 0;border:1.25px solid transparent;background:none;color:#8a5140;font-size:11px;font-weight:500;text-align:left;text-decoration:underline;line-height:1.5;cursor:pointer}
#orderForm #customerWalletCheckout .customer-coupon-toggle,#orderForm #customerWalletCheckout .checkout-history-toggle{justify-self:start;max-width:100%;padding-inline:10px;border-color:#b13c2e;border-radius:7px;background:#fffaf4;color:#b13c2e;text-decoration:none}
#orderForm #customerWalletCheckout .customer-coupon-toggle:hover,#orderForm #customerWalletCheckout .checkout-history-toggle:hover{background:#fbeee3}
#orderForm #customerWalletCheckout .checkout-history-toggle{grid-column:2}
#orderForm #customerWalletCheckout .checkout-history-toggle>span{display:list-item;list-style-position:inside;list-style-type:disclosure-closed}
#orderForm #customerWalletCheckout .checkout-history-toggle[aria-expanded=true]>span{list-style-type:disclosure-open}
#orderForm #customerWalletCheckout .customer-coupon-history{order:3;grid-column:1/-1;min-width:0;margin:0}
#orderForm .checkout-submit-bar{position:sticky;bottom:0;z-index:3;display:grid;grid-template-columns:112px minmax(0,1fr);gap:12px;align-items:center;margin:0 -16px;padding:12px 18px max(12px,env(safe-area-inset-bottom));background:#fffdf8f5;border-top:1px solid #eee4d6;backdrop-filter:blur(8px)}
.checkout-total-details>summary{list-style:none;cursor:pointer;color:#857368;font-size:12px;line-height:1.5}
.checkout-total-details>summary::-webkit-details-marker{display:none}
#checkoutTotal{display:block;color:#c73220;font-size:24px;line-height:1.2;font-weight:800;overflow-wrap:anywhere}
.checkout-total-details>summary>span{display:block;margin-top:2px}
#orderForm #orderSummary{position:absolute;bottom:calc(100% + 2px);left:12px;right:12px;max-height:42dvh;overflow:auto;margin:0;padding:16px;border:1px solid #e8d9c4;border-radius:12px;background:#fffdf7;box-shadow:0 -6px 30px #4c302122;color:#534538;font-size:12px}
#orderForm #submitOrder{width:100%;min-width:0;min-height:50px;margin:0;padding:12px 10px;justify-content:center;gap:17px;font-size:16px;border-radius:10px;background:linear-gradient(110deg,#e85840,#d23d29);color:white;box-shadow:0 3px 10px #d5493020}
#orderForm #submitOrder:disabled{opacity:.6;cursor:wait}
#orderForm button:focus-visible,#orderForm summary:focus-visible{outline:2px solid #a84f38;outline-offset:3px}
@media(max-width:359px){
  #orderDialog:has(#orderFormWrap:not([hidden])){padding-inline:12px}
  #orderFormWrap>h2{font-size:26px}
  .checkout-snack-art{right:-9px}
  #orderFormWrap>#customerCheckoutHint{padding-right:92px;font-size:11px}
  .checkout-section{padding-inline:10px}
  #orderForm .checkout-submit-bar{grid-template-columns:91px minmax(0,1fr);gap:8px;margin-inline:-12px;padding-inline:13px}
  #orderForm #submitOrder{font-size:14px;gap:10px}
}
.checkout-order-error{margin:10px 0;padding:12px;border:1px solid #d98674;border-radius:10px;background:#fff2eb;color:#713b31;box-shadow:0 4px 12px #7d49310d}
.checkout-order-error[hidden]{display:none!important}
.checkout-order-error>strong{display:block;font-size:14px;line-height:1.45}
.checkout-order-error>p{margin:4px 0 0;font-size:11px;line-height:1.6;color:#805249}
.checkout-order-error-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.checkout-order-error-actions button{min-height:38px;border:1px solid #bd7769;border-radius:8px;background:#fffdf8;color:#8c493d;cursor:pointer;font-size:12px;font-weight:700}
#checkoutErrorPickup{border-color:var(--ink);background:var(--ink);color:#fff}
#checkoutErrorPickup[hidden]{display:none!important}

/* Reallocate grid space instead of overlapping the address with a negative margin.
   At the desktop dialog width this leaves about 300px for the address. */
.success-order-summary>.success-address-row{grid-template-columns:110.53px minmax(0,1fr);column-gap:6px;height:auto}
.success-address-row dt>.success-icon{flex-shrink:0}
#submittedAddress{width:100%;max-width:300px;justify-self:end;margin-left:0;white-space:normal;overflow:visible;overflow-wrap:anywhere;text-overflow:clip}
@media(max-width:780px){
  .success-order-summary>.success-address-row{grid-template-columns:105px minmax(0,1fr);column-gap:8px}
}