:root{font-family:Arial,sans-serif;color:#153e36;background:#f3f7f4;line-height:1.6}*{box-sizing:border-box}body{margin:0}header{background:#fff;border-bottom:1px solid #dbe7df;padding:18px 5%;display:flex;align-items:center;justify-content:space-between;gap:20px}a{color:#126149}.brand{font-size:25px;font-weight:800;text-decoration:none}.brand small{display:block;font-size:10px;letter-spacing:2px}main{max-width:1050px;margin:24px auto;padding:0 18px 50px}h1{font-size:28px}h2{font-size:21px;margin:0 0 14px}h3{font-size:17px}section,article{background:white;border:1px solid #dbe7df;border-radius:16px;padding:24px;margin:18px 0}label{display:block;font-size:14px;font-weight:600}input,select,textarea,button{font:inherit}input,select,textarea{width:100%;border:1px solid #bdcfc4;border-radius:8px;padding:10px;margin:6px 0 12px;background:#fff;color:#173d33}input[type=file]{padding:6px}input[type=number]{max-width:100px}button,.button{cursor:pointer;display:inline-block;border:1px solid #177754;border-radius:8px;padding:10px 16px;background:#177754;color:white;text-decoration:none;margin:5px 6px 5px 0;font-weight:600}button.secondary,.button.secondary{color:#177754;background:#fff}button:disabled{cursor:wait;opacity:.6}.grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}.row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.muted{font-size:14px;color:#586c63}.badge{border-radius:20px;background:#e4f5ea;padding:4px 12px;font-size:13px}.warning{background:#fff4d5;border:2px solid #e5aa22;border-radius:12px;padding:18px;color:#684406;margin:18px 0}.warning h3{margin:0 0 8px}.error{background:#fff0ed;color:#8a2f20;padding:14px;border-radius:10px}.success{background:#dff5e9;color:#146140;padding:14px;border-radius:10px}#message:empty{display:none}#message{position:sticky;top:8px;z-index:2}.total{font-size:23px;font-weight:800}.product{border-bottom:1px solid #e4ebe5;padding:12px 0}.product input{margin-bottom:0}.address{white-space:pre-wrap}.actions{border-top:1px solid #dbe7df;padding-top:14px;margin-top:14px}.type-select{padding:14px;font-size:17px;font-weight:bold}.file{display:block;margin:8px 0}details summary{cursor:pointer;font-weight:bold}dialog{border:0;border-radius:16px;max-width:700px;width:calc(100% - 24px);max-height:90vh;overflow:auto;padding:25px;color:#153e36}dialog::backdrop{background:#153e3677}.contacts{margin-top:30px}.workflow-entry{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:14px 5%;background:#e4f5ea;color:#153e36;font:16px Arial}.workflow-entry a{color:#fff;background:#177754;padding:10px 15px;border-radius:8px;text-decoration:none}@media(max-width:600px){.grid{grid-template-columns:1fr}header{padding:12px 18px;align-items:flex-start}header>a:last-child{font-size:13px}section,article{padding:18px}h1{font-size:24px}.total{font-size:20px}button{min-height:44px}.row input{max-width:80px}}

.paypay-payment{max-width:420px;padding:16px;border:1px solid #efc7cc;border-radius:12px;background:#fff}.paypay-payment img{display:block;width:100%;max-width:300px;height:auto;margin:12px auto}.paypay-payment p{overflow-wrap:anywhere}.payment-preview:empty{display:none}

/* Checkout fee disclosure */
.order-fees{margin:24px 0!important;padding:22px!important;border:1px solid #dfbc75!important;border-radius:16px;background:#fffcf2!important;color:#283b35}
.fee-heading{display:flex;align-items:center;gap:10px;margin-bottom:10px}.fee-heading>span{display:flex;align-items:center;justify-content:center;flex:0 0 28px;width:28px;height:28px;border-radius:50%;background:#9c6320;color:#fff;font-weight:800}.fee-heading h3{margin:0;font-size:18px;line-height:1.4}
.order-fees>p{font-size:13px;line-height:1.65}.fee-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0}.fee-group{padding:14px;border:1px solid #e5dcc6;border-radius:10px;background:#fff}.fee-group h4{font-size:14px;margin:0 0 7px;color:#24594b}.fee-group>p{font-size:12px;line-height:1.6;color:#53635b;margin:0 0 9px}.fee-group summary{cursor:pointer;font-size:12px;font-weight:700;color:#226953;line-height:1.6}
.fee-table-wrap{overflow-x:auto;margin-top:10px}.fee-table-wrap table{border-collapse:collapse;width:100%;font-size:11px;line-height:1.5}.fee-table-wrap th,.fee-table-wrap td{padding:9px 6px;border-bottom:1px solid #e8ede8;text-align:left;vertical-align:top}.fee-table-wrap td:first-child{min-width:125px;overflow-wrap:anywhere}.fee-table-wrap td:last-child{min-width:90px;font-weight:700}
.fee-pending{color:#865a19;font-weight:700}.fee-payment-note{padding:12px 14px;background:#fff0d5;border-left:3px solid #a8691d;border-radius:4px;font-size:13px!important;line-height:1.65!important;color:#684917}
.fee-accept{display:flex!important;align-items:flex-start;gap:12px;padding:15px!important;border:2px solid #286d56;border-radius:10px;background:#f1faf4;margin-top:18px;font-weight:650;font-size:13px;line-height:1.65;cursor:pointer}.fee-accept input[type=checkbox]{width:21px!important;height:21px;flex:0 0 21px;margin:3px 0 0;accent-color:#17654b;padding:0}.fee-accept span{min-width:0}.fee-ack-help{font-size:11px!important;color:#616d61;margin:9px 2px 0}
.fee-record{padding:12px 15px;border:1px solid #b9d7c4;background:#f2faf5;border-radius:10px;margin:14px 0;font-size:12px;line-height:1.6}.fee-record p{margin:5px 0}.fee-record strong{color:#276446}
@media(max-width:650px){.order-fees{padding:16px!important}.fee-groups{grid-template-columns:1fr}.fee-heading h3{font-size:16px}.fee-accept{font-size:12px;padding:12px!important}.fee-table-wrap{max-width:100%}}

.postal-tools{grid-column:1/-1}.postal-status{margin:8px 0}.postal-choices[hidden]{display:none}.address-fields input[readonly]{background:#edf3f2;color:#244a43}.address-review{padding:14px 16px;margin:14px 0;background:#edf7f3;border:1px solid #b9d9cd;border-radius:12px;overflow-wrap:anywhere}.address-review p{margin:6px 0}.address-ack{display:flex;align-items:flex-start;gap:10px;padding:14px;border:1px solid #bdd3ca;border-radius:10px;background:#fff;line-height:1.6}.address-ack input[type=checkbox]{width:22px;height:22px;min-width:22px;margin:3px 0 0;accent-color:#087d7f}.postal-choices select{width:100%}

.shipping-card .shipping-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 20px;background:#e9f7f2;padding:16px;border-radius:12px}.shipping-confirmed{color:#176f54;font-weight:700}.shipping-evidence{white-space:pre-wrap;overflow-wrap:anywhere;background:#f2f5f6;padding:12px;border-radius:8px;max-height:240px;overflow:auto}.shipping-card textarea{min-height:84px;width:100%;box-sizing:border-box}.shipping-card form+form{margin-top:24px;border-top:1px solid #cddddd;padding-top:20px}@media(max-width:600px){.shipping-card .shipping-facts{grid-template-columns:1fr}}

.packing-summary{margin:18px 0;padding:18px;border:1px solid #c9ddd3;border-radius:12px;background:#f4faf6}.packing-rules{margin:14px 0}.packing-rules summary{cursor:pointer;font-weight:700;color:#176f54}.packing-rules li{margin:10px 0;line-height:1.6}.packing-warning{color:#8a5100;background:#fff6e2;padding:10px;border-radius:7px}.packing-summary textarea{width:100%;box-sizing:border-box;min-height:80px}

.order-invoice{margin:20px 0;border:1px solid #d8e1dc;border-radius:14px;overflow:hidden;background:#fff;color:#243c31;font-variant-numeric:tabular-nums}
.order-invoice-heading{display:flex;justify-content:space-between;gap:12px;padding:16px 18px;background:#edf4ef;border-bottom:1px solid #d8e1dc;letter-spacing:.04em}
.order-invoice-heading span{font-size:11px;align-self:center;background:#fff;border:1px solid #cfddd3;padding:3px 8px;border-radius:5px;white-space:nowrap}
.order-invoice .order-invoice-destination{margin:0;padding:12px 18px;font-size:13px;border-bottom:1px solid #e4e9e6;overflow-wrap:anywhere}
.order-invoice-items{width:100%;border-collapse:collapse;table-layout:fixed;font-size:14px}
.order-invoice-items caption{text-align:left;padding:12px 18px;color:#61756a;font-size:12px}
.order-invoice-items th{background:#f7f9f7;color:#627268;font-weight:600;font-size:12px}
.order-invoice-items th,.order-invoice-items td{padding:12px 10px;border-bottom:1px solid #e4e9e6;text-align:right;vertical-align:top}
.order-invoice-items th:first-child,.order-invoice-items td:first-child{width:46%;text-align:left;overflow-wrap:anywhere;padding-left:18px}
.order-invoice-items th:nth-child(2){width:8%}.order-invoice-items td:last-child{font-weight:700}
.order-invoice-index{color:#7b8b81;font-size:12px}
.order-invoice-totals{padding:14px 18px 0}.order-invoice-line{display:flex;justify-content:space-between;gap:16px;padding:8px 0;font-size:14px}
.order-invoice-line strong{white-space:nowrap;text-align:right}.order-invoice-subtotal{border-top:1px dashed #d8e1dc;margin-top:4px}
.order-invoice-region{color:#7b4a12;background:#fff6df;margin:6px -8px 0;padding:10px 8px;border-radius:6px}
.order-invoice .order-invoice-hint{font-size:12px;color:#6d786f;margin:6px 0 12px;line-height:1.5}
.order-invoice-grandtotal{border-top:2px solid #294e39;margin-top:10px;padding:16px 0;font-size:16px;font-weight:700}
.order-invoice-grandtotal strong{font-size:24px;color:#a63d20}
.order-invoice .order-invoice-payment-note{font-size:13px;line-height:1.6;background:#f7f4e8;margin:0;padding:14px 18px;border-top:1px solid #e6e1cd}
@media(max-width:520px){.order-invoice-heading{padding:14px 12px;font-size:13px}.order-invoice .order-invoice-destination{padding:10px 12px}.order-invoice-items{font-size:12px}.order-invoice-items th,.order-invoice-items td{padding:10px 5px}.order-invoice-items th:first-child,.order-invoice-items td:first-child{width:40%;padding-left:10px}.order-invoice-items th:nth-child(2){width:7%}.order-invoice-items th:nth-child(3){width:22%}.order-invoice-items th:nth-child(4){width:25%}.order-invoice-totals{padding:12px 12px 0}.order-invoice-line{font-size:13px;gap:8px}.order-invoice-grandtotal{font-size:14px}.order-invoice-grandtotal strong{font-size:21px}}

/* Ruled sales slip, with full-size columns preserved on narrow screens. */
.order-invoice{border:1px solid #9aa39d;border-radius:3px;color:#17251e;background:#fff}
.order-invoice-heading{background:#fff;border-bottom:2px solid #405348;padding:18px}
.order-invoice-scroll{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.order-invoice-scroll:focus-visible{outline:2px solid #276447;outline-offset:-2px}
.order-invoice .order-invoice-items{width:100%;min-width:760px;table-layout:fixed;border-collapse:collapse;font-size:13px}
.order-invoice .order-invoice-items .invoice-col-no{width:38px}.order-invoice .order-invoice-items .invoice-col-name{width:30%}.order-invoice .order-invoice-items .invoice-col-code{width:135px}.order-invoice .order-invoice-items .invoice-col-unit{width:65px}.order-invoice .order-invoice-items .invoice-col-qty{width:45px}.order-invoice .order-invoice-items .invoice-col-price{width:85px}.order-invoice .order-invoice-items .invoice-col-amount{width:100px}
.order-invoice .order-invoice-items th,.order-invoice .order-invoice-items td{border:1px solid #aab1ad;padding:9px 8px;line-height:1.4;width:auto;font-size:13px;vertical-align:middle}
.order-invoice .order-invoice-items th{background:#f0f2f0;color:#1c2d22;text-align:center;font-weight:700}
.order-invoice .order-invoice-items td:nth-child(1),.order-invoice .order-invoice-items td:nth-child(4),.order-invoice .order-invoice-items td:nth-child(5){text-align:center}
.order-invoice .order-invoice-items td:nth-child(2),.order-invoice .order-invoice-items td:nth-child(3){text-align:left;overflow-wrap:anywhere}
.order-invoice .order-invoice-items td:nth-child(6),.order-invoice .order-invoice-items td:nth-child(7){text-align:right;white-space:nowrap}
.order-invoice .order-invoice-items tfoot td{font-weight:700;background:#f7f8f7;text-align:right}
.order-invoice .order-invoice-scroll-hint{display:none;margin:0;padding:10px 12px;background:#f6f5ec;font-size:12px;color:#655726}
.order-invoice-totals{max-width:470px;margin-left:auto;padding:18px}
.order-invoice-line{border-bottom:1px solid #e4e7e5}
.order-invoice-region{border:1px solid #d9c989;border-radius:2px}
.order-invoice-grandtotal{border-bottom:3px double #405348}
@media(max-width:800px){.order-invoice .order-invoice-scroll-hint{display:block}.order-invoice-totals{padding:14px 12px}}
@media print{.order-invoice{break-inside:auto;border:0;color:#000}.order-invoice-scroll{overflow:visible}.order-invoice .order-invoice-items{min-width:0;width:100%;font-size:10px}.order-invoice .order-invoice-items th,.order-invoice .order-invoice-items td{font-size:10px;padding:5px 4px}.order-invoice .order-invoice-items .invoice-col-code{width:95px}.order-invoice .order-invoice-items .invoice-col-name{width:30%}.order-invoice .order-invoice-items .invoice-col-no{width:25px}.order-invoice .order-invoice-items .invoice-col-unit{width:45px}.order-invoice .order-invoice-items .invoice-col-qty{width:30px}.order-invoice .order-invoice-items .invoice-col-price{width:65px}.order-invoice .order-invoice-items .invoice-col-amount{width:70px}.order-invoice .order-invoice-scroll-hint{display:none}.order-invoice-items thead{display:table-header-group}.order-invoice-items tr{break-inside:avoid}.order-invoice-totals{break-inside:avoid}}

/* Compact iPhone invoice: four visible columns; JAN/unit remain below the name. */
.order-invoice{padding:0;min-width:0;max-width:100%}
.invoice-mobile-meta{display:none}
@media screen and (max-width:600px){
 main{padding-left:10px;padding-right:10px}
 #app article{padding:12px;min-width:0}
 .order-invoice{margin:12px 0}
 .order-invoice-heading{padding:12px;gap:8px;letter-spacing:0;font-size:13px}
 .order-invoice-heading span{font-size:10px;padding:2px 6px}
 .order-invoice .order-invoice-destination{padding:9px 12px;font-size:12px;line-height:1.45}
 .order-invoice-scroll{overflow:visible}
 .order-invoice .order-invoice-scroll-hint{display:none}
 .order-invoice .order-invoice-items{min-width:0;width:100%;table-layout:auto;font-size:12px}
 .order-invoice .order-invoice-items caption{padding:8px 10px;font-size:11px}
 .order-invoice .order-invoice-items colgroup{display:none}
 .order-invoice .order-invoice-items thead,.order-invoice .order-invoice-items tbody,.order-invoice .order-invoice-items tfoot{display:block;width:100%}
 .order-invoice .order-invoice-items thead tr,.order-invoice .order-invoice-items tbody tr{display:grid;grid-template-columns:minmax(0,1fr) 25px 60px 70px;width:100%}
 .order-invoice .order-invoice-items th,.order-invoice .order-invoice-items td{display:block;width:auto!important;min-width:0;padding:8px 5px!important;font-size:12px;line-height:1.4;border:0;border-right:1px solid #d7ddd9;border-bottom:1px solid #d7ddd9}
 .order-invoice .order-invoice-items th:nth-child(1),.order-invoice .order-invoice-items td:nth-child(1),
 .order-invoice .order-invoice-items th:nth-child(3),.order-invoice .order-invoice-items td:nth-child(3),
 .order-invoice .order-invoice-items th:nth-child(4),.order-invoice .order-invoice-items td:nth-child(4){display:none}
 .order-invoice .order-invoice-items th:nth-child(2),.order-invoice .order-invoice-items td:nth-child(2){text-align:left}
 .order-invoice .order-invoice-items td:nth-child(6),.order-invoice .order-invoice-items td:nth-child(7){font-size:11px;white-space:normal;overflow-wrap:anywhere}
 .invoice-mobile-meta{display:block;font-size:10px;color:#6a786f;line-height:1.35;margin-top:5px;overflow-wrap:anywhere}
 .order-invoice .order-invoice-items tfoot tr{display:grid;grid-template-columns:minmax(0,1fr) 25px 130px}
 .order-invoice .order-invoice-items tfoot td:nth-child(1){display:block;text-align:right}
 .order-invoice .order-invoice-items tfoot td:nth-child(2){display:block;text-align:center}
 .order-invoice .order-invoice-items tfoot td:nth-child(3){display:block}
 .order-invoice-totals{max-width:none;padding:10px 12px 0}
 .order-invoice-line{font-size:12px;gap:10px;padding:7px 0;align-items:flex-start}
 .order-invoice-line>span{min-width:0;flex:1}
 .order-invoice-line strong{flex:0 0 auto;max-width:46%;white-space:normal;overflow-wrap:anywhere}
 .order-invoice-region{margin:5px 0 0;padding:8px}
 .order-invoice .order-invoice-hint{font-size:11px;line-height:1.45;margin:5px 0 8px}
 .order-invoice-grandtotal{font-size:13px;padding:12px 0;margin-top:8px;align-items:center}
 .order-invoice-grandtotal strong{font-size:20px;line-height:1.2}
 .order-invoice .order-invoice-payment-note{padding:10px 12px;font-size:11px;line-height:1.5}
}
@media screen and (max-width:359px){
 .order-invoice .order-invoice-items thead tr,.order-invoice .order-invoice-items tbody tr{grid-template-columns:minmax(0,1fr) 22px 54px 64px}
 .order-invoice .order-invoice-items th,.order-invoice .order-invoice-items td{font-size:11px;padding:7px 4px!important}
 .order-invoice .order-invoice-items tfoot tr{grid-template-columns:minmax(0,1fr) 22px 118px}
 .order-invoice-grandtotal strong{font-size:18px}
}

/* Order overview: keep the full workflow inside an accessible disclosure. */
[data-order-chat] [hidden]{display:none!important}
#app .order-card{padding:0;margin:10px 0;overflow:hidden}
.order-fold>summary{list-style:none;padding:16px 18px;cursor:pointer}
.order-fold>summary::-webkit-details-marker{display:none}
.order-fold>summary:focus-visible{outline:3px solid #177754;outline-offset:-3px}
.order-top,.order-bottom{display:flex;justify-content:space-between;align-items:center;gap:10px}
.order-top>strong{font-size:18px}.order-top .badge{font-weight:400;flex-shrink:0}
.order-customer{display:block;font-size:15px;margin-top:5px;overflow-wrap:anywhere}
.order-meta{display:block;color:#586c63;font-size:12px;font-weight:400;margin-top:3px}
.order-bottom{font-size:13px;margin-top:10px;padding-top:9px;border-top:1px solid #e4ebe5;flex-wrap:wrap}
.order-bottom strong{color:#153e36;font-size:16px}
.order-toggle{color:#177754;white-space:nowrap;font-size:12px}
.order-fold:not([open]) .when-open,.order-fold[open] .when-closed{display:none}
.order-fold[open]>summary{background:#f0f8f3;border-bottom:1px solid #dbe7df}
.order-body{padding:4px 18px 18px;min-width:0}
#app .orders-toolbar{padding:14px 18px;margin-bottom:12px}
.orders-toolbar h2{margin:0}.order-view-actions{display:flex;gap:8px;flex-wrap:wrap}
.order-view-actions button,.orders-toolbar .row button{font-size:12px;padding:7px 10px;margin:4px 0}
@media(max-width:600px){#app .order-card{padding:0}.order-fold>summary{padding:12px}.order-body{padding:4px 12px 12px}.order-top>strong{font-size:16px}.order-top .badge{font-size:11px;padding:3px 8px}.order-meta{font-size:11px}.order-customer{font-size:14px}.order-bottom{gap:5px}.order-bottom strong{font-size:15px}#app .orders-toolbar{padding:12px}.order-view-actions button{min-height:40px}}

/* Payment details sit alongside the order totals, then stack on phones. */
.order-invoice-settlement{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,470px);align-items:start;gap:20px;padding:18px}
.order-invoice-settlement .order-invoice-totals{margin:0;max-width:none;padding:0;min-width:0}
.order-payment-details{min-width:0;border:1px solid #cbd8cf;background:#f7faf7;border-radius:8px;padding:16px;color:#243e30;font-size:13px}
.order-payment-details h3{font-size:13px;margin:0 0 14px;letter-spacing:.04em}
.order-payment-details h4{font-size:13px;margin:0 0 8px}
.order-bank-account dl{margin:0}.order-bank-account dl>div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:8px;margin:6px 0}
.order-bank-account dt{color:#63746a}.order-bank-account dd{margin:0;overflow-wrap:anywhere;font-weight:600}
.order-bank-account .order-bank-number{font-size:23px;letter-spacing:.04em;color:#164e38}
.order-paypay-account{border-top:1px solid #d8e2db;margin-top:15px;padding-top:15px;display:grid;grid-template-columns:minmax(0,1fr) 112px;gap:12px;align-items:center}
.order-paypay-account img{display:block;width:112px;height:auto;max-width:100%;border-radius:4px}
.order-payment-details .order-paypay-account p{font-size:12px;margin:5px 0;line-height:1.5}
.order-payment-details a{color:#176441;text-decoration:underline;font-weight:600}
.order-payment-details .order-payment-reminder{font-size:11px;line-height:1.5;margin:14px 0 0;color:#6d6144}
@media(max-width:700px){.order-invoice-settlement{grid-template-columns:1fr;padding:12px;gap:14px}.order-payment-details{padding:13px}.order-bank-account dl>div{grid-template-columns:100px minmax(0,1fr)}}
@media print{.order-invoice-settlement{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:15px;padding:12px;break-inside:avoid}.order-payment-details{font-size:11px}.order-bank-account dl>div{grid-template-columns:85px minmax(0,1fr)}.order-paypay-account{grid-template-columns:1fr 80px}.order-paypay-account img{width:80px}}