/* cart-drawer.css · LIFF cart drawer styles — served STATIC from /public * ⚠️ ทำไม public (ไม่ bundle): LiffCartDrawer ใช้ 2 island (LiffShop + GlobalCartDrawer) * ข้าม 2 layout (LiffLayout + Layout). Vite code-split/dedup ผูก scoped CSS ไว้ chunk * เดียว → อีกหน้าไม่โหลด → .drawer position:static มองไม่เห็น = "กดสั่งไม่ติด". * public + ใน ของทั้ง 2 layout = โหลดเสมอ deterministic (ไม่ขึ้น bundler). * 🔗 linked by: Layout.astro + LiffLayout.astro (single source · ไม่มี duplicate แล้ว) * class ไม่ชน (verified 0 collision) */ .backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 60; } .drawer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 61; background: #fff; border-radius: 20px 20px 0 0; max-height: 80vh; display: flex; flex-direction: column; font-family: var(--sans, 'Sarabun', system-ui, sans-serif); animation: slideup 0.25s ease-out; } @keyframes slideup { from { transform: translateY(100%); } to { transform: translateY(0); } } .dhead { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-bottom: 1px solid rgba(27,42,74,0.08); } .dhead h2 { font-family: var(--display, 'Cormorant Garamond', 'Playfair Display', serif); color: var(--cme-navy, #1b2a4a); font-size: 18px; margin: 0; } .x { background: none; border: none; font-size: 18px; color: var(--cme-muted, #5a6b8c); cursor: pointer; } .empty { padding: 40px 20px; text-align: center; color: var(--cme-muted, #5a6b8c); } .lines { overflow-y: auto; padding: 8px 20px; } .line { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid rgba(27,42,74,0.06); } .line img { width: 48px; height: 48px; object-fit: contain; } .ld { flex: 1; min-width: 0; } .ln { font-size: 13px; color: var(--cme-navy, #1b2a4a); } .lp { font-size: 13px; font-weight: 600; color: var(--cme-navy, #1b2a4a); } .qty { display: flex; align-items: center; gap: 8px; } .qty button { width: 26px; height: 26px; border: 1px solid rgba(27,42,74,0.16); background: #fff; border-radius: 50%; font-size: 15px; cursor: pointer; } .qty span { min-width: 18px; text-align: center; font-size: 14px; } .rm { background: none; border: none; cursor: pointer; font-size: 15px; } .dfoot { padding: 16px 20px 24px; border-top: 1px solid rgba(27,42,74,0.08); } .sub { display: flex; justify-content: space-between; margin-bottom: 12px; font-size: 15px; color: var(--cme-navy, #1b2a4a); } .checkout { width: 100%; padding: 14px; background: var(--cme-navy, #1b2a4a); color: #fff; border: none; border-radius: 999px; font-weight: 600; font-size: 15px; cursor: pointer; }