.ayp-pd {
  --ayp-pd-ink: #132d45;
  --ayp-pd-blue: #69c8e8;
  --ayp-pd-line: #d8e0e6;
  margin: 24px 0;
  padding: 20px;
  border: 1px solid var(--ayp-pd-line);
  border-radius: 12px;
  background: #fff;
  color: var(--ayp-pd-ink);
  box-sizing: border-box;
  container-type: inline-size;
}
.ayp-pd *, .ayp-pd *::before, .ayp-pd *::after { box-sizing: border-box; }
.ayp-pd [hidden] { display: none !important; }
.ayp-pd h3 { margin: 0 0 6px; color: inherit; font-size: 20px; }
.ayp-pd-heading { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.ayp-pd-heading h3 { margin: 0; }
.ayp-pd-help-trigger { display: grid; width: 23px; height: 23px; flex: 0 0 23px; place-items: center; padding: 0; border: 1px solid #9aaab5; border-radius: 50%; background: #fff; color: var(--ayp-pd-ink); font-size: 14px; font-weight: 700; line-height: 1; cursor: pointer; }
.ayp-pd-help-trigger:hover { background: #eef8fc; }
.ayp-pd-help-dialog { width: min(520px, calc(100% - 32px)); max-width: 520px; max-height: 85vh; max-height: 85dvh; overflow-y: auto; padding: 22px; border: 1px solid #d1dce3; border-radius: 12px; color: var(--ayp-pd-ink); box-shadow: 0 20px 60px rgba(14, 37, 53, .25); }
.ayp-pd-help-dialog::backdrop { background: rgba(20, 34, 48, .58); }
.ayp-pd-help-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ayp-pd-help-title h4 { margin: 0; font-size: 18px; }
.ayp-pd-help-title button { border: 0; background: transparent; color: inherit; font-size: 25px; line-height: 1; cursor: pointer; }
.ayp-pd-help-dialog ul { padding-left: 20px; line-height: 1.55; }
.ayp-pd-help-done { padding: 9px 16px; border: 0; border-radius: 7px; background: var(--ayp-pd-blue); color: #092e42; font-weight: 700; cursor: pointer; }
.ayp-pd-intro { margin: 0 0 16px; color: #566878; font-size: 13px; }
.ayp-pd-uploads { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.ayp-pd[data-sides="1"] .ayp-pd-uploads { grid-template-columns: minmax(0, 1fr); }
.ayp-pd-upload-field { display: grid; align-content: start; gap: 7px; min-width: 0; }
.ayp-pd-uploads label { display: block; min-width: 0; font-size: 12px; font-weight: 700; }
.ayp-pd-dropzone { position: relative; display: flex; min-height: 156px; flex-direction: column; align-items: center; justify-content: center; gap: 7px; overflow: hidden; padding: 15px; border: 1.5px dashed #78b5f4; border-radius: 9px; background: linear-gradient(145deg, #f7fbff, #eff7ff); color: #24466e; text-align: center; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.ayp-pd-dropzone svg { width: 38px; height: 38px; fill: none; stroke: #268cf0; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.2; }
.ayp-pd-dropzone strong { font-size: 13px; font-weight: 650; pointer-events: none; }
.ayp-pd-choose-file { display: inline-grid; min-height: 34px; place-items: center; padding: 5px 13px; border: 1px solid #83b8f1; border-radius: 6px; background: #fff; color: #2366bb; font-size: 12px; font-weight: 650; pointer-events: none; }
.ayp-pd-dropzone > small { max-width: 100%; overflow: hidden; color: #607b9a; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.ayp-pd-dropzone input[type="file"] { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; padding: 0; opacity: 0; cursor: pointer; }
.ayp-pd-dropzone.is-dragover, .ayp-pd-dropzone:focus-within { border-color: #0879e8; background: #e8f3ff; box-shadow: 0 0 0 3px rgba(45, 137, 232, .14); }
.ayp-pd-file-status { min-height: 14px; color: #516779; font-size: 10px; font-weight: 400; overflow-wrap: anywhere; }
.ayp-pd-upload-meta { display: flex; min-height: 24px; align-items: center; justify-content: space-between; gap: 8px; }
.ayp-pd-pages-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 14px; }
.ayp-pd-pages-row[data-sides="1"] { grid-template-columns: minmax(0, 1fr); }
.ayp-pd-page-options { min-width: 0; }
.ayp-pd-page-options[hidden] { display: none !important; }
.ayp-pd-page-options label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; }
.ayp-pd-page-options select { width: 100%; min-width: 0; padding: 7px 10px; border: 1px solid var(--ayp-pd-line); border-radius: 6px; background: #fff; color: var(--ayp-pd-ink); }
.ayp-pd-ratio-warning, .ayp-pd-page-note, .ayp-pd-size-note { margin: 0 0 12px; padding: 9px 11px; border-radius: 7px; font-size: 12px; line-height: 1.45; }
.ayp-pd-ratio-warning:not([hidden]) { border: 1px solid #e8c66e; background: #fff9e7; color: #634b08; }
.ayp-pd-page-note:not([hidden]), .ayp-pd-size-note:not([hidden]) { border: 1px solid #c5dce8; background: #f0f8fc; color: #214b62; }
.ayp-pd-view-tabs, .ayp-pd-adjust-sides { display: flex; gap: 8px; margin: 0 0 12px; border-bottom: 1px solid var(--ayp-pd-line); }
.ayp-pd-view-tabs button, .ayp-pd-adjust-sides button { min-height: 44px; padding: 9px 17px; border: 1px solid #d9e2eb; border-radius: 999px; background: #fff; color: #596d80; font: inherit; font-weight: 650; cursor: pointer; transition: color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease; }
.ayp-pd-view-tabs button[aria-selected="true"] { border-color: transparent; background: linear-gradient(105deg, #6021e8 0%, #1476e8 52%, #08bdd2 100%); color: #fff; box-shadow: 0 5px 14px rgba(64, 76, 212, .22); }
.ayp-pd-adjust-sides button[aria-pressed="true"] { border-color: transparent; background: linear-gradient(105deg, #087cc4 0%, #12a9ca 100%); color: #fff; box-shadow: 0 4px 11px rgba(6, 121, 178, .2); }
.ayp-pd-view-tabs button:hover, .ayp-pd-adjust-sides button:hover { transform: translateY(-1px); }
.ayp-pd-tab-panel[hidden], .ayp-pd-adjust-controls[hidden] { display: none !important; }
.ayp-pd-adjust-controls { display: grid; gap: 15px; padding: 14px 2px 6px; }
.ayp-pd-adjust-controls label { display: grid; grid-template-columns: minmax(0, 1fr) auto 38px; gap: 7px 11px; align-items: center; color: var(--ayp-pd-ink); font-size: 13px; font-weight: 600; }
.ayp-pd-adjust-controls output { min-width: 44px; color: #476275; text-align: right; font-variant-numeric: tabular-nums; }
.ayp-pd-reset-axis { display: grid; width: 36px; height: 36px; place-items: center; padding: 7px; border: 1px solid #d1d8f2; border-radius: 50%; background: #f9faff; color: #263c68; cursor: pointer; }
.ayp-pd-reset-axis:hover { border-color: #7565eb; background: #f0edff; }
.ayp-pd-reset-axis svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.ayp-pd-adjust-controls input[type="range"] { grid-column: 1 / -1; width: 100%; min-height: 30px; margin: 0; accent-color: #1685b1; cursor: pointer; }
.ayp-pd-reset-adjustments { min-height: 40px; padding: 8px 12px; border: 1px solid #b6c3cc; border-radius: 7px; background: #fff; color: var(--ayp-pd-ink); font: inherit; cursor: pointer; }
.ayp-pd-adjust-note { margin: 10px 0 0; color: #586a77; font-size: 12px; line-height: 1.5; }
.ayp-pd-2d-previews { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 17px; padding-top: 16px; border-top: 1px solid var(--ayp-pd-line); }
.ayp-pd-2d-preview { margin: 0; }
.ayp-pd-2d-preview[hidden] { display: none; }
.ayp-pd-2d-preview img { display: block; width: min(100%, 760px); aspect-ratio: var(--ayp-pd-ratio, 1.75); margin: auto; object-fit: contain; border: 1px solid #cbd6df; border-radius: 5px; background: #fff; box-shadow: 0 3px 12px rgba(24, 45, 61, .08); }
.ayp-pd-2d-preview figcaption { width: min(100%, 760px); margin: 8px auto 0; color: #596e82; font-size: 12px; }
.ayp-pd-remove { display: grid; flex: 0 0 27px; width: 27px; height: 27px; place-items: center; padding: 0; border: 1px solid #d6a8a8; border-radius: 50%; background: #fff; color: #9a2f2f; font-size: 20px; line-height: 1; cursor: pointer; }
.ayp-pd-remove:hover { background: #fff0f0; border-color: #9a2f2f; }
.ayp-pd-preview-wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 15px; align-items: center; padding: 20px; border-radius: 10px; background: linear-gradient(135deg, #f4f7f9, #e9eef2); }
.ayp-pd-stage { position: relative; display: grid; place-items: center; width: min(100%, 610px); min-height: 230px; aspect-ratio: var(--ayp-pd-viewport-ratio, 1.4); margin: auto; overflow: hidden; contain: paint; border-radius: 8px; perspective: 1100px; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.ayp-pd-stage:active { cursor: grabbing; }
.ayp-pd-card { position: relative; width: 78%; aspect-ratio: var(--ayp-pd-ratio, 1.75); transform-style: preserve-3d; transition: none; cursor: inherit; pointer-events: none; }
.ayp-pd-card.is-dragging { cursor: grabbing; transition: none; }
.ayp-pd-face { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; border: 1px solid #aab5bc; border-radius: 3px; background: #fff; box-shadow: 0 15px 28px rgba(21, 35, 46, .2); backface-visibility: hidden; transform: translateZ(5px); }
.ayp-pd-face::after { position: absolute; z-index: 2; inset: 0; background: radial-gradient(ellipse at var(--ayp-pd-shine-x, 50%) var(--ayp-pd-shine-y, 50%), rgba(255,255,255,.72) 0%, rgba(255,255,255,.23) 19%, rgba(255,255,255,0) 59%); content: ""; opacity: var(--ayp-pd-shine-opacity, .08); mix-blend-mode: screen; pointer-events: none; }
.ayp-pd-back { transform: rotateY(180deg) translateZ(5px); }
.ayp-pd-face.is-dark { background: linear-gradient(145deg, #30343a, #101216); color: #fff; }
.ayp-pd-art { display: grid; width: 100%; height: 100%; place-items: center; overflow: hidden; color: #71808b; font-size: 12px; }
.ayp-pd-art img, .ayp-pd-art iframe { display: block; width: 100%; height: 100%; border: 0; object-fit: contain; background: #fff; }
.ayp-pd-art img { pointer-events: none; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
.ayp-pd-face.is-dark .ayp-pd-art { color: #d5d8da; }
.ayp-pd-preview-actions { display: grid; gap: 8px; width: 142px; min-width: 0; }
.ayp-pd-preview-actions button { min-height: 44px; padding: 9px 13px; border: 1px solid #672be2; border-radius: 8px; background: #fff; color: #245ed4; font: inherit; font-weight: 650; cursor: pointer; }
.ayp-pd-preview-actions button[aria-pressed="true"] { border-color: transparent; background: linear-gradient(105deg, #6021e8 0%, #1476e8 52%, #08bdd2 100%); color: #fff; box-shadow: 0 5px 14px rgba(64, 76, 212, .22); }
.ayp-pd-preview-actions small { margin-top: 4px; color: #586a77; font-size: 10px; line-height: 1.4; }
.ayp-pd-cart-thumb { width: 70px; height: auto; object-fit: contain; }
.ayp-pd-cart-pdf { width: 76px; height: 58px; border: 0; background: #f5f7f8; }
.ayp-pd-line-preview { display: block; width: min(100%, 110px); max-height: 74px; object-fit: contain; border: 1px solid #d8e0e6; border-radius: 3px; }
.single_add_to_cart_button:disabled { opacity: .5; cursor: not-allowed; }
.ayp-pd button:focus-visible, .ayp-pd select:focus-visible, .ayp-pd input:focus-visible { outline: 3px solid #1685b1; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .ayp-pd * { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
@container (max-width: 620px) {
  .ayp-pd-preview-wrap { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 11px; }
  .ayp-pd-stage { width: 100%; min-height: 210px; aspect-ratio: 1.4; }
  .ayp-pd-preview-actions { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ayp-pd-preview-actions small { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .ayp-pd { width: 100%; margin: 18px 0; padding: 14px; border-radius: 10px; }
  .ayp-pd-intro { margin-bottom: 13px; font-size: 14px; line-height: 1.45; }
  .ayp-pd-uploads { grid-template-columns: 1fr; gap: 12px; margin-bottom: 14px; }
  .ayp-pd-uploads label { gap: 6px; font-size: 13px; }
  .ayp-pd-dropzone { min-height: 148px; padding: 13px 10px; }
  .ayp-pd-dropzone strong { font-size: 13px; }
  .ayp-pd-dropzone svg { width: 35px; height: 35px; }
  .ayp-pd-pages-row { gap: 8px; margin-bottom: 12px; }
  .ayp-pd-file-status { min-height: 18px; font-size: 12px; line-height: 1.4; }
  .ayp-pd-remove { flex-basis: 44px; width: 44px; height: 44px; font-size: 23px; }
  .ayp-pd-page-options label { display: grid; gap: 6px; font-size: 12px; }
  .ayp-pd-page-options select { width: 100%; min-height: 46px; padding: 6px; font-size: 16px; }
  .ayp-pd-ratio-warning, .ayp-pd-page-note { padding: 11px 12px; font-size: 13px; }
  .ayp-pd-preview-wrap { grid-template-columns: 1fr; gap: 12px; padding: 11px; }
  .ayp-pd-stage { width: 100%; min-height: clamp(210px, 65vw, 290px); aspect-ratio: 1.4; }
  .ayp-pd-card { touch-action: none; }
  .ayp-pd-preview-actions { display: grid; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; min-width: 0; }
  .ayp-pd-preview-actions button { min-height: 46px; padding: 10px 14px; font-size: 15px; }
  .ayp-pd-preview-actions small { grid-column: 1 / -1; margin-top: 1px; font-size: 12px; }
  .ayp-pd-view-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  .ayp-pd-view-tabs button { min-height: 48px; padding: 10px 8px; font-size: 14px; }
  .ayp-pd-adjust-sides button { flex: 1; min-height: 46px; }
  .ayp-pd-adjust-controls { gap: 18px; padding: 14px 2px 8px; }
  .ayp-pd-adjust-controls label { grid-template-columns: minmax(0, 1fr) auto 40px; gap: 7px 8px; font-size: 14px; }
  .ayp-pd-reset-axis { width: 40px; height: 40px; }
  .ayp-pd-adjust-controls input[type="range"] { min-height: 40px; }
  .ayp-pd-reset-adjustments { width: 100%; min-height: 46px; font-size: 14px; }
  .ayp-pd-adjust-note { font-size: 13px; }
  .ayp-pd-2d-previews { margin-top: 14px; padding-top: 14px; }
  .ayp-pd-2d-preview img { width: 100%; }
  .ayp-pd-help-trigger { width: 40px; height: 40px; flex-basis: 40px; font-size: 17px; }
  .ayp-pd-help-dialog { width: calc(100% - 24px); max-height: 85vh; max-height: 85dvh; padding: 18px; border-radius: 12px; font-size: 14px; }
  .ayp-pd-help-title h4 { padding-top: 5px; font-size: 17px; }
  .ayp-pd-help-title button { min-width: 40px; min-height: 40px; }
  .ayp-pd-help-dialog ul { padding-left: 19px; line-height: 1.55; }
  .ayp-pd-help-done { width: 100%; min-height: 46px; font-size: 15px; }
}
@media (max-width: 420px) {
  .ayp-pd { padding: 12px; }
  .ayp-pd-heading h3 { font-size: 18px; }
  .ayp-pd-preview-wrap { padding: 8px; }
  .ayp-pd-stage { min-height: 205px; }
}

/* Choice of artwork service and compact uploaded-file state. */
.ayp-pd-workflow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; min-width: 0; margin: 15px 0 18px; padding: 0; border: 0; }
.ayp-pd-workflow legend { margin-bottom: 9px; padding: 0; color: #506779; font-size: 13px; }
.ayp-pd-workflow > label { display: flex; align-items: flex-start; gap: 9px; min-width: 0; padding: 13px 11px; border: 1px solid #d6e0eb; border-radius: 10px; background: #fbfcfe; cursor: pointer; }
.ayp-pd-workflow > label:has(input:checked) { border-color: #7965df; background: #f3f0ff; box-shadow: 0 0 0 1px #7965df; }
.ayp-pd-workflow input[type="radio"] { flex: 0 0 auto; width: 17px; height: 17px; margin: 2px 0 0; accent-color: #6252d8; }
.ayp-pd-workflow strong, .ayp-pd-workflow small { display: block; }
.ayp-pd-workflow strong { color: #203c58; font-size: 13px; line-height: 1.4; }
.ayp-pd-workflow small { margin-top: 5px; color: #62768b; font-size: 11px; line-height: 1.5; }
.ayp-pd-design-service { margin-top: 12px; padding: 13px; border: 1px solid #d9e3ec; border-radius: 9px; background: #f6faff; font-size: 13px; line-height: 1.6; }
.ayp-pd-design-service p { margin: 0 0 12px; }
.ayp-pd-design-service label { display: grid; gap: 6px; font-weight: 600; }
.ayp-pd-design-service textarea { width: 100%; resize: vertical; padding: 10px; border: 1px solid #cbd6e4; border-radius: 7px; background: #fff; color: #213f5d; font: inherit; font-weight: 400; }
.ayp-pd-file-info { display: grid; gap: 3px; min-width: 0; }
.ayp-pd-file-info > strong { overflow-wrap: anywhere; color: #254563; font-size: 12px; }
.ayp-pd-file-info > strong:empty { display: none; }
.ayp-pd-upload-field.is-uploaded .ayp-pd-upload-meta { min-height: 68px; padding: 10px; border: 1px solid #c9dfd5; border-radius: 8px; background: #f4fbf7; }
.ayp-pd-upload-field.is-uploaded .ayp-pd-file-status { color: #416d58; }
.ayp-pd-2d-preview img { height: auto; aspect-ratio: auto; background: #edf1f6; }
@container (max-width: 420px) {
  .ayp-pd-workflow { grid-template-columns: minmax(0, 1fr); }
  .ayp-pd-workflow small { font-size: 12px; }
}

/* One artwork summary per cart/checkout line; native swipe and manual side navigation. */
.ayp-pd-artwork-summary, .ayp-pd-artwork-summary * { box-sizing: border-box; }
.ayp-pd-artwork-summary { display: block; width: 100%; max-width: 360px; min-width: 0; margin: 10px 0 6px; padding: 12px; border: 1px solid #dce4ef; border-radius: 10px; background: #f9fbfe; color: #1e3c58; text-align: left; font-size: 13px; font-weight: 400; line-height: 1.4; }
.ayp-pd-summary-heading { display: block; margin-bottom: 8px; color: #1d3554; font-size: 13px; font-weight: 650; }
.ayp-pd-specs { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.ayp-pd-specs > span { display: inline-block; padding: 4px 7px; border: 1px solid #d9e4ee; border-radius: 99px; background: #fff; color: #46647d; font-size: 11px; line-height: 1.3; }
.ayp-pd-gallery { width: 100%; max-width: 290px; min-width: 0; }
.ayp-pd-gallery-track { position: relative; display: flex; width: 100%; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; border: 1px solid #d4dee9; border-radius: 7px; background: #fff; }
.ayp-pd-gallery-slide { display: block; flex: 0 0 100%; min-width: 0; width: 100%; margin: 0; padding: 7px; scroll-snap-align: start; }
.ayp-pd-gallery-slide img { display: block !important; float: none !important; width: 100% !important; max-width: 100% !important; height: 135px !important; margin: 0 !important; border-radius: 3px; object-fit: contain; box-shadow: none; }
.ayp-pd-gallery-slide figcaption { margin-top: 5px; color: #60768c; font-size: 11px; text-align: center; }
.ayp-pd-gallery-nav { display: flex; gap: 6px; margin-top: 7px; }
.ayp-pd-gallery-nav a { display: inline-block; min-width: 65px; padding: 6px 12px; border: 1px solid #d2ddee; border-radius: 99px; background: #fff; color: #435f7f; text-align: center; text-decoration: none !important; font-size: 12px; line-height: 1.5; }
.ayp-pd-gallery-nav a[aria-current="true"] { border-color: #6274ce; background: #eaf0ff; color: #334a9c; }
.ayp-pd-gallery-nav a:focus-visible, .ayp-pd-gallery-track:focus-visible { outline: 2px solid #6274ce; outline-offset: 2px; }
.ayp-pd-design-pending { display: grid; gap: 4px; padding: 11px; border: 1px dashed #c9d3e8; border-radius: 7px; background: #fff; color: #536b83; }
.ayp-pd-design-pending strong { font-size: 13px; }
.ayp-pd-design-pending span { font-size: 12px; }
.ayp-pd-custom-row td.product-thumbnail[hidden] { display: none !important; }
.ayp-pd-custom-row .wcf-product-thumbnail { display: none !important; }
.ayp-pd-custom-row .wcf-product-name { width: auto !important; }
@media (max-width: 700px) {
  .ayp-pd-artwork-summary { max-width: 100%; padding: 10px; }
  .ayp-pd-gallery-nav a { min-height: 40px; padding-top: 9px; }
  .ayp-pd-design-service textarea { font-size: 16px; }
}
/* These products need their artwork choice before entering the payment flow. */
body.ayp-pd-enabled-product #wcpay-express-checkout-element,
body.ayp-pd-enabled-product .wcpay-express-checkout-wrapper,
body.ayp-pd-enabled-product #wc-stripe-express-checkout-element,
body.ayp-pd-enabled-product #wc-stripe-payment-request-wrapper,
body.ayp-pd-enabled-product .ppc-button-wrapper { display: none !important; }

/* Upload transfer and server-confirmed completion are separate phases. */
.ayp-pd-upload-limit { margin: -5px 0 14px; padding: 9px 11px; border: 1px solid #d7e4f4; border-radius: 7px; background: #f5f9ff; color: #385776; font-size: 12px; line-height: 1.5; }
.ayp-pd-file-info { width: 100%; }
.ayp-pd-file-info progress { display: block; width: 100%; height: 10px; margin: 6px 0 3px; accent-color: #6252d8; }
.ayp-pd-retry { justify-self: start; min-height: 40px; margin-top: 5px; padding: 7px 15px; border: 1px solid #526ec4; border-radius: 7px; background: #edf2ff; color: #254b91; font: inherit; font-size: 13px; cursor: pointer; }
.ayp-pd-upload-field.has-error .ayp-pd-file-status { color: #a32735; font-weight: 600; }
.ayp-pd-upload-field.has-error .ayp-pd-upload-meta { padding: 10px; border: 1px solid #efb6be; border-radius: 8px; background: #fff5f5; }
.ayp-pd-purchase-status { margin: 12px 0 0; color: #536b83; font-size: 13px; line-height: 1.5; }
.ayp-pd-purchase-status.is-ready { color: #246a49; }
.ayp-pd[data-kind="postcard"] .ayp-pd-card, .ayp-pd[data-kind="flyer"] .ayp-pd-card { border-radius: 1px; }
@media (max-width: 700px) { .ayp-pd-retry { min-height: 44px; } }

/* One physical frame for both sides; quarter-turn controls only for flexible print types. */
.ayp-pd-card { width: var(--ayp-pd-card-width, 78%); }
.ayp-pd-orientation-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; padding: 10px 0 12px; color: #49647d; font-size: 12px; }
.ayp-pd-orientation-tools > span { flex: 1 1 130px; }
.ayp-pd-orientation-tools output { min-width: 68px; font-size: 12px; }
.ayp-pd-rotate-artwork { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 64px; min-height: 42px; padding: 7px 10px; border: 1px solid #c6c7ef; border-radius: 10px; background: #f3f2ff; color: #354c97; cursor: pointer; font-size: 13px; }
.ayp-pd-rotate-artwork svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ayp-pd-rotate-artwork:disabled { opacity: .45; cursor: default; }
.ayp-pd-rotate-artwork:focus-visible { outline: 2px solid #6274ce; outline-offset: 2px; }
.ayp-pd-2d-preview { overflow: hidden; }
.ayp-pd-2d-preview img { height: auto; aspect-ratio: var(--ayp-pd-ratio, 1.75); border-radius: 1px; background: #fff; }
@media (max-width: 700px) { .ayp-pd-rotate-artwork { min-height: 44px; } }

/* Branded transfer progress: the percentage and the moving color treatment are independent. */
.ayp-pd-progress { width: 100%; height: 16px; margin: 8px 0 5px; overflow: hidden; border-radius: 99px; background: #e6eaf4; box-shadow: inset 0 1px 3px rgba(30, 48, 83, .12); }
.ayp-pd-progress > span { display: block; width: var(--ayp-pd-progress, 0%); height: 100%; border-radius: inherit; background: linear-gradient(105deg, #6021e8, #08bdd2, #6021e8); background-size: 240% 100%; animation: ayp-pd-progress-colors 2.4s ease-in-out infinite alternate; transition: width .15s linear; }
.ayp-pd-progress.is-indeterminate > span { width: 100%; opacity: .8; }
@keyframes ayp-pd-progress-colors { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
/* UI cut line is never baked into the uploaded original or saved proof. */
.ayp-pd-2d-previews { padding: 28px 22px 22px; border: 0; border-radius: 10px; background: linear-gradient(135deg, #f4f7f9, #e9eef2); }
.ayp-pd-2d-preview { padding: 0; overflow: visible; }
.ayp-pd-2d-preview img { border: 2px dashed #d83b48; border-radius: 1px; background: #fff; }
.ayp-pd-2d-preview figcaption { margin-top: 12px; color: #9b3340; line-height: 1.5; }
.ayp-pd-finalizing .ayp-pd { cursor: progress; }
.ayp-pd-finalizing .ayp-pd-adjust-controls, .ayp-pd-finalizing .ayp-pd-orientation-tools { opacity: .65; }
/* Completion dialog follows the FastGenQR celebration card's visual structure. */
.ayp-pd-upload-dialog { position: fixed; width: min(420px, calc(100% - 32px)); max-height: 85vh; max-height: 85dvh; margin: auto; padding: 34px 25px 24px; overflow-y: auto; border: 1px solid rgba(255,255,255,.72); border-radius: 20px; background: #fff; color: #132d45; box-shadow: 0 28px 90px rgba(10,20,35,.28); text-align: center; }
.ayp-pd-upload-dialog[open] { animation: ayp-pd-modal-pop .28s ease-out both; }
.ayp-pd-upload-dialog::backdrop { background: rgba(17,25,35,.54); backdrop-filter: blur(5px); }
.ayp-pd-modal-close { position: absolute; top: 10px; right: 12px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #66758b; font-size: 25px; cursor: pointer; }
.ayp-pd-ready-mark { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 16px; border-radius: 17px; background: #d5f55b; color: #2b56cf; font-size: 30px; font-weight: 900; transform: rotate(-5deg); }
.ayp-pd-modal-kicker { margin: 0 0 9px; color: #4264c9; font-size: 11px; font-weight: 800; letter-spacing: .16em; }
.ayp-pd-upload-dialog h4 { margin: 0 0 10px; color: #132d45; font-size: 26px; line-height: 1.15; letter-spacing: -.04em; }
.ayp-pd-upload-dialog > p:not(.ayp-pd-modal-kicker) { margin: 0 0 17px; color: #617086; font-size: 13px; line-height: 1.55; }
.ayp-pd-modal-previews { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 0 0 20px; padding: 12px; border-radius: 10px; background: #eef2f6; }
.ayp-pd-modal-previews figure { flex: 1 1 110px; min-width: 0; max-width: 240px; margin: 0; }
.ayp-pd-modal-previews img { display: block; max-width: 100%; width: auto; height: auto; max-height: 160px; margin: auto; border: 1px solid #d4dce7; background: #fff; object-fit: contain; }
.ayp-pd-modal-previews figcaption { margin-top: 6px; color: #63748a; font-size: 11px; }
.ayp-pd-modal-actions { display: flex; gap: 9px; justify-content: center; }
.ayp-pd-modal-actions button { min-height: 44px; padding: 10px 15px; border-radius: 9px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.ayp-pd-modal-ok { border: 1px solid #d0d8e6; background: #fff; color: #496080; }
.ayp-pd-modal-view { flex: 1; border: 0; background: linear-gradient(105deg,#6021e8,#08bdd2); color: #fff; }
.ayp-pd-confetti { position: absolute; inset: 0; pointer-events: none; font-size: 19px; }
.ayp-pd-confetti span { position: absolute; }
.ayp-pd-confetti span:nth-child(1) { top: 9%; left: 15%; color: #f2b84b; }
.ayp-pd-confetti span:nth-child(2) { top: 6%; right: 19%; color: #ef776a; }
.ayp-pd-confetti span:nth-child(3) { top: 16%; right: 10%; color: #50be75; }
.ayp-pd-confetti span:nth-child(4) { top: 20%; left: 9%; color: #ef776a; }
@keyframes ayp-pd-modal-pop { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@media (max-width: 700px) { .ayp-pd-2d-previews { padding: 24px 14px 18px; } .ayp-pd-upload-dialog { padding: 32px 19px 20px; } }
@media (prefers-reduced-motion: reduce) { .ayp-pd-progress > span, .ayp-pd-upload-dialog[open] { animation: none; } }