/* APK Premium, buyer side: catalogue (apk-premium.html) and order page (apk-pesanan.html).
   Tokens only (css/tokens.css). Reuses .btn, .panel-state, .acct-band, .acct-main, .ostat from shell/home/account.css.
   No motion: nothing here animates, so prefers-reduced-motion needs no override. */
[hidden]{display:none!important}
.apk-sprite{position:absolute;width:0;height:0}

/* ---------- catalogue ---------- */
/* The area reserves the height of one row of cards so skeleton, cards, empty and error states swap without moving what is below. */
.apk-area{min-height:clamp(260px,52vw,300px)}
.apk-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:16px}
.apk-card{display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-height:220px;padding:20px;background:var(--paper);color:var(--ink);border-radius:var(--r-card);--focus:var(--ink);min-width:0}
.apk-top{display:flex;align-items:center;gap:14px;width:100%;min-width:0}
.apk-top .apk-name{flex:1 1 auto;min-width:0}
/* product picture: /assets/apk/<slug>.webp when listed in manifest.json, else our own monogram (inline SVG, colour by class from tokens) */
.apk-media{flex:none;width:64px;height:64px;border-radius:var(--r-tile);overflow:hidden;background:var(--paper-2)}
.apk-media img{display:block;width:100%;height:100%;object-fit:cover}
.apk-mono{display:block;width:100%;height:100%}
.apk-mono-tx{font:800 24px var(--font-head);letter-spacing:-.02em}
.apk-mono--0 .apk-mono-bg{fill:var(--forest)}.apk-mono--0 .apk-mono-tx{fill:var(--ink-on-forest)}
.apk-mono--1 .apk-mono-bg{fill:var(--teal)}.apk-mono--1 .apk-mono-tx{fill:var(--paper)}
.apk-mono--2 .apk-mono-bg{fill:var(--night-2)}.apk-mono--2 .apk-mono-tx{fill:var(--gold)}
.apk-mono--3 .apk-mono-bg{fill:var(--rust)}.apk-mono--3 .apk-mono-tx{fill:var(--paper)}
.apk-mono--4 .apk-mono-bg{fill:var(--mint-tint)}.apk-mono--4 .apk-mono-tx{fill:var(--forest)}
.apk-name{margin:0;font:700 1.125rem/1.3 var(--font-head);letter-spacing:-.01em;overflow-wrap:anywhere;max-width:100%}
.apk-mode{margin:0;display:grid;gap:2px;max-width:100%}
.apk-mode-t{font-weight:700;font-size:.9375rem;line-height:1.35;color:var(--ink)}
.apk-mode-s{font-size:.875rem;line-height:1.4;color:var(--ink-2)}
.apk-price{margin:0;font:800 1.5rem/1.1 var(--font-head);letter-spacing:-.02em}
.apk-stock{display:inline-flex;align-items:center;min-height:28px;padding:4px 10px;border-radius:var(--r-badge);font:700 .8125rem/1.25 var(--font-body)}
.apk-stock--ok{background:var(--mint);color:var(--ink)}
.apk-stock--out{background:var(--sold);color:var(--ink)}
.apk-card .btn{margin-top:auto;width:100%}
.apk-card--skel .apk-skel-line{height:20px;width:70%;background:var(--sold);border-radius:var(--r-badge)}
.apk-card--skel .apk-skel-line--price{height:28px;width:40%}
.apk-card--skel .apk-skel-line--btn{height:52px;width:100%;margin-top:auto;border-radius:var(--r-pill)}

