/* Account page, A design: paper background, navy buttons, serif headings, horizontal account tabs, near-square corners. */
:root{--ink:#293d56;--muted:#636b73;--paper:#f8f7f3;--line:#d8dbdc;--blue:#e3e8ec;--radius:2px;--serif:Georgia,'Songti SC','Noto Serif SC','Noto Serif CJK SC',serif}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:14px/1.6 Arial,'PingFang SC','Noto Sans Thai',Tahoma,sans-serif}
button,input,select{font:inherit;color:inherit}
button,a{cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #587697;outline-offset:3px}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
[hidden]{display:none!important}
.qa{min-height:100vh;display:flex;flex-direction:column}

/* Announcement, header and footer */
.qa-announcement{text-align:center;background:var(--ink);color:#fff;padding:8px 16px;font-size:11px;letter-spacing:1.3px}
.qa-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:23px 6%;border-bottom:1px solid var(--line)}
.qa-brand{font:28px var(--serif);letter-spacing:5px}
.qa-brand small{display:block;font:9px Arial,sans-serif;letter-spacing:5px;margin-top:6px}
.qa-tools{display:flex;gap:24px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.qa-languages{display:flex;gap:12px}
.qa-languages a{padding:3px 0;color:var(--muted);font-size:12px}
.qa-languages a[aria-current]{color:var(--ink);border-bottom:1px solid var(--ink)}
.qa-back{font-size:12px}
.qa-main{flex:1;width:100%;max-width:1000px;margin:0 auto;padding:45px 24px 38px}
.qa-footer{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;margin:0 6%;padding:21px 0;border-top:1px solid var(--line);color:var(--muted);font-size:10px;letter-spacing:.6px}
.qa-footer a:hover{color:var(--ink)}
.qa-notice{max-width:520px;margin:0 auto 24px;padding:12px 16px;background:var(--blue);font-size:13px;border-radius:var(--radius)}
.qa-alert{max-width:520px;margin:0 auto 24px;padding:12px 16px;border:1px solid #d9b5ad;background:#f8ece8;color:#8a3324;font-size:13px;border-radius:var(--radius)}

/* Sign-in and registration */
.qa-auth{display:flex;justify-content:center}
.qa-form-wrap{max-width:360px;width:100%}
.qa-form-heading{text-align:center}
.qa-eyebrow,.qa-kicker{font-size:10px;letter-spacing:2.5px;margin:0 0 15px;text-transform:uppercase}
.qa-auth h1{font:normal 38px/1.2 var(--serif);letter-spacing:-.8px;margin:0 0 12px;outline:0}
.qa-description{font-size:13px;color:var(--muted);margin:0 auto 28px;max-width:340px}
.qa-auth label{display:block;font-size:12px}
.qa-auth label>span:first-child{display:block;margin:16px 0 7px}
.qa-auth input{background:#fff;border:1px solid #cbd0d3;padding:12px 13px;width:100%;min-width:0;color:var(--ink);border-radius:var(--radius);font-size:16px;height:46px}
.qa-auth input::placeholder{color:#8b9196;font-size:13px}
.qa-password{position:relative;display:block}
.qa-password input{padding-right:68px}
.qa-reveal{position:absolute;right:12px;top:11px;background:none;border:0;font-size:11px;padding:4px;color:var(--muted)}
.qa-hint{font-size:12px;color:var(--muted);margin-top:6px}
.qa-forgot{display:block;width:fit-content;margin:10px 0 0 auto;font-size:12px;text-decoration:underline;text-underline-offset:3px}
.qa-sent{margin-top:18px;padding:14px 16px;background:var(--blue);font-size:13px;color:var(--ink)}
.qa-primary,.qa-google{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px 16px;border-radius:var(--radius);min-height:45px;font-size:13px}
.qa-primary{background:var(--ink);border:1px solid var(--ink);color:#fff;margin-top:24px}
.qa-primary:hover{background:#3b5069}
.qa-primary:disabled{opacity:.55;cursor:wait}
.qa-google{background:transparent;border:1px solid #bfc6cc}
.qa-google.is-off{opacity:.5;cursor:not-allowed}
.qa-google small{font-size:11px;color:var(--muted)}
.qa-divider{display:flex;align-items:center;gap:13px;color:var(--muted);font-size:11px;margin:18px 0}
.qa-divider::before,.qa-divider::after{content:'';height:1px;background:var(--line);flex:1}
.qa-switch{font-size:12px;margin:22px 0 0;text-align:center;color:var(--muted)}
.qa-switch a{color:var(--ink);text-decoration:underline;text-underline-offset:4px;margin-left:6px}
.qa-note{font-size:11px;color:var(--muted);margin-top:14px;text-align:center}

/* Account centre */
.qa-welcome{margin-bottom:25px}
.qa-welcome h1{font:normal 40px/1.2 var(--serif);margin:0 0 12px;letter-spacing:-1px;outline:0}
.qa-welcome p,.qa-muted{color:var(--muted);font-size:12px;margin:6px 0}
.qa-nav{display:flex;gap:28px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:30px}
.qa-nav a,.qa-nav button{padding:12px 0;font-size:12px;border:0;border-bottom:2px solid transparent;background:none}
.qa-nav a[aria-current]{border-color:var(--ink)}
.qa-nav button{color:var(--muted)}
.qa-member h2{font:normal 25px/1.3 var(--serif)}
.qa-member h3{font:normal 20px/1.4 var(--serif);margin:0 0 9px}
.qa-section-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:0 0 20px}
.qa-note{font-size:10px;letter-spacing:.5px;color:var(--muted)}
.qa-link{background:none;border:0;padding:6px 0;font-size:12px;text-decoration:underline;text-underline-offset:4px;color:var(--ink)}
.qa-action{display:inline-block;background:var(--ink);color:#fff;padding:11px 18px;font-size:12px;border:1px solid var(--ink);border-radius:var(--radius)}
.qa-action:hover{background:#3b5069}
.qa-secondary{background:none;border:1px solid #aebac3;padding:9px 15px;font-size:12px;border-radius:var(--radius)}
.qa-empty{padding:40px 15px;text-align:center;color:var(--muted);font-size:13px}

/* Orders */
.qa-order{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0}
.qa-order+.qa-order{border-top:0}
.qa-order-meta{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:11px;color:var(--muted);margin-bottom:20px}
.qa-status{padding:3px 9px;background:var(--blue);color:var(--ink);font-size:11px}
.qa-status.is-cancelled{background:#f1e4e1;color:#8a3324}
.qa-order-product{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.qa-product-text{flex:1;min-width:170px}
.qa-product-text p{color:var(--muted);font-size:12px;margin:6px 0}
.qa-price{font:17px Georgia,serif}
.qa-detail{margin-top:22px;padding:20px;background:var(--blue)}
.qa-detail p{color:#4f5b66;font-size:12px;margin:6px 0}
.qa-timeline{display:flex;justify-content:space-between;gap:12px;margin:20px 0;flex-wrap:wrap;font-size:11px}
.qa-timeline span{border-top:2px solid #a8b5bf;padding-top:10px;flex:1;min-width:75px;color:var(--muted)}
.qa-timeline span.is-done{border-color:var(--ink);color:var(--ink)}
.qa-summary{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-top:30px}
.qa-summary article{border-top:1px solid var(--line);padding-top:20px}
.qa-summary p{color:var(--muted);font-size:12px;margin:6px 0}
.qa-summary .qa-link{margin-top:9px}

/* Addresses and profile */
.qa-address{border:1px solid var(--line);padding:24px;margin:18px 0;background:#fff8}
.qa-address p{color:var(--muted);font-size:12px;margin:6px 0}
.qa-address .qa-kicker{margin-bottom:10px}
.qa-address-actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:8px}
.qa-address-actions .is-danger{color:#8a3324}
.qa-fields{max-width:440px}
.qa-fields h3{margin-top:10px}
.qa-fields label{display:block;margin:16px 0;font-size:12px}
.qa-fields label>span{display:block}
.qa-fields input:not([type=checkbox]),.qa-fields select{display:block;width:100%;max-width:100%;min-width:0;padding:11px 12px;border:1px solid #bbc5cc;background:#fff;color:var(--ink);font-size:16px;margin-top:6px;border-radius:var(--radius)}
.qa-fields input[readonly]{background:#f1f2f2;color:var(--muted)}
.qa-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 14px}
.qa-grid .wide{grid-column:1/-1}
.qa-grid label{min-width:0}
.qa-check{display:flex!important;align-items:center;gap:8px}
.qa-check input{width:16px;height:16px;accent-color:var(--ink)}
.qa-actions{display:flex;gap:10px;flex-wrap:wrap}
.qa-message{font-size:12px;padding-top:12px;min-height:30px}

@media(max-width:700px){
  .qa-header{padding:19px 20px}
  .qa-tools{gap:8px;flex-direction:column;align-items:flex-end}
  .qa-languages a{min-height:32px}
  .qa-main{padding:40px 20px 34px}
  .qa-auth{padding-top:15px}
  .qa-welcome h1{font-size:32px}
  .qa-nav{gap:16px}
  .qa-nav a,.qa-nav button{font-size:11px}
  .qa-summary{grid-template-columns:1fr;gap:20px}
  .qa-order-product{gap:16px}
  .qa-action{min-height:44px}
  .qa-grid{grid-template-columns:minmax(0,1fr)}
}