/* ============================================================================
   K'Sante : สไตล์เสริม (Micro-interactions) ที่ Tailwind utility ทำได้ไม่สะดวก
   ============================================================================ */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { background: #F8F9FA; color: #111318; -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid #1D4ED8; outline-offset: 2px; }

/* หัวข้อหลักของทุกหน้า: ตัวพิมพ์ใหญ่ หนา ชิด (ภาษาไทยไม่มีตัวพิมพ์ใหญ่ จึงไม่กระทบ) */
h1.font-display, h2.font-display { text-transform: uppercase; letter-spacing: -0.03em; }

/* ปุ่มทุกปุ่มยุบลงเล็กน้อยเมื่อกด */
.press { transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease; }
.press:active { transform: scale(.96); }

/* การ์ดสินค้า: ขอบเข้มขึ้น + เงานุ่มเมื่อ hover และรูปซูมเล็กน้อย */
.product-card { transition: border-color .25s ease, box-shadow .25s ease; }
.product-card:hover { border-color: rgba(17,19,24,.3); box-shadow: 0 12px 32px -16px rgba(17,19,24,.35); }
.product-card .pc-img { transition: transform .5s cubic-bezier(.2,.7,.2,1), opacity .25s ease; }
.product-card:hover .pc-img { transform: scale(1.04); }

/* Swatch สี: วงกลมขอบขาว เมื่อเลือกจะเป็นขอบดำและเด้งเล็กน้อย */
.swatch { width: 28px; height: 28px; border-radius: 9999px; border: 2px solid #fff; box-shadow: 0 0 0 1px #E4E6EB; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; cursor: pointer; }
.swatch:hover { transform: scale(1.12); }
.swatch[aria-pressed="true"] { border-color: #111318; box-shadow: none; animation: swatch-pop .38s cubic-bezier(.34,1.56,.64,1); }
.swatch-sm { width: 20px; height: 20px; }
@keyframes swatch-pop { 0% { transform: scale(.82) } 60% { transform: scale(1.12) } 100% { transform: scale(1) } }

/* จุดกะพริบบอกสถานะ "กำลังเปิดขาย" */
.pulse-dot { position: relative; }
.pulse-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 999px; background: currentColor; opacity: .25; animation: pulse 1.6s ease-out infinite; }
@keyframes pulse { 0% { transform: scale(.6); opacity: .45 } 100% { transform: scale(1.6); opacity: 0 } }

/* Cart Drawer เลื่อนออกจากด้านขวา */
.drawer { transform: translateX(100%); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.drawer.open { transform: translateX(0); }
.backdrop { opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.backdrop.open { opacity: 1; pointer-events: auto; }

/* หน้าต่าง Modal */
.modal-panel { animation: pop .22s cubic-bezier(.2,.8,.2,1); }
@keyframes pop { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.fade-in { animation: fade .35s ease both; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Toast แจ้งเตือน */
.toast { animation: toast-in .3s cubic-bezier(.2,.8,.2,1); }
@keyframes toast-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* Skeleton ระหว่างโหลดข้อมูล */
.skeleton { background: linear-gradient(90deg, #EEF0F3 25%, #F6F7F9 37%, #EEF0F3 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; }
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* แถบเตือนสต็อก */
.stock-bar { height: 6px; border-radius: 9999px; background: #EEF0F3; overflow: hidden; }
.stock-bar > span { display: block; height: 100%; border-radius: 9999px; transition: width .4s ease; }

/* Toggle switch (หน้าตั้งค่าคุกกี้) */
.switch { position: relative; width: 44px; height: 26px; flex-shrink: 0; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.switch span { position: absolute; inset: 0; border-radius: 9999px; background: #D5D9E0; transition: background .2s ease; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 9999px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .2s ease; }
.switch input:checked + span { background: #10B981; }
.switch input:checked + span::after { transform: translateX(18px); }
.switch input:disabled { cursor: not-allowed; }
.switch input:disabled + span { opacity: .6; }
.switch input:focus-visible + span { outline: 2px solid #1D4ED8; outline-offset: 2px; }

/* ตัวเลขแบบเท่ากัน ใช้กับราคา/ตาราง */
.tabular { font-variant-numeric: tabular-nums; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

/* เนื้อหาหน้า policy */
.prose-ks h2 { font-family: "Space Grotesk", "IBM Plex Sans Thai", sans-serif; font-weight: 700; font-size: 1.25rem; margin: 2rem 0 .75rem; }
.prose-ks h3 { font-weight: 700; margin: 1.25rem 0 .5rem; }
.prose-ks p, .prose-ks li { color: #4B5160; line-height: 1.8; font-size: .95rem; }
.prose-ks ul { list-style: disc; padding-left: 1.25rem; margin: .5rem 0; }
.prose-ks table { width: 100%; border-collapse: collapse; font-size: .875rem; margin: .75rem 0; }
.prose-ks th, .prose-ks td { border: 1px solid #E4E6EB; padding: .6rem .75rem; text-align: left; vertical-align: top; }
.prose-ks th { background: #EEF0F3; font-weight: 700; color: #111318; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* หัวข้อของกลุ่มฟอร์ม (legend) วางไว้ในการ์ด ไม่ทับเส้นขอบ */
fieldset > legend + * { clear: both; }