/* ═══ 29 ต.ค. 19:30 · รอบ "หน้าตาเหมือนเว็บจริงทั้งหมด" (เจ้าของ 18:56) ═══
   โหลดหลัง app.css + live-cards.css + live-pages.css (ลอกจากเว็บจริงอัตโนมัติ) · ไฟล์นี้ = จัดวางให้เข้ากับโครงเว็บใหม่ */

/* ── กริดการ์ด: ยืดตามจอ ใช้พื้นที่เต็ม การ์ดใหญ่ชัด (มือถือ 2 · ไอแพด 3 · คอม ไม่ต่ำกว่า 250px ต่อใบ) ── */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:600px){ .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} }
@media (min-width:1024px){
  :root{--maxw:1760px}
  .grid,.cat-main .grid,.page .grid{grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:16px}
}
/* การ์ด: ✓ อยู่ในตะกร้า (แบบเว็บใหม่ · ใต้หัวใจ ไม่ทับป้าย) · หัวใจที่กดแล้ว · เล่มขายแล้ว/ติดจอง */
.card-img-wrap{position:relative;overflow:hidden}
.card-img-wrap .incart{position:absolute;right:9px;top:50px;z-index:3;width:30px;height:30px;border-radius:999px;background:var(--plum);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(43,34,56,.25)}
.card-img-wrap .incart .ico{stroke:#fff;width:16px;height:16px;stroke-width:2.6}
.card .fav-btn.on svg,.card .fav-btn[aria-pressed=true] svg{fill:var(--coral);stroke:var(--coral)}
.card.pending .card-img{opacity:.55}
.card.soldout .card-img-wrap img{opacity:.5;filter:grayscale(.4)}
.status-badge.soldout{background:#EDEAF1;color:var(--ink2)}
.card .card-title{text-decoration:none}
.card .card-title:hover{text-decoration:none}
.card .card-meta:empty{display:none}
.card{cursor:pointer}
.card-img-wrap .card-img{width:100%;aspect-ratio:4/5;object-fit:contain;display:block}
.card:focus-visible,.set-card:focus-visible,.sb-row:focus-visible{outline:3px solid var(--plum);outline-offset:2px}
@supports not (aspect-ratio:1/1){ .card-img-wrap{height:0;padding-top:125%} .card-img-wrap .card-img{position:absolute;top:0;left:0;height:100%} }

/* ── หัวเว็บแบบเว็บจริง: โลโก้ · ช่องค้นหา · ภาษา · เมนู (เมนูอยู่มุมขวาสุด) ── */
.hdr .logo{width:44px;height:44px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line)}
.hdr .lang{height:44px;min-width:44px;width:auto;padding:0 10px;border-radius:12px;border:0;box-shadow:inset 0 0 0 1.5px var(--line);background:var(--paper);font:600 13px Sarabun,sans-serif;color:var(--ink2);flex:none;cursor:pointer}
.search input{font:400 16px Sarabun,sans-serif}
@media (min-width:1024px){
  .hdr .wrap{gap:16px}
  .dnav{gap:4px;margin-left:8px}
  .dnav a{height:44px;padding:0 14px;border-radius:12px;gap:8px;font:500 14.5px Sarabun,sans-serif;color:var(--ink2)}
  .dnav a svg{width:24px;height:24px;flex:none}
  .dnav a[aria-current=page]{background:var(--lilac);color:var(--plum);font-weight:600}
  .dnav a.dcart.has{box-shadow:inset 0 0 0 1.5px var(--plum);color:var(--plum);background:var(--paper)}
  .dnav a.dcart.has[aria-current=page]{background:var(--lilac)}
}
/* แถบล่างมือถือ: ไอคอนชุดเว็บจริง */
.bnav a i svg{width:24px;height:24px}

/* ── หน้าเมนู/หน้าย่อย (โครง .sp ของเว็บจริง อยู่ใต้หัวเว็บ) ── */
.page.spg{background:#FBF8FE}
.page.spg .sp-top{padding-top:6px}
.page.spg .body{display:block}
.page.spg .sp-body{overflow:visible;flex:none}
.page.spg .sp-gap{width:46px;flex:none}
.page.spg.tab .sp-h1{font:500 22px Mitr,Sarabun,sans-serif;color:var(--ink);margin:4px 2px 12px}
.page.spg a.sp-row,.page.spg a.sp-hero,.page.spg a.sp-btn,.page.spg a.sp-note{text-decoration:none;color:inherit}
.page.spg a.sp-btn{display:flex;align-items:center;justify-content:center}
.page.spg .sp-row .sp-age{display:none}
.page.spg .ac-lb{display:flex;gap:8px}.page.spg .ac-lb .sp-btn{flex:1;margin:0}
.page.spg .hp-lead a{color:var(--plum);font-weight:600}
.page.spg .sp-body textarea#feedbackInput{font:16px Sarabun,sans-serif}
@media (max-width:1023px){ .page.spg .sp-body{padding-bottom:calc(28px + var(--safe-b))} }
/* หน้าต่างเข้าสู่ระบบ: อยู่เหนือทุกอย่าง */
#loginModal{z-index:calc(var(--z-page) + 20)}
#loginModal .modal-box input{font-size:16px}
.lg-switch{margin-top:6px;border:0;background:none;color:var(--plum);font:600 14px Sarabun,sans-serif;text-decoration:underline;cursor:pointer;padding:4px 0}
.sp-in{width:100%;box-sizing:border-box;font:16px Sarabun,sans-serif;padding:10px 12px;border-radius:12px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink)}
.error-msg{display:none;color:#A83A22;font-size:13.5px;margin:6px 0}
.sheet .error-msg{display:none}

/* ── เซ็ตสุดคุ้ม: การ์ดพัดปกแบบเว็บจริง + หน้าเซ็ตที่ดูรายละเอียดทุกเล่มได้ ── */
#setsView{margin-top:6px}
.set-card{cursor:pointer}
.page.sp-set .sp-body{max-width:860px}
.set-page .g-fan{border-radius:16px;margin-top:4px}
.set-page .g-setsum{margin:6px 0 10px}
.sb-list{display:flex;flex-direction:column;gap:10px}
.sb-row{display:grid;grid-template-columns:120px minmax(0,1fr);gap:14px;background:var(--paper);border-radius:var(--r);box-shadow:var(--sh-rest);padding:10px;cursor:pointer;transition:box-shadow var(--t-hover) var(--ease),transform var(--t-press) var(--ease)}
.sb-row:hover{box-shadow:var(--sh-lift)}
.sb-row:active{transform:scale(.99)}
.sb-img{position:relative;border-radius:10px;overflow:hidden;background:#F3EEF8;aspect-ratio:4/5}
.sb-img img{width:100%;height:100%;object-fit:cover;display:block}
.sb-img .photo-badge{position:absolute;left:6px;bottom:6px}
.sb-tx{display:flex;flex-direction:column;gap:3px;min-width:0;padding:2px 0}
.sb-n{font:600 15px/1.35 Sarabun,sans-serif;color:var(--ink)}
.sb-n i{font:500 13px Mitr,sans-serif;font-style:normal;color:var(--plum);background:var(--lilac);border-radius:8px;padding:1px 7px;margin-right:6px}
.sb-st{margin-left:6px;font:600 11.5px Sarabun,sans-serif;background:var(--amberbg);color:var(--amber);border-radius:8px;padding:1px 7px;vertical-align:1px}
.sb-m{font-size:13px;color:var(--ink2)}
.sb-df{font:600 13.5px Sarabun,sans-serif;color:#A83A22}
.sb-p{font:500 15px Mitr,sans-serif;color:var(--ink);margin-top:auto;padding-top:4px}
.sb-go{font:600 13.5px Sarabun,sans-serif;color:var(--plum)}
@media (min-width:700px){ .sb-row{grid-template-columns:170px minmax(0,1fr)} .sb-n{font-size:16px} }

/* ── หน้าเล่ม: สภาพ = ไม่มีกรอบ ตัวหนังสือแดงเข้ม · 4 ช่องหลัก = กล่องม่วงอ่อนแบบเว็บจริง ขนาดพอดี ── */
.page.bpage .condbox{background:none;border:0;box-shadow:none;padding:2px 0 0;gap:2px}
.page.bpage .condbox h2{font:500 15px Mitr,Sarabun,sans-serif;color:var(--ink2)}
.page.bpage .condbox ul{padding-left:18px;margin:0;line-height:1.65}
.page.bpage .condbox li{color:#A83A22;font:600 15.5px Sarabun,sans-serif}
.page.bpage .condbox li::marker{color:#A83A22}
.page.bpage .condbox li:last-child{color:var(--ink2);font-weight:400}
.page.bpage .condbox li:last-child::marker{color:var(--ink3)}
.page.bpage .condlink{color:var(--ink2);font:400 14.5px Sarabun,sans-serif;text-decoration:underline;text-decoration-color:var(--lilac2);text-underline-offset:3px}
.page.bpage .tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;flex:none}
.page.bpage .tiles .tile{background:var(--lilac);border:0;box-shadow:none;border-radius:12px;padding:10px 12px;min-height:72px;justify-content:flex-start;gap:2px}
.page.bpage .tile .tk{font:400 12.5px Sarabun,sans-serif;color:var(--ink2)}
.page.bpage .tile b{font:500 17px Mitr,Sarabun,sans-serif;color:var(--ink);margin:0;text-align:left}
.page.bpage .tile b small{display:block;font:400 12px Sarabun,sans-serif;color:var(--ink2);margin-top:1px}
.page.bpage .tile b.na{font:400 13.5px Sarabun,sans-serif;color:var(--ink3)}
@media (min-width:1024px){
  .page.bpage .tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
  .page.bpage .tiles .tile{min-height:76px}
}

/* ── ความน่าเชื่อถือ (แถบซ้ายคอม · ตะกร้า) + ท้ายเว็บ ── */
.g-trust{font-size:13px;color:var(--ink2);line-height:1.5;padding:10px 10px 4px}
.g-trust b{color:var(--ink);font-weight:600}
.side #gTrustSide{border-top:1px solid var(--line);margin-top:4px;padding:12px 10px 6px}
.page.spg .g-trust{padding:10px 2px 0;text-align:center}
.site-footer{margin-top:40px}
@media (max-width:1023px){ .site-footer{margin-bottom:calc(var(--bnav-h) + var(--safe-b))} }
.site-footer .ft-neo{max-width:var(--maxw);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.site-footer a,.site-footer a:hover{text-decoration:none}
.page .site-footer{display:none}
/* เว็บจริงซ่อน #setsView จนกว่าจะอยู่โหมดเซ็ต · เว็บใหม่ใช้แท็บ → แสดงเสมอเมื่ออยู่แท็บเซ็ต */
#setsView{display:block;max-width:none;padding:0 0 24px}
.g-fan2{width:100%;max-width:100%}
.set-page .g-fan2{min-height:0}
@media (min-width:700px){ .set-page .g-fan2{max-width:620px;margin:4px auto 0} }
/* หน้าเล่ม: กล่องข้อมูลร้าน (ส่งฟรี · รูปจริง · ความน่าเชื่อถือ · ถามได้) เติมช่องว่างให้ข้อมูลจบพอดีกับแถบรูปย่อ */
.shopbox{display:flex;flex-direction:column;justify-content:center;gap:10px;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:12px 14px;font-size:14px;color:var(--ink2);line-height:1.45}
.shopbox div{display:flex;align-items:flex-start;gap:10px}
.shopbox i{flex:none;width:30px;height:30px;border-radius:9px;background:var(--lilac);color:var(--plum);display:grid;place-items:center}
.shopbox i svg{width:17px;height:17px}
.shopbox b{color:var(--ink);font-weight:600}
@media (min-width:1024px){ .page.bpage .bp .shopbox{flex:1} }
.shopbox{gap:8px;padding:10px 12px;font-size:13.5px}
.shopbox i{width:26px;height:26px;border-radius:8px}
.shopbox i svg{width:15px;height:15px}
.page .sp .g-trust{padding:8px 0 0;text-align:left}

/* W1j · ตะกร้า: ปุ่มเลือกต่อข้างแถบส่งฟรี · ปุ่มจองไม่ยืดเต็มจอ แต่ใหญ่ กดง่าย */
.page.cartpg .fsgo{flex:none;display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:999px;border:1.5px solid var(--bloom-600,#6E3F8E);color:var(--bloom-600,#6E3F8E);background:#fff;font:600 13.5px/1 var(--f-head,'Mitr'),sans-serif;text-decoration:none;white-space:nowrap}
.page.cartpg .fsgo:hover{background:var(--bloom-50,#F6F0FA)}
.page.cartpg .fsgo:focus-visible{outline:3px solid var(--bloom-300,#C9A8E0);outline-offset:2px}
.page.cartpg .foot.ckfoot{align-items:center}
/* 20:16 · ปุ่มจองกว้างเท่าใบสรุป · เด่น น่ากด */
.page.cartpg .ckbtn{width:100%;max-width:calc(640px - 2 * var(--gut));min-height:58px;border-radius:16px;font:600 19px/1.2 var(--f-head,'Mitr'),sans-serif;letter-spacing:.2px;color:#fff;border:0;background:linear-gradient(180deg,#8150A6 0%,#6E3F8E 100%);box-shadow:0 8px 20px rgba(110,63,142,.32),inset 0 1px 0 rgba(255,255,255,.18);transition:transform .12s,box-shadow .12s}
.page.cartpg .ckbtn::after{content:'›';margin-left:10px;font-size:24px;line-height:1;transform:translateY(-1px)}
.page.cartpg .ckbtn:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(110,63,142,.38),inset 0 1px 0 rgba(255,255,255,.18)}
.page.cartpg .ckbtn:active{transform:translateY(1px);box-shadow:0 4px 10px rgba(110,63,142,.3)}
.page.cartpg .ckbtn:focus-visible{outline:3px solid var(--bloom-300,#C9A8E0);outline-offset:3px}

/* W1j · รูปเต็มจอเต็มจอจริง (ไม่มีแถบบนทับ) · เปลี่ยนรูปทันที ไม่เลื่อนไหล */
.lb{top:0;z-index:calc(var(--z-toast) + 5)}
.lb .lb-h{padding:calc(8px + var(--safe-t)) 0 8px}
.gal .track,.lb .lb-b{overflow-x:hidden;scroll-snap-type:none;scroll-behavior:auto;touch-action:pan-y pinch-zoom}
.lb .lb-b>div{touch-action:pan-y pinch-zoom}
/* 20:16 · ซูมรูปเต็มจอ */
.lb .lb-b,.lb .lb-b>div{touch-action:none}
.lb .lb-b>div{overflow:hidden}
.lb .lb-b img{cursor:zoom-in;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;will-change:transform}
.lb .lb-b.zoomed img{cursor:grab}.lb .lb-b.grabbing img{cursor:grabbing}
.lb .lbz{margin-left:auto;display:flex;align-items:center;gap:8px}
.lb .lbzh{font-size:13px;color:#C9BED6;white-space:nowrap}
.lb .lbz .ib{width:44px;height:44px;border-radius:999px;border:0;background:rgba(255,255,255,.14);color:#fff;font:500 24px/1 system-ui,sans-serif;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.lb .lbz .ib:hover{background:rgba(255,255,255,.24)}.lb .lbz .ib[disabled]{opacity:.3;cursor:default}
@media (max-width:480px){ .lb .lbzh{display:none} }
/* 20:18 · หน้าเล่ม: เครดิตหลายบรรทัดชิดขึ้น · สภาพเว้นระยะ เด่น แดงเข้มทุกบรรทัด (แม้ไม่มีตำหนิ) */
.page .bp .details .drow .dv{line-height:1.3;padding:7px 0}
.page.bpage .condbox{margin:12px 0 8px}
.page.bpage .condbox h2{color:#A83A22;font:600 16px Mitr,Sarabun,sans-serif}
.page.bpage .condbox li,.page.bpage .condbox li:last-child{color:#A83A22;font:600 15.5px Sarabun,sans-serif}
.page.bpage .condbox li::marker,.page.bpage .condbox li:last-child::marker{color:#A83A22}
.page.bpage .condbox .condlink{color:#A83A22;font:600 15.5px Sarabun,sans-serif;padding:0;text-decoration:underline;text-decoration-color:rgba(168,58,34,.35);text-underline-offset:3px}
.page.bpage .condbox .condlink:hover{text-decoration-color:#A83A22}
@media (min-width:1024px){ .page.bpage .bp .shopbox{gap:5px;padding:8px 12px} .page.bpage .bp .shopbox i{width:24px;height:24px;border-radius:7px} .page.bpage .bp .shopbox i svg{width:14px;height:14px} .page.bpage .bp .shopbox div{align-items:center} }