/*
 * PRINTMARKS R72.1 — Mobile & Tablet Order App
 * Final responsive layer. This intentionally loads after every legacy style
 * so the actual ordering experience matches the approved device mockups.
 */
:root {
  --pm-order-navy-950: #071a38;
  --pm-order-navy-900: #0a2857;
  --pm-order-navy-850: #0d326d;
  --pm-order-blue-600: #2868ed;
  --pm-order-blue-500: #3579f6;
  --pm-order-blue-100: #eaf2ff;
  --pm-order-shell: #eef3f9;
  --pm-order-card: #ffffff;
  --pm-order-line: #d4deeb;
  --pm-order-line-strong: #bdcce0;
  --pm-order-text: #112846;
  --pm-order-muted: #6d7f97;
  --pm-order-success: #13a86b;
  --pm-order-warning: #ef9b25;
  --pm-order-offline: #8898ac;
  --pm-order-shadow: 0 28px 76px rgba(4, 17, 42, .24);
}

/* Shared real order form */
#printJobForm {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 14px;
  max-width: 1040px;
  margin-inline: auto;
  padding: 22px;
  color: var(--pm-order-text);
  border: 1px solid rgba(184, 200, 220, .72);
  border-radius: 26px;
  background: linear-gradient(180deg, #f4f7fb 0%, var(--pm-order-shell) 100%);
  box-shadow: 0 18px 48px rgba(15, 35, 70, .09);
  overflow: hidden;
}

#printJobForm::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: 130px;
  background: linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,255,255,0));
  pointer-events: none;
}

.pm-order-app-topbar {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 12px 10px 15px;
  color: #fff;
  border: 1px solid rgba(132, 173, 233, .20);
  border-radius: 18px;
  background: linear-gradient(135deg, var(--pm-order-navy-900), #08224b);
  box-shadow: 0 12px 28px rgba(7, 29, 66, .19), inset 0 1px 0 rgba(255,255,255,.08);
}

.pm-order-app-brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.pm-order-app-logo {
  position: relative;
  flex: 0 0 29px;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  background: linear-gradient(145deg, #ff923b, #f05e24);
  box-shadow: 0 0 0 4px rgba(255,255,255,.08), inset 0 1px 2px rgba(255,255,255,.35);
}

.pm-order-app-logo::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: #fff;
  opacity: .92;
}

.pm-order-app-brand div { min-width: 0; }
.pm-order-app-brand b,
.pm-order-app-brand small { display: block; white-space: nowrap; }
.pm-order-app-brand b { font-size: .77rem; line-height: 1.05; font-weight: 900; letter-spacing: .08em; }
.pm-order-app-brand small { margin-top: 3px; color: #b9ccec; font-size: .55rem; font-weight: 800; letter-spacing: .09em; }

.pm-order-app-shop-button {
  flex: 0 0 auto;
  min-width: 92px;
  min-height: 35px;
  padding: 8px 14px;
  color: #fff;
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 999px;
  background: linear-gradient(180deg, #3e83ff, #2869eb);
  box-shadow: 0 8px 18px rgba(29, 101, 237, .32), inset 0 1px 0 rgba(255,255,255,.22);
  font: inherit;
  font-size: .65rem;
  font-weight: 900;
  letter-spacing: .045em;
  cursor: pointer;
}
.pm-order-app-shop-button:hover { transform: translateY(-1px); filter: brightness(1.04); }
.pm-order-app-shop-button:active { transform: translateY(0); }

.pm-order-app-intro { padding: 2px 3px 0; }
.pm-order-app-intro > small {
  display: block;
  margin-bottom: 3px;
  color: var(--pm-order-blue-600);
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .11em;
}
.pm-order-app-intro h2 {
  margin: 0;
  color: var(--pm-order-text);
  font-size: clamp(1.35rem, 2.1vw, 1.85rem);
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: -.025em;
}
.pm-order-app-intro p {
  margin: 5px 0 0;
  color: var(--pm-order-muted);
  font-size: .86rem;
  line-height: 1.45;
}

#printJobForm .direct-order-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 13px;
  color: #174b89;
  border: 1px solid #c2d9f7;
  border-radius: 13px;
  background: #eaf3ff;
  font-size: .76rem;
}

#printJobForm .order-mode-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  padding: 5px;
  border: 1px solid #dbe4ef;
  border-radius: 15px;
  background: #e8edf4;
}
#printJobForm .order-mode-switch button {
  min-width: 0;
  min-height: 44px;
  display: grid;
  place-content: center;
  gap: 2px;
  padding: 7px 12px;
  color: #708096;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  box-shadow: none;
  font: inherit;
  cursor: pointer;
}
#printJobForm .order-mode-switch button b {
  color: inherit;
  font-size: .69rem;
  font-weight: 900;
  letter-spacing: .055em;
}
#printJobForm .order-mode-switch button span {
  color: inherit;
  font-size: .58rem;
  line-height: 1.2;
}
#printJobForm .order-mode-switch button.active {
  color: #173e78;
  border-color: #d5e0ee;
  background: #fff;
  box-shadow: 0 5px 14px rgba(20, 48, 91, .10), inset 0 1px 0 #fff;
}

