/* Responsive layer for Deliver and Store. Overrides inline desktop styles at small widths. */
@media (max-width: 900px) {
  * { box-sizing: border-box !important; }
  html, body { overflow-x: hidden !important; min-width: 0 !important; width: 100% !important; }
  [style*="min-width:1280px"], [style*="min-width: 1280px"] { min-width: 0 !important; }

  /* desktop gutters inside inline padding shorthands */
  [style*="px 56px"], [style*="px 48px"], [style*="px 40px"], [style*="px 36px"] { padding-left: 18px !important; padding-right: 18px !important; }

  /* fixed-width panels */
  [style*="width:400px"], [style*="width:470px"], [style*="width:440px"], [style*="width:520px"] { width: 100% !important; }
  [style*="flex:none"] { flex: 0 1 auto !important; max-width: 100% !important; }
  [style*="flex-shrink:0"] { flex-shrink: 1 !important; min-width: 0 !important; }
  img, svg, iframe, table { max-width: 100% !important; }

  /* every multi-column grid collapses */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* flex rows wrap instead of overflowing */
  [style*="display:flex"], [style*="display: flex"] { flex-wrap: wrap !important; }

  /* gutters: one source of horizontal padding */
  main { padding-left: 18px !important; padding-right: 18px !important; }
  main > section, main > div { padding-left: 0 !important; padding-right: 0 !important; }
  .wrap { padding-left: 0 !important; padding-right: 0 !important; max-width: 100% !important; }
  footer { padding-left: 18px !important; padding-right: 18px !important; }
  footer .wrap { padding-left: 0 !important; padding-right: 0 !important; }

  /* header */
  header { padding: 12px 18px !important; flex-wrap: wrap !important; gap: 10px !important; row-gap: 12px !important; }
  header nav { gap: 14px !important; font-size: 12px !important; flex-wrap: wrap !important; white-space: normal !important; width: 100% !important; order: 3; }
  header img[src*="ds-logo"], header img[src*="DS_LOGO"] { height: 138px !important; width: 138px !important; }
  header img[src*="wordmark"] { display: none !important; }
  header > div:first-of-type, header > a:first-of-type, header > :first-child { flex: 1 0 100% !important; width: 100% !important; justify-content: center !important; }
  header nav { justify-content: center !important; }

  /* type scale */
  h1 { font-size: clamp(30px, 8.6vw, 42px) !important; line-height: 1.04 !important; letter-spacing: -0.02em !important; }
  h2 { font-size: clamp(23px, 6.4vw, 30px) !important; line-height: 1.1 !important; }
  h3 { font-size: clamp(19px, 5vw, 23px) !important; }
  p, li, span, a, td, th { text-wrap: pretty; }
  [style*="font-size:60px"], [style*="font-size:56px"], [style*="font-size:52px"], [style*="font-size:48px"] { font-size: clamp(30px, 8.6vw, 42px) !important; }
  [style*="font-size:40px"], [style*="font-size:38px"], [style*="font-size:36px"] { font-size: clamp(23px, 6.4vw, 30px) !important; }
  [style*="font-size:19px"], [style*="font-size:18px"] { font-size: 16px !important; }

  /* fixed widths and min-widths that force overflow */
  [style*="min-width:168px"] { min-width: 0 !important; flex: 1 1 120px !important; }
  [style*="max-width:470px"], [style*="max-width:760px"], [style*="max-width:236px"], [style*="max-width:300px"] { max-width: 100% !important; }
  [style*="min-height:420px"] { min-height: 220px !important; }
  [style*="white-space:nowrap"] { white-space: normal !important; }

  /* CTA rows: label above, buttons full width */
  [style*="width:64px"] { width: 100% !important; }

  /* tables scroll rather than stretch the page */
  table { display: block !important; overflow-x: auto !important; }
}

@media (max-width: 560px) {
  header nav { gap: 10px !important; font-size: 11.5px !important; }
  main { padding-left: 14px !important; padding-right: 14px !important; }
  footer { padding-left: 14px !important; padding-right: 14px !important; }
  [style*="border-radius:16px"], [style*="border-radius:12px"] { padding-left: 18px !important; padding-right: 18px !important; }
}