@import url('/letter-fonts.css');
.checkout-letter{margin:24px 0;padding:22px;border:1px solid var(--line);background:var(--cream)}
.checkout-letter h3{margin-top:0}.checkout-letter .actions{margin-top:14px}
.checkout-letter-status{font-size:14px;margin:12px 0;white-space:pre-line}.checkout-letter-status:empty{display:none}
/* One letter format for writing, receiving, checkout, packing and print. */
.order-letter-card{box-sizing:border-box;position:relative;width:100%;max-width:600px;min-width:0;margin:22px auto;padding:36px;background:#79132b;color:var(--letter-ink,#60222c);border:0;outline:0;box-shadow:none;text-align:center;overflow-wrap:anywhere;font:400 20px/1.8 Georgia,'Noto Sans Thai',serif}
/* The cream backing reaches the scallops' 18/30 baseline. It bridges subpixel slice joins; the paper overlaps its inner edge by 1px. */
.order-letter-card .order-letter-paper{--lace-width:30px;box-sizing:border-box;position:relative;min-height:660px;padding:36px 30px 30px;border:var(--lace-width) solid transparent;border-image:url('/assets/letter-lace-heart-v2.png') 25% / var(--lace-width) round;background:linear-gradient(var(--letter-paper,#fff7e9),var(--letter-paper,#fff7e9)) center / calc(100% - var(--lace-width) * 2 + 2px) calc(100% - var(--lace-width) * 2 + 2px) no-repeat border-box,linear-gradient(#fff7e9,#fff7e9) center / calc(100% - var(--lace-width) * 1.2) calc(100% - var(--lace-width) * 1.2) no-repeat border-box;display:flex;flex-direction:column;align-items:stretch}
.order-letter-card .order-letter-paper::before{content:'';position:absolute;inset:6px;border:1px dotted #79132b;pointer-events:none}
.order-letter-card .order-letter-greeting{font:400 25px/1.6 Georgia,'Noto Sans Thai',serif;color:inherit;letter-spacing:0;text-align:left;margin:0 0 32px;white-space:pre-wrap}
.order-letter-card p{font:inherit;color:inherit;letter-spacing:0;margin:0;white-space:pre-wrap}
.order-letter-card .order-letter-message{flex:1;min-height:130px;margin:0 0 34px}
.order-letter-card .order-letter-from{margin:0}
.order-letter-card .order-letter-monogram{display:block;flex-shrink:0;width:44px;height:46px;object-fit:contain;margin:32px auto 0}
.order-letter-card[lang=th]{font-family:'Noto Sans Thai',sans-serif;line-height:1.9}
.order-letter-card[lang=th] .order-letter-greeting{font-family:'Noto Sans Thai',sans-serif;font-size:23px;line-height:1.8}
.order-letter-brand{font:400 10px/1.65 'DM Sans','Noto Sans Thai',sans-serif;letter-spacing:.17em;text-align:center;margin-bottom:24px}
.order-letter-preview{width:100%;min-height:720px;border:1px solid var(--line);background:white}
.order-letter-attached{border-left:3px solid var(--wine);padding-left:16px;margin:22px 0}
.studio-letter-preview{min-width:0;align-self:start}.studio-letter-preview .order-letter-card{margin-top:0}
.recipient-letter-host{min-width:0}.recipient-letter-host[hidden]{display:none}
.cloud-dialog .cloud-letter-card{margin:28px auto}
.letter[aria-expanded=true]{background:none;border:0;outline:0;box-shadow:none;padding:0;transform:none}
.letter[aria-expanded=true] .letter-body{margin:0;white-space:normal}
.letter[aria-expanded=true] .order-letter-card{margin:0}
.letter[aria-expanded=true] .letter-again{display:block;margin-top:16px}
.order-letter-print{margin:0;background:white}.order-letter-print .order-letter-card{margin:0 auto;max-width:148mm}
.order-letter-qr .order-letter-greeting{text-align:center}
.order-letter-qr svg{display:block;width:55mm;max-width:100%;height:auto;margin:24px auto;background:white}
.order-letter-qr .order-letter-url{font:11px/1.5 'DM Sans','Noto Sans Thai',sans-serif;overflow-wrap:anywhere;white-space:normal}
.order-letter-qr small{font:12px/1.6 'DM Sans','Noto Sans Thai',sans-serif;color:inherit}
/* 87 × 150 mm, including the burgundy frame. Scale the same layout to the viewport. */
.order-letter-card.order-letter-small{container-type:inline-size;aspect-ratio:87/150;padding:0}
.order-letter-card.order-letter-small .order-letter-paper{position:absolute;inset:6cqw;min-height:0;--lace-width:5cqw;padding:6cqw 5cqw 5cqw;font-size:var(--letter-body-size,3.5cqw);line-height:var(--letter-body-leading,1.5)}
.order-letter-card.order-letter-small .order-letter-paper::before{inset:1cqw;border-width:.166667cqw}
.order-letter-card.order-letter-small .order-letter-greeting{font-size:4.166667cqw;line-height:1.6;margin-bottom:5.333333cqw}
.order-letter-card.order-letter-small[lang=th] .order-letter-greeting{font-size:3.833333cqw;line-height:1.8}
.order-letter-card.order-letter-small .order-letter-message{min-height:0;margin-bottom:5.666667cqw;overflow:auto}
.order-letter-card.order-letter-small .order-letter-monogram{width:7.333333cqw;height:7.666667cqw;margin-top:5.333333cqw;margin-bottom:var(--letter-footer-space,0px)}
@media(max-width:600px){
 .checkout-letter{padding:16px}.order-letter-card{padding:22px;font-size:17px}
 .order-letter-card .order-letter-paper{--lace-width:18px;min-height:460px;padding:26px 16px 26px}
 .order-letter-card .order-letter-greeting{font-size:22px;margin-bottom:26px}
 .order-letter-card[lang=th] .order-letter-greeting{font-size:20px}
 .order-letter-card .order-letter-message{margin-bottom:28px}
}
@media print{
 @page{size:A5 portrait;margin:10mm}
 body{-webkit-print-color-adjust:exact;print-color-adjust:exact}
 .order-letter-print .order-letter-card{padding:7mm;font-size:11pt;line-height:1.8;break-inside:avoid}
 .order-letter-print .order-letter-paper{--lace-width:5mm;padding:7mm 5mm;min-height:165mm}
 .order-letter-print .order-letter-greeting{font-size:15pt;margin-bottom:7mm}
 .order-letter-print .order-letter-message{min-height:34mm;margin-bottom:7mm}
 .order-letter-print .order-letter-monogram{margin-top:7mm;width:11mm;height:12mm}
 .order-letter-print .order-letter-qr svg{width:45mm;margin:5mm auto}
 .order-letter-print .order-letter-card.order-letter-small{width:87mm;max-width:87mm;height:150mm;padding:0;break-inside:avoid}
}

/* Team cards reserve a handwritten sender line and put the brand below the logo. */
.order-letter-team .order-letter-sender-space{display:inline-block;min-height:1.5em}
.order-letter-card.order-letter-branded .order-letter-monogram{margin-bottom:0}
.order-letter-card.order-letter-branded .order-letter-wordmark{flex-shrink:0;margin:8px 0 0;font:400 16px/26px Georgia,serif;letter-spacing:.1em}
.order-letter-card.order-letter-small.order-letter-branded .order-letter-wordmark{margin-top:1.333333cqw;margin-bottom:var(--letter-footer-space,0px);font-size:2.666667cqw;line-height:4.333333cqw}
/* Optional local card dimensions. Existing packed-order cards retain 87 × 150 mm. */
.order-letter-card.order-letter-custom{aspect-ratio:var(--letter-aspect)}
.order-letter-card.order-letter-custom .order-letter-paper{inset:calc(6cqw * var(--letter-chrome));--lace-width:calc(5cqw * var(--letter-chrome));padding:calc(6cqw * var(--letter-chrome)) calc(5cqw * var(--letter-chrome)) calc(5cqw * var(--letter-chrome))}
.order-letter-card.order-letter-custom .order-letter-paper::before{inset:calc(1cqw * var(--letter-chrome))}
.order-letter-card.order-letter-custom .order-letter-greeting{font-size:var(--letter-title-size);margin-bottom:calc(5.333333cqw * var(--letter-chrome))}
.order-letter-card.order-letter-custom .order-letter-message{margin-bottom:calc(5.666667cqw * var(--letter-chrome))}
.order-letter-card.order-letter-custom .order-letter-monogram{width:calc(7.333333cqw * var(--letter-chrome));height:calc(7.666667cqw * var(--letter-chrome));margin-top:calc(5.333333cqw * var(--letter-chrome))}
.order-letter-card.order-letter-custom.order-letter-branded .order-letter-wordmark{margin-top:calc(1.333333cqw * var(--letter-chrome));font-size:calc(2.666667cqw * var(--letter-chrome));line-height:calc(4.333333cqw * var(--letter-chrome))}
@media print{.order-letter-print .order-letter-card.order-letter-custom{width:var(--letter-card-width);max-width:var(--letter-card-width);height:var(--letter-card-height)}}