/* ============ Base ============ */
:root {
/* Color tokens — base */
--bg: #0f0f14;
--bg-2: #16161f;
--bg-3: #1e1e2a;
--border: #2a2a3a;
--border-strong: #3a3a4f;
--text: #e7e7ef;
--muted: #8b8ba0;
--primary: #a855f7;
--primary-dark: #7e22ce;
--accent: #a78bfa;
/* accordion หน้าสินค้า: สีประจำหัวข้อ */
--acc-receive: #5b9dff;
--acc-usage: #a855f7;
--acc-safety: #2dd4bf;
--brand-name-gradient: linear-gradient(135deg, #d8b4fe 0%, #c084fc 44%, #9f57e0 100%);
--search-hover-bg: rgba(19, 14, 31, .96);
--search-hover-border: rgba(164, 79, 255, .78);
--search-focus-border: rgba(205, 139, 255, .92);
--search-hover-shadow: 0 0 0 1px rgba(164, 79, 255, .34), 0 0 18px rgba(164, 79, 255, .32), inset 0 0 16px rgba(164, 79, 255, .08);
--search-focus-shadow: 0 0 0 1px rgba(205, 139, 255, .48), 0 0 24px rgba(164, 79, 255, .46), 0 8px 28px rgba(0, 0, 0, .28), inset 0 0 18px rgba(164, 79, 255, .1);
--search-icon-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238b8ba0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
--select-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238b8ba0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
--select-chevron-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23c4b5fd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E");
--discord: #5865F2;
--success: #22c55e;
--warn: #f59e0b;
--danger: #ef4444;
--scrollbar-track: rgba(12, 12, 18, .72);
--scrollbar-thumb: #3f3f49;
--scrollbar-thumb-hover: #52525d;
/* Color tokens — soft tints (สำหรับ pill/hover/selected backgrounds) */
--primary-soft: rgba(168, 85, 247, .12);
--primary-soft-hover: rgba(168, 85, 247, .18);
--accent-soft: rgba(167, 139, 250, .12);
--discord-soft: rgba(88, 101, 242, .15);
--success-soft: rgba(34, 197, 94, .14);
--warn-soft: rgba(245, 158, 11, .14);
--danger-soft: rgba(239, 68, 68, .14);
/* Typography scale */
--fs-xs: .75rem; /* 12px — captions, tiny labels */
--fs-sm: .85rem; /* 13.6px — secondary text */
--fs-base: 1rem; /* 16px — body */
--fs-md: 1.05rem; /* 16.8px — emphasized body */
--fs-lg: 1.15rem; /* 18.4px — small headings, hero sub */
--fs-xl: 1.4rem; /* 22.4px — h3 */
--fs-2xl: 1.75rem; /* 28px — h2 */
--fs-3xl: 2.25rem; /* 36px — h1 */
--fs-4xl: 3rem; /* 48px — hero */
--fw-normal: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 600;
--font-body: 'Anuphan', 'Prompt', 'Noto Sans Thai', 'Segoe UI', Tahoma, sans-serif;
--font-display: 'Kanit', 'Prompt', 'Noto Sans Thai', 'Segoe UI', Tahoma, sans-serif;
--lh-tight: 1.25;
--lh-normal: 1.55;
--lh-loose: 1.7;
/* Spacing scale (4px base unit) */
--space-1: .25rem; /* 4px */
--space-2: .5rem; /* 8px */
--space-3: .75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.5rem; /* 24px */
--space-6: 2rem; /* 32px */
--space-7: 3rem; /* 48px */
--space-8: 4rem; /* 64px */
/* Radius scale */
--radius-sm: 6px;
--radius: 12px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-full: 999px;
/* Shadow scale */
--shadow-xs: 0 1px 2px rgba(0,0,0,.2);
--shadow-sm: 0 2px 6px rgba(0,0,0,.25);
--shadow-md: 0 4px 14px rgba(0,0,0,.3);
--shadow-lg: 0 10px 30px rgba(0,0,0,.35);
--shadow-xl: 0 20px 50px rgba(0,0,0,.45);
--shadow-glow-primary: 0 6px 18px rgba(168,85,247,.35);
--shadow-glow-accent: 0 6px 18px rgba(167,139,250,.35);
--shadow: var(--shadow-lg); /* legacy alias */
/* Ink สำหรับเงา/พื้น-ขอบ tint ที่ hardcode rgba(0,0,0) — light จะ override ให้อมม่วงแทนดำ */
--shadow-ink: 0, 0, 0;
--tint-ink: 0, 0, 0;
/* Motion */
--ease-out: cubic-bezier(.2, .8, .2, 1);
--ease-spring: cubic-bezier(.34, 1.5, .64, 1);
--dur-fast: .12s;
--dur-base: .2s;
--dur-slow: .35s;
}
html[data-theme="light"] {
color-scheme: light;
--bg: #f8f6fc;
--bg-2: #ffffff;
--bg-3: #f9f6ff;
--border: #ded6ec;
--border-strong: #cbbfe0;
--text: #20182d;
--muted: #6f657d;
--primary: #8b45d6;
--primary-dark: #6f2dbd;
--accent: #7c5fd6;
--acc-receive: #2f6bd6;
--acc-usage: #8b45d6;
--acc-safety: #0f9e8c;
--brand-name-gradient: linear-gradient(135deg, #7c3aed 0%, #a855f7 48%, #d946ef 100%);
--search-hover-bg: rgba(255, 255, 255, .96);
--search-hover-border: rgba(139, 69, 214, .62);
--search-focus-border: rgba(139, 69, 214, .82);
--search-hover-shadow: 0 0 0 1px rgba(139, 69, 214, .22), 0 8px 22px rgba(78, 48, 112, .12), inset 0 0 14px rgba(139, 69, 214, .05);
--search-focus-shadow: 0 0 0 1px rgba(139, 69, 214, .32), 0 10px 28px rgba(78, 48, 112, .16), inset 0 0 16px rgba(139, 69, 214, .06);
--search-icon-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236f657d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
--select-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236f657d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
--select-chevron-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%237c5fd6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E");
--scrollbar-track: rgba(230, 224, 240, .72);
--scrollbar-thumb: #c4b5d8;
--scrollbar-thumb-hover: #a995c2;
--primary-soft: rgba(139, 69, 214, .1);
--primary-soft-hover: rgba(139, 69, 214, .16);
--accent-soft: rgba(124, 95, 214, .12);
--discord-soft: rgba(88, 101, 242, .12);
--success-soft: rgba(34, 197, 94, .12);
--warn-soft: rgba(245, 158, 11, .13);
--danger-soft: rgba(239, 68, 68, .12);
--shadow-xs: 0 1px 2px rgba(142, 122, 180, .08);
--shadow-sm: 0 2px 6px rgba(142, 122, 180, .09);
--shadow-md: 0 5px 16px rgba(142, 122, 180, .1);
--shadow-lg: 0 12px 30px rgba(142, 122, 180, .12);
--shadow-xl: 0 20px 46px rgba(142, 122, 180, .14);
/* light: เงาบางมาก โทนลาเวนเดอร์อ่อน — 83 จุดที่แปลงใน T0 (alpha เดิม dark) จะนุ่มลงพร้อมกัน */
--shadow-ink: 142, 122, 180;
--tint-ink: 60, 48, 82;
}
* { box-sizing: border-box; }
* {
scrollbar-width: thin;
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
*::-webkit-scrollbar {
width: 8px;
height: 8px;
}
*::-webkit-scrollbar-track {
background: var(--scrollbar-track);
border-radius: var(--radius-full);
}
*::-webkit-scrollbar-thumb {
background: var(--scrollbar-thumb);
border-radius: var(--radius-full);
}
*::-webkit-scrollbar-thumb:hover {
background: var(--scrollbar-thumb-hover);
}
html, body { margin: 0; padding: 0; }
html {
cursor: default;
/* -webkit-user-select: none;
user-select: none; */
}
body {
font-family: var(--font-body);
font-weight: 400;
background: var(--bg);
color: var(--text);
min-height: 100vh;
line-height: 1.55;
cursor: default;
}
/* หัวข้อใหญ่หน้าบ้าน (ไม่เกิน 500) */
.hero-v2-title,
.hero-v2-subtitle,
.hero-title,
.page-title,
.auth-title {
font-family: var(--font-display);
font-weight: 600;
}
body img {
-webkit-user-drag: none;
user-drag: none;
}
/* Page fade-in (subtle) */
main {
animation: page-fade-in .35s var(--ease-out);
}
@keyframes page-fade-in {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
main { animation: none; }
}
/* คลุมดำได้: ช่องกรอก | เนื้อหาที่มีคลาส .u-select-text (ชื่อสินค้า, บัญชี/อีเมล, รหัสออเดอร์) */
input,
textarea,
select {
-webkit-user-select: text;
user-select: text;
}
[contenteditable="true"] {
-webkit-user-select: text;
user-select: text;
}
.u-select-text {
-webkit-user-select: text;
user-select: text;
}
/* Cursor ทั้งไซต์: ข้อความทั่วไป = ลูกศร | I-beam เฉพาะช่องพิมพ์ | มือที่ปุ่ม/ลิงก์คลิกได้ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
input:not([type]),
textarea {
cursor: text;
}
[contenteditable="true"] {
cursor: text;
}
select,
input[type="file"],
input[type="checkbox"],
input[type="radio"],
input[type="range"],
input[type="color"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"] {
cursor: pointer;
}
a[href],
button:not(:disabled),
.btn,
[role="button"],
input[type="submit"]:not(:disabled),
input[type="button"]:not(:disabled),
input[type="reset"]:not(:disabled),
summary,
label,
.chip,
.nt-opt {
cursor: pointer;
}
button:disabled,
input:disabled,
textarea:disabled,
select:disabled,
.btn-disabled,
[aria-disabled="true"] {
cursor: pointer !important;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--primary); }
img { max-width: 100%; display: block; }
.muted { color: var(--muted); }
.small { font-size: .9rem; }
/* Global focus ring — keyboard navigation friendly, แสดงเฉพาะ keyboard ไม่โผล่ตอน mouse click */
:focus { outline: none; }
:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
button:focus-visible,
.btn:focus-visible,
.chip:focus-visible {
outline-offset: 3px;
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
outline: none; /* ใช้ border-color + box-shadow แทน (ดูใน .form-row และ .nav-search-inner) */
}
/* Password field wrapper (auto-wired by /js/password-toggle.js) */
.pw-field {
position: relative;
display: block;
}
.pw-field input {
padding-right: 44px !important; /* leave room for toggle btn */
width: 100%;
}
.pw-toggle-btn {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
width: 34px; height: 34px;
background: none;
border: 0;
border-radius: var(--radius-sm);
color: var(--muted);
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: color var(--dur-fast) ease, background var(--dur-fast) ease;
}
.pw-toggle-btn:hover {
color: var(--primary);
background: var(--primary-soft);
}
.pw-toggle-icon { display: block; }
.pw-toggle-btn .secret-icon {
display: inline-flex;
line-height: 0;
}
.pw-toggle-btn .secret-icon--hide,
.pw-toggle-btn.is-revealed .secret-icon--show {
display: none;
}
.pw-toggle-btn.is-revealed .secret-icon--hide {
display: inline-flex;
}
/* Password strength meter */
.pw-strength {
margin-top: var(--space-2);
display: flex; flex-direction: column; gap: var(--space-1);
}
.pw-strength__bars {
display: flex; gap: 4px;
}
.pw-strength__bar {
flex: 1;
height: 4px;
background: var(--bg-3);
border-radius: var(--radius-full);
transition: background var(--dur-base) ease;
}
.pw-strength[data-level="1"] .pw-strength__bar.is-on { background: var(--danger); }
.pw-strength[data-level="2"] .pw-strength__bar.is-on { background: var(--warn); }
.pw-strength[data-level="3"] .pw-strength__bar.is-on { background: #eab308; }
.pw-strength[data-level="4"] .pw-strength__bar.is-on { background: var(--success); }
.pw-strength__info {
display: flex; gap: var(--space-2); flex-wrap: wrap;
font-size: var(--fs-xs);
min-height: 1.2em;
}
.pw-strength__label { font-weight: var(--fw-semibold); }
.pw-strength[data-level="0"] .pw-strength__label,
.pw-strength[data-level="1"] .pw-strength__label { color: var(--danger); }
.pw-strength[data-level="2"] .pw-strength__label { color: var(--warn); }
.pw-strength[data-level="3"] .pw-strength__label { color: #eab308; }
.pw-strength[data-level="4"] .pw-strength__label { color: var(--success); }
.pw-strength__tips { color: var(--muted); }
/* Consistent input baseline (สำหรับ form ที่ไม่ได้ override styling) */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
textarea,
select {
font-family: inherit;
transition: border-color var(--dur-fast) ease, box-shadow var(--dur-base) ease, background var(--dur-fast) ease;
}
/* ปุ่ม/submit ไม่ inherit ฟอนต์เอง — บังคับให้ใช้ฟอนต์เว็บ (ไม่งั้นตกไปเป็นฟอนต์ระบบ) */
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
font-family: inherit;
}
/* Preserve the native option picker and keep the chevron visible in both states. */
select:not([multiple]):not([size]) {
-webkit-appearance: none;
appearance: none;
padding-right: 2.25rem !important;
background-image: var(--select-chevron-down) !important;
background-position: right .7rem center !important;
background-repeat: no-repeat !important;
background-size: 16px 16px !important;
}
select:not([multiple]):not([size]):open {
background-image: var(--select-chevron-up) !important;
}
input[type="number"] {
-moz-appearance: textfield;
appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="search"] {
-webkit-appearance: none;
appearance: none;
background-image: var(--search-icon-image);
background-position: .72rem 50%;
background-repeat: no-repeat;
background-size: 16px 16px;
padding-left: 2.2rem;
}
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
appearance: none;
display: none;
}
input::placeholder,
textarea::placeholder {
color: var(--muted);
opacity: 1;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px var(--primary-soft);
}
input[type="search"]:hover {
background-color: var(--search-hover-bg);
border-color: var(--search-hover-border);
box-shadow: var(--search-hover-shadow);
}
input[type="search"]:focus {
background-color: var(--search-hover-bg);
border-color: var(--search-focus-border);
box-shadow: var(--search-focus-shadow);
}
input[type="search"]::placeholder {
transition: color var(--dur-fast) ease;
}
input[type="search"]:hover::placeholder,
input[type="search"]:focus::placeholder {
color: var(--muted);
}
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-danger { color: var(--danger); }
.text-warn { color: var(--warn); }
.text-ok { color: var(--success); }
.u-m-0 { margin: 0; }
.u-mb-4 { margin-bottom: 1rem; }
.u-mt-1 { margin-top: .4rem; }
.u-mt-2 { margin-top: .6rem; }
.u-mt-3 { margin-top: 1rem; }
.u-mt-4 { margin-top: 1.2rem; }
.u-mt-5 { margin-top: 1.3rem; }
.u-mt-6 { margin-top: 1.5rem; }
.u-mt-7 { margin-top: 2rem; }
.u-mt-space-7 { margin-top: var(--space-7); }
.u-mt-neg-1 { margin-top: -.4rem; }
.u-mt-neg-2 { margin-top: -.5rem; }
.u-my-compact { margin: .4rem 0 .8rem; }
.u-inline { display: inline; }
.u-inline-offset { display: inline-block; margin-left: 8px; }
.u-flex-shrink-0 { flex-shrink: 0; }
.u-flex-wrap-gap { display: flex; gap: .6rem; flex-wrap: wrap; }
.u-flex-1-min-200 { flex: 1; min-width: 200px; }
.u-align-end { align-items: flex-end; }
.u-break-all { word-break: break-all; }
.u-w-36 { width: 36px; }
.u-w-48 { width: 48px; }
.u-w-60 { width: 60px; }
.u-w-100 { width: 100px; }
.u-w-160 { width: 160px; }
.u-w-180 { width: 180px; }
.u-w-full { width: 100%; }
.u-min-w-160 { min-width: 160px; }
.u-min-w-220 { min-width: 220px; }
.u-disabled-link { opacity: .4; cursor: not-allowed; }
.u-chrome-none { border: 0; background: transparent; }
.u-date-filter-label { display: flex; align-items: center; gap: .4rem; min-width: auto; }
.u-field-transparent { background: transparent; border: 0; color: var(--text); }
.u-text-normal-sm { font-weight: 400; font-size: .9rem; }
.hero-stat-icon--purple { color: #ad40eb; }
.hero-stat-icon--gold { color: #fbbf24; }
hr { border: 0; border-top: 1px solid var(--border); margin: 1rem 0; }
code { background: var(--bg-3); padding: 2px 6px; border-radius: 4px; font-size: .9em; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }
/* ============ Header ============ */
.site-header {
background: rgba(15,15,20,.85);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border);
position: sticky; top: 0; z-index: 100;
}
.header-inner {
display: grid;
grid-template-columns: auto auto minmax(0, 1fr);
align-items: center;
gap: 1rem;
padding: .7rem 1.25rem;
}
.header-left { display: flex; align-items: center; gap: 1.25rem; min-width: 0; }
.brand { display: flex; align-items: center; gap: .55rem; font-weight: 600; font-size: 1.2rem; flex-shrink: 0; }
.brand-logo {
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 32px;
filter: drop-shadow(0 0 12px rgba(168,85,247,.5));
}
.brand-logo img {
width: 100%;
height: 100%;
object-fit: contain;
}
.brand-text {
font-family: 'Chakra Petch', var(--font-display);
font-weight: 700;
background: var(--brand-name-gradient);
-webkit-background-clip: text; background-clip: text;
color: transparent;
}
/* Center main nav (Home / Products) */
.main-nav {
display: flex; gap: 1.5rem; align-items: center;
justify-content: center;
justify-self: center;
}
.main-nav > a,
.nav-category-dropdown__summary {
color: var(--muted); font-weight: 500; transition: color var(--dur-fast) ease, text-shadow var(--dur-fast) ease;
font-size: .95rem; padding: .35rem .55rem;
position: relative;
}
.main-nav > a:hover,
.main-nav > a:focus-visible,
.nav-category-dropdown[open] > .nav-category-dropdown__summary,
.nav-category-dropdown__summary:hover,
.nav-category-dropdown__summary:focus-visible {
color: #c084fc;
text-shadow: 0 0 14px rgba(192, 132, 252, .34);
}
.main-nav > a::after,
.nav-category-dropdown__summary::after {
content: ""; position: absolute; left: 50%; bottom: -4px;
width: 0; height: 2px;
background: linear-gradient(135deg, var(--primary), var(--accent));
border-radius: 2px;
transform: translateX(-50%);
transition: width .2s ease;
}
.main-nav > a:hover::after,
.main-nav > a:focus-visible::after,
.nav-category-dropdown[open] > .nav-category-dropdown__summary::after,
.nav-category-dropdown__summary:hover::after,
.nav-category-dropdown__summary:focus-visible::after {
width: 70%;
}
/* แถบประกาศ Quest AUTO เหนือ header — เฉพาะมือถือ (desktop เห็นเมนู + badge NEW บน nav อยู่แล้ว) */
.quest-announce { display: none; }
html[data-quest-announce="off"] .quest-announce { display: none !important; }
/* ป้าย NEW ท้ายเมนู — span จริง ไม่ใช่ ::after เพราะ ::after ถูกใช้ทำเส้นขีดใต้ตอน hover แล้ว */
.nav-badge-new {
margin-left: .35rem;
background: linear-gradient(135deg, var(--primary), var(--accent));
color: #fff;
font-size: .625rem; font-weight: var(--fw-bold);
letter-spacing: .04em;
padding: 1px 5px;
border-radius: var(--radius-full);
vertical-align: middle;
}
.nav-category-dropdown {
position: relative;
}
.nav-category-dropdown__summary {
list-style: none;
display: inline-flex;
align-items: center;
gap: .35rem;
cursor: pointer;
/* user-select: none; */
}
.nav-category-dropdown__summary::-webkit-details-marker {
display: none;
}
.nav-category-dropdown__summary .lucide {
transition: transform var(--dur-fast) ease;
}
.nav-category-dropdown[open] .nav-category-dropdown__summary .lucide {
transform: rotate(180deg);
}
.nav-category-dropdown__panel {
position: absolute;
top: calc(100% + .7rem);
left: 50%;
transform: translateX(-50%);
width: min(280px, calc(100vw - 2rem));
max-height: min(420px, calc(100vh - 6rem));
overflow-y: auto;
display: flex;
flex-direction: column;
gap: .18rem;
padding: .45rem;
background: rgba(22, 22, 31, .98);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
z-index: 160;
}
.nav-category-dropdown:not([open]) .nav-category-dropdown__panel {
display: none;
}
.nav-category-dropdown__panel::before {
content: "";
position: absolute;
top: -6px;
left: 50%;
width: 10px;
height: 10px;
transform: translateX(-50%) rotate(45deg);
background: rgba(22, 22, 31, .98);
border-left: 1px solid var(--border);
border-top: 1px solid var(--border);
}
.nav-category-dropdown__item {
position: relative;
display: flex;
align-items: center;
gap: .65rem;
min-height: 40px;
padding: .55rem .65rem;
border-radius: 10px;
color: var(--text);
font-size: .9rem;
font-weight: 500;
transition: background var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.nav-category-dropdown__item:hover,
.nav-category-dropdown__item:focus-visible {
background: var(--primary-soft);
color: var(--primary);
transform: translateX(2px);
}
.nav-category-dropdown__item-icon {
width: 24px;
height: 24px;
border-radius: 8px;
background: rgba(255,255,255,.06);
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 24px;
overflow: hidden;
color: var(--muted);
}
.nav-category-dropdown__item:hover .nav-category-dropdown__item-icon {
color: var(--primary);
background: var(--primary-soft);
}
.nav-category-dropdown__item-icon img {
width: 100%;
height: 100%;
object-fit: cover;
}
.nav-category-dropdown__emoji {
font-size: .95rem;
line-height: 1;
}
/* Right cluster: search + actions */
.header-right-cluster {
display: flex; align-items: center; gap: clamp(2rem, 3vw, 3.75rem);
justify-self: end;
width: 100%;
min-width: 0;
padding-left: clamp(.75rem, 1.5vw, 1.5rem);
}
.nav-search-wrap {
display: flex; justify-content: flex-end;
flex: 0 1 480px; min-width: 0;
position: relative;
}
.nav-search { width: 100%; max-width: 720px; }
.nav-search-inner {
display: flex; align-items: center; gap: .65rem;
width: 100%;
background: var(--bg-3); border: 1px solid var(--border);
border-radius: 999px;
padding: 0 1.05rem 0 .95rem;
transition: border-color var(--dur-fast) ease, box-shadow var(--dur-base) ease, background var(--dur-fast) ease;
}
.nav-search-inner:hover {
background: var(--search-hover-bg);
border-color: var(--search-hover-border);
box-shadow: var(--search-hover-shadow);
}
.nav-search-inner:focus-within {
background: var(--search-hover-bg);
border-color: var(--search-focus-border);
box-shadow: var(--search-focus-shadow);
}
.nav-search-icon {
display: flex; align-items: center; flex-shrink: 0;
color: var(--muted);
transition: color var(--dur-fast) ease, filter var(--dur-fast) ease;
}
.nav-search-inner:hover .nav-search-icon,
.nav-search-inner:focus-within .nav-search-icon {
color: #e1c4ff;
filter: drop-shadow(0 0 7px rgba(205, 139, 255, .6));
}
.nav-search input[type="search"] {
flex: 1; min-width: 0;
width: 100%;
background: transparent; border: 0;
background-image: none;
color: var(--text); padding: .5rem 0;
font-size: .92rem; font-family: inherit;
}
.nav-search input[type="search"]:hover,
.nav-search input[type="search"]:focus {
background: transparent;
outline: 0;
border-color: transparent;
box-shadow: none;
}
.nav-search input[type="search"]::-webkit-search-cancel-button,
.nav-search input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
appearance: none;
display: none;
}
.nav-search.is-live-searching .nav-search-inner {
border-color: var(--search-hover-border);
box-shadow: var(--search-hover-shadow);
}
.site-header .btn {
font-weight: 500;
}
.icon-svg { display: block; flex-shrink: 0; }
/* Lucide icon system — global rules */
.lucide {
display: inline-block;
vertical-align: -0.18em; /* baseline align with surrounding text */
flex-shrink: 0;
}
/* When inside flex containers (buttons/chips) — block + auto vertical-align */
.btn .lucide,
.chip .lucide,
.filter-btn .lucide,
.admin-sidebar nav a .lucide,
.admin-sidebar-logout button .lucide,
.mobile-drawer__nav a .lucide,
h1 .lucide, h2 .lucide, h3 .lucide, h4 .lucide {
vertical-align: middle;
}
/* color helpers */
.lucide.text-success { color: var(--success); }
.lucide.text-warn { color: var(--warn); }
.lucide.text-danger { color: var(--danger); }
.lucide.text-info { color: var(--accent); }
.lucide.text-muted { color: var(--muted); }
/* fill variant — for "filled" status icons */
.lucide.fill-current { fill: currentColor; stroke: none; }
.nav-cart-icon .icon-svg,
.wallet-mini .icon-svg { color: var(--text); opacity: .92; }
.header-right { display: flex; align-items: center; gap: .55rem; flex-shrink: 0; }
/* Cart — icon only with badge */
.nav-cart-icon {
position: relative;
display: inline-flex; align-items: center; justify-content: center;
width: 38px; height: 38px; border-radius: 50%;
background: var(--bg-3); border: 1px solid var(--border);
font-size: 1.1rem; transition: all .15s;
}
.nav-cart-icon:hover { border-color: var(--primary); transform: translateY(-1px); }
/* Theme toggle — icon-only circle, ก่อนกระดิ่งแจ้งเตือน */
.nav-theme-toggle {
position: relative;
display: inline-flex; align-items: center; justify-content: center;
width: 38px; height: 38px; border-radius: 50%;
background: var(--bg-3); border: 1px solid var(--border);
color: var(--text); cursor: pointer; flex-shrink: 0;
transition: border-color .15s ease, transform .15s ease, box-shadow .2s ease;
}
.nav-theme-toggle:hover { border-color: var(--primary); transform: translateY(-1px); }
.nav-theme-toggle .theme-icon { opacity: .92; }
.cart-icon { line-height: 0; display: flex; align-items: center; justify-content: center; }
.cart-badge {
position: absolute; top: -4px; right: -4px;
min-width: 18px; height: 18px; padding: 0 5px;
background: var(--primary); color: #fff;
border-radius: 999px; font-size: .68rem; font-weight: 600;
display: inline-flex; align-items: center; justify-content: center;
box-shadow: 0 0 0 2px var(--bg-1);
}
.cart-badge--zero {
display: none;
}
.cart-badge.is-updated {
animation: cart-badge-pop 0.55s cubic-bezier(0.34, 1.2, 0.64, 1);
}
@keyframes cart-badge-pop {
0% { transform: scale(1); }
40% { transform: scale(1.22); }
70% { transform: scale(0.96); }
100% { transform: scale(1); }
}
.nav-cart-icon.cart-icon-pulse {
animation: cart-icon-pulse 0.55s ease;
}
@keyframes cart-icon-pulse {
0%, 100% { transform: translateY(0); }
30% { transform: translateY(-2px) scale(1.06); }
55% { transform: translateY(0) scale(1.02); }
}
/* Toast — เพิ่มตะกร้าแบบไม่รีเฟรช */
.cart-toast-stack {
position: fixed;
bottom: 1.15rem;
right: 1.15rem;
z-index: 10050;
display: flex;
flex-direction: column;
gap: 0.5rem;
pointer-events: none;
max-width: min(380px, calc(100vw - 1.5rem));
}
.cart-toast {
pointer-events: auto;
display: flex;
align-items: flex-start;
gap: 0.65rem;
padding: 0.75rem 1rem;
background: var(--bg-2);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
color: var(--text);
font-size: 0.92rem;
line-height: 1.4;
animation: cart-toast-in 0.38s ease;
}
.cart-toast--error {
border-color: rgba(239, 68, 68, 0.45);
background: rgba(239, 68, 68, 0.08);
}
.cart-toast--warn {
border-color: rgba(245, 158, 11, 0.55);
background: rgba(245, 158, 11, 0.1);
}
.cart-toast--warn .cart-toast__icon {
color: var(--warn);
}
.cart-toast__icon {
flex-shrink: 0;
font-size: 1.15rem;
line-height: 1;
}
.cart-toast__msg {
min-width: 0;
word-break: break-word;
}
@keyframes cart-toast-in {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ===== Global toast (window.showToast) — ใช้ทั่วไซต์ ===== */
.toast-stack {
position: fixed;
bottom: 1.15rem;
right: 1.15rem;
z-index: 10050;
display: flex;
flex-direction: column;
gap: var(--space-2);
pointer-events: none;
max-width: min(420px, calc(100vw - 1.5rem));
}
.toast {
pointer-events: auto;
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
background: var(--bg-2);
border: 1px solid var(--border);
border-left: 4px solid var(--primary);
border-radius: var(--radius);
box-shadow: var(--shadow-md);
color: var(--text);
font-size: var(--fs-sm);
line-height: 1.45;
animation: toast-in .35s var(--ease-spring);
}
.toast--success { border-left-color: var(--success); background: linear-gradient(to right, var(--success-soft), var(--bg-2) 30%); }
.toast--error { border-left-color: var(--danger); background: linear-gradient(to right, var(--danger-soft), var(--bg-2) 30%); }
.toast--info { border-left-color: var(--accent); background: linear-gradient(to right, var(--accent-soft), var(--bg-2) 30%); }
.toast--warn { border-left-color: var(--warn); background: linear-gradient(to right, var(--warn-soft), var(--bg-2) 30%); }
.toast__icon { flex-shrink: 0; line-height: 1; display: inline-flex; align-items: center; }
.toast--success .toast__icon { color: var(--success); }
.toast--error .toast__icon { color: var(--danger); }
.toast--info .toast__icon { color: var(--accent); }
.toast--warn .toast__icon { color: var(--warn); }
.toast__msg { min-width: 0; word-break: break-word; flex: 1; }
.toast__close {
background: none; border: 0; color: var(--muted);
font-size: 1.4rem; line-height: 1; cursor: pointer;
padding: 0 .25rem; flex-shrink: 0;
transition: color var(--dur-fast) ease;
}
.toast__close:hover { color: var(--text); }
/* Light mode: การ์ดสีขาวล้วน (คงแถบสี + ไอคอนสีตามชนิดไว้) */
html[data-theme="light"] .toast,
html[data-theme="light"] .toast--success,
html[data-theme="light"] .toast--error,
html[data-theme="light"] .toast--info,
html[data-theme="light"] .toast--warn {
background: rgba(255, 255, 255, .82);
-webkit-backdrop-filter: blur(18px) saturate(180%);
backdrop-filter: blur(18px) saturate(180%);
}
@keyframes toast-in {
from { opacity: 0; transform: translateY(12px) scale(.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 1023px) {
.cart-toast-stack,
.toast-stack {
right: .6rem;
bottom: calc(78px + env(safe-area-inset-bottom, 0px));
gap: .4rem;
max-width: min(320px, calc(100vw - 1.2rem));
}
.cart-toast,
.toast {
gap: .45rem;
padding: .55rem .68rem;
border-radius: 10px;
box-shadow: var(--shadow-sm);
font-size: .76rem;
line-height: 1.34;
}
.toast {
border-left-width: 3px;
}
.cart-toast__icon {
font-size: .95rem;
}
.toast__icon .lucide {
width: 16px;
height: 16px;
}
.toast__close {
font-size: 1.05rem;
padding: 0 .1rem;
}
}
/* ===== Recent-purchase social-proof card (มุมล่างซ้าย) ===== */
.rp-toast {
position: fixed;
left: 1.15rem;
bottom: 1.15rem;
z-index: 10040;
display: flex;
flex-direction: column;
max-width: min(320px, calc(100vw - 2rem));
/* Glass — ดำแต่โปร่ง ให้พื้นหลังเบลอทะลุผ่าน */
background: linear-gradient(180deg, rgba(14, 14, 20, .6), rgba(3, 3, 6, .64));
-webkit-backdrop-filter: blur(18px) saturate(180%);
backdrop-filter: blur(18px) saturate(180%);
border: 1px solid rgba(255, 255, 255, .12);
box-shadow: 0 12px 34px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06);
border-radius: 8px;
overflow: hidden;
opacity: 0;
transform: translateY(14px);
transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.rp-toast.is-in { opacity: 1; transform: translateY(0); }
.rp-toast__main { display: flex; align-items: stretch; }
.rp-toast__link {
display: flex;
align-items: center;
gap: var(--space-3);
padding: .6rem .7rem;
color: inherit;
text-decoration: none;
min-width: 0;
flex: 1;
}
a.rp-toast__link:hover .rp-toast__name { color: var(--accent); }
.rp-toast__thumb {
flex-shrink: 0;
width: 42px;
height: 42px;
border-radius: 4px;
overflow: hidden;
background: var(--bg-3);
border: 1px solid var(--border);
}
.rp-toast__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rp-toast__body { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.rp-toast__label {
display: inline-flex;
align-items: center;
gap: .3rem;
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
color: var(--accent);
line-height: 1.3;
}
.rp-toast__label .lucide { width: 14px; height: 14px; }
/* badge ป้ายเล็ก: ซื้อ = เขียว · Quest AUTO = ม่วง (รูปแบบเดียวกัน ต่างแค่สี) */
.rp-toast__label.is-buy,
.rp-toast__label.is-quest {
color: #fff;
background: var(--success);
gap: .22rem;
font-size: 10px;
padding: .07rem .4rem;
border-radius: 999px;
align-self: flex-start;
}
.rp-toast__label.is-quest { background: var(--primary); }
.rp-toast__label.is-buy .lucide,
.rp-toast__label.is-quest .lucide { width: 11px; height: 11px; }
.rp-toast__name {
font-size: var(--fs-sm);
font-weight: var(--fw-normal);
color: #f1f1f4;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: color var(--dur-fast) ease;
}
.rp-toast__time { font-size: var(--fs-xs); color: rgba(255, 255, 255, .5); line-height: 1.3; }
.rp-toast__dismiss {
display: block;
width: 100%;
background: transparent;
border: 0;
border-top: 1px solid rgba(255, 255, 255, .08);
color: rgba(255, 255, 255, .4);
/* บางและเล็กกว่าทุกอย่างในการ์ด (fs-xs = .75rem) */
font-size: .66rem;
font-weight: var(--fw-normal);
letter-spacing: .2px;
text-align: center;
padding: .36rem;
cursor: pointer;
transition: color var(--dur-fast) ease, background var(--dur-fast) ease;
}
.rp-toast__dismiss:hover { color: rgba(255, 255, 255, .8); background: rgba(255, 255, 255, .05); }
@media (max-width: 1023px) {
.rp-toast {
left: .6rem;
bottom: calc(78px + env(safe-area-inset-bottom, 0px));
max-width: min(280px, calc(100vw - 1.2rem));
/* ปิด backdrop-filter บนมือถือ (หนักเครื่อง) แต่ใช้พื้นทึบตาม token
ไม่ fix เป็น #fff เพราะ storefront เป็น dark เป็นหลัก — token จะพลิกเองในโหมดสว่าง */
background: var(--bg-2);
-webkit-backdrop-filter: none;
backdrop-filter: none;
border-color: var(--border);
box-shadow: 0 6px 18px rgba(var(--shadow-ink), .26);
}
.rp-toast__name { color: var(--text); }
.rp-toast__time { color: var(--muted); }
.rp-toast__dismiss { color: var(--muted); border-top-color: var(--border); }
.rp-toast__dismiss:hover { color: var(--text); background: rgba(var(--shadow-ink), .06); }
.rp-toast__thumb { width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
.rp-toast { transition: opacity .2s ease; transform: none; }
.rp-toast.is-in { transform: none; }
}
/* Light mode: rp-toast เป็นกระจกขาวโปร่ง + blur เท่ากันทุกจอ — จางเท่า .toast
(base เป็น glass ดำ hardcode ไม่พลิกตาม token, มือถือ ≤1023 ก็ปิด blur ไว้ → specificity นี้ชนะทั้งคู่) */
html[data-theme="light"] .rp-toast {
background: rgba(255, 255, 255, .82);
-webkit-backdrop-filter: blur(18px) saturate(180%);
backdrop-filter: blur(18px) saturate(180%);
border-color: rgba(203, 191, 224, .82);
box-shadow: 0 12px 30px rgba(var(--shadow-ink), .18), inset 0 1px 0 rgba(255, 255, 255, .6);
}
html[data-theme="light"] .rp-toast__name { color: var(--text); }
html[data-theme="light"] .rp-toast__time { color: var(--muted); }
html[data-theme="light"] .rp-toast__dismiss { color: var(--muted); border-top-color: var(--border); }
html[data-theme="light"] .rp-toast__dismiss:hover { color: var(--text); background: rgba(var(--shadow-ink), .06); }
/* ===== Activity ticker — แถบวิ่งรายการซื้อ/Quest ล่าสุด (หน้าแรก) ===== */
.activity-ticker {
display: flex;
align-items: stretch;
margin: 0 0 var(--space-5);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
background: linear-gradient(180deg, rgba(var(--shadow-ink), .10), rgba(var(--shadow-ink), .04));
}
.activity-ticker__lead {
display: inline-flex;
align-items: center;
gap: .45rem;
flex-shrink: 0;
padding: .55rem .8rem .55rem .3rem;
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
letter-spacing: .3px;
color: var(--muted);
white-space: nowrap;
}
.activity-ticker__pulse {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--success);
animation: activity-pulse 1.8s ease-out infinite;
}
@keyframes activity-pulse {
0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .5); }
70% { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); }
100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
.activity-ticker__viewport {
position: relative;
flex: 1;
min-width: 0;
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.activity-ticker__track {
display: flex;
align-items: center;
width: max-content;
animation: activity-scroll 20s linear infinite;
}
.activity-ticker:hover .activity-ticker__track { animation-play-state: paused; }
@keyframes activity-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.activity-chip {
display: inline-flex;
align-items: center;
gap: .55rem;
padding: .5rem 2.1rem;
color: var(--muted);
text-decoration: none;
font-size: 11px;
white-space: nowrap;
}
.activity-chip__ico { font-size: 1.2em; }
.activity-chip__thumb {
flex-shrink: 0;
width: 52px;
height: 52px;
border-radius: 10px;
overflow: hidden;
display: inline-flex;
}
.activity-chip__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.activity-chip__text { display: flex; flex-direction: column; gap: 3px; line-height: 1.2; min-width: 0; }
.activity-chip__name { color: var(--text); font-weight: var(--fw-medium); font-size: 11px; }
.activity-chip:hover .activity-chip__name { color: var(--accent); }
.activity-chip__meta { color: var(--muted); font-size: 10px; }
.activity-chip__badges { display: inline-flex; align-items: center; gap: .3rem; margin-top: 1px; }
.activity-badge {
display: inline-flex;
align-items: center;
gap: .18rem;
font-size: 10px;
font-weight: var(--fw-semibold);
line-height: 1.3;
padding: .1rem .45rem;
border-radius: 999px;
white-space: nowrap;
}
.activity-badge svg { width: 11px; height: 11px; }
.activity-badge--sold { color: #fff; background: #ec4899; }
.activity-badge--price { color: #fff; background: rgba(168, 85, 247, .42); }
/* ===== แถบคำสั่งซื้อล่าสุด (variant A) — โหมด activity: ริบบิ้นม่วง + แถบเน้นซ้าย ===== */
.activity-ticker--orders {
position: relative;
border: 1px solid rgba(168, 85, 247, .16);
border-radius: 12px;
overflow: hidden;
background: linear-gradient(90deg, rgba(126, 34, 206, .20) 0%, rgba(22, 18, 38, .82) 30%, rgba(16, 16, 20, .9) 100%);
box-shadow: 0 8px 24px rgba(var(--shadow-ink), .28), inset 0 1px 0 rgba(255, 255, 255, .04);
}
.activity-ticker--orders::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 4px;
background: linear-gradient(180deg, #b78bf0, #9f57e0, #7e22ce);
box-shadow: 0 0 5px rgba(168, 85, 247, .25);
}
.activity-ticker--orders .activity-ticker__lead {
color: #fff;
padding-left: 1rem;
font-family: var(--font-display);
}
html[data-theme="light"] .activity-ticker--orders {
border-color: rgba(124, 95, 214, .22);
background: linear-gradient(90deg, rgba(168, 85, 247, .14) 0%, rgba(255, 255, 255, .72) 34%, var(--bg-2) 100%);
}
html[data-theme="light"] .activity-ticker--orders .activity-ticker__lead { color: var(--text); }
/* UPDATES mode — หัวแถบ megaphone (icon) + ป้ายวันที่ + วิ่งเร็วกว่า */
.activity-ticker__mega { display: inline-flex; align-items: center; }
.activity-ticker__mega svg { width: 16px; height: 16px; }
.activity-ticker--updates .activity-ticker__track { animation-duration: 12s; }
.activity-chip__msg { color: var(--text); font-weight: var(--fw-medium); }
.activity-chip__date {
flex-shrink: 0;
font-size: var(--fs-xs);
color: var(--muted);
background: color-mix(in srgb, var(--border) 45%, transparent);
padding: .08rem .45rem;
border-radius: 999px;
}
@media (max-width: 640px) {
.activity-ticker__lead { padding: .45rem .55rem; font-size: 11px; }
.activity-chip { padding: .4rem 1.1rem; gap: .45rem; }
.activity-chip__thumb { width: 40px; height: 40px; border-radius: 8px; }
.activity-chip__name { font-size: 10px; }
.activity-chip__meta { font-size: 9px; }
.activity-badge { font-size: 9px; padding: .06rem .38rem; }
.activity-badge svg { width: 10px; height: 10px; }
}
@media (prefers-reduced-motion: reduce) {
.activity-ticker__track { animation: none; }
.activity-ticker__pulse { animation: none; }
}
/* ===== Floating quick actions — desktop only ===== */
.quick-actions {
position: fixed;
right: clamp(.8rem, 1.6vw, 1.05rem);
bottom: calc(.9rem + env(safe-area-inset-bottom));
z-index: 9000;
width: 48px;
height: 48px;
}
.quick-actions__menu {
position: absolute;
right: calc(100% + .52rem);
bottom: calc(100% - .18rem);
display: grid;
gap: .42rem;
justify-items: end;
align-items: end;
transform-origin: right bottom;
}
.quick-actions__menu[hidden] {
display: none;
}
.quick-actions__item {
min-width: 158px;
min-height: 40px;
display: grid;
grid-template-columns: 34px minmax(0, 1fr);
align-items: center;
gap: .48rem;
padding: .32rem .72rem .32rem .32rem;
border: 1px solid rgba(148, 122, 212, .24);
border-radius: 999px;
background: linear-gradient(180deg, rgba(28, 24, 49, .96), rgba(18, 17, 37, .96));
color: var(--text);
box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 8px 18px rgba(var(--shadow-ink),.16), 0 0 0 1px rgba(109, 75, 192, .08);
font: inherit;
font-size: .86rem;
font-weight: 600;
text-align: left;
text-decoration: none;
cursor: pointer;
transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.quick-actions__item:hover,
.quick-actions__item:focus-visible {
outline: none;
border-color: rgba(185, 155, 245, .42);
background: linear-gradient(180deg, rgba(35, 29, 61, .98), rgba(22, 20, 43, .98));
color: #fff;
transform: translateX(-1px);
box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 0 3px rgba(168,85,247,.12), 0 10px 20px rgba(var(--shadow-ink),.2);
}
.quick-actions__item-icon {
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: #fff;
box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 4px 10px rgba(var(--shadow-ink),.2);
}
.quick-actions__item-icon--chat {
background: linear-gradient(135deg, #ec4899, #d946ef);
}
.quick-actions__item-icon--theme {
background: linear-gradient(135deg, #f59e0b, #fbbf24);
}
.quick-actions__item-icon .lucide {
flex: 0 0 auto;
width: 17px;
height: 17px;
}
.quick-actions__fab {
position: relative;
width: 42px;
height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255,255,255,.16);
border-radius: 50%;
background: linear-gradient(135deg, #6E47CE 0%, #9D6BE1 60%, #D39BE8 100%);
color: #fff;
box-shadow: 0 8px 18px rgba(78, 42, 138, .3), inset 0 1px 0 rgba(255,255,255,.18);
cursor: pointer;
overflow: hidden;
transition: transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease, filter var(--dur-fast) ease;
}
.quick-actions__fab:hover,
.quick-actions__fab:focus-visible {
outline: none;
transform: translateY(-1px);
filter: saturate(1.06);
box-shadow: 0 11px 22px rgba(78, 42, 138, .36), 0 0 0 3px rgba(168,85,247,.12), inset 0 1px 0 rgba(255,255,255,.2);
}
.quick-actions__fab-icon {
position: absolute;
width: 19px;
height: 19px;
opacity: 1;
transform: rotate(0deg) scale(1);
transition: opacity .22s ease, transform .24s cubic-bezier(.2,.8,.2,1);
}
.quick-actions__fab-icon--close {
width: 22px;
height: 22px;
opacity: 0;
transform: rotate(-120deg) scale(.55);
}
.quick-actions.is-open .quick-actions__fab {
transform: translateY(-1px) rotate(0);
}
.quick-actions.is-open .quick-actions__fab-icon--open {
opacity: 0;
transform: rotate(120deg) scale(.55);
}
.quick-actions.is-open .quick-actions__fab-icon--close {
opacity: 1;
transform: rotate(0deg) scale(1);
}
.quick-actions.is-open .quick-actions__menu {
animation: quick-actions-menu-in .18s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes quick-actions-menu-in {
from { opacity: 0; transform: translate(6px, 8px) scale(.96); }
to { opacity: 1; transform: translate(0, 0) scale(1); }
}
/* ===== AI Support Chat panel ===== */
.support-chat {
position: fixed;
right: clamp(.8rem, 1.6vw, 1.05rem);
bottom: calc(4.4rem + env(safe-area-inset-bottom));
z-index: 9001;
width: min(380px, calc(100vw - 1.6rem));
}
.support-chat[hidden] { display: none; }
.support-chat__panel {
display: flex;
flex-direction: column;
height: min(560px, calc(100vh - 8rem));
border: 1px solid var(--border-strong);
border-radius: 16px;
background: var(--bg-2);
box-shadow: 0 18px 48px rgba(var(--shadow-ink),.42), inset 0 1px 0 rgba(255,255,255,.04);
overflow: hidden;
}
.support-chat--open .support-chat__panel {
animation: support-chat-in .2s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes support-chat-in {
from { opacity: 0; transform: translateY(12px) scale(.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.support-chat__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: .7rem .9rem;
border-bottom: 1px solid var(--border);
background: linear-gradient(135deg, rgba(110,71,206,.22), rgba(168,85,247,.12));
}
.support-chat__title {
display: inline-flex;
align-items: center;
gap: .45rem;
font-weight: 600;
font-size: .95rem;
color: var(--text);
}
.support-chat__title-avatar {
width: 22px;
height: 22px;
border-radius: 50%;
object-fit: cover;
background: var(--bg-3);
}
.support-chat__actions {
display: inline-flex;
align-items: center;
gap: .15rem;
}
.support-chat__action {
display: inline-flex;
border: 0;
background: transparent;
color: var(--muted);
cursor: pointer;
padding: .2rem;
border-radius: 8px;
transition: color var(--dur-fast) ease, background var(--dur-fast) ease;
}
.support-chat__action:hover { color: var(--text); background: rgba(255,255,255,.06); }
.support-chat__action[data-support-chat-delete]:hover { color: var(--danger); }
/* แถบยืนยันก่อนลบประวัติ */
.support-chat__confirm {
display: flex;
align-items: center;
justify-content: space-between;
gap: .6rem;
padding: .5rem .9rem;
border-bottom: 1px solid var(--border);
background: rgba(239,68,68,.08);
font-size: .82rem;
color: var(--text);
}
.support-chat__confirm[hidden] { display: none; }
.support-chat__confirm-actions { display: inline-flex; gap: .4rem; flex: 0 0 auto; }
.support-chat__confirm-btn {
font: inherit;
font-size: .78rem;
font-weight: 600;
padding: .28rem .7rem;
border-radius: 8px;
cursor: pointer;
border: 1px solid var(--border);
transition: filter var(--dur-fast) ease, background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.support-chat__confirm-btn--cancel { background: transparent; color: var(--muted); }
.support-chat__confirm-btn--cancel:hover { color: var(--text); background: rgba(255,255,255,.06); }
.support-chat__confirm-btn--yes { background: var(--danger); color: #fff; border-color: transparent; }
.support-chat__confirm-btn--yes:hover { filter: brightness(1.08); }
.support-chat__messages {
flex: 1 1 auto;
overflow-y: auto;
padding: .9rem;
display: flex;
flex-direction: column;
gap: .55rem;
}
.support-chat__row {
display: flex;
align-items: flex-end;
gap: .45rem;
}
.support-chat__row--user { justify-content: flex-end; }
.support-chat__row--bot { justify-content: flex-start; align-items: flex-start; }
.support-chat__avatar {
flex: 0 0 auto;
width: 28px;
height: 28px;
border-radius: 50%;
object-fit: cover;
background: var(--bg-3);
border: 1px solid var(--border);
}
.support-chat__msg {
max-width: 80%;
padding: .55rem .75rem;
border-radius: 14px;
font-size: .87rem;
line-height: 1.55;
white-space: pre-wrap;
word-wrap: break-word;
overflow-wrap: anywhere;
}
.support-chat__msg--bot {
background: var(--bg-3);
color: var(--text);
border: 1px solid var(--border);
border-bottom-left-radius: 4px;
}
.support-chat__msg--bot a { color: var(--accent); text-decoration: underline; }
.support-chat__msg--user {
background: linear-gradient(135deg, #6E47CE, #9D6BE1);
color: #fff;
border-bottom-right-radius: 4px;
}
.support-chat__typing {
display: inline-flex;
gap: 4px;
align-items: center;
}
.support-chat__typing span {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--muted);
animation: support-chat-typing 1s infinite ease-in-out;
}
.support-chat__typing span:nth-child(2) { animation-delay: .15s; }
.support-chat__typing span:nth-child(3) { animation-delay: .3s; }
@keyframes support-chat-typing {
0%, 60%, 100% { opacity: .3; transform: translateY(0); }
30% { opacity: 1; transform: translateY(-3px); }
}
.support-chat__suggest {
display: flex;
flex-wrap: wrap;
gap: .4rem;
padding: .55rem .9rem;
border-top: 1px solid var(--border);
}
.support-chat__suggest[hidden] { display: none; }
.support-chat__chip {
font: inherit;
font-size: .78rem;
font-weight: 600;
color: var(--accent);
background: transparent;
cursor: pointer;
padding: .3rem .65rem;
border: 1px solid var(--border);
border-radius: 999px;
transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease, background var(--dur-fast) ease;
}
.support-chat__chip:hover {
border-color: var(--accent);
color: #fff;
background: rgba(168,85,247,.16);
}
.support-chat__form {
display: flex;
align-items: flex-end;
gap: .5rem;
padding: .65rem .8rem calc(.65rem + env(safe-area-inset-bottom));
border-top: 1px solid var(--border);
}
.support-chat__input {
flex: 1 1 auto;
resize: none;
max-height: 120px;
padding: .5rem .7rem;
border: 1px solid var(--border);
border-radius: 12px;
background: var(--bg-3);
color: var(--text);
font: inherit;
font-size: .87rem;
line-height: 1.4;
overflow-y: hidden; /* JS เปิด scrollbar เฉพาะตอนข้อความเกิน max-height */
}
.support-chat__input:focus {
outline: none;
border-color: var(--primary);
}
.support-chat__input:disabled { opacity: .6; }
.support-chat__send {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px; height: 40px;
border: 0;
border-radius: 12px;
background: linear-gradient(135deg, #6E47CE, #9D6BE1);
color: #fff;
cursor: pointer;
transition: filter var(--dur-fast) ease, opacity var(--dur-fast) ease;
}
.support-chat__send:hover { filter: saturate(1.1) brightness(1.05); }
.support-chat__send:disabled { opacity: .5; cursor: default; }
@media (max-width: 520px) {
.support-chat { left: .8rem; right: .8rem; width: auto; }
.support-chat__panel { height: min(70vh, calc(100vh - 7rem)); }
}
/* ===== Proactive nudge (โผล่ด้านซ้ายของปุ่มลอย) ===== */
.support-chat-nudge {
position: fixed;
right: calc(clamp(.8rem, 1.6vw, 1.05rem) + 48px + 1rem);
bottom: calc(.9rem + env(safe-area-inset-bottom));
z-index: 9000;
width: max-content;
max-width: min(260px, calc(100vw - 2.1rem - 48px - 1rem));
opacity: 0;
transform: translateY(8px) scale(.96);
transform-origin: right bottom;
transition: opacity .22s ease, transform .22s cubic-bezier(.2,.8,.2,1);
pointer-events: none;
}
.support-chat-nudge--show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.support-chat-nudge[hidden] { display: none; }
.support-chat-nudge__body {
display: flex;
align-items: center;
gap: .55rem;
text-align: left;
font: inherit;
cursor: pointer;
padding: .6rem .8rem;
border: 1px solid var(--border-strong);
border-radius: 14px;
border-bottom-right-radius: 4px;
background: var(--bg-2);
color: var(--text);
box-shadow: 0 12px 30px rgba(var(--shadow-ink),.32);
}
.support-chat-nudge__body:hover { border-color: var(--accent); }
.support-chat-nudge__avatar {
flex: 0 0 auto;
width: 30px; height: 30px;
border-radius: 50%;
object-fit: cover;
background: var(--bg-3);
}
.support-chat-nudge__text { font-size: .82rem; line-height: 1.4; }
.support-chat-nudge__close {
position: absolute;
top: -7px; right: -7px;
width: 22px; height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--border-strong);
border-radius: 50%;
background: var(--bg-3);
color: var(--muted);
cursor: pointer;
padding: 0;
}
.support-chat-nudge__close:hover { color: var(--text); }
@media (max-width: 1023px) {
/* มือถือ: ไม่มีปุ่มลอย (FAB) → วาง nudge ที่มุมขวาล่าง เหนือ bottom nav (66px)
ขนาด/หน้าตาเท่า desktop (สืบทอด padding/avatar/font จาก base) */
.support-chat-nudge {
right: clamp(.8rem, 3vw, 1.05rem);
bottom: calc(66px + .8rem + env(safe-area-inset-bottom, 0px));
max-width: min(260px, calc(100vw - 2.1rem));
}
}
[data-theme-toggle] .theme-icon {
display: none;
}
[data-theme-toggle][data-theme-current="dark"] .theme-icon--sun,
[data-theme-toggle][data-theme-current="light"] .theme-icon--moon {
display: inline-block;
}
html[data-theme="light"] .quick-actions__item {
background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(244,239,252,.98));
border-color: rgba(124,95,214,.18);
box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 8px 18px rgba(var(--shadow-ink),.09);
}
html[data-theme="light"] .quick-actions__item:hover,
html[data-theme="light"] .quick-actions__item:focus-visible {
background: linear-gradient(180deg, #ffffff, #f1ecfa);
border-color: rgba(124,95,214,.36);
color: var(--text);
box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 3px rgba(124,95,214,.1), 0 10px 20px rgba(var(--shadow-ink),.11);
}
@media (max-width: 1023px) {
.quick-actions {
display: none;
}
/* ===== Support chat = bottom sheet บนมือถือ (เปิดจากปุ่มแชทใน bottom nav) ===== */
/* ชีต + backdrop จบเหนือ bottom nav (สูง 72px) → nav ยังสว่างและกดสลับแท็บได้ */
.support-chat {
right: 0;
left: 0;
bottom: calc(66px + env(safe-area-inset-bottom, 0px)); /* = ความสูงจริงของ nav (52 + .45rem×2) */
top: 0;
width: auto;
z-index: 9100;
display: flex;
align-items: flex-end;
}
/* backdrop มืดบางๆ — แตะเพื่อปิด (จัดการใน support-chat.js) */
.support-chat::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, .5);
opacity: 0;
transition: opacity .28s ease;
}
.support-chat--open::before {
animation: support-sheet-backdrop-in .2s ease both;
}
/* ปัดปิด: ฉากหลังค่อยๆจางออกพร้อม panel (override animation ตอนเปิด) */
.support-chat--closing::before {
animation: none !important;
opacity: 0;
}
@keyframes support-sheet-backdrop-in {
from { opacity: 0; }
to { opacity: 1; }
}
.support-chat__panel {
position: relative;
width: 100%;
/* เว้นแถบมืดด้านบนเสมอ และไม่ล้นพื้นที่เหนือ nav */
height: min(80vh, calc(100vh - 66px - env(safe-area-inset-bottom, 0px) - 2rem));
border-radius: 18px 18px 0 0;
border-bottom: 0;
}
/* drag-handle (═══) ด้านบน — เป็นภาพบอกใบ้ว่าปัดได้ (ยังไม่ผูก gesture) */
.support-chat__panel::before {
content: "";
position: absolute;
top: 7px;
left: 50%;
transform: translateX(-50%);
width: 38px;
height: 4px;
border-radius: 999px;
background: var(--border-strong);
z-index: 1;
}
.support-chat__header {
padding-top: 1.05rem; /* เว้นที่ให้ drag-handle */
}
/* เลื่อนขึ้นจากล่างแทน fade เดิม — backwards (ไม่ใช่ both) ไม่งั้น keyframe จะค้าง
transform:translateY(0) override inline transform ตอนลาก/slide-down */
.support-chat--open .support-chat__panel {
animation: support-sheet-in .24s cubic-bezier(.2,.8,.2,1) backwards;
}
@keyframes support-sheet-in {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
html[data-theme="light"] .support-chat::before {
background: rgba(32, 24, 45, .4);
}
}
/* สกอร์บาร์บาง โทนเดียวกับเว็บ (ใช้ร่วมกับ checkout / wallet) */
.ui-scrollbar {
scrollbar-width: thin;
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
.ui-scrollbar::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.ui-scrollbar::-webkit-scrollbar-track {
background: var(--scrollbar-track);
border-radius: var(--radius-full);
}
.ui-scrollbar::-webkit-scrollbar-thumb {
background: var(--scrollbar-thumb);
border-radius: var(--radius-full);
}
.ui-scrollbar::-webkit-scrollbar-thumb:hover {
background: var(--scrollbar-thumb-hover);
}
/* Wallet - compact angular chip */
.wallet-cluster {
display: inline-flex;
align-items: center;
min-height: 34px;
background: rgba(168, 85, 247, .08);
border: 1px solid rgba(168, 85, 247, .24);
border-radius: 8px;
overflow: hidden;
padding-right: 0;
box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.wallet-cluster:hover {
background: rgba(168, 85, 247, .12);
border-color: rgba(216, 180, 254, .46);
transform: translateY(-1px);
}
.wallet-mini {
display: inline-flex;
align-items: center;
min-height: 34px;
padding: .38rem .68rem .38rem .82rem;
font-size: .85rem;
font-weight: 600;
text-decoration: none;
}
.wallet-amount-mini { color: #ffffff; white-space: nowrap; }
.wallet-topup-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
min-height: 34px;
margin: 0;
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
border-radius: 0;
color: #fff !important;
font-size: 1.1rem;
text-decoration: none;
transition: background var(--dur-fast) ease, filter var(--dur-fast) ease;
}
.wallet-topup-btn:hover {
filter: brightness(1.1);
color: #fff;
}
/* User — avatar + ไอคอนเมนู (chevron) */
.user-chip-block {
display: inline-flex; align-items: center;
}
.user-chip {
display: inline-flex; align-items: center; justify-content: center;
position: relative; cursor: pointer;
}
.user-chip.avatar-only {
width: 36px; height: 36px; padding: 0;
background: var(--bg-3); border: 1px solid var(--border);
border-radius: 50%; transition: border-color .15s, transform .15s;
}
.user-chip.avatar-only:hover { border-color: var(--primary); transform: translateY(-1px); }
.user-chip img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.avatar-fallback {
width: 100%; height: 100%; border-radius: 50%;
background: linear-gradient(135deg, var(--primary), var(--accent));
display: inline-flex;
align-items: center; justify-content: center; color: #fff;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}
.avatar-fallback__letter {
font-family: var(--font-display);
font-size: .92rem;
font-weight: 600;
line-height: 1;
}
.user-chip-menu-indicator {
position: absolute; right: -1px; bottom: -1px;
width: 14px; height: 14px; border-radius: 50%;
background: var(--bg-2); border: 1px solid var(--border);
display: flex; align-items: center; justify-content: center;
color: var(--muted); line-height: 0;
pointer-events: none;
}
.user-chip-menu-indicator .icon-svg {
transition: transform var(--dur-fast) ease;
}
.user-chip.avatar-only:hover .user-chip-menu-indicator { border-color: var(--primary); color: var(--text); }
.user-chip.avatar-only:hover .user-chip-menu-indicator .icon-svg,
.user-chip.avatar-only:focus-within .user-chip-menu-indicator .icon-svg {
transform: rotate(180deg);
}
.user-menu {
position: absolute; top: calc(100% + 8px); right: 0;
background: var(--bg-2); border: 1px solid var(--border);
border-radius: var(--radius-lg); padding: .4rem;
min-width: 200px; display: none; flex-direction: column;
box-shadow: var(--shadow); z-index: 10;
}
.user-chip:hover .user-menu, .user-chip:focus-within .user-menu { display: flex; }
.user-menu-name {
padding: .55rem .8rem .35rem; font-weight: 600;
color: var(--text); font-size: .92rem;
border-bottom: 1px solid var(--border); margin-bottom: .25rem;
}
.user-menu a,
.user-menu-theme,
.user-menu-logout button {
display: flex; align-items: center; gap: .55rem;
padding: .5rem .8rem; border-radius: 9px;
color: var(--text); font-size: .92rem;
}
.user-menu-logout { margin: 0; }
.user-menu-theme,
.user-menu-logout button {
width: 100%;
border: 0;
background: transparent;
font: inherit;
cursor: pointer;
}
.user-menu a:hover,
.user-menu-theme:hover,
.user-menu-logout button:hover { background: var(--bg-3); color: var(--primary); }
.user-menu-icon { flex-shrink: 0; color: var(--muted); }
.user-menu a:hover .user-menu-icon,
.user-menu-theme:hover .user-menu-icon,
.user-menu-logout button:hover .user-menu-icon { color: var(--primary); }
.theme-toggle--drawer {
gap: .45rem;
justify-content: center;
}
.theme-icon[hidden] {
display: none !important;
}
.mobile-toggle {
display: none; align-items: center; justify-content: center;
background: transparent; color: var(--text); border: 0;
padding: .25rem; cursor: pointer; line-height: 0;
}
.mobile-toggle:hover { color: var(--primary); }
/* Storefront mobile mode ทั้งชุดสลับที่ ≤1023 (1024 ขึ้นไป = desktop): hamburger + search เต็มกว้าง + drawer + bottom-nav + chat/toast
821–1023 ช่องเสิร์ช desktop ถูกบีบจนใช้ไม่ได้ จึงเป็น mobile ทั้งหมด (bottom-nav มาด้วย ตามที่ผู้ใช้เลือก) */
@media (max-width: 1023px) {
.header-inner {
grid-template-columns: auto 1fr auto;
gap: .5rem;
padding: .55rem .85rem;
}
.main-nav { display: none; }
/* เมนูหลักถูกซ่อนบนมือถือ → เมนูเควสไปอยู่ในลิ้นชักแฮมเบอร์เกอร์ ผู้ใช้เลยไม่เห็น
แถบนี้จึงเป็นทางเดียวที่ประกาศของใหม่ให้เห็นทันทีโดยไม่ต้องกดอะไรก่อน */
.quest-announce {
display: block;
background: linear-gradient(135deg, var(--primary), var(--accent));
color: #fff;
}
.quest-announce__row {
display: flex; align-items: center; gap: .5rem;
padding: .5rem .85rem;
font-size: var(--fs-sm); font-weight: 500;
}
.quest-announce__link {
display: flex; align-items: center; gap: .4rem;
color: #fff; flex: 1; min-width: 0;
}
.quest-announce__link:hover { color: #fff; }
.quest-announce__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quest-announce__tag {
background: rgba(255, 255, 255, .22);
font-size: 9px; font-weight: var(--fw-bold); letter-spacing: .04em;
padding: 1px 5px; border-radius: var(--radius-full);
flex-shrink: 0;
}
.quest-announce__close {
background: transparent; border: 0; color: #fff;
font-size: 18px; line-height: 1; padding: 0 .25rem;
flex-shrink: 0; opacity: .85;
}
.header-left {
min-width: 0;
}
.header-right-cluster {
justify-self: stretch;
justify-content: flex-end;
gap: .45rem;
padding-left: 0;
}
.nav-search-wrap { flex: 1 1 auto; }
.header-right {
min-width: 0;
gap: .45rem;
}
.mobile-toggle {
display: inline-flex;
width: 38px;
height: 38px;
border: 1px solid var(--border);
border-radius: 50%;
background: var(--bg-3);
}
.site-header--guest .header-inner {
grid-template-columns: minmax(0, 1fr) auto auto;
}
.site-header--guest .brand {
max-width: 116px;
min-width: 0;
}
.site-header--guest .brand-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.site-header--guest .nav-search-wrap,
.site-header--guest .nav-cart-icon {
display: none;
}
.site-header--guest .header-right .btn-sm {
padding: .42rem .62rem;
font-size: .8rem;
white-space: nowrap;
}
.site-header--user .brand {
width: 36px;
height: 38px;
justify-content: center;
gap: 0;
}
.site-header--user .brand-text,
.site-header--user .nav-cart-icon,
.site-header--user .wallet-cluster,
.site-header--user .user-chip-block {
display: none;
}
.site-header--user .nav-search-wrap {
display: flex;
}
.site-header--user .nav-search-inner {
padding: 0 .7rem 0 .62rem;
}
.site-header--user .nav-search input[type="search"] {
padding: .48rem 0;
font-size: .86rem;
}
.site-header--user .customer-notif__btn {
width: 38px;
height: 38px;
}
}
/* ============ Mobile drawer ============ */
.mobile-drawer {
position: fixed; inset: 0;
z-index: 1500;
pointer-events: none;
}
.mobile-drawer[hidden] { display: none; }
.mobile-drawer.is-open { pointer-events: auto; }
.mobile-drawer__backdrop {
position: absolute; inset: 0;
background: rgba(0,0,0,.6);
backdrop-filter: blur(3px);
opacity: 0;
transition: opacity var(--dur-base) ease;
}
.mobile-drawer.is-open .mobile-drawer__backdrop {
opacity: 1;
}
.mobile-drawer__panel {
position: absolute; top: 0; left: 0; bottom: 0;
width: min(320px, 86vw);
background: var(--bg-2);
border-right: 1px solid var(--border);
box-shadow: 8px 0 30px rgba(var(--shadow-ink),.5);
display: flex; flex-direction: column;
transform: translateX(-100%);
transition: transform .3s var(--ease-out);
overflow-y: auto;
}
.mobile-drawer.is-open .mobile-drawer__panel {
transform: translateX(0);
}
.mobile-drawer__head {
display: flex; align-items: center; justify-content: space-between;
padding: var(--space-4) var(--space-5);
border-bottom: 1px solid var(--border);
}
.mobile-drawer__head .brand { font-size: var(--fs-lg); }
.mobile-drawer__close {
width: 36px; height: 36px;
background: var(--bg-3); border: 1px solid var(--border);
border-radius: 50%;
color: var(--text);
font-size: 1.4rem; line-height: 1; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: background var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.mobile-drawer__close:hover {
background: var(--danger-soft); color: var(--danger);
transform: rotate(90deg);
}
.mobile-drawer__user {
display: flex; align-items: center; gap: var(--space-3);
padding: var(--space-4) var(--space-5);
background: linear-gradient(135deg, var(--primary-soft), var(--accent-soft));
border-bottom: 1px solid var(--border);
}
.mobile-drawer__avatar {
width: 44px; height: 44px;
border-radius: 50%;
background: var(--bg-3);
display: flex; align-items: center; justify-content: center;
overflow: hidden;
font-size: 1.4rem;
flex-shrink: 0;
border: 2px solid var(--primary);
}
.mobile-drawer__avatar img { width: 100%; height: 100%; object-fit: cover; }
.mobile-drawer__user-name {
font-weight: var(--fw-semibold);
color: var(--text);
}
.mobile-drawer__user-balance {
color: var(--muted); font-size: var(--fs-sm);
}
.mobile-drawer__user-balance strong { color: var(--success); }
.mobile-drawer__nav {
display: flex; flex-direction: column;
padding: var(--space-3) var(--space-3);
}
.mobile-drawer__nav a {
display: flex; align-items: center; gap: var(--space-3);
padding: var(--space-3) var(--space-4);
color: var(--text);
border-radius: var(--radius);
transition: background var(--dur-fast) ease;
}
.mobile-drawer__nav a:hover {
background: var(--primary-soft);
color: var(--primary);
}
.mobile-drawer__nav a > .lucide {
flex-shrink: 0;
color: var(--muted);
transition: color var(--dur-fast) ease;
}
.mobile-drawer__nav a:hover > .lucide { color: var(--primary); }
.mobile-category-menu {
margin: 0;
}
.mobile-category-menu summary {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
color: var(--text);
border-radius: var(--radius);
list-style: none;
cursor: pointer;
transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.mobile-category-menu summary::-webkit-details-marker {
display: none;
}
.mobile-category-menu summary:hover,
.mobile-category-menu[open] summary {
background: var(--primary-soft);
color: var(--primary);
}
.mobile-category-menu summary > .lucide:first-child {
color: var(--muted);
}
.mobile-category-menu[open] summary > .lucide:first-child,
.mobile-category-menu summary:hover > .lucide:first-child {
color: var(--primary);
}
.mobile-category-menu__chevron {
margin-left: auto;
transition: transform var(--dur-fast) ease;
}
.mobile-category-menu[open] .mobile-category-menu__chevron {
transform: rotate(180deg);
}
.mobile-category-menu__list {
display: flex;
flex-direction: column;
gap: 2px;
margin: 2px 0 4px 1.75rem;
padding-left: .45rem;
border-left: 1px solid var(--border);
}
.mobile-category-menu__list a {
padding: .55rem .75rem;
border-radius: 9px;
font-size: var(--fs-sm);
}
.mobile-category-menu__image,
.mobile-category-menu__emoji {
width: 22px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 22px;
}
.mobile-category-menu__image {
overflow: hidden;
border-radius: 7px;
background: rgba(255,255,255,.06);
}
.mobile-category-menu__image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.mobile-drawer__badge {
margin-left: auto;
background: var(--primary);
color: #fff;
border-radius: var(--radius-full);
font-size: var(--fs-xs); font-weight: var(--fw-bold);
padding: 2px 8px;
min-width: 20px;
text-align: center;
}
.mobile-drawer__nav--secondary a {
color: var(--muted);
font-size: var(--fs-sm);
}
.mobile-drawer__sep {
height: 1px;
background: var(--border);
margin: 0 var(--space-5);
}
.mobile-drawer__foot {
margin-top: auto;
padding: var(--space-4) var(--space-5);
border-top: 1px solid var(--border);
display: flex; flex-direction: column; gap: var(--space-2);
}
.mobile-logout-form { margin: 0; }
.mobile-logout-form button { width: 100%; font: inherit; }
/* lock body scroll when drawer open */
body.drawer-open {
overflow: hidden;
}
/* hide drawer ที่ desktop (>720px) แม้จะมี is-open */
@media (min-width: 1024px) {
.mobile-drawer { display: none !important; }
}
.mobile-bottom-nav {
display: none;
}
/* sticky footer: ดันให้ footer อยู่ล่างสุดเสมอเมื่อเนื้อหาสั้น (ทุกขนาดจอ) */
body:has(.mobile-bottom-nav) {
display: flex;
flex-direction: column;
min-height: 100dvh;
}
body:has(.mobile-bottom-nav) > main {
flex: 1 0 auto;
/* flex item ที่มี margin:auto จะหดเป็น shrink-to-fit — บังคับเต็มความกว้างไว้
แล้วปล่อยให้ max-width เดิมของ main (.container = 1200px) เป็นตัว cap เอง */
width: 100%;
}
@media (max-width: 1023px) {
/* มือถือ: เผื่อที่ให้ fixed bottom-nav + cap main กัน overflow แนวนอน
(main เป็น flex item: min-width:auto จะขยายตาม page-title/filter-bar ที่ไม่ wrap) */
body:has(.mobile-bottom-nav) {
padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px));
}
body:has(.mobile-bottom-nav) > main {
min-width: 0;
max-width: 100%;
}
.mobile-bottom-nav {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 1200;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0;
padding: .45rem .35rem calc(.45rem + env(safe-area-inset-bottom, 0px));
background: rgba(15, 15, 20, .94);
border-top: 1px solid var(--border);
backdrop-filter: blur(14px);
box-shadow: 0 -10px 28px rgba(var(--shadow-ink), .28);
}
.mobile-bottom-nav a,
.mobile-bottom-nav__chat {
position: relative;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: .2rem;
min-width: 0;
min-height: 52px;
border-radius: var(--radius);
color: var(--muted);
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
}
.mobile-bottom-nav__chat {
border: 0;
background: transparent;
font-family: inherit;
cursor: pointer;
}
.mobile-bottom-nav a.is-active,
.mobile-bottom-nav a:hover,
.mobile-bottom-nav__chat:hover {
color: var(--text);
background: var(--primary-soft);
}
.mobile-bottom-nav a.is-active .lucide {
color: var(--primary);
}
.mobile-bottom-nav__icon {
position: relative;
display: inline-flex;
line-height: 0;
}
.mobile-bottom-nav__badge {
position: absolute;
top: -8px;
right: -10px;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: var(--radius-full);
background: var(--primary);
color: #fff;
font-size: .68rem;
font-weight: var(--fw-bold);
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 0 2px var(--bg);
}
}
/* ============ Buttons ============ */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
padding: .7rem 1.3rem; border-radius: var(--radius);
font-weight: 600; font-family: inherit; font-size: 1rem;
border: 1px solid transparent; cursor: pointer;
transition: transform .15s, box-shadow .2s, background .2s;
text-decoration: none;
}
.btn:hover { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(0) scale(.97); transition-duration: 60ms; }
.btn-primary {
background: linear-gradient( 90deg, #6E47CE 0%, #9D6BE1 60%, #D39BE8 100% );
background-clip: padding-box;
color: #fff;
border: 1px solid rgba(255,255,255,.08);
box-shadow: none;
}
.btn-primary:hover {
background-image: linear-gradient(
90deg, #6E47CE 0%, #9D6BE1 50%, #D39BE8 100%
);
color: #fff;
box-shadow: 0 8px 18px rgba(139, 92, 246, .24), 0 0 12px rgba(216, 180, 254, .16);
}
.btn-ghost { background: var(--bg-3); color: var(--text); border-color: var(--border); }
.btn-ghost:hover { background: var(--border); color: var(--text); }
.btn-discord {
background: rgba(255,255,255,.95);
color: #111827;
box-shadow: none;
}
.btn-discord svg {
color: #5865F2;
}
.btn-discord:hover { background: rgba(255,255,255,.95); color: #111827; box-shadow: 0 6px 16px rgba(88,101,242,.24); }
.btn-google {
background: rgba(255,255,255,.96);
color: #111827;
border-color: rgba(255,255,255,.16);
box-shadow: none;
}
.btn-google:hover {
background: #fff;
color: #111827;
box-shadow: 0 6px 16px rgba(255,255,255,.08), 0 6px 16px rgba(var(--shadow-ink),.18);
}
.google-mark {
display: inline-block;
flex: 0 0 auto;
}
.icon-discord { display: inline-block; vertical-align: -3px; margin-right: 6px; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-disabled { background: var(--bg-3); color: var(--muted); cursor: not-allowed; }
.btn-sm { padding: .4rem .8rem; font-size: .88rem; }
.btn-lg { padding: .95rem 1.8rem; font-size: 1.05rem; }
.btn-block { width: 100%; }
.btn-rounded-full { border-radius: var(--radius-full); }
.btn-icon {
width: 2.25rem;
min-width: 2.25rem;
height: 2.25rem;
padding: 0;
}
.btn-icon.btn-sm {
width: 2rem;
min-width: 2rem;
height: 2rem;
padding: 0;
}
/* ============ Hero ============ */
.hero {
padding: 4rem 0 3rem;
background:
radial-gradient(800px 400px at 80% -20%, rgba(167,139,250,.3), transparent),
radial-gradient(600px 300px at 10% 0%, rgba(168,85,247,.25), transparent);
text-align: center;
overflow: hidden;
}
.hero-title {
font-size: clamp(2.2rem, 5vw, 3.5rem); margin: 0 0 1rem;
background: linear-gradient(135deg, var(--primary), var(--accent));
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-sub { font-size: 1.15rem; color: var(--muted); margin: .5rem 0; }
.hero-cta { display: flex; gap: 1rem; justify-content: center; margin-top: 1.5rem; flex-wrap: wrap; }
/* Homepage banner — placed in normal hero flow, constrained to content width */
.hero-banner-full {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
max-width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
background: var(--bg);
border: 1px solid rgba(255,255,255,.08);
border-radius: 14px;
line-height: 0;
}
.hero-banner-full::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(15,15,20,.48), rgba(15,15,20,.66)),
radial-gradient(circle at 50% 24%, rgba(15,15,20,.2), rgba(15,15,20,.72) 70%);
pointer-events: none;
}
.hero-banner-full img {
display: block;
width: 100%;
height: 100%;
margin: 0;
object-fit: cover;
border-radius: inherit;
transition: filter .3s ease;
}
.hero-banner-link {
display: block;
text-decoration: none;
line-height: 0;
border-radius: inherit;
height: 100%;
}
.hero-banner-link:hover img {
filter: brightness(1.05);
}
/* Split hero — text left, banner right */
.hero-split { padding: 3.5rem 0 3rem; text-align: left; }
.hero-grid {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
align-items: center;
gap: 2.5rem;
}
.hero-split .hero-title {
font-size: clamp(2rem, 4.4vw, 3.2rem);
line-height: 1.15;
margin: 0 0 1rem;
}
.hero-split .hero-sub { margin: .35rem 0; }
.hero-split .hero-cta {
justify-content: flex-start;
margin-top: 1.5rem;
align-items: center;
}
.hero-stat {
display: inline-flex; align-items: center; gap: .45rem;
color: var(--muted); font-size: .92rem;
}
.hero-stat-dot {
width: 8px; height: 8px; border-radius: 50%;
background: #22c55e;
box-shadow: 0 0 0 4px rgba(34,197,94,.15);
}
.hero-banner {
display: flex; justify-content: center; align-items: center;
position: relative;
}
.hero-banner img {
width: 100%; max-width: 520px; height: auto;
filter: drop-shadow(0 20px 40px rgba(88,101,242,.25)) drop-shadow(0 8px 24px rgba(168,85,247,.15));
animation: hero-float 6s ease-in-out infinite;
}
@keyframes hero-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
.hero-banner img { animation: none; }
}
@media (max-width: 820px) {
.hero-split { padding: 2.5rem 0 2rem; text-align: center; }
.hero-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.hero-split .hero-cta { justify-content: center; }
.hero-banner { order: -1; }
.hero-banner img { max-width: 360px; }
}
@media (max-width: 480px) {
.hero-banner img { max-width: 280px; }
}
/* ============ Products ============ */
.page-title { margin: 2rem 0 1.5rem; }
.section-title { margin: 2rem 0 1rem; }
@media (max-width: 720px) {
.section-title {
font-size: 1.28rem;
line-height: 1.28;
margin: 1.5rem 0 .8rem;
}
.section-title .lucide {
width: 18px;
height: 18px;
}
}
/* ===== Filter button + popover (Sprint E — replaces shop-toolbar) ===== */
.category-bar-wrap {
display: flex; align-items: center;
gap: var(--space-3);
margin-top: var(--space-4);
min-width: 0;
}
.category-bar-wrap > .category-bar {
flex: 1 1 auto;
margin-top: 0;
min-width: 0;
}
.filter-popover-wrap {
position: relative;
flex-shrink: 0;
}
.filter-btn {
display: inline-flex; align-items: center; gap: var(--space-2);
padding: var(--space-2) var(--space-4);
background: var(--bg-3);
border: 1px solid var(--border);
border-radius: var(--radius-full);
color: var(--text);
font-size: var(--fs-sm); font-weight: var(--fw-medium);
cursor: pointer;
transition: all var(--dur-fast) ease;
white-space: nowrap;
}
.filter-btn:hover {
border-color: var(--primary);
background: var(--primary-soft);
color: var(--primary);
}
.filter-btn.has-active {
background: var(--primary-soft);
border-color: var(--primary);
color: var(--primary);
}
.filter-btn[aria-expanded="true"] {
background: var(--primary-soft);
border-color: var(--primary);
color: var(--primary);
}
.filter-btn__icon { display: block; flex-shrink: 0; }
.filter-btn__badge {
display: inline-flex; align-items: center; justify-content: center;
min-width: 20px; height: 20px; padding: 0 6px;
background: var(--primary);
color: #fff;
border-radius: var(--radius-full);
font-size: var(--fs-xs); font-weight: var(--fw-bold);
margin-left: var(--space-1);
}
.filter-popover {
position: absolute;
top: calc(100% + var(--space-2));
right: 0;
min-width: 260px;
max-width: calc(100vw - 2rem);
background: var(--bg-2);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: 0 18px 50px rgba(var(--shadow-ink),.55);
z-index: 200;
overflow: hidden;
animation: filter-pop-in .18s var(--ease-out);
}
.filter-popover[hidden] { display: none; }
@keyframes filter-pop-in {
from { opacity: 0; transform: translateY(-6px) scale(.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.filter-popover__head {
display: flex; align-items: center; justify-content: space-between;
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--border);
background: var(--bg-3);
}
.filter-popover__close {
background: none; border: 0;
color: var(--muted);
font-size: 1.4rem; line-height: 1; cursor: pointer;
width: 28px; height: 28px;
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.filter-popover__close:hover {
background: var(--danger-soft);
color: var(--danger);
}
.filter-popover__section {
padding: var(--space-3) var(--space-2);
border-bottom: 1px solid var(--border);
}
.filter-popover__section:last-of-type { border-bottom: 0; }
.filter-popover__section-title {
color: var(--muted);
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
text-transform: uppercase;
letter-spacing: .04em;
padding: 0 var(--space-3);
margin-bottom: var(--space-2);
}
.filter-popover__options {
display: flex; flex-direction: column;
}
.filter-popover__opt {
display: flex; align-items: center; gap: var(--space-3);
padding: var(--space-2) var(--space-3);
border-radius: 10px;
color: var(--text);
text-decoration: none;
font-size: var(--fs-sm);
transition: background var(--dur-fast) ease;
}
.filter-popover__opt:hover {
background: var(--bg-3);
color: var(--text);
}
.filter-popover__opt.is-active {
background: var(--primary-soft);
color: var(--primary);
font-weight: var(--fw-semibold);
}
.filter-popover__opt-check {
display: inline-flex; align-items: center; justify-content: center;
width: 18px; height: 18px;
border-radius: 4px;
border: 1.5px solid var(--border);
background: var(--bg-3);
font-size: 11px; font-weight: var(--fw-bold);
color: transparent;
flex-shrink: 0;
transition: all var(--dur-fast) ease;
}
.filter-popover__opt.is-active .filter-popover__opt-check {
background: var(--primary);
border-color: var(--primary);
color: #fff;
}
.filter-popover__foot {
padding: var(--space-2) var(--space-3);
border-top: 1px solid var(--border);
background: var(--bg-3);
text-align: center;
}
.filter-popover__clear {
color: var(--muted);
font-size: var(--fs-sm);
padding: var(--space-2);
display: inline-block;
transition: color var(--dur-fast) ease;
}
.filter-popover__clear:hover { color: var(--primary); }
@media (max-width: 600px) {
.filter-btn__label { display: none; } /* แสดงแค่ icon บน mobile */
.filter-btn { padding: var(--space-2); width: 38px; height: 38px; justify-content: center; }
.filter-popover {
min-width: 240px;
right: 0;
}
}
@media (max-width: 620px) {
.product-grid:not(.product-grid--weekly-featured) {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .75rem;
}
.product-grid:not(.product-grid--weekly-featured) .product-body {
padding: .7rem .72rem .8rem;
gap: .28rem;
}
.product-grid:not(.product-grid--weekly-featured) .product-name {
font-size: .88rem;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.product-grid:not(.product-grid--weekly-featured) .product-footer {
align-items: flex-start;
flex-direction: column;
gap: .18rem;
padding-top: .35rem;
}
.product-grid:not(.product-grid--weekly-featured) .product-price {
font-size: 1rem;
}
.product-grid:not(.product-grid--weekly-featured) .product-stock {
font-size: .72rem;
line-height: 1.25;
}
.product-grid:not(.product-grid--weekly-featured) .product-tag {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
/* Featured section title — โดดเด่นกว่าปกติด้วย gradient + icon glow */
.section-title--featured {
display: flex; align-items: center; gap: var(--space-3);
margin-top: var(--space-6);
font-size: var(--fs-xl);
position: relative;
padding-bottom: var(--space-3);
}
.section-title--featured::after {
content: ""; position: absolute; bottom: 0; left: 0;
width: 64px; height: 3px;
background: linear-gradient(90deg, var(--primary), var(--accent));
border-radius: var(--radius-full);
}
.section-title-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 38px; height: 38px;
background: linear-gradient(135deg, var(--primary-soft), var(--accent-soft));
border: 1px solid rgba(168,85,247,.24);
border-radius: 50%;
font-size: 1.15rem;
box-shadow: 0 0 14px rgba(168,85,247,.16);
animation: none;
}
@keyframes featured-glow {
0%, 100% { box-shadow: 0 0 14px rgba(168,85,247,.16); }
50% { box-shadow: 0 0 18px rgba(168,85,247,.22); }
}
@media (prefers-reduced-motion: reduce) {
.section-title-icon { animation: none; }
}
/* Featured grid — เน้น visual: ขอบชมพูเรืองแสง slight scale on hover */
.product-grid--featured .product-card {
position: relative;
border: 1px solid rgba(168,85,247,.3);
background: linear-gradient(180deg, var(--primary-soft) 0%, var(--bg-2) 30%);
box-shadow: 0 4px 20px rgba(168,85,247,.12);
}
.product-grid--featured .product-card::before {
content: ""; position: absolute; inset: 0;
border-radius: inherit;
background: linear-gradient(135deg, transparent 60%, rgba(168,85,247,.08) 100%);
pointer-events: none;
z-index: 1;
}
.category-bar {
display: flex; gap: .45rem; overflow-x: auto; padding: .25rem .25rem .5rem;
margin-top: 1rem;
scrollbar-width: none;
-ms-overflow-style: none;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
cursor: grab;
}
.category-bar:active { cursor: grabbing; }
.category-bar::-webkit-scrollbar { display: none; height: 0; width: 0; }
.chip {
background: var(--bg-3); padding: .38rem .85rem; border-radius: 999px;
border: 1px solid var(--border); white-space: nowrap;
transition: all var(--dur-fast) var(--ease-out); font-size: .85rem; line-height: 1.2;
flex-shrink: 0;
}
.chip:hover, .chip.active {
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
color: #fff; border-color: transparent;
transform: translateY(-1px);
}
.chip:active:not(.active) { transform: translateY(0) scale(.96); transition-duration: 60ms; }
.product-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 1.25rem; margin-top: 1rem;
}
/* ===== แถบ "สินค้าแนะนำ" หน้าแรก: เลื่อนอัตโนมัติ (JS) + ปัด/ลากเองได้ ===== */
.product-marquee {
margin-top: 1rem;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/Edge เก่า */
overscroll-behavior-x: contain;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 2.5%, #000 97.5%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 2.5%, #000 97.5%, transparent 100%);
}
.product-marquee::-webkit-scrollbar { display: none; }
.product-marquee__track {
display: flex;
align-items: stretch;
gap: 1.25rem;
width: max-content;
/* เผื่อพื้นที่ให้เงา/การยกตอน hover ไม่โดน overflow ตัด */
padding: .45rem .15rem 1.25rem;
}
.product-marquee .product-card-wrap {
width: 240px;
flex: 0 0 240px;
}
@media (max-width: 620px) {
.product-marquee__track { gap: .85rem; }
.product-marquee .product-card-wrap { width: 165px; flex: 0 0 165px; }
}
/* หัวข้อของแต่ละแถวแนะนำหน้าแรก — แถวที่ 2 ขึ้นไปเว้นระยะจากแถวก่อนหน้า */
.home-row-heading + .product-marquee { margin-top: .5rem; }
.product-marquee + .home-row-heading { margin-top: 1.5rem; }
.product-card {
background: var(--bg-2); border: 1px solid var(--border);
border-radius: var(--radius); overflow: hidden;
transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) ease, box-shadow var(--dur-base) ease;
display: flex; flex-direction: column;
}
.product-card:hover {
transform: translateY(-4px); border-color: var(--primary);
box-shadow: 0 12px 30px rgba(168,85,247,.2);
}
.product-card:active {
transform: translateY(-2px) scale(.99);
transition-duration: var(--dur-fast);
}
.product-image {
aspect-ratio: 1.2 / 1; background: var(--bg-3);
position: relative; overflow: hidden;
}
.product-image img {
width: 100%; height: 100%; object-fit: cover;
}
/* hover zoom + GPU compositing rules อยู่ใน skeleton block ด้านล่าง (รวมกับ opacity transition) */
@media (prefers-reduced-motion: reduce) {
.product-card, .product-card:hover { transform: none !important; }
}
.image-default {
width: 100%; height: 100%; object-fit: cover;
}
.image-default-big {
width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius);
}
.image-placeholder {
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
font-size: 3rem;
background: linear-gradient(135deg, var(--bg-3), var(--bg-2));
}
.image-placeholder.big { font-size: 6rem; aspect-ratio: 1; }
.badge {
display: inline-flex; align-items: center; justify-content: center;
padding: .25rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 600;
line-height: 1.1; white-space: nowrap; vertical-align: middle;
}
.product-image .badge {
position: absolute; top: .6rem; right: .6rem;
}
.badge-out { background: var(--danger); color: #fff; }
.badge-low { background: var(--warn); color: #111; }
.badge-success { background: rgba(34,197,94,.16); color: #bbf7d0; border: 1px solid rgba(34,197,94,.34); }
.badge-muted { background: rgba(148,163,184,.12); color: var(--muted); border: 1px solid rgba(148,163,184,.24); }
.product-body { padding: .78rem .95rem .85rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.product-name { font-size: 1rem; margin: 0; font-weight: 600; line-height: 1.3; color: var(--text); }
.product-tags {
display: flex; flex-wrap: wrap; gap: .3rem;
margin: .15rem 0 .1rem;
}
.product-tag {
display: inline-flex; align-items: center; gap: .2rem;
font-size: .68rem; font-weight: 500; line-height: 1;
padding: .22rem .5rem; border-radius: 999px;
background: rgba(255,255,255,.04);
border: 1px solid var(--border);
color: var(--muted);
letter-spacing: .01em;
}
.product-tag.cat { background: rgba(168,85,247,.07); border-color: rgba(168,85,247,.18); }
.product-tag.sub { background: rgba(56,189,248,.08); border-color: rgba(56,189,248,.22); }
/* คอลเลคชั่น: สีเทาเริ่มต้น — ถ้ามี tag_color ในแอดมินจะใช้ inline style ทับ */
.product-tag.col { background: rgba(148,163,184,.12); border-color: rgba(148,163,184,.28); }
.product-footer {
display: flex; justify-content: space-between; align-items: baseline;
margin-top: auto; padding-top: .42rem;
}
.product-price { font-size: 1.2rem; font-weight: 600; color: var(--primary); }
.product-price-line {
display: flex;
align-items: baseline;
gap: .34rem;
flex-wrap: wrap;
min-width: 0;
}
.product-price-original {
color: var(--muted);
font-size: .82rem;
font-weight: 500;
text-decoration: line-through;
text-decoration-thickness: 1.5px;
white-space: nowrap;
}
.product-discount-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 1.22rem;
padding: .14rem .4rem;
border-radius: 6px;
border: 1px solid rgba(192, 132, 252, .38);
background: rgba(168, 85, 247, .16);
color: #d8b4fe;
font-size: .72rem;
font-weight: 600;
line-height: 1;
white-space: nowrap;
}
.product-discount-badge--corner {
display: none;
position: absolute;
top: .5rem;
left: .5rem;
z-index: 4;
min-height: 1.35rem;
padding: .2rem .48rem;
border-radius: 999px;
background: rgba(168, 85, 247, .82);
color: #fff;
box-shadow: 0 6px 14px rgba(var(--shadow-ink), .24);
}
/* การ์ดปกติ (ไม่ใช่สุดฮิตรายสัปดาห์): badge ส่วนลดไปมุมขวาบนของรูป แทน badge ในแถวราคา — ทุกจอ */
.product-grid:not(.product-grid--weekly-featured) .product-image .product-discount-badge--corner {
display: inline-flex;
left: auto;
right: .5rem;
}
.product-grid:not(.product-grid--weekly-featured) .product-price-line > .product-discount-badge:not(.product-discount-badge--corner) {
display: none;
}
/* การ์ดสุดฮิตรายสัปดาห์: คงเดิม — corner badge (ซ้ายบน) เฉพาะมือถือ, จอปกติใช้ badge ในแถวราคา */
@media (max-width: 620px) {
.product-grid--weekly-featured .product-image .product-discount-badge--corner {
display: inline-flex;
}
.product-grid--weekly-featured .product-price-line > .product-discount-badge:not(.product-discount-badge--corner) {
display: none;
}
}
.product-stock { font-size: .8rem; color: var(--muted); }
/* ============ Product card — info style (ดาว·ขายแล้ว/วิธีส่ง + คงเหลือ + ปุ่มเพิ่มตะกร้า) ============ */
/* wrap: การ์ด () + ปุ่มตะกร้า (นอก ) อยู่ในกล่องเดียว เพื่อกดปุ่ม = add / กดการ์ด = ดูสินค้า */
.product-card-wrap { position: relative; display: flex; }
.product-card-wrap > .product-card { flex: 1 1 auto; min-width: 0; }
/* ยกทั้ง wrap ตอน hover เพื่อให้ปุ่มตะกร้าขยับตามการ์ด (ปุ่มอยู่นอก ) */
.product-card--info:hover, .product-card--info:active { transform: none; }
.product-card-wrap:hover { transform: translateY(-4px); transition: transform var(--dur-base) var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .product-card-wrap:hover { transform: none; } }
.product-card--info .product-image,
.product-card--info .product-image:has(img.is-loaded) {
aspect-ratio: 1 / 1;
padding: 1rem;
background: var(--bg-2);
}
.product-card--info .product-image img {
border: 1px solid var(--bg-2);
border-radius: var(--radius);
object-fit: contain;
}
.product-card--info .product-body { gap: .4rem; }
/* แถวดาว/ขายแล้ว + คงเหลือ: ดันลงชิดล่างเสมอ (การ์ดสูงไม่เท่ากันก็ยังชิดเส้น ไม่ลอยขึ้น) */
.product-meta-row {
display: flex; align-items: center; justify-content: space-between;
gap: .6rem; font-size: .72rem; color: var(--muted); margin-top: auto;
}
.product-meta-left { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-star { color: var(--warn); }
.product-stock-chip {
display: inline-flex; align-items: center; gap: .34rem;
white-space: nowrap; flex: 0 0 auto; color: var(--muted);
}
.product-stock-dot {
width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
background: var(--success);
box-shadow: 0 0 6px color-mix(in srgb, var(--success) 70%, transparent);
}
/* ป้ายคงเหลือ: จอเล็กใช้ข้อความสั้น ("พร้อมส่ง") เพราะการ์ด 2 คอลัมน์ที่แคบ */
.stock-text-short { display: none; }
.product-stock-chip--low { color: var(--warn); }
.product-stock-chip--pre { color: var(--warn); }
.product-stock-chip--pre .product-stock-dot { background: var(--warn); box-shadow: none; }
.product-stock-chip--out { color: var(--muted); }
.product-stock-chip--out .product-stock-dot { background: var(--muted); box-shadow: none; }
/* แถวราคา: เส้นขีดคั่นด้านบน · ราคาเต็มอยู่ใต้ราคาขาย · เว้นที่ขวาให้ปุ่มตะกร้า */
/* min-height: จองที่ให้ปุ่มตะกร้า (สูง 38px + เว้นขอบ) ปุ่มจะได้ไม่เกยเส้นคั่น */
/* align-items: center → ไม่มีราคาเต็ม ราคาขายก็ยังอยู่กึ่งกลางแถว ไม่ลอยติดเส้น */
.product-card--info .product-footer {
margin-top: 0; padding-top: .55rem; padding-bottom: .1rem; padding-right: 3rem;
min-height: 2.9rem;
border-top: 1px solid var(--border); align-items: center;
}
.product-pricewrap {
display: flex; flex-direction: column; align-items: flex-start;
gap: .05rem; min-width: 0;
}
.product-card--info .product-price { font-size: 1.35rem; line-height: 1.15; }
.product-pricewrap .product-price-original { font-size: .78rem; line-height: 1.2; }
/* ปุ่มเพิ่มลงตะกร้า: มุมขวาล่างการ์ด, z สูงกว่า — bottom เท่ากับ padding ล่างของ body เพื่อให้กึ่งกลางตรงกับแถวราคา */
.product-cart-btn {
position: absolute; right: .8rem; bottom: .85rem; z-index: 2;
width: 38px; height: 38px; border-radius: 11px; border: 0; cursor: pointer;
display: grid; place-items: center; padding: 0;
background: var(--primary); color: #fff;
box-shadow: 0 6px 14px rgba(168, 85, 247, .3);
transition: filter var(--dur-fast) ease, transform var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) ease;
}
.product-cart-btn:hover {
/* กัน a:hover (บรรทัด ~275) ย้อมไอคอนเป็นสีม่วงจนกลืนพื้นหลัง — ปุ่มนี้เป็น ตอนปิด quick-add */
color: #fff;
filter: brightness(1.08);
transform: translateY(-2px) scale(1.06);
box-shadow: 0 10px 20px rgba(168, 85, 247, .42);
}
.product-cart-btn:active {
transform: translateY(0) scale(.92);
box-shadow: 0 3px 8px rgba(168, 85, 247, .28);
transition-duration: var(--dur-fast);
}
/* ไอคอนเอียงเล็กน้อยตอน hover — ให้รู้สึกว่ารถเข็นขยับ */
.product-cart-btn svg { transition: transform var(--dur-base) var(--ease-out); }
.product-cart-btn:hover svg { transform: translateX(1.5px) rotate(-8deg); }
.product-cart-btn:active svg { transform: translateX(0) rotate(0); }
/* ระหว่างยิง AJAX: เต้นเบา ๆ บอกว่ากำลังทำงาน */
.product-cart-btn.is-busy {
pointer-events: none;
animation: cart-btn-busy .8s ease-in-out infinite;
}
@keyframes cart-btn-busy {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: .55; transform: scale(.9); }
}
@media (prefers-reduced-motion: reduce) {
.product-cart-btn, .product-cart-btn svg { transition: none; }
.product-cart-btn:hover, .product-cart-btn:active { transform: none; }
.product-cart-btn:hover svg { transform: none; }
.product-cart-btn.is-busy { animation: none; opacity: .7; }
}
.product-cart-btn.is-out { background: var(--bg-3); color: var(--muted); box-shadow: none; }
/* สินค้าหมด: ปุ่มนิ่ง ไม่ยก ไม่ขยาย ไอคอนไม่เอียง — สื่อว่าไม่ใช่ปุ่มซื้อ */
.product-cart-btn.is-out:hover,
.product-cart-btn.is-out:active { transform: none; filter: none; }
.product-cart-btn.is-out:hover svg,
.product-cart-btn.is-out:active svg { transform: none; }
.product-card--info.is-out { opacity: .9; }
@media (max-width: 620px) {
.product-meta-row { font-size: .68rem; }
.stock-text-full { display: none; }
.stock-text-short { display: inline; }
.product-card--info .product-footer { padding-right: 2.6rem; min-height: 2.6rem; }
/* กฎ .product-grid:not(--weekly-featured) .product-footer ด้านบน (specificity สูงกว่า)
บังคับ column + flex-start — ทับการจัดกึ่งกลางของการ์ด info ต้อง override กลับ */
.product-grid .product-card--info .product-footer {
flex-direction: row;
align-items: center;
}
.product-cart-btn { width: 34px; height: 34px; border-radius: 10px; right: .6rem; bottom: .85rem; }
}
/* ============ Product Detail ============ */
.breadcrumb { margin: 1.5rem 0 1rem; color: var(--muted); font-size: .95rem; }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb-sep { display: inline-block; vertical-align: middle; margin: 0 .15rem; color: var(--muted); opacity: .65; }
.detail-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem;
background: var(--bg-2); border: 1px solid var(--border);
border-radius: var(--radius); padding: 2rem; margin-bottom: 2rem;
}
.detail-image img { border-radius: var(--radius); width: 100%; }
.detail-info h1 { margin: .4rem 0; font-size: 1rem; }
.detail-price { font-size: 1.8rem; font-weight: 600; color: var(--primary); margin: .5rem 0 1rem; }
.detail-price-line {
display: flex;
align-items: baseline;
gap: .55rem;
flex-wrap: wrap;
margin: .35rem 0 .6rem;
}
.detail-price-line .detail-price { margin: 0; }
.product-price-original--detail { font-size: 1rem; }
.product-discount-badge--detail { font-size: .82rem; min-height: 1.45rem; padding: .2rem .52rem; }
.purchase-summary-price {
display: flex;
align-items: baseline;
justify-content: flex-end;
gap: .4rem;
flex-wrap: wrap;
min-width: 0;
}
.product-price-original--summary { font-size: .82rem; }
.product-discount-badge--summary { font-size: .72rem; }
.stock-info { margin: .5rem 0 1rem; }
.stock-ok { color: var(--success); }
.stock-out { color: var(--danger); }
.stock-msg { color: var(--muted); font-weight: 500; }
.detail-desc { margin: 1rem 0; color: var(--muted); }
.add-to-cart-form {
display: flex; gap: 1rem; align-items: center;
margin: 1.5rem 0;
}
.qty-input {
display: flex; align-items: center;
background: var(--bg-3); border-radius: var(--radius); border: 1px solid var(--border);
}
.qty-input button {
background: transparent; border: 0; color: var(--text);
padding: .7rem 1rem; cursor: pointer; font-size: 1.2rem;
}
.qty-input input {
width: 60px; background: transparent; border: 0;
color: var(--text); text-align: center; font-size: 1rem;
-moz-appearance: textfield;
}
.qty-input input::-webkit-outer-spin-button,
.qty-input input::-webkit-inner-spin-button { -webkit-appearance: none; }
.trust-box {
margin-top: 1.5rem; padding: 1rem;
background: var(--bg-3); border-radius: var(--radius);
display: flex; flex-direction: column; gap: .4rem;
}
@media (max-width: 1023px) {
/* product detail เป็น mobile (1-col) ที่ ≤1023 ตรงกับ storefront chrome — รูปเต็มกว้าง + ย่อ container spacing
(trust badges 3-col จึงกระจายเต็มแถว ไม่เบียดคอลัมน์แคบเหมือนตอน 2-col) */
.detail-grid { grid-template-columns: 1fr; padding: 1rem; gap: 1.5rem; }
.product-detail--v2 { padding-bottom: 1.2rem; }
.product-detail--v2 .detail-grid--v2 {
padding: 1rem 1rem 1.15rem;
gap: 1rem;
border-radius: 14px;
}
.detail-image-panel { border-radius: 12px; }
}
/* —— Product detail (mockup-style v2) —— */
.product-detail--v2 { padding-bottom: 2rem; }
.product-detail--v2 .detail-grid--v2 {
background:
radial-gradient(circle at 24% 4%, rgba(88, 59, 181, .14), transparent 34%),
linear-gradient(150deg, rgba(10, 11, 21, .98) 0%, rgba(7, 9, 17, .98) 54%, rgba(9, 11, 20, .96) 100%);
border: 1px solid rgba(77, 79, 110, .42);
border-radius: 18px;
padding: 1.75rem 1.5rem 2rem;
gap: 2rem 2.5rem;
box-shadow: 0 18px 45px rgba(var(--shadow-ink),.28), inset 0 1px 0 rgba(255,255,255,.035);
align-items: start;
}
.detail-image--v2 { position: relative; }
.detail-image-panel {
border-radius: 16px;
overflow: hidden;
background: linear-gradient(180deg, rgba(12, 12, 25, .96) 0%, rgba(6, 8, 18, .98) 100%);
border: 1px solid rgba(94, 83, 132, .36);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), 0 18px 38px rgba(var(--shadow-ink),.22);
}
.detail-image-panel img {
width: 100%;
display: block;
border-radius: 0;
}
.detail-info--v2 { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.detail-meta-tags {
display: flex; flex-wrap: wrap; gap: 0.45rem;
margin-bottom: 0.25rem;
}
.product-tag--pill {
display: inline-flex; align-items: center; gap: 0.25rem;
padding: 0.3rem 0.7rem; border-radius: 999px;
font-size: 0.78rem; font-weight: 600;
color: var(--text);
}
.product-tag--pill.cat {
background: rgba(168,85,247,.1); border-color: rgba(168,85,247,.25);
}
.product-tag--pill.sub {
background: rgba(56,189,248,.1); border-color: rgba(56,189,248,.28);
}
.product-tag--pill.col {
background: rgba(148,163,184,.12); border-color: rgba(148,163,184,.3);
font-weight: 500;
color: var(--muted);
}
.detail-info .detail-title { font-size: 1.75rem; font-weight: 600; line-height: 1.25; margin: 0.2rem 0 0.5rem; letter-spacing: -0.02em; }
.detail-desc--lead { color: #c2bed8; font-size: 0.98rem; line-height: 1.48; margin: 0.1rem 0 0.78rem; max-width: 42rem; }
.detail-desc--lead.rich-content p { margin-bottom: 0.24rem; }
.detail-desc--lead.rich-content p:last-child { margin-bottom: 0; }
/* ห้ามซ่อน
ที่ติดกัน — เคยมี `br + br { display: none }` ตรงนี้ ทำให้บรรทัดว่างที่แอดมิน
เว้นไว้ไม่แสดงผล แม้ HTML จะถูกต้องแล้ว (เป็นตัวที่ทำให้ปัญหา "Enter หลายครั้งไม่ขึ้น" ไม่จบ) */
.chat-delivery-note {
width: min(100%, 42rem);
display: flex;
align-items: center;
gap: 1rem;
margin: 0.05rem 0 0.95rem;
padding: 1.02rem 1.15rem;
border: 1px solid rgba(168, 85, 247, .32);
border-radius: 12px;
background:
radial-gradient(100% 160% at 0% 0%, rgba(168, 85, 247, .18), transparent 46%),
linear-gradient(180deg, rgba(31, 23, 56, .76), rgba(20, 16, 42, .82));
color: #a855f7;
box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 12px 24px rgba(var(--shadow-ink),.16);
}
.chat-delivery-note__icon {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
color: #a855f7;
filter: drop-shadow(0 0 8px rgba(168, 85, 247, .16));
}
.chat-delivery-note__copy {
min-width: 0;
display: grid;
gap: 0.08rem;
line-height: 1.28;
}
.chat-delivery-note__copy strong {
color: #a855f7;
font-size: 0.9rem;
font-weight: 500;
}
.chat-delivery-note__copy span {
color: rgba(168, 85, 247, .86);
font-size: 0.8rem;
font-weight: 500;
}
.detail-price--hero { font-size: 2.15rem; font-weight: 600; color: var(--primary); margin: 0.35rem 0 0.6rem; line-height: 1.1; }
.detail-price-hint { font-weight: 500; margin: 0.4rem 0 0.2rem; }
.stock-info--v2 { margin: 0.25rem 0 0.4rem; }
.btn-preview { align-self: flex-start; margin-top: 0.2rem; }
.nitro-section-label { font-size: .88rem; font-weight: 600; color: var(--muted); margin: 1rem 0 0.42rem; }
.nitro-pick--v2 {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .65rem;
margin: 0;
padding: 0;
width: 100%;
border: 0;
border-radius: 0;
background: transparent;
}
.nitro-pick-item--v2 {
position: relative; display: block; margin: 0; cursor: pointer; /* user-select: none; */
border: 1px solid rgba(148,163,184,.18);
border-radius: 11px;
background: linear-gradient(180deg, rgba(14,19,29,.96), rgba(8,12,20,.96));
box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 10px 24px rgba(var(--shadow-ink),.18);
transition: border-color 0.2s, box-shadow 0.2s, background 0.2s, transform 0.12s;
overflow: hidden;
}
.nitro-pick-item--v2:hover {
border-color: rgba(148,163,184,.28);
background: linear-gradient(180deg, rgba(17,23,35,.98), rgba(10,15,24,.98));
}
.nitro-pick-item--v2 input {
position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.nitro-pick-item--v2 .nitro-pick-item__body {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
padding: .72rem .82rem;
min-height: 3.1rem;
}
.nitro-pick-item--v2 .nitro-pick-item__text { min-width: 0; }
.nitro-pick-item--v2 .nitro-pick-item__title {
display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem;
font-weight: 600; font-size: .88rem; color: var(--text);
line-height: 1.3;
}
.badge-nitro-rec {
font-size: 0.7rem; font-weight: 600; text-transform: none;
padding: 0.15rem 0.5rem; border-radius: 6px;
background: linear-gradient(135deg, var(--primary), #7e22ce);
color: #fff;
letter-spacing: 0.01em;
}
.nitro-pick-item--v2 .nitro-pick-item__sub {
display: block;
font-size: .72rem;
color: var(--muted);
margin-top: .18rem;
font-weight: 500;
line-height: 1.3;
}
.nitro-pick-item--v2 .nitro-pick-item__price {
display: none;
}
.nitro-pick-item--v2.is-selected,
.nitro-pick-item--v2:has(input:checked) {
border-color: rgba(192, 132, 252, .78);
background:
radial-gradient(120% 100% at 92% 0%, rgba(168,85,247,.28), transparent 58%),
linear-gradient(180deg, rgba(43, 25, 68, .98), rgba(23, 15, 39, .98));
box-shadow:
inset 0 1px 0 rgba(255,255,255,.07),
0 0 0 1px rgba(168,85,247,.32),
0 10px 24px rgba(var(--shadow-ink),.22),
0 0 22px rgba(168,85,247,.22);
}
.nitro-pick-item--v2.is-selected .nitro-pick-item__sub,
.nitro-pick-item--v2:has(input:checked) .nitro-pick-item__sub {
color: #d8c7ff;
}
.nitro-pick-item--v2:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.add-to-cart-form--v2 {
display: flex; flex-direction: column; align-items: stretch;
margin: 1.15rem 0 0.75rem; gap: 0;
}
.detail-purchase-controls {
display: grid;
gap: .58rem;
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid rgba(148, 163, 184, .16);
}
.purchase-summary-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
padding: .02rem 0 .22rem;
border-bottom: 0;
color: var(--muted);
font-size: .88rem;
font-weight: 500;
}
.purchase-summary-total,
.purchase-summary-stock {
display: inline-flex;
align-items: baseline;
min-width: 0;
gap: .35rem;
white-space: nowrap;
}
.purchase-summary-total {
flex: 1 1 auto;
}
.purchase-summary-stock {
flex: 0 0 auto;
text-align: right;
}
.purchase-summary-row strong {
color: inherit;
font-size: inherit;
font-weight: inherit;
line-height: 1;
white-space: nowrap;
text-shadow: none;
}
.purchase-summary-stock strong {
color: var(--success);
font-size: inherit;
font-weight: inherit;
text-shadow: none;
}
.purchase-summary-stock.is-ok strong {
color: var(--success);
}
.purchase-summary-stock.is-low strong {
color: var(--warn);
}
.purchase-summary-stock.is-critical strong {
color: var(--danger);
}
.purchase-summary-stock.is-preorder strong {
color: var(--accent, #7c5cff);
}
.purchase-summary-eta {
display: flex;
align-items: center;
min-width: 0;
}
/* พรีออเดอร์: ให้ badge ETA ยืด/ยุบได้ และห่อลงบรรทัดใหม่บนจอแคบ ไม่ล้นขอบ */
.purchase-summary-row--preorder {
flex-wrap: wrap;
align-items: center;
row-gap: .4rem;
}
.purchase-summary-row--preorder .purchase-summary-eta {
flex: 1 1 auto;
}
.purchase-summary-row--preorder .purchase-summary-stock {
margin-left: auto;
}
.preorder-eta-badge {
display: inline-flex;
align-items: center;
gap: .35rem;
max-width: 100%;
padding: .3rem .7rem;
border-radius: 999px;
font-size: .82rem;
font-weight: 600;
color: #ddd6fe;
background: rgba(124,92,255,.14);
border: 1px solid rgba(124,92,255,.4);
}
.preorder-autodeliver-badge {
display: inline-flex;
align-items: center;
gap: .3rem;
margin-top: .3rem;
padding: .22rem .6rem;
border-radius: 999px;
font-size: .74rem;
font-weight: 600;
line-height: 1.2;
color: #c4b5fd;
background: rgba(124,92,255,.12);
border: 1px solid rgba(124,92,255,.32);
}
.product-stock--preorder {
color: var(--accent, #7c5cff);
font-weight: 600;
}
@media (max-width: 480px) {
.purchase-summary-row {
gap: .7rem;
font-size: .78rem;
}
}
.detail-purchase-controls > .qty-input--v2 {
width: 100%;
height: 40px;
}
.detail-purchase-controls > .qty-input--v2 input {
flex: 1;
padding: 0;
line-height: 1.1;
font-weight: 600;
}
.detail-purchase-controls > .qty-input--v2 button {
flex: 0 0 2.9rem;
height: 100%;
padding: 0;
line-height: 1;
}
.detail-buy-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: stretch;
gap: 0.75rem;
}
/* compound selector: ชนะ media query mobile ที่ประกาศ .detail-buy-row 2 คอลัมน์ (specificity สูงกว่า) */
.detail-buy-row.detail-buy-row--single {
grid-template-columns: 1fr;
}
/* สินค้า 2-rate: เว้นระหว่างตัวเลือก Nitro กับแถวจำนวน/เพิ่มตะกร้า */
.add-to-cart-form--v2 .nitro-pick--v2 ~ .detail-purchase-controls {
margin-top: 1.1rem;
}
.qty-input--v2 {
border-radius: 10px;
flex-shrink: 0;
background: linear-gradient(180deg, rgba(14,19,29,.96), rgba(8,12,20,.96));
border-color: rgba(148,163,184,.18);
box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 10px 24px rgba(var(--shadow-ink),.18);
transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.qty-input--v2:hover {
border-color: rgba(148,163,184,.28);
background: linear-gradient(180deg, rgba(17,23,35,.98), rgba(10,15,24,.98));
}
.qty-input--v2:focus-within {
border-color: rgba(148,163,184,.34);
background: linear-gradient(180deg, rgba(18,24,36,.98), rgba(9,14,23,.98));
box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 0 0 3px rgba(148,163,184,.1), 0 10px 24px rgba(var(--shadow-ink),.2);
}
.qty-input--v2 button {
color: #e9ddff;
}
.qty-input--v2 input { min-width: 2.5rem; }
.detail-buy-row .btn-add-cart,
.detail-buy-row .btn-buy-now,
.qa-foot .btn-buy-now { min-width: 0; border-radius: 12px; font-weight: 600; }
.detail-buy-row .btn-add-cart,
.detail-buy-row .btn-buy-now,
.qa-foot .btn-buy-now {
min-height: 3rem;
padding-top: .8rem;
padding-bottom: .8rem;
box-shadow: 0 10px 22px rgba(var(--shadow-ink),.22);
}
.detail-buy-row .btn-buy-now,
.qa-foot .btn-buy-now {
border-color: rgba(157, 107, 225, .62);
background: rgba(5, 7, 14, .68);
color: #f4eeff;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), 0 10px 22px rgba(var(--shadow-ink),.2);
}
.detail-buy-row .btn-buy-now:hover,
.qa-foot .btn-buy-now:hover {
border-color: rgba(211, 155, 232, .74);
background: rgba(22, 15, 36, .86);
color: #fff;
}
.payment-trust {
margin-top: 1.25rem; padding-top: 1.15rem; border-top: 1px solid var(--border);
}
/* แถบ 3 คอลัมน์: ไอคอนชมพู + หัวข้อ + คำอธิบาย (หน้าสินค้า) */
.payment-trust.product-trust-badges {
margin-top: 1.25rem;
padding: 0.95rem 0.5rem;
border-top: none;
display: grid;
/* คอลัมน์กลาง (ชำระเงินปลอดภัย) กว้างสุด — ลดซ้าย/ขวา เพื่อไม่ให้บรรทัดย่อยของ PromptPay */
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr) minmax(0, 1fr);
gap: 0;
align-items: stretch;
background:
linear-gradient(180deg, rgba(27, 28, 42, .98) 0%, rgba(22, 23, 35, .98) 100%);
border: 1px solid rgba(53, 56, 82, .72);
border-radius: 14px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 14px 34px rgba(var(--shadow-ink), .26);
}
.product-trust-badges__item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.35rem 0.85rem;
min-height: 3.25rem;
border-right: 1px solid rgba(58, 60, 86, .72);
}
.product-trust-badges__item:last-child {
border-right: 0;
}
.product-trust-badges__icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
color: #a855ff;
filter: drop-shadow(0 0 8px rgba(168, 85, 255, .32));
line-height: 0;
}
.product-trust-badges__icon svg {
display: block;
}
.product-trust-badges__text {
display: flex;
flex-direction: column;
gap: 0.12rem;
min-width: 0;
}
.product-trust-badges__title {
display: block;
font-size: 0.88rem;
font-weight: 600;
color: #fbf8ff;
line-height: 1.25;
letter-spacing: 0.01em;
}
.product-trust-badges__sub {
display: block;
font-size: 0.76rem;
font-weight: 500;
color: #a9a6c3;
line-height: 1.35;
}
.product-trust-badges__item:nth-child(2) .product-trust-badges__sub {
white-space: nowrap;
}
@media (max-width: 820px) {
.payment-trust.product-trust-badges {
grid-template-columns: repeat(3, minmax(0, 1fr));
padding: .38rem .28rem;
border-radius: 12px;
}
.product-trust-badges__item:nth-child(2) .product-trust-badges__sub {
white-space: normal;
}
.product-trust-badges__item {
border-right: 1px solid rgba(58, 60, 86, .72);
border-bottom: 0;
padding: .45rem .35rem;
gap: .32rem;
min-height: 0;
}
.product-trust-badges__item:last-child {
border-right: 0;
}
}
@media (max-width: 480px) {
.payment-trust.product-trust-badges {
grid-template-columns: 1fr;
}
.product-trust-badges__item {
border-right: 0;
border-bottom: 1px solid rgba(58, 60, 86, .72);
padding: .6rem .55rem;
}
.product-trust-badges__item:last-child {
border-bottom: 0;
}
}
.product-accordion {
margin: 0 0 2.5rem;
border: 1px solid var(--border);
border-radius: 16px;
overflow: hidden;
background: var(--bg-2);
box-shadow: 0 4px 20px rgba(var(--shadow-ink),.12);
}
.accordion-panel { border-bottom: 1px solid var(--border); }
.accordion-panel:last-child { border-bottom: 0; }
.accordion-panel summary {
list-style: none; cursor: pointer; padding: 1rem 1.15rem 1rem 1.25rem;
font-weight: 600; font-size: 0.95rem;
display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
/* user-select: none; */ transition: background 0.15s;
color: var(--text);
}
.accordion-panel summary::-webkit-details-marker { display: none; }
.accordion-panel summary::after {
content: ''; width: 0.45rem; height: 0.45rem; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
transform: rotate(45deg); margin-right: 0.2rem; flex-shrink: 0; transition: transform 0.2s; opacity: 0.8;
}
.accordion-panel[open] summary::after { transform: rotate(225deg); }
.accordion-panel summary:hover { background: rgba(255,255,255,.04); }
/* badge ไอคอน + สีประจำหัวข้อ (รับ=ฟ้า, ใช้=ม่วง, ปลอดภัย=เขียว) */
.accordion-panel { --sec: var(--acc-receive); }
.accordion-panel.p-usage { --sec: var(--acc-usage); }
.accordion-panel.p-safety { --sec: var(--acc-safety); }
.accordion-panel__title { flex: 1; }
.accordion-panel__badge {
display: grid; place-items: center; width: 2rem; height: 2rem; flex-shrink: 0;
border-radius: 9px; color: var(--sec);
background: color-mix(in srgb, var(--sec) 16%, transparent);
}
.accordion-panel__badge svg { width: 1.05rem; height: 1.05rem; }
.accordion-panel[open] summary .accordion-panel__title { color: var(--sec); }
/* ===== admin: หน้าตั้งค่าข้อความ accordion (แท็บ + พรีวิวสด + คืนค่า) ===== */
.acc-tabs {
display: flex; flex-wrap: wrap; gap: .5rem;
margin: 0 0 1.25rem; padding-bottom: .75rem; border-bottom: 1px solid var(--border);
}
.acc-tab {
display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
padding: .5rem .9rem; border-radius: 8px; font-weight: 600; font-size: .9rem;
border: 1px solid var(--border); background: var(--bg-2); color: var(--muted);
}
.acc-tab svg { width: 16px; height: 16px; }
.acc-tab.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }
.acc-panel { display: none; }
.acc-panel.is-active { display: block; }
.acc-panel__desc {
display: flex; align-items: flex-start; gap: .5rem; margin: 0 0 1.25rem;
padding: .7rem .9rem; border-radius: 10px; font-size: .9rem; color: var(--text);
background: rgba(168,85,247,.08); border: 1px solid var(--border);
}
.acc-panel__desc svg { flex-shrink: 0; margin-top: .1rem; color: var(--accent); }
.acc-field { --sec: var(--acc-receive); margin-bottom: 1.75rem; }
.acc-field.p-usage { --sec: var(--acc-usage); }
.acc-field.p-safety { --sec: var(--acc-safety); }
.acc-field__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .5rem; }
.acc-field__id { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; color: var(--text); }
.acc-field__id svg { color: var(--sec); }
.acc-sub-label { display: block; margin: .55rem 0 .3rem; font-size: .8rem; font-weight: 600; color: var(--muted); }
.acc-sub-label:first-child { margin-top: 0; }
.acc-title-input { width: 100%; margin-bottom: .35rem; }
.acc-reset { flex-shrink: 0; }
.acc-field__body { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 1080px) {
.acc-field__body { grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: start; }
}
.acc-preview__label {
margin-bottom: .4rem; font-size: .78rem; color: var(--muted);
text-transform: uppercase; letter-spacing: .03em;
}
.acc-preview__frame { margin: 0; }
.accordion-panel__summary-mock {
display: flex; align-items: center; gap: .75rem;
padding: 1rem 1.15rem 1rem 1.25rem; color: var(--sec);
font-family: "Kanit", system-ui, sans-serif; font-weight: 600; font-size: .95rem;
}
.accordion-panel__body {
padding: 0 1.25rem 1.1rem; font-size: 0.9rem; color: var(--muted);
line-height: 1.6; max-width: 58rem;
}
.accordion-panel__body p { margin: 0; }
.accordion-panel__body p + .howto-list,
.accordion-panel__body .howto-list + p { margin-top: .65rem; }
/* ป้ายกำกับเนื้อหา placeholder ใน FAQ — ลบออกเมื่อแก้เป็นเนื้อหาจริงแล้ว */
.accordion-panel__draft {
display: inline-flex; align-items: center; gap: .35rem;
margin-bottom: .55rem !important; padding: .15rem .5rem;
border-radius: .4rem; font-size: .72rem; font-weight: 600;
color: #92400e; background: #fef3c7; border: 1px dashed #f59e0b;
}
.accordion-panel__draft + p { margin-top: 0; }
.howto-list {
margin: 0;
padding-left: 1.4rem;
display: flex;
flex-direction: column;
gap: .4rem;
}
.howto-list li { line-height: 1.55; }
.howto-list li strong { color: var(--text); font-weight: 600; }
.howto-list li em { color: var(--primary); font-style: normal; font-weight: 500; }
.howto-list li code {
background: rgba(255,255,255,.06);
border: 1px solid var(--border);
border-radius: 4px;
padding: .05em .35em;
font-size: .85em;
}
.howto-list a { color: var(--accent); }
.howto-tip {
margin-top: .6rem !important;
padding: .55rem .75rem;
background: rgba(167,139,250,.08);
border-left: 3px solid var(--accent);
border-radius: 6px;
font-size: .85rem;
color: var(--text);
}
/* Product detail — mobile compaction + qty-input fix (container spacing ย้ายไปยุบที่ 820 พร้อม layout collapse) */
@media (max-width: 720px) {
.breadcrumb { margin: .9rem 0 .55rem; font-size: .8rem; }
.product-tag--pill { font-size: .7rem; padding: .22rem .55rem; }
.detail-meta-tags { gap: .35rem; margin-bottom: .15rem; }
.detail-info .detail-title { font-size: 1.2rem; line-height: 1.3; margin: .1rem 0 .3rem; letter-spacing: 0; }
.detail-desc--lead { font-size: .8rem; line-height: 1.42; margin-bottom: .3rem; }
.chat-delivery-note {
gap: .72rem;
margin: .05rem 0 .65rem;
padding: .78rem .86rem;
border-radius: 10px;
}
.chat-delivery-note__icon .lucide {
width: 30px;
height: 30px;
}
.chat-delivery-note__copy { line-height: 1.24; }
.chat-delivery-note__copy strong { font-size: .82rem; }
.chat-delivery-note__copy span { font-size: .76rem; }
.detail-price--hero { font-size: 1.55rem; margin: .2rem 0 .4rem; }
.detail-price-hint { font-size: .8rem; margin: .25rem 0 .15rem; }
.stock-info--v2 { margin: .15rem 0 .3rem; }
.stock-msg, .stock-out, .stock-ok { font-size: .8rem; }
.btn-preview { font-size: .8rem; padding: .42rem .75rem; }
.nitro-section-label { font-size: .82rem; margin: .75rem 0 .35rem; }
.nitro-pick--v2 { gap: .45rem; padding: 0; }
.nitro-pick-item--v2 { border-width: 1px; border-radius: 10px; }
.nitro-pick-item--v2 .nitro-pick-item__body {
padding: .62rem .66rem;
min-height: 3rem;
gap: .45rem;
}
.nitro-pick-item--v2 .nitro-pick-item__title { font-size: .78rem; gap: .25rem; }
.badge-nitro-rec { font-size: .62rem; padding: .08rem .38rem; }
.nitro-pick-item--v2 .nitro-pick-item__sub { display: block; font-size: .66rem; margin-top: .12rem; line-height: 1.25; }
.nitro-pick-item--v2 .nitro-pick-item__price { font-size: 1rem; }
.nitro-error { font-size: .78rem; }
/* Buy row: keep horizontal (เลิก stack column) — กัน qty-input stretch ผิดปกติ */
.add-to-cart-form--v2 { margin: .85rem 0 .5rem; }
.add-to-cart-form--v2 .nitro-pick--v2 ~ .detail-purchase-controls { margin-top: .7rem; }
.detail-purchase-controls {
gap: .48rem;
margin-top: .7rem;
padding-top: .75rem;
border-top: 1px solid rgba(148, 163, 184, .14);
}
.purchase-summary-row {
padding-bottom: .18rem;
border-bottom: 0;
font-size: .78rem;
}
.purchase-summary-row strong { font-size: inherit; }
.detail-buy-row {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .55rem;
}
.qty-input--v2 {
width: 100%;
height: 36px;
border-radius: 10px;
}
.qty-input--v2 button {
flex-basis: 2.55rem;
padding: 0;
font-size: 1.05rem;
line-height: 1;
}
.qty-input--v2 input {
flex: 1;
width: auto;
min-width: 2.4rem;
font-size: .9rem;
padding: 0;
}
.detail-buy-row .btn-add-cart,
.detail-buy-row .btn-buy-now {
min-width: 0;
font-size: .82rem;
padding: .68rem .55rem;
gap: .35rem;
}
.detail-buy-row .btn-add-cart,
.detail-buy-row .btn-buy-now { min-height: 2.75rem; }
/* Trust badges (3-col) */
.payment-trust.product-trust-badges {
margin-top: 1rem;
padding: .35rem .25rem;
}
.product-trust-badges__item {
padding: .42rem .32rem;
gap: .3rem;
min-height: 0;
}
.product-trust-badges__icon svg { width: 17px; height: 17px; }
.product-trust-badges__title { font-size: .62rem; line-height: 1.16; }
.product-trust-badges__sub { font-size: .53rem; line-height: 1.18; }
/* Accordion */
.product-accordion { margin: 0 0 1.5rem; border-radius: 12px; }
.accordion-panel summary { padding: .8rem 1rem; font-size: .87rem; }
.accordion-panel__body { padding: 0 1rem .85rem; font-size: .82rem; line-height: 1.55; }
.accordion-panel__body p + .howto-list,
.accordion-panel__body .howto-list + p { margin-top: .5rem; }
.howto-list { padding-left: 1.1rem; gap: .3rem; }
.howto-list li { font-size: .82rem; line-height: 1.5; }
.howto-tip { font-size: .78rem; padding: .5rem .65rem; margin-top: .5rem !important; }
}
/* ============ Cart ============ */
.empty-state {
text-align: center; padding: 4rem 1rem;
background: var(--bg-2); border: 1px solid var(--border);
border-radius: var(--radius);
}
.big-emoji { font-size: 4rem; margin-bottom: 1rem; }
/* เวอร์ชันไม่มีการ์ดพื้นหลัง — เหลือแค่ไอคอน ข้อความ ปุ่ม (หน้าประวัติการสั่งซื้อ) */
.empty-state--bare { background: none; border: none; padding: 3rem 1rem; }
.empty-state__icon {
display: inline-flex; align-items: center; justify-content: center;
width: 88px; height: 88px;
margin-bottom: var(--space-4);
border-radius: 50%;
background: var(--bg-3);
color: var(--muted);
}
.cart-layout { display: grid; grid-template-columns: 1fr 360px; gap: 2rem; }
.cart-items { display: flex; flex-direction: column; gap: .8rem; }
.cart-item {
display: grid; grid-template-columns: 80px 1fr auto auto auto;
gap: 1rem; align-items: center;
background: var(--bg-2); border: 1px solid var(--border);
border-radius: var(--radius); padding: .8rem;
}
.cart-image { width: 80px; height: 80px; border-radius: 8px; overflow: hidden; background: var(--bg-3); }
.cart-image img { width: 100%; height: 100%; object-fit: cover; }
.cart-name { font-weight: 600; display: block; margin-bottom: .2rem; }
.cart-price { color: var(--muted); font-size: .9rem; }
.qty-form input {
width: 70px; padding: .4rem; text-align: center;
background: var(--bg-3); border: 1px solid var(--border);
color: var(--text); border-radius: 8px;
}
/* Qty stepper (cart page AJAX) — − N + */
.qty-stepper {
display: inline-flex; align-items: center;
background: var(--bg-3);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
}
.qty-btn {
width: 32px; height: 36px;
background: none; border: 0;
color: var(--muted); font-size: 1.1rem; font-weight: var(--fw-bold);
cursor: pointer;
transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.qty-btn:hover:not(:disabled) { background: var(--primary-soft); color: var(--primary); }
.qty-btn:disabled,
.qty-btn.is-disabled {
opacity: .35;
cursor: not-allowed;
background: none !important;
color: var(--muted) !important;
}
/* scope ให้ชนกับ .qty-input wrapper บน product page ไม่ได้ — ใช้เฉพาะ input ใน cart stepper */
.qty-stepper .qty-input {
width: 44px; height: 36px;
background: none; border: 0;
color: var(--text); text-align: center;
font-weight: var(--fw-semibold); font-size: var(--fs-base);
padding: 0;
-moz-appearance: textfield;
}
.qty-stepper .qty-input::-webkit-outer-spin-button,
.qty-stepper .qty-input::-webkit-inner-spin-button {
-webkit-appearance: none; margin: 0;
}
.qty-stepper .qty-input:focus { outline: none; box-shadow: none; }
.cart-subtotal {
font-weight: var(--fw-bold); color: var(--primary);
min-width: 90px; text-align: right;
transition: opacity var(--dur-fast) ease;
}
.cart-item.is-updating .cart-subtotal { opacity: .55; }
.cart-item.is-updating { pointer-events: none; }
/* Admin dropdown loading state */
select.is-loading {
opacity: .65;
background-image: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.05) 50%, transparent 70%);
background-size: 200% 100%;
animation: img-shimmer 1.6s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
select.is-loading { animation: none; }
}
.cart-remove-btn {
background: transparent; border: 0; color: var(--muted);
font-size: 1.2rem; cursor: pointer;
width: 36px; height: 36px;
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.cart-remove-btn:hover { background: var(--danger-soft); color: var(--danger); }
.js-cart-clear {
align-self: flex-end;
}
.cart-summary, .checkout-summary {
background: var(--bg-2); border: 1px solid var(--border);
border-radius: var(--radius); padding: 1.5rem;
height: fit-content; position: sticky; top: 80px;
}
.cart-summary h3, .checkout-summary h3 { margin-top: 0; }
.cart-cta-spacer { height: .85rem; }
.summary-row, .summary-line {
display: flex; justify-content: space-between;
padding: .5rem 0;
}
.summary-row.total, .summary-line.total {
font-size: 1.3rem; font-weight: 600; color: var(--primary);
border-top: 1px solid var(--border); margin-top: .5rem; padding-top: .8rem;
}
.checkout-summary > button[type="submit"].btn-block + a.btn-block {
margin-top: 0.85rem;
}
/* Cart mobile checkout components — desktop hides them */
.cart-mobile-banner,
.cart-mobile-bar { display: none; }
@media (max-width: 1023px) {
.cart-layout { grid-template-columns: 1fr; gap: 1rem; }
.cart-item {
grid-template-columns: 60px minmax(0, 1fr) auto;
grid-template-rows: auto auto;
grid-template-areas:
"img name name"
"img price stepper";
column-gap: .7rem;
row-gap: .55rem;
padding: .65rem;
position: relative;
}
.cart-image { width: 60px; height: 60px; grid-area: img; }
/* ชื่อกินเต็มแถวบน · เว้นที่ขวาให้ปุ่มลบ */
.cart-main { grid-area: name; min-width: 0; padding-right: 1.7rem; }
/* ปุ่มลบลอยมุมขวาบน ไม่กินคอลัมน์ — ชื่อจึงกว้างเต็ม */
.cart-remove-btn { position: absolute; top: .3rem; right: .3rem; }
/* ราคา (purple) ซ้ายล่าง · stepper ขวาล่าง — ตามภาพ mockup */
.cart-price { display: none; }
.cart-subtotal { grid-area: price; justify-self: start; align-self: center; text-align: left; min-width: 0; }
.qty-stepper { grid-area: stepper; justify-self: end; }
.cart-summary { position: static; padding: 1.1rem; }
.js-cart-clear { display: none; }
/* สรุปคำสั่งซื้อให้ใกล้ mockup: ตัดหัวข้อ · ตัดแถวจำนวนรายการ · ส่วนลดเป็นสีเขียว */
.cart-summary h3 { display: none; }
.summary-row--count { display: none; }
#cartDiscountDisplay { color: var(--success); }
/* ปุ่มเลือกสินค้าเดิมในการ์ดสรุปย้ายไปอยู่ในแถบลอยล่าง */
.cart-summary > a.btn-ghost { display: none; }
/* แถบ checkout ซ้อนเหนือ bottom nav (สองชั้น) — nav ยังนำทางได้
≤820: มี bottom nav → แถบเลื่อนขึ้นเหนือ nav (ดู media 820 ด้านล่าง) */
body:has(.cart-mobile-bar) { padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px)); }
.cart-mobile-banner {
display: flex; align-items: center; gap: .5rem;
padding: .6rem .8rem; margin-bottom: .8rem;
border: 1px solid var(--border); border-radius: var(--radius);
background: var(--bg-2); color: var(--muted);
font-size: .85rem; line-height: 1.4;
}
.cart-mobile-banner .lucide { flex: 0 0 auto; }
.cart-mobile-banner--info { color: var(--accent); border-color: var(--accent-soft); background: var(--accent-soft); }
/* ปุ่ม checkout ย้ายไปอยู่ในแถบลอยล่าง */
#cartCheckoutBtn, .cart-cta-spacer { display: none; }
.cart-mobile-bar {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 1190;
display: flex; align-items: center; gap: .7rem;
padding: .5rem .9rem calc(.5rem + env(safe-area-inset-bottom, 0px));
background: rgba(15, 15, 20, .96);
border-top: 1px solid var(--border);
backdrop-filter: blur(14px);
box-shadow: 0 -10px 28px rgba(var(--shadow-ink), .28);
}
.cart-mobile-bar__info { display: flex; flex-direction: column; line-height: 1.15; flex: 0 0 auto; }
.cart-mobile-bar__label { font-size: .72rem; color: var(--muted); }
.cart-mobile-bar__total { font-size: 1.1rem; font-weight: var(--fw-bold); color: var(--primary); }
/* nav มี "หน้าแรก"/"สินค้า" อยู่แล้ว — ปุ่มเลือกสินค้าในแถบจึงซ้ำซ้อน ตัดออก */
.cart-mobile-bar__shop { display: none; }
.cart-mobile-bar__btn { flex: 1 1 auto; padding: .6rem .8rem; font-size: .95rem; white-space: nowrap; }
}
/* ≤1023: มี bottom nav → แถบ checkout เลื่อนขึ้นไปนั่งเหนือ nav (สองชั้น) */
@media (max-width: 1023px) {
.cart-mobile-bar {
bottom: calc(66px + env(safe-area-inset-bottom, 0px)); /* เหนือ nav สูง 66px */
padding-bottom: .5rem; /* nav รับ safe-area ที่ขอบล่างแล้ว */
}
body:has(.cart-mobile-bar) {
padding-bottom: calc(116px + env(safe-area-inset-bottom, 0px)); /* nav 66 + แถบ ~50 */
}
}
/* ============ Checkout ============ */
.checkout-form {
display: block;
}
/* แถวสูงตามคอลัมน์ซ้ายเท่านั้น (สรุป absolute จึงไม่ดันความสูง) → max-height 100% ของสรุป = สูงสุดเท่าฝั่งซ้าย */
.checkout-columns {
display: grid;
grid-template-columns: minmax(260px, 34rem) minmax(400px, 1fr);
gap: 1.5rem;
align-items: start;
position: relative;
}
.checkout-grid {
grid-column: 1;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.checkout-section {
background: var(--bg-2); border: 1px solid var(--border);
border-radius: var(--radius); padding: 1.5rem;
}
.checkout-section h3 { margin-top: 0; }
.checkout-summary--side {
grid-column: 2;
grid-row: 1;
position: absolute;
left: 0;
right: 0;
top: 0;
width: auto;
height: auto;
max-height: 100%;
display: flex;
flex-direction: column;
min-height: 0;
overflow: hidden;
bottom: auto;
}
.checkout-summary--side > *:not(.checkout-summary-list) {
flex-shrink: 0;
}
.checkout-summary-list {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
display: flex;
flex-direction: column;
gap: 0.85rem;
margin: 0.35rem 0 0.85rem;
padding-right: 6px;
-webkit-overflow-scrolling: touch;
}
.checkout-summary-item {
display: grid;
grid-template-columns: 52px 1fr auto;
gap: 0.65rem;
align-items: center;
}
.checkout-summary-thumb {
width: 52px;
height: 52px;
border-radius: 8px;
overflow: hidden;
background: var(--bg-3);
border: 1px solid var(--border);
}
.checkout-summary-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.checkout-summary-item-mid { min-width: 0; }
.checkout-summary-item-title {
font-size: 0.95rem;
line-height: 1.35;
word-break: normal;
overflow-wrap: break-word;
}
.checkout-summary-item-meta { margin-top: 0.15rem; font-size: 0.82rem; }
.checkout-summary-item-price {
font-weight: 600;
font-size: 0.95rem;
white-space: nowrap;
align-self: start;
padding-top: 0.1rem;
}
.form-row { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-row label { font-weight: 500; font-size: .95rem; }
.form-row label .optional { color: var(--muted); font-weight: normal; font-size: .85em; }
.form-row input, .form-row textarea, .form-row select {
background: var(--bg-3); border: 1px solid var(--border);
color: var(--text); padding: .7rem .9rem; border-radius: 8px;
font-family: inherit; font-size: 1rem;
}
.form-row input:focus, .form-row textarea:focus, .form-row select:focus {
outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(168,85,247,.2);
}
.angpao-box {
background: linear-gradient(135deg, rgba(168,85,247,.1), rgba(167,139,250,.1));
border: 1px solid var(--border); border-radius: var(--radius);
padding: 1rem; margin-bottom: 1rem;
}
.angpao-amount {
display: flex; justify-content: space-between; align-items: baseline;
padding-bottom: .8rem; border-bottom: 1px dashed var(--border);
}
.angpao-amount strong { font-size: 1.8rem; color: var(--primary); }
.angpao-steps {
padding-left: 1.2rem; margin: 1rem 0;
display: flex; flex-direction: column; gap: .5rem;
}
.alert { padding: 1rem; border-radius: var(--radius); margin-bottom: 1rem; border: 1px solid; }
.alert-error { background: rgba(239,68,68,.1); border-color: var(--danger); color: #fca5a5; }
.alert-success { background: rgba(34,197,94,.1); border-color: var(--success); color: #86efac; }
.alert-info { background: rgba(167,139,250,.1); border-color: #a78bfa; color: #c4b5fd; }
.form-row .required { color: var(--danger); }
.form-row.has-error input, .form-row.has-error textarea, .form-row.has-error select { border-color: var(--danger); }
.form-row.has-error input:focus, .form-row.has-error textarea:focus, .form-row.has-error select:focus { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(239,68,68,.2); }
.field-error { display: flex; align-items: center; gap: .35rem; margin: 0; color: #fca5a5; font-size: .85rem; }
.field-error svg { flex-shrink: 0; }
.checkbox-label { display: flex; align-items: center; gap: .5rem; font-weight: 500; cursor: pointer; }
.checkbox-label input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }
.radio-group { display: flex; flex-direction: column; gap: .5rem; }
.radio-inline { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; font-weight: 500; }
.radio-inline input[type="radio"] { width: 16px; height: 16px; cursor: pointer; }
/* File-based product download card (order page) */
.file-card {
display: flex;
align-items: center;
gap: .6rem;
margin-top: .5rem;
padding: .5rem .6rem;
background: rgba(15, 15, 20, .28);
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 10px;
}
.file-card__icon {
flex-shrink: 0;
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
}
.file-card__icon img {
display: block;
width: 64%;
height: 64%;
object-fit: contain;
}
.file-card__meta {
flex: 1;
min-width: 0;
}
.file-card__name {
font-weight: 600;
font-size: .87rem;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.3;
}
.file-card__size {
margin-top: .1rem;
font-size: .74rem;
color: var(--muted);
}
.file-card__btn {
flex-shrink: 0;
min-height: 34px;
padding: .4rem .7rem;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--bg-2);
color: var(--text);
display: inline-flex;
align-items: center;
justify-content: center;
gap: .35rem;
font-size: .82rem;
font-weight: 600;
line-height: 1;
white-space: nowrap;
text-decoration: none;
transition: background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}
.file-card__btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.file-card__btn:hover {
background: var(--primary);
border-color: var(--primary);
color: #fff;
}
.file-card__btn:active { transform: scale(.94); }
@media (max-width: 480px) {
.file-card { padding: .45rem .55rem; gap: .5rem; flex-wrap: wrap; }
.file-card__icon { width: 34px; height: 34px; border-radius: 8px; }
.file-card__meta { flex-basis: calc(100% - 44px); }
.file-card__name { font-size: .84rem; }
.file-card__btn { width: 100%; min-height: 36px; }
}
@media (max-width: 820px) {
.checkout-columns {
grid-template-columns: 1fr;
}
.checkout-grid {
grid-column: 1;
}
.checkout-summary--side {
position: static;
grid-column: 1;
grid-row: auto;
left: auto;
right: auto;
max-height: none;
min-height: 0;
overflow: visible;
}
.checkout-summary-list {
flex: none;
min-height: 0;
max-height: none;
overflow-y: visible;
}
.form-row-2 { grid-template-columns: 1fr; }
}
/* ============ Order Tracking ============ */
.order-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 1.5rem;
margin-top: 1.45rem;
margin-bottom: 1.55rem;
flex-wrap: nowrap;
}
.order-head__main {
min-width: 0;
flex: 1 1 auto;
}
.order-head__back {
display: inline-flex;
align-items: center;
gap: .45rem;
margin: 0 0 1.25rem;
color: #a6a7b8;
font-size: .95rem;
font-weight: var(--fw-semibold);
line-height: 1.2;
transition: color var(--dur-fast) ease;
}
.order-head__back:hover {
color: var(--text);
}
.order-head__back .lucide {
color: currentColor;
}
.order-head__back--static {
cursor: default;
}
.order-head__back--static:hover {
color: #a6a7b8;
}
.order-head__summary {
display: flex;
align-items: center;
gap: 1.05rem;
min-width: 0;
}
.order-head__icon {
width: 60px;
height: 60px;
flex: 0 0 60px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 10px;
background:
linear-gradient(135deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015)),
var(--bg-2);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .06),
0 12px 30px rgba(var(--shadow-ink), .26);
color: #f4f5ff;
}
.order-head__title-block {
min-width: 0;
}
.order-head__title-block h1 {
display: flex;
align-items: baseline;
gap: .55rem;
flex-wrap: wrap;
margin: 0;
font-size: 1.85rem;
line-height: 1.15;
letter-spacing: 0;
color: #f1f2fb;
}
.order-head__meta {
margin: .45rem 0 0;
color: #8f91a4;
font-size: .95rem;
font-weight: var(--fw-medium);
line-height: 1.35;
}
.order-code { color: var(--primary); font-family: inherit; font-weight: var(--fw-bold); }
.status-badge, .status-chip {
display: inline-block; white-space: nowrap;
padding: .3rem .8rem; border-radius: 999px; font-size: .85rem; font-weight: 600;
background: var(--bg-3); border: 1px solid var(--border); text-transform: uppercase;
}
.status-badge { padding: .5rem 1.2rem; font-size: 1rem; }
.order-head > .status-badge {
min-width: 120px;
min-height: 38px;
justify-content: center;
align-items: center;
display: inline-flex;
margin-bottom: .7rem;
border-radius: 8px;
font-size: .95rem;
font-weight: var(--fw-bold);
text-transform: none;
/* สี/พื้น/ขอบ ปล่อยให้คลาส .status-<สถานะ> คุม เพื่อให้ป้ายเปลี่ยนตามสถานะ (ทั้ง dark/light) */
}
.status-pending { background: rgba(202,138,4,.18); color: #fde047; border-color: #ca8a04; }
.status-preorder { background: rgba(124,92,255,.15); color: #ddd6fe; border-color: #7c5cff; }
.status-processing { background: rgba(56,189,248,.15); color: #bae6fd; border-color: #38bdf8; } /* สินค้า API — รอ worker ส่งมอบ */
/* popup รอเตรียมสินค้า API หลังชำระเงิน (หน้า checkout) — โลโก้ร้านกลาง + ดาวหมุน + แสงเรือง */
.checkout-preparing-slow { color: var(--muted); }
.checkout-preparing-spin {
position: relative;
width: 96px;
height: 96px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.checkout-preparing-spin__logo {
width: 56px;
height: 56px;
border-radius: 50%;
object-fit: cover;
position: relative;
z-index: 2;
animation: preparingLogoPulse 1.6s ease-in-out infinite;
}
.checkout-preparing-spin__glow {
position: absolute;
inset: 14px;
border-radius: 50%;
background: radial-gradient(circle, rgba(168, 85, 247, .45), transparent 70%);
animation: preparingGlow 1.6s ease-in-out infinite;
}
.checkout-preparing-spin__stars {
position: absolute;
inset: 0;
animation: preparingSpin 3.2s linear infinite;
}
.checkout-preparing-spin__star {
position: absolute;
font-style: normal;
color: var(--primary);
animation: preparingTwinkle 1.2s ease-in-out infinite;
}
.checkout-preparing-spin__star--1 { top: -2px; left: 50%; margin-left: -7px; font-size: 15px; }
.checkout-preparing-spin__star--2 { top: 50%; right: -4px; margin-top: -8px; font-size: 12px; color: #f0abfc; animation-delay: .3s; }
.checkout-preparing-spin__star--3 { bottom: -2px; left: 50%; margin-left: -6px; font-size: 13px; color: var(--accent, #a78bfa); animation-delay: .6s; }
.checkout-preparing-spin__star--4 { top: 50%; left: -4px; margin-top: -7px; font-size: 11px; animation-delay: .9s; }
@keyframes preparingSpin { to { transform: rotate(360deg); } }
@keyframes preparingLogoPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.07); }
}
@keyframes preparingTwinkle {
0%, 100% { opacity: 1; }
50% { opacity: .25; }
}
@keyframes preparingGlow {
0%, 100% { opacity: .5; transform: scale(1); }
50% { opacity: 1; transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
.checkout-preparing-spin__logo,
.checkout-preparing-spin__glow,
.checkout-preparing-spin__stars,
.checkout-preparing-spin__star { animation: none !important; }
}
/* ===== Admin: สินค้า API (dropship หลายผู้ให้บริการ) — CSP ห้าม inline style attr ===== */
.supplier-balances { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.supplier-balance-card { flex: 1 1 200px; border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; }
.supplier-balance-card b { font-size: 1.15rem; }
/* --- /admin/api-products (prefix .apx-) --- */
/* คุมความกว้างคอลัมน์ไว้ที่เดียว: หัวตารางกับแถวสินค้าใช้ grid template เดียวกัน จึงตรงกันเสมอ */
.apx-list { --apx-cols: 22px minmax(200px, 2.2fr) minmax(170px, 1.6fr) 150px 74px 128px; }
.apx-input {
width: 100%;
min-height: var(--admin-control-height, 36px);
padding: .45rem .62rem;
background: var(--bg-3);
border: 1px solid var(--border);
border-radius: var(--admin-radius-control, 6px);
color: var(--text);
font-family: inherit;
font-size: .85rem;
}
.apx-input:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px var(--primary-soft);
}
select.apx-input {
appearance: none;
padding-right: 2rem;
background-image: var(--select-chevron-down);
background-repeat: no-repeat;
background-position: right .55rem center;
background-size: 16px 16px;
}
.apx-code {
padding: .1rem .35rem;
border-radius: 4px;
background: var(--bg-3);
border: 1px solid var(--border);
color: var(--muted);
font-size: .72rem;
}
.apx-col-num { text-align: right; font-variant-numeric: tabular-nums; }
.apx-chips { display: flex; gap: .4rem; flex-wrap: wrap; }
/* .chip ไม่ได้ตั้ง color ไว้ — บน