/* ร้านบนเว็บ — ตะกร้า / กรอกข้อมูล / หน้าโอน (2026-10-13) · ดีไซน์ v2: เส้นบาง ไม่มีไอคอน ตัวเลขเอียง
   ห้ามใช้ padding shorthand บน element ที่มี .lt-container (จะทับ padding-inline) */

.sh { padding-top: 56px; padding-bottom: var(--lt-section); }
.sh__head { padding-bottom: 24px; border-bottom: var(--lt-rule-ink); margin-bottom: 8px; }
.sh__kicker { margin: 0 0 6px; font-size: var(--lt-fs-micro); letter-spacing: var(--lt-ls-micro); text-transform: uppercase; color: var(--lt-ink-3); }
.sh__title { margin: 0; font-size: var(--lt-fs-h1); font-weight: var(--lt-fw-light); line-height: 1.25; }
.sh__sub { margin: 10px 0 0; color: var(--lt-ink-2); font-size: 16px; max-width: 36em; line-height: 1.7; }

.sh__grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 56px; align-items: start; margin-top: 24px; }
.sh__aside { position: sticky; top: calc(var(--lt-header-h) + 24px); }

.sh-flash { margin: 20px 0 0; padding: 12px 16px; border: var(--lt-rule); border-left: 3px solid var(--lt-sage-700); background: var(--lt-sage-50); font-size: 15px; line-height: 1.6; }
.sh-flash.is-error { border-left-color: var(--lt-error); background: #fbf1ef; }
.sh-alert { margin: 0 0 20px; padding: 14px 16px; border: var(--lt-rule); border-left: 3px solid var(--lt-error); background: #fbf1ef; font-size: 15px; }
.sh-alert ul { margin: 0; padding-left: 18px; }

/* ── รายการชิ้น ── */
.sh-lines { border-top: var(--lt-rule-ink); }
.sh-line { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 0; border-bottom: var(--lt-rule); }
.sh-line__img { width: 72px; height: 90px; object-fit: cover; background: var(--lt-stone-xlight); display: block; }
.sh-line__name { font-size: 17px; color: var(--lt-ink); line-height: 1.45; }
.sh-line__name a { color: inherit; text-decoration: none; }
.sh-line__name a:hover { color: var(--lt-sage-700); }
.sh-line__meta { margin-top: 4px; font-size: 14px; color: var(--lt-ink-3); display: flex; gap: 10px; flex-wrap: wrap; }
.sh-line__right { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.sh-line__price { font-size: 18px; color: var(--lt-ink); }
.sh-line__remove { background: none; border: 0; padding: 0; font: inherit; font-size: 13px; color: var(--lt-ink-3); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.sh-line__remove:hover { color: var(--lt-error); }
.sh-line.is-gone { opacity: .55; }
.sh-line.is-gone .sh-line__price { text-decoration: line-through; }
.sh-line__gone { font-size: 13px; color: var(--lt-error); }

/* ── สรุปยอด ── */
.sh-sum { border: var(--lt-rule); border-radius: var(--lt-r-2); padding: 24px; background: var(--lt-white); }
.sh-sum__row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: 15px; color: var(--lt-ink-2); }
.sh-sum__row strong { font-weight: var(--lt-fw-regular); color: var(--lt-ink); }
.sh-sum__total { border-top: var(--lt-rule-ink); margin-top: 8px; padding-top: 14px; font-size: 18px; color: var(--lt-ink); }
.sh-sum__total strong { font-size: 24px; }
.sh-sum__hint { margin: 12px 0 0; font-size: 14px; color: var(--lt-sage-700); line-height: 1.6; }
.sh-sum__note { margin: 14px 0 0; font-size: 13px; color: var(--lt-ink-3); line-height: 1.7; }
.sh-sum .btn { margin-top: 18px; }

.sh-empty { border-top: var(--lt-rule-ink); padding: 40px 0; }
.sh-empty h2 { margin: 0; font-size: 24px; font-weight: var(--lt-fw-light); }
.sh-empty p { margin: 12px 0 20px; color: var(--lt-ink-2); }

/* ── ฟอร์ม ── */
.sh-form { display: flex; flex-direction: column; gap: 40px; }
.sh-sec { border-top: var(--lt-rule-ink); padding-top: 18px; }
.sh-sec__head { display: flex; gap: 12px; align-items: baseline; margin: 0 0 16px; font-size: 20px; font-weight: var(--lt-fw-regular); }
.sh-sec__head .lt-num { font-size: 16px; }
.sh-sec__lead { margin: -6px 0 16px; font-size: 14px; color: var(--lt-ink-3); line-height: 1.7; }
.sh-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sh-fields .field { display: flex; flex-direction: column; gap: 6px; }
.sh-fields .is-wide { grid-column: 1 / -1; }
.sh-check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.6; color: var(--lt-ink-2); }
.sh-check input { margin-top: 5px; width: 16px; height: 16px; accent-color: var(--lt-sage-700); flex: none; }
.sh-zip { position: relative; }
.sh-zip__list { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sh-zip__opt { border: var(--lt-rule); background: var(--lt-white); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 14px; cursor: pointer; color: var(--lt-ink-2); }
.sh-zip__opt:hover, .sh-zip__opt.is-on { border-color: var(--lt-sage-700); color: var(--lt-sage-800); background: var(--lt-sage-50); }
.sh-terms { font-size: 14px; color: var(--lt-ink-2); line-height: 1.8; }
.sh-terms summary { cursor: pointer; color: var(--lt-ink); }
.sh-terms ul { margin: 10px 0 0; padding-left: 18px; }
.sh-login { padding: 14px 16px; border: var(--lt-rule); background: var(--lt-sage-50); font-size: 15px; margin-bottom: 16px; }

/* ── หน้าโอน ── */
.sh-stage { display: inline-flex; gap: 8px; align-items: center; padding: 6px 12px; border-radius: 999px; font-size: 14px; background: var(--lt-sage-50); color: var(--lt-sage-800); }
.sh-stage.is-warn { background: #fbf1ef; color: #8a3a2f; }
.sh-stage.is-done { background: var(--lt-sage-100); }
.sh-due { margin: 18px 0 0; padding: 18px 20px; border: var(--lt-rule-ink); font-size: 16px; line-height: 1.7; }
.sh-due strong { font-weight: var(--lt-fw-medium); }
.sh-pay { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: start; }
.sh-pay__qr img { width: 100%; height: auto; border: var(--lt-rule); background: #fff; display: block; }
.sh-bank { display: flex; flex-direction: column; gap: 4px; font-size: 16px; line-height: 1.7; }
.sh-bank__no { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 22px; letter-spacing: .02em; }
.sh-amount { font-size: 32px; color: var(--lt-ink); margin: 2px 0 8px; }
.sh-upload { display: flex; flex-direction: column; gap: 12px; max-width: 420px; }
.sh-upload input[type=file] { font: inherit; font-size: 15px; }
.sh-addr { white-space: pre-line; font-size: 15px; line-height: 1.8; color: var(--lt-ink-2); }

@media (max-width: 900px) {
    .sh__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .sh__aside { position: static; }
}
@media (max-width: 560px) {
    .sh { padding-top: 28px; }
    .sh-fields { grid-template-columns: minmax(0, 1fr); }
    .sh-line { grid-template-columns: 56px minmax(0, 1fr); }
    .sh-line__img { width: 56px; height: 70px; }
    .sh-line__right { grid-column: 2; flex-direction: row; justify-content: space-between; align-items: baseline; width: 100%; }
    .sh-pay { grid-template-columns: minmax(0, 1fr); }
    .sh-pay__qr { max-width: 240px; }
    .sh-amount { font-size: 28px; }
}

/* 2026-10-17 motion เบาๆ: แถวในตะกร้าและกล่องสรุปค่อยๆ ขึ้นมา (ไม่เกิน 0.5 วิ) */
.sh-line { animation: sh-in .4s cubic-bezier(.2,.8,.2,1) both; }
.sh-line:nth-child(2) { animation-delay: .04s; } .sh-line:nth-child(3) { animation-delay: .08s; } .sh-line:nth-child(n+4) { animation-delay: .12s; }
.sh-sum { animation: sh-in .45s .08s cubic-bezier(.2,.8,.2,1) both; }
.sh-line__img { transition: transform .3s var(--lt-ease); }
.sh-line:hover .sh-line__img { transform: scale(1.04); }
@keyframes sh-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sh-line, .sh-sum { animation: none; } .sh-line__img { transition: none; } }