.apk-confirm{max-width:40rem;margin:0 0 24px;padding:clamp(18px,4vw,28px);background:var(--paper);color:var(--ink);border-radius:var(--r-card);--focus:var(--ink)}
.apk-confirm:focus{outline:none}
.apk-confirm h3{margin:0;font:800 1.375rem/1.2 var(--font-head);letter-spacing:-.02em}
.apk-confirm h3:focus:not(:focus-visible){outline:none}
.apk-facts2{display:grid;grid-template-columns:minmax(0,max-content) minmax(0,1fr);gap:8px 16px;margin:16px 0 0}
.apk-facts2 dt{font-weight:700;color:var(--ink-2)}
.apk-facts2 dd{margin:0;overflow-wrap:anywhere;font-weight:600}
.apk-confirm p{margin:14px 0 0;color:var(--ink-2);max-width:34em}
.apk-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
@media (max-width:480px){.apk-actions .btn{width:100%}.apk-facts2{grid-template-columns:minmax(0,1fr)}}
.apk-msg{margin:16px 0 0;padding:14px 16px;border-radius:var(--r-tile);background:var(--error-tint);color:var(--ink);border:2px solid var(--rust-text);overflow-wrap:anywhere;max-width:34em}
.apk-msg a{color:var(--rust-text);font-weight:700;text-underline-offset:4px;display:inline-block;padding-block:10px}
/* email field, confirm step */
.apk-field{margin-top:18px;display:grid;gap:6px;max-width:34em}
.apk-field label{font-weight:700;color:var(--ink)}
.apk-input{display:block;width:100%;min-height:52px;padding:0 16px;border:2px solid var(--line);border-radius:var(--r-field);background:var(--paper);color:var(--ink);font:500 1rem/1.2 var(--font-body);max-width:100%;box-sizing:border-box}
.apk-input[aria-invalid="true"]{border-color:var(--rust-text);background:var(--error-tint)}
.apk-confirm .apk-help{margin:0;font-size:.9375rem;color:var(--ink-2)}
.apk-confirm .apk-ferr{margin:0;font-weight:700;color:var(--rust-text)}
.apk-ferr:empty{display:none}
.apk-emailbox{margin-top:16px;padding:14px 16px;border-radius:var(--r-tile);background:var(--paper-2);display:grid;gap:4px}
.apk-emailbox-l{font-weight:700;font-size:.875rem;color:var(--ink-2)}
.apk-emailbox-v{font:800 1.125rem/1.35 var(--font-head);overflow-wrap:anywhere;word-break:break-all;color:var(--ink)}
.apk-check{display:flex;align-items:flex-start;gap:12px;min-height:44px;margin-top:16px;padding-block:8px;cursor:pointer;font-weight:600;color:var(--ink);touch-action:manipulation}
.apk-ck{flex:none;width:24px;height:24px;margin:0;accent-color:var(--forest)}
.apk-actions .btn[disabled]{background:var(--sold);color:var(--ink-2);cursor:not-allowed}
.apk-pending{max-width:40rem;margin:0 0 24px;padding:16px 20px;background:var(--paper);color:var(--ink);border-radius:var(--r-card);border:2px solid var(--mint);--focus:var(--ink)}
.apk-pending p{margin:0 0 12px}
.apk-state .btn{max-width:100%}
.apk-steps-note{margin-top:16px;color:var(--ink-2);max-width:40em}

