* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: monospace; width: 80mm; margin: 0 auto; } .receipt { width: 100%; padding: 3mm; } .store-info { text-align: center; margin-bottom: 3mm; } .store-icon { display: flex; justify-content: center; margin-bottom: 2mm; } .store-icon svg { width: 38px; height: 38px; } .store-name { font-weight: bold; font-size: 14px; } .store-details, .store-phone { font-size: 12px; } .separator { text-align: center; font-size: 12px; margin: 0mm 0; } .receipt-title { text-align: center; font-weight: bold; font-size: 14px; margin: 2mm 0; } .order-info { text-align: center; font-size: 12px; margin: 2mm 0; } .order-info > *:first-child { font-weight: bold; } .order-info > *:last-child { font-size: 9px; } .customer-info { font-size: 12px; margin: 3mm 0; } .items-header { display: flex; justify-content: space-between; font-size: 12px; margin: 2mm 0; border-bottom: 1px dashed #a1a1a1; } .item-row { display: flex; justify-content: space-between; font-size: 12px; margin: 1mm 0; } .desc { flex: 2; } .qty { flex: 0.5; text-align: center; } .price { flex: 1; text-align: right; } .totals { margin: 3mm 0; font-size: 12px; } .total-row { display: flex; justify-content: space-between; margin: 1mm 0; } .status > *:last-child { font-weight: bold; } .final { font-weight: bold; margin-top: 2mm; border-top: 1px dashed #a1a1a1; padding-top: 1mm; } .thank-you { text-align: center; font-weight: bold; font-size: 14px; margin: 2mm 0; } .footer { text-align: center; font-size: 10px; margin-top: 2mm; } @media print { @page { margin: 0; size: 80mm auto; } html, body { width: 80mm; background: none; } .receipt { width: 100%; } }