/* calculator.css - the printing price calculator page. */
body { margin: 0; background: #fff; }
.dz-calc { max-width: 1000px; margin: 0 auto; padding: 16px; }
.dz-calc .dz-h1 { font-size: 22px; margin: 0 0 14px; }
.dz-calc-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr); gap: 20px; align-items: start; }
@media (max-width: 800px) { .dz-calc-grid { grid-template-columns: minmax(0, 1fr); } }
.dz-calc-form { display: flex; flex-direction: column; gap: 12px; }
.dz-calc-form [hidden] { display: none; }
.dz-calc-print { display: block; background: #fff; }
.dz-calc-out { border: 1px solid var(--dz-line); border-radius: 8px; padding: 14px; display: flex; flex-direction: column; gap: 12px; position: sticky; top: 12px; }
.dz-calc-total td { font-size: 17px; }
.dz-calc-grid > * { min-width: 0; }
.dz-calc select, .dz-calc .dz-input { max-width: 100%; min-width: 0; }
.dz-calc-cur { align-items: center; gap: 6px; }
.dz-calc .dz-quote table { width: 100%; }
.dz-calc .dz-quote td { white-space: normal; overflow-wrap: anywhere; }
.dz-calc .dz-quote td:last-child { white-space: nowrap; text-align: right; }
/* the shirt with the prints on it */
.dz-calc-stage { display: grid; gap: 8px; }
.dz-calc-stage.dz-calc-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.dz-calc-view { position: relative; line-height: 0; border: 1px solid var(--dz-line); border-radius: 8px; overflow: hidden; background: var(--dz-soft); }
.dz-calc-view > img { width: 100%; height: auto; display: block; }
.dz-calc-area { position: absolute; outline: 1px dashed rgba(13, 110, 253, .35); }
.dz-calc-pr { position: absolute; height: auto; }
.dz-calc-box { border: 2px dashed #0d6efd; background: rgba(13, 110, 253, .08); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.dz-calc-box span { font: 600 10px/1.25 system-ui, sans-serif; color: #0d6efd; text-align: center; }
.dz-calc-art img { width: 40px; height: 40px; object-fit: contain; border: 1px solid var(--dz-line); border-radius: 4px;
  background: repeating-conic-gradient(#eef0f3 0 25%, #fff 0 50%) 0 0 / 10px 10px; }
.dz-calc-art .text-truncate { min-width: 0; }