/* Supplies step only: old desktop controls keep their existing layout. */
#touchSuppliesDialog:not([open]) { display: none; }
body[data-layout="desktop"] #touchSuppliesDialog { display: none; }
body:is([data-layout="mobile"], [data-layout="portrait"]) #touchSuppliesDialog {
  box-sizing: border-box; width: min(540px, calc(100vw - 24px)); max-width: 100%;
  max-height: calc(100dvh - 32px); padding: 0; margin: auto; border: 0;
  border-radius: 22px; color: var(--touch-ink, #242a26); background: var(--touch-canvas, #f7f6f2);
  box-shadow: 0 16px 64px #17231d33; overflow: hidden;
}
body:is([data-layout="mobile"], [data-layout="portrait"]) #touchSuppliesDialog[open] { display: flex; flex-direction: column; }
/* Keep the underlying cart and its second red CTA out of this decision step. */
body:is([data-layout="mobile"], [data-layout="portrait"]) #touchSuppliesDialog::backdrop { background: #eef0e9; }
body:is([data-layout="mobile"], [data-layout="portrait"]) .supplies-dialog-header {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex: none;
  padding: 14px 14px 12px 20px; border-bottom: 1px solid var(--touch-line, #e4e5dd);
}
body:is([data-layout="mobile"], [data-layout="portrait"]) #touchSuppliesTitle { margin: 0; font-size: 22px; line-height: 1.25; }
/* Initial focus announces the title; keyboard buttons keep their own outline. */
body:is([data-layout="mobile"], [data-layout="portrait"]) #touchSuppliesTitle:focus { outline: none; }
body:is([data-layout="mobile"], [data-layout="portrait"]) #touchSuppliesClose {
  width: 44px; height: 44px; flex: 0 0 44px; padding: 11px; border: 0; background: transparent; color: var(--touch-muted, #62695f);
}
body:is([data-layout="mobile"], [data-layout="portrait"]) #touchSuppliesClose svg { display: block; width: 22px; height: 22px; }
body:is([data-layout="mobile"], [data-layout="portrait"]) .supplies-dialog-scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px; }
body:is([data-layout="mobile"], [data-layout="portrait"]) #touchSuppliesRows { display: grid; gap: 10px; }
body:is([data-layout="mobile"], [data-layout="portrait"]) .supplies-dialog-row {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  background: white; border: 1px solid var(--touch-line, #e4e5dd); border-radius: 15px; padding: 12px 10px;
  font-size: 15px; font-weight: 650;
}
body:is([data-layout="mobile"], [data-layout="portrait"]) .supplies-dialog-row img { width: 48px; height: 48px; object-fit: contain; }
body:is([data-layout="mobile"], [data-layout="portrait"]) .supplies-dialog-quantity { display: flex; align-items: center; background: #eff0e9; border-radius: 12px; }
body:is([data-layout="mobile"], [data-layout="portrait"]) .supplies-dialog-quantity button {
  width: 44px; min-width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: transparent;
  color: var(--touch-ink, #242a26); font: inherit; font-size: 23px;
}
body:is([data-layout="mobile"], [data-layout="portrait"]) .supplies-dialog-quantity button:disabled { opacity: .35; }
body:is([data-layout="mobile"], [data-layout="portrait"]) .supplies-dialog-quantity span { min-width: 22px; text-align: center; font-size: 15px; }
body:is([data-layout="mobile"], [data-layout="portrait"]) .supplies-dialog-footer { flex: none; padding: 14px 16px max(16px, env(safe-area-inset-bottom)); border-top: 1px solid var(--touch-line, #e4e5dd); background: white; }
body:is([data-layout="mobile"], [data-layout="portrait"]) #touchSuppliesContinue {
  width: 100%; min-height: 52px; padding: 12px 10px; border: 0; border-radius: 15px;
  background: var(--touch-accent, #cc4238); color: white; font: inherit; font-size: 16px; font-weight: 700; line-height: 1.3;
}
body:is([data-layout="mobile"], [data-layout="portrait"]) #touchSuppliesDialog button:focus-visible { outline: 2px solid var(--touch-cart-accent, #b93830); outline-offset: 2px; }
body:is([data-layout="mobile"], [data-layout="portrait"]) #touchSuppliesToggle:disabled { opacity: 1; cursor: default; color: var(--touch-muted); font-weight: 400; }
body:is([data-layout="mobile"], [data-layout="portrait"]) #touchSuppliesToggle[hidden] { display: none; }
body:is([data-layout="mobile"], [data-layout="portrait"]) #touchSuppliesToggle .touch-supplies-indicator { font-size: 13px; color: var(--touch-cart-accent); }
body:is([data-layout="mobile"], [data-layout="portrait"]) #touchSuppliesToggle .touch-supplies-indicator[hidden] { display: none; }