/* ร้านค้า: ใช้โทนเดียวกับระบบสมาชิก (style.css) */
body{background:#f6f7f4}
.shop-header{position:sticky;top:0;z-index:5}
.shop-header nav{display:flex;gap:18px;align-items:center;font-weight:600}
.shop-header nav a{color:#223a70;text-decoration:none}
#cart-count{display:inline-grid;place-items:center;min-width:24px;height:24px;border-radius:12px;background:#c41230;color:#fff;font-size:13px;margin-left:4px;padding:0 6px}
.shop-main{max-width:1120px;margin:0 auto;padding:32px max(16px,env(safe-area-inset-left,0px)) 64px max(16px,env(safe-area-inset-right,0px))}
.shop-footer{text-align:center;color:#5f6b80;font-size:14px;padding:24px 16px 40px}
.shop-footer a{color:#223a70}
.crumbs{font-size:14px;color:#5f6b80;margin-bottom:14px}.crumbs a{color:#223a70}
h1.shop-title{color:#223a70;font-size:clamp(26px,4vw,38px);margin:0 0 6px}
.shop-sub{color:#5f6b80;margin:0 0 26px}
.grid-products{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px}
.pcard{background:#fff;border:1px solid #e2e7ed;border-radius:18px;overflow:hidden;text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:transform .15s,box-shadow .15s}
.pcard:hover{transform:translateY(-2px);box-shadow:0 10px 28px #223a7014}
.pcard:focus-visible{outline:3px solid #4264a1}
.pimg{aspect-ratio:1/1;background:#e8ecf2;display:grid;place-items:center;color:#8a96aa;font-size:42px;overflow:hidden}
.pimg img{width:100%;height:100%;object-fit:cover}
.pbody{padding:14px 16px 18px;display:grid;gap:6px}
.pbody b{color:#223a70;font-size:17px;line-height:1.4}
.price{font-weight:700;color:#c41230;font-size:18px;font-variant-numeric:tabular-nums}
.kind{display:inline-block;font-size:12px;font-weight:600;padding:2px 9px;border-radius:999px;background:#e9eef7;color:#223a70;width:max-content}
.kind.course{background:#f1e9f7;color:#5d3b86}
.soldout{opacity:.55}
.product{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:start}
.product .pimg{border-radius:20px}
.desc{white-space:pre-wrap;line-height:1.8;color:#34445e}
.opts{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 4px}
.opt{border:1px solid #cad4e1;background:#fff;border-radius:10px;padding:9px 14px;font-weight:600;color:#223a70;cursor:pointer;min-height:44px}
.opt[aria-pressed=true]{background:#223a70;color:#fff;border-color:#223a70}
.opt:disabled{opacity:.4;cursor:not-allowed;text-decoration:line-through}
.qty{display:inline-flex;align-items:center;border:1px solid #cad4e1;border-radius:10px;overflow:hidden}
.qty button{width:44px;height:44px;border:0;background:#f1f4f8;font-size:20px;color:#223a70;cursor:pointer}
.qty span{min-width:44px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.stack{display:grid;gap:14px}
.line{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid #e9edf2}
.line:last-child{border-bottom:0}
.line .pimg{width:64px;height:64px;border-radius:12px;font-size:22px}
.line small{color:#5f6b80}
.sum{display:grid;gap:6px;font-variant-numeric:tabular-nums}
.sum div{display:flex;justify-content:space-between;gap:12px}
.sum .total{font-size:20px;font-weight:700;color:#223a70;border-top:1px solid #e2e7ed;padding-top:10px;margin-top:4px}
.two{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:24px;align-items:start}
.radio-cards{display:grid;gap:10px}
.radio-cards label{display:flex;gap:12px;align-items:flex-start;border:1px solid #cad4e1;border-radius:12px;padding:14px;cursor:pointer;background:#fff}
.radio-cards input{margin-top:4px}
.radio-cards label:has(input:checked){border-color:#223a70;box-shadow:0 0 0 2px #223a7022}
.form-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.6}
.consent input{margin-top:4px}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.err{color:#b3262d;font-size:14px;min-height:1.2em}
/* pay page */
.pay{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
.amount{font-size:clamp(34px,6vw,48px);font-weight:700;color:#223a70;font-variant-numeric:tabular-nums;line-height:1.1}
.qrbox{background:#fff;border:1px solid #e2e7ed;border-radius:18px;padding:18px;display:grid;justify-items:center;gap:8px;text-align:center}
.qrbox img{width:min(280px,100%);height:auto;image-rendering:pixelated}
.pp-label{font-weight:700;color:#0d4f8b;letter-spacing:.04em}
.bank{display:grid;gap:4px;background:#f1f4f8;border-radius:12px;padding:14px;font-size:15px}
.bank code{font-size:18px;font-weight:700;color:#223a70;letter-spacing:.04em}
.copy{border:1px solid #cad4e1;background:#fff;border-radius:8px;padding:4px 10px;font-size:13px;cursor:pointer;margin-left:8px;color:#223a70}
.statusbox{border-radius:14px;padding:16px 18px;display:grid;gap:6px}
.statusbox b{font-size:18px}
.s-wait{background:#eef2f8;color:#223a70}.s-review{background:#fbf3df;color:#7a5600}.s-bad{background:#fbe5e5;color:#9b1c22}.s-ok{background:#e1f1e4;color:#21632f}.s-off{background:#eceef1;color:#4a5466}
.drop{border:2px dashed #b9c6d8;border-radius:14px;padding:22px;text-align:center;display:grid;gap:8px;background:#fafbfd}
.drop.drag{border-color:#223a70;background:#eef2f8}
.steps{display:grid;gap:8px;counter-reset:s;padding:0;margin:0;list-style:none}
.steps li{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:start;font-size:15px}
.steps li::before{counter-increment:s;content:counter(s);width:26px;height:26px;border-radius:50%;background:#223a70;color:#fff;display:grid;place-items:center;font-size:13px;font-weight:700}
.code-big{font-size:34px;font-weight:700;letter-spacing:.25em;color:#223a70;font-variant-numeric:tabular-nums}
/* receipt */
.receipt{background:#fff;border:1px solid #d6dce5;border-radius:6px;padding:28px;max-width:760px;margin:0 auto;display:grid;gap:16px}
.receipt h2{margin:0;color:#223a70}
.receipt table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.receipt th,.receipt td{padding:8px 6px;border-bottom:1px solid #e3e7ee;text-align:left;font-size:14px}
.receipt td.r,.receipt th.r{text-align:right}
.rhead{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.timeline{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:14px}
.timeline span{padding:5px 11px;border-radius:999px;background:#eceef1;color:#5f6b80}
.timeline span.on{background:#223a70;color:#fff}
.btn.secondary{background:#fff;color:#223a70}
.btn.small{min-height:38px;padding:6px 14px;font-size:14px}
@media print{.shop-header,.shop-footer,.noprint,#toast{display:none!important}body{background:#fff}.shop-main{padding:0}.receipt{border:0}}
@media (max-width:820px){.product,.two,.pay{grid-template-columns:1fr}.form-grid2{grid-template-columns:1fr}.shop-header{height:auto;padding:12px 16px;flex-wrap:wrap}.brand{font-size:17px}}
@media (prefers-reduced-motion:reduce){.pcard{transition:none}}

.progress{height:10px;border-radius:6px;background:#e3e8ef;overflow:hidden}.progress span{display:block;height:100%;background:linear-gradient(90deg,#223a70,#c41230)}

.answers{color:#5f6b80;line-height:1.5}.questions{background:#f4f6f9;border-radius:14px;padding:14px}.req{color:#c41230}