/* ==========================================================================
   student-book — ระบบเลือกสมุดนักเรียนและคำนวณราคา
   ทุก class ใช้ prefix  sb-  ไม่ชนกับ CSS อื่น และไม่พึ่ง business-card.css
   ใช้ตัวแปรสีเดิมของเว็บ (--green-*, --ink, --text, --muted, --line) มีค่าสำรองในตัว
   ========================================================================== */
.sb *, .sb *::before, .sb *::after { box-sizing: border-box; }
.sb button { font: inherit; color: inherit; }
.sb img { display: block; max-width: 100%; }
.sb-noscript { padding: 18px 20px; text-align: center; background: #fff7da; border: 1px solid #f6df8f; border-radius: 14px; }
/* ---------- หัวเรื่อง + แถบขั้นตอน ---------- */
.sb-head { max-width: 780px; margin: 0 auto 26px; text-align: center; }
.sb-eyebrow { text-transform: uppercase; }
.sb-head h2 { margin: 6px 0 8px; color: var(--sb-ink); font-size: clamp(26px, 3vw, 38px); font-weight: 700; line-height: 1.25; }
.sb-head p { margin: 0; }
.sb-prog { display: flex; width: 100%; min-height: 56px; padding: 8px 14px; align-items: center; gap: 11px; color: var(--sb-ink); text-align: left; background: #fff; border: 1px solid var(--sb-line); border-radius: 14px; font-size: 14px; font-weight: 600; line-height: 1.3; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.sb-prog:hover { border-color: var(--green-300); }
.sb-prog i { display: grid; width: 30px; height: 30px; flex: none; place-items: center; color: var(--sb-green); background: var(--sb-tint); border-radius: 50%; font-size: 13px; font-style: normal; font-weight: 700; }
.sb-prog small { display: block; color: var(--sb-muted); font-size: 12px; font-weight: 500; }
.sb-prog.is-done i { color: #fff; background: var(--sb-green); }
.sb-prog:focus-visible { outline: 3px solid var(--sb-amber); outline-offset: 2px; }
/* ---------- โครงหน้า ---------- */
.sb-layout { display: grid; align-items: start; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; }
/* ---------- การ์ดขั้นตอน (พับ/กางได้) ---------- */
.sb-step { overflow: hidden; scroll-margin-top: calc(var(--hd-h, 76px) + 14px); transition: border-color .15s ease, box-shadow .15s ease; }
.sb-step-head:focus-visible { outline: 3px solid var(--sb-amber); outline-offset: -3px; }
.sb-step-title { min-width: 0; flex: 1; }
.sb-step-title b { display: block; }
.sb-step-value { display: block; overflow: hidden; color: var(--sb-green); font-size: 14px; font-weight: 600; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.sb-default { margin-left: 6px; padding: 1px 8px; color: var(--sb-muted); background: var(--green-50); border-radius: 999px; font-size: 12px; font-weight: 500; }
.sb-step-chev { display: grid; width: 34px; height: 34px; flex: none; place-items: center; color: var(--sb-muted); background: var(--green-50); border-radius: 50%; transition: transform .2s ease, background .15s ease; }
.sb-step-chev svg { width: 16px; height: 16px; }
.sb-step.is-open .sb-step-chev { color: #fff; background: var(--sb-green); transform: rotate(180deg); }
.sb-howto { margin: 0 0 14px; padding: 14px 16px; color: var(--sb-text); background: var(--green-50); border: 1px solid var(--green-100); border-radius: 14px; }
.sb-howto[hidden] { display: none; }
.sb-howto > b { display: block; margin-bottom: 8px; color: var(--sb-green-d); font-size: 15px; }
.sb-howto ol { display: grid; margin: 0; padding-left: 22px; gap: 7px; font-size: 14px; line-height: 1.65; }
.sb-howto li::marker { color: var(--sb-green); font-weight: 700; }
.sb-howto strong { color: var(--sb-ink); }
.sb-hint { margin: 0 0 14px; color: var(--sb-muted); font-size: 14px; line-height: 1.65; }
.sb-sub { display: flex; margin: 22px 0 12px; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sb-sub:first-of-type { margin-top: 2px; }
.sb-sub h4 { margin: 0; color: var(--sb-ink); font-size: 16px; font-weight: 700; }
.sb-sub span { color: var(--sb-muted); font-size: 13px; }
.sb-next { display: inline-flex; margin-top: 20px; min-height: 46px; padding: 0 20px; align-items: center; gap: 8px; color: var(--sb-green-d); background: var(--sb-tint); border: 0; border-radius: 14px; font-size: 15px; font-weight: 600; cursor: pointer; transition: background .15s ease, transform .15s ease; }
.sb-next:hover { background: var(--green-100); transform: translateY(-1px); }
.sb-next svg { width: 16px; height: 16px; }
/* ---------- ค้นหา / ตัวกรองปก ---------- */
.sb-tools { display: flex; margin-bottom: 14px; align-items: center; gap: 10px 12px; flex-wrap: wrap; }
.sb-search { position: relative; min-width: 200px; flex: 1 1 220px; }
.sb-search svg { position: absolute; top: 50%; left: 14px; width: 17px; height: 17px; color: var(--sb-muted); transform: translateY(-50%); pointer-events: none; }
.sb-search input { width: 100%; min-height: 46px; padding: 0 14px 0 42px; color: var(--sb-ink); background: #fff; border: 1px solid var(--sb-line); border-radius: 14px; font: inherit; font-size: 15px; }
.sb-search input:focus { border-color: var(--sb-green-l); outline: 0; box-shadow: 0 0 0 4px rgba(0, 139, 87, .14); }
.sb-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.sb-chip { min-height: 40px; padding: 0 15px; color: var(--sb-text); background: #fff; border: 1px solid var(--sb-line); border-radius: 999px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all .15s ease; }
.sb-chip:hover { border-color: var(--sb-green-l); }
.sb-chip.is-active { color: #fff; background: var(--sb-green); border-color: var(--sb-green); }
.sb-chip:focus-visible { outline: 3px solid var(--sb-amber); outline-offset: 2px; }
/* ---------- การ์ดตัวเลือก (ปก / ปกใน / เนื้อใน) ---------- */
/* การ์ดปกนอก / ปกใน / เนื้อใน ขนาดเท่ากันหมด แถวละ 3 ช่อง (มือถือ 2 ช่อง) กรอบรูปสี่เหลี่ยมจัตุรัสเท่ากัน */
.sb-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sb-card { position: relative; }
.sb-card > input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.sb-face { display: block; height: 100%; padding: 8px; background: #fff; border: 1px solid var(--sb-line); border-radius: 22px; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease, background .15s ease; }
.sb-face:hover { border-color: var(--green-300); }
.sb-card > input:focus-visible + .sb-face { outline: 3px solid var(--sb-amber); outline-offset: 2px; }
.sb-img { position: relative; display: grid; overflow: hidden; aspect-ratio: 1 / 1; place-items: center; background: #fff; border: 1px solid var(--green-100); border-radius: 10px; }
.sb-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }   /* absolute = เต็มกรอบพอดีเสมอ ภาพสัดส่วนไม่ตรงก็ไม่ล้นกรอบ */
.sb-grid.is-lines .sb-img { aspect-ratio: 1026 / 1500; }   /* ลายเส้นคือหน้ากระดาษแนวตั้ง ใช้กรอบแนวตั้งสัดส่วนเดียวกับภาพ เห็นทั้งหน้า */
/* กรอบรูปของการ์ดเลือก: ปกนอกและปกใน (ภาพแนวนอน) ใช้กรอบเดียวกัน 4:3 แสดงภาพเต็ม · ลายเส้น (หน้ากระดาษแนวตั้ง) ใช้กรอบแนวตั้งตามด้านบน */
.sb-grid:not(.is-lines) .sb-img { aspect-ratio: 4 / 3; }
.sb-face.is-missing .sb-img::before { position: absolute; inset: 0; display: grid; padding: 10px; place-items: center; color: var(--sb-muted); content: "รูปตัวอย่างกำลังจัดเตรียม"; background: repeating-linear-gradient(45deg, var(--green-50), var(--green-50) 8px, var(--green-50) 8px, var(--green-50) 16px); font-size: 12px; text-align: center; }
.sb-face.is-missing .sb-img img { visibility: hidden; }
.sb-meta { display: grid; min-height: 70px; padding: 10px 5px 4px; align-content: start; gap: 1px; }
.sb-meta b { color: var(--sb-ink); font-size: 14px; font-weight: 600; line-height: 1.4; }
.sb-meta small { display: -webkit-box; overflow: hidden; color: var(--sb-muted); font-size: 12px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.sb-new { margin-left: 5px; padding: 1px 7px; color: #6b4300; background: #ffe08a; border-radius: 999px; font-size: 12px; font-style: normal; font-weight: 700; }
.sb-check { position: absolute; z-index: 2; top: 14px; right: 14px; display: none; width: 26px; height: 26px; place-items: center; color: #fff; background: var(--sb-green); border: 2px solid #fff; border-radius: 50%; box-shadow: 0 4px 12px rgba(0, 0, 0, .2); font-size: 12px; font-weight: 700; }
.sb-card > input:checked + .sb-face .sb-check { display: grid; }
.sb-zoom { position: absolute; z-index: 2; top: 14px; left: 14px; display: grid; width: 34px; height: 34px; padding: 0; place-items: center; color: var(--sb-ink); background: rgba(255, 255, 255, .95); border: 1px solid var(--sb-line); border-radius: 50%; box-shadow: 0 3px 10px rgba(0, 0, 0, .12); cursor: pointer; transition: transform .15s ease, background .15s ease; }
.sb-zoom:hover { background: #fff; transform: scale(1.08); }
.sb-zoom:focus-visible { outline: 3px solid var(--sb-amber); outline-offset: 2px; }
.sb-zoom svg { width: 16px; height: 16px; }
.sb-empty { padding: 30px 12px; color: var(--sb-muted); text-align: center; }
.sb-more { display: flex; width: 100%; min-height: 46px; margin-top: 14px; align-items: center; justify-content: center; color: var(--sb-green); background: #fff; border: 1px solid var(--sb-green); border-radius: 14px; font-size: 15px; font-weight: 600; cursor: pointer; }
.sb-more:hover { background: var(--sb-pale); }
/* ---------- จำนวนแผ่น / สีพิมพ์ / จำนวนผลิต ---------- */
.sb-group + .sb-group { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--sb-line); }
.sb-label { display: block; margin-bottom: 10px; color: var(--sb-ink); font-size: 15px; font-weight: 700; }
.sb-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sb-opt { position: relative; }
.sb-opt > input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.sb-opt-face { display: block; height: 100%; padding: 16px 18px; background: #fff; border: 1px solid var(--sb-line); border-radius: 14px; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.sb-opt-face:hover { border-color: var(--green-300); }
.sb-opt-face b { display: block; color: var(--sb-ink); font-size: 16px; font-weight: 700; line-height: 1.35; }
.sb-opt-face span { display: block; margin-top: 3px; color: var(--sb-muted); font-size: 14px; line-height: 1.55; }
.sb-opt-face em { display: inline-block; margin-top: 9px; padding: 3px 10px; color: var(--sb-green-d); background: var(--sb-tint); border-radius: 999px; font-size: 13px; font-style: normal; font-weight: 600; }
.sb-opt > input:focus-visible + .sb-opt-face { outline: 3px solid var(--sb-amber); outline-offset: 2px; }
.sb-vatbar { display: flex; margin-bottom: 14px; padding: 12px 14px; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; color: #74521b; background: #fff7da; border: 1px solid #f6df8f; border-radius: 14px; font-size: 14px; line-height: 1.55; }
.sb-vatbar b { color: #5c410f; }
.sb-seg { display: inline-flex; padding: 3px; background: #fff; border: 1px solid #f0d67a; border-radius: 999px; }
.sb-seg button { min-height: 34px; padding: 0 14px; color: #74521b; background: none; border: 0; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer; }
.sb-seg button[aria-pressed="true"] { color: #fff; background: var(--sb-green); }
.sb-seg button:focus-visible { outline: 3px solid var(--sb-amber); outline-offset: 1px; }
.sb-qtys { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.sb-qty-face { position: relative; display: block; height: 100%; min-height: 116px; padding: 14px 10px 12px; text-align: center; background: #fff; border: 1px solid var(--sb-line); border-radius: 14px; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.sb-qty-face:hover { border-color: var(--green-300); }
.sb-qty-face strong { display: block; color: var(--sb-ink); font-size: 18px; font-weight: 700; }
.sb-qty-unit { display: block; margin-top: 4px; color: var(--sb-green); font-size: 14px; font-weight: 700; }
.sb-qty-total { display: block; margin-top: 2px; color: var(--sb-muted); font-size: 12px; }
.sb-qty-save { display: block; margin-top: 4px; color: #b45309; font-size: 12px; font-weight: 600; }
.sb-best { position: absolute; top: -10px; left: 50%; padding: 2px 10px; color: #fff; background: #f08a00; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; transform: translateX(-50%); }
.sb-opt > input:focus-visible + .sb-qty-face { outline: 3px solid var(--sb-amber); outline-offset: 2px; }
/* ---------- แผงสรุป ---------- */
.sb-summary { position: sticky; top: var(--sb-top); overflow: hidden; }
.sb-sum-scroll { overflow: visible; }
.sb-sum-foot { flex: none; background: #fff; border-top: 1px solid var(--sb-line); box-shadow: 0 -8px 18px rgba(0, 82, 65, .05); }
.sb-sum-top { flex: none; }
.sb-sum-top small { display: block; }
.sb-sum-top b { display: block; margin-top: 2px; }
@media (min-width: 901px) and (max-height: 820px) {
    .sb-stage { min-height: 190px; padding: 12px; }
    .sb-stage img { height: 170px; }
}
.sb-stage { position: relative; display: grid; min-height: 250px; padding: 18px; place-items: center; background: #fff; border-bottom: 1px solid var(--sb-line); }
.sb-stage button { display: block; width: 100%; padding: 0; background: none; border: 0; cursor: zoom-in; }
.sb-stage img { width: 100%; height: 230px; object-fit: contain; transition: opacity .18s ease; }
.sb-stage img.is-changing { opacity: .25; }
.sb-stage button:focus-visible { outline: 3px solid var(--sb-amber); outline-offset: 2px; }
.sb-code { position: absolute; top: 14px; right: 14px; padding: 4px 11px; color: var(--sb-green-d); background: var(--sb-tint); border-radius: 999px; font-size: 12px; font-weight: 700; }
.sb-stage.is-missing img { visibility: hidden; }
.sb-stage.is-missing::after { position: absolute; inset: 60px 18px 18px; display: grid; place-items: center; color: var(--sb-muted); content: "รูปตัวอย่างกำลังจัดเตรียม"; background: repeating-linear-gradient(45deg, var(--green-50), var(--green-50) 8px, var(--green-50) 8px, var(--green-50) 16px); border-radius: 14px; font-size: 13px; }
.sb-rows { margin: 0; padding: 6px 20px 0; list-style: none; }
.sb-row { display: flex; width: 100%; padding: 10px 0; align-items: center; gap: 12px; text-align: left; background: none; border: 0; border-bottom: 1px dashed var(--sb-line); cursor: pointer; }
.sb-rows > li:last-child .sb-row { border-bottom: 0; }
.sb-row:hover .sb-row-edit { text-decoration: underline; }
.sb-row-thumb { display: grid; width: 52px; height: 40px; flex: none; overflow: hidden; place-items: center; background: #fff; border: 1px solid var(--sb-line); border-radius: 10px; }
.sb-row-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sb-row.is-missing .sb-row-thumb img { visibility: hidden; }
.sb-row-text { min-width: 0; flex: 1; }
.sb-row-text small { display: block; line-height: 1.4; }
.sb-row-text b { display: block; overflow: hidden; line-height: 1.45; text-overflow: ellipsis; }
.sb-row-edit { flex: none; color: var(--sb-green); font-size: 13px; font-weight: 600; }
.sb-row:focus-visible { outline: 3px solid var(--sb-amber); outline-offset: -2px; border-radius: 10px; }
.sb-price-line { display: flex; justify-content: space-between; gap: 12px; color: var(--sb-muted); font-size: 14px; }
.sb-price-line b { color: var(--sb-ink); font-weight: 600; }
.sb-total { display: flex; margin-top: 10px; align-items: flex-end; justify-content: space-between; gap: 12px; }
.sb-total span { color: var(--sb-muted); font-size: 14px; line-height: 1.4; }
.sb-total strong { text-align: right; }
.sb-formula { margin: 4px 0 0; color: var(--sb-muted); font-size: 13px; text-align: right; }
.sb-cta { display: grid; padding: 12px 20px 8px; gap: 10px; }
.sb-btn { display: inline-flex; width: 100%; min-height: 50px; padding: 10px 18px; align-items: center; justify-content: center; gap: 9px; border: 1px solid transparent; border-radius: 14px; font-size: 16px; font-weight: 700; cursor: pointer; transition: transform .15s ease, background .15s ease, box-shadow .15s ease; }
.sb-btn:hover { transform: translateY(-3px); }
.sb-btn:focus-visible { outline: 3px solid var(--sb-amber); outline-offset: 2px; }
.sb-btn-main { color: #fff; background: var(--sb-green); box-shadow: 0 10px 24px rgba(0, 139, 87, .28); }
.sb-btn-main:hover { background: var(--sb-green-d); }
.sb-btn-line { color: var(--green-700); background: #fff; border-color: var(--line-brand); }
.sb-btn-line:hover { background: var(--green-50); }
.sb-btn svg { width: 18px; height: 18px; }
.sb-note { margin: 0; padding: 4px 20px 18px; color: var(--sb-muted); font-size: 13px; line-height: 1.6; }
/* ---------- แถบราคาติดล่าง (มือถือ/แท็บเล็ต) ---------- */
.sb-bar { display: none; }
body.has-sb-bar .back-to-top { bottom: 92px; }
/* ---------- ภาพขยาย ---------- */
.sb-lightbox { position: fixed; z-index: 3200; inset: 0; display: none; padding: 20px; place-items: center; background: rgba(0, 31, 26, .86); }
.sb-lightbox.is-open { display: grid; }
.sb-lightbox-inner { position: relative; width: fit-content; max-width: min(940px, 96vw); max-height: 92vh; padding: 16px; background: #fff; border-radius: 22px; }
/* กล่องปรับตามสัดส่วนภาพ: ภาพแนวนอนเต็มกว้าง · ภาพแนวตั้ง (ลายเส้น) กล่องแคบลงพอดีภาพ ไม่เหลือขอบขาวสองข้าง */
.sb-lightbox img { display: block; width: auto; max-width: 100%; height: auto; max-height: calc(92vh - 96px); margin: 0 auto; object-fit: contain; }
.sb-lightbox p { margin: 10px 0 0; color: var(--sb-ink); font-size: 15px; font-weight: 600; text-align: center; }
.sb-lightbox-close { position: absolute; z-index: 2; top: -12px; right: -12px; display: grid; width: 42px; height: 42px; place-items: center; color: #fff; background: var(--green-900); border: 2px solid #fff; border-radius: 50%; font-size: 24px; line-height: 1; cursor: pointer; }
.sb-lightbox-close:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
    .sb-layout { grid-template-columns: minmax(0, 1fr) 330px; gap: 18px; }
    .sb-step-head { padding: 14px 16px; }
    .sb-step-body { padding-inline: 16px; }
}
@media (max-width: 900px) {
    .sb { padding: 40px 0 120px; }
    .sb-layout { grid-template-columns: 1fr; }
    .sb-summary { position: static; display: block; max-height: none; overflow: visible; scroll-margin-top: calc(var(--hd-h, 68px) + 12px); }
    .sb-sum-scroll { overflow: visible; }
    .sb-sum-foot { box-shadow: none; }
    .sb-progress { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.has-sb-bar { padding-bottom: 76px; }
    .sb-bar { position: fixed; z-index: 900; right: 0; bottom: 0; left: 0; display: flex; min-height: 68px; padding: 8px 14px calc(8px + env(safe-area-inset-bottom, 0px)); align-items: center; gap: 12px; color: #fff; background: var(--green-950); box-shadow: 0 -8px 26px rgba(0, 0, 0, .2); }
    .sb-bar-info { display: flex; min-width: 0; flex: 1; padding: 0; align-items: center; gap: 12px; color: inherit; text-align: left; background: none; border: 0; cursor: pointer; }
    .sb-bar-thumb { display: grid; width: 48px; height: 48px; flex: none; overflow: hidden; place-items: center; background: #fff; border-radius: 10px; }
    .sb-bar-thumb img { width: 100%; height: 100%; object-fit: contain; }
    .sb-bar-info small { display: block; color: var(--line-strong); font-size: 12px; line-height: 1.3; }
    .sb-bar-info strong { display: block; overflow: hidden; font-size: 18px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
    .sb-bar-btn { display: inline-flex; min-height: 46px; padding: 0 18px; flex: none; align-items: center; color: var(--green-900); background: #fff; border-radius: 14px; font-size: 15px; font-weight: 700; white-space: nowrap; }
    .sb-bar-info:focus-visible, .sb-bar-btn:focus-visible { outline: 3px solid var(--sb-amber); outline-offset: 2px; }
}
@media (max-width: 640px) {
    .sb { padding-top: 32px; }
    .sb-head { text-align: left; }
    .sb-head p { font-size: 14px; }
    .sb-progress { display: flex; margin-inline: -14px; padding: 2px 14px 6px; overflow-x: auto; scrollbar-width: none; }
    .sb-progress::-webkit-scrollbar { display: none; }
    .sb-progress li { flex: 0 0 auto; }
    .sb-prog { min-width: 164px; }
    .sb-step { border-radius: 22px; }
    .sb-step-num { width: 38px; height: 38px; }
    .sb-step-title b { font-size: 16px; }
    .sb-step-value { font-size: 13px; }
    .sb-default { display: none; }
    .sb-step-body { padding: 2px 14px 18px; }
    .sb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .sb-meta { min-height: 68px; }
    .sb-opts { grid-template-columns: 1fr; }
    .sb-qtys { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sb-tools { align-items: stretch; }
    .sb-filters { flex-wrap: nowrap; margin-inline: -14px; padding: 0 14px 3px; overflow-x: auto; scrollbar-width: none; }
    .sb-filters::-webkit-scrollbar { display: none; }
    .sb-chip { flex: none; }
    .sb-stage { min-height: 220px; }
    .sb-stage img { height: 200px; }
    .sb-lightbox { padding: 12px; }
    .sb-lightbox-close { top: -8px; right: -4px; }
}
@media (max-width: 380px) {
    .sb-bar { gap: 8px; padding-inline: 10px; }
    .sb-bar-btn { padding: 0 12px; font-size: 14px; }
    .sb-bar-info strong { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .sb *, .sb-lightbox * { transition: none !important; }
}
/* ---------- เลือกประเภทสมุด: สมุดนักเรียน / สมุดคัดจีน ---------- */
.sb-product { margin: 0 0 22px; }
.sb-product:empty { display: none; }
.sb-prod { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sb-prodbtn { display: block; width: 100%; padding: 14px 18px; text-align: left; background: #fff; border: 1px solid var(--sb-line); border-radius: 14px; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.sb-prodbtn b { display: block; color: var(--sb-ink); font-size: 16px; font-weight: 700; line-height: 1.35; }
.sb-prodbtn span { display: block; margin-top: 3px; color: var(--sb-muted); font-size: 14px; line-height: 1.55; }
.sb-prodbtn:focus-visible { outline: 3px solid var(--sb-amber); outline-offset: 2px; }
.sb-opt-face em:empty { display: none; }
.sb-filters[hidden] { display: none; }
.sb-opt-face.is-static { cursor: default; }
@media (max-width: 480px) {
    .sb-prod { grid-template-columns: 1fr; }
}
.sb-spec { margin: 20px 0 24px; padding: 14px 18px 14px 34px; color: var(--sb-ink); background: var(--sb-pale); border: 1px solid var(--sb-line); border-radius: 14px; font-size: 14px; line-height: 1.7; }
.sb-spec li { margin: 2px 0; }
/* ---------- แบบยาวต่อเนื่อง: ทุกขั้นตอนเปิดตลอด ไม่มีแถบพับ/กาง ---------- */
.sb-progress { margin: 0 0 22px; padding: 0; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; list-style: none; display: none; }
.sb-steps { display: grid; min-width: 0; gap: 18px; }
.sb-step, .sb-step.is-open { box-shadow: none; }
.sb-step-head { display: flex; width: 100%; align-items: center; gap: 14px; text-align: left; background: none; border: 0; padding: 22px 26px 6px; cursor: default; }
.sb-step-body { padding: 10px 26px 26px; }
.sb-step-num { display: grid; place-items: center; }
.sb-step.is-done .sb-step-num { color: #fff; background: var(--sb-green); border-color: var(--sb-green); }
@media (max-width: 640px) {
    .sb-step-head { padding: 18px 16px 4px; }
    .sb-step-body { padding: 8px 16px 20px; }
}
/* พื้นหลังอ่อนลง · เส้นตอนเลือกบางลง (เส้นเดียว 1px ไม่มีวงซ้อน ไม่มีเงาหนา) */
.sb { --sb-green: var(--green-700); --sb-green-d: var(--green-800); --sb-green-l: var(--green-600); --sb-tint: var(--green-100); --sb-ink: var(--ink); --sb-text: var(--text); --sb-muted: var(--muted); --sb-line: var(--line); --sb-amber: var(--amber); --sb-top: calc(var(--hd-h, 76px) + 16px); padding: 56px 0 96px; color: var(--sb-text); --sb-pale: #f9fcfa; background: #f9fcfa; }
.sb-step.is-current { border-color: var(--sb-line); box-shadow: none; }
.sb-step.is-open { border-color: var(--sb-line); box-shadow: none; }
.sb-prog.is-open { border-color: var(--sb-green-l); box-shadow: none; }
/* ตอนกดเลือก: พื้นเขียวอ่อน + ขอบเขียวบาง (แบบเดียวกับหน้านามบัตร/กระดาษรองอาหาร) */
.sb-card > input:checked + .sb-face .sb-img { background: #fff; }
.sb-card > input:checked + .sb-face:hover, .sb-opt > input:checked + .sb-opt-face:hover, .sb-opt > input:checked + .sb-qty-face:hover, .sb-prodbtn[aria-pressed="true"]:hover { background: var(--green-50); border-color: var(--green-700); }

/* ตัวเลือกที่กดแล้วมีเครื่องหมายถูกมุมขวาบน (เหมือนหน้ากระดาษรองอาหาร / ซองเครป) */
.sb-opt-face, .sb-prodbtn { position: relative; }
.sb-opt > input:checked + .sb-opt-face:not(.is-static)::after,
.sb-opt > input:checked + .sb-qty-face::after,
.sb-prodbtn[aria-pressed="true"]::after { position: absolute; top: 10px; right: 10px; display: block; width: 22px; height: 22px; content: ""; background: var(--green-700) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat; border-radius: 50%; }
.sb-opt > input:checked + .sb-opt-face:not(.is-static),
.sb-prodbtn[aria-pressed="true"] { padding-right: 42px; }

/* ช่องรูปด้านซ้ายของตัวเลือกการเข้าเล่ม (สัดส่วน 1:1) ยังไม่มีไฟล์รูปจะแสดงกรอบว่างพร้อมไอคอนไว้ก่อน */
.sb-opt-face:has(.sb-opt-pic) { display: grid; grid-template-columns: 88px minmax(0, 1fr); column-gap: 16px; align-content: center; align-items: center; }
.sb-opt-pic { grid-row: 1 / span 3; position: relative; display: block; width: 88px; height: 88px; margin: 0; overflow: hidden; background: #f2fbf6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fd9bc' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='9' cy='10' r='1.6'/%3E%3Cpath d='m21 16-5-5-8 9'/%3E%3C/svg%3E") center / 34px no-repeat; border: 0; border-radius: 12px; }
.sb-opt-pic img { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; object-fit: cover; background: #fff; }
.sb-opt-face:has(.sb-opt-pic) em { justify-self: start; }

/* คละแบบ: รายการแบบสมุดในออเดอร์ */
.sb-vars { margin-bottom: 18px; padding: 14px 16px; background: #fff; border: 1px solid var(--sb-line); border-radius: 14px; }
.sb-vars-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.sb-vars-head b { color: var(--sb-ink); font-size: 16px; }
.sb-vars-head span { color: var(--sb-green); font-size: 14px; font-weight: 700; }
/* คละปก: สวิตช์เปิดโหมด + กล่องรายการปกที่เลือก (ค้างอยู่บนจอขณะเลื่อนดูปก จะได้ไม่ต้องเลื่อนกลับมาใส่จำนวน) */
.sb-mix-toggle { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.sb-mix-toggle input { flex: none; width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--sb-green); cursor: pointer; }
.sb-mix-toggle b { display: block; color: var(--sb-ink); font-size: 16px; }
.sb-mix-toggle small { display: block; margin-top: 2px; color: var(--sb-muted); font-size: 13px; line-height: 1.55; }
.sb-vars-panel { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--sb-line); }
.sb-vars.is-mix { z-index: 6; border-color: var(--green-300); box-shadow: 0 10px 28px rgba(0, 82, 65, .12); }
@media (min-width: 901px) {
    .sb-vars.is-mix { position: sticky; top: var(--sb-top); max-height: calc(100vh - var(--sb-top) - 24px); overflow-y: auto; }
}
.sb-var-pick { cursor: default; }
button.sb-var-pick { cursor: pointer; }
.sb-var-thumbs .sb-vnone { display: block; width: 40px; height: 40px; background: #fff; border: 1px dashed var(--line-strong); border-radius: 8px; }
/* ป้ายบนการ์ดเนื้อใน: ลายนี้ใช้กับเล่มไหนบ้าง */
.sb-usedby { position: absolute; z-index: 2; right: 14px; bottom: 14px; padding: 3px 9px; color: var(--sb-green-d); background: var(--sb-tint); border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.sb-var { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; padding: 8px 10px; background: #fff; border: 1px solid var(--sb-line); border-radius: 12px; }
.sb-var.is-active { background: var(--green-50); border-color: var(--green-700); }
.sb-var-pick { display: flex; flex: 1 1 auto; min-width: 0; align-items: center; gap: 12px; padding: 0; text-align: left; color: inherit; background: none; border: 0; font: inherit; cursor: pointer; }
.sb-var-thumbs { display: flex; flex: none; gap: 4px; }
.sb-vars.is-bycover .sb-mix-toggle { pointer-events: none; }
.sb-vars.is-bycover .sb-mix-toggle input { opacity: .55; }
.sb-vt { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.sb-vt > span { color: var(--sb-muted); font-size: 11px; font-weight: 600; line-height: 1; white-space: nowrap; }
.sb-var-thumbs img { width: 40px; height: 40px; object-fit: cover; background: #fff; border: 1px solid var(--sb-line); border-radius: 8px; }
.sb-var-text { min-width: 0; }
.sb-var-text b { display: block; color: var(--sb-ink); font-size: 15px; }
.sb-var-text small { display: block; color: var(--sb-muted); font-size: 12px; line-height: 1.5; }
.sb-var-text em { display: block; color: var(--sb-green-d); font-size: 12px; font-style: normal; font-weight: 700; }
/* แถวที่ไม่ได้เลือกยังสงวนที่บรรทัดนี้ไว้ (ซ่อนข้อความ) เพื่อไม่ให้ความสูงแถวเปลี่ยนตอนสลับเล่ม แล้วทั้งรายการกระโดด */
.sb-var-text em.is-off { visibility: hidden; }
.sb-mix-n { display: inline-flex; flex: none; align-items: center; gap: 6px; color: var(--sb-muted); font-size: 14px; white-space: nowrap; }
.sb-mix-n b { color: var(--sb-green); font-size: 16px; }
.sb-var input[type="number"] { width: 92px; min-height: 40px; padding: 0 10px; color: var(--sb-ink); background: #fff; border: 1px solid var(--line-strong); border-radius: 12px; font: inherit; font-size: 15px; text-align: right; }
.sb-mix-del { flex: none; width: 34px; height: 34px; color: var(--sb-muted); background: #fff; border: 1px solid var(--line-strong); border-radius: 50%; font-size: 20px; line-height: 1; cursor: pointer; }
.sb-mix-del:hover { color: var(--danger); border-color: var(--danger); }
.sb-mix-add { min-height: 42px; margin-top: 4px; padding: 0 18px; color: var(--sb-green-d); background: var(--sb-tint); border: 0; border-radius: 12px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.sb-mix-status { margin: 10px 0 0; color: var(--sb-muted); font-size: 13px; line-height: 1.6; }
.sb-mix-status:empty { display: none; }
.sb-mix-status.is-error { color: var(--danger); font-weight: 600; }
.sb-mix-hint { margin: 8px 0 0; color: var(--sb-muted); font-size: 12px; line-height: 1.55; }
.sb-active-note { margin: 0 0 12px; padding: 8px 12px; color: var(--sb-green-d); background: var(--sb-tint); border-radius: 10px; font-size: 13px; font-weight: 600; }
.sb-mix-sum { display: block; margin-top: 4px; font-size: 12px; font-weight: 500; line-height: 1.5; }
.sb-mix-sum span { display: block; margin-top: 2px; }
@media (max-width: 640px) {
    .sb-var { flex-wrap: wrap; }
    .sb-var-pick { flex-basis: 100%; }
}

/* สรุปรายการ: การ์ดต่อแบบ เมื่อคละ (ซ่อนภาพปกเดี่ยว แสดงทุกแบบพร้อมรายละเอียด) */
.sb-stage[hidden] { display: none; }
.sb-vsum { list-style: none; padding: 12px 14px 4px; }
.sb-vsum-list { display: grid; gap: 10px; }
.sb-vcard { padding: 10px 12px; background: #fff; border: 1px solid var(--sb-line); border-radius: 12px; }
.sb-vhead { display: flex; align-items: baseline; gap: 8px; }
.sb-vhead b { flex: 1 1 auto; color: var(--sb-ink); font-size: 15px; }
.sb-vqty { flex: none; color: var(--sb-ink); font-size: 13px; font-weight: 600; }
.sb-vamt { flex: none; color: var(--sb-green); font-size: 14px; font-weight: 700; white-space: nowrap; }
.sb-vpics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.sb-vpic { display: block; text-align: center; }
.sb-vpic img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #f2fbf6; border: 1px solid var(--sb-line); border-radius: 8px; }
.sb-vpic small { display: block; margin-top: 3px; color: var(--sb-muted); font-size: 11px; }
.sb-vdl { margin: 8px 0 0; }
.sb-vdl div { display: flex; gap: 8px; padding: 3px 0; border-top: 1px dashed var(--line-strong); font-size: 12px; line-height: 1.5; }
.sb-vdl dt { flex: none; width: 46px; color: var(--sb-muted); }
.sb-vdl dd { margin: 0; min-width: 0; color: var(--sb-ink); }
.sb-vcard.is-compact { display: flex; align-items: center; gap: 10px; padding: 8px 10px; }
.sb-vthumb { flex: none; width: 48px; height: 36px; object-fit: cover; background: #f2fbf6; border: 1px solid var(--sb-line); border-radius: 6px; }
.sb-vbody { flex: 1 1 auto; min-width: 0; line-height: 1.35; }
.sb-vbody b { display: block; color: var(--sb-ink); font-size: 14px; overflow-wrap: anywhere; }
.sb-vbody small { display: block; color: var(--sb-muted); font-size: 12px; }
.sb-vnum { display: flex; flex: none; flex-direction: column; align-items: flex-end; gap: 1px; }
.sb-vsum-note { margin: 8px 2px 0; color: var(--sb-muted); font-size: 12px; }
.sb-vsum.is-error .sb-vsum-note { color: var(--danger); font-weight: 600; }
.sb-vsum.is-error .sb-vcard { border-color: #f1b7b0; }
/* เครื่องหมายถูกของการ์ดปก: ขนาดและตำแหน่งเดียวกับตัวเลือกอื่นทุกหน้า (วงกลมเขียว 22px มุมขวาบน) */
.sb-check { top: 10px; right: 10px; width: 22px; height: 22px; font-size: 0; background: var(--green-700) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat; border: 0; box-shadow: none; }
/* ไม่มีค่าเริ่มต้น + เตือนข้อมูลไม่ครบ */
.sb-step-value.is-none { color: var(--sb-muted); font-weight: 500; }
.sb-step.is-missing { border-color: #e2a39b; box-shadow: 0 0 0 3px rgba(214, 69, 69, .08); }
.sb-miss { margin: 0 0 12px; padding: 8px 14px; color: #b3382c; background: #fdf1ef; border-radius: 10px; font-size: 14px; font-weight: 600; }
.sb-miss[hidden] { display: none; }
.sb-prog.is-missing { border-color: #e2a39b; }
.sb-prog.is-missing small { color: #b3382c; font-weight: 600; }
.sb-stage.is-empty img, .sb-bar-thumb.is-empty img, .sb-row.is-empty .sb-row-thumb img { visibility: hidden; }
.sb-stage.is-empty::after { position: absolute; inset: 60px 18px 18px; display: grid; place-items: center; color: var(--sb-muted); content: "ยังไม่ได้เลือกปก"; background: var(--green-50); border-radius: 14px; font-size: 13px; }
.sb-vnone { display: block; width: 40px; height: 40px; background: var(--green-50); border: 1px dashed var(--sb-line); border-radius: 8px; }
.sb-vpic .sb-vnone { width: 100%; height: auto; aspect-ratio: 4 / 3; }
/* ==========================================================================
   แผงสรุปรายการแบบเช็กลิสต์ (ออกแบบใหม่)
   - หัวแผงมีแถบความคืบหน้า "เลือกแล้ว X จาก N ขั้น"
   - รูปปกย่อให้เล็กลง (เดิมสูงเกือบ 300px) ให้ทั้งแผงเตี้ยลงและราคา/ปุ่มไม่หลุดจอ
   - แต่ละแถวมีวงกลมสถานะ: ติ๊กเขียว = เลือกแล้ว · วงเส้นประ + ปุ่ม "เลือก" = ยังไม่ได้เลือก
   - ราคาจางจนกว่าจะครบ ปุ่มหลักบอกว่ายังเหลืออีกกี่ขั้น
   ========================================================================== */
.sb-meter { margin: 0 0 14px; }
.sb-meter-text { display: block; color: var(--sb-muted); font-size: 13px; font-weight: 600; }
.sb-meter.is-done .sb-meter-text { color: var(--sb-green); }
.sb-meter-bar { display: block; height: 6px; margin-top: 7px; overflow: hidden; background: var(--green-100); border-radius: 999px; }
.sb-meter-bar i { display: block; width: 0; height: 100%; background: var(--sb-green); border-radius: inherit; transition: width .3s ease; }

.sb-stage { min-height: 0; padding: 12px 20px; border-top: 1px solid var(--sb-line); }
.sb-stage img { height: 150px; }
.sb-code { top: 16px; right: 22px; }
.sb-stage.is-empty img { height: 60px; }
.sb-stage.is-empty::after { inset: 12px 20px; font-size: 13px; }

.sb-rows { padding: 2px 20px 4px; }
.sb-row { padding: 9px 0; gap: 11px; }
.sb-dot { display: block; width: 20px; height: 20px; flex: none; background: #fff; border: 2px dashed var(--line-strong); border-radius: 50%; }
.sb-row:not(.is-todo) .sb-dot { background: var(--sb-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 13px no-repeat; border: 2px solid var(--sb-green); }
.sb-row-thumb { width: 40px; height: 32px; border-radius: 8px; }
body .sb-summary .sb-row.is-todo .sb-row-text b { color: var(--sb-muted); font-weight: 500; }
.sb-row.is-todo .sb-row-edit { padding: 3px 12px; color: var(--sb-green-d); border: 1px solid var(--line-brand); border-radius: 999px; font-size: 12.5px; }
.sb-row.is-todo:hover .sb-row-edit { background: var(--green-50); text-decoration: none; }

.sb-price.is-pending { opacity: .6; }
body .sb-price { margin: 10px 18px 0; padding: 12px 14px 10px; }
.sb-cta { padding: 10px 18px 6px; }
.sb-btn { min-height: 46px; }
.sb-btn-main.is-wait { color: var(--sb-green-d); background: var(--green-100); box-shadow: none; }
.sb-btn-main.is-wait:hover { background: var(--green-100); }
.sb-note { padding: 2px 20px 14px; }

/* ปรับความสูงส่วนล่างของแผงสรุป: ราคาต่อเล่ม/ราคารวมเป็นบรรทัดซ้าย-ขวา (เดิมซ้อนเป็นบล็อกสูงเกือบ 200px) */
body .sb-summary .sb-price { margin: 8px 16px 0; padding: 10px 14px 8px; }
body .sb-summary .sb-price-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 8px; }
body .sb-summary .sb-price-line span { display: block; font-size: 13px; line-height: 1.35; }
body .sb-summary .sb-price-line b { display: block; margin: 0; font-size: 17px; white-space: nowrap; }
body .sb-summary .sb-total { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 8px; }
body .sb-summary .sb-total span { display: block; font-size: 13px; line-height: 1.35; }
body .sb-summary .sb-total strong { margin: 0; font-size: 26px; white-space: nowrap; }
body .sb-summary .sb-formula { margin: 2px 0 0; font-size: 12px; }
body .sb-summary .sb-cta { gap: 8px; padding: 10px 16px 4px; }
body .sb-summary .sb-btn { min-height: 44px; }
body .sb-summary .sb-btn-main.is-wait { color: var(--sb-green-d); background: var(--green-100); box-shadow: none; }
body .sb-summary .sb-btn-main.is-wait:hover { background: var(--green-100); transform: none; }
.sb-row { padding: 7px 0; }
body .sb-summary .sb-note { padding: 2px 18px 12px; font-size: 12px; line-height: 1.5; }