/* --- 1. ตั้งค่าพื้นฐาน (Base & Reset) --- */
body, html { 
    margin: 0 !important; 
    padding: 0 !important; 
    overflow-x: hidden; 
    background-color: #F8F4FF; 
    color: #4A3B6B; 
    font-family: 'Kanit', sans-serif; 
    -webkit-tap-highlight-color: transparent;
}
body { padding-bottom: 100px; }
.view-page { display: none; }
.view-page.active { display: block; }

/* --- 2. ส่วนหัว (Header) ทุกหน้า - เพรียวบาง + ขอบขาว + ติดหนึบ --- */
header, 
.view-page > div:first-child, 
.full-page-header,
#fullPageCategory > div:first-child {
    width: 100% !important; 
    margin: 0 !important; 
    padding: 25px 1.5rem !important; 
    border-radius: 0 0 40px 40px !important; 
    box-sizing: border-box;
    display: flex !important;
    align-items: center !important;    
    justify-content: center !important; 
    min-height: 65px !important;
    background: linear-gradient(to right, #E6E1FF, #F8F4FF) !important; 
    position: fixed !important; 
    top: 0; left: 0;
    z-index: 5100;
    border-bottom: 2px solid #FFFFFF !important; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

/* หน้าแรก Home สูงปกติเพื่อให้เห็นรูปโปรไฟล์ */
#page-home header {
    padding: 60px 1.5rem 40px !important;
    justify-content: flex-start !important; 
    position: relative !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* --- 3. ปุ่มเมนู Hamburger (3 ขีด) --- */
.fixed.top-5.left-5 {
    top: 15px !important; 
    left: 15px !important; 
    width: 48px !important; 
    height: 48px !important;
    background: rgba(255, 255, 255, 0.85) !important; 
    backdrop-filter: blur(10px);
    border: 1px solid rgba(193, 182, 255, 0.5) !important; 
    display: flex !important;
    align-items: center; justify-content: center; 
    color: #4A3B6B !important; 
    z-index: 6000 !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
}
/* --- 4. 🔥 แก้ความชิด: ดันเนื้อหาลงมาให้มองสบายตา (130px ทุกหน้า) --- */
main, 
.view-page > div:nth-child(2), 
#shop-content, 
#fullPageGrid,
#page-shop > div:nth-child(2) {
    padding: 130px 1.5rem 20px !important; 
    width: 100%; 
    box-sizing: border-box;
    position: relative;
    z-index: 10;
}
#page-home main { padding-top: 20px !important; }

/* --- 5. 🛠 แก้ปุ่มย้อนกลับ: ย้ายมาฝั่งขวาเพื่อไม่ให้โดน 3 ขีดทับ --- */
.full-page-header button, 
#page-sub-font button, 
#page-contact button {
    position: absolute !important;
    right: 20px !important; /* ย้ายมาขวา */
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: rgba(255, 255, 255, 0.7) !important;
    width: 42px !important; 
    height: 42px !important; 
    border-radius: 50% !important;
    display: flex !important; 
    align-items: center; 
    justify-content: center;
    z-index: 5200 !important;
    color: #4A3B6B !important;
    border: 1px solid white !important;
}

/* --- 6. เมนูข้าง (Drawer) คืนค่าแถวเดียว 100% --- */
.drawer { 
    position: fixed !important; top: 0 !important; left: -320px !important; 
    width: 300px !important; height: 100% !important; 
    background: white !important; z-index: 7000 !important; 
    transition: left 0.3s ease-out !important;
    border-right: 2px solid #C1B6FF; overflow-y: auto;
}
.drawer.active { left: 0 !important; }
#font-sub { display: none; flex-direction: column; padding: 5px 0; }
#font-sub.open { display: flex; }
.drawer button { width: 100%; display: flex !important; align-items: center; text-align: left; padding: 15px 20px; font-weight: bold; }

.overlay { 
    position: fixed; inset: 0; z-index: 6500; 
    background: rgba(53, 42, 80, 0.35); display: none; 
    backdrop-filter: blur(2px); 
}
.overlay.active { display: block !important; }
/* --- 7. การ์ดสินค้า (Item Card) & สไลเดอร์ (ของเดิมครบ) --- */
.item-card { 
    position: relative; overflow: hidden; transition: 0.3s; 
    border-radius: 30px; border: 2px solid #E6E1FF !important; 
    background: white !important;
}
.item-card.selected { border-color: #A488FF !important; background: rgba(193, 182, 255, 0.15) !important; }

.snap-slider { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; }
.snap-slider::-webkit-scrollbar { display: none; }
.snap-item { min-width: 100%; scroll-snap-align: start; aspect-ratio: 1 / 1; }

.badge-custom { position: absolute; top: 12px; left: -28px; color: white; padding: 2px 30px; font-size: 8px; font-weight: bold; transform: rotate(-45deg); z-index: 40; }
.badge-red { background: #FF4D4D; }

/* --- 8. 🎈 ระบบอิโมจิลอย (ดาว/หัวใจ วิ่งขึ้น - คืนชีพ 100%) --- */
.pt { 
    position: fixed !important; 
    pointer-events: none; 
    z-index: 1 !important; 
}
@keyframes ptUp { 
    0% { transform: translateY(110vh) rotate(0deg); opacity: 0; } 
    10% { opacity: 0.6; } 100% { transform: translateY(-10vh) rotate(360deg); opacity: 0; } 
}
.pt { animation: ptUp linear infinite; }

/* --- 9. แอนิเมชั่นอื่นๆ --- */
@keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } }
.animate-float { animation: float 4s ease-in-out infinite; }

#fullPageCategory { position: fixed; inset: 0; background: #F8F4FF; z-index: 5500; overflow-y: auto; display: none; }
body.modal-open { overflow: hidden; position: fixed; width: 100%; }

.menu-arrow { transition: 0.3s; }
.menu-arrow.rotate { transform: rotate(180deg); }