#printJobForm .quick-order-note {
  margin: -2px 1px 1px;
  padding: 10px 12px;
  color: #536983;
  border: 1px solid #dce5f0;
  border-radius: 12px;
  background: rgba(255,255,255,.63);
  font-size: .73rem;
  line-height: 1.45;
}

#printJobForm .form-grid { display: grid; gap: 11px; }
#printJobForm .form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#printJobForm .form-grid.four { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#printJobForm .form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

#printJobForm label:not(.check):not(.guest-honeypot) {
  min-width: 0;
  display: grid;
  gap: 6px;
  color: #65778e;
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .055em;
  text-transform: uppercase;
}
#printJobForm label > span { text-transform: none; letter-spacing: 0; font-weight: 700; }

#printJobForm input:not([type="checkbox"]):not([type="file"]):not([type="hidden"]),
#printJobForm select,
#printJobForm textarea {
  width: 100%;
  min-width: 0;
  color: #102642;
  border: 1px solid var(--pm-order-line);
  border-radius: 12px;
  outline: 0;
  background: rgba(255,255,255,.96);
  box-shadow: 0 2px 4px rgba(12, 35, 70, .025), inset 0 1px 0 rgba(255,255,255,.9);
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
#printJobForm input:not([type="checkbox"]):not([type="file"]):not([type="hidden"]),
#printJobForm select { min-height: 45px; padding: 0 12px; }
#printJobForm textarea { min-height: 86px; padding: 12px; line-height: 1.45; resize: vertical; }
#printJobForm input:focus,
#printJobForm select:focus,
#printJobForm textarea:focus {
  border-color: #75a7f5;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(47, 112, 241, .13);
}

#printJobForm label.check {
  min-height: 43px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  color: #334d6d;
  border: 1px solid var(--pm-order-line);
  border-radius: 12px;
  background: rgba(255,255,255,.72);
  font-size: .74rem;
  font-weight: 800;
  cursor: pointer;
}
#printJobForm label.check input {
  width: 17px;
  height: 17px;
  accent-color: var(--pm-order-blue-600);
}