/* ---------- order page ---------- */
.po-wrap{max-width:46rem}
.po-card{background:var(--paper);color:var(--ink);border-radius:var(--r-card);padding:clamp(18px,4vw,32px);min-width:0}
.po-card+.po-card{margin-top:16px}
.po-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:8px 16px}
.po-prod{margin:0;font:800 1.375rem/1.2 var(--font-head);letter-spacing:-.02em;overflow-wrap:anywhere;min-width:0;flex:1 1 14em}
.po-prod:focus:not(:focus-visible){outline:none}
.po-meta{margin:12px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;color:var(--ink-2)}
.po-code{font:700 1.0625rem/1.2 var(--font-body);font-variant-numeric:tabular-nums;color:var(--ink);overflow-wrap:anywhere}
.po-fb{display:inline-block;min-height:1.25em;font-weight:700;color:var(--ink)}
.po-fb:empty{display:none}
.po-body{min-height:min(520px,70vw)}
.po-amount{margin:20px 0 0;font:800 clamp(1.75rem,1.4rem + 1.8vw,2.25rem)/1.1 var(--font-head);letter-spacing:-.03em}
.po-amount-label{margin:20px 0 0;color:var(--ink-2);font-weight:600}
.po-amount-label+.po-amount{margin-top:4px}
.po-timer-row{margin:12px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.po-timer{font:700 1.375rem/1.2 var(--font-body);font-variant-numeric:tabular-nums}
.po-qr{display:grid;justify-items:center;gap:12px;margin-top:20px;padding:16px;background:var(--paper-2);border-radius:var(--r-tile)}
.po-qr canvas{display:block;max-width:100%;height:auto;image-rendering:pixelated;background:var(--paper);border:2px solid var(--line);border-radius:var(--r-badge)}
.po-qr-help{margin:0;color:var(--ink-2);text-align:center;max-width:30em}
.po-qrtext{margin:12px 0 0}
.po-qrtext summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:700;text-underline-offset:4px}
.po-qrtext p{margin:8px 0 0;padding:12px;background:var(--paper-2);border-radius:var(--r-tile);font:500 .875rem/1.45 var(--font-body);font-variant-numeric:tabular-nums;overflow-wrap:anywhere;word-break:break-all;max-height:9rem;overflow:auto}
.po-poll{margin:12px 0 0;color:var(--ink-2);font-size:.9375rem}
.po-state h2{margin:20px 0 0;font:800 1.375rem/1.2 var(--font-head);letter-spacing:-.02em}
.po-state h2:focus:not(:focus-visible){outline:none}
.po-state p{margin:10px 0 0;color:var(--ink-2);max-width:36em}
.po-state p strong{color:var(--ink)}
.po-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px;align-items:center}
@media (max-width:480px){.po-actions .btn{width:100%}}
.po-warn{margin:16px 0 0;padding:16px;border:2px solid var(--rust-text);background:var(--orange-tint);border-radius:var(--r-tile);color:var(--ink)}
.po-warn strong{display:block;margin-bottom:4px}
.po-warn p{margin:0;color:var(--ink)}
.po-cred{display:grid;gap:12px;margin-top:16px}
.po-cred-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:center;padding:14px 16px;background:var(--paper-2);border-radius:var(--r-tile)}
.po-cred-label{grid-column:1/-1;font-weight:700;font-size:.875rem;color:var(--ink-2)}
.po-cred-val{font:600 1rem/1.45 var(--font-body);font-variant-numeric:tabular-nums;overflow-wrap:anywhere;word-break:break-all;min-width:0;user-select:all;-webkit-user-select:all}
.po-cred-fb{grid-column:1/-1}
.po-hint{margin:12px 0 0;color:var(--ink-2);font-size:.9375rem}
.po-note{margin:0 0 16px;padding:14px 16px;background:var(--paper);border-radius:var(--r-tile);color:var(--ink)}
.po-msg{margin:16px 0 0;padding:14px 16px;border-radius:var(--r-tile);background:var(--error-tint);color:var(--ink);border:2px solid var(--rust-text);overflow-wrap:anywhere;max-width:36em}
.po-msg a{color:var(--rust-text);font-weight:700;text-underline-offset:4px;display:inline-block;padding-block:10px}
.po-back{display:inline-flex;align-items:center;min-height:44px;margin-bottom:12px;font-weight:700;color:var(--ink);text-underline-offset:4px}

/* list of orders */
.po-list-h{margin:0;font:800 1.5rem/1.2 var(--font-head);letter-spacing:-.025em}
.po-list-h:focus:not(:focus-visible){outline:none}
.po-cred-h{margin:20px 0 0;font:800 1.125rem/1.25 var(--font-head);letter-spacing:-.02em}
.po-cred-h:focus:not(:focus-visible){outline:none}
.po-list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.po-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:center;min-height:88px;padding:16px 20px;background:var(--paper);border-radius:var(--r-tile);color:var(--ink);text-decoration:none;touch-action:manipulation;transition:transform var(--t-fast) var(--ease-out)}
.po-row:active{transform:translateY(1px)}
.po-row:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
@media (hover:hover) and (pointer:fine){.po-row:hover{box-shadow:0 4px 0 -1px var(--mint)}}
.po-row-title{font:700 1.0625rem/1.3 var(--font-head);overflow-wrap:anywhere;min-width:0}
.po-row-meta{grid-column:1;color:var(--ink-2);font-size:.9375rem;overflow-wrap:anywhere}
.po-row-amt{grid-column:2;grid-row:1;font-weight:800;white-space:nowrap}
.po-row .ostat{grid-column:2;justify-self:end}
@media (max-width:420px){.po-row{grid-template-columns:minmax(0,1fr)}.po-row-amt,.po-row .ostat{grid-column:1;grid-row:auto;justify-self:start}}

/* skeleton (fixed heights; no animation) */
.po-card--skel{min-height:560px}
.po-skel-bar{height:22px;width:60%;background:var(--sold);border-radius:var(--r-badge)}
.po-skel-bar--s{width:32%;height:18px;margin-bottom:14px}
.po-skel-qr{height:300px;margin-top:24px;background:var(--paper-2);border-radius:var(--r-tile)}

.po-card.po-state>h2{margin-top:0}
.po-inline{color:var(--rust-text);font-weight:700;text-underline-offset:4px}
/* 320px: the QR box runs edge to edge inside the card so the integer module scale reaches >= 200px for 30, 200 and 300 character strings (A4) */
@media (max-width:420px){.po-card{padding:14px}.po-qr{margin-inline:-14px;padding:12px 0;border-radius:0}.po-card--skel{min-height:520px}}