/* PrintKit Uploads: the artwork part of the product form. Follows the theme's colours and type. */
.pk-uploads [hidden], .pk-order-artwork [hidden] { display: none !important; } /* the flex boxes below would otherwise show when hidden */
.pk-uploads { margin: 1.25rem 0; padding: 1rem; border: 1px solid color-mix(in srgb, currentColor 20%, transparent); border-radius: 6px; }
.pk-uploads__heading { margin: 0 0 0.5rem; font-size: 1.1em; }
.pk-uploads__layout { border: 0; margin: 0 0 0.75rem; padding: 0; }
.pk-uploads__layout legend { font-weight: 600; margin-bottom: 0.25rem; }
.pk-uploads__layout label { display: block; margin: 0.2rem 0; }
.pk-uploads__needs { margin: 0 0 0.5rem; font-weight: 600; }
.pk-uploads__drop { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: center; padding: 1.25rem 1rem; border: 2px dashed color-mix(in srgb, currentColor 35%, transparent); border-radius: 6px; text-align: center; }
.pk-uploads__drop--over { border-color: currentColor; background: color-mix(in srgb, currentColor 6%, transparent); }
.pk-uploads__browse { position: relative; cursor: pointer; display: inline-block; padding: 0.55rem 1.1rem; border: 1px solid currentColor; border-radius: 4px; font-weight: 600; }
.pk-uploads__browse input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.pk-uploads__browse:focus-within { outline: 2px solid currentColor; outline-offset: 2px; }
.pk-uploads__files { list-style: none; margin: 0.75rem 0 0; padding: 0; }
.pk-uploads--missing { border: 2px solid #b32d2e; }
.pk-uploads__alert { margin: 0 0 0.75rem; padding: 0.6rem 0.8rem; border-left: 4px solid #b32d2e; background: color-mix(in srgb, #b32d2e 8%, transparent); color: #8a1f1f; font-weight: 600; }
.pk-uploads__alert:focus { outline: 2px solid #b32d2e; outline-offset: 2px; }
.pk-uploads--missing .pk-uploads__drop:not([hidden]) { border-color: #b32d2e; }
.pk-uploads--missing .pk-uploads__later { outline: 2px solid #b32d2e; outline-offset: 4px; border-radius: 2px; }
.pk-uploads__layout-note { margin: 0.25rem 0 0; font-size: 0.9em; }
.pk-uploads__slots { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.pk-slot { display: grid; gap: 0.35rem; }
.pk-slot__label { font-weight: 600; }
.pk-slot__drop { padding: 0.9rem 1rem; }
.pk-slot__file { list-style: none; margin: 0; padding: 0; }
.pk-slot__file .pk-file { border-top: 0; padding: 0; }
.pk-slot--filled { padding: 0.5rem; border: 1px solid color-mix(in srgb, currentColor 20%, transparent); border-radius: 6px; }
.pk-file { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; gap: 0.75rem; align-items: center; padding: 0.5rem 0; border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent); }
.pk-file__thumb { width: 3.5rem; height: 3.5rem; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, currentColor 6%, transparent); border-radius: 4px; overflow: hidden; }
.pk-file__thumb img, .pk-file__thumb canvas { max-width: 100%; max-height: 100%; }
.pk-file__body { display: grid; gap: 0.15rem; min-width: 0; }
.pk-file__name { font-weight: 600; overflow-wrap: anywhere; }
.pk-file__meta, .pk-file__advice { font-size: 0.9em; }
.pk-file progress { width: 100%; height: 0.5rem; }
.pk-file--warn .pk-file__advice { color: #8a5a00; }
.pk-file--mismatch .pk-file__advice { color: #b32d2e; font-weight: 600; }
.pk-file--mismatch { outline: 2px solid #b32d2e; outline-offset: 2px; border-radius: 4px; }
.pk-file--refused .pk-file__advice { color: #b32d2e; }
.pk-file__screenshot { margin-top: 0.25rem; padding: 0.4em 0.65em; border-left: 3px solid #dba617; background: #fcf9e8; color: #1d2327; font-size: 0.9em; }
.pk-file--refused .pk-file__name { text-decoration: line-through; }
.pk-uploads__types, .pk-uploads__later-note { font-size: 0.9em; margin: 0.75rem 0 0.25rem; }
.pk-uploads__later { display: block; margin-top: 0.5rem; }
.pk-uploads__later-note { margin-top: 0.1rem; }
.pk-uploads__checklist { margin-top: 0.75rem; }
.pk-uploads__checklist summary { cursor: pointer; font-weight: 600; }
.pk-uploads__checklist ul { margin: 0.5rem 0 0 1.25rem; }
@media (max-width: 600px) {
	.pk-uploads__browse { width: 100%; padding: 0.9rem; font-size: 1.05em; } /* large on phones (spec) */
	.pk-file { grid-template-columns: 3rem minmax(0, 1fr); }
	.pk-file__remove { grid-column: 2; justify-self: start; }
}
/* My Account > the order: "Your artwork", a block per print line */
.pk-order-artwork { margin: 2rem 0; }
.pk-order-artwork__line { margin: 0 0 1.25rem; padding: 1rem; border: 1px solid color-mix(in srgb, currentColor 20%, transparent); border-radius: 6px; }
.pk-order-artwork__line--needed { border: 2px solid #b32d2e; }
.pk-order-artwork__line h3 { margin: 0 0 0.25rem; font-size: 1.05em; }
.pk-order-artwork__state { margin: 0 0 0.75rem; font-size: 0.95em; }
.pk-order-artwork__line--needed .pk-order-artwork__state { color: #8a1f1f; font-weight: 600; }
.pk-uploads--order { margin: 0; padding: 0; border: 0; }
.pk-uploads__complete { margin: 0 0 0.75rem; padding: 0.6rem 0.8rem; border-left: 4px solid #2e7d32; background: color-mix(in srgb, #2e7d32 10%, transparent); font-weight: 600; }
.pk-order-artwork__closed { margin: 0 0 1rem; padding: 0.75rem 1rem; border-left: 4px solid #2e7d32; background: color-mix(in srgb, #2e7d32 10%, transparent); font-weight: 600; }
.pk-slot--missing .pk-slot__label { color: #8a1f1f; }
.pk-slot--missing .pk-slot__drop { border-color: #b32d2e; }
/* The order screen's Artwork files box (staff) */
.pk-order-artwork--staff { margin: 0; }
.pk-order-artwork--staff .pk-order-artwork__line { margin: 0.75rem 0; padding: 0.75rem 1rem; }
.pk-order-artwork--staff h3 { margin: 0 0 0.25rem; font-size: 14px; }
.pk-order-artwork--staff .pk-order-artwork__state { margin: 0 0 0.5rem; }
.pk-order-artwork--staff .pk-uploads__browse { padding: 0.3rem 0.8rem; }
.pk-order-artwork--staff .pk-uploads__drop, .pk-order-artwork--staff .pk-slot__drop { padding: 0.6rem; }
.pk-file__download { font-weight: 600; }
/* Staff: confirm a removal, and choose whether to email the customer */
.pk-remove-dialog { max-width: 32rem; border: 1px solid #c3c4c7; border-radius: 6px; padding: 1.25rem 1.5rem; }
.pk-remove-dialog::backdrop { background: rgba(0, 0, 0, 0.4); }
.pk-remove-dialog__question { font-weight: 600; margin-top: 0; overflow-wrap: anywhere; }
.pk-remove-dialog label { display: block; margin: 0.5rem 0; }
.pk-remove-dialog__help { margin: 0 0 0.5rem 1.6rem; color: #50575e; font-size: 12px; }
.pk-remove-dialog textarea { display: block; width: 100%; margin-top: 0.25rem; }
.pk-remove-dialog__buttons { text-align: right; margin-bottom: 0; }
.pk-remove-dialog [hidden] { display: none !important; }