#printJobForm .guest-honeypot {
  position: absolute !important;
  left: -99999px !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#printJobForm .upload-zone {
  position: relative;
  min-height: 126px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  padding: 18px;
  text-align: center;
  color: #5c7190;
  border: 1.5px solid #aac5eb;
  border-radius: 15px;
  background: linear-gradient(180deg, #f5f9ff, #eaf3ff);
  overflow: hidden;
  cursor: pointer;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
#printJobForm .upload-zone:hover,
#printJobForm .upload-zone.dragging {
  border-color: #4d89ec;
  box-shadow: 0 10px 26px rgba(39, 100, 210, .12), inset 0 0 0 1px rgba(71, 132, 239, .10);
  transform: translateY(-1px);
}
#printJobForm .upload-zone input[type="file"] {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.pm-upload-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: #fff;
  border-radius: 11px;
  background: linear-gradient(180deg, #4282f7, #2768e9);
  box-shadow: 0 9px 20px rgba(37, 103, 230, .25);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
}
#printJobForm .upload-zone > b {
  color: #1951a0;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .06em;
}
#printJobForm .upload-zone > span:not(.pm-upload-icon) {
  max-width: 520px;
  color: #7a8ca3;
  font-size: .65rem;
  line-height: 1.4;
}
#printJobForm .selected-files {
  position: relative;
  z-index: 4;
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
}
#printJobForm .selected-files i {
  max-width: 100%;
  padding: 5px 8px;
  color: #1c4c8a;
  border: 1px solid #c5daf7;
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  font-size: .61rem;
  font-style: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-order-app-status {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  color: #fff;
  border: 1px solid rgba(130, 169, 224, .18);
  border-radius: 14px;
  background: linear-gradient(135deg, var(--pm-order-navy-900), #0a234b);
  box-shadow: 0 12px 27px rgba(6, 28, 64, .16), inset 0 1px 0 rgba(255,255,255,.06);
}
.pm-order-status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--pm-order-offline);
  box-shadow: 0 0 0 4px rgba(255,255,255,.08);
}
.pm-order-app-status.ready .pm-order-status-dot { background: #55a1ff; box-shadow: 0 0 0 4px rgba(85,161,255,.14), 0 0 15px rgba(85,161,255,.42); }
.pm-order-app-status.online .pm-order-status-dot { background: #35d88b; box-shadow: 0 0 0 4px rgba(53,216,139,.14), 0 0 15px rgba(53,216,139,.42); }
.pm-order-app-status.offline .pm-order-status-dot { background: #9aa9ba; }
.pm-order-app-status.warning .pm-order-status-dot { background: #ffb54e; box-shadow: 0 0 0 4px rgba(255,181,78,.14); }
.pm-order-app-status b,
.pm-order-app-status small { display: block; }
.pm-order-app-status b { font-size: .75rem; line-height: 1.2; font-weight: 900; }
.pm-order-app-status small { margin-top: 3px; color: #b9c9df; font-size: .62rem; line-height: 1.35; }

#printJobForm .job-submit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 5px 0 0;
  background: transparent;
}
#printJobForm .job-submit-row > div { min-width: 0; }
#printJobForm .job-submit-row b,
#printJobForm .job-submit-row span { display: block; }
#printJobForm .job-submit-row b { color: #233e60; font-size: .78rem; font-weight: 900; }
#printJobForm .job-submit-row span { margin-top: 3px; color: #7b899a; font-size: .64rem; line-height: 1.35; }
#printJobForm #submitJobBtn {
  flex: 0 0 auto;
  min-width: 210px;
  min-height: 50px;
  padding: 13px 20px;
  color: #fff;
  border: 0;
  border-radius: 13px;
  background: linear-gradient(180deg, #3a7bf5, #2666e7);
  box-shadow: 0 13px 25px rgba(33, 99, 226, .26), inset 0 1px 0 rgba(255,255,255,.22);
  font: inherit;
  font-size: .73rem;
  font-weight: 900;
  letter-spacing: .055em;
  cursor: pointer;
}
#printJobForm #submitJobBtn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.04); }
#printJobForm #submitJobBtn:disabled { opacity: .48; cursor: not-allowed; box-shadow: none; }
#printJobForm .form-message { min-height: 0; margin: 0; font-size: .72rem; }

/* Tablet and phone: turn the public shop Order tab into the actual mockup-like app. */
@media (max-width: 1024px) {
  body.shop-order-app-open { overflow: hidden !important; background: var(--pm-order-navy-950) !important; }
  .standalone-shop-page.order-app-mode {
    position: fixed !important;
    inset: 0 !important;
    overflow: auto !important;
    overscroll-behavior: contain;
    background:
      radial-gradient(circle at 50% -12%, rgba(53, 120, 238, .24), transparent 36%),
      linear-gradient(180deg, #102f63 0%, #0a2857 48%, #071d40 100%) !important;
    scrollbar-gutter: stable;
  }
  .standalone-shop-page.order-app-mode .standalone-shop-shell {
    min-height: 100dvh !important;
    display: block !important;
    overflow: visible !important;
    background: transparent !important;
  }
  .standalone-shop-page.order-app-mode .standalone-shop-topbar,
  .standalone-shop-page.order-app-mode .standalone-shop-hero,
  .standalone-shop-page.order-app-mode .standalone-shop-tabs,
  .standalone-shop-page.order-app-mode .standalone-mobile-actions,
  .standalone-shop-page.order-app-mode [data-shop-panel="order"] > .shop-page-section-head,
  .standalone-shop-page.order-app-mode .standalone-order-cta-strip,
  .standalone-shop-page.order-app-mode .temporary-transfer-banner {
    display: none !important;
  }
  .standalone-shop-page.order-app-mode .shop-page-content {
    width: 100% !important;
    max-width: none !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding: clamp(18px, 4vw, 38px) 14px !important;
    display: grid !important;
    place-items: start center !important;
    background: transparent !important;
    overflow: visible !important;
  }
  .standalone-shop-page.order-app-mode .standalone-panel {
    width: 100% !important;
    max-width: 760px !important;
    margin: 0 auto !important;
  }
  .standalone-shop-page.order-app-mode .standalone-panel.active {
    display: block !important;
  }
  .standalone-shop-page.order-app-mode .standalone-order-mount { width: 100% !important; }
  .standalone-shop-page.order-app-mode #printJobForm {
    width: 100% !important;
    max-width: 760px !important;
    min-height: calc(100dvh - clamp(36px, 8vw, 76px)) !important;
    margin: 0 auto !important;
    padding: 18px !important;
    gap: 12px !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    border-radius: 30px !important;
    background: linear-gradient(180deg, #f4f7fb 0%, #eaf0f7 100%) !important;
    box-shadow: 0 34px 86px rgba(2, 12, 31, .42), inset 0 1px 0 rgba(255,255,255,.75) !important;
  }
  .standalone-shop-page.order-app-mode #printJobForm .form-grid.three,
  .standalone-shop-page.order-app-mode #printJobForm .form-grid.four,
  .standalone-shop-page.order-app-mode #printJobForm .form-grid.two {
    grid-template-columns: 1fr !important;
  }
  .standalone-shop-page.order-app-mode #printJobForm .quick-order-note { display: none !important; }
  .standalone-shop-page.order-app-mode #printJobForm .job-submit-row {
    position: sticky;
    z-index: 9;
    bottom: 0;
    margin: 0 -4px -4px;
    padding: 8px 4px 4px;
    background: linear-gradient(180deg, rgba(235,241,248,0), rgba(235,241,248,.96) 28%, #ebf1f8 55%);
  }
  .standalone-shop-page.order-app-mode #printJobForm .job-submit-row > div { display: none; }
  .standalone-shop-page.order-app-mode #printJobForm #submitJobBtn { width: 100%; min-width: 0; }

  /* Homepage order section also uses the approved navy canvas on tablet/mobile. */
  #submit.section {
    background:
      radial-gradient(circle at 50% 0%, rgba(55, 124, 242, .20), transparent 34%),
      linear-gradient(180deg, #102f63, #08234d) !important;
  }
  #submit .section-heading { color: #fff; }
  #submit .section-heading h2 { color: #fff !important; }
  #submit .section-heading p { color: #bed0e7 !important; }
  #submit .submit-guide { display: none !important; }
  #submit #printJobForm { box-shadow: var(--pm-order-shadow); }
}

/* Tablet */
@media (min-width: 641px) and (max-width: 1024px) {
  .standalone-shop-page.order-app-mode .shop-page-content { padding: 26px 20px !important; }
  .standalone-shop-page.order-app-mode #printJobForm {
    max-width: 720px !important;
    padding: 22px !important;
    gap: 14px !important;
  }
  .pm-order-app-topbar { min-height: 68px; padding-inline: 17px 13px; border-radius: 20px; }
  .pm-order-app-logo { width: 32px; height: 32px; flex-basis: 32px; }
  .pm-order-app-brand b { font-size: .82rem; }
  .pm-order-app-brand small { font-size: .58rem; }
  .pm-order-app-shop-button { min-width: 105px; min-height: 38px; }
  .pm-order-app-intro h2 { font-size: 1.65rem; }
  .pm-order-app-intro p { font-size: .84rem; }
  #printJobForm .order-mode-switch button { min-height: 48px; }
  #printJobForm input:not([type="checkbox"]):not([type="file"]):not([type="hidden"]),
  #printJobForm select { min-height: 49px; font-size: .86rem; }
  #printJobForm textarea { min-height: 92px; font-size: .86rem; }
  #printJobForm .upload-zone { min-height: 145px; }
  #printJobForm #submitJobBtn { min-height: 54px; }
}

/* Phone */
@media (max-width: 640px) {
  .standalone-shop-page.order-app-mode .shop-page-content { padding: 10px 8px 16px !important; align-items: start !important; }
  .standalone-shop-page.order-app-mode .standalone-panel { max-width: 430px !important; }
  .standalone-shop-page.order-app-mode #printJobForm,
  #submit #printJobForm {
    max-width: 430px !important;
    padding: 12px !important;
    gap: 9px !important;
    border-radius: 25px !important;
  }
  .standalone-shop-page.order-app-mode #printJobForm { min-height: calc(100dvh - 20px) !important; }
  .pm-order-app-topbar { min-height: 54px; padding: 8px 9px 8px 11px; border-radius: 15px; }
  .pm-order-app-logo { width: 25px; height: 25px; flex-basis: 25px; }
  .pm-order-app-logo::after { inset: 7px; }
  .pm-order-app-brand { gap: 8px; }
  .pm-order-app-brand b { font-size: .64rem; }
  .pm-order-app-brand small { margin-top: 2px; font-size: .46rem; }
  .pm-order-app-shop-button { min-width: 72px; min-height: 30px; padding: 6px 10px; font-size: .53rem; }
  .pm-order-app-intro { padding-inline: 2px; }
  .pm-order-app-intro > small { margin-bottom: 2px; font-size: .51rem; }
  .pm-order-app-intro h2 { font-size: 1.18rem; line-height: 1.12; }
  .pm-order-app-intro p { margin-top: 3px; font-size: .68rem; line-height: 1.35; }
  #printJobForm .direct-order-banner { padding: 8px 10px; border-radius: 11px; font-size: .63rem; }
  #printJobForm .order-mode-switch { gap: 4px; padding: 4px; border-radius: 12px; }
  #printJobForm .order-mode-switch button { min-height: 38px; padding: 5px 7px; border-radius: 9px; }
  #printJobForm .order-mode-switch button b { font-size: .58rem; }
  #printJobForm .order-mode-switch button span { font-size: .47rem; }
  #printJobForm label:not(.check):not(.guest-honeypot) { gap: 4px; font-size: .50rem; }
  #printJobForm input:not([type="checkbox"]):not([type="file"]):not([type="hidden"]),
  #printJobForm select { min-height: 41px; padding-inline: 10px; border-radius: 10px; font-size: .75rem; }
  #printJobForm textarea { min-height: 72px; padding: 10px; border-radius: 10px; font-size: .75rem; }
  #printJobForm label.check { min-height: 39px; padding: 8px 10px; border-radius: 10px; font-size: .65rem; }
  #printJobForm .upload-zone { min-height: 103px; gap: 4px; padding: 12px 10px; border-radius: 13px; }
  .pm-upload-icon { width: 31px; height: 31px; border-radius: 9px; font-size: 1rem; }
  #printJobForm .upload-zone > b { font-size: .61rem; }
  #printJobForm .upload-zone > span:not(.pm-upload-icon) { max-width: 290px; font-size: .53rem; }
  #printJobForm .selected-files i { max-width: 290px; padding: 4px 7px; font-size: .50rem; }
  .pm-order-app-status { gap: 9px; padding: 10px 11px; border-radius: 12px; }
  .pm-order-status-dot { width: 10px; height: 10px; }
  .pm-order-app-status b { font-size: .65rem; }
  .pm-order-app-status small { font-size: .52rem; }
  #printJobForm .job-submit-row { margin-top: -1px; }
  #printJobForm #submitJobBtn { min-height: 45px; border-radius: 11px; font-size: .62rem; }
  #printJobForm .form-message { font-size: .61rem; }
}

@media (max-width: 380px) {
  .standalone-shop-page.order-app-mode .shop-page-content { padding-inline: 4px !important; }
  .standalone-shop-page.order-app-mode #printJobForm,
  #submit #printJobForm { padding: 10px !important; border-radius: 22px !important; }
  .pm-order-app-shop-button { min-width: 66px; padding-inline: 8px; }
  .pm-order-app-brand small { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pm-order-app-shop-button,
  #printJobForm .upload-zone,
  #printJobForm #submitJobBtn { transition: none !important; transform: none !important; }
}


/* ==========================================================================\n   PRINTMARKS R72.2 — upload progress, file thumbnails, fullscreen messages,\n   and center-right shop services drawer.\n   ========================================================================== */
.upload-progress-panel {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid #c8d8ee;
  border-radius: 14px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 8px 22px rgba(14,43,84,.08);
}
.upload-progress-panel.hidden { display: none !important; }
.upload-progress-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #193c6b; }
.upload-progress-head span { font-size: .73rem; font-weight: 850; }
.upload-progress-head b { font-size: .74rem; font-weight: 950; }
.upload-progress-track { height: 9px; overflow: hidden; border-radius: 999px; background: #dbe5f2; box-shadow: inset 0 1px 2px rgba(8,30,66,.10); }
.upload-progress-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#2c6ee9,#4b91ff); transition: width .18s linear; }
.upload-progress-panel.success { border-color: #a9dfc5; background: #effbf5; }
.upload-progress-panel.success .upload-progress-track i { background: linear-gradient(90deg,#13a86b,#42cf92); }
.upload-progress-panel.error { border-color: #efb2b2; background: #fff3f3; }
.upload-progress-panel.error .upload-progress-track i { background: #d75555; }
.upload-progress-panel > small { color: #6f8096; font-size: .62rem; line-height: 1.35; }

#printJobForm .selected-files { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); align-items: stretch; justify-content: stretch; gap: 7px; margin-top: 4px; }
#printJobForm .selected-file-card { min-width: 0; display: grid; grid-template-columns: 42px minmax(0,1fr); align-items: center; gap: 8px; padding: 6px; border: 1px solid #c7d9ef; border-radius: 11px; background: rgba(255,255,255,.91); text-align: left; }
#printJobForm .selected-file-card > img, #printJobForm .selected-file-card > span { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; }
#printJobForm .selected-file-card > span { display: grid; place-items: center; color: #fff; background: linear-gradient(145deg,#234f91,#2f75e7); font-size: .54rem; font-weight: 950; letter-spacing: .04em; }
#printJobForm .selected-file-card div { min-width: 0; }
#printJobForm .selected-file-card b, #printJobForm .selected-file-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#printJobForm .selected-file-card b { color: #193a68; font-size: .61rem; }
#printJobForm .selected-file-card small { margin-top: 2px; color: #75869c; font-size: .52rem; }
.job-success-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }

.message-order-context { flex: 0 0 auto; display: grid; gap: 9px; padding: 11px 12px; border-bottom: 1px solid #dce5f0; background: #f5f8fc; }
.message-order-context.hidden { display: none !important; }
.message-order-title { display: flex; align-items: end; justify-content: space-between; gap: 10px; }
.message-order-title span, .message-order-title b { display: block; }
.message-order-title span { color: #2868ed; font-size: .54rem; font-weight: 950; letter-spacing: .10em; }
.message-order-title b { color: #17375f; font-size: .78rem; }
.message-order-title small { color: #74859a; font-size: .56rem; }
.message-order-list { display: grid; gap: 8px; max-height: 300px; overflow: auto; }
.message-order-card { display: grid; gap: 8px; padding: 9px; border: 1px solid #d5e0ed; border-radius: 13px; background: #fff; }
.message-order-card.latest { border-color: #abc8ef; box-shadow: 0 5px 14px rgba(25,74,142,.07); }
.message-order-card-head { display: flex; align-items: start; justify-content: space-between; gap: 8px; }
.message-order-card-head b, .message-order-card-head span { display: block; }
.message-order-card-head b { color: #15365e; font-size: .68rem; }
.message-order-card-head span { margin-top: 2px; color: #77889c; font-size: .50rem; }
.message-order-card-head i { flex: 0 0 auto; padding: 4px 6px; border-radius: 999px; background: #eaf2ff; color: #235fb9; font-size: .48rem; font-style: normal; font-weight: 900; text-transform: uppercase; }
.message-file-thumbs { display: grid; grid-template-columns: repeat(auto-fill,minmax(92px,1fr)); gap: 7px; }
.message-file-thumb { min-width: 0; display: grid; gap: 4px; padding: 5px; color: inherit; border: 1px solid #dae4ef; border-radius: 10px; background: #f8fbff; text-decoration: none; }
.message-file-thumb img, .message-file-type { width: 100%; aspect-ratio: 1.25; border-radius: 7px; object-fit: cover; }
.message-file-type { display: grid; place-items: center; color: #fff; background: linear-gradient(145deg,#183c73,#2d73e7); font-size: .75rem; font-weight: 950; }
.message-file-thumb b, .message-file-thumb small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.message-file-thumb b { color: #1b3f6e; font-size: .52rem; }
.message-file-thumb small { color: #79899e; font-size: .45rem; }
.message-file-thumb.unavailable { opacity: .66; }
.message-order-note, .message-order-no-files, .message-order-empty, .message-order-loading { margin: 0; color: #6d7e93; font-size: .58rem; line-height: 1.35; }
.message-order-empty { display: grid; gap: 3px; padding: 8px; text-align: center; }

.order-services-handle, .order-services-drawer, .order-services-overlay { display: none; }
.standalone-shop-page.order-app-mode .order-services-handle {
  position: fixed; z-index: 1006; top: 50%; right: 0; display: flex; align-items: center; gap: 7px; padding: 10px 8px 10px 11px; color: #fff; border: 1px solid rgba(255,255,255,.22); border-right: 0; border-radius: 15px 0 0 15px; background: linear-gradient(180deg,#397df4,#2463dc); box-shadow: 0 12px 30px rgba(2,16,42,.30); transform: translateY(-50%); cursor: pointer;
}
.order-services-handle span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: .58rem; font-weight: 950; letter-spacing: .09em; text-transform: uppercase; }
.order-services-handle b { font-size: .82rem; }
.standalone-shop-page.order-app-mode .order-services-overlay { position: fixed; z-index: 1007; inset: 0; display: block; background: rgba(4,16,36,.48); backdrop-filter: blur(3px); }
.standalone-shop-page.order-app-mode .order-services-overlay.hidden { display: none !important; }
.standalone-shop-page.order-app-mode .order-services-drawer { position: fixed; z-index: 1008; top: 0; right: 0; width: min(390px,92vw); height: 100dvh; display: grid; grid-template-rows: auto minmax(0,1fr); color: #142e50; border-left: 1px solid rgba(255,255,255,.22); background: linear-gradient(180deg,#f7f9fc,#eaf0f7); box-shadow: -28px 0 70px rgba(3,16,39,.32); }
.standalone-shop-page.order-app-mode .order-services-drawer.hidden { display: none !important; }
.order-services-drawer header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px; color: #fff; background: linear-gradient(135deg,#0d326d,#071d40); }
.order-services-drawer header span { font-size: .56rem; font-weight: 950; letter-spacing: .12em; }
.order-services-drawer header h2 { margin: 3px 0 0; color: #fff; font-size: 1.15rem; }
.order-services-drawer header button { width: 37px; height: 37px; border: 1px solid rgba(255,255,255,.20); border-radius: 50%; background: rgba(255,255,255,.10); color: #fff; font-size: 1.2rem; cursor: pointer; }
.order-services-list { display: grid; align-content: start; gap: 9px; padding: 14px; overflow: auto; }
.order-service-choice { width: 100%; display: grid; grid-template-columns: 56px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 8px; text-align: left; color: #17365d; border: 1px solid #d4dfec; border-radius: 14px; background: #fff; box-shadow: 0 5px 16px rgba(14,43,84,.06); cursor: pointer; }
.order-service-choice:hover { border-color: #8bb4ef; transform: translateY(-1px); }
.order-service-choice img, .order-service-choice-icon { width: 56px; height: 50px; border-radius: 10px; object-fit: cover; }
.order-service-choice-icon { display: grid; place-items: center; color: #fff; background: linear-gradient(145deg,#173d76,#2f78eb); font-size: .64rem; font-weight: 950; }
.order-service-choice span { min-width: 0; }
.order-service-choice b, .order-service-choice small { display: block; }
.order-service-choice b { font-size: .70rem; }
.order-service-choice small { margin-top: 3px; color: #77889d; font-size: .55rem; }
.order-service-choice i { padding: 6px 8px; color: #2465c7; border-radius: 999px; background: #eaf2ff; font-size: .50rem; font-style: normal; font-weight: 900; }
body.order-services-open { overflow: hidden !important; }

@media (max-width: 1024px) {
  body.messenger-fullscreen-open { overflow: hidden !important; }
  #messengerDrawer.messenger-drawer {
    position: fixed !important; z-index: 2500 !important; inset: 0 !important; width: 100vw !important; max-width: none !important; height: 100dvh !important; max-height: none !important; display: flex !important; flex-direction: column !important; border: 0 !important; border-radius: 0 !important; background: #eef3f9 !important; box-shadow: none !important;
  }
  #messengerDrawer.hidden { display: none !important; }
  #messengerDrawer .drawer-head { flex: 0 0 auto; padding: 12px 14px !important; color: #fff !important; background: linear-gradient(135deg,#0d326d,#071d40) !important; }
  #messengerDrawer .drawer-head h3 { color: #fff !important; }
  #messengerDrawer .message-role-context { flex: 0 0 auto; }
  #messengerDrawer .conversation-list { flex: 1 1 auto; max-height: none !important; overflow: auto; }
  #messengerDrawer .message-order-context { max-height: 42dvh; }
  #messengerDrawer .message-thread { flex: 1 1 auto; min-height: 0; max-height: none !important; overflow: auto; padding-bottom: 15px; }
  #messengerDrawer .message-composer { flex: 0 0 auto; position: sticky; bottom: 0; padding: 10px max(10px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left)) !important; border-top: 1px solid #d2deec; background: rgba(247,250,253,.96); backdrop-filter: blur(14px); }
}

@media (max-width: 640px) {
  .upload-progress-panel { padding: 9px 10px; gap: 6px; border-radius: 11px; }
  .upload-progress-head span, .upload-progress-head b { font-size: .60rem; }
  .upload-progress-track { height: 7px; }
  .upload-progress-panel > small { font-size: .50rem; }
  #printJobForm .selected-files { grid-template-columns: 1fr; gap: 5px; }
  #printJobForm .selected-file-card { grid-template-columns: 36px minmax(0,1fr); padding: 5px; }
  #printJobForm .selected-file-card > img, #printJobForm .selected-file-card > span { width: 36px; height: 36px; }
  .order-services-handle { padding-inline: 7px !important; }
  .order-services-handle span { font-size: .50rem; }
  #messengerDrawer .message-order-context { padding: 8px; max-height: 39dvh; }
  .message-order-list { max-height: 32dvh; }
  .message-file-thumbs { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .message-bubble { max-width: 88% !important; }
}

/* R72.3 deployment visibility stamp */
.pm-web-build{display:inline-flex;align-items:center;margin-left:8px;padding:3px 7px;border:1px solid rgba(148,163,184,.35);border-radius:999px;font-size:9px;font-weight:850;letter-spacing:.06em;white-space:nowrap;opacity:.78}

/* R72.4 payment readiness */
.payment-choice-option.payment-unavailable{opacity:.68;filter:saturate(.72)}
.payment-choice-option.payment-unavailable small::after{content:" • Setup required";font-weight:800}


/* Consolidated R8 — secure storefront payment choice */
.track-secure-checkout{margin:14px 0;padding:14px;border:1px solid rgba(37,99,235,.18);border-radius:16px;background:rgba(37,99,235,.055)}
.track-secure-checkout>p{margin:5px 0 10px;color:var(--muted,#64748b)}
.track-payment-method-chips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 12px}
.track-payment-method-chips span{display:inline-flex;align-items:center;min-height:28px;padding:5px 9px;border:1px solid rgba(15,23,42,.10);border-radius:999px;background:#fff;font-size:12px;font-weight:800;color:#334155}
@media(max-width:620px){.track-secure-checkout{padding:12px}.track-payment-method-chips span{font-size:11px}}

.marketplace-order-stages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:14px 0}.marketplace-order-stage{display:flex;align-items:center;gap:7px;min-width:0;padding:9px;border:1px solid rgba(15,23,42,.10);border-radius:13px;background:rgba(148,163,184,.08);color:#64748b;font-size:11px;font-weight:800}.marketplace-order-stage i{width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:#e2e8f0;font-style:normal;font-size:10px}.marketplace-order-stage.done,.marketplace-order-stage.current{color:#0f172a;border-color:rgba(37,99,235,.20)}.marketplace-order-stage.done i{background:#dcfce7;color:#166534}.marketplace-order-stage.current i{background:#dbeafe;color:#1d4ed8}@media(max-width:620px){.marketplace-order-stages{grid-template-columns:repeat(2,minmax(0,1fr))}}